From 6cb3c707bf226921a0d57e9f6d5d72b3a19c898b Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 4 Aug 2020 00:42:54 +0200 Subject: [PATCH] refactor(store): rename/cleanup setNodesSection action --- src/components/Nodes/wrapNode.tsx | 4 +-- src/components/NodesSelection/index.tsx | 24 +++++++++--------- src/container/GraphView/index.tsx | 4 +-- src/hooks/useGlobalKeyHandler.ts | 8 +++--- src/store/index.ts | 33 ++++--------------------- 5 files changed, 25 insertions(+), 48 deletions(-) diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index 98d0d465..3d790c7b 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -95,8 +95,8 @@ const onDrag = ({ evt, setDragging, id, offset, transform, updateNodePos }: OnDr const dragEvt = getMouseEvent(evt); const scaledClient = { - x: dragEvt.clientX * (1 / transform[2]), - y: dragEvt.clientY * (1 / transform[2]), + x: dragEvt.clientX / transform[2], + y: dragEvt.clientY / transform[2], }; setDragging(true); diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx index ff5aa7f3..49e07041 100644 --- a/src/components/NodesSelection/index.tsx +++ b/src/components/NodesSelection/index.tsx @@ -30,16 +30,16 @@ function getStartPositions(nodes: Node[]): StartPositions { export default () => { const [offset, setOffset] = useState({ x: 0, y: 0 }); const [startPositions, setStartPositions] = useState({}); - const [tX, tY, tScale] = useStoreState((s) => s.transform); - const selectedNodesBbox = useStoreState((s) => s.selectedNodesBbox); - const selectedElements = useStoreState((s) => s.selectedElements); - const snapToGrid = useStoreState((s) => s.snapToGrid); - const snapGrid = useStoreState((s) => s.snapGrid); - const nodes = useStoreState((s) => s.nodes); - const updateNodePos = useStoreActions((a) => a.updateNodePos); + const [tX, tY, tScale] = useStoreState((state) => state.transform); + const selectedNodesBbox = useStoreState((state) => state.selectedNodesBbox); + const selectedElements = useStoreState((state) => state.selectedElements); + const snapToGrid = useStoreState((state) => state.snapToGrid); + const snapGrid = useStoreState((state) => state.snapGrid); + const nodes = useStoreState((state) => state.nodes); + + const updateNodePos = useStoreActions((actions) => actions.updateNodePos); - const position = selectedNodesBbox; const grid = (snapToGrid ? snapGrid : [1, 1])! as [number, number]; if (!selectedElements) { @@ -51,8 +51,8 @@ export default () => { x: evt.clientX / tScale, y: evt.clientY / tScale, }; - const offsetX: number = scaledClient.x - position.x - tX; - const offsetY: number = scaledClient.y - position.y - tY; + const offsetX: number = scaledClient.x - selectedNodesBbox.x - tX; + const offsetY: number = scaledClient.y - selectedNodesBbox.y - tY; const selectedNodes = selectedElements ? selectedElements .filter(isNode) @@ -76,8 +76,8 @@ export default () => { if (selectedElements) { selectedElements.filter(isNode).forEach((node) => { const pos: XYPosition = { - x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - tX, - y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - tY, + x: startPositions[node.id].x + scaledClient.x - selectedNodesBbox.x - offset.x - tX, + y: startPositions[node.id].y + scaledClient.y - selectedNodesBbox.y - offset.y - tY, }; updateNodePos({ id: node.id, pos }); diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index 2af74166..4a1f251b 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -112,7 +112,7 @@ const GraphView = ({ const rendererNode = useRef(null); const d3Initialised = useStoreState((state) => state.d3Initialised); const nodesSelectionActive = useStoreState((state) => state.nodesSelectionActive); - const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection); + const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection); const setOnConnect = useStoreActions((actions) => actions.setOnConnect); const setOnConnectStart = useStoreActions((actions) => actions.setOnConnectStart); const setOnConnectStop = useStoreActions((actions) => actions.setOnConnectStop); @@ -127,7 +127,7 @@ const GraphView = ({ const onZoomPaneClick = useCallback(() => { onPaneClick?.(); - setNodesSelection({ isActive: false }); + unsetNodesSelection(); }, [onPaneClick]); useResizeHandler(rendererNode); diff --git a/src/hooks/useGlobalKeyHandler.ts b/src/hooks/useGlobalKeyHandler.ts index cce41486..0fd256c8 100644 --- a/src/hooks/useGlobalKeyHandler.ts +++ b/src/hooks/useGlobalKeyHandler.ts @@ -11,10 +11,10 @@ interface HookParams { } export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => { - const selectedElements = useStoreState((s) => s.selectedElements); - const edges = useStoreState((s) => s.edges); + const selectedElements = useStoreState((state) => state.selectedElements); + const edges = useStoreState((state) => state.edges); - const setNodesSelection = useStoreActions((a) => a.setNodesSelection); + const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection); const deleteKeyPressed = useKeyPress(deleteKeyCode); useEffect(() => { @@ -29,7 +29,7 @@ export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => { } onElementsRemove(elementsToRemove); - setNodesSelection({ isActive: false }); + unsetNodesSelection(); } }, [deleteKeyPressed]); }; diff --git a/src/store/index.ts b/src/store/index.ts index b99bc1f8..638f89b0 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -38,11 +38,6 @@ type NodeDimensionUpdate = { nodeElement: HTMLDivElement; }; -type SelectionUpdate = { - isActive: boolean; - selection?: SelectionRect; -}; - type SetMinMaxZoom = { minZoom: number; maxZoom: number; @@ -105,7 +100,7 @@ export interface StoreModel { setSelection: Action; - setNodesSelection: Action; + unsetNodesSelection: Action; setSelectedElements: Action; @@ -198,7 +193,6 @@ export const storeModel: StoreModel = { }), updateNodeDimensions: action((state, { id, nodeElement }) => { - const bounds = nodeElement.getBoundingClientRect(); const dimensions = getDimensions(nodeElement); const matchingNode = state.nodes.find((n) => n.id === id); @@ -210,6 +204,7 @@ export const storeModel: StoreModel = { return; } + const bounds = nodeElement.getBoundingClientRect(); const handleBounds = { source: getHandleBounds('.source', nodeElement, bounds, state.transform[2]), target: getHandleBounds('.target', nodeElement, bounds, state.transform[2]), @@ -315,27 +310,9 @@ export const storeModel: StoreModel = { state.selectionActive = isActive; }), - setNodesSelection: action((state, { isActive, selection }) => { - if (!isActive || typeof selection === 'undefined') { - state.nodesSelectionActive = false; - state.selectedElements = null; - - return; - } - const selectedNodes = getNodesInside(state.nodes, selection, state.transform); - - if (!selectedNodes.length) { - state.nodesSelectionActive = false; - state.selectedElements = null; - - return; - } - - const selectedNodesBbox = getRectOfNodes(selectedNodes); - - state.selection = selection; - state.nodesSelectionActive = true; - state.selectedNodesBbox = selectedNodesBbox; + unsetNodesSelection: action((state) => { + state.nodesSelectionActive = false; + state.selectedElements = null; }), setSelectedElements: action((state, elements) => {