Update BlockEditor.tsx

client/src/components/BlockEditor/BlockEditor.tsx

@@ -8,7 +8,7 @@ import { BlockDefinition, BlockShape, CATEGORY_COLORS, CATEGORY_ICONS } from '..
 import { useProjectStore } from '../../store/projectStore';
 import { useEditorStore } from '../../store/editorStore';
 import { useCollaborationStore } from '../../store/collaborationStore';
-import { useProjectSocket } from '../../hooks/useWebSocket';
+import { getSocket } from '../../hooks/useWebSocket';
 import { getColor } from '../Collaboration/CollaboratorAvatars';
 import { Maximize2, Trash2, MousePointer2 } from 'lucide-react';
 
@@ -576,7 +576,71 @@ export default function BlockEditor() {
   const setBlocksXml = useEditorStore((s) => s.setBlocksXml);
   const setBlockCode = useEditorStore((s) => s.setBlockCode);
   const saveGeneratedCodeToFile = useEditorStore((s) => s.saveGeneratedCodeToFile);
-  const { emitBlockStateSync, emitBlockDragStart, emitBlockDragMove, emitBlockDragEnd, emitBlockConnect, emitBlockChange, emitBlockCreateEvent, emitPointerMove } = useProjectSocket(currentProject?.id);
+  const projectId = currentProject?.id;
+  const lastPointerEmitRef = useRef(0);
+  const lastBlockDragEmitRef = useRef(0);
+
+  const emitBlockStateSync = useCallback((fileId: string, xml: string) => {
+    const s = getSocket();
+    if (s?.connected && projectId) {
+      s.emit('block_state_sync', { projectId, fileId, xml });
+    }
+  }, [projectId]);
+
+  const emitPointerMove = useCallback((x: number, y: number) => {
+    const now = Date.now();
+    if (now - lastPointerEmitRef.current < 100) return;
+    lastPointerEmitRef.current = now;
+    const s = getSocket();
+    if (s?.connected && projectId) {
+      s.emit('pointer_move', { projectId, x, y });
+    }
+  }, [projectId]);
+
+  const emitBlockDragStart = useCallback((blockId: string, x: number, y: number) => {
+    const s = getSocket();
+    if (s?.connected && projectId) {
+      s.emit('block_drag_start', { projectId, blockId, x, y });
+    }
+  }, [projectId]);
+
+  const emitBlockDragMove = useCallback((blockId: string, x: number, y: number) => {
+    const now = Date.now();
+    if (now - lastBlockDragEmitRef.current < 50) return;
+    lastBlockDragEmitRef.current = now;
+    const s = getSocket();
+    if (s?.connected && projectId) {
+      s.emit('block_drag_move', { projectId, blockId, x, y });
+    }
+  }, [projectId]);
+
+  const emitBlockDragEnd = useCallback((blockId: string) => {
+    const s = getSocket();
+    if (s?.connected && projectId) {
+      s.emit('block_drag_end', { projectId, blockId });
+    }
+  }, [projectId]);
+
+  const emitBlockConnect = useCallback((childId: string, parentId: string, inputName?: string) => {
+    const s = getSocket();
+    if (s?.connected && projectId) {
+      s.emit('block_connect', { projectId, childId, parentId, inputName });
+    }
+  }, [projectId]);
+
+  const emitBlockChange = useCallback((blockId: string, name: string, value: any, element: string) => {
+    const s = getSocket();
+    if (s?.connected && projectId) {
+      s.emit('block_change', { projectId, blockId, name, value, element });
+    }
+  }, [projectId]);
+
+  const emitBlockCreateEvent = useCallback((blockId: string, fileId: string, xml: string) => {
+    const s = getSocket();
+    if (s?.connected && projectId) {
+      s.emit('block_create_event', { projectId, fileId, blockId, xml });
+    }
+  }, [projectId]);
   const remotePointers = useCollaborationStore((s) => s.remotePointers);
   const remoteBlockDrags = useCollaborationStore((s) => s.remoteBlockDrags);
   const pendingBlockConnects = useCollaborationStore((s) => s.pendingBlockConnects);
@@ -922,6 +986,7 @@ export default function BlockEditor() {
           const dom = Blockly.Xml.workspaceToDom(ws);
           const xml = Blockly.Xml.domToText(dom);
           setBlocksXml(activeFileId, xml);
+          emitBlockStateSync(activeFileId, xml);
         } catch (e) {}
       }
       // Cleanup pointer move listener