feat(system): update node data via context

First implementation, feels a bit brittle, will have to dig into it a bit more later.
apossiblespace · Feb 12, 2025 · a671ee7 · a671ee7
1 parent bf931b9
commit a671ee7
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 35 deletions.
diff --git a/src/main/parts/frontend/components/nodes.cljs b/src/main/parts/frontend/components/nodes.cljs
@@ -3,10 +3,12 @@
    ["reactflow" :refer [Handle Position]]
    [uix.core :refer [defui $ use-state]]
    [parts.frontend.components.node-form :refer [node-form]]
-   [parts.common.part-types :refer [part-types]]))
+   [parts.common.part-types :refer [part-types]]
+   [parts.frontend.context :as ctx]))
 
 (defui parts-node [{:keys [id type data is-connectable]}]
-  (let [[editing? set-editing] (use-state false)]
+  (let [[editing? set-editing] (use-state false)
+        update-node (uix.core/use-context ctx/update-node-context)]
     ($ :div {:class (str "node " type)}
        ($ Handle {:type "target"
                   :position (.-Top Position)
@@ -19,8 +21,8 @@
        (when editing?
          ($ node-form {:node {:id id :type type :data data}
                        :on-save (fn [id form-data]
-                                  ;; FIXME: Implement actual handler
-                                  (println id form-data)
+                                  (when update-node
+                                    (update-node id form-data))
                                   (set-editing false))
                        :on-cancel #(set-editing false)}))
        ($ Handle {:type "source"

diff --git a/src/main/parts/frontend/components/system.cljs b/src/main/parts/frontend/components/system.cljs
@@ -9,7 +9,8 @@
                         Panel
                         addEdge]]
    [uix.core :refer [defui $]]
-   [parts.frontend.components.nodes :refer [node-types]]))
+   [parts.frontend.components.nodes :refer [node-types]]
+   [parts.frontend.context :as ctx]))
 
 ;; FIXME: This shouldn't be returning a javascript object.
 ;; Ideally, we would not be manipulating JS outside of the React component at
@@ -37,38 +38,52 @@
   (let [node-types (uix.core/use-memo (fn [] (clj->js node-types)) [node-types])
         [nodes setNodes onNodesChange] (useNodesState (clj->js nodes))
         [edges setEdges onEdgesChange] (useEdgesState (clj->js edges))
+        update-node (uix.core/use-callback
+                     (fn [id form-data]
+                       (setNodes (fn [nodes]
+                                   (clj->js
+                                    (map (fn [node]
+                                           (let [node-map (js->clj node :keywordize-keys true)]
+                                             (if (= (:id node-map) id)
+                                               (-> node-map
+                                                   (assoc :type (:type form-data))
+                                                   (assoc :data {"label" (:label form-data)}))
+                                               node-map)))
+                                         (js->clj nodes :keywordize-keys true))))))
+                     [setNodes])
         on-connect (uix.core/use-callback
                    (fn [params]
                      (setEdges (fn [eds] (addEdge params eds))))
                    [setEdges])]
     ($ :div {:style {:width "100vw" :height "100vh"} :class "system-view"}
-       ($ ReactFlow {:nodes nodes
-                     :edges edges
-                     :onNodesChange onNodesChange
-                     :onEdgesChange onEdgesChange
-                     :onConnect on-connect
-                     :nodeTypes node-types}
-          ($ MiniMap)
-          ($ Controls)
-          ($ Panel {:position "top-left" :class "logo"}
-             ($ :img {:src "/images/parts-logo-horizontal.svg" :width 150}))
-          ($ Panel {:position "top-right" :class "toolbar"}
-             ($ :span "Add: ")
-             ($ :button
-                {:on-click
-                 (fn []
-                   (setNodes (add-node "exile")))}
-                "Exile")
-             ($ :button
-                {:on-click
-                 (fn []
-                   (setNodes (add-node "firefighter")))}
-                "Firefighter")
-             ($ :button
-                {:on-click
-                 (fn []
-                   (setNodes (add-node "manager")))}
-                "Manager"))
-          ($ Background {:variant "dots"
-                        :gap 12
-                        :size 1})))))
+       ($ (.-Provider ctx/update-node-context) {:value update-node}
+          ($ ReactFlow {:nodes nodes
+                        :edges edges
+                        :onNodesChange onNodesChange
+                        :onEdgesChange onEdgesChange
+                        :onConnect on-connect
+                        :nodeTypes node-types}
+             ($ MiniMap)
+             ($ Controls)
+             ($ Panel {:position "top-left" :class "logo"}
+                ($ :img {:src "/images/parts-logo-horizontal.svg" :width 150}))
+             ($ Panel {:position "top-right" :class "toolbar"}
+                ($ :span "Add: ")
+                ($ :button
+                   {:on-click
+                    (fn []
+                      (setNodes (add-node "exile")))}
+                   "Exile")
+                ($ :button
+                   {:on-click
+                    (fn []
+                      (setNodes (add-node "firefighter")))}
+                   "Firefighter")
+                ($ :button
+                   {:on-click
+                    (fn []
+                      (setNodes (add-node "manager")))}
+                   "Manager"))
+             ($ Background {:variant "dots"
+                            :gap 12
+                            :size 1}))))))
diff --git a/src/main/parts/frontend/context.cljs b/src/main/parts/frontend/context.cljs
@@ -0,0 +1,4 @@
+(ns parts.frontend.context
+  (:require [uix.core]))
+
+(def update-node-context (uix.core/create-context nil))