feat: script setup style

* Add Node.vue

src/components/Node.vue

@@ -0,0 +1,192 @@
+<script lang="ts" setup>
+import { computed, inject, onMounted, provide } from 'vue'
+import { DraggableEventListener } from '@braks/revue-draggable'
+import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
+import { Node, RevueFlowStore, NodeDimensionUpdate } from '~/types'
+
+interface NodeProps {
+  node: Node
+  snapToGrid?: boolean
+  snapGrid?: [number, number]
+  scale?: number
+  selectNodesOnDrag: boolean
+}
+
+const props = withDefaults(defineProps<NodeProps>(), {
+  selectNodesOnDrag: true,
+  scale: 1,
+})
+const emit = defineEmits(['updateNodeDimensions'])
+
+const store = inject<RevueFlowStore>('store')!
+const hooks = inject<RevueFlowHooks>('hooks')!
+provide('NodeIdContext', props.node.id)
+
+const nodeElement = templateRef<HTMLDivElement>('nodeElement', null)
+
+const selected = computed(() => store.selectedElements?.some(({ id }) => id === props.node.id) || false)
+const isDraggable = computed(() => props.node.draggable || (store.nodesDraggable && typeof props.node.draggable === 'undefined'))
+const isSelectable = computed(
+  () => props.node.selectable || (store.elementsSelectable && typeof props.node.selectable === 'undefined'),
+)
+const isConnectable = computed(
+  () => props.node.connectable || (store.nodesConnectable && typeof props.node.connectable === 'undefined'),
+)
+
+const onMouseEnterHandler = () => {
+  if (props.node.__rf.isDragging) {
+    return
+  }
+
+  return (event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node })
+}
+
+const onMouseMoveHandler = () => {
+  if (props.node.__rf.isDragging) {
+    return
+  }
+
+  return (event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node })
+}
+
+const onMouseLeaveHandler = () => {
+  if (props.node.__rf.isDragging) {
+    return
+  }
+
+  return (event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node })
+}
+
+const onContextMenuHandler = () => {
+  return (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
+}
+
+const onSelectNodeHandler = (event: MouseEvent) => {
+  if (!isDraggable.value) {
+    const n = props.node
+    if (isSelectable.value) {
+      store.unsetNodesSelection()
+
+      if (!selected.value) {
+        store.addSelectedElements([n])
+      }
+    }
+
+    hooks.nodeClick.trigger({ event, node: n })
+  }
+}
+
+const onDragStart: DraggableEventListener = ({ event }) => {
+  const n = props.node
+  hooks.nodeDragStart.trigger({ event, node: n })
+
+  if (props.selectNodesOnDrag && isSelectable.value) {
+    store.unsetNodesSelection()
+
+    if (!selected.value) {
+      store.addSelectedElements([n])
+    }
+  } else if (!props.selectNodesOnDrag && !selected.value && isSelectable.value) {
+    store.unsetNodesSelection()
+    store.addSelectedElements([])
+  }
+}
+
+const onDrag: DraggableEventListener = ({ event, data }) => {
+  const n = props.node
+  n.position.x += data.deltaX
+  n.position.y += data.deltaY
+  hooks.nodeDrag.trigger({ event, node: n })
+
+  store?.updateNodePosDiff({
+    id: props.node.id as string,
+    diff: {
+      x: data.deltaX,
+      y: data.deltaY,
+    },
+    isDragging: true,
+  })
+}
+
+const onDragStop: DraggableEventListener = ({ event }) => {
+  const n = props.node
+  // onDragStop also gets called when user just clicks on a node.
+  // Because of that we set dragging to true inside the onDrag handler and handle the click here
+  if (!props.node.__rf.isDragging) {
+    if (isSelectable.value && !props.selectNodesOnDrag && !selected.value) {
+      store.addSelectedElements([n])
+    }
+
+    hooks.nodeClick.trigger({ event, node: n })
+
+    return
+  }
+
+  store.updateNodePosDiff({
+    id: n.id,
+    isDragging: false,
+  })
+
+  hooks.nodeDragStop.trigger({ event, node: n })
+}
+
+useResizeObserver(nodeElement, (entries) => {
+  const updates: NodeDimensionUpdate[] = entries.map((entry) => ({
+    id: entry.target.getAttribute('data-id') as string,
+    nodeElement: entry.target as HTMLDivElement,
+  }))
+
+  emit('updateNodeDimensions', updates)
+})
+
+onMounted(() => {
+  emit('updateNodeDimensions', [
+    {
+      id: props.node.id,
+      nodeElement: nodeElement.value,
+      forceUpdate: true,
+    },
+  ])
+})
+</script>
+
+<template>
+  <DraggableCore
+    v-if="!props.node.isHidden"
+    cancel=".nodrag"
+    :scale="props.scale"
+    :disabled="!isDraggable"
+    :grid="props.snapGrid"
+    :enable-user-select-hack="false"
+    @start="onDragStart"
+    @move="onDrag"
+    @stop="onDragStop"
+  >
+    <div
+      ref="nodeElement"
+      :class="[
+        'revue-flow__node',
+        `revue-flow__node-${props.node.type}`,
+        {
+          selected: selected,
+          selectable: isSelectable,
+        },
+      ]"
+      :style="{
+        zIndex: selected ? 10 : 3,
+        transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
+        pointerEvents: isSelectable || isDraggable ? 'all' : 'none',
+        opacity: props.node.__rf.width !== null && props.node.__rf.height !== null ? 1 : 0,
+        ...props.node.style,
+      }"
+      :data-id="props.node.id"
+      @mouseenter="onMouseEnterHandler"
+      @mousemove="onMouseMoveHandler"
+      @mouseleave="onMouseLeaveHandler"
+      @contextmenu="onContextMenuHandler"
+      @click="onSelectNodeHandler"
+    >
+      <slot :selected="selected" :isConnectable="isConnectable"></slot>
+    </div>
+  </DraggableCore>
+</template>

src/components/Nodes/utils.ts

@@ -1,20 +1,11 @@
-import { HandleElement, Position } from '../../types'
+import { HandleElement, Position } from '~/types'
-import { getDimensions } from '../../utils'
+import { getDimensions } from '~/utils'
-
-export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
-  const bounds = nodeElement.getBoundingClientRect()
-
-  return {
-    source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
-    target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale)
-  }
-}
 
 export const getHandleBoundsByHandleType = (
   selector: string,
   nodeElement: HTMLDivElement,
   parentBounds: ClientRect | DOMRect,
-  k: number
+  k: number,
 ): HandleElement[] | null => {
   const handles = nodeElement.querySelectorAll(selector)
 
@@ -35,7 +26,16 @@ export const getHandleBoundsByHandleType = (
       position: handlePosition,
       x: (bounds.left - parentBounds.left) / k,
       y: (bounds.top - parentBounds.top) / k,
-      ...dimensions
+      ...dimensions,
     }
   })
 }
+
+export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
+  const bounds = nodeElement.getBoundingClientRect()
+
+  return {
+    source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
+    target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale),
+  }
+}

src/composables/useZoom.ts

@@ -6,7 +6,7 @@ import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
 import { clamp } from '~/utils'
 import useKeyPress from '~/hooks/useKeyPress'
 import useZoomPanHelper from '~/hooks/useZoomPanHelper'
-import { onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils/graph'
+// import { onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils/graph'
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
   prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k

src/container/NodeRenderer.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import Node from '~/components/Nodes/Node'
+import Node from '~/components/Node.vue'
-import { NodeType, Node as TNode, Transform, Dimensions } from '~/types'
+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
-    const type = props.nodeTypes[nodeType] || props.nodeTypes.default
+  if (!props.nodeTypes[nodeType]) {
-    if (!props.nodeTypes[nodeType]) {
+    console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`)
-      console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`)
-    }
-    return type
   }
-  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>