* Replace jsx with script setup syntax
* Simplify logic and make it more "composable"
* Move Zoom functions to useZoom composable
* Update eslint config & tsconfig
158 lines
4.2 KiB
TypeScript
158 lines
4.2 KiB
TypeScript
import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '~/components/Edges'
|
|
import { rectToBox } from '~/utils/graph'
|
|
import { Position, Node, XYPosition, ElementId, HandleElement, Transform, Edge, EdgeType } from '~/types'
|
|
|
|
export function createEdgeTypes(edgeTypes: Record<string, EdgeType>): Record<string, EdgeType> {
|
|
const standardTypes: Record<string, EdgeType> = {
|
|
default: edgeTypes.default || BezierEdge,
|
|
straight: edgeTypes.bezier || StraightEdge,
|
|
step: edgeTypes.step || StepEdge,
|
|
smoothstep: edgeTypes.step || SmoothStepEdge,
|
|
}
|
|
|
|
const wrappedTypes = {} as Record<string, EdgeType>
|
|
const specialTypes: Record<string, EdgeType> = Object.keys(edgeTypes)
|
|
.filter((k) => !['default', 'bezier'].includes(k))
|
|
.reduce((res, key) => {
|
|
res[key] = edgeTypes[key] || BezierEdge
|
|
|
|
return res
|
|
}, wrappedTypes)
|
|
|
|
return {
|
|
...standardTypes,
|
|
...specialTypes,
|
|
}
|
|
}
|
|
|
|
export function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
|
|
const x = (handle?.x || 0) + node.__rf.position.x
|
|
const y = (handle?.y || 0) + node.__rf.position.y
|
|
const width = handle?.width || node.__rf.width
|
|
const height = handle?.height || node.__rf.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 function getHandle(bounds: HandleElement[], handleId: ElementId | null): HandleElement | null {
|
|
if (!bounds) {
|
|
return null
|
|
}
|
|
|
|
// there is no handleId when there are no multiple handles/ handles with ids
|
|
// so we just pick the first one
|
|
let handle = null
|
|
if (bounds.length === 1 || !handleId) {
|
|
handle = bounds[0]
|
|
} else if (handleId) {
|
|
handle = bounds.find((d) => d.id === handleId)
|
|
}
|
|
|
|
return typeof handle === 'undefined' ? null : handle
|
|
}
|
|
|
|
interface EdgePositions {
|
|
sourceX: number
|
|
sourceY: number
|
|
targetX: number
|
|
targetY: number
|
|
}
|
|
|
|
export const getEdgePositions = (
|
|
sourceNode: Node,
|
|
sourceHandle: HandleElement | unknown,
|
|
sourcePosition: Position,
|
|
targetNode: Node,
|
|
targetHandle: HandleElement | unknown,
|
|
targetPosition: Position,
|
|
): EdgePositions => {
|
|
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle)
|
|
const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle)
|
|
|
|
return {
|
|
sourceX: sourceHandlePos.x,
|
|
sourceY: sourceHandlePos.y,
|
|
targetX: targetHandlePos.x,
|
|
targetY: targetHandlePos.y,
|
|
}
|
|
}
|
|
|
|
interface IsEdgeVisibleParams {
|
|
sourcePos: XYPosition
|
|
targetPos: XYPosition
|
|
width: number
|
|
height: number
|
|
transform: Transform
|
|
}
|
|
|
|
export function isEdgeVisible({ sourcePos, targetPos, 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, targetPos.x),
|
|
y2: Math.max(sourcePos.y, targetPos.y),
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
type SourceTargetNode = {
|
|
sourceNode: Node | null
|
|
targetNode: Node | null
|
|
}
|
|
|
|
export const getSourceTargetNodes = (edge: Edge, nodes: Node[]): SourceTargetNode => {
|
|
return nodes.reduce(
|
|
(res, node) => {
|
|
if (node.id === edge.source) {
|
|
res.sourceNode = node
|
|
}
|
|
if (node.id === edge.target) {
|
|
res.targetNode = node
|
|
}
|
|
return res
|
|
},
|
|
{ sourceNode: null, targetNode: null } as SourceTargetNode,
|
|
)
|
|
}
|