refactor(nodes): use plugin to import prop interface

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/Nodes/DefaultNode.vue

@@ -1,21 +1,13 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position, ValidConnectionFunc } from '../../types'
+import { Position } from '../../types'
+import type { NodeProps } from '../../types/node'
 
-interface DefaultNodeProps extends NodeProps {
-  data?: NodeProps['data']
-  connectable?: NodeProps['connectable']
-  targetPosition?: NodeProps['targetPosition']
-  sourcePosition?: NodeProps['sourcePosition']
-  isValidTargetPos?: ValidConnectionFunc
-  isValidSourcePos?: ValidConnectionFunc
-}
-
-const props = withDefaults(defineProps<DefaultNodeProps>(), {
+const props = withDefaults(defineProps<NodeProps>(), {
   data: () => {},
   connectable: false,
-  targetPosition: Position.Top,
-  sourcePosition: Position.Bottom,
+  sourcePosition: 'bottom' as Position,
+  targetPosition: 'top' as Position,
 })
 </script>
 <script lang="ts">
@@ -32,8 +24,7 @@ export default {
     :is-valid-connection="props.isValidTargetPos"
   />
   <slot v-bind="props">
-    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-    <span v-else v-html="props.data?.label"></span>
+    <span v-if="props.label" v-html="props.label" />
   </slot>
   <Handle
     type="source"

src/components/Nodes/InputNode.vue

@@ -1,18 +1,12 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position, ValidConnectionFunc } from '../../types'
+import { Position } from '../../types'
+import type { NodeProps } from '../../types/node'
 
-interface InputNodeProps extends NodeProps {
-  data?: NodeProps['data']
-  connectable?: NodeProps['connectable']
-  sourcePosition?: NodeProps['sourcePosition']
-  isValidSourcePos?: ValidConnectionFunc
-}
-
-const props = withDefaults(defineProps<InputNodeProps>(), {
+const props = withDefaults(defineProps<NodeProps>(), {
   data: () => {},
   connectable: false,
-  sourcePosition: Position.Bottom,
+  sourcePosition: 'bottom' as Position,
 })
 </script>
 <script lang="ts">
@@ -23,8 +17,7 @@ export default {
 </script>
 <template>
   <slot v-bind="props">
-    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-    <span v-else v-html="props.data?.label"></span>
+    <span v-if="props.label" v-html="props.label" />
   </slot>
   <Handle
     type="source"

src/components/Nodes/NodeWrapper.vue

@@ -172,10 +172,6 @@ export default {
     >
       <slot
         v-bind="{
-          id: node.id,
-          data: node.data,
-          type: node.type,
-          position: node.position,
           selected,
           connectable: props.connectable,
           sourcePosition: node.sourcePosition,
@@ -183,15 +179,28 @@ export default {
           dragging: node.dragging,
           isValidTargetPos: node.isValidTargetPos,
           isValidSourcePos: node.isValidSourcePos,
+          label: node.label,
+          class: node.class,
+          style: node.style,
+          hidden: node.hidden,
+          id: node.id,
+          type: node.type,
+          data: node.data,
+          dragging: node.dragging,
+          handleBounds: node.handleBounds,
+          parentNode: node.parentNode,
+          isParent: node.isParent,
+          computedPosition: node.computedPosition,
+          position: node.position,
+          draggable: props.draggable,
+          selectable: props.selectable,
+          children: node.children,
+          dimensions: node.dimensions,
         }"
       >
         <component
           :is="props.component ?? node.type"
           v-bind="{
-            id: node.id,
-            data: node.data,
-            type: node.type,
-            position: node.position,
             selected,
             connectable: props.connectable,
             sourcePosition: node.sourcePosition,
@@ -199,6 +208,23 @@ export default {
             dragging: node.dragging,
             isValidTargetPos: node.isValidTargetPos,
             isValidSourcePos: node.isValidSourcePos,
+            label: node.label,
+            class: node.class,
+            style: node.style,
+            hidden: node.hidden,
+            id: node.id,
+            type: node.type,
+            data: node.data,
+            dragging: node.dragging,
+            handleBounds: node.handleBounds,
+            parentNode: node.parentNode,
+            isParent: node.isParent,
+            computedPosition: node.computedPosition,
+            position: node.position,
+            draggable: props.draggable,
+            selectable: props.selectable,
+            children: node.children,
+            dimensions: node.dimensions,
           }"
         />
       </slot>

src/components/Nodes/OutputNode.vue

@@ -1,18 +1,12 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position, ValidConnectionFunc } from '../../types'
+import { Position } from '../../types'
+import type { NodeProps } from '../../types/node'
 
-interface OutputNodeProps extends NodeProps {
-  data?: NodeProps['data']
-  connectable?: NodeProps['connectable']
-  targetPosition?: NodeProps['targetPosition']
-  isValidTargetPos?: ValidConnectionFunc
-}
-
-const props = withDefaults(defineProps<OutputNodeProps>(), {
+const props = withDefaults(defineProps<NodeProps>(), {
   data: () => {},
   connectable: false,
-  targetPosition: Position.Top,
+  targetPosition: 'top' as Position,
 })
 </script>
 <script lang="ts">
@@ -23,8 +17,7 @@ export default {
 </script>
 <template>
   <slot v-bind="props">
-    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-    <span v-else v-html="props.data?.label"></span>
+    <span v-if="props.label" v-html="props.label" />
   </slot>
   <Handle
     type="source"