refactor(system,panzoom): return promise from transitioned panzoom actions

packages/system/src/xypanzoom/XYPanZoom.ts

@@ -73,8 +73,15 @@ export function XYPanZoom({
 
   function setTransform(transform: ZoomTransform, options?: PanZoomTransformOptions) {
     if (d3Selection) {
-      d3ZoomInstance?.transform(getD3Transition(d3Selection, options?.duration), transform);
+      return new Promise<boolean>((resolve) => {
+        d3ZoomInstance?.transform(
+          getD3Transition(d3Selection, options?.duration, () => resolve(true)),
+          transform
+        );
+      });
     }
+
+    return Promise.resolve(false);
   }
 
   // public functions
@@ -217,14 +224,28 @@ export function XYPanZoom({
 
   function scaleTo(zoom: number, options?: PanZoomTransformOptions) {
     if (d3Selection) {
-      d3ZoomInstance?.scaleTo(getD3Transition(d3Selection, options?.duration), zoom);
+      return new Promise<boolean>((resolve) => {
+        d3ZoomInstance?.scaleTo(
+          getD3Transition(d3Selection, options?.duration, () => resolve(true)),
+          zoom
+        );
+      });
     }
+
+    return Promise.resolve(false);
   }
 
   function scaleBy(factor: number, options?: PanZoomTransformOptions) {
     if (d3Selection) {
-      d3ZoomInstance?.scaleBy(getD3Transition(d3Selection, options?.duration), factor);
+      return new Promise<boolean>((resolve) => {
+        d3ZoomInstance?.scaleBy(
+          getD3Transition(d3Selection, options?.duration, () => resolve(true)),
+          factor
+        );
+      });
     }
+
+    return Promise.resolve(false);
   }
 
   function setScaleExtent(scaleExtent: [number, number]) {

packages/system/src/xypanzoom/utils.ts

@@ -22,6 +22,8 @@ export const isRightClickPan = (panOnDrag: boolean | number[], usedButton: numbe
 
 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;
 
 export const wheelDelta = (event: any) => {
   const factor = event.ctrlKey && isMacOs() ? 10 : 1;