Better Update Node Function

Author: AttAditya

src/components/engine/Node/index.tsx

@@ -5,7 +5,7 @@ import {
 
 import type { NodeModel } from "@defs/Node";
 
-import { useUnsavedChangesContext } from "@contexts/unsavedChanges";
+import { useNodeSystemContext } from "@contexts/nodeSystem";
 
 import { DynamicIcon } from "@components/commons/DynamicIcon";
 import { Glass } from "@components/commons/Glass";
@@ -24,9 +24,7 @@ export function Node({
   showCanvas?: boolean;
   forcedActive?: boolean;
 }) {
-  const {
-    setUnsavedChanges,
-  } = useUnsavedChangesContext()!;
+  const { updateNode } = useNodeSystemContext()!;
 
   const [active, setActive] = useState(false);
   const [baseType, setBaseType] = useState<string>(node.baseType || "text");
@@ -39,8 +37,13 @@ export function Node({
   const switchBaseType = useCallback((type: string) => {
     node.baseType = type;
     setBaseType(type);
-    setUnsavedChanges(true);
-  }, [setUnsavedChanges, node]);
+    updateNode(node.id!, node);
+  }, [updateNode, node]);
+
+  const changeValue = useCallback((value: string) => {
+    node.value = value;
+    updateNode(node.id!, node);
+  }, [updateNode, node]);
 
   return (<>
     <div className="node-wrapper">
@@ -73,7 +76,7 @@ export function Node({
         <Glass
           className={[
             "node-context",
-            node.context.length > 20 ? "left" : "",
+            node.context.length > 20 ? "side" : "",
           ].join(" ")}
         >
           {
@@ -129,10 +132,7 @@ export function Node({
               <Input
                 placeholder="Base Node Value"
                 defaultValue={node.value || ""}
-                onChange={(event) => {
-                  node.value = event.target.value;
-                  setUnsavedChanges(true);
-                }}
+                onChange={(e) => changeValue(e.target.value)}
               />
             </div>
           </>)}

src/components/engine/Node/style.css

@@ -117,12 +117,12 @@
   pointer-events: auto;
 }
 
-.node-context.left {
+.node-context.side {
   left: calc(100% + 2rem);
   top: 50%;
 }
 
-.node.active + .node-context.left {
+.node.active + .node-context.side {
   transform: translateX(0%) translateY(-50%) scale(1);
 }
 

src/contexts/nodeSystem.tsx

@@ -18,6 +18,7 @@ const createNodeSystemContext = () => {
     nodeSystem: NodeSystem;
     entries: string[];
     addNode: (baseId: string, node: NodeModel) => void;
+    updateNode: (nodeId: string, updatedNode: NodeModel) => void;
     removeNode: (nodeId: string) => void;
     isEntry: (nodeId: string) => boolean;
     createEntry: (entryName: string) => void;
@@ -93,6 +94,28 @@ const createNodeSystemContext = () => {
       });
     }, [setUnsavedChanges]);
 
+    const updateNode = useCallback((
+      nodeId: string,
+      updatedNode: NodeModel,
+    ) => {
+      setNodeSystem(prev => {
+        if (!prev[nodeId]) return prev;
+
+        const baseId = prev[nodeId].baseId!;
+        const index = prev[baseId].nodes.findIndex(n => n.id === nodeId);
+        
+        if (index !== -1) {
+          prev[baseId].nodes[index] = {
+            ...prev[baseId].nodes[index],
+            ...updatedNode,
+          };
+        }
+
+        setUnsavedChanges(true);
+        return { ...prev };
+      });
+    }, [setUnsavedChanges]);
+
     const removeNode = useCallback((nodeId: string) => {
       setNodeSystem(prev => {
         const baseId: string = prev[nodeId].baseId!;
@@ -120,6 +143,7 @@ const createNodeSystemContext = () => {
       nodeSystem,
       entries,
       addNode,
+      updateNode,
       removeNode,
       isEntry,
       createEntry,