Build

TheTechCompany · Sep 14, 2023 · 85f286b · 85f286b
1 parent 5978442
commit 85f286b
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 62 deletions.
diff --git a/packages/app/hivecommand-frontend/src/App.tsx b/packages/app/hivecommand-frontend/src/App.tsx
@@ -153,7 +153,6 @@ function App(props: any) {
               <Router basename={process.env.PUBLIC_URL || "/dashboard/command"}>
                 <Box sx={{ height: '100%', color: 'white', flex: 1, display: 'flex', flexDirection: 'column', bgcolor: 'primary.dark' }}>
                   <Routes>
-
                     <Route path={`programs/:id/*`} element={<EditorPage />} />
                     <Route path={`schematics/:id/*`} element={<SchematicEditor />} />
                     <Route path={`functions/:id/*`} element={<FunctionEditor />} />

diff --git a/packages/core-ui/command-electrical-editor/src/canvas/surface.tsx b/packages/core-ui/command-electrical-editor/src/canvas/surface.tsx
@@ -1,27 +1,27 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Background, ConnectionMode, Controls, MiniMap, ReactFlow, SelectionMode, useEdgesState, useNodesState, useOnSelectionChange } from 'reactflow';
 import { useEditorContext } from '../context';
-import { nodeTypes as _nodeTypes, edgeTypes as _edgeTypes } from '@hive-command/electrical-nodes';
+import { nodeTypes as _nodeTypes, edgeTypes as _edgeTypes, ElectricalNodesProvider } from '@hive-command/electrical-nodes';
 import { WireEdge } from './edge';
 import { isEqual } from 'lodash'
 
 export const CanvasSurface = () => {
 
-    const { pages, selectedPage, onUpdatePage, draftWire } = useEditorContext();
-
-    const {nodes: flowNodes, edges: flowEdges} = useMemo(() => pages?.find((a: any) => a.id == selectedPage) || {edges: [], nodes: []}, [selectedPage, pages])
+    const { pages, selectedPage, onUpdatePage, draftWire, elements } = useEditorContext();
 
-    const [ selected, setSelected ] = useState<any>({nodes: [], edges: []})
+    const { nodes: flowNodes, edges: flowEdges } = useMemo(() => pages?.find((a: any) => a.id == selectedPage) || { edges: [], nodes: [] }, [selectedPage, pages])
 
-    const [ nodes, setNodes, onNodesChange ] = useNodesState(flowNodes || [])
-    const [ edges, setEdges, onEdgesChange ] = useEdgesState(flowEdges || [])
+    const [selected, setSelected] = useState<any>({ nodes: [], edges: [] })
+
+    const [nodes, setNodes, onNodesChange] = useNodesState(flowNodes || [])
+    const [edges, setEdges, onEdgesChange] = useEdgesState(flowEdges || [])
 
     useEffect(() => {
         console.log('SetNodes')
         setNodes(pages?.find((a: any) => a.id == selectedPage)?.nodes || [])
         setEdges(pages?.find((a: any) => a.id == selectedPage)?.edges || [])
     }, [selectedPage, pages])
-  
+
     const nodeTypes = useMemo(() => _nodeTypes, [])
 
     const edgeTypes = useMemo(() => _edgeTypes, [])
@@ -35,74 +35,79 @@ export const CanvasSurface = () => {
         }
     }
 
-    const finalNodes = useMemo(() => (nodes.map((x) => ({...x, selected: selected.nodes.findIndex((a: any) => a.id == x.id) > -1})) as any[]), [nodes, selected])
-    const finalEdges = useMemo(() => (edges.map((x) => ({...x, selected: selected.edges.findIndex((a: any) => a.id == x.id) > -1})) as any[]), [edges, selected])
-    
+    const finalNodes = useMemo(() => (nodes.map((x) => ({ ...x, selected: selected.nodes.findIndex((a: any) => a.id == x.id) > -1 })) as any[]), [nodes, selected])
+    const finalEdges = useMemo(() => (edges.map((x) => ({ ...x, selected: selected.edges.findIndex((a: any) => a.id == x.id) > -1 })) as any[]), [edges, selected])
+
 
     return (
-        <ReactFlow
-            snapGrid={[5, 5]}
-            snapToGrid
-            connectionMode={ConnectionMode.Loose}
-            onSelectionChange={(selection) => {
+        <ElectricalNodesProvider
+            value={{
+                elements: elements
+            }}>
+            <ReactFlow
+                snapGrid={[5, 5]}
+                snapToGrid
+                connectionMode={ConnectionMode.Loose}
+                onSelectionChange={(selection) => {
+
+                    if (!isEqual(selected, selection)) {
+                        console.log({ selection })
+                        setSelected(selection)
+
+                    }
 
-                if(!isEqual(selected, selection)){
-                    console.log({selection})
-                    setSelected(selection)
+                }}
+                onNodesChange={(changes) => {
 
-                }
+                    let oldNodes = nodes.slice();
 
-            }}
-            onNodesChange={(changes) => {
+                    onNodesChange(changes);
 
-                let oldNodes = nodes.slice();
 
-                onNodesChange(changes);
+                    if (!isEqual((flowNodes || []).map(nodeMap), (nodes || []).map(nodeMap))) {
 
+                        console.log("NODES CHANGED", { changes })
 
-                if(!isEqual((flowNodes || []).map(nodeMap), (nodes || []).map(nodeMap))){
-
-                    console.log("NODES CHANGED", {changes})
+                        console.log("update page");
 
-                    console.log("update page");
+                        onUpdatePage?.({
+                            ...pages?.find((a) => a.id == selectedPage),
+                            nodes: nodes
+                        }, "onNodesChanged")
+                    }
 
+
+                }}
+                onNodesDelete={(deleted_nodes) => {
+                    onUpdatePage?.({
+                        ...pages?.find((a) => a.id == selectedPage),
+                        nodes: nodes.filter((a) => deleted_nodes.findIndex((b) => b.id == a.id) < 0)
+                    })
+                }}
+                onEdgesChange={(changes) => {
+                    onEdgesChange(changes)
+                }}
+                onEdgesDelete={(deleted_edges) => {
                     onUpdatePage?.({
                         ...pages?.find((a) => a.id == selectedPage),
-                        nodes: nodes
-                    }, "onNodesChanged")
-                }
-
-
-            }}
-            onNodesDelete={(deleted_nodes) => {
-                onUpdatePage?.({
-                    ...pages?.find((a) => a.id == selectedPage),
-                    nodes: nodes.filter((a) => deleted_nodes.findIndex((b) => b.id == a.id) < 0)
-                })
-            }}
-            onEdgesChange={(changes) => {
-                onEdgesChange(changes)
-            }}
-            onEdgesDelete={(deleted_edges) => {
-                onUpdatePage?.({
-                    ...pages?.find((a) => a.id == selectedPage),
-                    edges: edges.filter((a) => deleted_edges.findIndex((b) => b.id == a.id) < 0)
-                })
-            }}
-            nodes={nodes.concat([{ id: 'canvas', type: 'canvasNode', position: {x: 10, y: 10}, data: {} }])}
-            edges={edges.concat([
-                {id: '1', type: 'wire', data: {points: draftWire?.points || []}, source: "canvas", target: "canvas"}
-            ])}
-            nodeTypes={nodeTypes}    
-            edgeTypes={edgeTypes}
+                        edges: edges.filter((a) => deleted_edges.findIndex((b) => b.id == a.id) < 0)
+                    })
+                }}
+                nodes={nodes.concat([{ id: 'canvas', type: 'canvasNode', position: { x: 10, y: 10 }, data: {} }])}
+                edges={edges.concat([
+                    { id: '1', type: 'wire', data: { points: draftWire?.points || [] }, source: "canvas", target: "canvas" }
+                ])}
+                nodeTypes={nodeTypes}
+                edgeTypes={edgeTypes}
 
             // onNodeClick={undefined}
             // onPaneClick={undefined}
-        >
-
-            <Background gap={10} />
-            <Controls />
-            <MiniMap />
-        </ReactFlow>
+            >
+
+                <Background gap={10} />
+                <Controls />
+                <MiniMap />
+            </ReactFlow>
+        </ElectricalNodesProvider>
     )
 }