@falkordb/canvas 0.0.44 → 0.0.49

package/dist/canvas.js

@@ -1,14 +1,14 @@
-/* eslint-disable no-param-reassign */
 import ForceGraph from "force-graph";
 import * as d3 from "d3";
-import { dataToGraphData, getContrastTextColor, getNodeDisplayText, graphDataToData, LINK_DISTANCE, wrapTextForCircularNode, } from "./canvas-utils.js";
+import { dataToGraphData, getContrastTextColor, getNodeDisplayText, graphDataToData, LINK_DISTANCE, NODE_SIZE, wrapTextForCircularNode, } from "./canvas-utils.js";
+import { applyGraphLayout, isForceLayout } from "./layouts.js";
 const PADDING = 2;
 // Arrow geometry constants (shared by self-loop and regular-link drawing paths)
 const ARROW_WH_RATIO = 1.6;
 const ARROW_VLEN_RATIO = 0.2;
 // Multiplier to convert node size → cubic bezier control-point distance for self-loops
 const SELF_LOOP_CURVE_FACTOR = 11.67;
-// Base font size used for the initial measurement and for two-line text.
+// Base font size used for the initial wrap-measurement pass.
 const NODE_FONT_SIZE_BASE = 2;
 // Fraction of the chord width that single-line text should fill (0–1).
 // Leaves (1 - ratio)/2 of the radius as horizontal padding on each side.
@@ -18,6 +18,15 @@ const CHARGE_STRENGTH = -400;
 const CENTER_STRENGTH = 0.03;
 const VELOCITY_DECAY = 0.4;
 const ALPHA_MIN = 0.05;
+const NON_FORCE_CHARGE_STRENGTH = -220;
+const NON_FORCE_COLLIDE_PADDING = 18;
+const NON_FORCE_CENTER_STRENGTH = 0.02;
+const NON_FORCE_LINK_STRENGTH = 0.08;
+const NON_FORCE_TARGET_STRENGTH = 0.3;
+const NON_FORCE_VELOCITY_DECAY = 0.5;
+const NON_FORCE_ALPHA_MIN = 0.03;
+const NON_FORCE_LAYOUT_COOLDOWN_TICKS = 120;
+const NON_FORCE_DRAG_COOLDOWN_TICKS = 90;
 // Create styles for the web component
 function createStyles(backgroundColor, foregroundColor) {
     const style = document.createElement("style");
@@ -63,6 +72,8 @@ class FalkorDBCanvas extends HTMLElement {
             foregroundColor: '#1A1A1A',
             captionsKeys: [],
             showPropertyKeyPrefix: false,
+            layoutMode: "force",
+            layoutOptions: {},
         };
         this.nodeMode = 'replace';
         this.linkMode = 'replace';
@@ -73,8 +84,12 @@ class FalkorDBCanvas extends HTMLElement {
         this.onFontsLoadingDone = () => {
             this.relationshipsTextCache.clear();
             this.nodeDisplayFontSize.clear();
+            for (const node of this.data.nodes) {
+                node.displayName = ["", ""];
+            }
             this.triggerRender();
         };
+        this.shouldZoomToFitOnNonForceSettle = false;
         this.attachShadow({ mode: "open" });
     }
     /**
@@ -122,12 +137,12 @@ class FalkorDBCanvas extends HTMLElement {
             this.resizeObserver = null;
         }
         if (this.graph) {
-            // eslint-disable-next-line no-underscore-dangle
             this.graph._destructor();
         }
     }
     setConfig(config) {
         this.log('Setting config:', config);
+        const layoutChanged = config.layoutMode !== undefined || config.layoutOptions !== undefined;
         // If captionsKeys changed, invalidate cached display names and font sizes
         // so text is recomputed with the new keys on the next render.
         if (config.captionsKeys && JSON.stringify(config.captionsKeys) !== JSON.stringify(this.config.captionsKeys)) {
@@ -137,6 +152,45 @@ class FalkorDBCanvas extends HTMLElement {
             }
         }
         Object.assign(this.config, config);
+        if (layoutChanged) {
+            const previousPositions = this.getNodePositionMap();
+            if (this.isForceLayoutMode() && this.config.cooldownTicks === 0 && this.data.nodes.length > 0) {
+                this.config.cooldownTicks = undefined;
+            }
+            this.data = applyGraphLayout(this.data, this.config.layoutMode, this.config.layoutOptions);
+            const shouldAnimateNonForceLayout = this.prepareNodePositionsForCurrentLayout(previousPositions);
+            if (this.graph) {
+                this.calculateNodeDegree();
+                this.graph.graphData(this.data);
+                this.configureSimulationForCurrentLayout(shouldAnimateNonForceLayout);
+                if (this.isForceLayoutMode()) {
+                    this.shouldZoomToFitOnNonForceSettle = false;
+                    this.config.isLoading = this.data.nodes.length > 0;
+                    this.config.onLoadingChange?.(this.config.isLoading);
+                    this.updateLoadingState();
+                }
+                else {
+                    this.config.isLoading = false;
+                    this.config.onLoadingChange?.(false);
+                    this.updateLoadingState();
+                    if (this.data.nodes.length > 0) {
+                        if (shouldAnimateNonForceLayout) {
+                            this.shouldZoomToFitOnNonForceSettle = true;
+                        }
+                        else {
+                            this.shouldZoomToFitOnNonForceSettle = false;
+                            this.zoomToFit(1);
+                        }
+                    }
+                    else {
+                        this.shouldZoomToFitOnNonForceSettle = false;
+                    }
+                    if (!shouldAnimateNonForceLayout) {
+                        this.triggerRender();
+                    }
+                }
+            }
+        }
         // Update event handlers if they were provided
         if (config.onNodeClick || config.onLinkClick || config.onNodeRightClick || config.onLinkRightClick ||
             config.onNodeHover || config.onLinkHover || config.onBackgroundClick || config.onBackgroundRightClick || config.onZoom ||
@@ -197,25 +251,42 @@ class FalkorDBCanvas extends HTMLElement {
         this.log('Setting cooldown ticks to:', ticks);
         this.config.cooldownTicks = ticks;
         if (this.graph) {
-            this.graph.cooldownTicks(ticks ?? Infinity);
+            this.graph.cooldownTicks(this.isForceLayoutMode() ? (ticks ?? Infinity) : 0);
         }
-        this.updateCanvasSimulationAttribute(ticks !== 0);
+        this.updateCanvasSimulationAttribute(this.isForceLayoutMode() && ticks !== 0 && this.data.nodes.length > 0);
     }
     getData() {
         return graphDataToData(this.data);
     }
     setData(data) {
         this.log('setData called with', data.nodes.length, 'nodes and', data.links.length, 'links');
-        // Convert data and apply circular layout to new nodes only
-        this.data = dataToGraphData(data);
-        this.config.cooldownTicks = this.data.nodes.length > 0 ? undefined : 0;
-        this.config.isLoading = this.data.nodes.length > 0;
+        const previousPositions = this.getNodePositionMap();
+        const oldNodesMap = new Map();
+        for (const node of this.data.nodes) {
+            oldNodesMap.set(node.id, node);
+        }
+        // Convert data and preserve positions for existing nodes
+        this.data = dataToGraphData(data, undefined, oldNodesMap);
+        this.data = applyGraphLayout(this.data, this.config.layoutMode, this.config.layoutOptions);
+        const shouldAnimateNonForceLayout = this.prepareNodePositionsForCurrentLayout(previousPositions);
+        if (this.isForceLayoutMode()) {
+            this.shouldZoomToFitOnNonForceSettle = false;
+            this.config.cooldownTicks = this.data.nodes.length > 0 ? undefined : 0;
+            this.config.isLoading = this.data.nodes.length > 0;
+        }
+        else {
+            this.config.cooldownTicks = 0;
+            this.config.isLoading = false;
+        }
         this.log('Loading state:', this.config.isLoading);
         this.config.onLoadingChange?.(this.config.isLoading);
         // Update simulation state
-        if (this.data.nodes.length > 0) {
+        if (this.data.nodes.length > 0 && this.isForceLayoutMode()) {
             this.updateCanvasSimulationAttribute(true);
         }
+        else {
+            this.updateCanvasSimulationAttribute(false);
+        }
         // Initialize graph if it hasn't been initialized yet
         if (!this.graph && this.container) {
             this.log('Initializing graph');
@@ -225,11 +296,23 @@ class FalkorDBCanvas extends HTMLElement {
             return;
         this.log('Calculating node degrees and setting up forces');
         this.calculateNodeDegree();
-        this.setupForces();
         // Update graph data and properties
         this.graph
-            .graphData(this.data)
-            .cooldownTicks(this.config.cooldownTicks ?? Infinity);
+            .graphData(this.data);
+        this.configureSimulationForCurrentLayout(shouldAnimateNonForceLayout);
+        if (!this.isForceLayoutMode() && this.data.nodes.length > 0) {
+            if (shouldAnimateNonForceLayout) {
+                this.shouldZoomToFitOnNonForceSettle = true;
+            }
+            else {
+                this.shouldZoomToFitOnNonForceSettle = false;
+                this.zoomToFit(1);
+                this.triggerRender();
+            }
+        }
+        else {
+            this.shouldZoomToFitOnNonForceSettle = false;
+        }
         this.updateLoadingState();
     }
     getViewport() {
@@ -253,13 +336,40 @@ class FalkorDBCanvas extends HTMLElement {
     }
     setGraphData(data) {
         this.log('setGraphData called with', data.nodes.length, 'nodes and', data.links.length, 'links');
-        this.data = data;
+        const previousPositions = this.getNodePositionMap();
+        this.data = applyGraphLayout(data, this.config.layoutMode, this.config.layoutOptions);
+        const shouldAnimateNonForceLayout = this.prepareNodePositionsForCurrentLayout(previousPositions);
+        if (this.isForceLayoutMode() && this.config.cooldownTicks === 0 && this.data.nodes.length > 0) {
+            this.config.cooldownTicks = undefined;
+            this.shouldZoomToFitOnNonForceSettle = false;
+        }
         if (!this.graph)
             return;
         this.calculateNodeDegree();
-        this.setupForces();
         this.graph
             .graphData(this.data);
+        this.configureSimulationForCurrentLayout(shouldAnimateNonForceLayout);
+        if (this.isForceLayoutMode() && this.data.nodes.length > 0) {
+            this.triggerRender();
+        }
+        if (!this.isForceLayoutMode()) {
+            this.config.isLoading = false;
+            this.config.onLoadingChange?.(false);
+            this.updateLoadingState();
+            if (this.data.nodes.length > 0) {
+                if (shouldAnimateNonForceLayout) {
+                    this.shouldZoomToFitOnNonForceSettle = true;
+                }
+                else {
+                    this.shouldZoomToFitOnNonForceSettle = false;
+                    this.zoomToFit(1);
+                    this.triggerRender();
+                }
+            }
+            else {
+                this.shouldZoomToFitOnNonForceSettle = false;
+            }
+        }
         if (this.viewport) {
             this.log('Applying viewport:', this.viewport);
             this.graph.zoom(this.viewport.zoom, 0);
@@ -294,6 +404,167 @@ class FalkorDBCanvas extends HTMLElement {
         // Use the force-graph's built-in zoomToFit method
         this.graph.zoomToFit(500, padding * paddingMultiplier, filter);
     }
+    isForceLayoutMode() {
+        return isForceLayout(this.config.layoutMode);
+    }
+    getNodePositionMap() {
+        const positions = new Map();
+        for (const node of this.data.nodes) {
+            if (node.x === undefined || node.y === undefined)
+                continue;
+            positions.set(node.id, { x: node.x, y: node.y });
+        }
+        return positions;
+    }
+    getGraphCenter(positions) {
+        if (positions.size === 0)
+            return undefined;
+        let sumX = 0;
+        let sumY = 0;
+        for (const position of positions.values()) {
+            sumX += position.x;
+            sumY += position.y;
+        }
+        return {
+            x: sumX / positions.size,
+            y: sumY / positions.size,
+        };
+    }
+    getConnectedExistingPosition(nodeId, previousPositions) {
+        let sumX = 0;
+        let sumY = 0;
+        let count = 0;
+        for (const link of this.data.links) {
+            const sourceId = link.source.id;
+            const targetId = link.target.id;
+            if (sourceId === nodeId) {
+                const existingPosition = previousPositions.get(targetId);
+                if (!existingPosition)
+                    continue;
+                sumX += existingPosition.x;
+                sumY += existingPosition.y;
+                count += 1;
+            }
+            else if (targetId === nodeId) {
+                const existingPosition = previousPositions.get(sourceId);
+                if (!existingPosition)
+                    continue;
+                sumX += existingPosition.x;
+                sumY += existingPosition.y;
+                count += 1;
+            }
+        }
+        if (count === 0)
+            return undefined;
+        return {
+            x: sumX / count,
+            y: sumY / count,
+        };
+    }
+    clearLayoutTargets() {
+        for (const node of this.data.nodes) {
+            node.layoutTargetX = undefined;
+            node.layoutTargetY = undefined;
+        }
+    }
+    prepareNodePositionsForCurrentLayout(previousPositions) {
+        if (this.isForceLayoutMode()) {
+            this.clearLayoutTargets();
+            return false;
+        }
+        const graphCenter = this.getGraphCenter(previousPositions);
+        let shouldAnimate = false;
+        for (const node of this.data.nodes) {
+            const targetX = node.x ?? 0;
+            const targetY = node.y ?? 0;
+            node.layoutTargetX = targetX;
+            node.layoutTargetY = targetY;
+            node.fx = undefined;
+            node.fy = undefined;
+            node.vx = 0;
+            node.vy = 0;
+            if (previousPositions.size === 0) {
+                node.x = targetX;
+                node.y = targetY;
+                continue;
+            }
+            const previousPosition = previousPositions.get(node.id)
+                ?? this.getConnectedExistingPosition(node.id, previousPositions)
+                ?? graphCenter;
+            if (!previousPosition) {
+                node.x = targetX;
+                node.y = targetY;
+                continue;
+            }
+            node.x = previousPosition.x;
+            node.y = previousPosition.y;
+            if (Math.abs(previousPosition.x - targetX) > 0.5
+                || Math.abs(previousPosition.y - targetY) > 0.5) {
+                shouldAnimate = true;
+            }
+        }
+        return shouldAnimate;
+    }
+    setupAnchoredLayoutForces() {
+        if (!this.graph)
+            return;
+        const linkForce = this.graph.d3Force("link");
+        if (linkForce) {
+            linkForce
+                .distance((link) => {
+                const sourceSize = link.source.size;
+                const targetSize = link.target.size;
+                return sourceSize + targetSize + LINK_DISTANCE * 1.6;
+            })
+                .strength(NON_FORCE_LINK_STRENGTH);
+        }
+        this.graph.d3Force("collide", d3.forceCollide((node) => node.size + NON_FORCE_COLLIDE_PADDING));
+        this.graph.d3Force("centerX", d3.forceX(0).strength(NON_FORCE_CENTER_STRENGTH));
+        this.graph.d3Force("centerY", d3.forceY(0).strength(NON_FORCE_CENTER_STRENGTH));
+        this.graph.d3Force("layoutTargetX", d3.forceX((node) => node.layoutTargetX ?? node.x ?? 0).strength(NON_FORCE_TARGET_STRENGTH));
+        this.graph.d3Force("layoutTargetY", d3.forceY((node) => node.layoutTargetY ?? node.y ?? 0).strength(NON_FORCE_TARGET_STRENGTH));
+        const chargeForce = this.graph.d3Force("charge");
+        if (chargeForce) {
+            chargeForce.strength(NON_FORCE_CHARGE_STRENGTH);
+        }
+        this.graph.d3VelocityDecay(NON_FORCE_VELOCITY_DECAY);
+        this.graph.d3AlphaMin(NON_FORCE_ALPHA_MIN);
+    }
+    startNonForceSettleAnimation(cooldownTicks) {
+        if (!this.graph || this.data.nodes.length === 0 || this.isForceLayoutMode())
+            return;
+        this.graph.cooldownTicks(cooldownTicks);
+        this.updateCanvasSimulationAttribute(true);
+        this.graph.d3ReheatSimulation();
+    }
+    applyLayoutTargets() {
+        for (const node of this.data.nodes) {
+            if (node.layoutTargetX === undefined || node.layoutTargetY === undefined)
+                continue;
+            node.x = node.layoutTargetX;
+            node.y = node.layoutTargetY;
+            node.vx = 0;
+            node.vy = 0;
+        }
+    }
+    configureSimulationForCurrentLayout(shouldAnimateNonForceLayout = false) {
+        if (!this.graph)
+            return;
+        if (this.isForceLayoutMode()) {
+            this.setupForces();
+            const cooldownTicks = this.config.cooldownTicks ?? Infinity;
+            this.graph.cooldownTicks(cooldownTicks);
+            this.updateCanvasSimulationAttribute(cooldownTicks !== 0 && this.data.nodes.length > 0);
+            return;
+        }
+        this.setupAnchoredLayoutForces();
+        if (shouldAnimateNonForceLayout) {
+            this.startNonForceSettleAnimation(NON_FORCE_LAYOUT_COOLDOWN_TICKS);
+            return;
+        }
+        this.graph.cooldownTicks(0);
+        this.updateCanvasSimulationAttribute(false);
+    }
     triggerRender() {
         if (!this.graph || this.graph.cooldownTicks() !== 0)
             return;
@@ -420,7 +691,6 @@ class FalkorDBCanvas extends HTMLElement {
         this.calculateNodeDegree();
         // Initialize force-graph
         // Cast to any for the factory call pattern, result is properly typed as ForceGraphInstance
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.graph = ForceGraph()(this.container)
             .width(this.config.width || 800)
             .height(this.config.height || 600)
@@ -435,7 +705,7 @@ class FalkorDBCanvas extends HTMLElement {
             .linkCurvature("curve")
             .linkVisibility("visible")
             .nodeVisibility("visible")
-            .cooldownTicks(this.config.cooldownTicks ?? Infinity) // undefined = infinite
+            .cooldownTicks(this.isForceLayoutMode() ? (this.config.cooldownTicks ?? Infinity) : 0) // undefined = infinite
             .cooldownTime(this.config.cooldownTime ?? 2000)
             .enableNodeDrag(true)
             .enableZoomInteraction(true)
@@ -464,6 +734,12 @@ class FalkorDBCanvas extends HTMLElement {
             if (this.config.onNodeHover) {
                 this.config.onNodeHover(node);
             }
+        })
+            .onNodeDrag((node) => {
+            this.handleNodeDrag(node);
+        })
+            .onNodeDragEnd((node) => {
+            this.handleNodeDragEnd(node);
         })
             .onLinkHover((link) => {
             if (this.config.onLinkHover) {
@@ -523,8 +799,7 @@ class FalkorDBCanvas extends HTMLElement {
                 this.pointerLink(link, color, ctx);
             }
         });
-        // Setup forces
-        this.setupForces();
+        this.configureSimulationForCurrentLayout();
         this.log('Force graph initialization complete');
     }
     setupForces() {
@@ -534,6 +809,8 @@ class FalkorDBCanvas extends HTMLElement {
             return;
         if (!this.graph)
             return;
+        this.graph.d3Force("layoutTargetX", null);
+        this.graph.d3Force("layoutTargetY", null);
         // distance based on node size + constant
         linkForce
             .distance((link) => {
@@ -564,6 +841,28 @@ class FalkorDBCanvas extends HTMLElement {
         }
         this.log('Force simulation setup complete');
     }
+    handleNodeDrag(node) {
+        if (this.isForceLayoutMode())
+            return;
+        if (node.x === undefined || node.y === undefined)
+            return;
+        node.layoutTargetX = node.x;
+        node.layoutTargetY = node.y;
+        this.shouldZoomToFitOnNonForceSettle = false;
+        this.startNonForceSettleAnimation(NON_FORCE_DRAG_COOLDOWN_TICKS);
+    }
+    handleNodeDragEnd(node) {
+        if (this.isForceLayoutMode())
+            return;
+        if (node.x === undefined || node.y === undefined)
+            return;
+        node.layoutTargetX = node.x;
+        node.layoutTargetY = node.y;
+        node.fx = undefined;
+        node.fy = undefined;
+        this.shouldZoomToFitOnNonForceSettle = false;
+        this.startNonForceSettleAnimation(NON_FORCE_DRAG_COOLDOWN_TICKS);
+    }
     drawNode(node, ctx) {
         if (node.x === undefined || node.y === undefined) {
             node.x = 0;
@@ -591,32 +890,46 @@ class FalkorDBCanvas extends HTMLElement {
             ctx.font = `400 ${NODE_FONT_SIZE_BASE}px SofiaSans`;
             [line1, line2] = wrapTextForCircularNode(ctx, text, textRadius);
             let chosenSize = NODE_FONT_SIZE_BASE;
+            // Measure at a large reference size (20px) where canvas metrics are
+            // precise, then compute the exact scale to fill the node.
+            const REF = 20;
+            ctx.font = `400 ${REF}px SofiaSans`;
+            // Switch to "left" for measurement: actualBoundingBoxLeft/Right are
+            // unreliable with textAlign="center" and can double on some engines.
+            ctx.textAlign = "left";
+            const refMetrics = ctx.measureText(line1);
+            // Use the actual visual bounding box (not advance width) so glyphs
+            // with overshoot (e.g. "7") are fully accounted for.
+            const visualWidth = (refMetrics.actualBoundingBoxLeft ?? 0)
+                + (refMetrics.actualBoundingBoxRight ?? 0);
+            let refWidth = Math.max(visualWidth, refMetrics.width);
+            const singleLineHeight = (refMetrics.actualBoundingBoxAscent ?? 0)
+                + (refMetrics.actualBoundingBoxDescent ?? 0);
+            let refHeight;
             if (!line2) {
-                // Single-line: measure at a large reference size (20px) where canvas
-                // metrics are precise, then compute the exact scale to fill the node.
-                const REF = 20;
-                ctx.font = `400 ${REF}px SofiaSans`;
-                const refMetrics = ctx.measureText(line1);
-                // Use the actual visual bounding box (not advance width) so glyphs
-                // with overshoot (e.g. "7") are fully accounted for.
-                const visualWidth = (refMetrics.actualBoundingBoxLeft ?? 0)
-                    + (refMetrics.actualBoundingBoxRight ?? 0);
-                const refWidth = Math.max(visualWidth, refMetrics.width);
-                const refHeight = (refMetrics.actualBoundingBoxAscent ?? 0)
-                    + (refMetrics.actualBoundingBoxDescent ?? 0);
-                // Inscribed-rectangle-in-circle constraint: every corner of the text
-                // bounding box must lie inside the circle, i.e.
-                //   sqrt((w/2)² + (h/2)²) ≤ r
-                // Solving for the uniform scale factor s:
-                //   s = 2·r / sqrt(refWidth² + refHeight²)
-                const r = NODE_TEXT_FILL_RATIO * textRadius;
-                if (refWidth > 0 && refHeight > 0) {
-                    const diagonal = Math.sqrt(refWidth * refWidth + refHeight * refHeight);
-                    chosenSize = REF * (2 * r / diagonal);
-                }
-                else if (refWidth > 0) {
-                    chosenSize = REF * (2 * r / refWidth);
-                }
+                refHeight = singleLineHeight;
+            }
+            else {
+                // Two-line: use the wider line and account for the vertical span
+                // of both lines including the 1.5× spacing used by the rendering code.
+                const m2 = ctx.measureText(line2);
+                const vis2 = Math.max((m2.actualBoundingBoxLeft ?? 0) + (m2.actualBoundingBoxRight ?? 0), m2.width);
+                refWidth = Math.max(refWidth, vis2);
+                refHeight = singleLineHeight * 2.5;
+            }
+            ctx.textAlign = "center";
+            // Inscribed-rectangle-in-circle constraint: every corner of the text
+            // bounding box must lie inside the circle, i.e.
+            //   sqrt((w/2)² + (h/2)²) ≤ r
+            // Solving for the uniform scale factor s:
+            //   s = 2·r / sqrt(refWidth² + refHeight²)
+            const r = NODE_TEXT_FILL_RATIO * textRadius;
+            if (refWidth > 0 && refHeight > 0) {
+                const diagonal = Math.sqrt(refWidth * refWidth + refHeight * refHeight);
+                chosenSize = REF * (2 * r / diagonal);
+            }
+            else if (refWidth > 0) {
+                chosenSize = REF * (2 * r / refWidth);
             }
             ctx.font = `400 ${chosenSize}px SofiaSans`;
             node.displayName = [line1, line2];
@@ -675,7 +988,7 @@ class FalkorDBCanvas extends HTMLElement {
         // bezier midpoint and the arrow tip are at almost the same position).
         let pendingArrow = null;
         if (start.id === end.id) {
-            const nodeSize = start.size || 6;
+            const nodeSize = start.size || NODE_SIZE;
             const d = (link.curve || 0) * nodeSize * SELF_LOOP_CURVE_FACTOR;
             ctx.lineWidth = (isLinkSelected ? 2 : 1) / globalScale;
             if (this.config.linkLineDash)
@@ -786,7 +1099,7 @@ class FalkorDBCanvas extends HTMLElement {
             // Draw regular link line and arrowhead
             const arrowHalfWidth = arrowLen / ARROW_WH_RATIO / 2;
             // Target-side clip: find t where bezier enters target node border + PADDING
-            const endNodeSize = end.size || 6;
+            const endNodeSize = end.size || NODE_SIZE;
             const borderRadius = endNodeSize + (this.config.isNodeSelected?.(end) ? 1 : 0.5) + PADDING;
             const borderRadiusSq = borderRadius * borderRadius;
             let tArrow;
@@ -815,7 +1128,7 @@ class FalkorDBCanvas extends HTMLElement {
             const tipX = uArrow * uArrow * start.x + 2 * uArrow * tArrow * controlX + tArrow * tArrow * end.x;
             const tipY = uArrow * uArrow * start.y + 2 * uArrow * tArrow * controlY + tArrow * tArrow * end.y;
             // Source-side clip: find t where bezier exits source node border + PADDING
-            const startNodeSize = start.size || 6;
+            const startNodeSize = start.size || NODE_SIZE;
             const srcBorderRadius = startNodeSize + (this.config.isNodeSelected?.(start) ? 1 : 0.5) + PADDING;
             const srcBorderRadiusSq = srcBorderRadius * srcBorderRadius;
             let tStart = 0;
@@ -939,7 +1252,7 @@ class FalkorDBCanvas extends HTMLElement {
         ctx.beginPath();
         if (start.id === end.id) {
             // Self-loop: replicate exact cubic bezier clip from drawLink
-            const nodeSize = start.size || 6;
+            const nodeSize = start.size || NODE_SIZE;
             const d = (link.curve || 0) * nodeSize * SELF_LOOP_CURVE_FACTOR;
             const nodeStrokeWidth = this.config.isNodeSelected?.(start) ? 1 : 0.5;
             const borderRadius = nodeSize + nodeStrokeWidth + PADDING;
@@ -984,7 +1297,7 @@ class FalkorDBCanvas extends HTMLElement {
                 const controlX = (start.x + end.x) / 2 + perpX * curvature * distance;
                 const controlY = (start.y + end.y) / 2 + perpY * curvature * distance;
                 // Use the same borderRadius and binary-search clip as drawLink
-                const endNodeSize = end.size || 6;
+                const endNodeSize = end.size || NODE_SIZE;
                 const borderRadius = endNodeSize + (this.config.isNodeSelected?.(end) ? 1 : 0.5) + PADDING;
                 const borderRadiusSq = borderRadius * borderRadius;
                 let tArrow;
@@ -1013,7 +1326,7 @@ class FalkorDBCanvas extends HTMLElement {
                 const tipX = uArrow * uArrow * start.x + 2 * uArrow * tArrow * controlX + tArrow * tArrow * end.x;
                 const tipY = uArrow * uArrow * start.y + 2 * uArrow * tArrow * controlY + tArrow * tArrow * end.y;
                 // Source-side clip: mirror of drawLink source gap
-                const startNodeSize = start.size || 6;
+                const startNodeSize = start.size || NODE_SIZE;
                 const srcBorderRadius = startNodeSize + (this.config.isNodeSelected?.(start) ? 1 : 0.5) + PADDING;
                 const srcBorderRadiusSq = srcBorderRadius * srcBorderRadius;
                 let tStart = 0;
@@ -1068,6 +1381,16 @@ class FalkorDBCanvas extends HTMLElement {
         if (!this.graph)
             return;
         this.log('Engine stopped');
+        if (!this.isForceLayoutMode()) {
+            this.applyLayoutTargets();
+            this.graph.cooldownTicks(0);
+            this.updateCanvasSimulationAttribute(false);
+            if (this.shouldZoomToFitOnNonForceSettle && this.data.nodes.length > 0) {
+                this.zoomToFit(1);
+            }
+            this.shouldZoomToFitOnNonForceSettle = false;
+            return;
+        }
         // If already stopped, just ensure any leftover loading state is cleared and return
         if (this.config.cooldownTicks === 0) {
             if (this.config.isLoading) {
@@ -1136,6 +1459,12 @@ class FalkorDBCanvas extends HTMLElement {
             if (this.config.onNodeHover) {
                 this.config.onNodeHover(node);
             }
+        })
+            .onNodeDrag((node) => {
+            this.handleNodeDrag(node);
+        })
+            .onNodeDragEnd((node) => {
+            this.handleNodeDragEnd(node);
         })
             .onLinkHover((link) => {
             if (this.config.onLinkHover) {