alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(graph-utils): store handling

Browse Source
This commit is contained in:
moklick
2020-06-05 00:15:45 +02:00
parent 407e34b1cb
commit 5bfe72f225
2 changed files with 6 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/store/index.ts
+3 -8
View File
@@ -1,7 +1,7 @@
import { createStore, Action, action, Thunk, thunk } from 'easy-peasy'; import { createStore, Action, action, Thunk, thunk } from 'easy-peasy';
import isEqual from 'fast-deep-equal'; import isEqual from 'fast-deep-equal';
import { Selection as D3Selection, ZoomBehavior } from 'd3'; import { Selection as D3Selection, ZoomBehavior } from 'd3';
import { zoomIdentity } from 'd3-zoom'; import { zoomIdentity, zoomTransform } from 'd3-zoom';
import { getDimensions } from '../utils'; import { getDimensions } from '../utils';
import { getHandleBounds } from '../components/Nodes/utils'; import { getHandleBounds } from '../components/Nodes/utils';
@@ -404,13 +404,8 @@ export const storeModel: StoreModel = {
if (d3Zoom && d3Selection) { if (d3Zoom && d3Selection) {
d3Zoom.scaleTo(d3Selection, nextZoom); d3Zoom.scaleTo(d3Selection, nextZoom);
const transforms = zoomTransform(d3Selection.node() as Element);
const graphTransform = zoomIdentity.translate(transform[0], transform[1]).scale(nextZoom); state.transform = [transforms.x, transforms.y, transforms.k];
d3Selection.call(d3Zoom.transform, graphTransform);
console.log(graphTransform);
state.transform = [graphTransform.x, graphTransform.y, graphTransform.k];
} }
}), }),
src/utils/graph.ts
+3 -22
View File
@@ -1,5 +1,3 @@
import { zoomIdentity } from 'd3-zoom';
import store from '../store'; import store from '../store';
import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box, Connection } from '../types'; 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 => { export const fitView = (params: FitViewParams = { padding: 0.1 }): void => {
const { nodes, width, height, d3Selection, d3Zoom } = store.getState(); store.getActions().fitView(params);
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);
}; };
const zoom = (amount: number): void => { const zoom = (amount: number): void => {
const { d3Zoom, d3Selection, transform } = store.getState(); store.getActions().zoom(amount);
if (d3Zoom && d3Selection) {
d3Zoom.scaleTo(d3Selection, transform[2] + amount);
}
}; };
export const zoomIn = (): void => zoom(0.2); export const zoomIn = (): void => zoom(0.2);