diff --git a/examples/react/src/examples/CustomMiniMapNode/index.tsx b/examples/react/src/examples/CustomMiniMapNode/index.tsx
index 0b62196f..7ecf1c54 100644
--- a/examples/react/src/examples/CustomMiniMapNode/index.tsx
+++ b/examples/react/src/examples/CustomMiniMapNode/index.tsx
@@ -27,9 +27,9 @@ const buttonStyle: CSSProperties = {
zIndex: 4,
};
-const CustomMiniMapNode = ({ x, y, width, height, color }: MiniMapNodeProps) => (
-
-);
+const CustomMiniMapNode = ({ x, y, width, height }: MiniMapNodeProps) => {
+ return ;
+};
const CustomMiniMapNodeFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState([]);
diff --git a/examples/react/src/examples/Subflow/index.tsx b/examples/react/src/examples/Subflow/index.tsx
index 19dc119a..8ea28e34 100644
--- a/examples/react/src/examples/Subflow/index.tsx
+++ b/examples/react/src/examples/Subflow/index.tsx
@@ -90,7 +90,7 @@ const initialNodes: Node[] = [
data: { label: 'Node 5' },
position: { x: 650, y: 250 },
className: 'light',
- style: { width: 400, height: 150 },
+ style: { width: 100, height: 100 },
zIndex: 1000,
},
{
@@ -161,9 +161,12 @@ const Subflow = () => {
setNodes((nds) => {
return nds.map((n) => {
if (!n.parentNode) {
- n.position = {
- x: Math.random() * 400,
- y: Math.random() * 400,
+ return {
+ ...n,
+ position: {
+ x: Math.random() * 400,
+ y: Math.random() * 400,
+ },
};
}
@@ -178,8 +181,10 @@ const Subflow = () => {
const toggleClassnames = () => {
setNodes((nds) => {
return nds.map((n) => {
- n.className = n.className === 'light' ? 'dark' : 'light';
- return n;
+ return {
+ ...n,
+ className: n.className === 'light' ? 'dark' : 'light',
+ };
});
});
};
@@ -187,8 +192,10 @@ const Subflow = () => {
const toggleChildNodes = () => {
setNodes((nds) => {
return nds.map((n) => {
- n.hidden = !!n.parentNode && !n.hidden;
- return n;
+ return {
+ ...n,
+ hidden: !!n.parentNode && !n.hidden,
+ };
});
});
};
@@ -215,19 +222,12 @@ const Subflow = () => {
-
-
-
-
+
+
+
+
+
);
diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx
index ebf65163..fa3ec791 100644
--- a/packages/react/src/components/NodeWrapper/index.tsx
+++ b/packages/react/src/components/NodeWrapper/index.tsx
@@ -79,16 +79,27 @@ export function NodeWrapper({
const prevTargetPosition = useRef(node.targetPosition);
const prevType = useRef(nodeType);
+ const width = node.width ?? undefined;
+ const height = node.height ?? undefined;
+ const computedWidth = node.computed?.width;
+ const computedHeight = node.computed?.height;
+ const initialized = (!!computedWidth && !!computedHeight) || (!!width && !!height);
+
const moveSelectedNodes = useMoveSelectedNodes();
useEffect(() => {
if (nodeRef.current && !node.hidden) {
const currNode = nodeRef.current;
- resizeObserver?.observe(currNode);
+
+ if (!initialized) {
+ resizeObserver?.observe(currNode);
+ } else {
+ resizeObserver?.unobserve(currNode);
+ }
return () => resizeObserver?.unobserve(currNode);
}
- }, [node.hidden]);
+ }, [node.hidden, initialized]);
useEffect(() => {
// when the user programmatically changes the source or handle position, we re-initialize the node
@@ -123,11 +134,6 @@ export function NodeWrapper({
return null;
}
- const width = node.width ?? undefined;
- const height = node.height ?? undefined;
- const computedWidth = node.computed?.width;
- const computedHeight = node.computed?.height;
-
const positionAbsoluteOrigin = getPositionWithOrigin({
x: positionAbsoluteX,
y: positionAbsoluteY,
@@ -135,7 +141,6 @@ export function NodeWrapper({
height: computedHeight ?? height ?? 0,
origin: node.origin || nodeOrigin,
});
- const initialized = (!!computedWidth && !!computedHeight) || (!!width && !!height);
const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
const onMouseEnterHandler = onMouseEnter ? (event: MouseEvent) => onMouseEnter(event, { ...node }) : undefined;
diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts
index 5cb8a382..c04c7e51 100644
--- a/packages/system/src/utils/store.ts
+++ b/packages/system/src/utils/store.ts
@@ -94,8 +94,8 @@ export function adoptUserProvidedNodes(
...n,
computed: {
positionAbsolute: n.position,
- width: n.computed?.width || currentStoreNode?.computed?.width,
- height: n.computed?.height || currentStoreNode?.computed?.height,
+ width: n.computed?.width,
+ height: n.computed?.height,
},
};
const z = (isNumeric(n.zIndex) ? n.zIndex : 0) + (n.selected ? selectedNodeZ : 0);