From db813eac0b7079881addaf01d28d8c4887287806 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 11 Sep 2020 17:28:42 +0200 Subject: [PATCH 1/4] refactor(wrapNode): cleanup --- src/components/Nodes/wrapNode.tsx | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index 6a13af1a..63daa477 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -1,14 +1,4 @@ -import React, { - useEffect, - useRef, - useState, - memo, - ComponentType, - CSSProperties, - useMemo, - MouseEvent, - useCallback, -} from 'react'; +import React, { useEffect, useRef, memo, ComponentType, CSSProperties, useMemo, MouseEvent, useCallback } from 'react'; import { DraggableCore } from 'react-draggable'; import cc from 'classcat'; import { ResizeObserver } from 'resize-observer'; @@ -45,6 +35,7 @@ export default (NodeComponent: ComponentType) => { isInitialized, snapToGrid, snapGrid, + isDragging, }: WrapNodeProps) => { const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions); const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements); @@ -52,7 +43,6 @@ export default (NodeComponent: ComponentType) => { const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection); const nodeElement = useRef(null); - const [isDragging, setDragging] = useState(false); const node = useMemo(() => ({ id, type, position: { x: xPos, y: yPos }, data }), [id, type, xPos, yPos, data]); const grid = useMemo(() => (snapToGrid ? snapGrid : [1, 1])! as [number, number], [snapToGrid, snapGrid]); @@ -122,12 +112,11 @@ export default (NodeComponent: ComponentType) => { setSelectedElements({ id: node.id, type: node.type } as Node); } }, - [node, transform, selectNodesOnDrag, isSelectable, onNodeDragStart] + [node, selectNodesOnDrag, isSelectable, onNodeDragStart] ); const onDrag = useCallback( (_, data) => { - setDragging(true); updateNodePosDiff({ id, diff: { @@ -136,7 +125,7 @@ export default (NodeComponent: ComponentType) => { }, }); }, - [id, transform] + [id] ); const onDragStop = useCallback( @@ -153,7 +142,6 @@ export default (NodeComponent: ComponentType) => { return; } - setDragging(false); updateNodePosDiff({ id, isDragging: false, @@ -161,7 +149,7 @@ export default (NodeComponent: ComponentType) => { onNodeDragStop?.(event as MouseEvent, node); }, - [node, isDragging, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop] + [node, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop] ); useEffect(() => { From faab22841f0ec21a4dfe2dbab8b7af705b9f0df6 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Mon, 14 Sep 2020 05:10:57 +0000 Subject: [PATCH 2/4] chore(deps-dev): bump rollup from 2.26.10 to 2.26.11 Bumps [rollup](https://github.com/rollup/rollup) from 2.26.10 to 2.26.11. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v2.26.10...v2.26.11) Signed-off-by: dependabot-preview[bot] --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3465ca3e..157a248a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11297,9 +11297,9 @@ } }, "rollup": { - "version": "2.26.10", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.10.tgz", - "integrity": "sha512-dUnjCWOA0h9qNX6qtcHidyatz8FAFZxVxt1dbcGtKdlJkpSxGK3G9+DLCYvtZr9v94D129ij9zUhG+xbRoqepw==", + "version": "2.26.11", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.11.tgz", + "integrity": "sha512-xyfxxhsE6hW57xhfL1I+ixH8l2bdoIMaAecdQiWF3N7IgJEMu99JG+daBiSZQjnBpzFxa0/xZm+3pbCdAQehHw==", "dev": true, "requires": { "fsevents": "~2.1.2" diff --git a/package.json b/package.json index d8c1a535..d45763de 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "prop-types": "^15.7.2", "react": "^16.13.1", "release-it": "^14.0.2", - "rollup": "^2.26.10", + "rollup": "^2.26.11", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-commonjs": "^10.1.0", From ce1ddcb681d2104da5fc5ae84da390322a3aa8f6 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 14 Sep 2020 10:03:14 +0200 Subject: [PATCH 3/4] refactor(selection): cleanup --- src/components/NodesSelection/index.tsx | 48 ++++++++++++++----------- 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx index 4ac117b6..c61dd638 100644 --- a/src/components/NodesSelection/index.tsx +++ b/src/components/NodesSelection/index.tsx @@ -3,7 +3,7 @@ * made a selectio with on or several nodes */ -import React, { useMemo, useCallback, MouseEvent } from 'react'; +import React, { useMemo, useCallback, useRef, MouseEvent } from 'react'; import ReactDraggable, { DraggableData } from 'react-draggable'; import { useStoreState, useStoreActions } from '../../store/hooks'; @@ -33,7 +33,9 @@ export default ({ const updateNodePosDiff = useStoreActions((actions) => actions.updateNodePosDiff); - const grid = (snapToGrid ? snapGrid : [1, 1])! as [number, number]; + const nodeRef = useRef(null); + + const grid = useMemo(() => (snapToGrid ? snapGrid : [1, 1])! as [number, number], [snapToGrid, snapGrid]); const selectedNodes = useMemo( () => @@ -45,6 +47,23 @@ export default ({ [selectedElements] ); + const style = useMemo( + () => ({ + transform: `translate(${tX}px,${tY}px) scale(${tScale})`, + }), + [tX, tY, tScale] + ); + + const innerStyle = useMemo( + () => ({ + width: selectedNodesBbox.width, + height: selectedNodesBbox.height, + top: selectedNodesBbox.y, + left: selectedNodesBbox.x, + }), + [selectedNodesBbox] + ); + const onStart = useCallback( (event: MouseEvent) => { onSelectionDragStart?.(event, selectedNodes); @@ -96,23 +115,6 @@ export default ({ [onSelectionContextMenu] ); - const style = useMemo( - () => ({ - transform: `translate(${tX}px,${tY}px) scale(${tScale})`, - }), - [tX, tY, tScale] - ); - - const innerStyle = useMemo( - () => ({ - width: selectedNodesBbox.width, - height: selectedNodesBbox.height, - top: selectedNodesBbox.y, - left: selectedNodesBbox.x, - }), - [selectedNodesBbox] - ); - if (!selectedElements || selectionActive) { return null; } @@ -125,8 +127,14 @@ export default ({ onStart={(event) => onStart(event as MouseEvent)} onDrag={(event, data) => onDrag(event as MouseEvent, data)} onStop={(event) => onStop(event as MouseEvent)} + nodeRef={nodeRef} > -
+
); From 3693602cf815d2de85e23b86eae9a24e85838faf Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 14 Sep 2020 12:16:31 +0200 Subject: [PATCH 4/4] fix(nodes): handle isHidden on start closes #506 --- example/src/Hidden/index.js | 2 -- src/components/Nodes/wrapNode.tsx | 4 ++-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/example/src/Hidden/index.js b/example/src/Hidden/index.js index 1c3ffd5e..92ff51db 100644 --- a/example/src/Hidden/index.js +++ b/example/src/Hidden/index.js @@ -27,8 +27,6 @@ const HiddenFlow = () => { ); }, [isHidden]); - console.log(elements); - return ( diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index 63daa477..5e907e53 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -153,7 +153,7 @@ export default (NodeComponent: ComponentType) => { ); useEffect(() => { - if (nodeElement.current) { + if (nodeElement.current && !isHidden) { updateNodeDimensions({ id, nodeElement: nodeElement.current }); const resizeObserver = new ResizeObserver(() => { @@ -172,7 +172,7 @@ export default (NodeComponent: ComponentType) => { } return; - }, [id]); + }, [id, isHidden]); if (isHidden) { return null;