refactor pan/zoom behaviour, implement pan on scroll #359, edit interaction example

src/store/index.ts

@@ -37,6 +37,12 @@ type TransformXYK = {
   k: number;
 };
 
+type TransformDeltas = {
+  x?: number;
+  y?: number;
+  k?: number;
+};
+
 type NodeDimensionUpdate = {
   id: ElementId;
   nodeElement: HTMLDivElement;
@@ -109,6 +115,7 @@ export interface StoreModel {
   setSelectedElements: Action<StoreModel, Elements | Node | Edge>;
 
   updateTransform: Action<StoreModel, TransformXYK>;
+  updateTransformDelta: Action<StoreModel, TransformDeltas>;
 
   setInitTransform: Action<StoreModel, TransformXYK>;
 
@@ -351,6 +358,20 @@ export const storeModel: StoreModel = {
     state.transform[2] = transform.k;
   }),
 
+  updateTransformDelta: action((state, deltas) => {
+    const { x = 0, y = 0, k = 0 } = deltas;
+
+    state.transform[0] += x;
+    state.transform[1] += y;
+    state.transform[2] += k;
+
+    if (state.d3Selection) {
+      const updatedTransform = zoomIdentity.translate(state.transform[0], state.transform[1]).scale(state.transform[2]);
+      // we need to sync the d3 zoom transform with the updated transform
+      state.d3Selection.property('__zoom', updatedTransform);
+    }
+  }),
+
   setInitTransform: action((state, transform) => {
     state.transform[0] = transform.x;
     state.transform[1] = transform.y;