Merge pull request #25 from junsikshim/examples

Converted all the examples for '@mxgraph/html'.

package-lock.json

@@ -4245,6 +4245,38 @@
         "escape-string-regexp": "^1.0.5"
       }
     },
+    "file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+          "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -5368,12 +5400,6 @@
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
-    "klona": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
-      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
-      "dev": true
-    },
     "lerna": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/lerna/-/lerna-4.0.0.tgz",
@@ -7270,16 +7296,6 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
-    "sass-loader": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-11.0.1.tgz",
-      "integrity": "sha512-Vp1LcP4slTsTNLEiDkTcm8zGN/XYYrZz2BZybQbliWA8eXveqA/AxsEjllQTpJbg2MzCsx/qNO48sHdZtOaxTw==",
-      "dev": true,
-      "requires": {
-        "klona": "^2.0.4",
-        "neo-async": "^2.6.2"
-      }
-    },
     "schema-utils": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
@@ -8044,6 +8060,39 @@
         "punycode": "^2.1.0"
       }
     },
+    "url-loader": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.27",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+          "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -32,8 +32,9 @@
     "lerna": "^4.0.0",
     "@lerna/filter-options": "4.0.0",
     "prettier": "^2.2.1",
-    "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
+    "url-loader": "^4.1.1",
+    "file-loader": "^6.2.0",
     "webpack": "^5.32.0",
     "webpack-cli": "^4.6.0",
     "webpack-merge": "^5.7.3",

packages/core/src/handler/mxGraphHandler.js

@@ -15,7 +15,7 @@ import mxConstants from '../util/mxConstants';
 import mxDictionary from '../util/datatypes/mxDictionary';
 import mxCellHighlight from './mxCellHighlight';
 import mxRectangle from '../util/datatypes/mxRectangle';
-import { isAltDown, isMultiTouchEvent } from '../util/mxEventUtils';
+import { getClientX, getClientY, isAltDown, isMultiTouchEvent } from '../util/mxEventUtils';
 
 /**
  * Class: mxGraphHandler
@@ -1709,8 +1709,8 @@ class mxGraphHandler {
       if (pState != null) {
         let pt = mxUtils.convertPoint(
           this.graph.container,
-          mxEvent.getClientX(evt),
-          mxEvent.getClientY(evt)
+          getClientX(evt),
+          getClientY(evt)
         );
         const alpha = mxUtils.toRadians(
           mxUtils.getValue(pState.style, mxConstants.STYLE_ROTATION) || 0

packages/core/src/handler/mxKeyHandler.js

@@ -7,7 +7,7 @@
 
 import mxEvent from '../util/event/mxEvent';
 import { isAncestorNode } from '../util/mxDomUtils';
-import { getSource, isAltDown, isConsumed, isShiftDown } from '../util/mxEventUtils';
+import { getSource, isAltDown, isConsumed, isControlDown as _isControlDown, isShiftDown } from '../util/mxEventUtils';
 import mxUtils from '../util/mxUtils';
 
 /**
@@ -235,7 +235,7 @@ class mxKeyHandler {
    * evt - Key event whose control key pressed state should be returned.
    */
   isControlDown(evt) {
-    return mxEvent.isControlDown(evt);
+    return _isControlDown(evt);
   }
 
   /**

packages/core/src/index.ts

@@ -1,5 +1,17 @@
 import mxClient from './mxClient';
 
+import mxCellAttributeChange from './atomic_changes/mxCellAttributeChange';
+import mxChildChange from './atomic_changes/mxChildChange';
+import mxCollapseChange from './atomic_changes/mxCollapseChange';
+import mxCurrentRootChange from './atomic_changes/mxCurrentRootChange';
+import mxGeometryChange from './atomic_changes/mxGeometryChange';
+import mxRootChange from './atomic_changes/mxRootChange';
+import mxSelectionChange from './atomic_changes/mxSelectionChange';
+import mxStyleChange from './atomic_changes/mxStyleChange';
+import mxTerminalChange from './atomic_changes/mxTerminalChange';
+import mxValueChange from './atomic_changes/mxValueChange';
+import mxVisibleChange from './atomic_changes/mxVisibleChange';
+
 import mxDefaultKeyHandler from './editor/mxDefaultKeyHandler';
 import mxDefaultPopupMenu from './editor/mxDefaultPopupMenu';
 import mxDefaultToolbar from './editor/mxDefaultToolbar';
@@ -173,6 +185,8 @@ import mxOutline from './view/graph/mxOutline';
 import mxPrintPreview from './view/graph/mxPrintPreview';
 import mxSwimlaneManager from './view/graph/mxSwimlaneManager';
 
+import '../css/common.css';
+
 export default {
   mxClient,
   mxLog,
@@ -320,5 +334,16 @@ export default {
 	mxGestureUtils,
 	mxStringUtils,
 	mxXmlUtils,
-	mxDomHelpers
+	mxDomHelpers,
+	mxCellAttributeChange,
+	mxChildChange,
+	mxCollapseChange,
+	mxCurrentRootChange,
+	mxGeometryChange,
+	mxRootChange,
+	mxSelectionChange,
+	mxStyleChange,
+	mxTerminalChange,
+	mxValueChange,
+	mxVisibleChange
 };

packages/core/src/layout/hierarchical/stage/mxCoordinateAssignment.js

@@ -990,10 +990,11 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
         let downSegCount = 0;
         const upXPositions = [];
         const downXPositions = [];
+        let i = 0;
 
         let currentX = cell.getGeneralPurposeVariable(cell.minRank + 1);
 
-        for (let i = cell.minRank + 1; i < cell.maxRank - 1; i += 1) {
+        for (i = cell.minRank + 1; i < cell.maxRank - 1; i += 1) {
           // Attempt to straight out the control point on the
           // next segment up with the current control point.
           const nextX = cell.getX(i + 1);

packages/core/src/layout/hierarchical/stage/mxMinimumCycleRemover.js

@@ -6,6 +6,7 @@
  */
 import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage';
 import mxUtils from '../../../util/mxUtils';
+import { clone } from '../../../util/mxCloneUtils';
 
 /**
  * Class: mxMinimumCycleRemover
@@ -85,7 +86,7 @@ class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
     // If there are any nodes that should be nodes that the dfs can miss
     // these need to be processed with the dfs and the roots assigned
     // correctly to form a correct internal model
-    const seenNodesCopy = mxUtils.clone(seenNodes, null, true);
+    const seenNodesCopy = clone(seenNodes, null, true);
 
     // Pick a random cell and dfs from it
     model.visit(

packages/core/src/serialization/mxCodec.js

@@ -5,7 +5,6 @@
  * Type definitions from the typed-mxgraph project
  */
 
-import mxUtils from '../util/mxUtils';
 import mxCellPath from '../view/cell/mxCellPath';
 import mxCodecRegistry from './mxCodecRegistry';
 import mxConstants from '../util/mxConstants';
@@ -13,6 +12,7 @@ import mxCell from '../view/cell/mxCell';
 import mxLog from '../util/gui/mxLog';
 import { getFunctionName } from '../util/mxStringUtils';
 import { importNode, isNode } from '../util/mxDomUtils';
+import { createXmlDocument } from '../util/mxXmlUtils';
 
 /**
  * XML codec for JavaScript object graphs. See {@link mxObjectCodec} for a
@@ -120,7 +120,7 @@ import { importNode, isNode } from '../util/mxDomUtils';
  */
 class mxCodec {
   constructor(document) {
-    this.document = document || mxUtils.createXmlDocument();
+    this.document = document || createXmlDocument();
     this.objects = [];
   }
 

packages/core/src/shape/edge/mxArrow.js

@@ -29,7 +29,7 @@ class mxArrow extends mxShape {
    */
   // augmentBoundingBox(bbox: mxRectangle): void;
   augmentBoundingBox(bbox) {
-    super.augmentBoundingBox.apply(bbox);
+    super.augmentBoundingBox(bbox);
 
     const w = Math.max(this.arrowWidth, this.endSize);
     bbox.grow((w / 2 + this.strokewidth) * this.scale);

packages/core/src/util/datatypes/style/mxEdgeStyle.js

@@ -601,6 +601,7 @@ class mxEdgeStyle {
     }
 
     const lastInx = pts.length - 1;
+    let pe = null;
 
     // Adds the waypoints
     if (controlHints != null && controlHints.length > 0) {
@@ -634,7 +635,7 @@ class mxEdgeStyle {
         }
       }
 
-      const pe = pts[lastInx];
+      pe = pts[lastInx];
 
       if (pe != null && hints[hints.length - 1] != null) {
         if (Math.abs(hints[hints.length - 1].x - pe.x) < tol) {

packages/core/src/util/datatypes/style/mxStylesheet.js

@@ -7,6 +7,7 @@
 import mxConstants from '../../mxConstants';
 import mxPerimeter from './mxPerimeter';
 import mxUtils from '../../mxUtils';
+import { clone } from '../../mxCloneUtils';
 
 /**
  * @class mxStylesheet
@@ -190,7 +191,7 @@ class mxStylesheet {
       const pairs = name.split(';');
 
       if (style != null && name.charAt(0) !== ';') {
-        style = mxUtils.clone(style);
+        style = clone(style);
       } else {
         style = {};
       }

packages/core/src/util/mxGestureUtils.js

@@ -1,5 +1,6 @@
 import mxDragSource from './drag_pan/mxDragSource';
 import mxPoint from './datatypes/mxPoint';
+import mxConstants from './mxConstants';
 
 /**
  * Function: makeDraggable

packages/core/webpack.config.js

@@ -17,6 +17,22 @@ module.exports = merge(base, {
     library: 'mxgraph',
     libraryTarget: 'umd'
   },
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.(ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
+        loader: 'url-loader',
+        options: {
+          name: 'images/[hash].[ext]',
+          limit: 10000,
+        },
+      }
+    ]
+  },
   plugins: [
     new webpack.optimize.LimitChunkCountPlugin({
       maxChunks: 1,

packages/html/.storybook/preview.js

@@ -8,3 +8,14 @@ export const parameters = {
     },
   },
 }
+
+export const globalTypes = {
+  width: {
+    type: 'number',
+    defaultValue: 800
+  },
+  height: {
+    type: 'number',
+    defaultValue: 600
+  }
+};

packages/html/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "start-storybook -p 8901"
+    "dev": "start-storybook -p 8901 -s ./public"
   },
   "author": "",
   "license": "ISC",