feat(id): produce UUID with generateId. move to /utils/Identifier.js

package.json

@@ -3,7 +3,10 @@
   "description": "Diagram component for vue.js, inspired by react-diagrams",
   "version": "0.0.1-development",
   "license": "MIT",
-  "main": "src/index.js",
+  "main": "dist/vue-diagrams.common.js",
+  "module": "dist/vue-diagrams.esm.js",
+  "unpkg": "dist/vue-diagrams.js",
+  "jsdelivr": "dist/vue-diagrams.js",
   "files": [
     "src",
     "dist/*.js"
@@ -45,55 +48,55 @@
     "semantic-release": "semantic-release"
   },
   "devDependencies": {
-    "@commitlint/cli": "^6.2.0",
+    "@commitlint/cli": "^6.0.2",
     "@commitlint/config-conventional": "^5.2.3",
     "@semantic-release/changelog": "^1.0.0",
     "@semantic-release/git": "^2.0.1",
     "@semantic-release/github": "^3.0.1",
     "@semantic-release/npm": "^2.6.1",
-    "@storybook/vue": "^3.4.12",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.6",
-    "babel-jest": "^22.4.4",
+    "@storybook/vue": "^3.3.3",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.1.2",
+    "babel-jest": "^22.0.4",
     "babel-plugin-dynamic-import-node": "^1.2.0",
-    "babel-plugin-module-resolver": "^3.2.0",
+    "babel-plugin-module-resolver": "^3.0.0",
     "babel-preset-vue-app": "^2.0.0",
-    "commitizen": "^2.10.1",
+    "commitizen": "^2.9.6",
     "cz-conventional-changelog": "^2.1.0",
     "eslint": "^4.14.0",
-    "eslint-config-prettier": "^2.10.0",
+    "eslint-config-prettier": "^2.9.0",
     "eslint-import-resolver-babel-module": "^4.0.0",
-    "eslint-plugin-html": "^4.0.6",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^21.27.2",
+    "eslint-plugin-html": "^4.0.1",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jest": "^21.5.0",
     "eslint-plugin-prettier": "2.4.0",
-    "eslint-plugin-vue": "^4.7.1",
+    "eslint-plugin-vue": "^4.0.1",
     "husky": "^0.14.3",
-    "jest": "^22.4.4",
+    "jest": "^22.0.4",
     "jest-serializer-html": "^5.0.0",
     "jest-serializer-vue": "^0.3.0",
-    "jest-vue-preprocessor": "^1.7.1",
+    "jest-vue-preprocessor": "^1.3.1",
     "lint-staged": "^6.0.0",
-    "lodash": "^4.17.20",
-    "prettier": "^1.19.1",
+    "lodash": "^4.17.4",
+    "prettier": "^1.9.2",
     "rollup": "^0.54.0",
-    "rollup-plugin-babel": "^3.0.7",
+    "rollup-plugin-babel": "^3.0.3",
     "rollup-plugin-commonjs": "^8.2.6",
     "rollup-plugin-filesize": "^1.5.0",
-    "rollup-plugin-json": "^2.3.1",
+    "rollup-plugin-json": "^2.3.0",
     "rollup-plugin-license": "^0.5.0",
-    "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^2.0.1",
     "rollup-plugin-vue": "^3.0.0",
     "semantic-release": "^12.2.2",
-    "stylus": "^0.54.8",
+    "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "uglify-es": "^3.3.4",
-    "vue": "^2.6.12",
+    "vue": "^2.5.13",
     "vue-jest": "^1.4.0",
-    "vue-loader": "^13.7.3",
-    "vue-template-compiler": "^2.6.12"
+    "vue-loader": "^13.6.2",
+    "vue-template-compiler": "^2.5.13"
   },
   "config": {
     "commitizen": {
@@ -122,8 +125,8 @@
     ]
   },
   "dependencies": {
-    "draggable-vue-directive": "^1.2.0",
-    "svg-pan-zoom": "^3.6.1",
+    "draggable-vue-directive": "^1.1.0",
+    "svg-pan-zoom": "^3.5.3",
     "vue-svg-pan-zoom": "^0.1.0"
   }
 }

src/DiagramModel.js

@@ -1,20 +1,5 @@
 import DiagramNode from "./DiagramNode";
-
-/**
- * Generate a UUID (v1)
- * @param {Integer} c clock-seq-and-reserved clock-seq-low
- * @return {String} The UUID
- * http://www.rfcreader.com/#rfc4122_line385 allows random instead of MAC address
- * https://www.famkruithof.net/uuid/uuidgen
- * https://realityripple.com/Tools/UnUUID/
- */
-export function generateId(c = 9999) {
-  const t = ((Date.now() + 12219292800000) * 1e4).toString(16);
-  const n = crypto.getRandomValues(new Uint8Array(6)).reduce((sum, x, i) => {
-    return sum + (i === 0 ? x | 1 : x).toString(16).padStart(2, "0");
-  }, "");
-  return `${t.slice(-8)}-${t.slice(-12, -8)}-1${t.slice(0, 3)}-${c}-${n}`;
-}
+import { generateId } from "./utils/Identifier";
 
 /**
  * @class DiagramModel
@@ -38,17 +23,8 @@ class DiagramModel {
    * @param {Integer} height Height
    * @return {Node} The node created
    */
-  addNode(object, x, y, width, height) {
-    let id = null;
-    if (typeof object === "object") {
-      if (object.id != undefined) {
-        id = object.id;
-      }
-    }
-    if (id === null) {
-      id = generateId();
-    }
-    const newNode = new DiagramNode(id, object, x, y, width, height);
+  addNode(title, x, y, width, height) {
+    const newNode = new DiagramNode(generateId(), title, x, y, width, height);
     this._model.nodes.push(newNode);
     return newNode;
   }
@@ -73,21 +49,6 @@ class DiagramModel {
     this._model.nodes.splice(index, 1);
   }
 
-  /**
-   * Removes a port.
-   */
-  removePort(node, port) {
-    const index = node.ports.indexOf(port);
-    for (var j = 0; j < this._model.links.length; j++) {
-      const currentLink = this._model.links[j];
-      if (currentLink.from === port.id || currentLink.to === port.id) {
-        this.deleteLink(currentLink);
-        j--;
-      }
-    }
-    node.ports.splice(index, 1);
-  }
-
   deleteLink(link) {
     const index = this._model.links.indexOf(link);
     this._model.links.splice(index, 1);
@@ -104,8 +65,8 @@ class DiagramModel {
       id: generateId(),
       from: from,
       to: to,
-      positionFrom: { x: 0, y: 0 },
-      positionTo: { x: 0, y: 0 },
+      positionFrom: {},
+      positionTo: {},
       points
     });
   }

src/DiagramNode.js

@@ -1,23 +1,4 @@
-import { generateId } from "./DiagramModel";
-
-/**
- * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
- *
- * @param {String} text The text to be rendered.
- * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
- *
- * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
- */
-function getTextWidth(text, font) {
-  // re-use canvas object for better performance
-  var canvas =
-    getTextWidth.canvas ||
-    (getTextWidth.canvas = document.createElement("canvas"));
-  var context = canvas.getContext("2d");
-  context.font = font;
-  var metrics = context.measureText(text);
-  return metrics.width;
-}
+import { generateId } from "./utils/Identifier";
 
 /**
  * @class DiagramNode
@@ -32,121 +13,48 @@ class DiagramNode {
    * @param  {Integer} height [description]
    * @param  {Integer} id [description]
    */
-  constructor(id, object, x, y, width, height) {
-    if (typeof object === "object") {
-      this.object = object;
-      this.title = object.title;
-    } else {
-      this.title = object;
-    }
+  constructor(id, title, x, y, width, height) {
+    this.title = title;
     this.x = x;
     this.y = y;
-
-    this.width = width ? width : 10;
-    this.height = height ? height : 10;
+    this.width = width;
+    this.height = height;
     this.ports = [];
-    this.recalculateNodeWidth();
   }
 
   /**
    * Adds a new "in" port into the node.
    * @param {String} name
    * @return {Integer} The port id
    */
-  addInPort(object) {
-    return this.addPort(object, "in");
-  }
+  addInPort(name) {
+    let newPort = {
+      id: generateId(),
+      type: "in",
+      name
+    };
 
-  /**
-   * Adds a new "out" port into the node.
-   * @param {String} name
-   * @return {Integer} The port id
-   */
-  addOutPort(object) {
-    return this.addPort(object, "out");
+    this.ports.push(newPort);
+
+    return newPort.id;
   }
 
   /**
-   * Adds a new port into the node.
+   * Adds a new "out" port into the node.
    * @param {String} name
-   * @param {String} type
    * @return {Integer} The port id
    */
-  addPort(object, type) {
+  addOutPort(name) {
     let newPort = {
       id: generateId(),
-      type: type,
-      deletable: undefined,
-      isASpacer: undefined,
-      fontSize: 8,
-      fontFamily: "sans-serif",
-      connectorCategory: "",
-      connectorCategoryTextColor: undefined,
-      connectorCategoryTagColor: undefined,
-      connectorCategoryTagColorHover: undefined,
-      connectorNameTagColor: undefined,
-      connectorNameTextColor: undefined
+      type: "out",
+      name
     };
 
-    if (typeof object === "object") {
-      newPort.object = object;
-      newPort.name = object.title;
-      newPort.deletable = object.deletable;
-      newPort.isASpacer = object.isASpacer;
-      newPort.fontSize = object.fontSize;
-      newPort.fontFamily = object.fontFamily;
-      newPort.connectorCategory = object.connectorCategory;
-      newPort.connectorCategoryTextColor = object.connectorCategoryTextColor;
-      newPort.connectorCategoryTagColor = object.connectorCategoryTagColor;
-      newPort.connectorCategoryTagColorHover =
-        object.connectorCategoryTagColorHover;
-      newPort.connectorNameTagColor = object.connectorNameTagColor;
-      newPort.connectorNameTextColor = object.connectorNameTextColor;
-    } else {
-      newPort.name = object;
-    }
-
     this.ports.push(newPort);
 
-    this.recalculateNodeWidth();
-
     return newPort.id;
   }
-
-  /**
-   * Recalculate the width of the node based on its ports sizes.
-   */
-  recalculateNodeWidth() {
-    let maxWidthIn = 0;
-    let maxWidthOut = 0;
-    let portWidth = 0;
-    const widthMargin = 70 + 5;
-
-    // Check the width required for the Title
-    let newWidth =
-      getTextWidth(this.title, "bold 14pt sans-serif") * 0.85 +
-      20 /* for the thickness and spaces around */ +
-      14; /* for the Delete/Close button */
-    if (this.width < newWidth) {
-      this.width = newWidth;
-    }
-
-    // Check the width required for the longest In and Out ports
-    this.ports.forEach(p => {
-      portWidth = getTextWidth(p.name, p.fontSize + "pt " + p.fontFamily);
-
-      if (p.type === "in" && portWidth > maxWidthIn) {
-        maxWidthIn = portWidth;
-      }
-      if (p.type === "out" && portWidth > maxWidthOut) {
-        maxWidthOut = portWidth;
-      }
-    });
-
-    if (this.width < maxWidthIn + maxWidthOut + widthMargin) {
-      this.width = maxWidthIn + maxWidthOut + widthMargin;
-    }
-  }
 }
 
 export default DiagramNode;