feat(core): allow setting global node extent as range

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

packages/core/src/types/flow.ts

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'vue'
 import type { KeyFilter } from '@vueuse/core'
 import type { DefaultEdgeOptions, Edge, EdgeUpdatable, GraphEdge } from './edge'
-import type { CoordinateExtent, GraphNode, Node } from './node'
+import type { CoordinateExtent, CoordinateExtentRange, GraphNode, Node } from './node'
 import type { Connection, ConnectionLineOptions, ConnectionLineType, ConnectionMode, Connector } from './connection'
 import type { PanOnScrollMode, ViewportTransform } from './zoom'
 import type { EdgeTypesObject, NodeTypesObject } from './components'
@@ -142,7 +142,7 @@ export interface FlowProps {
   maxZoom?: number
   defaultViewport?: ViewportTransform
   translateExtent?: CoordinateExtent
-  nodeExtent?: CoordinateExtent
+  nodeExtent?: CoordinateExtent | CoordinateExtentRange
   defaultMarkerColor?: string
   zoomOnScroll?: boolean
   zoomOnPinch?: boolean

packages/core/src/types/node.ts

@@ -7,8 +7,7 @@ import type { CustomEvent, NodeEventsHandler, NodeEventsOn } from './hooks'
 /** Defined as [[x-from, y-from], [x-to, y-to]] **/
 export type CoordinateExtent = [extentFrom: [fromX: number, fromY: number], extentTo: [toX: number, toY: number]]
 
-export interface ExtendedParentExtent {
-  // todo: can we allow more ranges?
+export interface CoordinateExtentRange {
   range: 'parent' | CoordinateExtent
   /** Values are top, right, bottom, left, you can use these the same as CSS padding */
   padding:
@@ -59,7 +58,7 @@ export interface Node<Data = ElementData, CustomEvents extends Record<string, Cu
   /** called when used as source for new connection */
   isValidSourcePos?: ValidConnectionFunc
   /** define node extent, i.e. area in which node can be moved */
-  extent?: CoordinateExtent | ExtendedParentExtent | 'parent'
+  extent?: CoordinateExtent | CoordinateExtentRange | 'parent'
   /** expands parent area to fit child node */
   expandParent?: boolean
   /** define node as a child node by setting a parent node id */

packages/core/src/types/store.ts

@@ -23,7 +23,7 @@ import type {
   Connector,
 } from './connection'
 import type { DefaultEdgeOptions, Edge, EdgeUpdatable, GraphEdge } from './edge'
-import type { CoordinateExtent, GraphNode, Node } from './node'
+import type { CoordinateExtent, CoordinateExtentRange, GraphNode, Node } from './node'
 import type { D3Selection, D3Zoom, D3ZoomHandler, PanOnScrollMode, ViewportFunctions, ViewportTransform } from './zoom'
 import type { CustomEvent, FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
 import type { EdgeChange, NodeChange, NodeDragItem } from './changes'
@@ -60,7 +60,7 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   defaultViewport: ViewportTransform
   /** use setTranslateExtent action to change translateExtent */
   translateExtent: CoordinateExtent
-  nodeExtent: CoordinateExtent
+  nodeExtent: CoordinateExtent | CoordinateExtentRange
 
   /** viewport dimensions - do not change! */
   readonly dimensions: Dimensions

packages/core/src/utils/drag.ts

@@ -1,5 +1,5 @@
 import { isNumber } from '@vueuse/shared'
-import type { Actions, CoordinateExtent, ExtendedParentExtent, GraphNode, NodeDragItem, State, XYPosition } from '~/types'
+import type { Actions, CoordinateExtent, CoordinateExtentRange, GraphNode, NodeDragItem, State, XYPosition } from '~/types'
 
 export function hasSelector(target: Element, selector: string, node: Element): boolean {
   let current = target
@@ -75,7 +75,7 @@ function getExtentPadding(padding: number[]) {
 }
 
 function getParentExtent(
-  currentExtent: ExtendedParentExtent | 'parent',
+  currentExtent: CoordinateExtentRange | 'parent',
   node: GraphNode | NodeDragItem,
   parent: GraphNode,
 ): CoordinateExtent | false {
@@ -108,9 +108,9 @@ export function getExtent<T extends NodeDragItem | GraphNode>(
 ) {
   let currentExtent = item.extent || extent
 
-  if (item.extent === 'parent' || (!Array.isArray(item.extent) && item.extent?.range === 'parent')) {
+  if (currentExtent === 'parent' || (!Array.isArray(currentExtent) && currentExtent?.range === 'parent')) {
     if (item.parentNode && parent && item.dimensions.width && item.dimensions.height) {
-      const parentExtent = getParentExtent(item.extent, item, parent)
+      const parentExtent = getParentExtent(currentExtent, item, parent)
 
       if (parentExtent) {
         currentExtent = parentExtent
@@ -120,23 +120,23 @@ export function getExtent<T extends NodeDragItem | GraphNode>(
 
       currentExtent = extent
     }
-  } else if (Array.isArray(item.extent) && item.extent) {
+  } else if (Array.isArray(currentExtent) && currentExtent) {
     const parentX = parent?.computedPosition.x || 0
     const parentY = parent?.computedPosition.y || 0
 
     currentExtent = [
-      [item.extent[0][0] + parentX, item.extent[0][1] + parentY],
-      [item.extent[1][0] + parentX, item.extent[1][1] + parentY],
+      [currentExtent[0][0] + parentX, currentExtent[0][1] + parentY],
+      [currentExtent[1][0] + parentX, currentExtent[1][1] + parentY],
     ]
-  } else if (item.extent?.range && Array.isArray(item.extent.range)) {
-    const [top, right, bottom, left] = getExtentPadding(item.extent.padding)
+  } else if (currentExtent?.range && Array.isArray(currentExtent.range)) {
+    const [top, right, bottom, left] = getExtentPadding(currentExtent.padding)
 
     const parentX = parent?.computedPosition.x || 0
     const parentY = parent?.computedPosition.y || 0
 
     currentExtent = [
-      [item.extent.range[0][0] + parentX + left, item.extent.range[0][1] + parentY + top],
-      [item.extent.range[1][0] + parentX - right, item.extent.range[1][1] + parentY - bottom],
+      [currentExtent.range[0][0] + parentX + left, currentExtent.range[0][1] + parentY + top],
+      [currentExtent.range[1][0] + parentX - right, currentExtent.range[1][1] + parentY - bottom],
     ]
   }