From 717d8e0d43e9dbcadcb2201b7cc73df92f670840 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sat, 8 Apr 2023 10:52:58 +0200 Subject: [PATCH] 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 | 4 ++-- packages/core/src/types/node.ts | 5 ++--- packages/core/src/types/store.ts | 4 ++-- packages/core/src/utils/drag.ts | 22 +++++++++++----------- 4 files changed, 17 insertions(+), 18 deletions(-) diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts index 450ffb74..014c1e31 100644 --- a/packages/core/src/types/flow.ts +++ b/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 diff --git a/packages/core/src/types/node.ts b/packages/core/src/types/node.ts index 38053135..4b40685b 100644 --- a/packages/core/src/types/node.ts +++ b/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 { defaultViewport: ViewportTransform /** use setTranslateExtent action to change translateExtent */ translateExtent: CoordinateExtent - nodeExtent: CoordinateExtent + nodeExtent: CoordinateExtent | CoordinateExtentRange /** viewport dimensions - do not change! */ readonly dimensions: Dimensions diff --git a/packages/core/src/utils/drag.ts b/packages/core/src/utils/drag.ts index c1f3ad4d..60bb6d7a 100644 --- a/packages/core/src/utils/drag.ts +++ b/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( ) { 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( 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], ] }