fix ts errors and move from histoire to storybook

Author: Gwenael Pluchon

global.d.ts

@@ -7,8 +7,3 @@ declare namespace SvgPanZoom {
 }
 
 
-declare interface ClickEvent {
-  x: number,
-  y: number,
-  target: EventTarget,
-}

package-lock.json

@@ -85,6 +85,7 @@
     "vite": "^5.0.2",
     "vite-plugin-dts": "^4.4.0",
     "vue": "^3.3.4",
+    "vue-tsc": "^2.2.0",
     "webpack": "^5.76.0"
   }
 }

package.json

@@ -2,21 +2,27 @@
 import DiagramNode from "./DiagramNode";
 import Emitter from 'tiny-emitter';
 import generateId from './generateId.ts';
+import type { Point } from "./types/Point";
 
 type Port = any;
+type DiagramLink = any;
+export type InternalDiagramModel = {
+  nodes: Array<DiagramNode>;
+  links: Array<DiagramLink>;
+}
 /**
  * @class DiagramModel
  */
 class DiagramModel {
-  private _model: any;
+  private _model: InternalDiagramModel;
   public emitter: any;
 
   constructor() {
     this._model = {
       nodes: [],
       links: [],
     };
-    this.emitter = new Emitter();
+    this.emitter = new (Emitter as any)();
   }
 
   /**
@@ -31,15 +37,13 @@ class DiagramModel {
     return newNode;
   }
 
-  deleteNode(node: { ports: Array<any> }) { //FIXME any
+  deleteNode(node: DiagramNode) { //FIXME any
     let index = -1;
     for (let k = 0; k < this._model.nodes.length; k++) {
       if (node.id === this._model.nodes[k].id) {
         index = k;
       }
     }
-    for (let n of this._model.nodes) {
-    }
 
     if (node.ports.length) {
       for (let i = 0; i < node.ports.length; i++) {
@@ -69,7 +73,6 @@ class DiagramModel {
    * Adds a link between two ports
    */
   addLink(from: Port, to: Port, points:Array<Point> = [], options = {}) {
-    console.log('addLink', from, to);
     this._model.links.push({
       id: generateId(),
       from: from.id,
@@ -88,23 +91,25 @@ class DiagramModel {
    */
   serialize() {
     const res = {
-      nodes: [],
-      links: [],
-    }
+      nodes: [] as any[],
+      links: [] as any[],
+    };
     for (let n of this._model.nodes) {
-      const serializedNode = {};
-      for(let k of Object.keys(n)) {
-        if(k !== 'diagram') {
-          serializedNode[k] = n[k];
+      const serializedNode: Record<string, any> = {};
+      const nodeToProcess = n as any;
+      for (let k of Object.keys(n)) {
+        if (k !== 'diagram') {
+          serializedNode[k] = nodeToProcess[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];
+      const serializedLink: Record<string, any> = {};
+      const linkToProcess = l as any;
+      for (let k of Object.keys(l)) {
+        if (k !== 'diagram') {
+          serializedLink[k] = linkToProcess[k];
         }
       }
       res.links.push(serializedLink);
@@ -119,7 +124,7 @@ class DiagramModel {
    */
   deserialize(serializedModel: string) {
     this._model = JSON.parse(serializedModel);
-    for(let i = 0 ; i <= this._model.nodes.length; i++) {
+    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);
@@ -128,6 +133,7 @@ class DiagramModel {
         }
       }
     }
+    this.emitter.emit('deserialize');
   }
 }
 

src/DiagramModel.ts

@@ -1,5 +1,6 @@
 // @ts-check
-import generateId from './generateId.ts';
+import generateId from './generateId';
+import type { DiagramPort } from './types/DiagramPort.ts';
 
 const diagramFor: { [key: number]: Object } = {};
 
@@ -12,18 +13,20 @@ class DiagramNode {
   width: number;
   height: number;
   options: Object;
-  ports: Array<Object>;
+  ports: Array<DiagramPort>;
+  type?: string;
   /**
    *  This should not be called directly. Use the "addNode" method from the DiagramModel class
    */
-  constructor(diagram: Object, id: number, title: string, x: number, y: number, width: number, height: number, options: Object) {
+  constructor(diagram: Object, id: number, title: string, x?: number, y?: number, width?: number, height?: number, options?: Object) {
     //This is done like that to avoid circular deps and keep this class to work with stringify :)
     diagramFor[id] = diagram;
+    this.diagram = diagram;
     this.id = id;
     this.title = title;
     //this.diagram = diagram;
-    this.x = x;
-    this.y = y;
+    this.x = x || 0;
+    this.y = y || 0;
     this.width = width || 72;
     this.height = height || 100;
     this.options = options || {};
@@ -35,7 +38,8 @@ class DiagramNode {
    * @param {String} name
    * @return {number} The port id
    */
-  addInPort(name: string, options: Object): number {
+  //FIXME DiagramPort or number as return?
+  addInPort(name: string, options: Object): DiagramPort {
     let newPort = {
       id: generateId(),
       type: "in",
@@ -51,7 +55,8 @@ class DiagramNode {
   /**
    * Adds a new "out" port into the node.
    */
-  addOutPort(name: string, options: Object): number {
+  //FIXME return value is number or port?
+  addOutPort(name: string, options: Object): DiagramPort {
     let newPort = {
       id: generateId(),
       type: "out",
@@ -64,7 +69,7 @@ class DiagramNode {
     return newPort;
   }
 
-  removePortLinks(id: number) {
+  removePortLinks(_id: number) {
     /*
     for (let l of (this.diagram as any)._model.links) {
       if (l.from === id || l.to === id) {
@@ -75,7 +80,7 @@ class DiagramNode {
     throw 'FIXME';
   }
 
-  deletePort(id: number) {
+  deletePort(_id: number) {
     /*
     this.removePortLinks(id);
     this.diagram._model.nodes = this.diagram._model.nodes.map(n => {

src/DiagramNode.ts

@@ -1,7 +1,6 @@
 // @ts-check
 //We could have put this in a Vue component, but I try to make the lib framework agnostic over time :)
 
-let startDragHandler = undefined;
 
 const directions = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
 
@@ -68,7 +67,7 @@ const directions = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
     console.log('mouseDownHandler');
     if(event.target) {
       const target = event.target as HTMLElement;
-      const direction = target?.closest('.resize-handle')
+      //const direction = target?.closest('.resize-handle')
       if (this.startDragHandler) {
         this.startDragHandler(target.dataset.direction);
       }