Skip to content

Commit 20a51c7

Browse files
camielvscamielvs
committed
chore: Add FlexNode Update Hook
1 parent e600c32 commit 20a51c7

3 files changed

Lines changed: 68 additions & 169 deletions

File tree

‎src/components/shared/ReactFlow/FlowCanvas/FlexNode/FlexNode.tsx‎

Lines changed: 10 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,13 @@ import { type MouseEvent, useEffect, useState } from "react";
99

1010
import { BlockStack } from "@/components/ui/layout";
1111
import { cn } from "@/lib/utils";
12-
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
1312
import { useContextPanel } from "@/providers/ContextPanelProvider";
14-
import { updateSubgraphSpec } from "@/utils/subgraphUtils";
1513

1614
import { FlexNodeEditor } from "./FlexNodeEditor";
1715
import { InlineTextEditor } from "./InlineTextEditor";
18-
import { updateFlexNodeInComponentSpec } from "./interface";
1916
import LockToggle from "./LockToggle";
2017
import type { FlexNodeData } from "./types";
18+
import { useFlexNodeUpdate } from "./useFlexNodeUpdate";
2119

2220
type FlexNodeProps = NodeProps<Node<FlexNodeData>>;
2321

@@ -43,29 +41,10 @@ const FlexNode = ({ data, id, selected }: FlexNodeProps) => {
4341
setOpen: setContextPanelOpen,
4442
} = useContextPanel();
4543

46-
const {
47-
currentSubgraphSpec,
48-
currentSubgraphPath,
49-
componentSpec,
50-
setComponentSpec,
51-
} = useComponentSpec();
44+
const { updateFlexNode, updateProperties } = useFlexNodeUpdate(data);
5245

5346
const toggleLock = () => {
54-
const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
55-
currentSubgraphSpec,
56-
{
57-
...data,
58-
locked: !locked,
59-
},
60-
);
61-
62-
const newRootSpec = updateSubgraphSpec(
63-
componentSpec,
64-
currentSubgraphPath,
65-
updatedSubgraphSpec,
66-
);
67-
68-
setComponentSpec(newRootSpec);
47+
updateFlexNode({ locked: !locked });
6948
};
7049

7150
const handleClick = (e: MouseEvent) => {
@@ -101,44 +80,16 @@ const FlexNode = ({ data, id, selected }: FlexNodeProps) => {
10180
const width = Math.max(params.width, MIN_SIZE.width);
10281
const height = Math.max(params.height, MIN_SIZE.height);
10382

104-
const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
105-
currentSubgraphSpec,
106-
{
107-
...data,
108-
size: { width, height },
109-
position: { x: params.x, y: params.y },
110-
},
111-
);
112-
113-
const newRootSpec = updateSubgraphSpec(
114-
componentSpec,
115-
currentSubgraphPath,
116-
updatedSubgraphSpec,
117-
);
118-
119-
setComponentSpec(newRootSpec);
83+
updateFlexNode({
84+
size: { width, height },
85+
position: { x: params.x, y: params.y },
86+
});
12087
};
12188

12289
const handleSaveContent = (newContent: string) => {
123-
const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
124-
currentSubgraphSpec,
125-
{
126-
...data,
127-
properties: {
128-
...properties,
129-
content: newContent,
130-
},
131-
},
132-
);
133-
134-
const newRootSpec = updateSubgraphSpec(
135-
componentSpec,
136-
currentSubgraphPath,
137-
updatedSubgraphSpec,
138-
);
139-
140-
setComponentSpec(newRootSpec);
141-
setIsInlineEditing(false);
90+
updateProperties({
91+
content: newContent,
92+
});
14293
};
14394

14495
useEffect(() => {

‎src/components/shared/ReactFlow/FlowCanvas/FlexNode/FlexNodeEditor.tsx‎

Lines changed: 12 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,13 @@ import { BlockStack, InlineStack } from "@/components/ui/layout";
1111
import { Textarea } from "@/components/ui/textarea";
1212
import { Paragraph, Text } from "@/components/ui/typography";
1313
import { cn } from "@/lib/utils";
14-
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
1514
import { FONT_SIZE_MD, FONT_SIZE_SM } from "@/utils/constants";
16-
import { updateSubgraphSpec } from "@/utils/subgraphUtils";
1715

1816
import { StackingControls } from "../../FlowControls/StackingControls";
19-
import { updateFlexNodeInComponentSpec } from "./interface";
2017
import LockToggle from "./LockToggle";
2118
import { TextSizeSelector } from "./TextSizeSelector";
2219
import type { FlexNodeData } from "./types";
20+
import { useFlexNodeUpdate } from "./useFlexNodeUpdate";
2321
import { DEFAULT_BORDER_COLOR } from "./utils";
2422

2523
interface FlexNodeEditorProps {
@@ -108,12 +106,7 @@ const ContentEditor = ({
108106
flexNode: FlexNodeData;
109107
readOnly: boolean;
110108
}) => {
111-
const {
112-
componentSpec,
113-
currentSubgraphSpec,
114-
currentSubgraphPath,
115-
setComponentSpec,
116-
} = useComponentSpec();
109+
const { updateProperties } = useFlexNodeUpdate(flexNode);
117110

118111
const { properties } = flexNode;
119112

@@ -129,67 +122,15 @@ const ContentEditor = ({
129122
};
130123

131124
const handleTitleFontSizeChange = (newSize: number) => {
132-
const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
133-
currentSubgraphSpec,
134-
{
135-
...flexNode,
136-
properties: {
137-
...properties,
138-
titleFontSize: newSize,
139-
},
140-
},
141-
);
142-
143-
const newRootSpec = updateSubgraphSpec(
144-
componentSpec,
145-
currentSubgraphPath,
146-
updatedSubgraphSpec,
147-
);
148-
149-
setComponentSpec(newRootSpec);
125+
updateProperties({ titleFontSize: newSize });
150126
};
151127

152128
const handleContentFontSizeChange = (newSize: number) => {
153-
const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
154-
currentSubgraphSpec,
155-
{
156-
...flexNode,
157-
properties: {
158-
...properties,
159-
contentFontSize: newSize,
160-
},
161-
},
162-
);
163-
164-
const newRootSpec = updateSubgraphSpec(
165-
componentSpec,
166-
currentSubgraphPath,
167-
updatedSubgraphSpec,
168-
);
169-
170-
setComponentSpec(newRootSpec);
129+
updateProperties({ contentFontSize: newSize });
171130
};
172131

173132
const saveChanges = () => {
174-
const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
175-
currentSubgraphSpec,
176-
{
177-
...flexNode,
178-
properties: {
179-
...properties,
180-
title,
181-
content,
182-
},
183-
},
184-
);
185-
186-
const newRootSpec = updateSubgraphSpec(
187-
componentSpec,
188-
currentSubgraphPath,
189-
updatedSubgraphSpec,
190-
);
191-
192-
setComponentSpec(newRootSpec);
133+
updateProperties({ title, content });
193134
};
194135

195136
useEffect(() => {
@@ -288,12 +229,7 @@ const ColorEditor = ({
288229
flexNode: FlexNodeData;
289230
readOnly: boolean;
290231
}) => {
291-
const {
292-
componentSpec,
293-
currentSubgraphSpec,
294-
currentSubgraphPath,
295-
setComponentSpec,
296-
} = useComponentSpec();
232+
const { updateProperties } = useFlexNodeUpdate(flexNode);
297233

298234
const { properties } = flexNode;
299235

@@ -320,25 +256,10 @@ const ColorEditor = ({
320256
newBackgroundColor: string,
321257
newBorderColor: string | undefined,
322258
) => {
323-
const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
324-
currentSubgraphSpec,
325-
{
326-
...flexNode,
327-
properties: {
328-
...properties,
329-
color: newBackgroundColor,
330-
borderColor: newBorderColor,
331-
},
332-
},
333-
);
334-
335-
const newRootSpec = updateSubgraphSpec(
336-
componentSpec,
337-
currentSubgraphPath,
338-
updatedSubgraphSpec,
339-
);
340-
341-
setComponentSpec(newRootSpec);
259+
updateProperties({
260+
color: newBackgroundColor,
261+
borderColor: newBorderColor,
262+
});
342263
};
343264

344265
useEffect(() => {
@@ -409,29 +330,10 @@ const ColorEditor = ({
409330
};
410331

411332
const ZIndexEditor = ({ flexNode }: { flexNode: FlexNodeData }) => {
412-
const {
413-
componentSpec,
414-
currentSubgraphSpec,
415-
currentSubgraphPath,
416-
setComponentSpec,
417-
} = useComponentSpec();
333+
const { updateFlexNode } = useFlexNodeUpdate(flexNode);
418334

419335
const handleStackingControlChange = (newZIndex: number) => {
420-
const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
421-
currentSubgraphSpec,
422-
{
423-
...flexNode,
424-
zIndex: newZIndex,
425-
},
426-
);
427-
428-
const newRootSpec = updateSubgraphSpec(
429-
componentSpec,
430-
currentSubgraphPath,
431-
updatedSubgraphSpec,
432-
);
433-
434-
setComponentSpec(newRootSpec);
336+
updateFlexNode({ zIndex: newZIndex });
435337
};
436338

437339
return (

‎src/components/shared/ReactFlow/FlowCanvas/FlexNode/useFlexNodeUpdate.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { updateFlexNodeInComponentSpec } from "@/components/shared/ReactFlow/FlowCanvas/FlexNode/interface";
2+
import type { FlexNodeData } from "@/components/shared/ReactFlow/FlowCanvas/FlexNode/types";
3+
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
4+
import { updateSubgraphSpec } from "@/utils/subgraphUtils";
5+
6+
export const useFlexNodeUpdate = (flexNode: FlexNodeData) => {
7+
const {
8+
componentSpec,
9+
currentSubgraphSpec,
10+
currentSubgraphPath,
11+
setComponentSpec,
12+
} = useComponentSpec();
13+
14+
const updateFlexNode = (updates: Partial<FlexNodeData>) => {
15+
const updatedFlexNode = {
16+
...flexNode,
17+
...updates,
18+
};
19+
20+
const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
21+
currentSubgraphSpec,
22+
updatedFlexNode,
23+
);
24+
25+
const newRootSpec = updateSubgraphSpec(
26+
componentSpec,
27+
currentSubgraphPath,
28+
updatedSubgraphSpec,
29+
);
30+
31+
setComponentSpec(newRootSpec);
32+
};
33+
34+
const updateProperties = (
35+
propertyUpdates: Partial<FlexNodeData["properties"]>,
36+
) => {
37+
updateFlexNode({
38+
properties: {
39+
...flexNode.properties,
40+
...propertyUpdates,
41+
},
42+
});
43+
};
44+
45+
return { updateFlexNode, updateProperties };
46+
};

0 commit comments

Comments
 (0)