diff --git a/packages/core/src/editor/mxEditor.js b/packages/core/src/editor/mxEditor.js index 27c3db98f..128744bac 100644 --- a/packages/core/src/editor/mxEditor.js +++ b/packages/core/src/editor/mxEditor.js @@ -1455,9 +1455,8 @@ class mxEditor extends EventSource { * container and is initialized from {@link setGraphContainer}. * @returns graph instance */ - // createGraph(): mxGraph; createGraph() { - const graph = new Graph(null, null, this.graphRenderHint); + const graph = new Graph(); // Enables rubberband, tooltips, panning graph.setTooltips(true); @@ -1484,13 +1483,17 @@ class mxEditor extends EventSource { // Redirects the function for creating the // popupmenu items - graph.popupMenuHandler.factoryMethod = (menu, cell, evt) => { + const popupMenuHandler = graph.getPlugin('PopupMenuHandler'); + + popupMenuHandler.factoryMethod = (menu, cell, evt) => { return this.createPopupMenu(menu, cell, evt); }; // Redirects the function for creating // new connections in the diagram - graph.connectionHandler.factoryMethod = (source, target) => { + const connectionHandler = graph.getPlugin('ConnectionHandler'); + + connectionHandler.factoryMethod = (source, target) => { return this.createEdge(source, target); }; diff --git a/packages/core/src/view/Graph.ts b/packages/core/src/view/Graph.ts index e76fe3708..2e1ab2ee8 100644 --- a/packages/core/src/view/Graph.ts +++ b/packages/core/src/view/Graph.ts @@ -383,7 +383,7 @@ class Graph extends EventSource { ) { super(); - this.container = container; + this.container = container ?? document.createElement('div'); this.model = model ?? new Model(); this.plugins = plugins; this.cellRenderer = this.createCellRenderer(); diff --git a/packages/html/stories/Guides.stories.js b/packages/html/stories/Guides.stories.js index 026b57160..625312007 100644 --- a/packages/html/stories/Guides.stories.js +++ b/packages/html/stories/Guides.stories.js @@ -39,10 +39,10 @@ const Template = ({ label, ...args }) => { }; // Defines the guides to be red (default) - Constants.GUIDE_COLOR = '#FF0000'; + // Constants.GUIDE_COLOR = '#FF0000'; // Defines the guides to be 1 pixel (default) - Constants.GUIDE_STROKEWIDTH = 1; + // Constants.GUIDE_STROKEWIDTH = 1; // Enables snapping waypoints to terminals EdgeHandler.prototype.snapToTerminals = true; diff --git a/packages/html/stories/Indicators.stories.js b/packages/html/stories/Indicators.stories.js index 8156b145f..660150345 100644 --- a/packages/html/stories/Indicators.stories.js +++ b/packages/html/stories/Indicators.stories.js @@ -37,8 +37,8 @@ const Template = ({ label, ...args }) => { style.imageVerticalAlign = 'top'; // indicator v-alignment style.imageAlign = 'center'; style.indicatorColor = 'green'; - delete style.strokeColor; // transparent - delete style.fillColor; // transparent + // delete style.strokeColor; // transparent + // delete style.fillColor; // transparent // Creates a style with an indicator style = graph.getStylesheet().getDefaultEdgeStyle(); diff --git a/packages/html/stories/SwimLanes.stories.js b/packages/html/stories/SwimLanes.stories.js index bc729b82f..82ae32942 100644 --- a/packages/html/stories/SwimLanes.stories.js +++ b/packages/html/stories/SwimLanes.stories.js @@ -51,7 +51,9 @@ const Template = ({ label, ...args }) => { graph.border = 80; graph.getView().translate = new Point(graph.border / 2, graph.border / 2); graph.setResizeContainer(true); - graph.graphHandler.setRemoveCellsFromParent(false); + + const graphHandler = graph.getPlugin('GraphHandler'); + graphHandler.setRemoveCellsFromParent(false); // Changes the default vertex style in-place let style = graph.getStylesheet().getDefaultVertexStyle(); @@ -63,7 +65,7 @@ const Template = ({ label, ...args }) => { style.horizontal = false; style.fontColor = 'black'; style.strokeColor = 'black'; - delete style.fillColor; + // delete style.fillColor; style = CloneUtils.clone(style); style.shape = Constants.SHAPE_RECTANGLE;