feat(node-graph): rebuild editor with native react flow canvas

Author: Minsecrus

apps/web/src/editor/features/development/NodeGraphEditor.controller.ts

@@ -1,35 +1,13 @@
-import { useNodeGraphEditorController } from './NodeGraphEditor.controller';
-import { NodeGraphEditorCanvas } from './NodeGraphEditorCanvas';
-import { NodeGraphEditorContextMenu } from './NodeGraphEditorContextMenu';
-import { NodeGraphEditorCursor } from './NodeGraphEditorCursor';
-import { NodeGraphEditorDebugOverlay } from './NodeGraphEditorDebugOverlay';
-import { NodeGraphEditorFloatingIslands } from './NodeGraphEditorFloatingIslands';
-import { NodeGraphEditorGraphModal } from './NodeGraphEditorGraphModal';
+import '@xyflow/react/dist/style.css';
+import './reactflow/nodeGraphEditor.css';
+import { ReactFlowProvider } from '@xyflow/react';
+import { NodeGraphEditorContent } from './reactflow/NodeGraphEditorContent';
 
 function NodeGraphEditor() {
-  const controller = useNodeGraphEditorController();
-
   return (
-    <div
-      className="relative h-full min-h-full w-full cursor-none overflow-hidden"
-      data-testid="nodegraph-editor-root"
-      onPointerMove={controller.root.onPointerMove}
-      onPointerLeave={controller.root.onPointerLeave}
-    >
-      <NodeGraphEditorCanvas canvas={controller.canvas} />
-      <NodeGraphEditorCursor cursorPosition={controller.root.cursorPosition} />
-      <NodeGraphEditorDebugOverlay debug={controller.debug} />
-
-      <div className="pointer-events-none absolute inset-0 z-10">
-        <NodeGraphEditorFloatingIslands
-          manager={controller.manager}
-          viewport={controller.viewport}
-        />
-      </div>
-
-      <NodeGraphEditorContextMenu contextMenu={controller.contextMenu} />
-      <NodeGraphEditorGraphModal modal={controller.modal} />
-    </div>
+    <ReactFlowProvider>
+      <NodeGraphEditorContent />
+    </ReactFlowProvider>
   );
 }