refactor(node-resizer): check change events
This commit is contained in:
@@ -1,5 +1,13 @@
|
|||||||
import { useCallback } from 'react';
|
import { useCallback } from 'react';
|
||||||
import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useEdgesState } from 'reactflow';
|
import ReactFlow, {
|
||||||
|
Controls,
|
||||||
|
addEdge,
|
||||||
|
Position,
|
||||||
|
Connection,
|
||||||
|
useNodesState,
|
||||||
|
useEdgesState,
|
||||||
|
NodeChange,
|
||||||
|
} from 'reactflow';
|
||||||
|
|
||||||
import CustomNode from './CustomNode';
|
import CustomNode from './CustomNode';
|
||||||
|
|
||||||
@@ -33,7 +41,7 @@ const initialNodes = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
const CustomNodeFlow = () => {
|
const CustomNodeFlow = () => {
|
||||||
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
|
const [nodes, setNodes, _onNodesChange] = useNodesState(initialNodes);
|
||||||
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
|
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
|
||||||
|
|
||||||
const onConnect = useCallback(
|
const onConnect = useCallback(
|
||||||
@@ -41,6 +49,13 @@ const CustomNodeFlow = () => {
|
|||||||
[setEdges]
|
[setEdges]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const onNodesChange = useCallback(
|
||||||
|
(changes: NodeChange[]) => {
|
||||||
|
_onNodesChange(changes);
|
||||||
|
},
|
||||||
|
[_onNodesChange]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ReactFlow
|
<ReactFlow
|
||||||
nodes={nodes}
|
nodes={nodes}
|
||||||
@@ -49,7 +64,6 @@ const CustomNodeFlow = () => {
|
|||||||
onEdgesChange={onEdgesChange}
|
onEdgesChange={onEdgesChange}
|
||||||
onConnect={onConnect}
|
onConnect={onConnect}
|
||||||
nodeTypes={nodeTypes}
|
nodeTypes={nodeTypes}
|
||||||
snapToGrid={true}
|
|
||||||
fitView
|
fitView
|
||||||
minZoom={0.3}
|
minZoom={0.3}
|
||||||
maxZoom={2}
|
maxZoom={2}
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import { useRef, useEffect } from 'react';
|
import { useRef, useEffect } from 'react';
|
||||||
import { drag } from 'd3-drag';
|
import { drag } from 'd3-drag';
|
||||||
import { select } from 'd3-selection';
|
import { select } from 'd3-selection';
|
||||||
import type { D3DragEvent, SubjectPosition } from 'd3';
|
|
||||||
import { useStoreApi, useGetPointerPosition } from '@reactflow/core';
|
import { useStoreApi, useGetPointerPosition } from '@reactflow/core';
|
||||||
import type { Dimensions, Node, XYPosition } from '@reactflow/core';
|
import type { Dimensions, Node, XYPosition } from '@reactflow/core';
|
||||||
|
import type { D3DragEvent, SubjectPosition } from 'd3';
|
||||||
|
|
||||||
type NodeResizerProps = {
|
type NodeResizerProps = {
|
||||||
nodeId: string;
|
nodeId: string;
|
||||||
@@ -77,8 +77,8 @@ function ResizeHandle({
|
|||||||
const height = initialDimensionsRef.current.height + (invertY ? -distY : distY);
|
const height = initialDimensionsRef.current.height + (invertY ? -distY : distY);
|
||||||
|
|
||||||
if (invertX || invertY) {
|
if (invertX || invertY) {
|
||||||
const x = invertX ? initialDimensionsRef.current.nodeX + distX : node.position.x;
|
const x = invertX ? initialDimensionsRef.current.nodeX + distX : initialDimensionsRef.current.nodeX;
|
||||||
const y = invertY ? initialDimensionsRef.current.nodeY + distY : node.position.y;
|
const y = invertY ? initialDimensionsRef.current.nodeY + distY : initialDimensionsRef.current.nodeY;
|
||||||
|
|
||||||
if (x !== node.position.x || y !== node.position.y) {
|
if (x !== node.position.x || y !== node.position.y) {
|
||||||
updateNodePositions(
|
updateNodePositions(
|
||||||
|
|||||||
Reference in New Issue
Block a user