feat(core): allow coordinate extent as range

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

packages/core/src/types/node.ts

@@ -4,9 +4,12 @@ import type { DefaultNodeTypes, NodeComponent } from './components'
 import type { HandleConnectable, HandleElement, ValidConnectionFunc } from './handle'
 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?
-  range: 'parent'
+  range: 'parent' | CoordinateExtent
   /** Values are top, right, bottom, left, you can use these the same as CSS padding */
   padding:
     | [padding: number]
@@ -15,9 +18,6 @@ export interface ExtendedParentExtent {
     | [paddingTop: number, paddingRight: number, paddingBottom: number, paddingLeft: number]
 }
 
-/** 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 NodeHandleBounds {
   source?: HandleElement[]
   target?: HandleElement[]

packages/core/src/utils/drag.ts

@@ -128,6 +128,16 @@ export function getExtent<T extends NodeDragItem | GraphNode>(
       [item.extent[0][0] + parentX, item.extent[0][1] + parentY],
       [item.extent[1][0] + parentX, item.extent[1][1] + parentY],
     ]
+  } else if (item.extent?.range && Array.isArray(item.extent.range)) {
+    const [top, right, bottom, left] = getExtentPadding(item.extent.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],
+    ]
   }
 
   return currentExtent as CoordinateExtent