@leafer-in/linker 2.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Chao (Leafer) Wan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @leafer-in/linker

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@leafer-in/linker",
+  "version": "2.3.0",
+  "description": "@leafer-in/linker",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/linker.esm.js",
+  "exports": {
+    "import": "./dist/linker.esm.js",
+    "require": "./dist/linker.cjs",
+    "types": "./types/index.d.ts"
+  },
+  "types": "types/index.d.ts",
+  "unpkg": "dist/linker.js",
+  "jsdelivr": "dist/linker.js",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/leafer-in.git"
+  },
+  "homepage": "https://github.com/leaferjs/leafer-in/tree/main/packages/linker",
+  "bugs": "https://github.com/leaferjs/leafer-in/issues",
+  "keywords": [
+    "leafer linker",
+    "leafer-linker",
+    "leafer-in",
+    "linker",
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "peerDependencies": {
+    "@leafer-ui/draw": "^2.0.0",
+    "@leafer-ui/interface": "^2.0.0"
+  }
+}

package/src/Linker.ts

@@ -0,0 +1,355 @@
+import { ILinker, ILinkerInputData, ILinkerData, ILinkerPointData, ILinkerPointOptions, ILinkerComputedPointData, ILinkerPointType, IPointData, IUI, IDirection4, ILeaf, IPointsCurve, IPointsCurveData } from '@leafer-ui/interface'
+import { registerUI, dataProcessor, PathCommandDataHelper, pathType, isString, BoundsEvent, Line, PointHelper, BoundsHelper, LeafHelper, isObject } from '@leafer-ui/draw'
+
+import { LinkerData } from './data/LinkerData'
+import { LinkerHelper } from './helper/LinkerHelper'
+import { linkerPointType } from './decorator'
+
+
+const { moveTo, bezierCurveTo, drawPoints } = PathCommandDataHelper
+const { isEmpty, getPoint } = BoundsHelper
+const { getDistance } = PointHelper
+const { getCtrlPoint, getDirectionForFromPoint, isOppositeDirection } = LinkerHelper
+const { max, min, abs } = Math
+
+
+@registerUI()
+export class Linker extends Line implements ILinker {
+
+    public get __tag() { return 'Linker' }
+
+    @dataProcessor(LinkerData)
+    declare public __: ILinkerData
+
+    @linkerPointType()
+    public startPoint?: ILinkerPointData
+
+    @linkerPointType()
+    public endPoint?: ILinkerPointData
+
+    @pathType({ type: 'C', value: 0.5 } as IPointsCurveData)
+    declare public curve?: IPointsCurve
+
+    public startNode: IUI
+    public endNode: IUI
+
+    public startData: ILinkerComputedPointData
+    public endData: ILinkerComputedPointData
+
+
+    constructor(data?: ILinkerInputData) {
+        super(data)
+        this.onStartNodeChange = this.onStartNodeChange.bind(this)
+        this.onEndNodeChange = this.onEndNodeChange.bind(this)
+    }
+
+    public __updatePath(): void {
+
+        const layout = this.__layout
+
+        const { startNode, endNode } = this
+
+        if (layout.linkerChanged) {
+            this.updateLinkerNode('start')
+            this.updateLinkerNode('end')
+
+            this.updateLinkerPoint('start')
+            this.updateLinkerPoint('end')
+
+            if (startNode !== this.startNode) this.listenLinkerNode(this.startNode, startNode, 'start')
+            if (endNode !== this.endNode) this.listenLinkerNode(this.endNode, endNode, 'end')
+
+            layout.linkerChanged = false
+        }
+
+        this.updateLinkerPath()
+    }
+
+    public listenLinkerNode(newNode: IUI, oldNode: IUI, type: ILinkerPointType): void {
+        if (oldNode) {
+            oldNode.off(BoundsEvent.WORLD, type === 'end' ? this.onEndNodeChange : this.onStartNodeChange)
+            const list = type === 'end' ? oldNode.endLinker : oldNode.startLinker
+            if (list) {
+                const index = list.indexOf(this)
+                if (index > -1) list.splice(index, 1)
+            }
+        }
+        if (newNode) {
+            newNode.on(BoundsEvent.WORLD, type === 'end' ? this.onEndNodeChange : this.onStartNodeChange)
+            const list = type === 'end' ? (newNode.endLinker || (newNode.endLinker = [])) : (newNode.startLinker || (newNode.startLinker = []))
+            list.push(this)
+        }
+    }
+
+    public onStartNodeChange(): void {
+        this.onLinkerNodeChange('start')
+    }
+
+    public onEndNodeChange(): void {
+        this.onLinkerNodeChange('end')
+    }
+
+    public onLinkerNodeChange(type: ILinkerPointType): void {
+        if (this.leaferIsCreated) {
+            const { layouter, zoomLayer } = this.leafer
+            if (layouter.__updatedList.has(zoomLayer)) return // 节流，画布缩放平移不用更新
+            layouter.addExtra(this, true)
+        }
+
+        const { startData, endData } = this
+        if (type == 'start') {
+            this.updateLinkerPoint('start')
+            if (endData && endData.auto) this.updateLinkerPoint('end')
+        } else {
+            if (startData && startData.auto) this.updateLinkerPoint('start')
+            this.updateLinkerPoint('end')
+        }
+
+        this.__layout.boxChange()
+        LeafHelper.updateBounds(this)
+    }
+
+    public updateLinkerNode(type: ILinkerPointType) {
+        const { startPoint, endPoint } = this
+        const nowPoint = type === 'end' ? endPoint : startPoint
+        if (nowPoint) {
+            const { id } = nowPoint
+            const ui = id && (isString(id) ? this.app.findId(id) : id)
+            type === 'end' ? this.endNode = ui : this.startNode = ui
+        }
+    }
+
+    public getLinkerNodeCenter(type: ILinkerPointType): IPointData {
+        const { startPoint, endPoint, startNode, endNode, startData, endData } = this
+        const node = type === 'end' ? endNode : startNode
+        const data = type === 'end' ? (endData || endPoint) : (startData || startPoint)
+        if (node) {
+            const { worldRenderBounds } = node
+            if (isEmpty(worldRenderBounds)) LeafHelper.updateBounds(node) // 防止线条位于元素底部，先于元素布局
+            return getPoint(node.worldRenderBounds, 'center')
+        } else {
+            return data && isObject(data.point) && this.getWorldPointByLocal(data.point)
+        }
+    }
+
+    public updateLinkerPoint(type: ILinkerPointType) {
+        const { startPoint, endPoint } = this
+        const nowPoint = type === 'end' ? endPoint : startPoint
+        if (nowPoint) {
+            const data = {} as ILinkerComputedPointData
+            const { id, offset } = nowPoint
+            let { direction, point } = nowPoint
+
+            if (direction === 'center' || (!direction && id && !point)) {
+                const start = this.getLinkerNodeCenter('start')
+                const end = this.getLinkerNodeCenter('end')
+                const from = type === 'end' ? end : start
+                const to = type === 'end' ? start : end
+                if (from && to) direction = getDirectionForFromPoint(from, to)
+                data.auto = true
+            }
+
+
+            if (!direction && isString(point)) direction = point as any as IDirection4
+
+
+            data.direction = direction
+
+            const ui = type === 'end' ? this.endNode : this.startNode
+
+            let p: IPointData
+
+            if (ui) {
+                if (!point) point = direction
+                if (point) {
+                    const { boxBounds } = ui
+
+                    if (isEmpty(boxBounds)) LeafHelper.updateBounds(ui) // 防止线条位于元素底部，先于元素布局
+                    p = getPoint(boxBounds, point, true)
+                    ui.getWorldPointByBox(p, this, false, true)
+                }
+            } else {
+                if (isObject(point)) p = point
+            }
+
+            if (p && offset) {
+                const o = { ...offset } as IPointData
+                if (!offset.x) o.x = 0
+                if (!offset.y) o.y = 0
+
+                if (ui) ui.getWorldPoint(o, this, true, true)
+                PointHelper.move(p, o)
+            }
+
+            data.point = p
+
+            type === 'end' ? this.endData = p && data : this.startData = p && data
+
+        }
+    }
+
+
+    public updateLinkerPath() {
+        const data = this.__
+        const path: number[] = data.path = []
+
+        const hasPoints = data.points && data.points.length
+
+        const { startData, endData, startNode, endNode } = this
+        if (!startData || !endData) {
+            return
+        }
+
+        const startPoint = startData.point, endPoint = endData.point
+        const startDirection = startData.direction, endDirection = endData.direction
+
+        const half: IPointData = {
+            x: abs((startPoint.x - endPoint.x) / 2),
+            y: abs((startPoint.y - endPoint.y) / 2)
+        }
+
+
+        const arrowWidth = this.__.strokeWidth * 8
+
+        let minCtrl: number
+
+        if (this.__.__useArrow) {
+            const ratio = min(getDistance(startPoint, endPoint) / (arrowWidth * 25), 1) // 控制add 手柄的长度与两点间的距离有关
+            minCtrl = max(arrowWidth * ratio * 12, arrowWidth * 3,) // 控制手柄最少不能低于3个箭头的宽度
+        } else {
+            minCtrl = arrowWidth * 2
+        }
+
+        if (endDirection) {
+
+            if (isOppositeDirection(startDirection, endDirection) && startDirection === getDirectionForFromPoint(startPoint, endPoint)) // 正好处于相反的位置, 不需要太长的控制手柄
+            {
+                minCtrl = arrowWidth * 2
+            }
+
+        }
+
+        half.x = max(minCtrl, half.x)
+        half.y = max(minCtrl, half.y)
+
+        if (hasPoints) {
+            minCtrl *= 0.6
+            const points = PointHelper.toNumberPoints(data.points)
+            drawPoints(path, [startPoint.x, startPoint.y, ...points, endPoint.x, endPoint.y], data.curve, false, data)
+
+            if (startDirection) {
+                const handleX = path[4]
+                const handleY = path[5]
+
+                half.x = max(minCtrl, abs(handleX - startPoint.x))
+                half.y = max(minCtrl, abs(handleY - startPoint.y))
+                const startCtrlPoint: IPointData = getCtrlPoint(this, startNode, startPoint, startDirection, half)
+                path[4] = startCtrlPoint.x
+                path[5] = startCtrlPoint.y
+            }
+
+            const len = path.length
+            if (endDirection) {
+
+                const handleX = path[len - 4]
+                const handleY = path[len - 3]
+
+                half.x = max(minCtrl, abs(handleX - endPoint.x))
+                half.y = max(minCtrl, abs(handleY - endPoint.y))
+                const endCtrlPoint: IPointData = getCtrlPoint(this, endNode, endPoint, endDirection, half)
+                path[len - 4] = endCtrlPoint.x
+                path[len - 3] = endCtrlPoint.y
+            } else {
+                path[len - 4] = endPoint.x
+                path[len - 3] = endPoint.y
+            }
+
+        } else {
+
+            const startCtrlPoint: IPointData = startDirection ? getCtrlPoint(this, startNode, startPoint, startDirection, half) : startPoint
+            const endCtrlPoint: IPointData = endDirection ? getCtrlPoint(this, endNode, endPoint, endDirection, half) : endPoint
+
+            moveTo(path, startPoint.x, startPoint.y)
+            bezierCurveTo(path, startCtrlPoint.x, startCtrlPoint.y, endCtrlPoint.x, endCtrlPoint.y, endPoint.x, endPoint.y)
+        }
+
+
+    }
+
+    public createStartPoint(worldPoint: IPointData, node?: ILeaf, options?: ILinkerPointOptions): ILinkerPointData {
+        const data = this.createLinkerPoint(worldPoint, node, options)
+        this.startPoint = data
+        return data
+    }
+
+    public createEndPoint(worldPoint: IPointData, node?: ILeaf, options?: ILinkerPointOptions): ILinkerPointData {
+        const data = this.createLinkerPoint(worldPoint, node, options)
+        this.endPoint = data
+        return data
+    }
+
+    public createLinkerPoint(worldPoint: IPointData, node?: ILeaf, options?: ILinkerPointOptions): ILinkerPointData {
+        const data: ILinkerPointData = {}
+        if (node && node.id) {
+            const point = node.getBoxPoint(worldPoint)
+            const { boxBounds } = node
+
+            const mode = options && options.mode
+
+            const edge = mode === 'edge' || !mode
+            const four = mode === 'four'
+            const auto = mode === 'auto'
+            const free = mode === 'free'
+
+            if (!auto) {
+
+                if (four) {
+                    data.point = LinkerHelper.getDirection(point, boxBounds, four)
+                } else {
+                    data.direction = LinkerHelper.getDirection(point, boxBounds, edge)
+                    data.point = LinkerHelper.getPointDirection(point, boxBounds, edge) || data.direction
+                    if (data.point === data.direction) delete data.direction
+
+                    if (free || edge) {
+                        const snapPoint = BoundsHelper.getPoint(boxBounds, data.point)
+
+                        const offsetX = point.x - snapPoint.x
+                        const offsetY = point.y - snapPoint.y
+
+                        const snapRadius = (options && options.snapRadius) || 10
+
+                        if (Math.abs(offsetX) > snapRadius || Math.abs(offsetY) > snapRadius) {
+                            const offset = data.offset = {
+                                x: Math.abs(offsetX) > snapRadius ? offsetX : 0,
+                                y: Math.abs(offsetY) > snapRadius ? offsetY : 0
+                            }
+
+                            if (edge && (offset.x || offset.y)) {
+                                switch (data.direction || data.point) {
+                                    case 'top':
+                                    case 'bottom':
+                                        offset.y = 0; break
+                                    case 'right':
+                                    case 'left':
+                                        offset.x = 0; break
+                                    default:
+                                        if (offset.x > offset.y) offset.y = 0
+                                        else offset.x = 0
+                                }
+
+                            }
+                        }
+                    }
+                }
+
+            }
+
+            data.id = node.id
+        } else {
+            data.point = this.getLocalPoint(worldPoint)
+        }
+
+        return data
+    }
+
+}

package/src/data/LinkerData.ts

@@ -0,0 +1,11 @@
+import { ILinkerData } from "@leafer-ui/interface"
+import { LineData } from '@leafer-ui/draw'
+
+
+export class LinkerData extends LineData implements ILinkerData {
+
+    public get __usePathBox(): boolean {
+        return ((this as ILinkerData).path || (this as ILinkerData).__pathInputed) as any as boolean
+    }
+
+}

package/src/decorator.ts

@@ -0,0 +1,18 @@
+import { IValue } from '@leafer-ui/interface'
+import { decorateLeafAttr, attr, doBoundsType, doStrokeType } from '@leafer-ui/draw'
+
+
+export function linkerPointType(defaultValue?: IValue) {
+    return decorateLeafAttr(defaultValue, (key: string) => attr({
+        set(value: IValue) {
+            if (this.__setAttr(key, value)) {
+                const layout = this.__layout
+                if (!layout.linkerChanged) {
+                    doBoundsType(this)
+                    doStrokeType(this)
+                    layout.linkerChanged = true
+                }
+            }
+        }
+    }))
+}

package/src/helper/LinkerHelper.ts

@@ -0,0 +1,207 @@
+import { IBoundsData, IDirection, IDirection4, ILinker, IPointData, IUI } from '@leafer-ui/interface'
+import { AroundHelper, BoundsHelper, Direction9, PointHelper } from '@leafer-ui/draw'
+
+
+const { directionData } = AroundHelper
+
+const directionNames: IDirection[] = [
+    'top-left',
+    'top',
+    'top-right',
+    'right',
+    'bottom-right',
+    'bottom',
+    'bottom-left',
+    'left',
+    'center'
+]
+
+export const LinkerHelper = {
+
+    /**
+     * 根据箭头方向获取控制点
+     */
+    getCtrlPoint(linker: ILinker, node: IUI, point: IPointData, direction: IDirection, ctrl: IPointData, offsetAngle?: number): IPointData {
+
+        if (node) {
+            point = node.getBoxPoint(point, linker)
+            // half 需要 / startNode.scale
+        }
+
+        let ctrlPoint
+        switch (direction) {
+            case 'left':
+            case 'top-left':
+            case 'bottom-left':
+                ctrlPoint = {
+                    x: point.x - ctrl.x,
+                    y: point.y
+                }
+                break
+            case 'top':
+                ctrlPoint = {
+                    x: point.x,
+                    y: point.y - ctrl.y
+                }
+                break
+            case 'right':
+            case 'top-right':
+            case 'bottom-right':
+                ctrlPoint = {
+                    x: point.x + ctrl.x,
+                    y: point.y
+                }
+                break
+            case 'bottom':
+                ctrlPoint = {
+                    x: point.x,
+                    y: point.y + ctrl.y
+                }
+                break
+            default:
+                ctrlPoint = {
+                    x: point.x,
+                    y: point.y
+                }
+        }
+        if (offsetAngle) { // 旋转角度
+            offsetAngle = offsetAngle / 180 * Math.PI
+            ctrlPoint = {
+                x: (ctrlPoint.x - point.x) * Math.cos(offsetAngle) - (ctrlPoint.y - point.y) * Math.sin(offsetAngle) + point.x,
+                y: (ctrlPoint.x - point.x) * Math.sin(offsetAngle) + (ctrlPoint.y - point.y) * Math.cos(offsetAngle) + point.y
+            }
+        }
+
+        if (node) node.getWorldPointByBox(ctrlPoint, linker, undefined, true)
+
+        return ctrlPoint
+    },
+
+    // 是否为相反方向
+    isOppositeDirection(from: IDirection, to: IDirection): boolean {
+        switch (from) {
+            case 'left':
+                return to == 'right'
+            case 'top':
+                return to == 'bottom'
+            case 'right':
+                return to == 'left'
+            case 'bottom':
+                return to == 'top'
+            case 'center':
+                return to == 'center'
+            default:
+                return false
+        }
+    },
+
+    /**
+       * 获取to 相对于 from 的方向
+       * @param from
+       * @param to
+       * @returns
+       */
+    getDirectionForFromPoint(from: IPointData, to: IPointData): IDirection4 {
+        const a = from.x - to.x
+        const b = from.y - to.y
+
+        let direction: IDirection
+        let angle = (180 * Math.atan2(b, a)) / Math.PI
+
+        if (angle < 0) angle = 360 + angle
+
+        if (angle > 315 || angle < 45) {
+            direction = 'left'
+        } else if (angle > 45 && angle < 135) {
+            direction = 'top'
+        } else if (angle > 135 && angle < 225) {
+            direction = 'right'
+        } else {
+            direction = 'bottom'
+        }
+
+        return direction
+    },
+
+    getRotateDirection(direction: IDirection, rotation: number, totalDirection = 8): IDirection {
+        let directionIndex = Direction9[direction]
+        directionIndex = (directionIndex + Math.round(rotation / (360 / totalDirection))) % totalDirection
+        if (directionIndex < 0) directionIndex += totalDirection
+        return directionNames[directionIndex]
+    },
+
+    getDirection,
+
+    getPointDirection,
+
+    autoRotatePoint(point: IPointData, origin: IPointData, ui: IUI): void {
+        const { rotation, scaleX, scaleY } = ui
+        const oneFlip = scaleX * scaleY < 0
+        if (rotation || oneFlip) PointHelper.rotate(point, oneFlip ? -rotation : rotation, origin)
+    }
+
+}
+
+
+
+function getPointDirection(boxPoint: IPointData, bounds: IBoundsData, eight?: boolean): IDirection {
+    const { width, height } = bounds
+    const hitRadiusX = width / 4
+    const hitRadiusY = height / 4
+
+    for (let i = 0; i < directionData.length; i++) {
+        const unit = directionData[i]
+        // 百分比坐标转像素
+        const px = unit.x * width
+        const py = unit.y * height
+
+        const dx = boxPoint.x - px
+        const dy = boxPoint.y - py
+
+        if (Math.abs(dx) <= hitRadiusX && Math.abs(dy) <= hitRadiusY) {
+            if (eight) {
+                if (directionNames[i] !== 'center') return directionNames[i]
+            } else return directionNames[i]
+        }
+    }
+
+    return undefined
+}
+
+
+function getDirection(boxPoint: IPointData, bounds: IBoundsData, four?: boolean): IDirection4 | 'center' {
+    const { width, height } = bounds
+    const center = BoundsHelper.getPoint(bounds, 'center', true)
+    // 将元素沿着对角线切成4块，匹配对应上下左右四个方向
+    // 转为以中心为原点的坐标
+    const dx = boxPoint.x - center.x
+    const dy = boxPoint.y - center.y
+
+    if (!four) {
+        // 中心点
+        if (Math.abs(dx) < width / 4 && Math.abs(dy) < height / 4) return 'center'
+    }
+
+    // ----------------------------------------
+    // 将矩形按比例缩放到正方形空间
+    //
+    // 等价于比较：
+    // |dx| / width  和  |dy| / height
+    //
+    // 但为了避免除法，改为：
+    // |dx| * height  和  |dy| * width
+    //
+    // 这样可以严格按矩形的两条对角线划分区域
+    // ----------------------------------------
+
+    const ax = Math.abs(dx) * height
+    const ay = Math.abs(dy) * width
+
+    // 左右区域
+    if (ax > ay) {
+        return dx > 0 ? 'right' : 'left'
+    }
+
+    // 上下区域
+    return dy > 0 ? 'bottom' : 'top'
+}

package/src/helper/drawPoints.ts

@@ -0,0 +1,283 @@
+import { IPointData, IPathCommandData } from '@leafer-ui/interface'
+
+import { PathCommandMap, PointHelper } from '@leafer-ui/core'
+
+const { toNumberPoints } = PointHelper
+const { M, L, C, Z } = PathCommandMap
+
+
+/**
+ * 使用角平分线自动生成平滑 Bezier 曲线
+ *
+ * 算法特点：
+ *
+ * 1. Handle 方向：
+ *    使用前后方向的角平分线
+ *
+ * 2. Handle 长度：
+ *    左右分别根据相邻边长度计算
+ *
+ *    in  = AB * curve
+ *    out = BC * curve
+ *
+ * 3. 自动曲率控制：
+ *
+ *    - 接近平角：
+ *      降低 handle，避免直线中间产生鼓包
+ *
+ *    - 接近尖角：
+ *      降低 handle，避免曲线过冲
+ *
+ * 4. 性能：
+ *
+ *    - O(n)
+ *    - 无对象创建
+ *    - 无临时数组
+ *    - 适合大规模路径
+ *
+ *
+ * curve:
+ *
+ * 0    直线
+ * 0.5  推荐
+ * 1    最大平滑
+ */
+
+/**
+ * 使用角平分线法线生成自动 Bezier 曲线
+ *
+ * 算法：
+ *
+ * 1. 通过 BA / BC 求角平分方向
+ * 2. 旋转 90° 得到曲线切线方向
+ * 3. 左右 handle 长度分别根据两侧距离计算
+ *
+ * handle:
+ *
+ *        C2
+ *        |
+ *        |
+ * A ---- B ---- C
+ *        |
+ *        |
+ *        C1
+ *
+ *
+ * curve:
+ *
+ * 0     直线
+ * 0.5   推荐
+ * 1     最大曲率
+ */
+export function drawPoints(data: IPathCommandData, originPoints: number[] | IPointData[], curve?: boolean | number, close?: boolean): void {
+    const points = toNumberPoints(originPoints)
+    const count = points.length >> 1
+
+    if (count < 2) return
+
+    data.push(M, points[0], points[1])
+
+    if (!curve || count < 3) {
+
+        for (let i = 1; i < count; i++) {
+
+            data.push(L, points[i * 2], points[i * 2 + 1])
+        }
+
+        if (close) data.push(Z)
+        return
+    }
+
+    let tension = curve === true ? 0.5 : curve as number
+
+    if (tension < 0) tension = 0
+    else if (tension > 1) tension = 1
+
+    const end = close ? count : count - 1
+
+    let lastOutX = points[0]
+    let lastOutY = points[1]
+
+    /**
+     * 非闭合路径第一个点：
+     * 使用第一条边方向作为初始切线
+     */
+    {
+
+        const dx = points[2] - points[0]
+        const dy = points[3] - points[1]
+
+        const len = Math.sqrt(dx * dx + dy * dy)
+
+        if (len) {
+            lastOutX = points[0] + dx / len * len * tension
+            lastOutY = points[1] + dy / len * len * tension
+        }
+    }
+
+
+    for (let i = 0; i < end; i++) {
+        const index = i + 1 === count ? 0 : i + 1
+
+        const bx = points[index * 2]
+        const by = points[index * 2 + 1]
+
+        const prev = index === 0 ? count - 1 : index - 1
+        const next = index + 1 === count ? 0 : index + 1
+
+        const ax = points[prev * 2]
+        const ay = points[prev * 2 + 1]
+
+        const cx = points[next * 2]
+        const cy = points[next * 2 + 1]
+
+        /**
+         * BA
+         */
+        let bax = ax - bx
+        let bay = ay - by
+
+        /**
+         * BC
+         */
+        let bcx = cx - bx
+        let bcy = cy - by
+
+        const ab = Math.sqrt(bax * bax + bay * bay)
+        const bc = Math.sqrt(bcx * bcx + bcy * bcy)
+
+        let inX = bx
+        let inY = by
+
+        let outX = bx
+        let outY = by
+
+        if (ab || bc) {
+
+            /**
+             * 计算角平分方向
+             */
+            let ux = 0
+            let uy = 0
+
+            if (ab) {
+                ux += bax / ab
+                uy += bay / ab
+            }
+
+            if (bc) {
+                ux += bcx / bc
+                uy += bcy / bc
+            }
+
+            /**
+             * 角平分线长度
+             */
+            let uLen = Math.sqrt(ux * ux + uy * uy)
+
+            /**
+             * 180度：
+             * 两个方向抵消
+             *
+             * 使用 BC 方向
+             */
+            if (!uLen) {
+
+                if (bc) {
+                    ux = bcx / bc
+                    uy = bcy / bc
+
+                } else {
+                    ux = bax / ab
+                    uy = bay / ab
+                }
+
+
+                uLen = 1
+            }
+
+            ux /= uLen
+            uy /= uLen
+
+            /**
+             * 角平分线旋转90度
+             *
+             * 得到曲线切线方向
+             */
+            let tx = -uy
+            let ty = ux
+
+            /**
+             * 保证方向朝向下一点
+             */
+            if (bc) {
+                if (tx * bcx + ty * bcy < 0) {
+                    tx = -tx
+                    ty = -ty
+                }
+            }
+
+            /**
+             * 计算夹角
+             */
+            let cos = 0
+
+            if (ab && bc) {
+                cos = (bax * bcx + bay * bcy) / (ab * bc)
+                if (cos > 1) cos = 1
+                else if (cos < -1) cos = -1
+            }
+
+            /**
+             * 曲率限制：
+             *
+             * 平角降低
+             * 尖角降低
+             */
+            let angleFactor = Math.sqrt(Math.sqrt(Math.max(0, 1 - cos * cos)))
+
+            /**
+             * 保留少量曲率，
+             * 避免完全退化
+             */
+            if (angleFactor < 0.15) angleFactor = 0.15
+
+            let inLength = ab * tension * angleFactor
+            let outLength = bc * tension * angleFactor
+
+            /**
+             * 防止 handle 过长
+             */
+            const maxLength = Math.min(ab || bc, bc || ab) * 0.5
+
+            if (inLength > maxLength) inLength = maxLength
+            if (outLength > maxLength) outLength = maxLength
+
+            inX = bx - tx * inLength
+            inY = by - ty * inLength
+
+            outX = bx + tx * outLength
+            outY = by + ty * outLength
+        }
+
+        data.push(C,
+
+            // 上一个节点 handle out
+            lastOutX,
+            lastOutY,
+
+            // 当前节点 handle in
+            inX,
+            inY,
+
+            // 当前节点
+            bx,
+            by
+        )
+
+        lastOutX = outX
+        lastOutY = outY
+    }
+
+    if (close) data.push(Z)
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export { Linker } from './Linker'
+export { LinkerData } from './data/LinkerData'
+
+import { Plugin, registerPointsCurve } from '@leafer-ui/draw'
+import { drawPoints } from './helper/drawPoints'
+
+
+Plugin.add('linker')
+
+registerPointsCurve('C', drawPoints)

package/types/index.d.ts

@@ -0,0 +1,33 @@
+import { ILinker, ILinkerData, ILinkerPointData, IPointsCurve, IUI, ILinkerComputedPointData, ILinkerInputData, ILinkerPointType, IPointData, ILeaf, ILinkerPointOptions } from '@leafer-ui/interface';
+import { Line, LineData } from '@leafer-ui/draw';
+
+declare class Linker extends Line implements ILinker {
+    get __tag(): string;
+    __: ILinkerData;
+    startPoint?: ILinkerPointData;
+    endPoint?: ILinkerPointData;
+    curve?: IPointsCurve;
+    startNode: IUI;
+    endNode: IUI;
+    startData: ILinkerComputedPointData;
+    endData: ILinkerComputedPointData;
+    constructor(data?: ILinkerInputData);
+    __updatePath(): void;
+    listenLinkerNode(newNode: IUI, oldNode: IUI, type: ILinkerPointType): void;
+    onStartNodeChange(): void;
+    onEndNodeChange(): void;
+    onLinkerNodeChange(type: ILinkerPointType): void;
+    updateLinkerNode(type: ILinkerPointType): void;
+    getLinkerNodeCenter(type: ILinkerPointType): IPointData;
+    updateLinkerPoint(type: ILinkerPointType): void;
+    updateLinkerPath(): void;
+    createStartPoint(worldPoint: IPointData, node?: ILeaf, options?: ILinkerPointOptions): ILinkerPointData;
+    createEndPoint(worldPoint: IPointData, node?: ILeaf, options?: ILinkerPointOptions): ILinkerPointData;
+    createLinkerPoint(worldPoint: IPointData, node?: ILeaf, options?: ILinkerPointOptions): ILinkerPointData;
+}
+
+declare class LinkerData extends LineData implements ILinkerData {
+    get __usePathBox(): boolean;
+}
+
+export { Linker, LinkerData };