Merge pull request #445 from wbkd/develop

Develop

package.json

@@ -25,7 +25,7 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@welldone-software/why-did-you-render": "^4.3.0",
+    "@welldone-software/why-did-you-render": "^4.3.1",
     "classcat": "^4.1.0",
     "d3-selection": "^1.4.2",
     "d3-zoom": "^1.8.3",
@@ -41,25 +41,25 @@
     "@svgr/rollup": "^5.4.0",
     "@types/classnames": "^2.2.10",
     "@types/d3": "^5.7.2",
-    "@types/react": "^16.9.45",
+    "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",
     "autoprefixer": "^9.8.6",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
-    "cypress": "^4.12.1",
+    "cypress": "^5.0.0",
     "postcss-nested": "^4.2.3",
     "prettier": "2.0.5",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "release-it": "^13.6.6",
+    "release-it": "^13.6.8",
-    "rollup": "^2.23.1",
+    "rollup": "^2.26.4",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-livereload": "^1.3.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.3",
-    "rollup-plugin-postcss": "^3.1.4",
+    "rollup-plugin-postcss": "^3.1.5",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-serve": "^1.0.3",
     "rollup-plugin-terser": "^7.0.0",

src/components/Nodes/wrapNode.tsx

@@ -256,7 +256,9 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
         const resizeObserver = new ResizeObserver((entries) => {
           for (let _ of entries) {
-            updateNodeDimensions({ id, nodeElement: nodeElement.current! });
+            if (nodeElement.current) {
+              updateNodeDimensions({ id, nodeElement: nodeElement.current });
+            }
           }
         });
 

src/container/GraphView/index.tsx

@@ -127,6 +127,7 @@ const GraphView = ({
   const setMinMaxZoom = useStoreActions((actions) => actions.setMinMaxZoom);
   const fitView = useStoreActions((actions) => actions.fitView);
   const zoom = useStoreActions((actions) => actions.zoom);
+  const zoomTo = useStoreActions((actions) => actions.zoomTo);
 
   const onZoomPaneClick = useCallback(
     (event: React.MouseEvent) => {
@@ -167,6 +168,7 @@ const GraphView = ({
           fitView: (params = { padding: 0.1 }) => fitView(params),
           zoomIn: () => zoom(0.2),
           zoomOut: () => zoom(-0.2),
+          zoomTo: (zoomLevel) => zoomTo(zoomLevel),
           project,
           getElements,
           setTransform: (transform: FlowTransform) =>

src/store/index.ts

@@ -129,7 +129,8 @@ export interface StoreModel {
   unsetUserSelection: Action<StoreModel>;
 
   fitView: Action<StoreModel, FitViewParams>;
-  zoom: Action<StoreModel, number>;
+  zoomTo: Action<StoreModel, number>;
+  zoom: Thunk<StoreModel, number, any, StoreModel>;
   zoomIn: Thunk<StoreModel>;
   zoomOut: Thunk<StoreModel>;
 }
@@ -418,9 +419,9 @@ export const storeModel: StoreModel = {
     state.transform = [fittedTransform.x, fittedTransform.y, fittedTransform.k];
   }),
 
-  zoom: action((state, amount) => {
+  zoomTo: action((state, zoomLevel) => {
     const { d3Selection, transform, minZoom, maxZoom } = state;
-    const nextZoom = clamp(transform[2] + amount, minZoom, maxZoom);
+    const nextZoom = clamp(zoomLevel, minZoom, maxZoom);
 
     if (d3Selection) {
       // we want to zoom in and out to the center of the zoom pane
@@ -439,6 +440,13 @@ export const storeModel: StoreModel = {
     }
   }),
 
+  zoom: thunk((actions, amount, helpers) => {
+    const { transform } = helpers.getState();
+    const nextZoom = transform[2] + amount;
+
+    actions.zoomTo(nextZoom);
+  }),
+
   zoomIn: thunk((actions) => {
     actions.zoom(0.2);
   }),

src/types/index.ts

@@ -182,6 +182,7 @@ export type ProjectFunc = (position: XYPosition) => XYPosition;
 export type OnLoadParams = {
   zoomIn: () => void;
   zoomOut: () => void;
+  zoomTo: (zoomLevel: number) => void;
   fitView: FitViewFunc;
   project: ProjectFunc;
   getElements: () => Elements;