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

refactor(useD3hook): init d3 inside store

Browse Source
This commit is contained in:
moklick
2020-06-05 01:04:56 +02:00
parent 4ae4f2e213
commit c2fad7e680
3 changed files with 26 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/public/index.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scaleable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="theme-color" content="#222222" /> <meta name="theme-color" content="#222222" />
<meta name="description" content="react flow examples" /> <meta name="description" content="react flow examples" />
<title>React Flow Examples</title> <title>React Flow Examples</title>
src/hooks/useD3Zoom.ts
+18 -27
View File
@@ -1,6 +1,5 @@
import { useEffect, MutableRefObject } from 'react'; import { useEffect, MutableRefObject } from 'react';
import { zoom } from 'd3-zoom'; import { event } from 'd3-selection';
import { select, event } from 'd3-selection';
import { useStoreState, useStoreActions } from '../store/hooks'; import { useStoreState, useStoreActions } from '../store/hooks';
@@ -18,35 +17,27 @@ export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): voi
useEffect(() => { useEffect(() => {
if (zoomPane.current) { if (zoomPane.current) {
const nextD3ZoomInstance = zoom(); initD3(zoomPane.current);
const selection = select(zoomPane.current).call(nextD3ZoomInstance);
initD3({ zoom: nextD3ZoomInstance, selection });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
if (!d3Zoom) { if (d3Zoom) {
return; if (selectionKeyPressed) {
d3Zoom.on('zoom', null);
} else {
d3Zoom.on('zoom', function () {
if (!event.sourceEvent || (event.sourceEvent && event.sourceEvent.target !== zoomPane.current)) {
return;
}
updateTransform(event.transform);
if (onMove) {
onMove();
}
});
}
} }
if (selectionKeyPressed) {
d3Zoom.on('zoom', null);
} else {
d3Zoom.on('zoom', () => {
if (!event.sourceEvent || (event.sourceEvent && event.sourceEvent.target !== zoomPane.current)) {
return;
}
updateTransform(event.transform);
if (onMove) {
onMove();
}
});
}
return () => {
d3Zoom.on('zoom', null);
};
}, [selectionKeyPressed, d3Zoom]); }, [selectionKeyPressed, d3Zoom]);
}; };
src/store/index.ts
+7 -11
View File
@@ -1,7 +1,8 @@
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, zoomTransform } from 'd3-zoom'; import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom';
import { select } from 'd3-selection';
import { getDimensions } from '../utils'; import { getDimensions } from '../utils';
import { getHandleBounds } from '../components/Nodes/utils'; import { getHandleBounds } from '../components/Nodes/utils';
@@ -40,11 +41,6 @@ type SelectionUpdate = {
selection?: SelectionRect; selection?: SelectionRect;
}; };
type D3Init = {
zoom: ZoomBehavior<Element, unknown>;
selection: D3Selection<Element, unknown, null, undefined>;
};
type SetMinMaxZoom = { type SetMinMaxZoom = {
minZoom: number; minZoom: number;
maxZoom: number; maxZoom: number;
@@ -109,7 +105,7 @@ export interface StoreModel {
updateSize: Action<StoreModel, Dimensions>; updateSize: Action<StoreModel, Dimensions>;
initD3: Action<StoreModel, D3Init>; initD3: Action<StoreModel, Element>;
setMinMaxZoom: Action<StoreModel, SetMinMaxZoom>; setMinMaxZoom: Action<StoreModel, SetMinMaxZoom>;
@@ -342,11 +338,11 @@ export const storeModel: StoreModel = {
state.height = size.height; state.height = size.height;
}), }),
initD3: action((state, { zoom, selection }) => { initD3: action((state, zoomPaneNode) => {
state.d3Zoom = zoom; const d3ZoomInstance = zoom().scaleExtent([state.minZoom, state.maxZoom]);
const selection = select(zoomPaneNode).call(d3ZoomInstance);
state.d3Zoom.scaleExtent([state.minZoom, state.maxZoom]);
state.d3Zoom = d3ZoomInstance;
state.d3Selection = selection; state.d3Selection = selection;
state.d3Initialised = true; state.d3Initialised = true;
}), }),