feat: implement workspaces
This commit is contained in:
Braks
@@ -0,0 +1,188 @@
|
||||
import { clampPosition, isGraphNode } from './graph'
|
||||
import {
|
||||
EdgeChange,
|
||||
EdgeSelectionChange,
|
||||
ElementChange,
|
||||
FlowElement,
|
||||
FlowElements,
|
||||
GraphNode,
|
||||
NodeChange,
|
||||
NodeSelectionChange,
|
||||
NodePositionChange,
|
||||
Getters,
|
||||
CoordinateExtent,
|
||||
XYPosition,
|
||||
} from '~/types'
|
||||
|
||||
type CreatePositionChangeParams = {
|
||||
node: GraphNode
|
||||
nodeExtent: CoordinateExtent
|
||||
diff?: XYPosition
|
||||
dragging?: boolean
|
||||
}
|
||||
|
||||
function handleParentExpand(updateItem: GraphNode, getNode: Getters['getNode']) {
|
||||
const parent = updateItem.parentNode ? getNode(updateItem.parentNode) : undefined
|
||||
if (parent) {
|
||||
const extendWidth = updateItem.position.x + updateItem.dimensions.width - parent.dimensions.width
|
||||
const extendHeight = updateItem.position.y + updateItem.dimensions.height - parent.dimensions.height
|
||||
|
||||
if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
|
||||
parent.style = { ...parent.style } || {}
|
||||
|
||||
if (extendWidth > 0) {
|
||||
if (!parent.style.width) {
|
||||
parent.style.width = parent.dimensions.width
|
||||
}
|
||||
if (typeof parent.style.width === 'string') {
|
||||
const currWidth = parseInt(parent.style.width, 10)
|
||||
parent.style.width = `${currWidth + extendWidth}px`
|
||||
} else {
|
||||
parent.style.width += extendWidth
|
||||
}
|
||||
}
|
||||
|
||||
if (extendHeight > 0) {
|
||||
if (!parent.style.height) {
|
||||
parent.style.height = parent.dimensions.height
|
||||
}
|
||||
if (typeof parent.style.height === 'string') {
|
||||
const currWidth = parseInt(parent.style.height, 10)
|
||||
parent.style.height = `${currWidth + extendHeight}px`
|
||||
} else {
|
||||
parent.style.height += extendHeight
|
||||
}
|
||||
}
|
||||
|
||||
if (updateItem.position.x < 0) {
|
||||
const xDiff = Math.abs(updateItem.position.x)
|
||||
parent.position.x = parent.position.x - xDiff
|
||||
if (typeof parent.style.width === 'string') {
|
||||
const currWidth = parseInt(parent.style.width, 10)
|
||||
parent.style.width = `${currWidth + xDiff}px`
|
||||
} else {
|
||||
;(parent.style as any).width += xDiff
|
||||
}
|
||||
updateItem.position.x = 0
|
||||
}
|
||||
|
||||
if (updateItem.position.y < 0) {
|
||||
const yDiff = Math.abs(updateItem.position.y)
|
||||
parent.position.y = parent.position.y - yDiff
|
||||
if (typeof parent.style.height === 'string') {
|
||||
const currWidth = parseInt(parent.style.height, 10)
|
||||
parent.style.height = `${currWidth + yDiff}px`
|
||||
} else {
|
||||
;(parent.style as any).height += yDiff
|
||||
}
|
||||
updateItem.position.y = 0
|
||||
}
|
||||
|
||||
parent.dimensions.width = (
|
||||
typeof parent.style.width === 'string' ? parseInt((<string>parent.style.width)!, 10) : parent.style.width
|
||||
)!
|
||||
parent.dimensions.height = (
|
||||
typeof parent.style.height === 'string' ? parseInt((<string>parent.style.height)!, 10) : parent.style.height
|
||||
)!
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const applyChanges = <
|
||||
T extends FlowElement = GraphNode,
|
||||
C extends ElementChange = T extends GraphNode ? NodeChange : EdgeChange,
|
||||
>(
|
||||
changes: C[],
|
||||
elements: T[],
|
||||
getNode: Getters['getNode'],
|
||||
): T[] => {
|
||||
let elementIds = elements.map((el) => el.id)
|
||||
changes.forEach((change) => {
|
||||
if (change.type === 'add') return elements.push(change.item as any)
|
||||
const i = elementIds.indexOf((<any>change).id)
|
||||
const el = elements[i]
|
||||
switch (change.type) {
|
||||
case 'select':
|
||||
el.selected = change.selected
|
||||
break
|
||||
case 'position':
|
||||
if (isGraphNode(el)) {
|
||||
if (typeof change.position !== 'undefined') el.position = change.position
|
||||
if (typeof change.dragging !== 'undefined') el.dragging = change.dragging
|
||||
if (el.expandParent && el.parentNode) handleParentExpand(el, getNode)
|
||||
}
|
||||
break
|
||||
case 'dimensions':
|
||||
if (isGraphNode(el)) {
|
||||
if (typeof change.dimensions !== 'undefined') el.dimensions = change.dimensions
|
||||
if (el.expandParent && el.parentNode) handleParentExpand(el, getNode)
|
||||
}
|
||||
break
|
||||
case 'remove':
|
||||
elements.splice(i, 1)
|
||||
elementIds = elements.map((el) => el.id)
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
return elements
|
||||
}
|
||||
|
||||
export const createSelectionChange = (id: string, selected: boolean): NodeSelectionChange | EdgeSelectionChange => ({
|
||||
id,
|
||||
type: 'select',
|
||||
selected,
|
||||
})
|
||||
|
||||
export const createPositionChange = (
|
||||
{ node, diff, dragging, nodeExtent }: CreatePositionChangeParams,
|
||||
getNode: Getters['getNode'],
|
||||
): NodePositionChange => {
|
||||
const parent = node.parentNode ? getNode(node.parentNode) : undefined
|
||||
const change: NodePositionChange = {
|
||||
id: node.id,
|
||||
type: 'position',
|
||||
dragging: !!dragging,
|
||||
}
|
||||
|
||||
if (diff) {
|
||||
const nextPosition = { x: node.position.x + diff.x, y: node.position.y + diff.y }
|
||||
let currentExtent = nodeExtent || node.extent
|
||||
|
||||
if (node.extent === 'parent' && parent && node.dimensions.width && node.dimensions.height) {
|
||||
currentExtent =
|
||||
parent.dimensions.width && parent.dimensions.height
|
||||
? [
|
||||
[0, 0],
|
||||
[parent.dimensions.width - node.dimensions.width, parent.dimensions.height - node.dimensions.height],
|
||||
]
|
||||
: currentExtent
|
||||
}
|
||||
|
||||
change.position = currentExtent ? clampPosition(nextPosition, currentExtent) : nextPosition
|
||||
}
|
||||
|
||||
return change
|
||||
}
|
||||
|
||||
const isParentSelected = (node: GraphNode, selectedIds: string[], getNode: Getters['getNode']): boolean => {
|
||||
const parent = node.parentNode ? getNode(node.parentNode) : undefined
|
||||
if (!node.parentNode || !parent) return false
|
||||
if (selectedIds.includes(node.parentNode)) return true
|
||||
return isParentSelected(parent, selectedIds, getNode)
|
||||
}
|
||||
|
||||
export const getSelectionChanges = (items: FlowElements, selectedIds: string[], getNode: Getters['getNode']) => {
|
||||
return items.reduce((res, item) => {
|
||||
const willBeSelected =
|
||||
selectedIds.includes(item.id) || !!(isGraphNode(item) && item.parentNode && isParentSelected(item, selectedIds, getNode))
|
||||
|
||||
if (!item.selected && willBeSelected) {
|
||||
res.push(createSelectionChange(item.id, true))
|
||||
} else if (item.selected && !willBeSelected) {
|
||||
res.push(createSelectionChange(item.id, false))
|
||||
}
|
||||
|
||||
return res
|
||||
}, [] as (NodeSelectionChange | EdgeSelectionChange)[])
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
import { rectToBox } from './graph'
|
||||
import { EdgePositions, GraphEdge, GraphNode, HandleElement, Position, Rect, Transform, XYPosition } from '~/types'
|
||||
|
||||
export const getHandlePosition = (position: Position, rect: Rect, handle?: HandleElement): XYPosition => {
|
||||
const x = (handle?.x ?? 0) + rect.x
|
||||
const y = (handle?.y ?? 0) + rect.y
|
||||
const width = handle?.width ?? rect.width
|
||||
const height = handle?.height ?? rect.height
|
||||
|
||||
switch (position) {
|
||||
case Position.Top:
|
||||
return {
|
||||
x: x + width / 2,
|
||||
y,
|
||||
}
|
||||
case Position.Right:
|
||||
return {
|
||||
x: x + width,
|
||||
y: y + height / 2,
|
||||
}
|
||||
case Position.Bottom:
|
||||
return {
|
||||
x: x + width / 2,
|
||||
y: y + height,
|
||||
}
|
||||
case Position.Left:
|
||||
return {
|
||||
x,
|
||||
y: y + height / 2,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const getHandle = (bounds: HandleElement[] = [], handleId?: string | null): HandleElement | undefined => {
|
||||
if (!bounds.length) return undefined
|
||||
|
||||
// there is no handleId when there are no multiple handles/ handles with ids
|
||||
// so we just pick the first one
|
||||
let handle
|
||||
if (bounds.length === 1 ?? !handleId) handle = bounds[0]
|
||||
else if (handleId) handle = bounds.find((d) => d.id === handleId)
|
||||
|
||||
return handle
|
||||
}
|
||||
|
||||
export const getEdgePositions = (
|
||||
sourceNode: GraphNode,
|
||||
sourceHandle: HandleElement | undefined,
|
||||
sourcePosition: Position,
|
||||
targetNode: GraphNode,
|
||||
targetHandle: HandleElement | undefined,
|
||||
targetPosition: Position,
|
||||
): EdgePositions => {
|
||||
const sourceHandlePos = getHandlePosition(
|
||||
sourcePosition,
|
||||
{
|
||||
...sourceNode.dimensions,
|
||||
...sourceNode.computedPosition,
|
||||
},
|
||||
sourceHandle,
|
||||
)
|
||||
const targetHandlePos = getHandlePosition(
|
||||
targetPosition,
|
||||
{
|
||||
...targetNode.dimensions,
|
||||
...targetNode.computedPosition,
|
||||
},
|
||||
targetHandle,
|
||||
)
|
||||
|
||||
return {
|
||||
sourceX: sourceHandlePos.x,
|
||||
sourceY: sourceHandlePos.y,
|
||||
targetX: targetHandlePos.x,
|
||||
targetY: targetHandlePos.y,
|
||||
}
|
||||
}
|
||||
|
||||
interface IsEdgeVisibleParams {
|
||||
sourcePos: XYPosition
|
||||
targetPos: XYPosition
|
||||
sourceWidth: number
|
||||
sourceHeight: number
|
||||
targetWidth: number
|
||||
targetHeight: number
|
||||
width: number
|
||||
height: number
|
||||
transform: Transform
|
||||
}
|
||||
|
||||
export function isEdgeVisible({
|
||||
sourcePos,
|
||||
targetPos,
|
||||
sourceWidth,
|
||||
sourceHeight,
|
||||
targetWidth,
|
||||
targetHeight,
|
||||
width,
|
||||
height,
|
||||
transform,
|
||||
}: IsEdgeVisibleParams): boolean {
|
||||
const edgeBox = {
|
||||
x: Math.min(sourcePos.x, targetPos.x),
|
||||
y: Math.min(sourcePos.y, targetPos.y),
|
||||
x2: Math.max(sourcePos.x + sourceWidth, targetPos.x + targetWidth),
|
||||
y2: Math.max(sourcePos.y + sourceHeight, targetPos.y + targetHeight),
|
||||
}
|
||||
|
||||
if (edgeBox.x === edgeBox.x2) {
|
||||
edgeBox.x2 += 1
|
||||
}
|
||||
|
||||
if (edgeBox.y === edgeBox.y2) {
|
||||
edgeBox.y2 += 1
|
||||
}
|
||||
|
||||
const viewBox = rectToBox({
|
||||
x: (0 - transform[0]) / transform[2],
|
||||
y: (0 - transform[1]) / transform[2],
|
||||
width: width / transform[2],
|
||||
height: height / transform[2],
|
||||
})
|
||||
|
||||
const xOverlap = Math.max(0, Math.min(viewBox.x2, edgeBox.x2) - Math.max(viewBox.x, edgeBox.x))
|
||||
const yOverlap = Math.max(0, Math.min(viewBox.y2, edgeBox.y2) - Math.max(viewBox.y, edgeBox.y))
|
||||
const overlappingArea = Math.ceil(xOverlap * yOverlap)
|
||||
|
||||
return overlappingArea > 0
|
||||
}
|
||||
|
||||
export const groupEdgesByZLevel = (edges: GraphEdge[], nodes: GraphNode[]) => {
|
||||
let maxLevel = -1
|
||||
const nodeIds = nodes.map((n) => n.id)
|
||||
|
||||
const levelLookup = edges.reduce<Record<string, GraphEdge[]>>((tree, edge) => {
|
||||
const z = edge.z
|
||||
? edge.z
|
||||
: Math.max(
|
||||
nodes[nodeIds.indexOf(edge.source)]?.computedPosition.z || 0,
|
||||
nodes[nodeIds.indexOf(edge.target)]?.computedPosition.z || 0,
|
||||
)
|
||||
if (tree[z]) {
|
||||
tree[z].push(edge)
|
||||
} else {
|
||||
tree[z] = [edge]
|
||||
}
|
||||
|
||||
maxLevel = z > maxLevel ? z : maxLevel
|
||||
|
||||
return tree
|
||||
}, {})
|
||||
|
||||
return Object.entries(Object.keys(levelLookup).length ? levelLookup : { 0: [] }).map(([key, edges]) => {
|
||||
const level = +key
|
||||
|
||||
return {
|
||||
edges,
|
||||
level,
|
||||
isMaxLevel: level === maxLevel,
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,354 @@
|
||||
import {
|
||||
Box,
|
||||
Connection,
|
||||
CoordinateExtent,
|
||||
Dimensions,
|
||||
Edge,
|
||||
EdgeMarkerType,
|
||||
Elements,
|
||||
FlowElements,
|
||||
FlowExportObject,
|
||||
State,
|
||||
FlowStore,
|
||||
GraphEdge,
|
||||
GraphNode,
|
||||
Node,
|
||||
Rect,
|
||||
Transform,
|
||||
XYPosition,
|
||||
XYZPosition,
|
||||
Getters,
|
||||
} from '~/types'
|
||||
import { useWindow } from '~/composables'
|
||||
|
||||
const isHTMLElement = (el: EventTarget): el is HTMLElement => ('nodeName' || 'hasAttribute') in el
|
||||
|
||||
export const isInputDOMNode = (e: KeyboardEvent | MouseEvent): boolean => {
|
||||
const target = e.target
|
||||
if (target && isHTMLElement(target)) {
|
||||
return ['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON'].includes(target.nodeName) || target.hasAttribute('contentEditable')
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
export const getDimensions = (node: HTMLElement): Dimensions => ({
|
||||
width: node.offsetWidth,
|
||||
height: node.offsetHeight,
|
||||
})
|
||||
|
||||
export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max)
|
||||
|
||||
export const clampPosition = (position: XYPosition, extent: CoordinateExtent): XYPosition => ({
|
||||
x: clamp(position.x, extent[0][0], extent[1][0]),
|
||||
y: clamp(position.y, extent[0][1], extent[1][1]),
|
||||
})
|
||||
|
||||
export const getHostForElement = (element: HTMLElement): Document => {
|
||||
const doc = element.getRootNode() as Document
|
||||
const window = useWindow()
|
||||
|
||||
if ('getElementFromPoint' in doc) return doc
|
||||
else return window.document
|
||||
}
|
||||
|
||||
export const isEdge = (element: Node | Edge | Connection): element is Edge =>
|
||||
'id' in element && 'source' in element && 'target' in element
|
||||
export const isGraphEdge = (element: any): element is GraphEdge =>
|
||||
isEdge(element) && 'sourceNode' in element && 'targetNode' in element
|
||||
|
||||
export const isNode = (element: Node | Edge | Connection): element is Node => 'id' in element && !isEdge(element)
|
||||
export const isGraphNode = (element: Node | Edge | Connection): element is GraphNode =>
|
||||
isNode(element) && 'computedPosition' in element
|
||||
|
||||
export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: Partial<GraphNode>): GraphNode => {
|
||||
defaults = !isGraphNode(node)
|
||||
? {
|
||||
type: node.type ?? 'default',
|
||||
dimensions: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
},
|
||||
handleBounds: {
|
||||
source: [],
|
||||
target: [],
|
||||
},
|
||||
computedPosition: {
|
||||
z: typeof node.style?.zIndex === 'string' ? parseInt(node.style?.zIndex as string) : node.style?.zIndex ?? 0,
|
||||
...clampPosition(node.position, nodeExtent),
|
||||
},
|
||||
dragging: false,
|
||||
draggable: undefined,
|
||||
selectable: undefined,
|
||||
connectable: undefined,
|
||||
...defaults,
|
||||
}
|
||||
: defaults
|
||||
|
||||
return {
|
||||
...(defaults as GraphNode),
|
||||
...node,
|
||||
id: node.id.toString(),
|
||||
}
|
||||
}
|
||||
|
||||
export const parseEdge = (edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge => {
|
||||
defaults = !isGraphEdge(edge)
|
||||
? {
|
||||
sourceHandle: edge.sourceHandle ? edge.sourceHandle.toString() : undefined,
|
||||
targetHandle: edge.targetHandle ? edge.targetHandle.toString() : undefined,
|
||||
type: edge.type ?? 'default',
|
||||
source: edge.source.toString(),
|
||||
target: edge.target.toString(),
|
||||
z: typeof edge.style?.zIndex === 'string' ? parseInt(edge.style?.zIndex as string) : edge.style?.zIndex ?? 0,
|
||||
sourceX: 0,
|
||||
sourceY: 0,
|
||||
targetX: 0,
|
||||
targetY: 0,
|
||||
updatable: undefined,
|
||||
selectable: undefined,
|
||||
...defaults,
|
||||
}
|
||||
: defaults
|
||||
|
||||
return {
|
||||
...(defaults as GraphEdge),
|
||||
...edge,
|
||||
id: edge.id.toString(),
|
||||
}
|
||||
}
|
||||
|
||||
const getConnectedElements = (node: GraphNode, elements: Elements, dir: 'source' | 'target') => {
|
||||
if (!isNode(node)) return []
|
||||
const ids = elements.filter((e) => isEdge(e) && e.source === node.id).map((e) => isEdge(e) && e[dir])
|
||||
return elements.filter((e) => ids.includes(e.id))
|
||||
}
|
||||
export const getOutgoers = (node: GraphNode, elements: Elements) => getConnectedElements(node, elements, 'target')
|
||||
|
||||
export const getIncomers = (node: GraphNode, elements: Elements) => getConnectedElements(node, elements, 'source')
|
||||
|
||||
export const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection) =>
|
||||
`vueflow__edge-${source}${sourceHandle ?? ''}-${target}${targetHandle ?? ''}`
|
||||
|
||||
export const connectionExists = (edge: Edge, elements: Elements) =>
|
||||
elements.some(
|
||||
(el) =>
|
||||
isEdge(el) &&
|
||||
el.source === edge.source &&
|
||||
el.target === edge.target &&
|
||||
(el.sourceHandle === edge.sourceHandle || (!el.sourceHandle && !edge.sourceHandle)) &&
|
||||
(el.targetHandle === edge.targetHandle || (!el.targetHandle && !edge.targetHandle)),
|
||||
)
|
||||
|
||||
export const addEdge = (edgeParams: Edge | Connection, elements: Elements) => {
|
||||
if (!edgeParams.source || !edgeParams.target) {
|
||||
console.warn("Can't create edge. An edge needs a source and a target.")
|
||||
return elements
|
||||
}
|
||||
|
||||
let edge
|
||||
if (isEdge(edgeParams)) {
|
||||
edge = { ...edgeParams }
|
||||
} else {
|
||||
edge = {
|
||||
...edgeParams,
|
||||
id: getEdgeId(edgeParams),
|
||||
} as Edge
|
||||
}
|
||||
edge = parseEdge(edge)
|
||||
if (connectionExists(edge, elements)) return elements
|
||||
elements.push(edge)
|
||||
return [...elements, edge]
|
||||
}
|
||||
|
||||
export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: Elements) => {
|
||||
if (!newConnection.source || !newConnection.target) {
|
||||
console.warn("Can't create new edge. An edge needs a source and a target.")
|
||||
return elements
|
||||
}
|
||||
|
||||
const foundEdge = elements.find((e) => isEdge(e) && e.id === oldEdge.id)
|
||||
|
||||
if (!foundEdge) {
|
||||
console.warn(`The old edge with id=${oldEdge.id} does not exist.`)
|
||||
return elements
|
||||
}
|
||||
|
||||
// Remove old edge and create the new edge with parameters of old edge.
|
||||
const edge: Edge = {
|
||||
...oldEdge,
|
||||
id: getEdgeId(newConnection),
|
||||
source: newConnection.source,
|
||||
target: newConnection.target,
|
||||
sourceHandle: newConnection.sourceHandle,
|
||||
targetHandle: newConnection.targetHandle,
|
||||
}
|
||||
elements.splice(elements.indexOf(foundEdge), 1, edge)
|
||||
return elements.filter((e) => e.id !== oldEdge.id).concat(edge)
|
||||
}
|
||||
|
||||
export const pointToRendererPoint = (
|
||||
{ x, y }: XYPosition,
|
||||
[tx, ty, tScale]: Transform,
|
||||
snapToGrid: boolean,
|
||||
[snapX, snapY]: [number, number],
|
||||
) => {
|
||||
const position: XYPosition = {
|
||||
x: (x - tx) / tScale,
|
||||
y: (y - ty) / tScale,
|
||||
}
|
||||
|
||||
if (snapToGrid) {
|
||||
return {
|
||||
x: snapX * Math.round(position.x / snapX),
|
||||
y: snapY * Math.round(position.y / snapY),
|
||||
}
|
||||
}
|
||||
|
||||
return position
|
||||
}
|
||||
|
||||
export const onLoadProject = (currentStore: FlowStore) => (position: XYPosition) =>
|
||||
pointToRendererPoint(position, currentStore.transform, currentStore.snapToGrid, currentStore.snapGrid)
|
||||
|
||||
const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({
|
||||
x: Math.min(box1.x, box2.x),
|
||||
y: Math.min(box1.y, box2.y),
|
||||
x2: Math.max(box1.x2, box2.x2),
|
||||
y2: Math.max(box1.y2, box2.y2),
|
||||
})
|
||||
|
||||
export const rectToBox = ({ x, y, width, height }: Rect): Box => ({
|
||||
x,
|
||||
y,
|
||||
x2: x + width,
|
||||
y2: y + height,
|
||||
})
|
||||
|
||||
export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
|
||||
x,
|
||||
y,
|
||||
width: x2 - x,
|
||||
height: y2 - y,
|
||||
})
|
||||
|
||||
export const getBoundsofRects = (rect1: Rect, rect2: Rect) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)))
|
||||
|
||||
export const getRectOfNodes = (nodes: GraphNode[]) => {
|
||||
const box = nodes.reduce(
|
||||
(currBox, { computedPosition = { x: 0, y: 0 }, dimensions = { width: 0, height: 0 } } = {} as any) =>
|
||||
getBoundsOfBoxes(
|
||||
currBox,
|
||||
rectToBox({
|
||||
...computedPosition,
|
||||
...dimensions,
|
||||
} as Rect),
|
||||
),
|
||||
{ x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity },
|
||||
)
|
||||
|
||||
return boxToRect(box)
|
||||
}
|
||||
|
||||
export const graphPosToZoomedPos = ({ x, y }: XYPosition, [tx, ty, tScale]: Transform): XYPosition => ({
|
||||
x: x * tScale + tx,
|
||||
y: y * tScale + ty,
|
||||
})
|
||||
|
||||
export const getNodesInside = (nodes: GraphNode[], rect: Rect, [tx, ty, tScale]: Transform = [0, 0, 1], partially = false) => {
|
||||
const rBox = rectToBox({
|
||||
x: (rect.x - tx) / tScale,
|
||||
y: (rect.y - ty) / tScale,
|
||||
width: rect.width / tScale,
|
||||
height: rect.height / tScale,
|
||||
})
|
||||
|
||||
return nodes.filter((node) => {
|
||||
if (!node || node.selectable === false) return false
|
||||
const { computedPosition = { x: 0, y: 0 }, dimensions = { width: 0, height: 0 }, dragging = false } = node
|
||||
const nBox = rectToBox({ ...computedPosition, ...dimensions })
|
||||
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)
|
||||
const notInitialized =
|
||||
typeof dimensions.width === 'undefined' ||
|
||||
typeof dimensions.height === 'undefined' ||
|
||||
dimensions.width === 0 ||
|
||||
dimensions.height === 0 ||
|
||||
dragging
|
||||
|
||||
const partiallyVisible = partially && overlappingArea > 0
|
||||
const area = dimensions.width * dimensions.height
|
||||
return notInitialized || partiallyVisible || overlappingArea >= area
|
||||
})
|
||||
}
|
||||
|
||||
export const getConnectedEdges = (nodes: GraphNode[], edges: GraphEdge[]) => {
|
||||
const nodeIds = nodes.map((node) => node.id)
|
||||
return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
|
||||
}
|
||||
|
||||
export const onLoadGetNodes = (store: FlowStore) => (): GraphNode[] => store.nodes
|
||||
export const onLoadGetEdges = (store: FlowStore) => (): GraphEdge[] => store.edges
|
||||
export const onLoadGetElements = (store: FlowStore) => (): FlowElements => [...store.nodes, ...store.edges]
|
||||
|
||||
export const onLoadToObject = (store: State) => (): FlowExportObject => {
|
||||
// we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage
|
||||
return JSON.parse(
|
||||
JSON.stringify({
|
||||
nodes: store.nodes,
|
||||
edges: store.edges,
|
||||
position: [store.transform[0], store.transform[1]],
|
||||
zoom: store.transform[2],
|
||||
} as FlowExportObject),
|
||||
)
|
||||
}
|
||||
|
||||
export const getTransformForBounds = (
|
||||
bounds: Rect,
|
||||
width: number,
|
||||
height: number,
|
||||
minZoom: number,
|
||||
maxZoom: number,
|
||||
padding = 0.1,
|
||||
offset: {
|
||||
x?: number
|
||||
y?: number
|
||||
} = { x: 0, y: 0 },
|
||||
): Transform => {
|
||||
const xZoom = width / (bounds.width * (1 + padding))
|
||||
const yZoom = height / (bounds.height * (1 + padding))
|
||||
const zoom = Math.min(xZoom, yZoom)
|
||||
const clampedZoom = clamp(zoom, minZoom, maxZoom)
|
||||
const boundsCenterX = bounds.x + bounds.width / 2
|
||||
const boundsCenterY = bounds.y + bounds.height / 2
|
||||
const x = width / 2 - boundsCenterX * clampedZoom + (offset.x ?? 0)
|
||||
const y = height / 2 - boundsCenterY * clampedZoom + (offset.y ?? 0)
|
||||
|
||||
return [x, y, clampedZoom]
|
||||
}
|
||||
|
||||
export const getXYZPos = (parentNode: GraphNode, computedPosition: XYZPosition): XYZPosition => {
|
||||
return {
|
||||
x: computedPosition.x + parentNode.computedPosition.x,
|
||||
y: computedPosition.y + parentNode.computedPosition.y,
|
||||
z: parentNode.computedPosition.z > computedPosition.z ? parentNode.computedPosition.z : computedPosition.z,
|
||||
}
|
||||
}
|
||||
|
||||
export const isParentSelected = (node: GraphNode, getNode: Getters['getNode']): boolean => {
|
||||
if (!node.parentNode) return false
|
||||
const parent = getNode(node.parentNode)
|
||||
if (!parent) return false
|
||||
if (parent.selected) return true
|
||||
return isParentSelected(parent, getNode)
|
||||
}
|
||||
|
||||
export const getMarkerId = (marker: EdgeMarkerType | undefined): string => {
|
||||
if (typeof marker === 'undefined') return ''
|
||||
if (typeof marker === 'string') return marker
|
||||
|
||||
return Object.keys(marker)
|
||||
.sort()
|
||||
.map((key) => `${key}=${marker[<keyof EdgeMarkerType>key]}`)
|
||||
.join('&')
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './edge'
|
||||
export * from './graph'
|
||||
export * from './node'
|
||||
export * from './changes'
|
||||
@@ -0,0 +1,39 @@
|
||||
import { getDimensions } from './graph'
|
||||
import { HandleElement, Position } from '~/types'
|
||||
|
||||
export const getHandleBoundsByHandleType = (
|
||||
selector: string,
|
||||
nodeElement: HTMLDivElement,
|
||||
parentBounds: ClientRect | DOMRect,
|
||||
k: number,
|
||||
): HandleElement[] | null => {
|
||||
const handles = nodeElement.querySelectorAll(selector)
|
||||
|
||||
if (!handles || !handles.length) return null
|
||||
|
||||
const handlesArray = Array.from(handles) as HTMLDivElement[]
|
||||
|
||||
return handlesArray.map((handle): HandleElement => {
|
||||
const bounds = handle.getBoundingClientRect()
|
||||
const dimensions = getDimensions(handle)
|
||||
const handleId = handle.getAttribute('data-handleid') ?? undefined
|
||||
const handlePosition = handle.getAttribute('data-handlepos') as Position
|
||||
|
||||
return {
|
||||
id: handleId,
|
||||
position: handlePosition,
|
||||
x: (bounds.left - parentBounds.left) / k,
|
||||
y: (bounds.top - parentBounds.top) / k,
|
||||
...dimensions,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number, id?: string) => {
|
||||
const bounds = nodeElement.getBoundingClientRect()
|
||||
|
||||
return {
|
||||
source: getHandleBoundsByHandleType(`.source${id ? `.vue-flow__handle-${id}` : ''}`, nodeElement, bounds, scale) ?? undefined,
|
||||
target: getHandleBoundsByHandleType(`.target${id ? `.vue-flow__handle-${id}` : ''}`, nodeElement, bounds, scale) ?? undefined,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user