feat: add read-only mode for the componets

Added boolean props to components, depending on the prop value diagram nodes and links become immovable gwenaelp#8
zaytc145 · Mar 18, 2021 · edcb1ce · edcb1ce
1 parent 977f26c
commit edcb1ce
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 28 deletions.
diff --git a/src/components/Diagram.vue b/src/components/Diagram.vue
@@ -46,6 +46,7 @@
           v-for="(link, index) in model._model.links"
           @onStartDrag="startDragPoint"
           @onCreatePoint="createPoint"
+          :readonly="readonlyLinks"
         />
         <line
           :x1="getPortHandlePosition(newLink.startPortId).x"
@@ -70,6 +71,7 @@
           v-for="(node, nodeIndex) in model._model.nodes"
           @onStartDrag="startDragItem"
           @delete="model.deleteNode(node)"
+          :readonly="readonlyNodes"
         >
           <DiagramPort
             v-for="(port, portIndex) in node.ports"
@@ -82,6 +84,7 @@
             :name="port.name"
             @onStartDragNewLink="startDragNewLink"
             @mouseUpPort="mouseUpPort"
+            :readonly="readonlyLinks"
           />
         </DiagramNode>
       </g>
@@ -131,6 +134,14 @@ export default {
     },
     gridSnap: {
       default: 1
+    },
+    readonlyLinks: {
+      type: Boolean,
+      default: false
+    },
+    readonlyNodes: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -340,8 +351,8 @@ export default {
 
     startDragItem(item, x, y) {
       this.panEnabled = false;
-      this.draggedItem = item;
       this.selectedItem = item;
+      this.draggedItem = item;
       this.initialDragX = x;
       this.initialDragY = y;
     }

diff --git a/src/components/DiagramLink.vue b/src/components/DiagramLink.vue
@@ -77,7 +77,7 @@ import DiagramPoint from "./DiagramPoint";
 
 export default {
   name: "DiagramLink",
-  props: ["positionFrom", "positionTo", "id", "index", "points"],
+  props: ["positionFrom", "positionTo", "id", "index", "points", "readonly"],
 
   components: {
     DiagramPoint
@@ -92,26 +92,36 @@ export default {
   },
   methods: {
     mouseEnter() {
-      this.largeStrokeStyle = "stroke:rgba(255,0,0,0.5);";
+      if (!this.readonly) {
+        this.largeStrokeStyle = "stroke:rgba(255,0,0,0.5);";
+      }
     },
     mouseLeave() {
-      this.largeStrokeStyle = "stroke:rgba(255,0,0,0.0);";
+      if (!this.readonly) {
+        this.largeStrokeStyle = "stroke:rgba(255,0,0,0.0);";
+      }
     },
     mouseDownPoint(pos, pointIndex) {
       console.log("mouseDownPoint", arguments);
-      this.$emit("onStartDrag", {
-        type: "points",
-        linkIndex: this.index,
-        pointIndex
-      });
+      if (!this.readonly) {
+        this.$emit("onStartDrag", {
+          type: "points",
+          linkIndex: this.index,
+          pointIndex
+        });
+      }
     },
     mouseDown(pos) {},
     mouseDownSegment(pos, segmentIndex) {
-      this.createPoint(pos.x, pos.y, segmentIndex);
-      this.mouseDownPoint(pos, segmentIndex);
+      if (!this.readonly) {
+        this.createPoint(pos.x, pos.y, segmentIndex);
+        this.mouseDownPoint(pos, segmentIndex);
+      }
     },
     createPoint(x, y, pointIndex) {
-      this.$emit("onCreatePoint", x, y, this.index, pointIndex);
+      if (!this.readonly) {
+        this.$emit("onCreatePoint", x, y, this.index, pointIndex);
+      }
     }
   },
   computed: {

diff --git a/src/components/DiagramNode.vue b/src/components/DiagramNode.vue
@@ -24,7 +24,7 @@
         >
       </rect>
       <text :x="10" :y="30" font-size="14" font-weight="bold" fill="#000000">{{title}}</text>
-      <g v-if="deletable" @click="deleteNode">
+      <g v-if="isDeletable" @click="deleteNode">
         <rect
           :x="width - 12"
           y="18"
@@ -60,7 +60,6 @@
 <script>
 export default {
   name: "DiagramNode",
-
   props: {
     title: {
       type: String,
@@ -91,7 +90,8 @@ export default {
       type: Boolean,
       default: true
     },
-    selected: Boolean
+    selected: Boolean,
+    readonly: Boolean
   },
 
   data() {
@@ -107,20 +107,31 @@ export default {
     },
 
     mouseDown: function(event) {
-      this.$emit(
-        "onStartDrag",
-        { type: "nodes", index: this.index },
-        event.x - this.x,
-        event.y - this.y
-      );
+      if (!this.readonly) {
+        this.$emit(
+          "onStartDrag",
+          { type: "nodes", index: this.index },
+          event.x - this.x,
+          event.y - this.y
+        );
+      }
     },
 
     mouseenter() {
-      this.titleFillOpacity = 0.5;
+      if (!this.readonly) {
+        this.titleFillOpacity = 0.5;
+      }
     },
 
     mouseleave() {
-      this.titleFillOpacity = 0.25;
+      if (!this.readonly) {
+        this.titleFillOpacity = 0.25;
+      }
+    }
+  },
+  computed: {
+    isDeletable() {
+      return this.deletable && !this.readonly;
     }
   }
 };

diff --git a/src/components/DiagramPort.vue b/src/components/DiagramPort.vue
@@ -27,26 +27,34 @@
 <script>
 export default {
   name: "DiagramPort",
-  props: ["id", "y", "type", "name", "nodeWidth", "nodeIndex"],
+  props: ["id", "y", "type", "name", "nodeWidth", "nodeIndex", "readonly"],
   data() {
     return {
       fill: "#444444"
     };
   },
   methods: {
     mouseup() {
-      this.$emit("mouseUpPort", this.id);
+      if (!this.readonly) {
+        this.$emit("mouseUpPort", this.id);
+      }
     },
 
     enter() {
-      this.fill = "#888888";
+      if (!this.readonly) {
+        this.fill = "#888888";
+      }
     },
 
     leave() {
-      this.fill = "#444444";
+      if (!this.readonly) {
+        this.fill = "#444444";
+      }
     },
     startDragNewLink() {
-      this.$emit("onStartDragNewLink", this.id);
+      if (!this.readonly) {
+        this.$emit("onStartDragNewLink", this.id);
+      }
     }
   }
 };

diff --git a/stories/readonly_mode.stories.js b/stories/readonly_mode.stories.js
@@ -0,0 +1,30 @@
+import { storiesOf } from "@storybook/vue";
+import Diagram from "../src/components/Diagram";
+
+// Add more stories here to live develop your components
+storiesOf("Diagram", module).add("Readonly mode", () => ({
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("test2", 300, 200);
+    const inPort = node1.addInPort("test");
+
+    const node2 = diagramModel.addNode("test", 10, 300, 144, 80);
+    const node2OutPort = node2.addOutPort("testOut");
+    node2.addOutPort("testOut2");
+    node2.color = "#00cc66";
+
+    const node3 = diagramModel.addNode("test3", 10, 100, 72, 100);
+    const node3OutPort = node3.addOutPort("testOut3");
+    node3.color = "#cc6600";
+    node3.deletable = false;
+
+    diagramModel.addLink(node2OutPort, inPort);
+    diagramModel.addLink(node3OutPort, inPort);
+
+    return {
+      model: diagramModel
+    };
+  },
+  template: `<diagram :model="model" gridSnap="16" :readonly-links="false" :readonly-nodes="true"></diagram>`
+}));