refactor(panzoom): return promises for viewport helpers

packages/system/src/types/general.ts

@@ -55,7 +55,7 @@ export type OnConnectEnd = (event: MouseEvent | TouchEvent) => void;
 export type IsValidConnection = (edge: EdgeBase | Connection) => boolean;
 
 export type FitViewParamsBase<NodeType extends NodeBase> = {
-  nodeLookup: Map<string, InternalNodeBase<NodeType>>;
+  nodes: Map<string, InternalNodeBase<NodeType>>;
   width: number;
   height: number;
   panZoom: PanZoomInstance;

packages/system/src/utils/graph.ts

@@ -233,39 +233,46 @@ export const getConnectedEdges = <NodeType extends NodeBase = NodeBase, EdgeType
   return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
 };
 
-export async function fitView<Params extends FitViewParamsBase<NodeBase>, Options extends FitViewOptionsBase<NodeBase>>(
-  { nodeLookup, width, height, panZoom, minZoom, maxZoom }: Params,
-  options?: Options
-): Promise<boolean> {
-  const filteredNodes: Map<string, InternalNodeBase> = new Map();
+export function getFitViewNodes<
+  Params extends NodeLookup<InternalNodeBase<NodeBase>>,
+  Options extends FitViewOptionsBase<NodeBase>
+>(nodeLookup: Params, options?: Pick<Options, 'nodes' | 'includeHiddenNodes'>) {
+  const fitViewNodes: NodeLookup = new Map();
   const optionNodeIds = options?.nodes ? new Set(options.nodes.map((node) => node.id)) : null;
 
   nodeLookup.forEach((n) => {
     const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);
 
     if (isVisible && (!optionNodeIds || optionNodeIds.has(n.id))) {
-      filteredNodes.set(n.id, n);
+      fitViewNodes.set(n.id, n);
     }
   });
 
-  if (filteredNodes.size > 0) {
-    const bounds = getInternalNodesBounds(filteredNodes);
+  return fitViewNodes;
+}
 
-    const viewport = getViewportForBounds(
-      bounds,
-      width,
-      height,
-      options?.minZoom ?? minZoom,
-      options?.maxZoom ?? maxZoom,
-      options?.padding ?? 0.1
-    );
-
-    await panZoom.setViewport(viewport, { duration: options?.duration });
-
-    return Promise.resolve(true);
+export async function fitView<Params extends FitViewParamsBase<NodeBase>, Options extends FitViewOptionsBase<NodeBase>>(
+  { nodes, width, height, panZoom, minZoom, maxZoom }: Params,
+  options?: Omit<Options, 'nodes' | 'includeHiddenNodes'>
+): Promise<boolean> {
+  if (nodes.size === 0) {
+    return Promise.resolve(false);
   }
 
-  return Promise.resolve(false);
+  const bounds = getInternalNodesBounds(nodes);
+
+  const viewport = getViewportForBounds(
+    bounds,
+    width,
+    height,
+    options?.minZoom ?? minZoom,
+    options?.maxZoom ?? maxZoom,
+    options?.padding ?? 0.1
+  );
+
+  await panZoom.setViewport(viewport, { duration: options?.duration });
+
+  return Promise.resolve(true);
 }
 
 /**

packages/system/src/xydrag/XYDrag.ts

@@ -212,6 +212,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
           updateNodes(lastPos as XYPosition, null);
         }
       }
+
       autoPanId = requestAnimationFrame(autoPan);
     }
 

packages/system/src/xypanzoom/utils.ts

@@ -21,8 +21,15 @@ export const isWrappedWithClass = (event: any, className: string | undefined) =>
 export const isRightClickPan = (panOnDrag: boolean | number[], usedButton: number) =>
   usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2);
 
-export const getD3Transition = (selection: D3SelectionInstance, duration = 0, onEnd = () => {}) =>
-  typeof duration === 'number' && duration > 0 ? selection.transition().duration(duration).on('end', onEnd) : selection;
+export const getD3Transition = (selection: D3SelectionInstance, duration = 0, onEnd = () => {}) => {
+  const hasDuration = typeof duration === 'number' && duration > 0;
+
+  if (!hasDuration) {
+    onEnd();
+  }
+
+  return hasDuration ? selection.transition().duration(duration).on('end', onEnd) : selection;
+};
 
 export const wheelDelta = (event: any) => {
   const factor = event.ctrlKey && isMacOs() ? 10 : 1;