maxgraph / maxgraph Goto Github PK

As of today, this project is distributed under a LICENSE that is not an Open-source license as defined by the Open Source Initiative (opensource.org). It is basically a modified Apache 2.0 license that includes a clause (Clause 4.e) that prevents usage in the context of Atlassian products.
That clause was introduced by David Benson (in commit 937537c) after version 4.2.2. He explained his reasons in the commit message and explicitly stated that all versions prior to that commit still fall under the Apache 2.0 license.

This repository is a fork of the archived jgraph/mxgraph library and openly communicates (#1) the interest of forming a community around it. To achieve this goal and catch more interest, there is a need to move back to the standard Apache 2.0 license.

After taking a close look on the repository history, we notice that all the source-code-related commits after the 937537c commit was made by a limited number of contributors (7 contributors listed bellow). Moving back to the Apache 2.0 license is so doable.

Proposal

I think that the best way to make this happen in a non-ambiguous way is to make the transition in two iterations:

1st iteration:

• Add an announcement about the transition process in the REAMDE.md file and explicitly state that any new contribution to this project from now on must be under the terms of the Apache 2.0 license (See #90 #91).
• Inform current PR authors about this change and get their explicit acceptance before merging into the main code base.
• Contact all the contributors that pushed source-code after 937537c (listed bellow) and ask them to add an explicit statement at the end of the current LICENSE file as follows:

All contributions to this project made by <PUT YOUR NAME HERE> are published under the terms of the Apache 2.0 license as stated in https://www.apache.org/licenses/LICENSE-2.0.

• In case the contributor is not reachable or for some reasons not willing to change the license, we can think of some possible solutions:
  • Check that the code in question is not already deprecated or re-written.
  • Re-write the non-apache-licensed code.
  • Flag it (i.e. group it in dedicated file/folder) to be used when really needed.
  • Wait until it get deprecated and remove it.

2nd iteration:

• Replace the current license file with the Apache 2.0 license.
• Move the list of authors/contributors to an AUTHORS dedicated file.

List of contributors after v4.2.2

• @mosinnik (1 commit)
   - 469c47b
• David Benson @davidjgraph (4 commits)
   NOTE: Big thanks for his work on this project. Despite the reasons that let him change the license, we hope he can make an exception for those 4 commits that falls under the the Modified-Apache-2.0 license and re-license them under the standard Apache 2.0 license.
   - 5d4f197
   - 82321b3
   - a5ac1ab
   - c85074e
• Dave Morrissey @mcyph
   Majority of the commits after v4.2.2
   NOTE: We cannot ever think about the transition without his explicit approval. We can only hope so !
• Junsik Shim @junsikshim
   Second majority of the commits after v4.2.2
   NOTE: We cannot ever think about the transition without his explicit approval. We can only hope so !
• Gary Kaganas @gkaganas-mparticle @Seebiscuit (1 commit)
   - 07d1b62
• Thomas Bouffard @tbouffard (6 commits)
   - fb7819f
   - 14f5815
   - a2a718b
   - 443ebf7
   - 3a1b08c
   - 760cbd3
• CD Yang @cd-yang (1 commit)
   - 7fa2b43

I noticed that Thomas Bouffard @tbouffard created a branch chore/license_apache2 so maybe he can share with us his opinion.

NOTE: The list do not include the editors of the README.md and documentation related files.
DISCLAIMER: I'm not a lawyer and I have no relation with the Atlassian company in any manner.

Roadmap

1st iteration:

• Add an announcement about the transition process
  • Inform current PR authors about this change
• Get approval about the transition from concerned contributors
  • @davidjgraph #89 (comment)
  • @mcyph #89 (comment)
  • @junsikshim #89 (comment)
  • @tbouffard #89 (comment)
  • @mosinnik (Reacted with a thumbs up emoji on #89 (comment))
  • @gkaganas-mparticle @Seebiscuit #89 (comment)
  • @cd-yang #89 (comment)

2nd iteration:

• Replace the current license file with the Apache 2.0 license and remove the warning in README and Pull Request template #95
• Add notice about the license in each file. See #100
• Update license in package.json files. Done in #87
• Add the list of authors/contributors that re-license their contributions to the NOTICE file. #95

Initially planned but need more discussions
We will discuss how/if we handle the contributors list this later

• Move the list of authors/contributors to the NOTICE file.
• Create section dedicated for third-party libraries/projects/code in the NOTICE file.

When migrating from mxGraph to maxGraph I realized decoding XML doesn't work if the final code is minified. This is because decoding XML elements and finding a corresponding decoder is based on the constructor name. When code is minified, those constructor names are not same as the original ones (for example, GraphDataModel, Cell, ...).
To fix this I believe the decoders and codec registry need to be refactored to not rely on constructor names anymore.
Please let me know if this a correct observation, then I can start working on a PR to address the issue.
Thanks!

Using the library gives me a deprecation warning of for XMLHttpRequest and additionally errors about not being able to open graph.txt, editor.txt and common.css. I do not want to add these files but want to remove the error and handle the deprecation issue.

Any workarounds? This happens on package load before any of my code is executed.

Currently, we can only have an image as an overlay.
It would be great to have the possibility to configure the shape of the overlay like it's done for the vertex & the edge (MxCell)

Hi. May I know is there any existing work that implements dragging elements from the sidebar and the graph is render using d3? reference . So basically is using d3 to do stuff like drawio.

Hi!

Had issue with round rectangles in my custom shape not being rendered after calling roundrect.

After looking up sources, I noticed that at the beginning of roundrect function there is check if (!this.node) return; before calling rect().

  roundrect(x: number, y: number, w: number, h: number, dx: number, dy: number) {
    if (!this.node) return;

    this.rect(x, y, w, h);

    ...

So I'm wondering why it's here. Calling begin before roundrect seems to fix issue, because begin() initialize node variable, but rect() will initialize it anyway.

Hello.
Current signature of importCells is:
importCells: (cells: Cell[], dx: number, dy: number, target?: Cell | null, evt?: MouseEvent | null, mapping?: any) => Cell[];
In the "Drag Source" example importCells being called inside DropHandler for gestureUtils.makeDraggable. It feels like its common case and current implementation makes you write something like:

const xNum: number = x || 0;
const yNum: number = y || 0;

in every TypeScript DropHandler implementation.
Original mxGraph docs says that default of x/y args in importCells is 0, so my suggestion that x and y should be optional in it's signature.

Hi!

Have issue with GraphSelectionModel. In mxGraph I added listeners to selection model like this

graph.getSelectionModel().addListener(InternalEvent.CHANGE, (sender: EventSource, evt: EventObject) => {
      ...
});

But now it doesn't seem to work. I looked at code and found that now CHANGE event is fired to graph and not selectionModel like it`s used to be.

Tried to replace graph with selectionModel and events started to fire as I expected.

This is how it used to be in mxGraph:
https://github.com/jgraph/mxgraph/blob/ff141aab158417bd866e2dfebd06c61d40773cd2/javascript/src/js/view/mxGraphSelectionModel.js#L434-L435

It`s confusing me, because in examples listener added to selection model

Looks like in newer versions of Typescript (i think 4.9 and above) this code is failed to transpile:

error is Error: src/util/EventUtils.ts(133,14): error TS2339: Property 'button' does not exist on type 'never'

The easiest way to reproduce is to copy this method into https://www.typescriptlang.org/play?ts=next

⚠️ What is concerning, that this error somehow ended in build of #133

The way to fix this error with minimum changes is replace 'which' in evt with evt.which !== undefined at line 130.

Possible reason - which is marked as deprecated, so 'which' in evt check now casts evt to never type

Is it possible to have and example added to story book - which would show how to enable edge arrows - during preview - on first edge creation? (When edge is created - it is working fine)

In #87, the EditorCodec and StylesheetCodec exports were removed because they generate errors in dependent project (at least, with ViteJS projects).

[ERROR] No matching export in "../core/dist/esm/editor/EditorToolbar.js" for import "EditorToolbarCodec"

We should understand why they generate errors and how we can restore them.

Some generated types seem invalid. When using them in an external project, the tsconfig must be set to skipLibCheck: true
Involved types (see the errors at the end of the description)

• CellArray. #101
• HierarchicalLayout and SwimlaneLayout #124

I have detected the issue in #87 (comment)

> @maxgraph/[email protected] build
> tsc && vite build

../core/dist/types/view/cell/CellArray.d.ts:4:5 - error TS2416: Property 'concat' in type 'CellArray' is not assignable to the same property in base type 'Cell[]'.
  Type '(items: any) => CellArray' is not assignable to type '{ (...items: ConcatArray<Cell>[]): Cell[]; (...items: (Cell | ConcatArray<Cell>)[]): Cell[]; }'.
    Call signature return types 'CellArray' and 'Cell[]' are incompatible.
      The types returned by 'map(...).pop()' are incompatible between these types.
        Type 'Cell | undefined' is not assignable to type 'U | undefined'.
          Type 'Cell' is not assignable to type 'U'.
            'U' could be instantiated with an arbitrary type which could be unrelated to 'Cell'.

4     concat(items: any): CellArray;
      ~~~~~~

../core/dist/types/view/cell/CellArray.d.ts:5:5 - error TS2416: Property 'splice' in type 'CellArray' is not assignable to the same property in base type 'Cell[]'.
  Type '(arg0: number, ...args: any) => CellArray' is not assignable to type '{ (start: number, deleteCount?: number | undefined): Cell[]; (start: number, deleteCount: number, ...items: Cell[]): Cell[]; }'.
    Type 'CellArray' is not assignable to type 'Cell[]'.

5     splice(arg0: number, ...args: any): CellArray;
      ~~~~~~

../core/dist/types/view/cell/CellArray.d.ts:6:5 - error TS2416: Property 'slice' in type 'CellArray' is not assignable to the same property in base type 'Cell[]'.
  Type '(...args: any) => CellArray' is not assignable to type '(start?: number | undefined, end?: number | undefined) => Cell[]'.
    Type 'CellArray' is not assignable to type 'Cell[]'.

6     slice(...args: any): CellArray;
      ~~~~~

../core/dist/types/view/cell/CellArray.d.ts:7:5 - error TS2416: Property 'map' in type 'CellArray' is not assignable to the same property in base type 'Cell[]'.
  Type '(arg0: any, ...args: any) => CellArray' is not assignable to type '<U>(callbackfn: (value: Cell, index: number, array: Cell[]) => U, thisArg?: any) => U[]'.
    Call signature return types 'CellArray' and 'U[]' are incompatible.
      The types returned by 'pop()' are incompatible between these types.
        Type 'Cell | undefined' is not assignable to type 'U | undefined'.
          Type 'Cell' is not assignable to type 'U'.
            'U' could be instantiated with an arbitrary type which could be unrelated to 'Cell'.

7     map(arg0: any, ...args: any): CellArray;
      ~~~

../core/dist/types/view/cell/CellArray.d.ts:8:5 - error TS2416: Property 'filter' in type 'CellArray' is not assignable to the same property in base type 'Cell[]'.
  Type '(arg0: any, ...args: any) => CellArray' is not assignable to type '{ <S extends Cell>(predicate: (value: Cell, index: number, array: Cell[]) => value is S, thisArg?: any): S[]; (predicate: (value: Cell, index: number, array: Cell[]) => unknown, thisArg?: any): Cell[]; }'.
    Call signature return types 'CellArray' and 'any[]' are incompatible.
      The types returned by 'map(...).pop()' are incompatible between these types.
        Type 'Cell | undefined' is not assignable to type 'U | undefined'.
          Type 'Cell' is not assignable to type 'U'.
            'U' could be instantiated with an arbitrary type which could be unrelated to 'Cell'.

8     filter(arg0: any, ...args: any): CellArray;
      ~~~~~~

../core/dist/types/view/layout/HierarchicalLayout.d.ts:203:5 - error TS2416: Property 'traverse' in type 'HierarchicalLayout' is not assignable to the same property in base type 'GraphLayout'.
  Type '(vertex: Cell, directed: boolean | undefined, edge: Cell | null | undefined, allVertices: { [key: string]: Cell; } | null | undefined, currentComp: { [key: string]: Cell | null; }, hierarchyVertices: GraphHierarchyNode[], filledVertexSet?: { ...; } | ... 1 more ... | undefined) => { ...; }' is not assignable to type '(vertex: Cell, directed?: boolean | undefined, func?: Function | undefined, edge?: Cell | undefined, visited?: Dictionary<Cell, boolean> | undefined) => void'.

203     traverse(vertex: Cell, directed: boolean | undefined, edge: Cell | null | undefined, allVertices: {
        ~~~~~~~~

../core/dist/types/view/layout/SwimlaneLayout.d.ts:220:5 - error TS2416: Property 'traverse' in type 'SwimlaneLayout' is not assignable to the same property in base type 'GraphLayout'.
  Type '(vertex: Cell | null | undefined, directed: boolean, edge: Cell | null, allVertices: { [key: string]: Cell; } | null | undefined, currentComp: { [key: string]: Cell; }, hierarchyVertices: GraphHierarchyNode[], filledVertexSet: { ...; } | ... 1 more ... | undefined, swimlaneIndex: number) => { ...; }' is not assignable to type '(vertex: Cell, directed?: boolean | undefined, func?: Function | undefined, edge?: Cell | undefined, visited?: Dictionary<Cell, boolean> | undefined) => void'.

220     traverse(vertex: Cell | null | undefined, directed: boolean, edge: Cell | null, allVertices: {

More details in jgraph#186

First: please confirm that there is an issue when using maxGraph
Confirmed: Same implementation as in mxGraph https://github.com/maxGraph/maxGraph/blob/5ecfda6/packages/core/src/util/styleUtils.ts#L58-L67 and also mentioned in #208.

A fix is available in aire-ux#1: this is a very large Pull Request containing other topics. The fix in located in mxUtils.getCurrentStyle and is the one proposed in jgraph#186

Environment

• Firefox Desktop 95.0.1 and 96.0
• Ubuntu 20.04.3 LTS
• Node v16.13.1 npm 8.3.0
• commit 3494d0f

The error is triggered when clicking on the Canvas or when selecting a shape or panning the graph as shown in the following video 👇

Uncaught ReferenceError: TouchEvent is not defined
    consume InternalMouseEvent.ts:180
    consumeMouseEvent SelectionHandler.ts:544
    mouseUp SelectionHandler.ts:1462
    fireMouseEvent EventsMixin.ts:998
    installListeners CellRenderer.ts:788

Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1693172. It seems there is no issue when touch simulation is enabled (which is disabled by default on Desktop) or a touch device is detected.
Possible fix: https://stackoverflow.com/questions/27313488/touchevent-not-working-in-firefox-and-other-website-browser#32882849

#58 fixed an issue with NO_FO but others remain.
At least, NO_FO condition for Opera browsers is outdated: #58 (review)

There are probably other constants that are not calculated accurately and therefore need to be corrected.

Since this is a fork of the archived jgraph/mxgraph and since it changed its name to maxGraph, it is a good chose to rest the version number, what I noticed in the package.json files.

It is always a good practice to use a clear versioning strategy to reduce the cognitive load for everyone developing and using this library. These days the Semantic Versioning approach is followed by many (maybe majority) of libraries and softwares.

... we propose a simple set of rules and requirements that dictate how version numbers are assigned and incremented. ... For this system to work, you first need to declare a public API. ... Once you identify your public API, you communicate changes to it with specific increments to your version number. Consider a version format of X.Y.Z (Major.Minor.Patch). Bug fixes not affecting the API increment the patch version, backwards compatible API additions/changes increment the minor version, and backwards incompatible API changes increment the major version.

Regrading the current status of the project which is maybe prune to heavy changes in the public API, I suggest that we my start with version 0.1.0 as @tbouffard proposed in his draft #87 . The Semantic Versioning 4th rule states that the major version zero (0.y.z) is for initial development. Anything MAY change at any time. The public API SHOULD NOT be considered stable.

When publishing a pre-release we just have to add a prefix like -alpha -beta -beta.1 -beta.2 -rc
The Semantic Versioning spec do not add any further rules concerning 0.y.z version but we can just apply the same rules for the x.y.z where x >= 1in a best effort way.

Proposal:

• Start with version 0.1.0-alpha for internal usage and testing. (Could be event published on npm this way)
• Increment the PATCH when integrating bug fixes
• Increment the MINOR when adding new feature and/or refactoring and/or removing features.
• When you think that others can use it and you want their feedback from a user point of view (developer that integrates this library), publish the version without -alpha suffix or replace it with a -beta suffix (i.e. 0.2.5-beta). IMO I do not think it's necessary to use a -beta suffix for 0.y.z versions since they are all considered in the development phase.
• When things get stabilized enough, publishing the 1.0.0 series could start (start with -alpha -beta -rc suffix)

Notes:

• We can create a dedicated issue related to the roadmap of the 0.1.0 version.
• The old ChangeLog file must be taken into consideration. It may be archived or we can simply add a separator to start a new chapter.

Related issues/discussions:

• #87
• #41
• #18 (reply in thread)

I use the following code to parse the XML string into SVG and render it to the DOM node

/**
 * @type renderXmlType
 */
export type renderXmlType = (this: instanceObject, xml: string) => void;

export const renderXml: renderXmlType = function (xml: string) {
    const xmlDoc = new DOMParser().parseFromString(xml, 'text/xml');
    // const xmlDoc = xmlUtils.parseXml(xml);
    const decoder = new Codec(xmlDoc);
    decoder.decode(xmlDoc.documentElement, this.graph.getDataModel());
};

const container2 = document.createElement('div');
container2.style.flex = '1';
document.body.appendChild(container2)
const _graph2 = graph.init(container2);
const xml = `<GraphDataModel><root><Cell id="0"><Object as="style"/></Cell><Cell id="1" parent="0"><Object as="style"/></Cell><Cell id="2" value="test1" vertex="1" parent="1"><Geometry _width="100" _height="100" as="geometry"/><Object align="right" shape="halfCircle" as="style"/></Cell><Cell id="3" value="test2" vertex="1" parent="1"><Geometry _x="300" _y="100" _width="100" _height="100" as="geometry"/><Object shape="halfCircle" as="style"/></Cell><Cell id="4" value="test2" vertex="1" parent="1"><Geometry _y="220" _width="100" _height="100" as="geometry"/><Object as="style"/></Cell><Cell id="__edge_1__" value="edge1" edge="1" parent="1"><Geometry relative="1" as="geometry"/><Object as="style"/></Cell><Cell id="__edge_2__" value="edge2" edge="1" parent="1"><Geometry relative="1" as="geometry"/><Object as="style"/></Cell><Cell id="__edge_3__" value="edge3" edge="1" parent="1"><Geometry relative="1" as="geometry"/><Object as="style"/></Cell></root></GraphDataModel>`;
_graph2.renderXml(xml);

But it did not succeed

I debug the source code to get this Code:

    decode(node, into) {
        this.updateElements();
        let obj = null;
        if (node != null && node.nodeType === NODETYPE.ELEMENT) {
            let ctor = null;
            try {
                // @ts-ignore
                ctor = window[node.nodeName];
            }
            catch (err) {
                // ignore
            }
            const dec = CodecRegistry.getCodec(ctor);
          
            if (dec != null) {
                obj = dec.decode(this, node, into);
            }
            else {
                obj = node.cloneNode(true);
                obj.removeAttribute('as');
           
            }
        }
        return obj;
    }

Where ctor = window [node. NodeName]; In this code, ctor is undefined because node.nodename is the method name. For example, when resolving < GraphDataModel>, node NodeName === 'GraphDataModel', but the "GraphDataModel" class does not exist on the window object, so the subsequent parsing fails, including the possibility of obtaining "Cell" and "Geometry " methods.

My solution is:

import { Cell, Geometry, GraphDataModel } from "maxgraph"
declare global {
    interface Window {
        GraphDataModel: typeof GraphDataModel;
        Cell: typeof Cell;
        Geometry: typeof Geometry;
    }
}
window.GraphDataModel = GraphDataModel;
window.Cell = Cell;
window.Geometry = Geometry;

After this configuration, it can be displayed normally

Thank you for reading

After our effort of more than one month adapting maxGraph to mxGraph, we here strongly suggest that making [email protected] to be compatible with maxGraph, or at least providing a compatible pollify layer (a tool) to ensure the stable running of the current 10000-lines code. Otherwise, the excellent refactoring library maxGraph cannot be widely used.

My idea is to centralize decisions on this area and make any architectural changes documented and explicit. Feel free to comment.

For new mxGraph users, compatibility is not an issue, but for existing ones, introducing too much changes in one step could be challenging.

Starting point: #1 (comment)

I don't intend to maintain backwards compatibility for all of the modules as I think there needs to be some architectural changes to keep the codebase maintainable going into the future, but the structure+functionality of mxGraph overall seems fairly well thought out as-is in my opinion, even if it uses an older JS code style. I think I will probably keep the class names and function parameters etc the same for the most part.

Notably, I have already removed support for VML/Internet Explorer and Edge before it shifted to the Chromium engine, as I think that significantly eases maintenance.

If too many svg nodes cause frame freezing, how to optimize the problem?

Hi!

After looking at code for a little longer, it's seems that there are many introduced side-effects, which will be VERY tiring to find with the naked eye 👁️ . What do you think about adding eslint and looking what`s up? After linting with simple set of rules, there is indeed some interesting places, which can lead to bugs/side-effects, and also some code-style inconsistencies.

For example in addTextBackground of svg canvas:

There is checks for null, but when porting, null initialization replaced with NONE value, so this check will never work again, which lead to calling very time-consuming code of addTextBackground.

But with right set of rules eslint is able to find it and scream warning Unnecessary conditional, the types have no overlap

Will be happy to make PR with eslint configured, if you interested :)

Hi,
I am recently wanted to create a demo project using maxgraph, but I didn't find the relevant guidance. I noticed that you guys are using typescript to refactoring, this is really an exciting move.
If I want to start a new project using typescript, are there any suggestions here?
thanks 😄 !

Hello, we would like to evaluate interest in forming a community of contributors / maintainers of the mxGraph project. Please answer to this issue if you are interested.

As @mcyph points out in PR #42 , it is highly desirable that the code base is converted from JavaSscript to TypeScript :
"it would have been feasible to do the significant architectural changes (that we're already a substantial way through completing) without converting to TypeScript. Strictly enforcing and annotating types makes it clearer what input parameters are required and what types of return values are possible"

Raising this issue and assigning it to both @mcyph and @junsikshim as they are in the process of doing this

If we have the possibility to change the shape of an overlay, like suggetsted on #28, it would be great to have a label on an overlay.

To do that we should be inspired by what it's done for the Vertex & the Edge (MxCell).
Each MxCell has a state defined on mxGraphView.
Each state has as property:

• shape: The shape of the MxCell -> a subclass of mxShape
• text: The shape of the label of the MxCell -> mxText
• overlays: The shapes of all the overlays of the MxCell -> An array of mxImageShape (defined on mxCellRenderer.prototype.createCellOverlays)

So, to have a label on an overlay, we need to modify the property overlays of the state to store 2 shapes by overlay, and modify all the methods where it's used.

Hello,
Does mxgraph use jscolor ?
I dont see any call to this plugin, instead there is a class called "mxJSColor" in "mxgraph/javascript/examples/grapheditor/www/jscolor/jscolor.js"
My question is , if i use mxgraph which is under Apache License 2.0 , does this licence still apply to your custom jscolor or do I have to purchase a jscolor licence in order to use it with mxgraph ?

Hello, we've been trying to use mxGraph to render a graph with hierarchical layout with zooming and panning functionalities with morph animation. The graph seems to perform well until we've increased the number of nodes to about 200 nodes. Is this a known issue in mxGraph?

I understand that mxGraph was designed to use svg from the beginning. From a technical standpoint, I'm wondering if it's possible to implement AbstractCanvas2D using canvas or webgl instead of SvgCanvas2D?

If so, what would be the level of difficulty in implementing this change? I'm curious to know if this is a feasible solution that could potentially improve performance or provide other benefits.

Any insights or suggestions would be greatly appreciated. Thank you!

Currently, the java libraries are compiled without debug information which makes it impossible for the consumer of the library to debug in case of error.

To include debug information, update the build.xml and set the property compile.debug to true

<property name="compile.debug"       value="true"/>

Current state

In mxGraph, it was possible to configure a style for a cell and to explicitly state to not merge/consider the properties of the default style (which is done by default).
This is not documented in the mxGraph API, AFAIK there is no explicit example using the feature and it is quite hidden in the code.

While reviewing the [email protected] code to compare with the migrated code in StyleSheet.getCellStyle to prepare #152, I realized that the feature is missing in maxGraph.

Here is the usual mxGraph way to configure styles that involve the default style

// Merge properties of the default style and 2 custom styles
'style1;style2;prop1=value1;.....'
// No additional styles, only merge properties from the default style
'prop1=value1;.....'

To not merge properties of the default style, the style string must start with ; (semicolon). Not obvious!

';style1;style2;prop1=value1;.....'

Documented in https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxStylesheet.js#L33-L38

To avoid the default style for a cell, add a leading semicolon to the style definition, eg. ;shadow=1

Source: https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxStylesheet.js#L211-L217

var style = defaultStyle;
if (style != null &&
      name.charAt(0) != ';')
{
      style = mxUtils.clone(style);
}
else
{
      style = new Object();
}

In maxGraph, ignoring the properties of the default style is not possible as there is no way to configure that.

Prior #152, the default style was always ignored if baseStyleNames. #152 now ensures that the default style is used for properties merge.

During the migraiton of the style management from a string representation (#82), an intermediate commit b51504d proposed to ignore the default style when baseStyleNames was set to null. This wasn't very convenient and explicit, so this hasn't been kept in the final implementation.

} else if (cellStyle.baseStyleName === null) {
      // baseStyleName is explicitly null, so don't use any default styles.
      style = {};
}

Proposal

I suggest to introduce a new property ignoreDefaultStyle (whose default value is false to keep the existing behavior) in CellStateStyle.

This will be very easy to test with automatic tests introduced in #152 and the Stylesheet.stories.js example can be updated to demonstrate how a vertex is displayed when using this new property.

Also update implementation of #293.

I'm trying to add ruler.

Is this possible or any solution?

Discussed in #161

In several stories, there is a reference to mathUtils.convertPoint which apparently is wrong, becasue convertPoint is in styleUtils.
Stories affected:

AutoLayout.stories.js
Boundary.stories.js
ContextIcons.stories.js
Drop.stories.js
EdgeTolerance.stories.js
Editing.stories.js

Example: https://github.com/maxGraph/maxGraph/blob/v0.1.0/packages/html/stories/AutoLayout.stories.js#L193-L197

Branch: development

$ npm run dev

and select @mxgraph/core.

Expected Behavior

Run core package successfully

Current Behavior

Executing command got error as follows,

Running 'npx lerna run dev --stream --scope @maxgraph/core'...
lerna notice cli v4.0.0
lerna notice filter including "@maxgraph/core"
lerna info filter [ '@maxgraph/core' ]
lerna info Executing command in 1 package: "npm run dev"
@maxgraph/core: > @maxgraph/[email protected] dev C:\Users\SE-YCD\Desktop\maxGraph\packages\core
@maxgraph/core: > webpack --watch --mode=development
@maxgraph/core: asset maxgraph.js 8.33 MiB [compared for emit] (name: main)
@maxgraph/core: runtime modules 670 bytes 3 modules
@maxgraph/core: modules by path ./src/view/ 1.94 MiB 125 modules
@maxgraph/core: modules by path ./src/util/ 563 KiB 46 modules
@maxgraph/core: modules by path ./src/editor/*.js 114 KiB
@maxgraph/core: ./src/editor/mxDefaultKeyHandler.js 4.43 KiB [built] [code generated]
@maxgraph/core: ./src/editor/mxDefaultPopupMenu.js 11.6 KiB [built] [code generated]
@maxgraph/core: ./src/editor/mxDefaultToolbar.js 17 KiB [built] [code generated]
@maxgraph/core: ./src/editor/mxEditor.js 81 KiB [built] [code generated]
@maxgraph/core: ./src/index.ts 13 KiB [built] [code generated]
@maxgraph/core: ./src/mxClient.js 14.3 KiB [built] [code generated]
@maxgraph/core: ERROR in Circular dependency detected:
@maxgraph/core: src\util\Dictionary.ts -> src\util\ObjectIdentity.ts -> src\util\Utils.ts -> src\util\Dictionary.ts
@maxgraph/core: ERROR in Circular dependency detected:
@maxgraph/core: src\util\ObjectIdentity.ts -> src\util\Utils.ts -> src\util\Dictionary.ts -> src\util\ObjectIdentity.ts
@maxgraph/core: ERROR in Circular dependency detected:
@maxgraph/core: src\util\Resources.js -> src\util\network\mxXmlRequest.js -> src\util\XmlUtils.js -> src\util\serialization\mxCodec.js -> src\util\serialization\mxCodecRegistry.js -> src\util\serialization\mxObjectCodec.js -> src\util\gui\mxLog.js -> src\util\gui\mxWindow.js -> src\util\Resources.js
@maxgraph/core: ERROR in Circular dependency detected:
@maxgraph/core: src\util\Utils.ts -> src\util\Dictionary.ts -> src\util\ObjectIdentity.ts -> src\util\Utils.ts
@maxgraph/core: ERROR in Circular dependency detected:
@maxgraph/core: src\util\XmlUtils.js -> src\util\serialization\mxCodec.js -> src\util\serialization\mxCodecRegistry.js -> src\util\serialization\mxObjectCodec.js -> src\util\gui\mxLog.js -> src\util\gui\mxWindow.js -> src\util\Resources.js -> src\util\network\mxXmlRequest.js -> src\util\XmlUtils.js
@maxgraph/core: ERROR in Circular dependency detected:
@maxgraph/core: src\util\gui\mxLog.js -> src\util\gui\mxWindow.js -> src\util\Resources.js -> src\util\network\mxXmlRequest.js -> src\util\XmlUtils.js -> src\util\serialization\mxCodec.js -> src\util\serialization\mxCodecRegistry.js -> src\util\serialization\mxObjectCodec.js -> src\util\gui\mxLog.js
@maxgraph/core: ERROR in Circular dependency detected:
@maxgraph/core: src\util\gui\mxWindow.js -> src\util\Resources.js -> src\util\network\mxXmlRequest.js -> src\util\XmlUtils.js -> src\util\serialization\mxCodec.js -> src\util\serialization\mxCodecRegistry.js -> src\util\serialization\mxObjectCodec.js -> src\util\gui\mxLog.js -> src\util\gui\mxWindow.js
@maxgraph/core: ERROR in Circular dependency detected:
@maxgraph/core: src\util\network\mxXmlRequest.js -> src\util\XmlUtils.js -> src\util\serialization\mxCodec.js -> src\util\serialization\mxCodecRegistry.js -> src\util\serialization\mxObjectCodec.js -> src\util\gui\mxLog.js -> src\util\gui\mxWindow.js -> src\util\Resources.js -> src\util\network\mxXmlRequest.js
@maxgraph/core: ERROR in Circular dependency detected:
@maxgraph/core: src\util\serialization\mxCodec.js -> src\util\serialization\mxCodecRegistry.js -> src\util\serialization\mxObjectCodec.js -> src\util\gui\mxLog.js -> src\util\gui\mxWindow.js -> src\util\Resources.js -> src\util\network\mxXmlRequest.js -> src\util\XmlUtils.js -> src\util\serialization\mxCodec.js
@maxgraph/core: ERROR in Circular dependency detected:
@maxgraph/core: src\util\serialization\mxCodecRegistry.js -> src\util\serialization\mxObjectCodec.js -> src\util\gui\mxLog.js -> src\util\gui\mxWindow.js -> src\util\Resources.js -> src\util\network\mxXmlRequest.js -> src\util\XmlUtils.js -> src\util\serialization\mxCodec.js -> src\util\serialization\mxCodecRegistry.js
@maxgraph/core: ERROR in Circular dependency detected:
@maxgraph/core: src\util\serialization\mxObjectCodec.js -> src\util\gui\mxLog.js -> src\util\gui\mxWindow.js -> src\util\Resources.js -> src\util\network\mxXmlRequest.js -> src\util\XmlUtils.js -> src\util\serialization\mxCodec.js -> src\util\serialization\mxCodecRegistry.js -> src\util\serialization\mxObjectCodec.js
@maxgraph/core: webpack 5.32.0 compiled with 11 errors in 16018 ms

More info

$ webpack -v
webpack 5.32.0
webpack-cli 4.6.0
$ node -v
v14.16.1
$ npm -v
6.14.12

Execute

$ npm run dev

and select @mxgraph/html. Storybook works fine.

I'm not sure if this is covered by #160 but it's not explicitely mentioned there. There are two issues with the Folding story compared to mxGraph[1]:

• There is no button to expand the vertex.
• Trying to drag one vertex into another causes an error cell is null.

Error in the console when dragging (with v0.4.0)

Uncaught TypeError: cell2 is null
    isLayer GraphDataModel.js:374
    getDropTarget SwimlaneMixin.js:280
    mouseMove SelectionHandler.js:759
    fireMouseEvent EventsMixin.js:640
    installListeners GraphView.js:1684

About the dragging error, this may relates to #357 which has been fixed in v0.9.0.

[1] https://jgraph.github.io/mxgraph/javascript/examples/folding.html

How to connect as shown below by default?

I mean mxgraph had it, didn't it?
https://github.com/jgraph/mxgraph/tree/ff141aab158417bd866e2dfebd06c61d40773cd2/javascript/examples/grapheditor

Since there is no npm release now, should I use npm link to install maxGraph to my reactjs-based project.

Hello, I'm new to mxGraph and tried to start experimenting from the graphEditor example. I'm trying to add a custom stencil palette by copy pasting the pattern for other palette from the Sidebar.js. But it shows as undefined instead.

So I tried to find the phrase "BPMN General" from the whole file but didn't find any. Where is the stencil palette label defined and how to change it?

I've been thinking it could be good to get a round-up of the capabilities of SVG's and the kinds of functionality it could provide to mxGraph so as to give an idea of what is possible. A lot of this may never eventuate and won't be worked on until the next release is stable. It's mainly meant as a list/discussion of things that could be done now it's been decided that other rendering engines like VML (which has been deprecated/removed from IE and Edge) won't be supported going forwards:

• Charts - some diagram libraries such as eCharts support SVG output separate from <canvas> elements (e.g. this GIST outputs static SVG that could be embedded). Chart previews could be provided for step-based data applications. Many such libs are listed at https://css-tricks.com/svg-charting-libraries/
• Maps - OpenStreetMaps can be rendered to SVG, GeoJSON/TopoJSON could be relatively easily converted, and other sites such as https://www.amcharts.com/svg-maps/ also provide maps that could be included as a base or inside frames.
• Clipart - many sites such as https://thenounproject.com/, https://openclipart.org/, https://github.com/leungwensen/svg-icon provide SVG icons or clipart that could be used inside or as frames.
• In-diagram tooltips, either as popups or fixed annotations of nodes/edges: http://tympanus.net/codrops/2014/10/07/tooltip-styles-inspiration/
• In-diagram menus: https://tympanus.net/Development/OffCanvasMenuEffects/index.html, https://tympanus.net/codrops/2014/12/15/elastic-svg-elements/, https://tympanus.net/Tutorials/AnimatedMenuIcon/
• Handwritten diagram annotation using a tablet could also be possible with SVG lines and shapes.

Of course, just because we can doesn't mean we should implement all of these, but I personally think mxGraph could go some way to making rich applications more feasible if at least some of these were implemented.

Some other applications may only be aesthetic but still be "nice to have" in some cases:

• Fancy select elements: https://tympanus.net/Development/SelectInspiration/index.html
  • Similar kinds of things possible with checkboxes and buttons
• Fancy text with SVG filters: https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
• Hover effects: https://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/
• Transition effects: https://tympanus.net/Development/CardExpansion/
• Filter effects: https://tympanus.net/codrops/2019/02/26/svg-filter-effects-moving-forward/

I am looking for an example - to configure edge behaviour similar/same - like in draw.io. How to make it draggable/reshable - wihout loosing connection to the vertexes?

hope for a new release named maxgraph, available in npmjs.

will this repo keep only javascript mxClient ?

as discussion #19 mentioned, can i make a pr to remove other code?

Please correct me if I am wrong, but pinch zoom is currently only implemented for SAFARI (and there it's implemented using the non-standard "gesture" API, in the EditorUI.js example)
https://github.com/jgraph/mxgraph/blob/ff141aab158417bd866e2dfebd06c61d40773cd2/javascript/src/js/util/mxEvent.js#L153

Here is the example of "touch" support from the docs:
https://jgraph.github.io/mxgraph/javascript/examples/touch.html

source code:
https://github.com/jgraph/mxgraph/blob/master/javascript/examples/touch.html

This example makes me really sad.
Would be great to have the pinch support implemented properly.

Hello everyone,

i'm trying to use this library whit a new bare angular project.

I tried to clone the maxGraph repository and made the npm link to it in the angular project. So far so good.

But when i'm trying to build the app i have a bunch of errors in the types descriptions (*.d.ts).

To name a few i got :

"Error: ../maxGraph/packages/core/dist/types/gui/MaxPopupMenu.d.ts:29:15 - error TS2420: Class 'MaxPopupMenu' incorrectly implements interface 'Partial'",
"Error: ../maxGraph/packages/core/dist/types/view/cell/CellArray.d.ts:4:5 - error TS2416: Property 'concat' in type 'CellArray' is not assignable to the same property in base type 'Cell[]'",
"Error: ../maxGraph/packages/core/dist/types/view/layout/HierarchicalLayout.d.ts:197:5 - error TS2416: Property 'traverse' in type 'HierarchicalLayout' is not assignable to the same property in base type 'GraphLayout'."

I had similar issue with the old mxgraph back when i installed the mxGraph Types but I don't know what to do here. I'm sure i missed something or maybe it's not really compatible with angular yet?

If you have any idea of what coud be wrong here i would appreciate any help.

Thanks in advance

Hello!

After calling removeCells on graph, cells are still rendered, but cell drag logic is broken.

I added PR #113 to fix story Visibility, which is also has code to test cells removal.
I will try to find issue, but with my current level of understanding codebase it`s seems to be difficult.

I have detected this recently with https://github.com/maxGraph/maxgraph-integration-examples/actions/workflows/check-typescript-projects.yml
The build of the project was passing on "Mar 13, 2023, 5:19 AM GMT+1" but failed on "Mar 20, 2023, 2:53 PM GMT+1"

The package.json declares ^4.9.3, version 4.9.5, published on 2023-01-30 seems to be the latest 4.9.x version to date.

Today, I also reproduced it while building . See https://github.com/maxGraph/maxGraph/actions/runs/4340510700/jobs/7888241955.
A previous built using the same code was passing on 2023-03-06 https://github.com/maxGraph/maxGraph/actions/runs/4340510700/jobs/7579118864

 > @maxgraph/[email protected] generate-esm
> tsc --emitDeclarationOnly false --declaration false --declarationDir null

Error: src/view/mixins/ValidationMixin.ts(324,10): error TS2365: Operator '>' cannot be applied to types 'number' and 'string | number'.
Error: src/view/mixins/ValidationMixin.ts(330,10): error TS2365: Operator '>' cannot be applied to types 'number' and 'string | number'.
Error: src/view/other/Multiplicity.ts(160,45): error TS2365: Operator '>=' cannot be applied to types 'number' and 'string | number'.
Error: src/view/other/Multiplicity.ts(161,47): error TS2365: Operator '>=' cannot be applied to types 'number' and 'string | number'.
Error: Process completed with exit code 2.

Notes

May be related to microsoft/TypeScript#52753 but we are not supposed to use TS v5.

Based on the codemod provided by @adrianhdezm : https://github.com/adrianhdezm/mxgraph-codemod
regenerate a base es6 version of mxGraph from this repository sources and test it.

To run the codemod :
launch node on the index.js with the clone of this mxGraph repo in javascript dir in parameter :
e.g. : node index.js /home/user/mxgraph-clone/javascript

I'm not yet sure if it is the correct procedure, @adrianhdezm could you confirm?

Version: release 0.1.0

I was trying to decode the following XML:

<GraphDataModel><root><Cell id="0"><Object as="style"/></Cell><Cell id="1" parent="0"><Object as="style"/></Cell><Cell id="B_#0" value="rootNode" vertex="1" parent="1"><Geometry _x="100" _y="100" _width="100" _height="80" as="geometry"/><Object as="style"/></Cell></root></GraphDataModel>

const doc = xmlUtils.parseXml(str);
const codec = new Codec(doc);
codec.decode(doc.documentElement, this.graph.getDataModel());

And got error like this:

Uncaught Error: Invalid x supplied.
    at set x [as x] (Point.js:44:19)
    at GraphView.updateCellState (GraphView.js:743:32)
    at GraphView.validateCellState (GraphView.js:676:26)
    at GraphView.validateCellState (GraphView.js:691:30)
    at GraphView.validateCellState (GraphView.js:691:30)
    at GraphView.validate (GraphView.js:444:58)
    at ModelEditorGraph.graphModelChanged (Graph.js:429:19)
    at Graph.graphModelChangeListener (Graph.js:348:18)
    at GraphDataModel.fireEvent (EventSource.js:132:41)
    at edit.notify (GraphDataModel.js:958:25)

After doing a lot of debugging, I found that CodecRegistry.getCodecByName(node.nodeName) does not return the default ObjectCodec for some elements (like Point, Geometry, etc... ). Therefore the decoding procedure returns the original xml element, and breaks later procedure.

I also found that if I do encoding before decoding, no error will occurs because encoding procedure uses CodecRegistry.getCodec(constructor_) which Registers a new default codec for the given constructor, if no codec has been previously defined.

My possible workaround: Manually register ObjectCodec for missing codecs:

CodecRegistry.register(new ObjectCodec(new Geometry()));
CodecRegistry.register(new ObjectCodec(new Point()));
CodecRegistry.register(new ObjectCodec(new Array()));

Perhaps CodecRegistry.getCodecByName(node.nodeName) should return a default codec like CodecRegistry.getCodec(constructor_) does?

This has been detected in Markers.stories.js while developing #157

The position of the child vertex is not accurate as shown in the following comparison.
The vertex is declared as a child of the edge and its geometry is relative.

[email protected]	maxGraph

When activating the panning and move the graph, we see that the label seems correctly positioned with the vertex (envelope icon).
When selecting the edge and moving it, the child vertex doesn't move in maxGraph.

[email protected]	maxGraph

Hi,

I tested some of the examples on the weekend. A lot seems to work already, huge thank you for all your work!
I guess you are already aware of this stuff, but i still wanted to list some things I noticed in the examples:

1. Anchors: ConnectionPoints not showing --> #77
2. Collaps: Doesn't work --> #385
3. ContextIcons: No icons showing
4. Swimlanes: Empty example --> #156
5. Validation: There was no highlighting and it started to lag pretty heavy, when i hovered over the targetElements (lots of errors in the browser console) --> see #362
6. UserObject: Vertex not showing --> #350
   ...

Tried to adjust the Toolbar example:

• Connections can be created/moved inside of shapes (i dont think that is intended?)
• ConnectionHandler suggests method "createElement()", i believe it should be "createTarget()"?

Dont know if that is of any help, but atleast wanted to report what i found.
I am unsure if i can really test in the future, but it might be possible.
If so is there any guide how to test this repo in a good way and how to report them so that it is actually useful to you guys?

Thanks

We have solved the versioning issue, see #92. So we can release a version and publish the package on npm.
See also #41 (May 2021).

Documentation tasks

• Review milestone 0.1.0
• Configure GitHub auto-generated release notes: https://docs.github.com/en/repositories/releasing-projects-on-github/automatically-generated-release-notes#configuring-automatically-generated-release-notes #142
• Review repository labels and the labels applied to merged Pull Requests. Labels are used to auto-generate the GH release notes
• Update the Changelog file. List fixes or add a link to the GH release. #146

Content of the npm package

• Ensure that a README file is included. To avoid duplication with the main README, it can provide minimal information (description, how to install) and a link to the main README (https://github.com/maxGraph/maxGraph#readme) #144
• Include the LICENSE files #144

Publishing tasks

• Publish the npm package: @maxgraph/[email protected]. This will be probably done from a local dev machine. If so list the command that have been run in a comment to let other review. To be improve later by automating with GitHub Actions for instance. Publish steps: #141 (comment)
• Update the README #145
  • add a npm status badge
  • update the status paragraph and explain how to install the package