feat(nodes): nested boundaries

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

examples/Nesting/GroupNode.vue

@@ -19,7 +19,6 @@ store.hooks.nodeDragStop.on(({ node }) => {
     node.data.label = `In ${props.id}`
     node.data.group = props.id
   } else if (node.data.group === props.id) {
-    console.log(node)
     node.data.group = undefined
     node.data.label = node.id
   }

examples/Nesting/Nesting.vue

@@ -3,12 +3,17 @@ import GroupNode from './GroupNode.vue'
 import { VueFlow, Elements, Node, Edge, Connection, addEdge } from '~/index'
 
 const elements = ref<Elements<{ label: string; group?: string }>>([
-  { id: 'node-1', data: { label: 'node-1', group: undefined }, position: { x: 250, y: 5 } },
+  {
+    id: 'node-1',
+    data: { label: 'node-1', group: undefined },
+    position: { x: 250, y: 5 },
+    parentNode: 'group-a',
+    extent: 'parent',
+  },
   { id: 'node-2', data: { label: 'node-2', group: undefined }, position: { x: 50, y: 5 } },
   {
     id: 'group-a',
-    type: 'group-a',
+    style: { zIndex: 2, width: '300px', height: '300px' },
-    style: { zIndex: 2 },
     selectable: false,
     data: { label: 'A' },
     position: { x: 50, y: 100 },

src/components/Nodes/NodeWrapper.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
 import { useStore } from '../../composables'
-import { GraphNode, SnapGrid, Draggable, NodeDimensionUpdate } from '../../types'
+import { Draggable, GraphNode, NodeDimensionUpdate, SnapGrid, XYPosition } from '../../types'
 import { NodeId } from '../../context'
-import { clampPosition, getDimensions, getHandleBounds } from '../../utils'
+import { calculateXYZPosition, clampPosition, getDimensions, getHandleBounds, isParentSelected } from '../../utils'
 
 interface NodeWrapperProps {
   node: GraphNode
@@ -24,68 +24,84 @@ provide(NodeId, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 
-const selected = computed(() => props.selectable && store.selectedElements?.some(({ id }) => id === props.node.id))
+const selected = computed(() => props.selectable && store.selectedElements?.some(({ id }) => id === node.value.id))
 
 const onMouseEnterHandler = () =>
-  props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
+  node.value.dragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: node.value }))
 const onMouseMoveHandler = () =>
-  props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
+  node.value.dragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: node.value }))
 const onMouseLeaveHandler = () =>
-  props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
+  node.value.dragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: node.value }))
 const onContextMenuHandler = () => (event: MouseEvent) =>
   store.hooks.nodeContextMenu.trigger({
     event,
-    node: props.node,
+    node: node.value,
   })
-const onDoubleClick = () => (event: MouseEvent) => store.hooks.nodeDoubleClick.trigger({ event, node: props.node })
+const onDoubleClick = () => (event: MouseEvent) => store.hooks.nodeDoubleClick.trigger({ event, node: node.value })
 const onSelectNodeHandler = (event: MouseEvent) => {
   if (!props.draggable) {
     if (props.selectable) {
       store.unsetNodesSelection()
-      if (!selected.value) store.addSelectedElements([props.node])
+      if (!selected.value) store.addSelectedElements([node.value])
     }
-    store.hooks.elementClick.trigger({ event, element: props.node })
+    store.hooks.elementClick.trigger({ event, element: node.value })
-    store.hooks.nodeClick.trigger({ event, node: props.node })
+    store.hooks.nodeClick.trigger({ event, node: node.value })
   }
 }
 const onDragStart: DraggableEventListener = ({ event }) => {
-  store.hooks.nodeDragStart.trigger({ event, node: props.node })
+  store.hooks.nodeDragStart.trigger({ event, node: node.value })
 
   if (props.selectNodesOnDrag && props.selectable) {
     store.unsetNodesSelection()
 
-    if (!selected.value) store.addSelectedElements([props.node])
+    if (!selected.value) store.addSelectedElements([node.value])
   } else if (!props.selectNodesOnDrag && !selected.value && props.selectable) {
     store.unsetNodesSelection()
     store.addSelectedElements([])
   }
 }
-const onDrag: DraggableEventListener = ({ event, data: { deltaY, deltaX } }) => {
+const onDrag: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => {
-  const extent = node.value.extent ?? store.nodeExtent
+  updateNodePosition(node.value, { x: deltaX, y: deltaY })
-  node.value.position = clampPosition(
+  node.value.dragging = true
-    {
+  store.hooks.nodeDrag.trigger({ event, node: node.value })
-      x: (node.value.position.x += deltaX),
-      y: (node.value.position.y += deltaY),
-    },
-    extent,
-  )
-  node.value.__vf.isDragging = true
-  store.hooks.nodeDrag.trigger({ event, node: props.node })
 }
-const onDragStop: DraggableEventListener = ({ event }) => {
+const onDragStop: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => {
-  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.__vf.isDragging) {
+  if (!node.value.dragging) {
     if (props.selectable && !props.selectNodesOnDrag && !selected.value) {
-      store.addSelectedElements([n])
+      store.addSelectedElements([node.value])
     }
-    store.hooks.nodeClick.trigger({ event, node: n })
+    store.hooks.nodeClick.trigger({ event, node: node.value })
-    store.hooks.elementClick.trigger({ event, element: n })
+    store.hooks.elementClick.trigger({ event, element: node.value })
     return
   }
-  node.value.__vf.isDragging = false
+  node.value.dragging = false
-  store.hooks.nodeDragStop.trigger({ event, node: n })
+  store.hooks.nodeDragStop.trigger({ event, node: node.value })
+}
+
+const updateNodePosition = (node: GraphNode, { x, y }: XYPosition) => {
+  const position = {
+    x: node.position.x + x,
+    y: node.position.y + y,
+    z: node.__vf.position.z,
+  }
+
+  let extent = store.nodeExtent
+  if (node.extent === 'parent' && node.parentNode && node.__vf.width && node.__vf.height) {
+    const parent = node.__vf.parentNode
+    extent =
+      parent.__vf.width && parent.__vf.height
+        ? [
+            [0, 0],
+            [parent.__vf.width - node.__vf.width, parent.__vf.height - node.__vf.height],
+          ]
+        : extent
+  }
+  node.position = clampPosition(position, extent)
+  if (node.parentNode || node.__vf.isParent) {
+    node.__vf.position = calculateXYZPosition(node, { z: position.z, ...node.position })
+  } else node.__vf.position = { z: position.z, ...node.position }
 }
 
 const updateNodeDimensions = ({ nodeElement, forceUpdate }: NodeDimensionUpdate) => {
@@ -94,7 +110,7 @@ const updateNodeDimensions = ({ nodeElement, forceUpdate }: NodeDimensionUpdate)
   const doUpdate =
     dimensions.width &&
     dimensions.height &&
-    (props.node.__vf.width !== dimensions.width || props.node.__vf.height !== dimensions.height || forceUpdate)
+    (node.value.__vf.width !== dimensions.width || node.value.__vf.height !== dimensions.height || forceUpdate)
 
   if (doUpdate) {
     const handleBounds = getHandleBounds(nodeElement, store.transform[2], store.id)
@@ -108,9 +124,9 @@ const updateNodeDimensions = ({ nodeElement, forceUpdate }: NodeDimensionUpdate)
 }
 
 tryOnMounted(() => {
-  watch([() => props.node.__vf.width, () => props.node.__vf.height], () => {
+  watch([() => node.value.__vf.width, () => node.value.__vf.height], () => {
     updateNodeDimensions({
-      id: props.node.id,
+      id: node.value.id,
       nodeElement: nodeElement.value,
       forceUpdate: true,
     })
@@ -124,9 +140,9 @@ tryOnMounted(() => {
     }),
   )
 
-  watch([() => props.node.type, () => props.node.sourcePosition, () => props.node.targetPosition], () => {
+  watch([() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition], () => {
     updateNodeDimensions({
-      id: props.node.id,
+      id: node.value.id,
       nodeElement: nodeElement.value,
       forceUpdate: true,
     })
@@ -141,7 +157,7 @@ export default {
 <template>
   <DraggableCore
     cancel=".nodrag"
-    :handle="props.node.dragHandle"
+    :handle="node.dragHandle"
     :disabled="!props.draggable"
     :scale="props.scale"
     :grid="props.snapGrid"
@@ -155,21 +171,22 @@ export default {
       ref="node-element"
       :class="[
         'vue-flow__node',
-        `vue-flow__node-${props.node.type}`,
+        `vue-flow__node-${node.type}`,
         {
+          dragging: node.dragging,
           selected,
           selectable: props.selectable,
         },
-        props.node.class,
+        node.class,
       ]"
       :style="{
-        zIndex: selected ? 10 : 3,
+        zIndex: node.dragging || selected ? 1000 : node.__vf.position.z,
-        transform: `translate(${props.node.position.x}px,${props.node.position.y}px)`,
+        transform: `translate(${node.__vf.position.x}px,${node.__vf.position.y}px)`,
         pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
-        opacity: props.node.__vf.width !== null && props.node.__vf.height !== null ? 1 : 0,
+        opacity: node.__vf.width !== null && node.__vf.height !== null ? 1 : 0,
-        ...props.node.style,
+        ...node.style,
       }"
-      :data-id="props.node.id"
+      :data-id="node.id"
       @mouseenter="onMouseEnterHandler"
       @mousemove="onMouseMoveHandler"
       @mouseleave="onMouseLeaveHandler"
@@ -179,35 +196,35 @@ export default {
     >
       <slot
         v-bind="{
-          id: props.node.id,
+          id: node.id,
-          data: props.node.data,
+          data: node.data,
-          type: props.node.type,
+          type: node.type,
           position: node.position,
-          __vf: props.node.__vf,
+          __vf: node.__vf,
           selected,
           connectable: props.connectable,
-          sourcePosition: props.node.sourcePosition,
+          sourcePosition: node.sourcePosition,
-          targetPosition: props.node.targetPosition,
+          targetPosition: node.targetPosition,
-          dragging: props.node.__vf.isDragging,
+          dragging: node.dragging,
-          isValidTargetPos: props.node.isValidTargetPos,
+          isValidTargetPos: node.isValidTargetPos,
-          isValidSourcePos: props.node.isValidSourcePos,
+          isValidSourcePos: node.isValidSourcePos,
         }"
       >
         <component
-          :is="props.component ?? props.node.type"
+          :is="props.component ?? node.type"
           v-bind="{
-            id: props.node.id,
+            id: node.id,
-            data: props.node.data,
+            data: node.data,
-            type: props.node.type,
+            type: node.type,
             position: node.position,
-            __vf: props.node.__vf,
+            __vf: node.__vf,
             selected,
             connectable: props.connectable,
-            sourcePosition: props.node.sourcePosition,
+            sourcePosition: node.sourcePosition,
-            targetPosition: props.node.targetPosition,
+            targetPosition: node.targetPosition,
-            dragging: props.node.__vf.isDragging,
+            dragging: node.dragging,
-            isValidTargetPos: props.node.isValidTargetPos,
+            isValidTargetPos: node.isValidTargetPos,
-            isValidSourcePos: props.node.isValidSourcePos,
+            isValidSourcePos: node.isValidSourcePos,
           }"
         />
       </slot>

src/store/actions.ts

@@ -1,5 +1,5 @@
 import { Elements, FlowActions, FlowGetters, FlowState } from '~/types'
-import { getConnectedEdges, getNodesInside, getRectOfNodes, parseElements, processElements } from '~/utils'
+import { getConnectedEdges, getNodesInside, getRectOfNodes, isGraphNode, parseElements, processElements } from '~/utils'
 
 export default (state: FlowState, getters: FlowGetters): FlowActions => {
   const setElements: FlowActions['setElements'] = async (elements, force = true) => {
@@ -26,6 +26,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     const startX = state.userSelectionRect.startX
     const startY = state.userSelectionRect.startY
 
+    state.selectedElements?.forEach((el) => isGraphNode(el) && (el.selected = undefined))
     const nextUserSelectRect: FlowState['userSelectionRect'] = {
       ...state.userSelectionRect,
       x: mousePos.x < startX ? mousePos.x : state.userSelectionRect.x,
@@ -37,6 +38,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     const selectedEdges = getConnectedEdges(selectedNodes, getters.getEdges.value)
 
     const nextSelectedElements = [...selectedNodes, ...selectedEdges]
+    nextSelectedElements.forEach((el) => isGraphNode(el) && (el.selected = true))
     state.userSelectionRect = nextUserSelectRect
     state.selectedElements = nextSelectedElements
   }

src/types/flow.ts

@@ -37,6 +37,8 @@ export interface XYPosition {
   y: number
 }
 
+export type XYZPosition = XYPosition & { z: number }
+
 export interface Dimensions {
   width: number
   height: number

src/types/node.ts

@@ -1,17 +1,17 @@
 import { DraggableOptions } from '@braks/revue-draggable'
-import { XYPosition, Position, SnapGrid, Element } from './flow'
+import { XYPosition, Position, SnapGrid, Element, Dimensions, XYZPosition } from './flow'
 import { HandleElement, ValidConnectionFunc } from './components'
 
 export type CoordinateExtent = [[number, number], [number, number]]
 
-export interface VFInternals {
+export interface VFInternals extends Dimensions {
-  isDragging?: boolean
-  width: number
-  height: number
   handleBounds: {
     source?: HandleElement[]
     target?: HandleElement[]
   }
+  parentNode?: any
+  isParent?: boolean
+  position: XYZPosition
 }
 
 export type Draggable = Omit<DraggableOptions, 'scale' | 'grid' | 'enableUserSelectHack' | 'enableTransformFix'> | boolean
@@ -33,6 +33,8 @@ export interface Node<T = any> extends Element<T> {
 
 export interface GraphNode<T = any> extends Node<T> {
   __vf: VFInternals
+  selected?: boolean
+  dragging?: boolean
 }
 
 export interface NodeProps<T = any> extends GraphNode {

src/utils/graph.ts

@@ -1,22 +1,23 @@
 import { getSourceTargetNodes } from './edge'
 import {
-  Node,
-  Edge,
-  Elements,
-  Transform,
-  XYPosition,
-  Rect,
   Box,
   Connection,
-  FlowExportObject,
   CoordinateExtent,
   Dimensions,
-  GraphNode,
+  Edge,
+  Elements,
   FlowElements,
-  GraphEdge,
+  FlowExportObject,
-  NextElements,
-  FlowStore,
   FlowState,
+  FlowStore,
+  GraphEdge,
+  GraphNode,
+  NextElements,
+  Node,
+  Rect,
+  Transform,
+  XYPosition,
+  XYZPosition,
 } from '~/types'
 import { useWindow } from '~/composables'
 
@@ -175,8 +176,12 @@ export const parseNode = (node: Node, nodeExtent: CoordinateExtent): GraphNode =
       source: [],
       target: [],
     },
-    isDragging: false,
+    position: {
+      z: typeof node.style?.zIndex === 'string' ? parseInt(node.style?.zIndex) : node.style?.zIndex ?? 0,
+      ...clampPosition(node.position, nodeExtent),
+    },
   },
+  dragging: false,
   position: clampPosition(node.position, nodeExtent),
 })
 
@@ -249,14 +254,15 @@ export const getNodesInside = (nodes: GraphNode[], rect: Rect, [tx, ty, tScale]:
     if (!node.__vf || node.selectable === false) return false
     const {
       position = { x: 0, y: 0 },
-      __vf: { width = 0, height = 0, isDragging = false },
+      __vf: { width = 0, height = 0 },
+      dragging = false,
     } = node
     const nBox = rectToBox({ ...position, width, height } as any)
     const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x))
     const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y))
     const overlappingArea = Math.ceil(xOverlap * yOverlap)
 
-    if (width === null || height === null || isDragging) {
+    if (width === null || height === null || dragging) {
       // nodes are initialized with width and height = null
       return true
     }
@@ -342,18 +348,10 @@ export const parseElement = (element: Node | Edge, prevElements: FlowElements, n
     if (!isGraphNode(element)) parsed = parseNode(element, nodeExtent)
     else parsed = element
     if (storeNode) {
-      const updatedNode = {
+      parsed = {
         ...storeNode,
         ...parsed,
       } as GraphNode
-
-      if (typeof element.type !== 'undefined' && element.type !== storeNode.type) {
-        // we reset the elements dimensions here in order to force a re-calculation of the bounds.
-        // When the type of a node changes it is possible that the number or positions of handles changes too.
-        updatedNode.__vf.width = 0
-      }
-
-      parsed = updatedNode
     }
   } else if (isEdge(element)) {
     const storeEdge = prevElements[index]
@@ -370,6 +368,15 @@ export const parseElement = (element: Node | Edge, prevElements: FlowElements, n
   return { parsed, index }
 }
 
+export function calculateXYZPosition(node: GraphNode, result: XYZPosition): XYZPosition {
+  if (!node.parentNode) return result
+  return calculateXYZPosition(node.__vf.parentNode, {
+    x: result.x + node.__vf.parentNode.position.x,
+    y: result.y + node.__vf.parentNode.position.y,
+    z: node.__vf.parentNode.__vf.z > node.__vf.position.z ? node.__vf.parentNode.__vf.z + 1 : node.__vf.position.z,
+  })
+}
+
 export const parseElements = (elements: Elements, prevElements: FlowElements, nodeExtent: CoordinateExtent) => {
   const { nodes, edges }: NextElements = {
     nodes: [],
@@ -382,6 +389,19 @@ export const parseElements = (elements: Elements, prevElements: FlowElements, no
       else nodes.push(parsed)
     }
   }
+
+  nodes.forEach((n) => {
+    if (n.parentNode) {
+      const parent = nodes.find((p) => p.id === n.parentNode)
+      if (n.parentNode && !parent) {
+        console.error(`Parent node ${n.parentNode} not found`)
+      } else if (parent) {
+        n.__vf.parentNode = parent
+        parent.__vf.isParent = true
+      }
+    }
+  })
+
   edges.forEach((edge, i, arr) => {
     const { sourceNode, targetNode } = getSourceTargetNodes(edge, nodes)
     if (!sourceNode) console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
@@ -395,3 +415,10 @@ export const parseElements = (elements: Elements, prevElements: FlowElements, no
   })
   return { nodes, edges }
 }
+
+export function isParentSelected(node: GraphNode): boolean {
+  if (!node.parentNode) return false
+  if (!node.__vf.parentNode) return false
+  if (node.__vf.parentNode.selected) return true
+  return isParentSelected(node.__vf.parentNode)
+}

vite.config.ts

@@ -36,6 +36,20 @@ export default defineConfig({
         globals: {
           vue: 'Vue',
         },
+        plugins: [
+          replace({
+            __VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
+            preventAssignment: true,
+          }),
+          copy({
+            targets: [
+              {
+                src: 'src/theme-default.css',
+                dest: 'dist',
+              },
+            ],
+          }),
+        ],
       },
     },
   },
@@ -48,18 +62,6 @@ export default defineConfig({
       imports: ['vue', '@vueuse/core'],
       dts: 'src/auto-imports.d.ts',
     }),
-    replace({
-      __VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
-      preventAssignment: true,
-    }),
-    copy({
-      targets: [
-        {
-          src: 'src/theme-default.css',
-          dest: 'dist',
-        },
-      ],
-    }),
   ],
   optimizeDeps: {
     include: ['vue', '@vueuse/core', '@braks/revue-draggable', 'd3-zoom', 'd3-selection'],