feat(viewport-helpers): return promises

packages/system/src/types/general.ts

@@ -18,13 +18,13 @@ export type OnMove = (event: MouseEvent | TouchEvent | null, viewport: Viewport)
 export type OnMoveStart = OnMove;
 export type OnMoveEnd = OnMove;
 
-export type ZoomInOut = (options?: ViewportHelperFunctionOptions) => void;
-export type ZoomTo = (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void;
+export type ZoomInOut = (options?: ViewportHelperFunctionOptions) => Promise<boolean>;
+export type ZoomTo = (zoomLevel: number, options?: ViewportHelperFunctionOptions) => Promise<boolean>;
 export type GetZoom = () => number;
 export type GetViewport = () => Viewport;
-export type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionOptions) => void;
-export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void;
-export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void;
+export type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionOptions) => Promise<boolean>;
+export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => Promise<boolean>;
+export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => Promise<boolean>;
 
 export type Connection = {
   source: string;
@@ -130,7 +130,7 @@ export type SelectionRect = Rect & {
 export type OnError = (id: string, message: string) => void;
 
 export type UpdateNodePositions = (dragItems: Map<string, NodeDragItem | InternalNodeBase>, dragging?: boolean) => void;
-export type PanBy = (delta: XYPosition) => boolean;
+export type PanBy = (delta: XYPosition) => Promise<boolean>;
 
 export const initialConnection: NoConnection = {
   inProgress: false,

packages/system/src/types/panzoom.ts

@@ -45,15 +45,15 @@ export type PanZoomInstance = {
   update: (params: PanZoomUpdateOptions) => void;
   destroy: () => void;
   getViewport: () => Viewport;
-  setViewport: (viewport: Viewport, options?: PanZoomTransformOptions) => ZoomTransform | undefined;
+  setViewport: (viewport: Viewport, options?: PanZoomTransformOptions) => Promise<ZoomTransform | undefined>;
   setViewportConstrained: (
     viewport: Viewport,
     extent: CoordinateExtent,
     translateExtent: CoordinateExtent
-  ) => ZoomTransform | undefined;
+  ) => Promise<ZoomTransform | undefined>;
   setScaleExtent: (scaleExtent: [number, number]) => void;
   setTranslateExtent: (translateExtent: CoordinateExtent) => void;
-  scaleTo: (scale: number, options?: PanZoomTransformOptions) => void;
-  scaleBy: (factor: number, options?: PanZoomTransformOptions) => void;
+  scaleTo: (scale: number, options?: PanZoomTransformOptions) => Promise<boolean>;
+  scaleBy: (factor: number, options?: PanZoomTransformOptions) => Promise<boolean>;
   syncViewport: (viewport: Viewport) => void;
 };

packages/system/src/utils/graph.ts

@@ -233,10 +233,10 @@ export const getConnectedEdges = <NodeType extends NodeBase = NodeBase, EdgeType
   return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
 };
 
-export function fitView<Params extends FitViewParamsBase<NodeBase>, Options extends FitViewOptionsBase<NodeBase>>(
+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();
   const optionNodeIds = options?.nodes ? new Set(options.nodes.map((node) => node.id)) : null;
 
@@ -260,12 +260,12 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
       options?.padding ?? 0.1
     );
 
-    panZoom.setViewport(viewport, { duration: options?.duration });
+    await panZoom.setViewport(viewport, { duration: options?.duration });
 
-    return true;
+    return Promise.resolve(true);
   }
 
-  return false;
+  return Promise.resolve(false);
 }
 
 /**

packages/system/src/utils/store.ts

@@ -325,7 +325,7 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
   return { changes, updatedInternals };
 }
 
-export function panBy({
+export async function panBy({
   delta,
   panZoom,
   transform,
@@ -339,12 +339,12 @@ export function panBy({
   translateExtent: CoordinateExtent;
   width: number;
   height: number;
-}) {
+}): Promise<boolean> {
   if (!panZoom || (!delta.x && !delta.y)) {
-    return false;
+    return Promise.resolve(false);
   }
 
-  const nextViewport = panZoom.setViewportConstrained(
+  const nextViewport = await panZoom.setViewportConstrained(
     {
       x: transform[0] + delta.x,
       y: transform[1] + delta.y,
@@ -361,7 +361,7 @@ export function panBy({
     !!nextViewport &&
     (nextViewport.x !== transform[0] || nextViewport.y !== transform[1] || nextViewport.k !== transform[2]);
 
-  return transformChanged;
+  return Promise.resolve(transformChanged);
 }
 
 export function updateConnectionLookup(connectionLookup: ConnectionLookup, edgeLookup: EdgeLookup, edges: EdgeBase[]) {

packages/system/src/xydrag/XYDrag.ts

@@ -195,7 +195,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
       }
     }
 
-    function autoPan() {
+    async function autoPan() {
       if (!containerBounds) {
         return;
       }
@@ -208,7 +208,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2];
         lastPos.y = (lastPos.y ?? 0) - yMovement / transform[2];
 
-        if (panBy({ x: xMovement, y: yMovement })) {
+        if (await panBy({ x: xMovement, y: yMovement })) {
           updateNodes(lastPos as XYPosition, null);
         }
       }

packages/system/src/xypanzoom/XYPanZoom.ts

@@ -188,27 +188,27 @@ export function XYPanZoom({
     d3ZoomInstance.on('zoom', null);
   }
 
-  function setViewportConstrained(
+  async function setViewportConstrained(
     viewport: Viewport,
     extent: CoordinateExtent,
     translateExtent: CoordinateExtent
-  ): ZoomTransform | undefined {
+  ): Promise<ZoomTransform | undefined> {
     const nextTransform = viewportToTransform(viewport);
     const contrainedTransform = d3ZoomInstance?.constrain()(nextTransform, extent, translateExtent);
 
     if (contrainedTransform) {
-      setTransform(contrainedTransform);
+      await setTransform(contrainedTransform);
     }
 
-    return contrainedTransform;
+    return new Promise((resolve) => resolve(contrainedTransform));
   }
 
-  function setViewport(viewport: Viewport, options?: PanZoomTransformOptions) {
+  async function setViewport(viewport: Viewport, options?: PanZoomTransformOptions) {
     const nextTransform = viewportToTransform(viewport);
 
-    setTransform(nextTransform, options);
+    await setTransform(nextTransform, options);
 
-    return nextTransform;
+    return new Promise<ZoomTransform>((resolve) => resolve(nextTransform));
   }
 
   function syncViewport(viewport: Viewport) {

packages/system/src/xypanzoom/utils.ts

@@ -21,8 +21,6 @@ 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) =>
-  typeof duration === 'number' && duration > 0 ? selection.transition().duration(duration) : selection;
 export const getD3Transition = (selection: D3SelectionInstance, duration = 0, onEnd = () => {}) =>
   typeof duration === 'number' && duration > 0 ? selection.transition().duration(duration).on('end', onEnd) : selection;