@leafer-in/linker 2.3.0 → 2.3.1

package/dist/linker.cjs

@@ -0,0 +1,569 @@
+"use strict";
+
+var draw = require("@leafer-ui/draw");
+
+var core = require("@leafer-ui/core");
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+class LinkerData extends draw.LineData {
+    get __usePathBox() {
+        return this.path || this.__pathInputed;
+    }
+}
+
+const {directionData: directionData} = draw.AroundHelper;
+
+const directionNames = [ "top-left", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "center" ];
+
+const LinkerHelper = {
+    getCtrlPoint(linker, node, point, direction, ctrl, offsetAngle) {
+        if (node) {
+            point = node.getBoxPoint(point, linker);
+        }
+        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, to) {
+        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;
+        }
+    },
+    getDirectionForFromPoint(from, to) {
+        const a = from.x - to.x;
+        const b = from.y - to.y;
+        let direction;
+        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, rotation, totalDirection = 8) {
+        let directionIndex = draw.Direction9[direction];
+        directionIndex = (directionIndex + Math.round(rotation / (360 / totalDirection))) % totalDirection;
+        if (directionIndex < 0) directionIndex += totalDirection;
+        return directionNames[directionIndex];
+    },
+    getDirection: getDirection,
+    getPointDirection: getPointDirection,
+    autoRotatePoint(point, origin, ui) {
+        const {rotation: rotation, scaleX: scaleX, scaleY: scaleY} = ui;
+        const oneFlip = scaleX * scaleY < 0;
+        if (rotation || oneFlip) draw.PointHelper.rotate(point, oneFlip ? -rotation : rotation, origin);
+    }
+};
+
+function getPointDirection(boxPoint, bounds, eight) {
+    const {width: width, height: 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, bounds, four) {
+    const {width: width, height: height} = bounds;
+    const center = draw.BoundsHelper.getPoint(bounds, "center", true);
+    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";
+    }
+    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";
+}
+
+function linkerPointType(defaultValue) {
+    return draw.decorateLeafAttr(defaultValue, key => draw.attr({
+        set(value) {
+            if (this.__setAttr(key, value)) {
+                const layout = this.__layout;
+                if (!layout.linkerChanged) {
+                    draw.doBoundsType(this);
+                    draw.doStrokeType(this);
+                    layout.linkerChanged = true;
+                }
+            }
+        }
+    }));
+}
+
+const {moveTo: moveTo, bezierCurveTo: bezierCurveTo, drawPoints: drawPoints$1} = draw.PathCommandDataHelper;
+
+const {isEmpty: isEmpty, getPoint: getPoint} = draw.BoundsHelper;
+
+const {getDistance: getDistance} = draw.PointHelper;
+
+const {getCtrlPoint: getCtrlPoint, getDirectionForFromPoint: getDirectionForFromPoint, isOppositeDirection: isOppositeDirection} = LinkerHelper;
+
+const {max: max, min: min, abs: abs} = Math;
+
+exports.Linker = class Linker extends draw.Line {
+    get __tag() {
+        return "Linker";
+    }
+    constructor(data) {
+        super(data);
+        this.onStartNodeChange = this.onStartNodeChange.bind(this);
+        this.onEndNodeChange = this.onEndNodeChange.bind(this);
+    }
+    __updatePath() {
+        const layout = this.__layout;
+        const {startNode: startNode, endNode: 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();
+    }
+    listenLinkerNode(newNode, oldNode, type) {
+        if (oldNode) {
+            oldNode.off(draw.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(draw.BoundsEvent.WORLD, type === "end" ? this.onEndNodeChange : this.onStartNodeChange);
+            const list = type === "end" ? newNode.endLinker || (newNode.endLinker = []) : newNode.startLinker || (newNode.startLinker = []);
+            list.push(this);
+        }
+    }
+    onStartNodeChange() {
+        this.onLinkerNodeChange("start");
+    }
+    onEndNodeChange() {
+        this.onLinkerNodeChange("end");
+    }
+    onLinkerNodeChange(type) {
+        if (this.leaferIsCreated) {
+            const {layouter: layouter, zoomLayer: zoomLayer} = this.leafer;
+            if (layouter.__updatedList.has(zoomLayer)) return;
+            layouter.addExtra(this, true);
+        }
+        const {startData: startData, endData: 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();
+        draw.LeafHelper.updateBounds(this);
+    }
+    updateLinkerNode(type) {
+        const {startPoint: startPoint, endPoint: endPoint} = this;
+        const nowPoint = type === "end" ? endPoint : startPoint;
+        if (nowPoint) {
+            const {id: id} = nowPoint;
+            const ui = id && (draw.isString(id) ? this.app.findId(id) : id);
+            type === "end" ? this.endNode = ui : this.startNode = ui;
+        }
+    }
+    getLinkerNodeCenter(type) {
+        const {startPoint: startPoint, endPoint: endPoint, startNode: startNode, endNode: endNode, startData: startData, endData: endData} = this;
+        const node = type === "end" ? endNode : startNode;
+        const data = type === "end" ? endData || endPoint : startData || startPoint;
+        if (node) {
+            const {worldRenderBounds: worldRenderBounds} = node;
+            if (isEmpty(worldRenderBounds)) draw.LeafHelper.updateBounds(node);
+            return getPoint(node.worldRenderBounds, "center");
+        } else {
+            return data && draw.isObject(data.point) && this.getWorldPointByLocal(data.point);
+        }
+    }
+    updateLinkerPoint(type) {
+        const {startPoint: startPoint, endPoint: endPoint} = this;
+        const nowPoint = type === "end" ? endPoint : startPoint;
+        if (nowPoint) {
+            const data = {};
+            const {id: id, offset: offset} = nowPoint;
+            let {direction: direction, point: 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 && draw.isString(point)) direction = point;
+            data.direction = direction;
+            const ui = type === "end" ? this.endNode : this.startNode;
+            let p;
+            if (ui) {
+                if (!point) point = direction;
+                if (point) {
+                    const {boxBounds: boxBounds} = ui;
+                    if (isEmpty(boxBounds)) draw.LeafHelper.updateBounds(ui);
+                    p = getPoint(boxBounds, point, true);
+                    ui.getWorldPointByBox(p, this, false, true);
+                }
+            } else {
+                if (draw.isObject(point)) p = point;
+            }
+            if (p && offset) {
+                const o = Object.assign({}, offset);
+                if (!offset.x) o.x = 0;
+                if (!offset.y) o.y = 0;
+                if (ui) ui.getWorldPoint(o, this, true, true);
+                draw.PointHelper.move(p, o);
+            }
+            data.point = p;
+            type === "end" ? this.endData = p && data : this.startData = p && data;
+        }
+    }
+    updateLinkerPath() {
+        const data = this.__;
+        const path = data.path = [];
+        const hasPoints = data.points && data.points.length;
+        const {startData: startData, endData: endData, startNode: startNode, endNode: endNode} = this;
+        if (!startData || !endData) {
+            return;
+        }
+        const startPoint = startData.point, endPoint = endData.point;
+        const startDirection = startData.direction, endDirection = endData.direction;
+        const half = {
+            x: abs((startPoint.x - endPoint.x) / 2),
+            y: abs((startPoint.y - endPoint.y) / 2)
+        };
+        const arrowWidth = this.__.strokeWidth * 8;
+        let minCtrl;
+        if (this.__.__useArrow) {
+            const ratio = min(getDistance(startPoint, endPoint) / (arrowWidth * 25), 1);
+            minCtrl = max(arrowWidth * ratio * 12, arrowWidth * 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 *= .6;
+            const points = draw.PointHelper.toNumberPoints(data.points);
+            drawPoints$1(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 = 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 = 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 = startDirection ? getCtrlPoint(this, startNode, startPoint, startDirection, half) : startPoint;
+            const endCtrlPoint = 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);
+        }
+    }
+    createStartPoint(worldPoint, node, options) {
+        const data = this.createLinkerPoint(worldPoint, node, options);
+        this.startPoint = data;
+        return data;
+    }
+    createEndPoint(worldPoint, node, options) {
+        const data = this.createLinkerPoint(worldPoint, node, options);
+        this.endPoint = data;
+        return data;
+    }
+    createLinkerPoint(worldPoint, node, options) {
+        const data = {};
+        if (node && node.id) {
+            const point = node.getBoxPoint(worldPoint);
+            const {boxBounds: 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 = draw.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;
+    }
+};
+
+__decorate([ draw.dataProcessor(LinkerData) ], exports.Linker.prototype, "__", void 0);
+
+__decorate([ linkerPointType() ], exports.Linker.prototype, "startPoint", void 0);
+
+__decorate([ linkerPointType() ], exports.Linker.prototype, "endPoint", void 0);
+
+__decorate([ draw.pathType({
+    type: "C",
+    value: .5
+}) ], exports.Linker.prototype, "curve", void 0);
+
+exports.Linker = __decorate([ draw.registerUI() ], exports.Linker);
+
+const {toNumberPoints: toNumberPoints} = core.PointHelper;
+
+const {M: M, L: L, C: C, Z: Z} = core.PathCommandMap;
+
+function drawPoints(data, originPoints, curve, close) {
+    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 ? .5 : curve;
+    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];
+        let bax = ax - bx;
+        let bay = ay - by;
+        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);
+            if (!uLen) {
+                if (bc) {
+                    ux = bcx / bc;
+                    uy = bcy / bc;
+                } else {
+                    ux = bax / ab;
+                    uy = bay / ab;
+                }
+                uLen = 1;
+            }
+            ux /= uLen;
+            uy /= uLen;
+            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 < .15) angleFactor = .15;
+            let inLength = ab * tension * angleFactor;
+            let outLength = bc * tension * angleFactor;
+            const maxLength = Math.min(ab || bc, bc || ab) * .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, lastOutX, lastOutY, inX, inY, bx, by);
+        lastOutX = outX;
+        lastOutY = outY;
+    }
+    if (close) data.push(Z);
+}
+
+draw.Plugin.add("linker");
+
+draw.registerPointsCurve("C", drawPoints);
+
+exports.LinkerData = LinkerData;