internals refactor

gwenaelp · Dec 5, 2024 · 53f660a · 53f660a
1 parent a8d53b8
commit 53f660a
Show file tree

Hide file tree

Showing 23 changed files with 915 additions and 134 deletions.
diff --git a/package.json b/package.json
@@ -59,15 +59,16 @@
     "@babel/preset-env": "7.12.13",
     "@histoire/plugin-vue": "^0.17.6",
     "@vitejs/plugin-vue": "^4.3.4",
-    "@vitejs/plugin-vue2": "^2.2.0",
     "@vue/compiler-sfc": "^3.3.4",
     "@vue/tsconfig": "^0.4.0",
     "draggable-vue-directive": "^1.1.0",
     "histoire": "^0.17.6",
     "svg-pan-zoom": "^3.6.1",
+    "tiny-emitter": "^2.1.0",
     "typedoc": "^0.25.4",
     "typedoc-plugin-vue": "^1.1.0",
     "typescript": "^5.2.2",
+    "uuid": "^10.0.0",
     "vite": "^5.0.2",
     "vite-plugin-dts": "^3.6.3",
     "vue": "^3.3.4",

diff --git a/src/DiagramModel.ts b/src/DiagramModel.ts
@@ -1,21 +1,21 @@
 // @ts-check
 import DiagramNode from "./DiagramNode";
-
-var generateId = function() {
-  return Math.trunc(Math.random() * 1000);
-};
+import Emitter from 'tiny-emitter';
+import generateId from './generateId.ts';
 
 /**
  * @class DiagramModel
  */
 class DiagramModel {
   private _model: any;
+  public emitter: any;
 
   constructor() {
     this._model = {
       nodes: [],
       links: [],
     };
+    this.emitter = new Emitter();
   }
 
   /**
@@ -35,20 +35,24 @@ class DiagramModel {
     for (let j = 0; j < this._model.links.length; j++) {
       const currentLink = this._model.links[j];
 
-      for (let i = 0; i < node.ports.length; i++) {
-        const currentPort = node.ports[i];
+      if (node.ports.length) {
+        for (let i = 0; i < node.ports.length; i++) {
+          const currentPort = node.ports[i];
 
-        if (currentLink.from === currentPort.id || currentLink.to === currentPort.id) {
-          this.deleteLink(currentLink);
-          j--;
+          if (currentLink.from === currentPort.id || currentLink.to === currentPort.id) {
+            this.deleteLink(currentLink);
+            j--;
+          }
         }
       }
     }
+    this.emitter.emit('deleteNode', node);
     this._model.nodes.splice(index, 1);
   }
 
   deleteLink(link: Object) { //FIXME link
     const index = this._model.links.indexOf(link);
+    this.emitter.emit('deleteLink', link);
     this._model.links.splice(index, 1);
   }
 
@@ -65,23 +69,55 @@ class DiagramModel {
       points,
       options,
     });
+    return this._model.links[this._model.links.length - 1];
   }
 
   /**
    * Serializes the diagram model into a JSON object
-   * @return {Object} The diagram model
+   * @return {string} The diagram model as a string
    */
   serialize() {
-    //FIXME
-    //return JSON.stringify(this._model);
+    const res = {
+      nodes: [],
+      links: [],
+    }
+    for (let n of this._model.nodes) {
+      const serializedNode = {};
+      for(let k of Object.keys(n)) {
+        if(k !== 'diagram') {
+          serializedNode[k] = n[k];
+        }
+      }
+      res.nodes.push(serializedNode);
+    }
+    for (let l of this._model.links) {
+      const serializedLink = {};
+      for(let k of Object.keys(l)) {
+        if(k !== 'diagram') {
+          serializedLink[k] = l[k];
+        }
+      }
+      res.links.push(serializedLink);
+    }
+
+    return JSON.stringify(res);
   }
 
   /**
    * Load into the diagram model a serialized diagram
-   * @param  {Object} serializedModel
+   * @param  {string} serializedModel
    */
   deserialize(serializedModel: string) {
     this._model = JSON.parse(serializedModel);
+    for(let i = 0 ; i <= this._model.nodes.length; i++) {
+      const newNode = this._model.nodes[i];
+      if (newNode) {
+        this._model.nodes[i] = new DiagramNode(this, newNode.id, newNode.title);
+        for (let k of Object.keys(newNode)) {
+          this._model.nodes[i][k] = newNode[k];
+        }
+      }
+    }
   }
 }
 

diff --git a/src/DiagramNode.ts b/src/DiagramNode.ts
@@ -1,7 +1,5 @@
 // @ts-check
-var generateId = function() {
-  return Math.trunc(Math.random() * 1000);
-};
+import generateId from './generateId.ts';
 
 const diagramFor: { [key: number]: Object } = {};
 
@@ -47,7 +45,7 @@ class DiagramNode {
 
     this.ports.push(newPort);
 
-    return newPort.id;
+    return newPort;
   }
 
   /**
@@ -63,11 +61,11 @@ class DiagramNode {
 
     this.ports.push(newPort);
 
-    return newPort.id;
+    return newPort;
   }
 
   removePortLinks(id: number) {
-    for (let l of (diagramFor[id] as any)._model.links) {
+    for (let l of (this.diagram as any)._model.links) {
       if (l.from === id || l.to === id) {
         (this.diagram as any).deleteLink(l);
       }
@@ -76,7 +74,17 @@ class DiagramNode {
 
   deletePort(id: number) {
     this.removePortLinks(id);
+    this.diagram._model.nodes = this.diagram._model.nodes.map(n => {
+      if (n.id === this.id) {
+        const oldLength = n.ports.length;
+        n.ports = n.ports.filter(p => p.id !== id);
+        console.log('found node', n, oldLength, n.ports.length);
+
+      }
+      return n;
+    });
     this.ports = this.ports.filter(p => (p as any).id !== id);
+    (this.diagram as any).emitter.emit('deletePort', id);
   }
 
 }

diff --git a/src/NodeResizeHandles.ts b/src/NodeResizeHandles.ts
@@ -15,14 +15,14 @@ const directions = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
   constructor(container: HTMLElement, width: number, height: number, startDragHandler?: (event: any) => void) {
     this.container = container;
     container.innerHTML = `
-      <rect class="resize-handle edge" data-direction="nw" x="-2" y="-5" width="5" height="5" />
-      <rect class="resize-handle" data-direction="n" x="0" y="-3" height="3" />
-      <rect class="resize-handle edge" data-direction="ne" y="-5" width="5" height="5" />
-      <rect class="resize-handle" data-direction="e" y="0" width="3" />
-      <rect class="resize-handle edge" data-direction="se" width="5" height="5" />
-      <rect class="resize-handle" data-direction="s" x="0" height="3" />
-      <rect class="resize-handle edge" data-direction="sw" x="-2" width="5" height="5" />
-      <rect class="resize-handle" data-direction="w" x="-2" y="0" width="3" />
+      <rect class="resize-handle edge nw" data-direction="nw" x="-2" y="-5" width="5" height="5" />
+      <rect class="resize-handle horizontal n" data-direction="n" x="0" y="-3" height="3" />
+      <rect class="resize-handle edge ne" data-direction="ne" y="-5" width="5" height="5" />
+      <rect class="resize-handle vertical e" data-direction="e" y="0" width="3" />
+      <rect class="resize-handle edge se" data-direction="se" width="5" height="5" />
+      <rect class="resize-handle horizontal s" data-direction="s" x="0" height="3" />
+      <rect class="resize-handle edge sw" data-direction="sw" x="-2" width="5" height="5" />
+      <rect class="resize-handle vertical w" data-direction="w" x="-2" y="0" width="3" />
     `;
 
     this.startDragHandler = startDragHandler;