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

2
example/public/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<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="description" content="react flow examples" />
<title>React Flow Examples</title>

45
src/hooks/useD3Zoom.ts
View File

@@ -1,6 +1,5 @@
import { useEffect, MutableRefObject } from 'react';
import { zoom } from 'd3-zoom';
import { select, event } from 'd3-selection';
import { event } from 'd3-selection';
import { useStoreState, useStoreActions } from '../store/hooks';
@@ -18,35 +17,27 @@ export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): voi
useEffect(() => {
if (zoomPane.current) {
const nextD3ZoomInstance = zoom();
const selection = select(zoomPane.current).call(nextD3ZoomInstance);
initD3({ zoom: nextD3ZoomInstance, selection });
initD3(zoomPane.current);
}
}, []);
useEffect(() => {
if (!d3Zoom) {
return;
if (d3Zoom) {
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]);
};

18
src/store/index.ts
View File

@@ -1,7 +1,8 @@
import { createStore, Action, action, Thunk, thunk } from 'easy-peasy';
import isEqual from 'fast-deep-equal';
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 { getHandleBounds } from '../components/Nodes/utils';
@@ -40,11 +41,6 @@ type SelectionUpdate = {
selection?: SelectionRect;
};
type D3Init = {
zoom: ZoomBehavior<Element, unknown>;
selection: D3Selection<Element, unknown, null, undefined>;
};
type SetMinMaxZoom = {
minZoom: number;
maxZoom: number;
@@ -109,7 +105,7 @@ export interface StoreModel {
updateSize: Action<StoreModel, Dimensions>;
initD3: Action<StoreModel, D3Init>;
initD3: Action<StoreModel, Element>;
setMinMaxZoom: Action<StoreModel, SetMinMaxZoom>;
@@ -342,11 +338,11 @@ export const storeModel: StoreModel = {
state.height = size.height;
}),
initD3: action((state, { zoom, selection }) => {
state.d3Zoom = zoom;
state.d3Zoom.scaleExtent([state.minZoom, state.maxZoom]);
initD3: action((state, zoomPaneNode) => {
const d3ZoomInstance = zoom().scaleExtent([state.minZoom, state.maxZoom]);
const selection = select(zoomPaneNode).call(d3ZoomInstance);
state.d3Zoom = d3ZoomInstance;
state.d3Selection = selection;
state.d3Initialised = true;
}),