- onMouseDown(evt, nodeIdWithHandleId, setConnectionNodeId, setPosition, onConnect, isTarget, isValidConnection)
- }
- {...rest}
- />
- );
- }
-);
+ return (
+
+ onMouseDown(evt, nodeIdWithHandleId, setConnectionNodeId, setPosition, onConnect, isTarget, isValidConnection)
+ }
+ {...rest}
+ />
+ );
+};
BaseHandle.displayName = 'BaseHandle';
-export default BaseHandle;
+export default memo(BaseHandle);
diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx
index adfdacd2..f181183e 100644
--- a/src/components/Handle/index.tsx
+++ b/src/components/Handle/index.tsx
@@ -7,44 +7,42 @@ import NodeIdContext from '../../contexts/NodeIdContext';
import { HandleProps, ElementId, Position, Connection } from '../../types';
-const Handle = memo(
- ({
- type = 'source',
- position = Position.Top,
- onConnect = () => {},
- isValidConnection = () => true,
- isConnectable = true,
- style,
- className,
- id,
- }: HandleProps) => {
- const nodeId = useContext(NodeIdContext) as ElementId;
- const setPosition = useStoreActions((a) => a.setConnectionPosition);
- const setConnectionNodeId = useStoreActions((a) => a.setConnectionNodeId);
- const onConnectAction = useStoreState((s) => s.onConnect);
- const onConnectExtended = (params: Connection) => {
- onConnectAction(params);
- onConnect(params);
- };
- const handleClasses = cc([className, { connectable: isConnectable }]);
+const Handle = ({
+ type = 'source',
+ position = Position.Top,
+ onConnect = () => {},
+ isValidConnection = () => true,
+ isConnectable = true,
+ style,
+ className,
+ id,
+}: HandleProps) => {
+ const nodeId = useContext(NodeIdContext) as ElementId;
+ const setPosition = useStoreActions((a) => a.setConnectionPosition);
+ const setConnectionNodeId = useStoreActions((a) => a.setConnectionNodeId);
+ const onConnectAction = useStoreState((s) => s.onConnect);
+ const onConnectExtended = (params: Connection) => {
+ onConnectAction(params);
+ onConnect(params);
+ };
+ const handleClasses = cc([className, { connectable: isConnectable }]);
- return (
-
- );
- }
-);
+ return (
+
+ );
+};
Handle.displayName = 'Handle';
-export default Handle;
+export default memo(Handle);
diff --git a/src/components/Nodes/DefaultNode.tsx b/src/components/Nodes/DefaultNode.tsx
index 23913c76..11d9af2f 100644
--- a/src/components/Nodes/DefaultNode.tsx
+++ b/src/components/Nodes/DefaultNode.tsx
@@ -3,16 +3,19 @@ import React, { memo } from 'react';
import Handle from '../../components/Handle';
import { NodeProps, Position } from '../../types';
-const DefaultNode = memo(
- ({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
- <>
-
- {data.label}
-
-
- )
+const DefaultNode = ({
+ data,
+ isConnectable,
+ targetPosition = Position.Top,
+ sourcePosition = Position.Bottom,
+}: NodeProps) => (
+ <>
+
+ {data.label}
+
+
);
DefaultNode.displayName = 'DefaultNode';
-export default DefaultNode;
+export default memo(DefaultNode);
diff --git a/src/components/Nodes/InputNode.tsx b/src/components/Nodes/InputNode.tsx
index 5e9123dc..73ac0cdf 100644
--- a/src/components/Nodes/InputNode.tsx
+++ b/src/components/Nodes/InputNode.tsx
@@ -3,13 +3,13 @@ import React, { memo } from 'react';
import Handle from '../../components/Handle';
import { NodeProps, Position } from '../../types';
-const InputNode = memo(({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
+const InputNode = ({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
<>
{data.label}
-));
+);
InputNode.displayName = 'InputNode';
-export default InputNode;
+export default memo(InputNode);
diff --git a/src/components/Nodes/OutputNode.tsx b/src/components/Nodes/OutputNode.tsx
index f77458f3..b6358414 100644
--- a/src/components/Nodes/OutputNode.tsx
+++ b/src/components/Nodes/OutputNode.tsx
@@ -3,13 +3,13 @@ import React, { memo } from 'react';
import Handle from '../../components/Handle';
import { NodeProps, Position } from '../../types';
-const OutputNode = memo(({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
+const OutputNode = ({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
<>
{data.label}
-));
+);
OutputNode.displayName = 'OutputNode';
-export default OutputNode;
+export default memo(OutputNode);
diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index 3115c4f7..98d0d465 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -160,192 +160,190 @@ const onStop = ({
};
export default (NodeComponent: ComponentType
) => {
- const NodeWrapper = memo(
- ({
- id,
- type,
- data,
- transform,
- xPos,
- yPos,
- selected,
- onClick,
- onMouseEnter,
- onMouseMove,
- onMouseLeave,
- onContextMenu,
- onNodeDragStart,
- onNodeDragStop,
- style,
+ const NodeWrapper = ({
+ id,
+ type,
+ data,
+ transform,
+ xPos,
+ yPos,
+ selected,
+ onClick,
+ onMouseEnter,
+ onMouseMove,
+ onMouseLeave,
+ onContextMenu,
+ onNodeDragStart,
+ onNodeDragStop,
+ style,
+ className,
+ isDraggable,
+ isSelectable,
+ isConnectable,
+ selectNodesOnDrag,
+ sourcePosition,
+ targetPosition,
+ isHidden,
+ }: WrapNodeProps) => {
+ const updateNodeDimensions = useStoreActions((a) => a.updateNodeDimensions);
+ const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
+ const updateNodePos = useStoreActions((a) => a.updateNodePos);
+
+ const nodeElement = useRef(null);
+ const [offset, setOffset] = useState({ x: 0, y: 0 });
+ const [isDragging, setDragging] = useState(false);
+ const position = { x: xPos, y: yPos };
+ const nodeClasses = cc([
+ 'react-flow__node',
+ `react-flow__node-${type}`,
className,
- isDraggable,
- isSelectable,
- isConnectable,
- selectNodesOnDrag,
- sourcePosition,
- targetPosition,
- isHidden,
- }: WrapNodeProps) => {
- const updateNodeDimensions = useStoreActions((a) => a.updateNodeDimensions);
- const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
- const updateNodePos = useStoreActions((a) => a.updateNodePos);
-
- const nodeElement = useRef(null);
- const [offset, setOffset] = useState({ x: 0, y: 0 });
- const [isDragging, setDragging] = useState(false);
- const position = { x: xPos, y: yPos };
- const nodeClasses = cc([
- 'react-flow__node',
- `react-flow__node-${type}`,
- className,
- {
- selected,
- selectable: isSelectable,
- },
- ]);
- const node = { id, type, position, data };
- const onMouseEnterHandler = useMemo(() => {
- if (!onMouseEnter || isDragging) {
- return noop;
- }
-
- return (evt: MouseEvent) => onMouseEnter(evt, node);
- }, [onMouseEnter, isDragging]);
-
- const onMouseMoveHandler = useMemo(() => {
- if (!onMouseMove || isDragging) {
- return noop;
- }
-
- return (evt: MouseEvent) => onMouseMove(evt, node);
- }, [onMouseMove, isDragging]);
-
- const onMouseLeaveHandler = useMemo(() => {
- if (!onMouseLeave || isDragging) {
- return noop;
- }
-
- return (evt: MouseEvent) => onMouseLeave(evt, node);
- }, [onMouseLeave, isDragging]);
-
- const onContextMenuHandler = useMemo(() => {
- if (!onContextMenu) {
- return noop;
- }
-
- return (evt: MouseEvent) => onContextMenu(evt, node);
- }, [onContextMenu]);
-
- const onSelectNodeHandler = useCallback(() => {
- if (!isDraggable && isSelectable) {
- setSelectedElements({ id: node.id, type: node.type } as Node);
-
- if (onClick) {
- onClick(node);
- }
- }
-
+ {
+ selected,
+ selectable: isSelectable,
+ },
+ ]);
+ const node = { id, type, position, data };
+ const onMouseEnterHandler = useMemo(() => {
+ if (!onMouseEnter || isDragging) {
return noop;
- }, [isSelectable, isDraggable, node]);
-
- useEffect(() => {
- if (nodeElement.current) {
- updateNodeDimensions({ id, nodeElement: nodeElement.current });
-
- const resizeObserver = new ResizeObserver((entries) => {
- for (let _ of entries) {
- updateNodeDimensions({ id, nodeElement: nodeElement.current! });
- }
- });
-
- resizeObserver.observe(nodeElement.current);
-
- return () => {
- if (resizeObserver && nodeElement.current) {
- resizeObserver.unobserve(nodeElement.current);
- }
- };
- }
-
- return;
- }, [id]);
-
- if (isHidden) {
- return null;
}
- const nodeStyle: CSSProperties = {
- zIndex: selected ? 10 : 3,
- transform: `translate(${xPos}px,${yPos}px)`,
- pointerEvents: isSelectable || isDraggable ? 'all' : 'none',
- ...style,
- };
+ return (evt: MouseEvent) => onMouseEnter(evt, node);
+ }, [onMouseEnter, isDragging]);
- return (
-
- onStart({
- evt: evt as MouseEvent,
- selectNodesOnDrag,
- isSelectable,
- onNodeDragStart,
- id,
- type,
- data,
- setOffset,
- transform,
- position,
- setSelectedElements,
- })
+ const onMouseMoveHandler = useMemo(() => {
+ if (!onMouseMove || isDragging) {
+ return noop;
+ }
+
+ return (evt: MouseEvent) => onMouseMove(evt, node);
+ }, [onMouseMove, isDragging]);
+
+ const onMouseLeaveHandler = useMemo(() => {
+ if (!onMouseLeave || isDragging) {
+ return noop;
+ }
+
+ return (evt: MouseEvent) => onMouseLeave(evt, node);
+ }, [onMouseLeave, isDragging]);
+
+ const onContextMenuHandler = useMemo(() => {
+ if (!onContextMenu) {
+ return noop;
+ }
+
+ return (evt: MouseEvent) => onContextMenu(evt, node);
+ }, [onContextMenu]);
+
+ const onSelectNodeHandler = useCallback(() => {
+ if (!isDraggable && isSelectable) {
+ setSelectedElements({ id: node.id, type: node.type } as Node);
+
+ if (onClick) {
+ onClick(node);
+ }
+ }
+
+ return noop;
+ }, [isSelectable, isDraggable, node]);
+
+ useEffect(() => {
+ if (nodeElement.current) {
+ updateNodeDimensions({ id, nodeElement: nodeElement.current });
+
+ const resizeObserver = new ResizeObserver((entries) => {
+ for (let _ of entries) {
+ updateNodeDimensions({ id, nodeElement: nodeElement.current! });
}
- onDrag={(evt) => onDrag({ evt: evt as MouseEvent, setDragging, id, offset, transform, updateNodePos })}
- onStop={() =>
- onStop({
- onNodeDragStop,
- selectNodesOnDrag,
- isSelectable,
- onClick,
- isDragging,
- setDragging,
- id,
- type,
- position,
- data,
- setSelectedElements,
- })
+ });
+
+ resizeObserver.observe(nodeElement.current);
+
+ return () => {
+ if (resizeObserver && nodeElement.current) {
+ resizeObserver.unobserve(nodeElement.current);
}
- scale={transform[2]}
- disabled={!isDraggable}
- cancel=".nodrag"
- >
-
-
- );
+ };
+ }
+
+ return;
+ }, [id]);
+
+ if (isHidden) {
+ return null;
}
- );
+
+ const nodeStyle: CSSProperties = {
+ zIndex: selected ? 10 : 3,
+ transform: `translate(${xPos}px,${yPos}px)`,
+ pointerEvents: isSelectable || isDraggable ? 'all' : 'none',
+ ...style,
+ };
+
+ return (
+
+ onStart({
+ evt: evt as MouseEvent,
+ selectNodesOnDrag,
+ isSelectable,
+ onNodeDragStart,
+ id,
+ type,
+ data,
+ setOffset,
+ transform,
+ position,
+ setSelectedElements,
+ })
+ }
+ onDrag={(evt) => onDrag({ evt: evt as MouseEvent, setDragging, id, offset, transform, updateNodePos })}
+ onStop={() =>
+ onStop({
+ onNodeDragStop,
+ selectNodesOnDrag,
+ isSelectable,
+ onClick,
+ isDragging,
+ setDragging,
+ id,
+ type,
+ position,
+ data,
+ setSelectedElements,
+ })
+ }
+ scale={transform[2]}
+ disabled={!isDraggable}
+ cancel=".nodrag"
+ >
+
+
+ );
+ };
NodeWrapper.displayName = 'NodeWrapper';
- return NodeWrapper;
+ return memo(NodeWrapper);
};
diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx
index c23eb40f..ff5aa7f3 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, { useState, memo } from 'react';
+import React, { useState } from 'react';
import ReactDraggable from 'react-draggable';
import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -27,7 +27,7 @@ function getStartPositions(nodes: Node[]): StartPositions {
}, startPositions);
}
-export default memo(() => {
+export default () => {
const [offset, setOffset] = useState({ x: 0, y: 0 });
const [startPositions, setStartPositions] = useState({});
const [tX, tY, tScale] = useStoreState((s) => s.transform);
@@ -110,4 +110,4 @@ export default memo(() => {
);
-});
+};
diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx
index ae4ce4ea..4565eec9 100644
--- a/src/container/EdgeRenderer/index.tsx
+++ b/src/container/EdgeRenderer/index.tsx
@@ -193,7 +193,7 @@ function renderEdge(
);
}
-const EdgeRenderer = memo((props: EdgeRendererProps) => {
+const EdgeRenderer = (props: EdgeRendererProps) => {
const [tX, tY, tScale] = useStoreState((s) => s.transform);
const edges = useStoreState((s) => s.edges);
const nodes = useStoreState((s) => s.nodes);
@@ -234,8 +234,8 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
);
-});
+};
EdgeRenderer.displayName = 'EdgeRenderer';
-export default EdgeRenderer;
+export default memo(EdgeRenderer);
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index b8503fc7..f58985c0 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -62,200 +62,198 @@ export interface GraphViewProps {
zoomOnDoubleClick: boolean;
}
-const GraphView = memo(
- ({
- nodeTypes,
- edgeTypes,
+const GraphView = ({
+ nodeTypes,
+ edgeTypes,
+ onMove,
+ onMoveStart,
+ onMoveEnd,
+ onLoad,
+ onElementClick,
+ onNodeMouseEnter,
+ onNodeMouseMove,
+ onNodeMouseLeave,
+ onNodeContextMenu,
+ onNodeDragStart,
+ onNodeDragStop,
+ connectionLineType,
+ connectionLineStyle,
+ selectionKeyCode,
+ onElementsRemove,
+ deleteKeyCode,
+ elements,
+ onConnect,
+ snapToGrid,
+ snapGrid,
+ onlyRenderVisibleNodes,
+ nodesDraggable,
+ nodesConnectable,
+ elementsSelectable,
+ selectNodesOnDrag,
+ minZoom,
+ maxZoom,
+ defaultZoom,
+ defaultPosition,
+ arrowHeadColor,
+ markerEndId,
+ zoomOnScroll,
+ zoomOnDoubleClick,
+}: GraphViewProps) => {
+ const zoomPane = useRef
(null);
+ const rendererNode = useRef(null);
+ const width = useStoreState((s) => s.width);
+ const height = useStoreState((s) => s.height);
+ const d3Initialised = useStoreState((s) => s.d3Initialised);
+ const nodesSelectionActive = useStoreState((s) => s.nodesSelectionActive);
+ const updateSize = useStoreActions((actions) => actions.updateSize);
+ const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
+ const setOnConnect = useStoreActions((a) => a.setOnConnect);
+ const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid);
+ const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable);
+ const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable);
+ const setElementsSelectable = useStoreActions((actions) => actions.setElementsSelectable);
+ const setInitTransform = useStoreActions((actions) => actions.setInitTransform);
+ const setMinMaxZoom = useStoreActions((actions) => actions.setMinMaxZoom);
+ const fitView = useStoreActions((actions) => actions.fitView);
+ const zoom = useStoreActions((actions) => actions.zoom);
+
+ const selectionKeyPressed = useKeyPress(selectionKeyCode);
+
+ const onZoomPaneClick = () => setNodesSelection({ isActive: false });
+
+ const updateDimensions = () => {
+ if (!rendererNode.current) {
+ return;
+ }
+
+ const size = getDimensions(rendererNode.current);
+
+ if (size.height === 0 || size.width === 0) {
+ throw new Error('The React Flow parent container needs a width and a height to render the graph.');
+ }
+
+ updateSize(size);
+ };
+
+ useEffect(() => {
+ let resizeObserver: ResizeObserver;
+
+ updateDimensions();
+ window.onresize = updateDimensions;
+
+ if (onConnect) {
+ setOnConnect(onConnect);
+ }
+
+ if (rendererNode.current) {
+ resizeObserver = new ResizeObserver((entries) => {
+ for (let _ of entries) {
+ updateDimensions();
+ }
+ });
+
+ resizeObserver.observe(rendererNode.current);
+ }
+
+ return () => {
+ window.onresize = null;
+
+ if (resizeObserver && rendererNode.current) {
+ resizeObserver.unobserve(rendererNode.current!);
+ }
+ };
+ }, []);
+
+ useD3Zoom({
+ zoomPane,
onMove,
onMoveStart,
onMoveEnd,
- onLoad,
- onElementClick,
- onNodeMouseEnter,
- onNodeMouseMove,
- onNodeMouseLeave,
- onNodeContextMenu,
- onNodeDragStart,
- onNodeDragStop,
- connectionLineType,
- connectionLineStyle,
- selectionKeyCode,
- onElementsRemove,
- deleteKeyCode,
- elements,
- onConnect,
- snapToGrid,
- snapGrid,
- onlyRenderVisibleNodes,
- nodesDraggable,
- nodesConnectable,
- elementsSelectable,
- selectNodesOnDrag,
- minZoom,
- maxZoom,
- defaultZoom,
- defaultPosition,
- arrowHeadColor,
- markerEndId,
+ selectionKeyPressed,
zoomOnScroll,
zoomOnDoubleClick,
- }: GraphViewProps) => {
- const zoomPane = useRef(null);
- const rendererNode = useRef(null);
- const width = useStoreState((s) => s.width);
- const height = useStoreState((s) => s.height);
- const d3Initialised = useStoreState((s) => s.d3Initialised);
- const nodesSelectionActive = useStoreState((s) => s.nodesSelectionActive);
- const updateSize = useStoreActions((actions) => actions.updateSize);
- const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
- const setOnConnect = useStoreActions((a) => a.setOnConnect);
- const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid);
- const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable);
- const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable);
- const setElementsSelectable = useStoreActions((actions) => actions.setElementsSelectable);
- const setInitTransform = useStoreActions((actions) => actions.setInitTransform);
- const setMinMaxZoom = useStoreActions((actions) => actions.setMinMaxZoom);
- const fitView = useStoreActions((actions) => actions.fitView);
- const zoom = useStoreActions((actions) => actions.zoom);
+ });
- const selectionKeyPressed = useKeyPress(selectionKeyCode);
+ useEffect(() => {
+ if (d3Initialised && onLoad) {
+ onLoad({
+ fitView: (params = { padding: 0.1 }) => fitView(params),
+ zoomIn: () => zoom(0.2),
+ zoomOut: () => zoom(-0.2),
+ project,
+ getElements,
+ setTransform: (transform: FlowTransform) =>
+ setInitTransform({ x: transform.x, y: transform.y, k: transform.zoom }),
+ });
+ }
- const onZoomPaneClick = () => setNodesSelection({ isActive: false });
-
- const updateDimensions = () => {
- if (!rendererNode.current) {
- return;
- }
-
- const size = getDimensions(rendererNode.current);
-
- if (size.height === 0 || size.width === 0) {
- throw new Error('The React Flow parent container needs a width and a height to render the graph.');
- }
-
- updateSize(size);
- };
-
- useEffect(() => {
- let resizeObserver: ResizeObserver;
-
- updateDimensions();
- window.onresize = updateDimensions;
-
- if (onConnect) {
- setOnConnect(onConnect);
- }
-
- if (rendererNode.current) {
- resizeObserver = new ResizeObserver((entries) => {
- for (let _ of entries) {
- updateDimensions();
- }
- });
-
- resizeObserver.observe(rendererNode.current);
- }
-
- return () => {
- window.onresize = null;
-
- if (resizeObserver && rendererNode.current) {
- resizeObserver.unobserve(rendererNode.current!);
- }
+ if (d3Initialised) {
+ const initialTransform = {
+ x: defaultPosition[0],
+ y: defaultPosition[1],
+ k: defaultZoom,
};
- }, []);
- useD3Zoom({
- zoomPane,
- onMove,
- onMoveStart,
- onMoveEnd,
- selectionKeyPressed,
- zoomOnScroll,
- zoomOnDoubleClick,
- });
-
- useEffect(() => {
- if (d3Initialised && onLoad) {
- onLoad({
- fitView: (params = { padding: 0.1 }) => fitView(params),
- zoomIn: () => zoom(0.2),
- zoomOut: () => zoom(-0.2),
- project,
- getElements,
- setTransform: (transform: FlowTransform) =>
- setInitTransform({ x: transform.x, y: transform.y, k: transform.zoom }),
- });
+ if (initialTransform.x !== 0 || initialTransform.y !== 0 || initialTransform.k !== 1) {
+ setInitTransform(initialTransform);
}
+ }
+ }, [d3Initialised, onLoad]);
- if (d3Initialised) {
- const initialTransform = {
- x: defaultPosition[0],
- y: defaultPosition[1],
- k: defaultZoom,
- };
+ useEffect(() => {
+ setSnapGrid({ snapToGrid, snapGrid });
+ }, [snapToGrid]);
- if (initialTransform.x !== 0 || initialTransform.y !== 0 || initialTransform.k !== 1) {
- setInitTransform(initialTransform);
- }
- }
- }, [d3Initialised, onLoad]);
+ useEffect(() => {
+ setNodesDraggable(nodesDraggable);
+ }, [nodesDraggable]);
- useEffect(() => {
- setSnapGrid({ snapToGrid, snapGrid });
- }, [snapToGrid]);
+ useEffect(() => {
+ setNodesConnectable(nodesConnectable);
+ }, [nodesConnectable]);
- useEffect(() => {
- setNodesDraggable(nodesDraggable);
- }, [nodesDraggable]);
+ useEffect(() => {
+ setElementsSelectable(elementsSelectable);
+ }, [elementsSelectable]);
- useEffect(() => {
- setNodesConnectable(nodesConnectable);
- }, [nodesConnectable]);
+ useEffect(() => {
+ setMinMaxZoom({ minZoom, maxZoom });
+ }, [minZoom, maxZoom]);
- useEffect(() => {
- setElementsSelectable(elementsSelectable);
- }, [elementsSelectable]);
+ useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
+ useElementUpdater(elements);
- useEffect(() => {
- setMinMaxZoom({ minZoom, maxZoom });
- }, [minZoom, maxZoom]);
-
- useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
- useElementUpdater(elements);
-
- return (
-
-
-
-
- {nodesSelectionActive &&
}
-
-
+
+
+
+ {nodesSelectionActive &&
}
+
+