Struggle with CRDT+React.

web/src/workspace/LynxKiteState.ts

@@ -1,3 +1,4 @@
 import { createContext } from "react";
+import { Workspace } from "../apiTypes.ts";
 
-export const LynxKiteState = createContext({});
+export const LynxKiteState = createContext({ workspace: {} as Workspace });

web/src/workspace/Workspace.tsx

@@ -6,10 +6,8 @@ import favicon from '../assets/favicon.ico';
 import {
   ReactFlow,
   Controls,
-  MiniMap,
   MarkerType,
   useReactFlow,
-  useUpdateNodeInternals,
   ReactFlowProvider,
   applyEdgeChanges,
   applyNodeChanges,
@@ -50,26 +48,34 @@ export default function (props: any) {
 
 
 function LynxKiteFlow() {
-  const updateNodeInternals = useUpdateNodeInternals();
-  const { screenToFlowPosition } = useReactFlow();
+  const reactFlow = useReactFlow();
   const [nodes, setNodes] = useState([] as Node[]);
   const [edges, setEdges] = useState([] as Edge[]);
   const { path } = useParams();
 
-  const sstore = syncedStore({ workspace: {} });
+  const sstore = syncedStore({ workspace: {} as Workspace });
   const doc = getYjsDoc(sstore);
   const wsProvider = useMemo(() => new WebsocketProvider("ws://localhost:8000/ws/crdt", path!, doc), [path]);
   wsProvider; // Just to disable the lint warning. The life cycle of this object is a mystery.
-  const state: { workspace: Workspace } = useSyncedStore(sstore);
+  const state = useSyncedStore(sstore);
   const onNodesChange = useCallback(
     (changes: any[]) => {
       setNodes((nds) => applyNodeChanges(changes, nds));
+      const wnodes = state.workspace!.nodes!;
       for (const ch of changes) {
+        const nodeIndex = wnodes.findIndex((n) => n.id === ch.id);
+        if (nodeIndex === -1) continue;
+        const node = wnodes[nodeIndex];
+        if (!node) continue;
         if (ch.type === 'position') {
-          const node = state.workspace?.nodes?.find((n) => n.id === ch.id);
-          if (node) {
-            node.position = ch.position;
-          }
+          node.position = ch.position;
+        } else if (ch.type === 'select') {
+        } else if (ch.type === 'dimensions') {
+        } else if (ch.type === 'replace') {
+          node.data.collapsed = ch.item.data.collapsed;
+          node.data.params = { ...ch.item.data.params };
+        } else {
+          console.log('Unknown node change', ch);
         }
       }
     },
@@ -79,6 +85,7 @@ function LynxKiteFlow() {
     (changes: any[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
     [],
   );
+
   if (state?.workspace?.nodes && JSON.stringify(nodes) !== JSON.stringify([...state.workspace.nodes as Node[]])) {
     const updated = Object.fromEntries(state.workspace.nodes.map((n) => [n.id, n]));
     const oldNodes = Object.fromEntries(nodes.map((n) => [n.id, n]));
@@ -127,7 +134,7 @@ function LynxKiteFlow() {
         </div>
       </div>
       <div style={{ height: "100%", width: '100vw' }}>
-        <LynxKiteState.Provider value={state.workspace}>
+        <LynxKiteState.Provider value={state}>
           <ReactFlow
             nodes={nodes}
             edges={edges}

web/src/workspace/nodes/LynxKiteNode.tsx

@@ -1,10 +1,11 @@
 import { useContext } from 'react';
 import { LynxKiteState } from '../LynxKiteState';
-import { Handle, NodeResizeControl } from '@xyflow/react';
+import { useReactFlow, Handle, NodeResizeControl, Position } from '@xyflow/react';
 // @ts-ignore
 import ChevronDownRight from '~icons/tabler/chevron-down-right.jsx';
 
 interface LynxKiteNodeProps {
+  id: string;
   width: number;
   height: number;
   nodeStyle: any;
@@ -12,13 +13,14 @@ interface LynxKiteNodeProps {
   children: any;
 }
 
-function getHandles(inputs, outputs) {
+function getHandles(inputs: object, outputs: object) {
   const handles: {
     position: 'top' | 'bottom' | 'left' | 'right',
     name: string,
     index: number,
     offsetPercentage: number,
     showLabel: boolean,
+    type: 'source' | 'target',
   }[] = [];
   for (const e of Object.values(inputs)) {
     handles.push({ ...e, type: 'target' });
@@ -41,15 +43,17 @@ function getHandles(inputs, outputs) {
 }
 
 export default function LynxKiteNode(props: LynxKiteNodeProps) {
+  const reactFlow = useReactFlow();
   const data = props.data;
   const state = useContext(LynxKiteState);
-  const expanded = true;
+  const expanded = !data.collapsed;
   const handles = getHandles(data.meta?.inputs || {}, data.meta?.outputs || {});
   function asPx(n: number | undefined) {
     return (n ? n + 'px' : undefined) || '200px';
   }
-  function titleClicked() { }
-  function updateNodeData() { }
+  function titleClicked() {
+    reactFlow.updateNodeData(props.id, { collapsed: expanded });
+  }
   const handleOffsetDirection = { top: 'left', bottom: 'left', left: 'top', right: 'top' };
 
   return (
@@ -69,7 +73,7 @@ export default function LynxKiteNode(props: LynxKiteNodeProps) {
           {handles.map(handle => (
             <Handle
               key={handle.name}
-              id={handle.name} type={handle.type} position={handle.position}
+              id={handle.name} type={handle.type} position={Position[handle.position as keyof typeof Position]}
               style={{ [handleOffsetDirection[handle.position]]: handle.offsetPercentage + '%' }}>
               {handle.showLabel && <span className="handle-name">{handle.name.replace(/_/g, " ")}</span>}
             </Handle>
@@ -78,8 +82,8 @@ export default function LynxKiteNode(props: LynxKiteNodeProps) {
             minWidth={100}
             minHeight={50}
             style={{ 'background': 'transparent', 'border': 'none' }}
-            onResizeStart={() => updateNodeData(id, { beingResized: true })}
-            onResizeEnd={() => updateNodeData(id, { beingResized: false })}
+            onResizeStart={() => reactFlow.updateNodeData(props.id, { beingResized: true })}
+            onResizeEnd={() => reactFlow.updateNodeData(props.id, { beingResized: false })}
           >
             <ChevronDownRight className="node-resizer" />
           </NodeResizeControl>

web/src/workspace/nodes/NodeWithParams.tsx

@@ -1,18 +1,17 @@
 import { useContext } from 'react';
 import { LynxKiteState } from '../LynxKiteState';
 import LynxKiteNode from './LynxKiteNode';
-import { useNodesState } from '@xyflow/react';
+import { useReactFlow } from '@xyflow/react';
 import NodeParameter from './NodeParameter';
 
-function NodeWithParams(props) {
+function NodeWithParams(props: any) {
+  const reactFlow = useReactFlow();
   const metaParams = props.data.meta?.params;
   const state = useContext(LynxKiteState);
-  function setParam(name, newValue) {
-    const i = state.workspace.nodes.findIndex((n) => n.id === props.id);
-    state.workspace.nodes[i].data.params[name] = newValue;
+  function setParam(name: string, newValue: any) {
+    reactFlow.updateNodeData(props.id, { params: { ...props.data.params, [name]: newValue } });
   }
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const params = nodes && props.data?.params ? Object.entries(props.data.params) : [];
+  const params = props.data?.params ? Object.entries(props.data.params) : [];
 
   return (
     <LynxKiteNode {...props}>
@@ -22,7 +21,7 @@ function NodeWithParams(props) {
           key={name}
           value={value}
           meta={metaParams?.[name]}
-          onChange={(value) => setParam(name, value)}
+          onChange={(value: any) => setParam(name, value)}
         />
       )}
     </LynxKiteNode >