From 6931ba3b0c71389589b8063d9351fee71dba5a79 Mon Sep 17 00:00:00 2001 From: tfukaza Date: Sat, 13 Jul 2024 20:46:40 -0700 Subject: [PATCH] Fix: Mouse down event was triggered twice for every click. --- src/components/base.ts | 2 +- src/components/connector.ts | 16 +++++++++---- src/components/node.ts | 47 +++++++++++++++++++++++++++++-------- src/input.ts | 1 - src/main.ts | 4 ++-- 5 files changed, 51 insertions(+), 19 deletions(-) diff --git a/src/components/base.ts b/src/components/base.ts index 76ac8b2..86a60e5 100755 --- a/src/components/base.ts +++ b/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); } diff --git a/src/components/connector.ts b/src/components/connector.ts index 8c823b5..f8b1c46 100644 --- a/src/components/connector.ts +++ b/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,8 +47,8 @@ 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(); @@ -54,6 +56,8 @@ class ConnectorComponent extends ComponentBase { 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; diff --git a/src/components/node.ts b/src/components/node.ts index b2cf66e..08b7f2b 100755 --- a/src/components/node.ts +++ b/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; diff --git a/src/input.ts b/src/input.ts index 755ed49..948c9e5 100644 --- a/src/input.ts +++ b/src/input.ts @@ -179,7 +179,6 @@ class InputControl { case 2: return cursorState.mouseRight; default: - console.warn("Invalid mouse button"); return cursorState.none; } } diff --git a/src/main.ts b/src/main.ts index a38a8e9..f689c20 100755 --- a/src/main.ts +++ b/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;