organize stories, improve editable titles, add tree layout, custom no…

…des, and editable prop in Diagram root component
gwenaelp · Mar 21, 2023 · 71b77ff · 71b77ff
1 parent 5ef7ae0
commit 71b77ff
Show file tree

Hide file tree

Showing 24 changed files with 730 additions and 251 deletions.
diff --git a/src/DiagramModel.js b/src/DiagramModel.js
@@ -13,7 +13,7 @@ class DiagramModel {
   constructor() {
     this._model = {
       nodes: [],
-      links: []
+      links: [],
     };
   }
 
@@ -24,17 +24,14 @@ class DiagramModel {
    * @param {Integer} y      Y Coordinate
    * @param {Integer} width  Width
    * @param {Integer} height Height
+   * @param {Object} options Optional
    * @return {Node} The node created
    */
   addNode(title, x, y, width, height, options) {
     if (options === undefined) {
       options = {};
     }
     const newNode = new DiagramNode(this, generateId(), title, x, y, width, height, options);
-    if (options.type === 'image') {
-      newNode.addInPort();
-      newNode.addOutPort();
-    }
     this._model.nodes.push(newNode);
     return newNode;
   }
@@ -66,6 +63,7 @@ class DiagramModel {
    * @param {Integer} from   Port id. Must be an out port
    * @param {Integer} to     Port id. Must be an in port
    * @param {Array}  points  Optional. Array of points to make the link represented as a segmented line
+   * @param {Object} options Optional
    */
   addLink(from, to, points = [], options = {}) {
     this._model.links.push({

diff --git a/src/DiagramNode.js b/src/DiagramNode.js
@@ -36,11 +36,12 @@ class DiagramNode {
    * @param {String} name
    * @return {Integer} The port id
    */
-  addInPort(name) {
+  addInPort(name, options) {
     let newPort = {
       id: generateId(),
       type: "in",
-      name
+      name,
+      options,
     };
 
     this.ports.push(newPort);
@@ -53,11 +54,12 @@ class DiagramNode {
    * @param {String} name
    * @return {Integer} The port id
    */
-  addOutPort(name) {
+  addOutPort(name, options) {
     let newPort = {
       id: generateId(),
       type: "out",
-      name
+      name,
+      options,
     };
 
     this.ports.push(newPort);

diff --git a/src/components/Diagram.vue b/src/components/Diagram.vue
@@ -1,6 +1,7 @@
 <template>
-  <div class="vue-diagrams" :contenteditable="!!editedSvgText">
+  <div class="vue-diagrams">
     <Menu v-if="showMenu" />
+    <TextInput ref="textInput" />
     <SvgPanZoom
       ref="svgpanzoom"
       :style="{ width: width + 'px', height: height + 'px', border:'1px solid black'}"
@@ -38,8 +39,38 @@
           </pattern>
         </defs>
 
-        <rect x="-5000px" y="-5000px" width="10000px" height="10000px" fill="url(#grid)" @mousedown="clearSelection" ref="grid" class="svg-pan-zoom_viewport"/>
+        <rect
+          ref="grid"
+          class="svg-pan-zoom_viewport"
+          x="-5000px"
+          y="-5000px"
+          width="10000px"
+          height="10000px"
+          fill="url(#grid)"
+          @mousedown="clearSelection"
+        />
         <g ref="viewPort" id="viewport" x="50" y="50">
+          <DiagramLink
+            :ref="'link-' + link.id"
+            :positionFrom="link.positionFrom"
+            :positionTo="link.positionTo"
+            :points="link.points"
+            :id="link.id"
+            :index="index"
+            :options="link.options"
+            v-for="(link, index) in model._model.links"
+            @onStartDrag="startDragPoint"
+            @onCreatePoint="createPoint"
+            @delete="model.deleteLink(link)"
+          />
+          <line
+            :x1="getPortHandlePosition(newLink.startPortId).x"
+            :y1="getPortHandlePosition(newLink.startPortId).y"
+            :x2="convertXYtoViewPort(mouseX, 0).x"
+            :y2="convertXYtoViewPort(0, mouseY).y"
+            style="stroke:rgb(255,0,0);stroke-width:2"
+            v-if="newLink"
+          />
           <DiagramNode
             :ref="'node-' + nodeIndex"
             :title="node.title"
@@ -49,7 +80,6 @@
             :id="node.id"
             :width="node.width"
             :height="node.height"
-            :deletable="node.deletable"
             :ports="node.ports"
             :selected="(mainSelectedItem.type === 'nodes' && mainSelectedItem.index === nodeIndex) || secondarySelectedNodes.indexOf(node) !== -1"
             :options="node.options"
@@ -64,34 +94,12 @@
               :id="port.id"
               :nodeIndex="nodeIndex"
               :y="portIndex * 20"
-              :nodeWidth="node.width"
-              :type="port.type"
-              :name="port.name"
+              :node="node"
+              :port="port"
               @onStartDragNewLink="startDragNewLink"
               @mouseUpPort="mouseUpPort"
             />
           </DiagramNode>
-          <DiagramLink
-            :ref="'link-' + link.id"
-            :positionFrom="link.positionFrom"
-            :positionTo="link.positionTo"
-            :points="link.points"
-            :id="link.id"
-            :index="index"
-            :options="link.options"
-            v-for="(link, index) in model._model.links"
-            @onStartDrag="startDragPoint"
-            @onCreatePoint="createPoint"
-            @delete="model.deleteLink(link)"
-          />
-          <line
-            :x1="getPortHandlePosition(newLink.startPortId).x"
-            :y1="getPortHandlePosition(newLink.startPortId).y"
-            :x2="convertXYtoViewPort(mouseX, 0).x"
-            :y2="convertXYtoViewPort(0, mouseY).y"
-            style="stroke:rgb(255,0,0);stroke-width:2"
-            v-if="newLink"
-          />
           <rect
             v-if="mode === 'select' && mouseButtonIsPressed"
             :x="min(viewportMousePos.x, mouseDownViewportPos.x)"
@@ -100,7 +108,6 @@
             :height="max(viewportMousePos.y, mouseDownViewportPos.y) - min(viewportMousePos.y, mouseDownViewportPos.y)"
             fill="#000000"
             :fill-opacity="0.5"
-
           />
         </g>
       </svg>
@@ -132,6 +139,8 @@ import SvgPanZoom from 'vue-svg-pan-zoom';
 
 import Menu from './Menu.vue';
 
+import TextInput from './TextInput.vue';
+
 import DiagramModel from './../DiagramModel';
 import DiagramNode from './DiagramNode.vue';
 import DiagramLink from './DiagramLink.vue';
@@ -181,13 +190,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     this.updateLinksPositions();
 
     return {
       mode: 'move',
-      editedSvgText: undefined,
       document,
       zoomEnabled: true,
       panEnabled: true,
@@ -208,6 +220,7 @@ export default {
   },
   components: {
     Menu,
+    TextInput,
     DiagramNode,
     DiagramLink,
     DiagramPort,
@@ -235,19 +248,6 @@ export default {
       },
       immediate: true,
     },
-    editedSvgText(v) {
-      if (v) {
-        this.$refs.svgpanzoom.spz.disablePan();
-        this.$refs.svgpanzoom.spz.disableZoom();
-      } else {
-        if (this.zoomEnabled) {
-          this.$refs.svgpanzoom.spz.enableZoom();
-        }
-        if (this.panEnabled) {
-          this.$refs.svgpanzoom.spz.enablePan();
-        }
-      }
-    },
     "model._model": {
       handler () {
         this.$emit('model-updated', this.model._model);
@@ -259,6 +259,9 @@ export default {
     },
   },
   methods: {
+    editText(object, property, element) {
+      this.$refs.textInput.editText(object, property, element);
+    },
     min (a, b) {
       return Math.min(a, b);
     },
@@ -324,22 +327,24 @@ export default {
     },
 
     startDragNewLink(startPortId) {
+      if (!this.editable) return;
+
       this.panEnabled = false;
       this.newLink = { startPortId };
     },
 
     getPortHandlePosition(portId) {
       if (this.$refs["port-" + portId] && this.$refs["port-" + portId][0]) {
-        var port = this.$refs["port-" + portId][0];
-        var node = this.$refs["node-" + port.nodeIndex][0];
-        var x;
-        var y;
-        if (port.type === "in") {
+        const portComponent = this.$refs["port-" + portId][0];
+        const node = this.$refs["node-" + portComponent.nodeIndex][0];
+        let x;
+        let y;
+        if (portComponent.port.type === "in") {
           x = node.x + 10;
-          y = node.y + port.y + 64;
+          y = node.y + portComponent.displayedY + 9;
         } else {
           x = node.x + node.width + 10;
-          y = node.y + port.y + 64;
+          y = node.y + portComponent.displayedY + 9;
         }
 
         return { x, y };
@@ -352,6 +357,8 @@ export default {
     },
 
     mouseMove(pos) {
+      if (!this.editable) return;
+
       const links = this.model._model.links;
       this.mouseX = pos.x;
       this.mouseY = pos.y;
@@ -415,21 +422,16 @@ export default {
       }
     },
     mouseDown (event) {
+      if (!this.editable) return;
+
       this.mouseButtonIsPressed = true;
-      if (event.target.classList.contains('title-editable')) {
-        this.editedSvgText = event.target;
-      } else {
-        if (this.editedSvgText && this.editedSvgText.closest('.diagram-node')) {
-          const nodeComponent = this.editedSvgText.closest('.diagram-node').__vue__;
-          this.model._model.nodes[nodeComponent.index].title = this.editedSvgText.innerHTML;
-        }
-        this.editedSvgText = undefined;
-        if (this.mode === 'select') {
-          this.mouseDownViewportPos = this.convertXYtoViewPort(event.x, event.y);
-        }
+      if (!event.target.classList.contains('title-editable')) {
+        this.$refs.textInput.editText();
       }
     },
     mouseUp() {
+      if (!this.editable) return;
+
       this.mouseButtonIsPressed = false;
       if (this.mode === 'move') {
         if(this.secondarySelectedNodes && this.secondarySelectedNodes.length)
@@ -455,6 +457,8 @@ export default {
     },
 
     mouseUpPort(portId) {
+      if (!this.editable) return;
+
       var links = this.model._model.links;
 
       if (this.draggedItem && this.draggedItem.type === "points") {
@@ -486,7 +490,7 @@ export default {
             positionTo: {},
             points: []
           });
-        } else if (port2.type === "in" && port1.type === "out") {
+        } else if (port2.port.type === "in" && port1.port.type === "out") {
           links.push({
             id: generateId(),
             from: port1.id,

diff --git a/src/components/DiagramLink.vue b/src/components/DiagramLink.vue
@@ -149,6 +149,8 @@ export default {
     },
     mouseDown(pos) {},
     mouseDownSegment(pos, segmentIndex) {
+      if(!this.$parent.editable) return;
+
       this.createPoint(pos.x, pos.y, segmentIndex);
       this.mouseDownPoint(pos, segmentIndex);
     },