feat: script setup style

* Add Node.vue

src/container/NodeRenderer.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import Node from '~/components/Nodes/Node'
-import { NodeType, Node as TNode, Transform, Dimensions } from '~/types'
+import Node from '~/components/Node.vue'
+import { NodeType, Node as TNode, Transform, Dimensions, NodeDimensionUpdate } from '~/types'
 import { getNodesInside } from '~/utils/graph'
+import { getDimensions } from '~/utils'
+import { getHandleBounds } from '~/components/Nodes/utils'
 
 interface NodeRendererProps {
   nodes: TNode[]
@@ -24,11 +26,12 @@ const props = withDefaults(defineProps<NodeRendererProps>(), {
   dimensions: () => ({ width: 0, height: 0 }),
 })
 
+const nodes = ref(props.nodes)
 const getNodes = () =>
   props.onlyRenderVisibleElements
-    ? props.nodes &&
+    ? nodes.value &&
       getNodesInside(
-        props.nodes,
+        nodes.value,
         {
           x: 0,
           y: 0,
@@ -38,20 +41,45 @@ const getNodes = () =>
         props.transform,
         true,
       )
-    : props.nodes
+    : nodes.value
 
 const cNodes = computed(() => getNodes())
 
 const type = (node: TNode) => {
   const nodeType = node.type || 'default'
-  if (props.nodeTypes) {
-    const type = props.nodeTypes[nodeType] || props.nodeTypes.default
-    if (!props.nodeTypes[nodeType]) {
-      console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`)
-    }
-    return type
+  const type = props.nodeTypes[nodeType] || props.nodeTypes.default
+  if (!props.nodeTypes[nodeType]) {
+    console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`)
   }
-  return false
+  return type
+}
+
+const updateNodeDimensions = (updates: NodeDimensionUpdate[]) => {
+  nodes.value = nodes.value.map((node) => {
+    const update = updates.find((u) => u.id === node.id)
+    if (update) {
+      const dimensions = getDimensions(update.nodeElement)
+      const doUpdate =
+        dimensions.width &&
+        dimensions.height &&
+        (node.__rf.width !== dimensions.width || node.__rf.height !== dimensions.height || update.forceUpdate)
+
+      if (doUpdate) {
+        const handleBounds = getHandleBounds(update.nodeElement, props.transform[2])
+
+        return {
+          ...node,
+          __rf: {
+            ...node.__rf,
+            ...dimensions,
+            handleBounds,
+          },
+        }
+      }
+    }
+
+    return node
+  })
 }
 </script>
 <template>
@@ -60,15 +88,31 @@ const type = (node: TNode) => {
     :style="{ transform: `translate(${props.transform[0]}px,${props.transform[1]}px) scale(${props.transform[2]})` }"
   >
     <template v-for="(node, i) of cNodes" :key="`node-${i}`">
-      <div>Node</div>
       <Node
-        v-if="type(node)"
         :node="node"
         :snap-grid="props.snapGrid"
         :snap-to-grid="props.snapToGrid"
         :select-nodes-on-drag="props.selectNodesOnDrag"
-        :type="type(node)"
-      />
+        :scale="props.transform[2]"
+        @updateNodeDimensions="updateNodeDimensions"
+      >
+        <template #default="{ selected, isConnectable }">
+          <component
+            :is="type(node)"
+            v-bind="{
+              data: node.data,
+              type: node.type,
+              xPos: node.__rf.position.x,
+              yPos: node.__rf.position.y,
+              selected: selected,
+              isConnectable: isConnectable,
+              sourcePosition: node.sourcePosition,
+              targetPosition: node.targetPosition,
+              isDragging: node.__rf.isDragging,
+            }"
+          />
+        </template>
+      </Node>
     </template>
   </div>
 </template>