From 5bfe72f2259d941a93061f99959d1b00fcd4a857 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 5 Jun 2020 00:15:45 +0200
Subject: [PATCH] refactor(graph-utils): store handling

---
 src/store/index.ts | 11 +++--------
 src/utils/graph.ts | 25 +++----------------------
 2 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/src/store/index.ts b/src/store/index.ts
index 2f9953c8..7588aa52 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,7 +1,7 @@
 import { createStore, Action, action, Thunk, thunk } from 'easy-peasy';
 import isEqual from 'fast-deep-equal';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
-import { zoomIdentity } from 'd3-zoom';
+import { zoomIdentity, zoomTransform } from 'd3-zoom';
 
 import { getDimensions } from '../utils';
 import { getHandleBounds } from '../components/Nodes/utils';
@@ -404,13 +404,8 @@ export const storeModel: StoreModel = {
 
     if (d3Zoom && d3Selection) {
       d3Zoom.scaleTo(d3Selection, nextZoom);
-
-      const graphTransform = zoomIdentity.translate(transform[0], transform[1]).scale(nextZoom);
-      d3Selection.call(d3Zoom.transform, graphTransform);
-
-      console.log(graphTransform);
-
-      state.transform = [graphTransform.x, graphTransform.y, graphTransform.k];
+      const transforms = zoomTransform(d3Selection.node() as Element);
+      state.transform = [transforms.x, transforms.y, transforms.k];
     }
   }),
 
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index c20d3162..d81affd3 100644
--- a/src/utils/graph.ts
+++ b/src/utils/graph.ts
@@ -1,5 +1,3 @@
-import { zoomIdentity } from 'd3-zoom';
-
 import store from '../store';
 import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box, Connection } from '../types';
 
@@ -182,29 +180,12 @@ export const getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[] => {
   });
 };
 
-export const fitView = ({ padding = 0.1 }: FitViewParams = { padding: 0.1 }): void => {
-  const { nodes, width, height, d3Selection, d3Zoom } = store.getState();
-
-  if (!d3Selection || !d3Zoom || !nodes.length) {
-    return;
-  }
-
-  const bounds = getRectOfNodes(nodes);
-  const maxBoundsSize = Math.max(bounds.width, bounds.height);
-  const k = Math.min(width, height) / (maxBoundsSize + maxBoundsSize * padding);
-  const boundsCenterX = bounds.x + bounds.width / 2;
-  const boundsCenterY = bounds.y + bounds.height / 2;
-  const transform = [width / 2 - boundsCenterX * k, height / 2 - boundsCenterY * k];
-  const fittedTransform = zoomIdentity.translate(transform[0], transform[1]).scale(k);
-
-  d3Selection.call(d3Zoom.transform, fittedTransform);
+export const fitView = (params: FitViewParams = { padding: 0.1 }): void => {
+  store.getActions().fitView(params);
 };
 
 const zoom = (amount: number): void => {
-  const { d3Zoom, d3Selection, transform } = store.getState();
-  if (d3Zoom && d3Selection) {
-    d3Zoom.scaleTo(d3Selection, transform[2] + amount);
-  }
+  store.getActions().zoom(amount);
 };
 
 export const zoomIn = (): void => zoom(0.2);