@leafer-in/arrow 1.0.0-rc.16

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/arrow

package/dist/arrow.esm.js

@@ -0,0 +1,276 @@
+import { LineData, dataProcessor, strokeType, registerUI, Line, PathCommandMap, PointHelper, DataHelper, PathArrow } from '@leafer-ui/draw';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+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 ArrowData extends LineData {
+}
+
+let Arrow = class Arrow extends Line {
+    get __tag() { return 'Arrow'; }
+    constructor(data) {
+        super(data);
+        this.__.__useArrow = true;
+    }
+};
+__decorate([
+    dataProcessor(ArrowData)
+], Arrow.prototype, "__", void 0);
+__decorate([
+    strokeType('angle')
+], Arrow.prototype, "endArrow", void 0);
+Arrow = __decorate([
+    registerUI()
+], Arrow);
+
+const { M: M$1, L: L$1, C: C$1, Q: Q$1, O: O$1 } = PathCommandMap;
+const { rotate: rotate$1, copyFrom: copyFrom$1, scale } = PointHelper;
+const point = {};
+const PathMatrixHelper = {
+    layout(data, x, y, scaleX, scaleY, rotation, origin) {
+        let command, i = 0, j, len = data.length;
+        while (i < len) {
+            command = data[i];
+            switch (command) {
+                case M$1:
+                case L$1:
+                    setPoint$1(data, i + 1, x, y, scaleX, scaleY, rotation, origin);
+                    i += 3;
+                    break;
+                case C$1:
+                    for (j = 1; j < 6; j += 2)
+                        setPoint$1(data, i + j, x, y, scaleX, scaleY, rotation, origin);
+                    i += 7;
+                    break;
+                case Q$1:
+                    for (j = 1; j < 4; j += 2)
+                        setPoint$1(data, i + j, x, y, scaleX, scaleY, rotation, origin);
+                    i += 5;
+                    break;
+                case O$1:
+                    data[i + 1] += x;
+                    data[i + 2] += y;
+                    if (scaleX)
+                        data[i + 3] *= scaleX;
+                    if (rotation) {
+                        data[i + 4] += rotation;
+                        data[i + 5] += rotation;
+                    }
+                    i += 7;
+                    break;
+            }
+        }
+    },
+    rotate(data, rotation, center) {
+        PathMatrixHelper.layout(data, 0, 0, 1, 1, rotation, center);
+    }
+};
+function setPoint$1(data, startIndex, x, y, scaleX, scaleY, rotation, origin) {
+    copyFrom$1(point, data[startIndex], data[startIndex + 1]);
+    if (rotation)
+        rotate$1(point, rotation, origin);
+    if (scaleX)
+        scale(point, scaleX, scaleY);
+    data[startIndex] = x + point.x;
+    data[startIndex + 1] = y + point.y;
+}
+
+const { layout, rotate } = PathMatrixHelper;
+const { getAngle } = PointHelper;
+const half = { x: -0.5 };
+const angle = { connect: half, offset: { x: -0.71, bevelJoin: 0.36, roundJoin: 0.22 }, path: [1, -3, -3, 2, 0, 0, 2, -3, 3] };
+const angleSide = { connect: half, offset: { x: -1.207, bevelJoin: 0.854, roundJoin: 0.707 }, path: [1, -3, -3, 2, 0, 0, 2, -1, 0] };
+const triangleLinePath = [1, -3, 0, 2, -3, -2, 2, 0, 0, 2, -3, 2, 2, -3, 0];
+const triangle = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1] };
+const arrowLinePath = [1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0];
+const arrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95] };
+const triangleFlip = { offset: half, path: [...triangle.path], };
+rotate(triangleFlip.path, 180, { x: -1.5, y: 0 });
+const circleLine = { connect: { x: -1.3 }, path: [1, 1.8, -0.1, 2, 1.8, 0, 26, 0, 0, 1.8, 0, 359, 0], };
+const circle = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0] };
+const squareLine = { connect: { x: -1.3 }, path: [1, -1.4, 0, 2, -1.4, -1.4, 2, 1.4, -1.4, 2, 1.4, 1.4, 2, -1.4, 1.4, 2, -1.4, 0] };
+const square = { path: [...squareLine.path, 2, -1.4, -0.49, 2, 1, -0.49, 1, -1.4, 0.49, 2, 1, 0.49] };
+const diamondLine = DataHelper.clone(squareLine);
+const diamond = DataHelper.clone(square);
+rotate(diamondLine.path, 45);
+rotate(diamond.path, 45);
+const mark = { offset: half, path: [1, 0, -2, 2, 0, 2] };
+const arrows = {
+    angle,
+    'angle-side': angleSide,
+    arrow,
+    triangle,
+    'triangle-flip': triangleFlip,
+    circle,
+    'circle-line': circleLine,
+    square,
+    'square-line': squareLine,
+    diamond,
+    'diamond-line': diamondLine,
+    mark,
+};
+function getArrowPath(ui, arrow, from, to, scale, connectOffset) {
+    const { strokeCap, strokeJoin } = ui.__;
+    const { offset, connect, path } = (typeof arrow === 'object' ? arrow : arrows[arrow]);
+    let connectX = connect ? connect.x : 0;
+    let offsetX = offset ? offset.x : 0;
+    const data = [...path];
+    if (strokeCap !== 'none')
+        connectX -= 0.5;
+    if (offset) {
+        if (strokeJoin === 'round' && offset.roundJoin)
+            offsetX += offset.roundJoin;
+        else if (strokeJoin === 'bevel' && offset.bevelJoin)
+            offsetX += offset.bevelJoin;
+    }
+    if (offsetX)
+        layout(data, offsetX, 0);
+    layout(data, to.x, to.y, scale, scale, getAngle(from, to));
+    connectOffset.x = (connectX + offsetX) * scale;
+    return data;
+}
+
+const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = PathCommandMap;
+const { copy, copyFrom, getDistancePoint, } = PointHelper;
+const connectPoint = {};
+const first = {}, second = {};
+const last = {}, now = {};
+const PathArrowModule = {
+    list: arrows,
+    addArrows(ui, changeRenderPath) {
+        const { startArrow, endArrow, strokeWidth, __pathForRender: data } = ui.__;
+        let command, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== 'none';
+        while (i < len) {
+            command = data[i];
+            switch (command) {
+                case M:
+                case L:
+                    if (count < 2 || i + 3 === len) {
+                        copyFrom(now, data[i + 1], data[i + 2]);
+                        if (!count && useStartArrow)
+                            copy(first, now);
+                    }
+                    i += 3;
+                    break;
+                case C:
+                    if (count === 1 || i + 7 === len)
+                        copyPoints(data, last, now, i + 3);
+                    i += 7;
+                    break;
+                case Q:
+                    if (count === 1 || i + 5 === len)
+                        copyPoints(data, last, now, i + 1);
+                    i += 5;
+                    break;
+                case Z:
+                    return;
+                case N:
+                    i += 5;
+                    break;
+                case D:
+                    i += 9;
+                    break;
+                case X:
+                    i += 6;
+                    break;
+                case G:
+                    i += 9;
+                    break;
+                case F:
+                    i += 5;
+                    break;
+                case O:
+                    i += 7;
+                    break;
+                case P:
+                    i += 4;
+                    break;
+                case U:
+                    if (count === 1 || i + 6 === len)
+                        copyPoints(data, last, now, i + 1);
+                    i += 6;
+                    break;
+            }
+            count++;
+            if (count === 1 && command !== M)
+                return;
+            if (count === 2 && useStartArrow)
+                copy(second, command === L ? now : last);
+            if (i === len) {
+                const p = ui.__.__pathForRender = changeRenderPath ? [...data] : data;
+                if (useStartArrow) {
+                    p.push(...getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint));
+                    if (connectPoint.x) {
+                        getDistancePoint(first, second, -connectPoint.x, true);
+                        p[1] = second.x;
+                        p[2] = second.y;
+                    }
+                }
+                if (endArrow && endArrow !== 'none') {
+                    p.push(...getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint));
+                    if (connectPoint.x) {
+                        getDistancePoint(now, last, -connectPoint.x, true);
+                        let index;
+                        switch (command) {
+                            case L:
+                                index = i - 3 + 1;
+                                break;
+                            case C:
+                                index = i - 7 + 5;
+                                break;
+                            case Q:
+                                index = i - 5 + 3;
+                                break;
+                            case U:
+                                index = i - 6 + 3;
+                                break;
+                        }
+                        if (index)
+                            setPoint(p, last, index);
+                    }
+                }
+            }
+            else {
+                copy(last, now);
+            }
+        }
+    }
+};
+function copyPoints(data, from, to, startIndex) {
+    copyFrom(from, data[startIndex], data[startIndex + 1]);
+    copyFrom(to, data[startIndex + 2], data[startIndex + 3]);
+}
+function setPoint(data, point, startIndex) {
+    data[startIndex] = point.x;
+    data[startIndex + 1] = point.y;
+}
+
+Object.assign(PathArrow, PathArrowModule);
+
+export { Arrow, PathArrowModule, PathMatrixHelper };

package/dist/arrow.esm.min.js

@@ -0,0 +1 @@
+import{LineData as e,dataProcessor as t,strokeType as o,registerUI as n,Line as r,PathCommandMap as a,PointHelper as c,DataHelper as s,PathArrow as i}from"@leafer-ui/draw";function l(e,t,o,n){var r,a=arguments.length,c=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,o,n);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(c=(a<3?r(c):a>3?r(t,o,c):r(t,o))||c);return a>3&&c&&Object.defineProperty(t,o,c),c}"function"==typeof SuppressedError&&SuppressedError;let p=class extends r{get __tag(){return"Arrow"}constructor(e){super(e),this.__.__useArrow=!0}};l([t(class extends e{})],p.prototype,"__",void 0),l([o("angle")],p.prototype,"endArrow",void 0),p=l([n()],p);const{M:f,L:u,C:h,Q:d,O:b}=a,{rotate:x,copyFrom:k,scale:y}=c,_={},g={layout(e,t,o,n,r,a,c){let s,i,l=0,p=e.length;for(;l<p;)switch(s=e[l],s){case f:case u:J(e,l+1,t,o,n,r,a,c),l+=3;break;case h:for(i=1;i<6;i+=2)J(e,l+i,t,o,n,r,a,c);l+=7;break;case d:for(i=1;i<4;i+=2)J(e,l+i,t,o,n,r,a,c);l+=5;break;case b:e[l+1]+=t,e[l+2]+=o,n&&(e[l+3]*=n),a&&(e[l+4]+=a,e[l+5]+=a),l+=7}},rotate(e,t,o){g.layout(e,0,0,1,1,t,o)}};function J(e,t,o,n,r,a,c,s){k(_,e[t],e[t+1]),c&&x(_,c,s),r&&y(_,r,a),e[t]=o+_.x,e[t+1]=n+_.y}const{layout:w,rotate:v}=g,{getAngle:m}=c,A={x:-.5},O={connect:A,offset:{x:-.71,bevelJoin:.36,roundJoin:.22},path:[1,-3,-3,2,0,0,2,-3,3]},j={connect:A,offset:{x:-1.207,bevelJoin:.854,roundJoin:.707},path:[1,-3,-3,2,0,0,2,-1,0]},F={connect:A,offset:{x:-.9,bevelJoin:.624,roundJoin:.4},path:[1,-3,0,2,-3,-2,2,0,0,2,-3,2,2,-3,0,1,-2.05,1.1,2,-2.05,-1.1]},R={connect:A,offset:{x:-1.1,bevelJoin:.872,roundJoin:.6},path:[1,-3,0,2,-3.5,-1.8,2,0,0,2,-3.5,1.8,2,-3,0,1,-2.25,.95,2,-2.25,-.95]},P={offset:A,path:[...F.path]};v(P.path,180,{x:-1.5,y:0});const C={connect:{x:-1.3},path:[1,1.8,-.1,2,1.8,0,26,0,0,1.8,0,359,0]},D={connect:{x:.5},path:[...C.path,1,0,0,26,0,0,1,0,360,0]},q={connect:{x:-1.3},path:[1,-1.4,0,2,-1.4,-1.4,2,1.4,-1.4,2,1.4,1.4,2,-1.4,1.4,2,-1.4,0]},E={path:[...q.path,2,-1.4,-.49,2,1,-.49,1,-1.4,.49,2,1,.49]},L=s.clone(q),M=s.clone(E);v(L.path,45),v(M.path,45);const Q={angle:O,"angle-side":j,arrow:R,triangle:F,"triangle-flip":P,circle:D,"circle-line":C,square:E,"square-line":q,diamond:M,"diamond-line":L,mark:{offset:A,path:[1,0,-2,2,0,2]}};function S(e,t,o,n,r,a){const{strokeCap:c,strokeJoin:s}=e.__,{offset:i,connect:l,path:p}="object"==typeof t?t:Q[t];let f=l?l.x:0,u=i?i.x:0;const h=[...p];return"none"!==c&&(f-=.5),i&&("round"===s&&i.roundJoin?u+=i.roundJoin:"bevel"===s&&i.bevelJoin&&(u+=i.bevelJoin)),u&&w(h,u,0),w(h,n.x,n.y,r,r,m(o,n)),a.x=(f+u)*r,h}const{M:G,L:N,C:U,Q:W,Z:X,N:Z,D:z,X:B,G:H,F:I,O:K,P:T,U:V}=a,{copy:Y,copyFrom:$,getDistancePoint:ee}=c,te={},oe={},ne={},re={},ae={},ce={list:Q,addArrows(e,t){const{startArrow:o,endArrow:n,strokeWidth:r,__pathForRender:a}=e.__;let c,s=0,i=a.length,l=0,p=o&&"none"!==o;for(;s<i;){switch(c=a[s],c){case G:case N:(l<2||s+3===i)&&($(ae,a[s+1],a[s+2]),!l&&p&&Y(oe,ae)),s+=3;break;case U:1!==l&&s+7!==i||se(a,re,ae,s+3),s+=7;break;case W:1!==l&&s+5!==i||se(a,re,ae,s+1),s+=5;break;case X:return;case Z:s+=5;break;case z:s+=9;break;case B:s+=6;break;case H:s+=9;break;case I:s+=5;break;case K:s+=7;break;case T:s+=4;break;case V:1!==l&&s+6!==i||se(a,re,ae,s+1),s+=6}if(l++,1===l&&c!==G)return;if(2===l&&p&&Y(ne,c===N?ae:re),s===i){const i=e.__.__pathForRender=t?[...a]:a;if(p&&(i.push(...S(e,o,ne,oe,r,te)),te.x&&(ee(oe,ne,-te.x,!0),i[1]=ne.x,i[2]=ne.y)),n&&"none"!==n&&(i.push(...S(e,n,re,ae,r,te)),te.x)){let e;switch(ee(ae,re,-te.x,!0),c){case N:e=s-3+1;break;case U:e=s-7+5;break;case W:e=s-5+3;break;case V:e=s-6+3}e&&ie(i,re,e)}}else Y(re,ae)}}};function se(e,t,o,n){$(t,e[n],e[n+1]),$(o,e[n+2],e[n+3])}function ie(e,t,o){e[o]=t.x,e[o+1]=t.y}Object.assign(i,ce);export{p as Arrow,ce as PathArrowModule,g as PathMatrixHelper};

package/dist/arrow.js

@@ -0,0 +1,283 @@
+this.LeaferIN = this.LeaferIN || {};
+this.LeaferIN.arrow = (function (exports, draw) {
+    'use strict';
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise, SuppressedError, Symbol */
+
+
+    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 ArrowData extends draw.LineData {
+    }
+
+    exports.Arrow = class Arrow extends draw.Line {
+        get __tag() { return 'Arrow'; }
+        constructor(data) {
+            super(data);
+            this.__.__useArrow = true;
+        }
+    };
+    __decorate([
+        draw.dataProcessor(ArrowData)
+    ], exports.Arrow.prototype, "__", void 0);
+    __decorate([
+        draw.strokeType('angle')
+    ], exports.Arrow.prototype, "endArrow", void 0);
+    exports.Arrow = __decorate([
+        draw.registerUI()
+    ], exports.Arrow);
+
+    const { M: M$1, L: L$1, C: C$1, Q: Q$1, O: O$1 } = draw.PathCommandMap;
+    const { rotate: rotate$1, copyFrom: copyFrom$1, scale } = draw.PointHelper;
+    const point = {};
+    const PathMatrixHelper = {
+        layout(data, x, y, scaleX, scaleY, rotation, origin) {
+            let command, i = 0, j, len = data.length;
+            while (i < len) {
+                command = data[i];
+                switch (command) {
+                    case M$1:
+                    case L$1:
+                        setPoint$1(data, i + 1, x, y, scaleX, scaleY, rotation, origin);
+                        i += 3;
+                        break;
+                    case C$1:
+                        for (j = 1; j < 6; j += 2)
+                            setPoint$1(data, i + j, x, y, scaleX, scaleY, rotation, origin);
+                        i += 7;
+                        break;
+                    case Q$1:
+                        for (j = 1; j < 4; j += 2)
+                            setPoint$1(data, i + j, x, y, scaleX, scaleY, rotation, origin);
+                        i += 5;
+                        break;
+                    case O$1:
+                        data[i + 1] += x;
+                        data[i + 2] += y;
+                        if (scaleX)
+                            data[i + 3] *= scaleX;
+                        if (rotation) {
+                            data[i + 4] += rotation;
+                            data[i + 5] += rotation;
+                        }
+                        i += 7;
+                        break;
+                }
+            }
+        },
+        rotate(data, rotation, center) {
+            PathMatrixHelper.layout(data, 0, 0, 1, 1, rotation, center);
+        }
+    };
+    function setPoint$1(data, startIndex, x, y, scaleX, scaleY, rotation, origin) {
+        copyFrom$1(point, data[startIndex], data[startIndex + 1]);
+        if (rotation)
+            rotate$1(point, rotation, origin);
+        if (scaleX)
+            scale(point, scaleX, scaleY);
+        data[startIndex] = x + point.x;
+        data[startIndex + 1] = y + point.y;
+    }
+
+    const { layout, rotate } = PathMatrixHelper;
+    const { getAngle } = draw.PointHelper;
+    const half = { x: -0.5 };
+    const angle = { connect: half, offset: { x: -0.71, bevelJoin: 0.36, roundJoin: 0.22 }, path: [1, -3, -3, 2, 0, 0, 2, -3, 3] };
+    const angleSide = { connect: half, offset: { x: -1.207, bevelJoin: 0.854, roundJoin: 0.707 }, path: [1, -3, -3, 2, 0, 0, 2, -1, 0] };
+    const triangleLinePath = [1, -3, 0, 2, -3, -2, 2, 0, 0, 2, -3, 2, 2, -3, 0];
+    const triangle = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1] };
+    const arrowLinePath = [1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0];
+    const arrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95] };
+    const triangleFlip = { offset: half, path: [...triangle.path], };
+    rotate(triangleFlip.path, 180, { x: -1.5, y: 0 });
+    const circleLine = { connect: { x: -1.3 }, path: [1, 1.8, -0.1, 2, 1.8, 0, 26, 0, 0, 1.8, 0, 359, 0], };
+    const circle = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0] };
+    const squareLine = { connect: { x: -1.3 }, path: [1, -1.4, 0, 2, -1.4, -1.4, 2, 1.4, -1.4, 2, 1.4, 1.4, 2, -1.4, 1.4, 2, -1.4, 0] };
+    const square = { path: [...squareLine.path, 2, -1.4, -0.49, 2, 1, -0.49, 1, -1.4, 0.49, 2, 1, 0.49] };
+    const diamondLine = draw.DataHelper.clone(squareLine);
+    const diamond = draw.DataHelper.clone(square);
+    rotate(diamondLine.path, 45);
+    rotate(diamond.path, 45);
+    const mark = { offset: half, path: [1, 0, -2, 2, 0, 2] };
+    const arrows = {
+        angle,
+        'angle-side': angleSide,
+        arrow,
+        triangle,
+        'triangle-flip': triangleFlip,
+        circle,
+        'circle-line': circleLine,
+        square,
+        'square-line': squareLine,
+        diamond,
+        'diamond-line': diamondLine,
+        mark,
+    };
+    function getArrowPath(ui, arrow, from, to, scale, connectOffset) {
+        const { strokeCap, strokeJoin } = ui.__;
+        const { offset, connect, path } = (typeof arrow === 'object' ? arrow : arrows[arrow]);
+        let connectX = connect ? connect.x : 0;
+        let offsetX = offset ? offset.x : 0;
+        const data = [...path];
+        if (strokeCap !== 'none')
+            connectX -= 0.5;
+        if (offset) {
+            if (strokeJoin === 'round' && offset.roundJoin)
+                offsetX += offset.roundJoin;
+            else if (strokeJoin === 'bevel' && offset.bevelJoin)
+                offsetX += offset.bevelJoin;
+        }
+        if (offsetX)
+            layout(data, offsetX, 0);
+        layout(data, to.x, to.y, scale, scale, getAngle(from, to));
+        connectOffset.x = (connectX + offsetX) * scale;
+        return data;
+    }
+
+    const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = draw.PathCommandMap;
+    const { copy, copyFrom, getDistancePoint, } = draw.PointHelper;
+    const connectPoint = {};
+    const first = {}, second = {};
+    const last = {}, now = {};
+    const PathArrowModule = {
+        list: arrows,
+        addArrows(ui, changeRenderPath) {
+            const { startArrow, endArrow, strokeWidth, __pathForRender: data } = ui.__;
+            let command, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== 'none';
+            while (i < len) {
+                command = data[i];
+                switch (command) {
+                    case M:
+                    case L:
+                        if (count < 2 || i + 3 === len) {
+                            copyFrom(now, data[i + 1], data[i + 2]);
+                            if (!count && useStartArrow)
+                                copy(first, now);
+                        }
+                        i += 3;
+                        break;
+                    case C:
+                        if (count === 1 || i + 7 === len)
+                            copyPoints(data, last, now, i + 3);
+                        i += 7;
+                        break;
+                    case Q:
+                        if (count === 1 || i + 5 === len)
+                            copyPoints(data, last, now, i + 1);
+                        i += 5;
+                        break;
+                    case Z:
+                        return;
+                    case N:
+                        i += 5;
+                        break;
+                    case D:
+                        i += 9;
+                        break;
+                    case X:
+                        i += 6;
+                        break;
+                    case G:
+                        i += 9;
+                        break;
+                    case F:
+                        i += 5;
+                        break;
+                    case O:
+                        i += 7;
+                        break;
+                    case P:
+                        i += 4;
+                        break;
+                    case U:
+                        if (count === 1 || i + 6 === len)
+                            copyPoints(data, last, now, i + 1);
+                        i += 6;
+                        break;
+                }
+                count++;
+                if (count === 1 && command !== M)
+                    return;
+                if (count === 2 && useStartArrow)
+                    copy(second, command === L ? now : last);
+                if (i === len) {
+                    const p = ui.__.__pathForRender = changeRenderPath ? [...data] : data;
+                    if (useStartArrow) {
+                        p.push(...getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint));
+                        if (connectPoint.x) {
+                            getDistancePoint(first, second, -connectPoint.x, true);
+                            p[1] = second.x;
+                            p[2] = second.y;
+                        }
+                    }
+                    if (endArrow && endArrow !== 'none') {
+                        p.push(...getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint));
+                        if (connectPoint.x) {
+                            getDistancePoint(now, last, -connectPoint.x, true);
+                            let index;
+                            switch (command) {
+                                case L:
+                                    index = i - 3 + 1;
+                                    break;
+                                case C:
+                                    index = i - 7 + 5;
+                                    break;
+                                case Q:
+                                    index = i - 5 + 3;
+                                    break;
+                                case U:
+                                    index = i - 6 + 3;
+                                    break;
+                            }
+                            if (index)
+                                setPoint(p, last, index);
+                        }
+                    }
+                }
+                else {
+                    copy(last, now);
+                }
+            }
+        }
+    };
+    function copyPoints(data, from, to, startIndex) {
+        copyFrom(from, data[startIndex], data[startIndex + 1]);
+        copyFrom(to, data[startIndex + 2], data[startIndex + 3]);
+    }
+    function setPoint(data, point, startIndex) {
+        data[startIndex] = point.x;
+        data[startIndex + 1] = point.y;
+    }
+
+    Object.assign(draw.PathArrow, PathArrowModule);
+
+    exports.PathArrowModule = PathArrowModule;
+    exports.PathMatrixHelper = PathMatrixHelper;
+
+    return exports;
+
+})({}, LeaferUI);

package/dist/arrow.min.js

@@ -0,0 +1 @@
+this.LeaferIN=this.LeaferIN||{},this.LeaferIN.arrow=function(e,t){"use strict";function r(e,t,r,o){var a,n=arguments.length,c=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,r,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(c=(n<3?a(c):n>3?a(t,r,c):a(t,r))||c);return n>3&&c&&Object.defineProperty(t,r,c),c}"function"==typeof SuppressedError&&SuppressedError;class o extends t.LineData{}e.Arrow=class extends t.Line{get __tag(){return"Arrow"}constructor(e){super(e),this.__.__useArrow=!0}},r([t.dataProcessor(o)],e.Arrow.prototype,"__",void 0),r([t.strokeType("angle")],e.Arrow.prototype,"endArrow",void 0),e.Arrow=r([t.registerUI()],e.Arrow);const{M:a,L:n,C:c,Q:s,O:i}=t.PathCommandMap,{rotate:p,copyFrom:l,scale:f}=t.PointHelper,h={},u={layout(e,t,r,o,p,l,f){let h,u,b=0,x=e.length;for(;b<x;)switch(h=e[b],h){case a:case n:d(e,b+1,t,r,o,p,l,f),b+=3;break;case c:for(u=1;u<6;u+=2)d(e,b+u,t,r,o,p,l,f);b+=7;break;case s:for(u=1;u<4;u+=2)d(e,b+u,t,r,o,p,l,f);b+=5;break;case i:e[b+1]+=t,e[b+2]+=r,o&&(e[b+3]*=o),l&&(e[b+4]+=l,e[b+5]+=l),b+=7}},rotate(e,t,r){u.layout(e,0,0,1,1,t,r)}};function d(e,t,r,o,a,n,c,s){l(h,e[t],e[t+1]),c&&p(h,c,s),a&&f(h,a,n),e[t]=r+h.x,e[t+1]=o+h.y}const{layout:b,rotate:x}=u,{getAngle:k}=t.PointHelper,y={x:-.5},w={connect:y,offset:{x:-.71,bevelJoin:.36,roundJoin:.22},path:[1,-3,-3,2,0,0,2,-3,3]},_={connect:y,offset:{x:-1.207,bevelJoin:.854,roundJoin:.707},path:[1,-3,-3,2,0,0,2,-1,0]},g={connect:y,offset:{x:-.9,bevelJoin:.624,roundJoin:.4},path:[1,-3,0,2,-3,-2,2,0,0,2,-3,2,2,-3,0,1,-2.05,1.1,2,-2.05,-1.1]},A={connect:y,offset:{x:-1.1,bevelJoin:.872,roundJoin:.6},path:[1,-3,0,2,-3.5,-1.8,2,0,0,2,-3.5,1.8,2,-3,0,1,-2.25,.95,2,-2.25,-.95]},J={offset:y,path:[...g.path]};x(J.path,180,{x:-1.5,y:0});const P={connect:{x:-1.3},path:[1,1.8,-.1,2,1.8,0,26,0,0,1.8,0,359,0]},v={connect:{x:.5},path:[...P.path,1,0,0,26,0,0,1,0,360,0]},m={connect:{x:-1.3},path:[1,-1.4,0,2,-1.4,-1.4,2,1.4,-1.4,2,1.4,1.4,2,-1.4,1.4,2,-1.4,0]},L={path:[...m.path,2,-1.4,-.49,2,1,-.49,1,-1.4,.49,2,1,.49]},D=t.DataHelper.clone(m),H=t.DataHelper.clone(L);x(D.path,45),x(H.path,45);const M={angle:w,"angle-side":_,arrow:A,triangle:g,"triangle-flip":J,circle:v,"circle-line":P,square:L,"square-line":m,diamond:H,"diamond-line":D,mark:{offset:y,path:[1,0,-2,2,0,2]}};function O(e,t,r,o,a,n){const{strokeCap:c,strokeJoin:s}=e.__,{offset:i,connect:p,path:l}="object"==typeof t?t:M[t];let f=p?p.x:0,h=i?i.x:0;const u=[...l];return"none"!==c&&(f-=.5),i&&("round"===s&&i.roundJoin?h+=i.roundJoin:"bevel"===s&&i.bevelJoin&&(h+=i.bevelJoin)),h&&b(u,h,0),b(u,o.x,o.y,a,a,k(r,o)),n.x=(f+h)*a,u}const{M:j,L:C,C:F,Q:I,Z:R,N:N,D:U,X:q,G:E,F:Q,O:S,P:G,U:T}=t.PathCommandMap,{copy:W,copyFrom:X,getDistancePoint:Z}=t.PointHelper,z={},B={},K={},V={},Y={},$={list:M,addArrows(e,t){const{startArrow:r,endArrow:o,strokeWidth:a,__pathForRender:n}=e.__;let c,s=0,i=n.length,p=0,l=r&&"none"!==r;for(;s<i;){switch(c=n[s],c){case j:case C:(p<2||s+3===i)&&(X(Y,n[s+1],n[s+2]),!p&&l&&W(B,Y)),s+=3;break;case F:1!==p&&s+7!==i||ee(n,V,Y,s+3),s+=7;break;case I:1!==p&&s+5!==i||ee(n,V,Y,s+1),s+=5;break;case R:return;case N:s+=5;break;case U:s+=9;break;case q:s+=6;break;case E:s+=9;break;case Q:s+=5;break;case S:s+=7;break;case G:s+=4;break;case T:1!==p&&s+6!==i||ee(n,V,Y,s+1),s+=6}if(p++,1===p&&c!==j)return;if(2===p&&l&&W(K,c===C?Y:V),s===i){const i=e.__.__pathForRender=t?[...n]:n;if(l&&(i.push(...O(e,r,K,B,a,z)),z.x&&(Z(B,K,-z.x,!0),i[1]=K.x,i[2]=K.y)),o&&"none"!==o&&(i.push(...O(e,o,V,Y,a,z)),z.x)){let e;switch(Z(Y,V,-z.x,!0),c){case C:e=s-3+1;break;case F:e=s-7+5;break;case I:e=s-5+3;break;case T:e=s-6+3}e&&te(i,V,e)}}else W(V,Y)}}};function ee(e,t,r,o){X(t,e[o],e[o+1]),X(r,e[o+2],e[o+3])}function te(e,t,r){e[r]=t.x,e[r+1]=t.y}return Object.assign(t.PathArrow,$),e.PathArrowModule=$,e.PathMatrixHelper=u,e}({},LeaferUI);

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@leafer-in/arrow",
+  "version": "1.0.0-rc.16",
+  "description": "@leafer-in/arrow",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "main": "dist/arrow.esm.js",
+  "unpkg": "dist/arrow.js",
+  "jsdelivr": "dist/arrow.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/in.git"
+  },
+  "homepage": "https://github.com/leaferjs/in/tree/main/packages/arrow",
+  "bugs": "https://github.com/leaferjs/in/issues",
+  "keywords": [
+    "leafer arrow",
+    "leafer-arrow",
+    "leafer-in",
+    "arrow",
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "dependencies": {
+    "@leafer-ui/draw": "1.0.0-rc.16"
+  },
+  "devDependencies": {
+    "@leafer-ui/interface": "1.0.0-rc.16",
+    "@leafer-in/interface": "1.0.0-rc.16"
+  }
+}

package/src/Arrow.ts

@@ -0,0 +1,23 @@
+import { IArrow, IArrowData, IArrowInputData, IArrowType } from '@leafer-ui/interface'
+import { Line, registerUI, strokeType, dataProcessor } from '@leafer-ui/draw'
+
+import { ArrowData } from './data/ArrowData'
+
+
+@registerUI()
+export class Arrow extends Line implements IArrow {
+
+    public get __tag() { return 'Arrow' }
+
+    @dataProcessor(ArrowData)
+    declare public __: IArrowData
+
+    @strokeType('angle')
+    declare public endArrow: IArrowType
+
+    constructor(data?: IArrowInputData) {
+        super(data)
+        this.__.__useArrow = true
+    }
+
+}

package/src/PathArrowModule.ts

@@ -0,0 +1,136 @@
+import { IPathArrowModule, IUI, IPathCommandData, IPointData } from '@leafer-ui/interface'
+import { PathCommandMap as Command, PointHelper } from '@leafer-ui/draw'
+
+import { arrows, getArrowPath } from './data/arrows'
+
+
+const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = Command
+const { copy, copyFrom, getDistancePoint, } = PointHelper
+
+const connectPoint = {} as IPointData
+const first = {} as IPointData, second = {} as IPointData
+const last = {} as IPointData, now = {} as IPointData
+
+export const PathArrowModule: IPathArrowModule = {
+
+    list: arrows,
+
+    addArrows(ui: IUI, changeRenderPath?: boolean): void {
+        const { startArrow, endArrow, strokeWidth, __pathForRender: data } = ui.__
+
+        let command: number, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== 'none'
+
+        while (i < len) {
+
+            command = data[i]
+
+            switch (command) {
+                case M:  // moveto(x, y)
+                case L:  // lineto(x, y)
+                    if (count < 2 || i + 3 === len) {
+                        copyFrom(now, data[i + 1], data[i + 2])
+                        if (!count && useStartArrow) copy(first, now)
+                    }
+                    i += 3
+                    break
+                case C:  // bezierCurveTo(x1, y1, x2, y2, x, y)
+                    if (count === 1 || i + 7 === len) copyPoints(data, last, now, i + 3)
+                    i += 7
+                    break
+                case Q:  // quadraticCurveTo(x1, y1, x, y)
+                    if (count === 1 || i + 5 === len) copyPoints(data, last, now, i + 1)
+                    i += 5
+                    break
+                case Z:  // closepath()
+                    return // no arrow
+
+                // canvas command
+
+                case N: // rect(x, y, width, height)
+                    i += 5
+                    break
+                case D: // roundRect(x, y, width, height, radius1, radius2, radius3, radius4)
+                    i += 9
+                    break
+                case X: // simple roundRect(x, y, width, height, radius)
+                    i += 6
+                    break
+                case G: // ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
+                    i += 9
+                    break
+                case F: // simple ellipse(x, y, radiusX, radiusY)
+                    i += 5
+                    break
+                case O: // arc(x, y, radius, startAngle, endAngle, anticlockwise)
+                    i += 7
+                    break
+                case P: // simple arc(x, y, radius)
+                    i += 4
+                    break
+                case U: // arcTo(x1, y1, x2, y2, radius)
+                    if (count === 1 || i + 6 === len) copyPoints(data, last, now, i + 1)
+                    i += 6
+                    break
+            }
+
+            count++
+
+            if (count === 1 && command !== M) return // no arrow
+            if (count === 2 && useStartArrow) copy(second, command === L ? now : last)
+
+            if (i === len) {
+                const p = ui.__.__pathForRender = changeRenderPath ? [...data] : data
+
+                if (useStartArrow) {
+                    p.push(...getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint))
+
+                    if (connectPoint.x) {
+                        getDistancePoint(first, second, -connectPoint.x, true)
+                        p[1] = second.x
+                        p[2] = second.y
+                    }
+                }
+
+                if (endArrow && endArrow !== 'none') {
+                    p.push(...getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint))
+
+                    if (connectPoint.x) {
+                        getDistancePoint(now, last, -connectPoint.x, true)
+                        let index: number
+                        switch (command) {
+                            case L:  //lineto(x, y)
+                                index = i - 3 + 1
+                                break
+                            case C:  //bezierCurveTo(x1, y1, x2, y2, x, y)
+                                index = i - 7 + 5
+                                break
+                            case Q:  //quadraticCurveTo(x1, y1, x, y)
+                                index = i - 5 + 3
+                                break
+                            case U: // arcTo(x1, y1, x2, y2, radius)
+                                index = i - 6 + 3
+                                break
+                        }
+                        if (index) setPoint(p, last, index)
+                    }
+                }
+
+            } else {
+                copy(last, now)
+            }
+        }
+
+
+    }
+}
+
+
+function copyPoints(data: IPathCommandData, from: IPointData, to: IPointData, startIndex: number): void {
+    copyFrom(from, data[startIndex], data[startIndex + 1])
+    copyFrom(to, data[startIndex + 2], data[startIndex + 3])
+}
+
+function setPoint(data: IPathCommandData, point: IPointData, startIndex: number): void {
+    data[startIndex] = point.x
+    data[startIndex + 1] = point.y
+}

package/src/PathMatrixHelper.ts

@@ -0,0 +1,57 @@
+import { IPathCommandData, IPointData } from '@leafer-ui/interface'
+import { PathCommandMap as Command, PointHelper } from '@leafer-ui/draw'
+
+
+const { M, L, C, Q, O } = Command
+const { rotate, copyFrom, scale } = PointHelper
+const point: IPointData = {} as IPointData
+
+export const PathMatrixHelper = {
+
+    layout(data: IPathCommandData, x: number, y: number, scaleX?: number, scaleY?: number, rotation?: number, origin?: IPointData): void {
+        let command: number, i = 0, j: number, len = data.length
+
+        while (i < len) {
+            command = data[i]
+            switch (command) {
+                case M:  // moveto(x, y)
+                case L:  // lineto(x, y)
+                    setPoint(data, i + 1, x, y, scaleX, scaleY, rotation, origin)
+                    i += 3
+                    break
+                case C:  // bezierCurveTo(x1, y1, x2, y2, x, y)
+                    for (j = 1; j < 6; j += 2) setPoint(data, i + j, x, y, scaleX, scaleY, rotation, origin)
+                    i += 7
+                    break
+                case Q:  // quadraticCurveTo(x1, y1, x, y)
+                    for (j = 1; j < 4; j += 2) setPoint(data, i + j, x, y, scaleX, scaleY, rotation, origin)
+                    i += 5
+                    break
+                case O: // arc(x, y, radius, startAngle, endAngle, anticlockwise)
+                    data[i + 1] += x
+                    data[i + 2] += y
+                    if (scaleX) data[i + 3] *= scaleX
+                    if (rotation) {
+                        data[i + 4] += rotation
+                        data[i + 5] += rotation
+                    }
+                    i += 7
+                    break
+            }
+        }
+    },
+
+    rotate(data: IPathCommandData, rotation?: number, center?: IPointData): void {
+        PathMatrixHelper.layout(data, 0, 0, 1, 1, rotation, center)
+    }
+
+}
+
+
+function setPoint(data: IPathCommandData, startIndex: number, x: number, y: number, scaleX?: number, scaleY?: number, rotation?: number, origin?: IPointData): void {
+    copyFrom(point, data[startIndex], data[startIndex + 1])
+    if (rotation) rotate(point, rotation, origin)
+    if (scaleX) scale(point, scaleX, scaleY)
+    data[startIndex] = x + point.x
+    data[startIndex + 1] = y + point.y
+}

package/src/data/ArrowData.ts

@@ -0,0 +1,7 @@
+import { IArrowData } from "@leafer-ui/interface"
+import { LineData } from '@leafer-ui/draw'
+
+
+export class ArrowData extends LineData implements IArrowData {
+
+}

package/src/data/arrows.ts

@@ -0,0 +1,78 @@
+import { IArrowType, IPathDataArrow, IPathDataArrowMap, IUI, IPathCommandData, IPointData } from '@leafer-ui/interface'
+import { DataHelper, PointHelper } from '@leafer-ui/draw'
+
+import { PathMatrixHelper } from '../PathMatrixHelper'
+
+
+const { layout, rotate } = PathMatrixHelper
+const { getAngle } = PointHelper
+const half = { x: -0.5 }
+
+
+const angle: IPathDataArrow = { connect: half, offset: { x: -0.71, bevelJoin: 0.36, roundJoin: 0.22 }, path: [1, -3, -3, 2, 0, 0, 2, -3, 3] } // moveTo(-3, -3).lineTo(0, 0).lineTo(-3, 3)
+const angleSide: IPathDataArrow = { connect: half, offset: { x: -1.207, bevelJoin: 0.854, roundJoin: 0.707 }, path: [1, -3, -3, 2, 0, 0, 2, -1, 0] } // moveTo(-3, -3).lineTo(0, 0).lineTo(-1, 0)
+
+const triangleLinePath = [1, -3, 0, 2, -3, -2, 2, 0, 0, 2, -3, 2, 2, -3, 0]  // moveTo(-3, 0).lineTo(-3, -2).lineTo(0, 0).lineTo(-3, 2).lineTo(-3, 0)
+const triangle: IPathDataArrow = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1] } // fill: moveTo(-2.05, 1.1).lineTo(-2.05, -1.1)
+
+const arrowLinePath = [1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0]  // moveTo(-3, 0).lineTo(-3.5, -1.8).lineTo(0, 0).lineTo(-3.5, 1.8).lineTo(-3, 0)
+const arrow: IPathDataArrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95] } // fill: moveTo(-2.25, 0.95).lineTo(-2.25, -0.95)
+
+const triangleFlip: IPathDataArrow = { offset: half, path: [...triangle.path], } // triangle rotate 180
+rotate(triangleFlip.path, 180, { x: -1.5, y: 0 })
+
+const circleLine: IPathDataArrow = { connect: { x: -1.3 }, path: [1, 1.8, -0.1, 2, 1.8, 0, 26, 0, 0, 1.8, 0, 359, 0], }  //drawArc(0, 0, 2, 0, 360)
+const circle: IPathDataArrow = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0] } // fill: moveTo(0,0).arc(0, 0, 1, 0, 360)
+
+const squareLine: IPathDataArrow = { connect: { x: -1.3 }, path: [1, -1.4, 0, 2, -1.4, -1.4, 2, 1.4, -1.4, 2, 1.4, 1.4, 2, -1.4, 1.4, 2, -1.4, 0] } // moveTo(-1.4, 0).lineTo(-1.4, -1.4).lineTo(1.4, -1.4).lineTo(1.4, 1.4).lineTo(-1.4, 1.4).lineTo(-1.4, 0)
+const square: IPathDataArrow = { path: [...squareLine.path, 2, -1.4, -0.49, 2, 1, -0.49, 1, -1.4, 0.49, 2, 1, 0.49] } // fill: moveTo(-1.4, -0.49).lineTo(1, -0.49).moveTo(-1.4, 0.49).lineTo(1, 0.49)
+
+const diamondLine = DataHelper.clone(squareLine) as IPathDataArrow // square-line rotate 45
+const diamond: IPathDataArrow = DataHelper.clone(square) as IPathDataArrow // square rotate 45
+rotate(diamondLine.path, 45)
+rotate(diamond.path, 45)
+
+const mark: IPathDataArrow = { offset: half, path: [1, 0, -2, 2, 0, 2] } // moveTo(0, -2).lineTo(0, 2)
+
+export const arrows: IPathDataArrowMap = {
+    angle,
+    'angle-side': angleSide,
+
+    arrow,
+    triangle,
+    'triangle-flip': triangleFlip,
+
+    circle,
+    'circle-line': circleLine,
+
+    square,
+    'square-line': squareLine,
+
+    diamond,
+    'diamond-line': diamondLine,
+
+    mark,
+
+}
+
+export function getArrowPath(ui: IUI, arrow: IArrowType, from: IPointData, to: IPointData, scale: number, connectOffset: IPointData): IPathCommandData {
+    const { strokeCap, strokeJoin } = ui.__
+    const { offset, connect, path } = (typeof arrow === 'object' ? arrow : arrows[arrow])
+
+    let connectX = connect ? connect.x : 0
+    let offsetX = offset ? offset.x : 0
+
+    const data = [...path]
+
+    if (strokeCap !== 'none') connectX -= 0.5
+    if (offset) {
+        if (strokeJoin === 'round' && offset.roundJoin) offsetX += offset.roundJoin
+        else if (strokeJoin === 'bevel' && offset.bevelJoin) offsetX += offset.bevelJoin
+    }
+
+    if (offsetX) layout(data, offsetX, 0)
+    layout(data, to.x, to.y, scale, scale, getAngle(from, to))
+
+    connectOffset.x = (connectX + offsetX) * scale
+    return data
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export { Arrow } from './Arrow'
+export { PathArrowModule } from './PathArrowModule'
+export { PathMatrixHelper } from './PathMatrixHelper'
+
+import { PathArrow } from '@leafer-ui/draw'
+import { PathArrowModule } from './PathArrowModule'
+
+
+Object.assign(PathArrow, PathArrowModule)

package/types/index.d.ts

@@ -0,0 +1,18 @@
+import { IArrow, IArrowData, IArrowType, IArrowInputData, IPathArrowModule, IPathCommandData, IPointData } from '@leafer-ui/interface';
+import { Line } from '@leafer-ui/draw';
+
+declare class Arrow extends Line implements IArrow {
+    get __tag(): string;
+    __: IArrowData;
+    endArrow: IArrowType;
+    constructor(data?: IArrowInputData);
+}
+
+declare const PathArrowModule: IPathArrowModule;
+
+declare const PathMatrixHelper: {
+    layout(data: IPathCommandData, x: number, y: number, scaleX?: number, scaleY?: number, rotation?: number, origin?: IPointData): void;
+    rotate(data: IPathCommandData, rotation?: number, center?: IPointData): void;
+};
+
+export { Arrow, PathArrowModule, PathMatrixHelper };