Merge pull request #4129 from xyflow/refactor/svelte-internal

Svelte: Refactor internals

packages/system/src/utils/edges/positions.ts

@@ -97,8 +97,8 @@ function toHandleBounds(handles?: NodeHandle[]) {
 }
 
 function getHandlePosition(position: Position, node: InternalNodeBase, handle: HandleElement | null = null): number[] {
-  const x = (handle?.x ?? 0) + (node.internals.positionAbsolute?.x ?? 0);
-  const y = (handle?.y ?? 0) + (node.internals.positionAbsolute?.y ?? 0);
+  const x = (handle?.x ?? 0) + node.internals.positionAbsolute.x;
+  const y = (handle?.y ?? 0) + node.internals.positionAbsolute.y;
   const { width, height } = handle ?? getNodeDimensions(node);
 
   switch (position) {

packages/system/src/utils/graph.ts

@@ -230,14 +230,14 @@ export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
   // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
   excludeNonSelectableNodes = false,
   nodeOrigin: NodeOrigin = [0, 0]
-): NodeType[] => {
+): InternalNodeBase<NodeType>[] => {
   const paneRect = {
     ...pointToRendererPoint(rect, [tx, ty, tScale]),
     width: rect.width / tScale,
     height: rect.height / tScale,
   };
 
-  const visibleNodes: NodeType[] = [];
+  const visibleNodes: InternalNodeBase<NodeType>[] = [];
 
   for (const [, node] of nodeLookup) {
     const { measured, selectable = true, hidden = false } = node;
@@ -290,6 +290,7 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
   nodeLookup.forEach((n) => {
     const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);
 
+    // TODO: this remove options.nodes.some with a Set
     if (
       isVisible &&
       (!options?.nodes || (options?.nodes.length && options?.nodes.some((optionNode) => optionNode.id === n.id)))

packages/system/src/utils/store.ts

@@ -14,6 +14,8 @@ import {
   NodeChange,
   NodeLookup,
   Rect,
+  NodeDimensionChange,
+  NodePositionChange,
 } from '../types';
 import { getDimensions, getHandleBounds } from './dom';
 import { getBoundsOfRects, getNodeDimensions, isNumeric, nodeToRect } from './general';
@@ -68,6 +70,7 @@ type UpdateNodesOptions<NodeType extends NodeBase> = {
   nodeOrigin?: NodeOrigin;
   elevateNodesOnSelect?: boolean;
   defaults?: Partial<NodeType>;
+  checkEquality?: boolean;
 };
 
 export function adoptUserNodes<NodeType extends NodeBase>(
@@ -77,6 +80,7 @@ export function adoptUserNodes<NodeType extends NodeBase>(
     nodeOrigin: [0, 0] as NodeOrigin,
     elevateNodesOnSelect: true,
     defaults: {},
+    checkEquality: true,
   }
 ) {
   const tmpLookup = new Map(nodeLookup);
@@ -91,7 +95,7 @@ export function adoptUserNodes<NodeType extends NodeBase>(
       parentNodeIds.add(userNode.parentId);
     }
 
-    if (userNode === currentStoreNode?.internals.userNode) {
+    if (options.checkEquality && userNode === currentStoreNode?.internals.userNode) {
       nodeLookup.set(userNode.id, currentStoreNode);
     } else {
       nodeLookup.set(userNode.id, {
@@ -103,7 +107,7 @@ export function adoptUserNodes<NodeType extends NodeBase>(
         },
         internals: {
           positionAbsolute: userNode.position,
-          handleBounds: currentStoreNode?.internals?.handleBounds,
+          handleBounds: currentStoreNode?.internals.handleBounds,
           z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
           userNode,
           isParent: false,
@@ -142,8 +146,11 @@ function calculateXYZPosition<NodeType extends NodeBase>(
   );
 }
 
-export function handleParentExpand(nodes: InternalNodeBase[], nodeLookup: NodeLookup): NodeChange[] {
-  const changes: NodeChange[] = [];
+export function handleParentExpand(
+  nodes: InternalNodeBase[],
+  nodeLookup: NodeLookup
+): (NodeDimensionChange | NodePositionChange)[] {
+  const changes: (NodeDimensionChange | NodePositionChange)[] = [];
   const chilNodeRects = new Map<string, Rect>();
 
   nodes.forEach((node) => {
@@ -211,14 +218,14 @@ export function updateNodeDimensions<NodeType extends InternalNodeBase>(
   nodeLookup: Map<string, NodeType>,
   domNode: HTMLElement | null,
   nodeOrigin?: NodeOrigin
-): NodeChange[] {
+): (NodeDimensionChange | NodePositionChange)[] {
   const viewportNode = domNode?.querySelector('.xyflow__viewport');
 
   if (!viewportNode) {
     return [];
   }
 
-  const changes: NodeChange[] = [];
+  const changes: (NodeDimensionChange | NodePositionChange)[] = [];
   const style = window.getComputedStyle(viewportNode);
   const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
   // in this array we collect nodes, that might trigger changes (like expanding parent)