Fixed some errors.

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);
     };
 

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();

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;

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();

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;