diff --git a/example/public/index.html b/example/public/index.html
index e4e256d1..6e06a78f 100644
--- a/example/public/index.html
+++ b/example/public/index.html
@@ -3,7 +3,7 @@
-
+
React Flow Examples
diff --git a/src/hooks/useD3Zoom.ts b/src/hooks/useD3Zoom.ts
index 20f66780..ec2028bd 100644
--- a/src/hooks/useD3Zoom.ts
+++ b/src/hooks/useD3Zoom.ts
@@ -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]);
};
diff --git a/src/store/index.ts b/src/store/index.ts
index 68250901..be3e9a68 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -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;
- selection: D3Selection;
-};
-
type SetMinMaxZoom = {
minZoom: number;
maxZoom: number;
@@ -109,7 +105,7 @@ export interface StoreModel {
updateSize: Action;
- initD3: Action;
+ initD3: Action;
setMinMaxZoom: Action;
@@ -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;
}),