@deck.gl-community/graph-layers 9.1.1 → 9.2.0-beta.3

package/src/layouts/d3-force/d3-force-layout.ts

@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {GraphLayout, GraphLayoutOptions} from '../../core/graph-layout';
+import {GraphLayout, GraphLayoutProps} from '../../core/graph-layout';
+import type {Graph, NodeInterface, EdgeInterface} from '../../graph/graph';
+import {log} from '../../utils/log';
 
-import {EDGE_TYPE} from '../../core/constants';
-
-export type D3ForceLayoutOptions = GraphLayoutOptions & {
+export type D3ForceLayoutOptions = GraphLayoutProps & {
   alpha?: number;
   resumeAlpha?: number;
   nBodyStrength?: number;
@@ -16,39 +16,38 @@ export type D3ForceLayoutOptions = GraphLayoutOptions & {
 };
 
 export class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
-  static defaultOptions: Required<D3ForceLayoutOptions> = {
+  static defaultProps = {
+    ...GraphLayout.defaultProps,
     alpha: 0.3,
     resumeAlpha: 0.1,
     nBodyStrength: -900,
     nBodyDistanceMin: 100,
     nBodyDistanceMax: 400,
     getCollisionRadius: 0
-  };
+  } as const satisfies Readonly<Required<D3ForceLayoutOptions>>;
 
   protected readonly _name = 'D3';
-  private _positionsByNodeId = new Map();
-  private _graph: any;
-  private _worker: any;
+  private _positionsByNodeId = new Map<string | number, any>();
+  private _graph: Graph | null = null;
+  private _worker: Worker | null = null;
 
-  constructor(options?: D3ForceLayoutOptions) {
-    super(options);
-
-    this._options = {
-      ...D3ForceLayout.defaultOptions,
-      ...options
-    };
+  constructor(props?: D3ForceLayoutOptions) {
+    super(props, D3ForceLayout.defaultProps);
   }
 
-  initializeGraph(graph) {
+  initializeGraph(graph: Graph) {
     this._graph = graph;
   }
 
   // for streaming new data on the same graph
-  updateGraph(graph) {
+  updateGraph(graph: Graph) {
     this._graph = graph;
 
     this._positionsByNodeId = new Map(
-      this._graph.getNodes().map((node) => [node.id, this._positionsByNodeId.get(node.id)])
+      Array.from(this._graph.getNodes(), (node) => {
+        const id = node.getId();
+        return [id, this._positionsByNodeId.get(id)];
+      })
     );
   }
 
@@ -70,20 +69,34 @@ export class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
 
     this._worker = new Worker(new URL('./worker.js', import.meta.url).href);
 
+    if (!this._graph) {
+      return;
+    }
+
+    const options = {...this.props};
+    delete options.onLayoutStart;
+    delete options.onLayoutChange;
+    delete options.onLayoutDone;
+    delete options.onLayoutError;
+
     this._worker.postMessage({
-      nodes: this._graph.getNodes().map((node) => ({
-        id: node.id,
-        ...this._positionsByNodeId.get(node.id)
-      })),
-      edges: this._graph.getEdges().map((edge) => ({
-        id: edge.id,
+      nodes: Array.from(this._graph.getNodes(), (node) => {
+        const id = node.getId();
+        return {
+          id,
+          ...this._positionsByNodeId.get(id)
+        };
+      }),
+      edges: Array.from(this._graph.getEdges(), (edge) => ({
+        id: edge.getId(),
         source: edge.getSourceNodeId(),
         target: edge.getTargetNodeId()
       })),
-      options: this._options
+      options
     });
 
     this._worker.onmessage = (event) => {
+      log.log(0, 'D3ForceLayout: worker message', event.data?.type, event.data);
       if (event.data.type !== 'end') {
         return;
       }
@@ -106,26 +119,44 @@ export class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
   }
 
   stop() {
-    this._worker.terminate();
+    if (this._worker) {
+      this._worker.terminate();
+      this._worker = null;
+    }
   }
 
-  getEdgePosition = (edge) => {
+  getEdgePosition = (edge: EdgeInterface) => {
+    if (!this._graph) {
+      return null;
+    }
+
     const sourceNode = this._graph.findNode(edge.getSourceNodeId());
     const targetNode = this._graph.findNode(edge.getTargetNodeId());
-    if (!this.getNodePosition(sourceNode) || !this.getNodePosition(targetNode)) {
+    if (!sourceNode || !targetNode) {
+      return null;
+    }
+
+    const sourcePosition = this.getNodePosition(sourceNode);
+    const targetPosition = this.getNodePosition(targetNode);
+
+    if (!sourcePosition || !targetPosition) {
       return null;
     }
 
     return {
-      type: EDGE_TYPE.LINE,
-      sourcePosition: this.getNodePosition(sourceNode),
-      targetPosition: this.getNodePosition(targetNode),
+      type: 'line',
+      sourcePosition,
+      targetPosition,
       controlPoints: []
     };
   };
 
-  getNodePosition = (node) => {
-    const d3Node = this._positionsByNodeId.get(node.id);
+  getNodePosition = (node: NodeInterface | null) => {
+    if (!node) {
+      return null;
+    }
+
+    const d3Node = this._positionsByNodeId.get(node.getId());
     if (d3Node) {
       return d3Node.coordinates;
     }
@@ -133,9 +164,10 @@ export class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
     return null;
   };
 
-  lockNodePosition = (node, x, y) => {
-    const d3Node = this._positionsByNodeId.get(node.id);
-    this._positionsByNodeId.set(node.id, {
+  lockNodePosition = (node: NodeInterface, x: number, y: number) => {
+    const id = node.getId();
+    const d3Node = this._positionsByNodeId.get(id);
+    this._positionsByNodeId.set(id, {
       ...d3Node,
       x,
       y,
@@ -147,9 +179,21 @@ export class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
     this._onLayoutDone();
   };
 
-  unlockNodePosition = (node) => {
-    const d3Node = this._positionsByNodeId.get(node.id);
+  unlockNodePosition = (node: NodeInterface) => {
+    const id = node.getId();
+    const d3Node = this._positionsByNodeId.get(id);
+    if (!d3Node) {
+      return;
+    }
     d3Node.fx = null;
     d3Node.fy = null;
   };
+
+  protected override _updateBounds(): void {
+    const positions = Array.from(
+      this._positionsByNodeId.values(),
+      (data) => data?.coordinates as [number, number] | null | undefined
+    );
+    this._bounds = this._calculateBounds(positions);
+  }
 }

package/src/layouts/experimental/force-multi-graph-layout.ts

@@ -2,43 +2,38 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {GraphLayout, GraphLayoutOptions} from '../../core/graph-layout';
-import {Node} from '../../graph/node';
-import {EDGE_TYPE} from '../../core/constants';
-import {Graph} from '../../graph/graph';
+import {GraphLayout, GraphLayoutProps} from '../../core/graph-layout';
+import type {Graph, NodeInterface, EdgeInterface} from '../../graph/graph';
 import * as d3 from 'd3-force';
 
-export type ForceMultiGraphLayoutOptions = GraphLayoutOptions & {
+export type ForceMultiGraphLayoutProps = GraphLayoutProps & {
   alpha?: number;
   nBodyStrength?: number;
   nBodyDistanceMin?: number;
   nBodyDistanceMax?: number;
 };
 
-export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOptions> {
-  static defaultOptions = {
+export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProps> {
+  static defaultProps = {
+    ...GraphLayout.defaultProps,
     alpha: 3,
     nBodyStrength: -1200,
     nBodyDistanceMin: 100,
     nBodyDistanceMax: 1400
-  };
+  } as const satisfies Readonly<Required<ForceMultiGraphLayoutProps>>;
 
   _name = 'ForceMultiGraphLayout';
-  _graph: Graph;
+  _graph: Graph | null = null;
 
   // d3 part
   // custom graph data
-  _d3Graph = {nodes: [], edges: []};
-  _nodeMap = {};
-  _edgeMap = {};
-  _simulator;
+  _d3Graph: {nodes: any[]; edges: any[]} = {nodes: [], edges: []};
+  _nodeMap = new Map<string | number, any>();
+  _edgeMap = new Map<string | number, any>();
+  _simulator: d3.Simulation<any, undefined> | null = null;
 
-  constructor(options: ForceMultiGraphLayoutOptions = {}) {
-    super(options);
-    this._options = {
-      ...ForceMultiGraphLayout.defaultOptions,
-      ...options
-    };
+  constructor(props: ForceMultiGraphLayoutProps = {}) {
+    super(props, ForceMultiGraphLayout.defaultProps);
   }
 
   initializeGraph(graph: Graph): void {
@@ -49,8 +44,10 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOpti
     if (d3Edge.isVirtual) {
       return 1 / d3Edge.edgeCount;
     }
-    const sourceDegree = this._graph.getDegree(d3Edge.source.id);
-    const targetDegree = this._graph.getDegree(d3Edge.target.id);
+    const sourceNode = this._graph?.findNode(d3Edge.source.id);
+    const targetNode = this._graph?.findNode(d3Edge.target.id);
+    const sourceDegree = sourceNode?.getDegree() ?? 0;
+    const targetDegree = targetNode?.getDegree() ?? 0;
     return 1 / Math.min(sourceDegree, targetDegree);
   };
 
@@ -59,7 +56,7 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOpti
       this._simulator.on('tick', null).on('end', null);
       this._simulator = null;
     }
-    const {alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax} = this._options;
+    const {alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax} = this.props;
 
     const g = this._d3Graph;
     this._simulator = d3
@@ -68,6 +65,7 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOpti
         'edge',
         d3
           .forceLink(g.edges)
+          // @ts-ignore TODO id not defined?
           .id((n) => n.id)
           .strength(this._strength)
       )
@@ -98,25 +96,30 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOpti
     this._simulator.stop();
   }
 
-  updateGraph(graph) {
+  update(): void {}
+
+  updateGraph(graph: Graph) {
     this._graph = graph;
 
     // nodes
-    const newNodeMap = {};
-    const newD3Nodes = graph.getNodes().map((node) => {
-      const oldD3Node = this._nodeMap[node.id];
-      const newD3Node = oldD3Node ? oldD3Node : {id: node.id};
-      newNodeMap[node.id] = newD3Node;
+    const newNodeMap = new Map<string | number, any>();
+    const nodes = Array.from(graph.getNodes());
+    const newD3Nodes = nodes.map((node) => {
+      const id = node.getId();
+      const oldD3Node = this._nodeMap.get(id);
+      const newD3Node = oldD3Node ? oldD3Node : {id};
+      newNodeMap.set(id, newD3Node);
       return newD3Node;
     });
 
     // edges
     // bucket edges between the same source/target node pairs.
-    const nodePairs = graph.getEdges().reduce((res, edge) => {
-      const nodes = [edge.getSourceNodeId(), edge.getTargetNodeId()];
+    const edges = Array.from(graph.getEdges());
+    const nodePairs = edges.reduce((res, edge) => {
+      const endpoints = [edge.getSourceNodeId(), edge.getTargetNodeId()];
       // sort the node ids to count the edges with the same pair
       // but different direction (a -> b or b -> a)
-      const pairId = nodes.sort().toString();
+      const pairId = endpoints.sort().toString();
       // push this edge into the bucket
       if (!res[pairId]) {
         res[pairId] = [edge];
@@ -129,8 +132,8 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOpti
     // go through each pair of edges,
     // if only one edge between two nodes, create a straight line
     // otherwise, create one virtual node and two edges for each edge
-    const newD3Edges = [];
-    const newEdgeMap = {};
+    const newD3Edges: any[] = [];
+    const newEdgeMap = new Map<string | number, any>();
 
     Object.keys(nodePairs).forEach((pairId) => {
       const betweenEdges = nodePairs[pairId];
@@ -138,39 +141,40 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOpti
       if (betweenEdges.length === 1) {
         // do nothing, this is a real edge
         const newD3Edge = {
-          type: EDGE_TYPE.LINE,
+          type: 'line',
           id: firstEdge.getId(),
-          source: newNodeMap[firstEdge.getSourceNodeId()],
-          target: newNodeMap[firstEdge.getTargetNodeId()],
+          source: newNodeMap.get(firstEdge.getSourceNodeId()),
+          target: newNodeMap.get(firstEdge.getTargetNodeId()),
           isVirtual: false
         };
-        newEdgeMap[firstEdge.getId()] = newD3Edge;
+        newEdgeMap.set(firstEdge.getId(), newD3Edge);
         newD3Edges.push(newD3Edge);
         return;
       }
 
       // else reduce to one virtual edge
       const newD3Edge = {
-        type: EDGE_TYPE.LINE,
+        type: 'line',
         id: pairId,
-        source: newNodeMap[firstEdge.getSourceNodeId()],
-        target: newNodeMap[firstEdge.getTargetNodeId()],
+        source: newNodeMap.get(firstEdge.getSourceNodeId()),
+        target: newNodeMap.get(firstEdge.getTargetNodeId()),
         isVirtual: true,
         edgeCount: betweenEdges.length
       };
-      newEdgeMap[pairId] = newD3Edge;
+      newEdgeMap.set(pairId, newD3Edge);
       newD3Edges.push(newD3Edge);
 
       betweenEdges.forEach((e, idx) => {
-        newEdgeMap[e.id] = {
-          type: EDGE_TYPE.SPLINE_CURVE,
-          id: e.id,
-          source: newNodeMap[e.getSourceNodeId()],
-          target: newNodeMap[e.getTargetNodeId()],
+        const edgeId = e.getId();
+        newEdgeMap.set(edgeId, {
+          type: 'spline-curve',
+          id: edgeId,
+          source: newNodeMap.get(e.getSourceNodeId()),
+          target: newNodeMap.get(e.getTargetNodeId()),
           virtualEdgeId: pairId,
           isVirtual: true,
           index: idx
-        };
+        });
       });
     });
 
@@ -180,8 +184,8 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOpti
     this._d3Graph.edges = newD3Edges;
   }
 
-  getNodePosition = (node: Node): [number, number] => {
-    const d3Node = this._nodeMap[node.id];
+  getNodePosition = (node: NodeInterface): [number, number] => {
+    const d3Node = this._nodeMap.get(node.getId());
     if (d3Node) {
       return [d3Node.x, d3Node.y];
     }
@@ -189,19 +193,22 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOpti
     return [0, 0];
   };
 
-  getEdgePosition = (edge) => {
-    const d3Edge = this._edgeMap[edge.id];
+  getEdgePosition = (edge: EdgeInterface) => {
+    const d3Edge = this._edgeMap.get(edge.getId());
     if (d3Edge) {
       if (!d3Edge.isVirtual) {
         return {
-          type: EDGE_TYPE.LINE,
+          type: 'line',
           sourcePosition: [d3Edge.source.x, d3Edge.source.y],
           targetPosition: [d3Edge.target.x, d3Edge.target.y],
           controlPoints: []
         };
       }
       // else, check the referenced virtual edge
-      const virtualEdge = this._edgeMap[d3Edge.virtualEdgeId];
+      const virtualEdge = this._edgeMap.get(d3Edge.virtualEdgeId);
+      if (!virtualEdge) {
+        return null;
+      }
       const edgeCount = virtualEdge.edgeCount;
       // get the position of source and target nodes
       const sourcePosition = [virtualEdge.source.x, virtualEdge.source.y];
@@ -222,7 +229,7 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOpti
         (symmetricShape ? Math.floor(index / 2 + 1) : Math.ceil(index / 2));
       const controlPoint = computeControlPoint(sourcePosition, targetPosition, direction, offset);
       return {
-        type: EDGE_TYPE.SPLINE_CURVE,
+        type: 'spline-curve',
         sourcePosition,
         targetPosition,
         controlPoints: [controlPoint]
@@ -230,20 +237,28 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOpti
     }
     // default value
     return {
-      type: EDGE_TYPE.LINE,
+      type: 'line',
       sourcePosition: [0, 0],
       targetPosition: [0, 0],
       controlPoints: []
     };
   };
 
-  lockNodePosition = (node, x, y) => {
-    const d3Node = this._nodeMap[node.id];
+  lockNodePosition = (node: NodeInterface, x: number, y: number) => {
+    const d3Node = this._nodeMap.get(node.getId());
+    if (!d3Node) {
+      return;
+    }
     d3Node.x = x;
     d3Node.y = y;
     this._onLayoutChange();
     this._onLayoutDone();
   };
+
+  protected override _updateBounds(): void {
+    const positions = Array.from(this._nodeMap.values(), (node) => this._normalizePosition(node));
+    this._bounds = this._calculateBounds(positions);
+  }
 }
 
 /**

package/src/layouts/experimental/hive-plot-layout.ts

@@ -2,54 +2,47 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {GraphLayout, GraphLayoutOptions} from '../../core/graph-layout';
-import {Node} from '../../graph/node';
-import {EDGE_TYPE} from '../../core/constants';
-import {Graph} from '../../graph/graph';
+import {GraphLayout, GraphLayoutProps} from '../../core/graph-layout';
+import type {Graph, NodeInterface, EdgeInterface} from '../../graph/graph';
 
-export type HivePlotLayoutOptions = GraphLayoutOptions & {
+export type HivePlotLayoutProps = GraphLayoutProps & {
   innerRadius?: number;
   outerRadius?: number;
-  getNodeAxis?: (node: Node) => any;
+  getNodeAxis?: (node: NodeInterface) => any;
 };
 
-export class HivePlotLayout extends GraphLayout<HivePlotLayoutOptions> {
-  static defaultOptions = {
+export class HivePlotLayout extends GraphLayout<HivePlotLayoutProps> {
+  static defaultProps = {
+    ...GraphLayout.defaultProps,
     innerRadius: 100,
     outerRadius: 500,
-    getNodeAxis: (node: Node) => node.getPropertyValue('group')
-  } as const satisfies Readonly<Required<HivePlotLayoutOptions>>;
+    getNodeAxis: (node: NodeInterface) => node.getPropertyValue('group')
+  } as const satisfies Readonly<Required<HivePlotLayoutProps>>;
 
   _name = 'HivePlot';
-  _graph: Graph;
-  _totalAxis: number;
-  _axis: Record<string, any>;
-  _nodeMap = {};
-  _nodePositionMap = {};
-
-  constructor(options: HivePlotLayoutOptions = {}) {
-    super(options);
-    this._options = {
-      ...HivePlotLayout.defaultOptions,
-      ...options
-    };
+  _graph: Graph | null = null;
+  _totalAxis: number = 0;
+  _axis: Record<string, NodeInterface[]> = {};
+  _nodeMap = new Map<string | number, NodeInterface>();
+  _nodePositionMap = new Map<string | number, [number, number]>();
+
+  constructor(props: HivePlotLayoutProps = {}) {
+    super(props, HivePlotLayout.defaultProps);
   }
 
   initializeGraph(graph: Graph) {
     this.updateGraph(graph);
   }
 
-  updateGraph(graph) {
-    const {getNodeAxis, innerRadius, outerRadius} = this._options;
+  updateGraph(graph: Graph) {
+    const {getNodeAxis, innerRadius, outerRadius} = this.props;
     this._graph = graph;
-    this._nodeMap = graph.getNodes().reduce((res, node) => {
-      res[node.getId()] = node;
-      return res;
-    }, {});
+    const nodes = Array.from(graph.getNodes());
+    this._nodeMap = new Map(nodes.map((node) => [node.getId(), node]));
 
     // bucket nodes into few axis
 
-    this._axis = graph.getNodes().reduce((res, node) => {
+    this._axis = nodes.reduce((res, node) => {
       const axis = getNodeAxis(node);
       if (!res[axis]) {
         res[axis] = [];
@@ -78,7 +71,8 @@ export class HivePlotLayout extends GraphLayout<HivePlotLayoutOptions> {
     const angleInterval = 360 / Object.keys(this._axis).length;
 
     // calculate positions
-    this._nodePositionMap = Object.keys(this._axis).reduce((res, axis, axisIdx) => {
+    this._nodePositionMap = new Map();
+    Object.keys(this._axis).forEach((axis, axisIdx) => {
       const axisAngle = angleInterval * axisIdx;
       const bucketedNodes = this._axis[axis];
       const interval = (outerRadius - innerRadius) / bucketedNodes.length;
@@ -87,36 +81,46 @@ export class HivePlotLayout extends GraphLayout<HivePlotLayoutOptions> {
         const radius = innerRadius + idx * interval;
         const x = Math.cos((axisAngle / 180) * Math.PI) * radius + center[0];
         const y = Math.sin((axisAngle / 180) * Math.PI) * radius + center[1];
-        res[node.getId()] = [x, y];
+        this._nodePositionMap.set(node.getId(), [x, y]);
       });
-      return res;
-    }, {});
+    });
   }
 
   start() {
+    this._onLayoutStart();
     this._onLayoutChange();
     this._onLayoutDone();
   }
 
-  getNodePosition = (node) => this._nodePositionMap[node.getId()];
+  stop() {}
+
+  update() {}
 
-  getEdgePosition = (edge) => {
-    const {getNodeAxis} = this._options;
+  resume() {}
+
+  getNodePosition = (node: NodeInterface) => this._nodePositionMap.get(node.getId());
+
+  getEdgePosition = (edge: EdgeInterface) => {
+    const {getNodeAxis} = this.props;
     const sourceNodeId = edge.getSourceNodeId();
     const targetNodeId = edge.getTargetNodeId();
 
-    const sourcePosition = this._nodePositionMap[sourceNodeId];
-    const targetPosition = this._nodePositionMap[targetNodeId];
+    const sourcePosition = this._nodePositionMap.get(sourceNodeId);
+    const targetPosition = this._nodePositionMap.get(targetNodeId);
+
+    if (!sourcePosition || !targetPosition) {
+      return null;
+    }
 
-    const sourceNode = this._nodeMap[sourceNodeId];
-    const targetNode = this._nodeMap[targetNodeId];
+    const sourceNode = this._nodeMap.get(sourceNodeId);
+    const targetNode = this._nodeMap.get(targetNodeId);
 
-    const sourceNodeAxis = getNodeAxis(sourceNode);
-    const targetNodeAxis = getNodeAxis(targetNode);
+    const sourceNodeAxis = sourceNode ? getNodeAxis(sourceNode) : null;
+    const targetNodeAxis = targetNode ? getNodeAxis(targetNode) : null;
 
-    if (sourceNodeAxis === targetNodeAxis) {
+    if (sourceNodeAxis !== null && sourceNodeAxis === targetNodeAxis) {
       return {
-        type: EDGE_TYPE.LINE,
+        type: 'line',
         sourcePosition,
         targetPosition,
         controlPoints: []
@@ -125,25 +129,32 @@ export class HivePlotLayout extends GraphLayout<HivePlotLayoutOptions> {
 
     const controlPoint = computeControlPoint({
       sourcePosition,
-      sourceNodeAxis,
+      sourceNodeAxis: sourceNodeAxis ?? 0,
       targetPosition,
-      targetNodeAxis,
+      targetNodeAxis: targetNodeAxis ?? 0,
       totalAxis: this._totalAxis
     });
 
     return {
-      type: EDGE_TYPE.SPLINE_CURVE,
+      type: 'spline-curve',
       sourcePosition,
       targetPosition,
       controlPoints: [controlPoint]
     };
   };
 
-  lockNodePosition = (node, x, y) => {
-    this._nodePositionMap[node.id] = [x, y];
+  lockNodePosition = (node: NodeInterface, x: number, y: number) => {
+    this._nodePositionMap.set(node.getId(), [x, y]);
     this._onLayoutChange();
     this._onLayoutDone();
   };
+
+  protected override _updateBounds(): void {
+    const positions = Array.from(this._nodePositionMap.values(), (position) =>
+      this._normalizePosition(position)
+    );
+    this._bounds = this._calculateBounds(positions);
+  }
 }
 
 function computeControlPoint({