feat: Transform react-flow to vue-jsx

src/container/NodeRenderer/index.tsx

@@ -0,0 +1,191 @@
+import { getNodesInside } from '../../utils/graph';
+import { Node, NodeTypesType, Edge } from '../../types';
+import { computed, defineComponent, PropType } from 'vue';
+import store from '../../store';
+
+interface NodeRendererProps {
+  nodeTypes: NodeTypesType;
+  selectNodesOnDrag: boolean;
+  onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
+  onNodeDoubleClick?: (event: MouseEvent, element: Node) => void;
+  onNodeMouseEnter?: (event: MouseEvent, node: Node) => void;
+  onNodeMouseMove?: (event: MouseEvent, node: Node) => void;
+  onNodeMouseLeave?: (event: MouseEvent, node: Node) => void;
+  onNodeContextMenu?: (event: MouseEvent, node: Node) => void;
+  onNodeDragStart?: (event: MouseEvent, node: Node) => void;
+  onNodeDrag?: (event: MouseEvent, node: Node) => void;
+  onNodeDragStop?: (event: MouseEvent, node: Node) => void;
+  snapToGrid: boolean;
+  snapGrid: [number, number];
+  onlyRenderVisibleElements: boolean;
+}
+
+const NodeRenderer = defineComponent({
+  name: 'NodeRenderer',
+  props: {
+    nodeTypes: {
+      type: Object as PropType<NodeRendererProps['nodeTypes']>,
+      required: false,
+      default: undefined
+    },
+    selectNodesOnDrag: {
+      type: Boolean as PropType<NodeRendererProps['selectNodesOnDrag']>,
+      required: false,
+      default: undefined
+    },
+    snapToGrid: {
+      type: Boolean as PropType<NodeRendererProps['snapToGrid']>,
+      required: false,
+      default: undefined
+    },
+    snapGrid: {
+      type: Array as unknown as PropType<NodeRendererProps['snapGrid']>,
+      required: false,
+      default: undefined
+    },
+    onlyRenderVisibleElements: {
+      type: Boolean as PropType<NodeRendererProps['onlyRenderVisibleElements']>,
+      required: false,
+      default: undefined
+    },
+    onElementClick: {
+      type: Function() as PropType<NodeRendererProps['onElementClick']>,
+      required: false,
+      default: undefined
+    },
+    onNodeDoubleClick: {
+      type: Function() as PropType<NodeRendererProps['onNodeDoubleClick']>,
+      required: false,
+      default: undefined
+    },
+    onNodeMouseEnter: {
+      type: Function() as PropType<NodeRendererProps['onNodeMouseEnter']>,
+      required: false,
+      default: undefined
+    },
+    onNodeMouseMove: {
+      type: Function() as PropType<NodeRendererProps['onNodeMouseMove']>,
+      required: false,
+      default: undefined
+    },
+    onNodeMouseLeave: {
+      type: Function() as PropType<NodeRendererProps['onNodeMouseLeave']>,
+      required: false,
+      default: undefined
+    },
+    onNodeContextMenu: {
+      type: Function() as PropType<NodeRendererProps['onNodeContextMenu']>,
+      required: false,
+      default: undefined
+    },
+    onNodeDrag: {
+      type: Function() as PropType<NodeRendererProps['onNodeDrag']>,
+      required: false,
+      default: undefined
+    },
+    onNodeDragStart: {
+      type: Function() as PropType<NodeRendererProps['onNodeDragStart']>,
+      required: false,
+      default: undefined
+    },
+    onNodeDragStop: {
+      type: Function() as PropType<NodeRendererProps['onNodeDragStop']>,
+      required: false,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const pinia = store();
+
+    const visibleNodes = computed(() => {
+      return props.onlyRenderVisibleElements
+        ? getNodesInside(
+            pinia.nodes,
+            {
+              x: 0,
+              y: 0,
+              width: pinia.width,
+              height: pinia.height
+            },
+            pinia.transform,
+            true
+          )
+        : pinia.nodes;
+    });
+
+    const transformStyle = computed(() => ({
+      transform: `translate(${pinia.transform[0]}px,${pinia.transform[1]}px) scale(${pinia.transform[2]})`
+    }));
+
+    const resizeObserver = computed(() => {
+      if (typeof ResizeObserver === 'undefined') {
+        return null;
+      }
+
+      return new ResizeObserver((entries: ResizeObserverEntry[]) => {
+        const updates = entries.map((entry: ResizeObserverEntry) => ({
+          id: entry.target.getAttribute('data-id') as string,
+          nodeElement: entry.target as HTMLDivElement
+        }));
+
+        pinia.updateNodeDimensions(updates);
+      });
+    });
+
+    return () => (
+      <div class="react-flow__nodes" style={transformStyle.value}>
+        {visibleNodes.value.map((node) => {
+          const nodeType = node.type || 'default';
+          if (props.nodeTypes) {
+            const NodeComponent: any = (props.nodeTypes[nodeType] || props.nodeTypes.default);
+            if (!props.nodeTypes[nodeType]) {
+              console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
+            }
+
+            const isDraggable = !!(node.draggable || (pinia.nodesDraggable && typeof node.draggable === 'undefined'));
+            const isSelectable = !!(node.selectable || (pinia.elementsSelectable && typeof node.selectable === 'undefined'));
+            const isConnectable = !!(node.connectable || (pinia.nodesConnectable && typeof node.connectable === 'undefined'));
+
+            return (
+              <NodeComponent
+                key={node.id}
+                id={node.id}
+                className={node.className}
+                style={node.style}
+                type={nodeType}
+                data={node.data}
+                sourcePosition={node.sourcePosition}
+                targetPosition={node.targetPosition}
+                isHidden={node.isHidden}
+                xPos={node.__rf.position.x}
+                yPos={node.__rf.position.y}
+                isDragging={node.__rf.isDragging}
+                isInitialized={node.__rf.width !== null && node.__rf.height !== null}
+                snapGrid={props.snapGrid}
+                snapToGrid={props.snapToGrid}
+                selectNodesOnDrag={props.selectNodesOnDrag}
+                onClick={props.onElementClick}
+                onMouseEnter={props.onNodeMouseEnter}
+                onMouseMove={props.onNodeMouseMove}
+                onMouseLeave={props.onNodeMouseLeave}
+                onContextMenu={props.onNodeContextMenu}
+                onNodeDoubleClick={props.onNodeDoubleClick}
+                onNodeDragStart={props.onNodeDragStart}
+                onNodeDrag={props.onNodeDrag}
+                onNodeDragStop={props.onNodeDragStop}
+                scale={pinia.transform[2]}
+                selected={pinia.selectedElements?.some(({ id }) => id === node.id) || false}
+                isDraggable={isDraggable}
+                isSelectable={isSelectable}
+                isConnectable={isConnectable}
+                resizeObserver={resizeObserver.value}
+              />
+            );
+          }
+        })}
+      </div>
+    );
+  }
+});
+
+export default NodeRenderer;

src/container/NodeRenderer/utils.ts

@@ -0,0 +1,27 @@
+import DefaultNode from '../../components/Nodes/DefaultNode';
+import InputNode from '../../components/Nodes/InputNode';
+import OutputNode from '../../components/Nodes/OutputNode';
+import wrapNode from '../../components/Nodes/wrapNode';
+import { NodeTypesType } from '../../types';
+
+export function createNodeTypes(nodeTypes: NodeTypesType): NodeTypesType {
+  const standardTypes: NodeTypesType = {
+    input: wrapNode(nodeTypes.input || InputNode),
+    default: wrapNode(nodeTypes.default || DefaultNode),
+    output: wrapNode(nodeTypes.output || OutputNode)
+  };
+
+  const wrappedTypes = {} as NodeTypesType;
+  const specialTypes: NodeTypesType = Object.keys(nodeTypes)
+    .filter((k) => !['input', 'default', 'output'].includes(k))
+    .reduce((res, key) => {
+      res[key] = wrapNode(nodeTypes[key] || DefaultNode);
+
+      return res;
+    }, wrappedTypes);
+
+  return {
+    ...standardTypes,
+    ...specialTypes
+  };
+}