Fix: Mouse down event was triggered twice for every click.

src/components/base.ts

@@ -26,7 +26,7 @@ export abstract class Base {
    * @param dom The DOM element to bind the function to
    */
   bindFunction(dom: HTMLElement) {
-    dom.onmousedown = this.domMouseDown.bind(this);
+    //dom.onmousedown = this.domMouseDown.bind(this);
     dom.ontouchstart = this.domTouchStart.bind(this);
     dom.onpointerdown = this.domMouseDown.bind(this);
   }

src/components/connector.ts

@@ -35,6 +35,8 @@ class ConnectorComponent extends ComponentBase {
     config: ConnectorConfig,
     parent: NodeComponent,
     globals: GlobalStats,
+    outgoingLines: lineObject[],
+    incomingLines: lineObject[],
   ) {
     super(config, parent, globals);
 
@@ -45,15 +47,17 @@ class ConnectorComponent extends ComponentBase {
     this.dom = dom;
     this.parent = parent;
     this.prop = parent.prop;
-    this.outgoingLines = [];
-    this.incomingLines = [];
+    this.outgoingLines = outgoingLines;
+    this.incomingLines = incomingLines;
     this.config = config;
     globals.gid++;
     this.name = config.name || globals.gid.toString();
     this.g.globalNodeTable[this.gid] = this;
     this.dom.setAttribute("sl-gid", this.gid.toString());
 
     this.bindFunction(this.dom);
+
+    console.log(config);
   }
 
   /**
@@ -78,7 +82,7 @@ class ConnectorComponent extends ComponentBase {
       requestDelete: false,
       completedDelete: false,
     });
-    this.parent.outgoingLines.push(this.outgoingLines[0]);
+    //this.parent.allOutgoingLines.push(this.outgoingLines[0]);
 
     this.setAllLinePositions();
   }
@@ -107,6 +111,7 @@ class ConnectorComponent extends ComponentBase {
       const targetConnector: ConnectorComponent = this.g.globalNodeTable[
         gid
       ] as ConnectorComponent;
+      console.debug("Hovering over input connector", targetConnector);
       targetConnector.updateConnectorPosition();
       connectorX = targetConnector.connectorX;
       connectorY = targetConnector.connectorY;
@@ -204,7 +209,7 @@ class ConnectorComponent extends ComponentBase {
 
     if (connector.config.maxConnectors === currentIncomingLines.length) {
       console.warn(
-        `Connector ${connector} already has max number of connectors`,
+        `Connector ${connector.name} already has max number of connectors (${connector.config.maxConnectors}) connected`,
       );
       return false;
     }
@@ -213,7 +218,6 @@ class ConnectorComponent extends ComponentBase {
 
     this.outgoingLines[0].target = connector;
     connector.incomingLines.push(this.outgoingLines[0]);
-    connector.parent.incomingLines.push(this.outgoingLines[0]);
 
     return true;
   }
@@ -311,6 +315,8 @@ class ConnectorComponent extends ComponentBase {
     line.classList.add("sl-connector-line");
     line.setAttribute("stroke-width", "4");
 
+    console.debug(`Created line from connector ${this.gid}`);
+
     this.g.canvas!.appendChild(svg);
 
     return svg;

src/components/node.ts

@@ -16,8 +16,8 @@ class NodeComponent extends Base {
   dom: HTMLElement | null;
   connectors: { [key: string]: ConnectorComponent }; // Dictionary of all connectors in the node, using the name as the key
   components: { [key: string]: ComponentBase }; // Dictionary of all components in the node except connectors
-  outgoingLines: lineObject[]; // Array of all lines going out of the node
-  incomingLines: lineObject[]; // Array of all lines coming into the node
+  allOutgoingLines: { [key: string]: lineObject[] }; // Dictionary of all lines going out of the node
+  allIncomingLines: { [key: string]: lineObject[] }; // Dictionary of all lines coming into the node
 
   nodeWidth = 0;
   nodeHeight = 0;
@@ -39,8 +39,8 @@ class NodeComponent extends Base {
     this.dom = dom;
     this.connectors = {};
     this.components = {};
-    this.outgoingLines = [];
-    this.incomingLines = [];
+    this.allOutgoingLines = {};
+    this.allIncomingLines = {};
 
     this.dragStartX = this.positionX;
     this.dragStartY = this.positionY;
@@ -126,7 +126,7 @@ class NodeComponent extends Base {
 
   filterDeletedLines(svgLines: lineObject[]) {
     for (let i = 0; i < svgLines.length; i++) {
-      if (svgLines[i].requestDelete) {
+      if (svgLines[i].requestDelete && svgLines[i].completedDelete) {
         svgLines.splice(i, 1);
         i--;
       }
@@ -139,6 +139,11 @@ class NodeComponent extends Base {
    * @param outgoingLines Array of all lines outgoing from the node or connector
    */
   _renderOutgoingLines(outgoingLines: lineObject[]) {
+    // console.debug(
+    //   "Rendering outgoing lines",
+    //   outgoingLines,
+    //   outgoingLines.length,
+    // );
     for (const line of outgoingLines) {
       const connector = line.start;
       if (!line.svg) {
@@ -161,6 +166,7 @@ class NodeComponent extends Base {
       line.svg.style.transform = `translate3d(${connector.connectorX}px, ${connector.connectorY}px, 0)`;
       connector.renderLinePosition(line);
     }
+
     this.filterDeletedLines(outgoingLines);
   }
 
@@ -171,14 +177,31 @@ class NodeComponent extends Base {
     };
   }
 
+  _iterateDict(
+    dict: { [key: string]: any },
+    callback: (lines: lineObject[]) => void,
+    bind: any = this,
+  ) {
+    for (const key in dict) {
+      callback.bind(bind)(dict[key]);
+    }
+  }
+
   _renderNodeLines() {
-    this._renderOutgoingLines(this.outgoingLines);
+    // Flatten the allOutgoingLines object into an array and call the renderLines function
+    this._iterateDict(this.allOutgoingLines, this._renderOutgoingLines);
     // For incoming lines, the renderLines function of the peer node is called.
     // This is to prevent duplicate rendering of lines on some declarative frontend frameworks.
-    for (const line of this.incomingLines) {
-      const peerNode = line.start.parent;
-      peerNode._renderOutgoingLines(peerNode.outgoingLines);
-    }
+    this._iterateDict(this.allIncomingLines, (lines: lineObject[]) => {
+      for (const line of lines) {
+        const peerNode = line.start.parent;
+        this._iterateDict(
+          peerNode.allOutgoingLines,
+          peerNode._renderOutgoingLines,
+          peerNode,
+        );
+      }
+    });
   }
 
   renderNode(style: any) {
@@ -225,11 +248,15 @@ class NodeComponent extends Base {
     maxConnectors = 1,
     allowDragOut = true,
   ) {
+    this.allOutgoingLines[name] = [];
+    this.allIncomingLines[name] = [];
     const connector = new ConnectorComponent(
       dom,
       { name: name, maxConnectors: maxConnectors, allowDragOut: allowDragOut },
       this,
       this.g,
+      this.allOutgoingLines[name],
+      this.allIncomingLines[name],
     );
     this.connectors[name] = connector;
     this.prop[name] = null;

src/input.ts

@@ -179,7 +179,6 @@ class InputControl {
       case 2:
         return cursorState.mouseRight;
       default:
-        console.warn("Invalid mouse button");
         return cursorState.none;
     }
   }

src/main.ts

@@ -256,14 +256,14 @@ export default class SnapLine {
    */
   onCursorMove(
     _: Event,
-    element: Element | null,
+    ___: Element | null,
     __: cursorState,
     clientX: number,
     clientY: number,
   ) {
     const g = this.g;
 
-    g.hoverDOM = element;
+    g.hoverDOM = document.elementFromPoint(clientX, clientY);
     g.mouse_x = clientX - g.canvasContainer.offsetLeft;
     g.mouse_y = clientY - g.canvasContainer.offsetTop;