56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import type { XYPosition } from '@braks/vue-flow'
|
|
|
|
/**
|
|
* Draws an SVG path from a list of points, using straight lines.
|
|
*/
|
|
|
|
const getMidPoint = (Ax: number, Ay: number, Bx: number, By: number) => {
|
|
const Zx = (Ax - Bx) / 2 + Bx
|
|
const Zy = (Ay - By) / 2 + By
|
|
return [Zx, Zy]
|
|
}
|
|
|
|
export const drawStraightLinePath = (source: XYPosition, target: XYPosition, path: number[][]) => {
|
|
let svgPathString = `M ${source.x}, ${source.y} `
|
|
|
|
path.forEach((point) => {
|
|
const [x, y] = point
|
|
svgPathString += `L ${x}, ${y} `
|
|
})
|
|
|
|
svgPathString += `L ${target.x}, ${target.y} `
|
|
|
|
return svgPathString
|
|
}
|
|
|
|
const quadraticBezierCurve = (points: number[][]) => {
|
|
const X = 0
|
|
const Y = 1
|
|
let point = points[0]
|
|
|
|
const first = points[0]
|
|
let svgPath = `M${first[X]},${first[Y]}M`
|
|
|
|
for (let i = 0; i < points.length; i++) {
|
|
const next = points[i]
|
|
const midPoint = getMidPoint(point[X], point[Y], next[X], next[Y])
|
|
|
|
svgPath += ` ${midPoint[X]},${midPoint[Y]}`
|
|
svgPath += `Q${next[X]},${next[Y]}`
|
|
point = next
|
|
}
|
|
|
|
const last = points[points.length - 1]
|
|
svgPath += ` ${last[0]},${last[1]}`
|
|
|
|
return svgPath
|
|
}
|
|
|
|
/**
|
|
* Draws a SVG path from a list of points, using rounded lines.
|
|
*/
|
|
export const drawSmoothLinePath = (source: XYPosition, target: XYPosition, path: number[][]) => {
|
|
const points = [[source.x, source.y], ...path, [target.x, target.y]]
|
|
return quadraticBezierCurve(points)
|
|
}
|