@leafer-in/arrow 2.0.2 → 2.0.4

package/dist/arrow.cjs

@@ -106,12 +106,14 @@ const {layout: layout, rotate: rotate} = PathMatrixHelper;
 
 const {getAngle: getAngle} = draw.PointHelper;
 
-const half = {
+const zero = {
+    x: 0
+}, half = {
     x: -.5
 };
 
 const angle = {
-    connect: half,
+    connect: zero,
     offset: {
         x: -.71,
         bevelJoin: .36,
@@ -132,73 +134,110 @@ const angleSide = {
 
 const triangleLinePath = [ 1, -3, 0, 2, -3, -2, 2, 0, 0, 2, -3, 2, 2, -3, 0 ];
 
-const triangle = {
-    connect: half,
+const triangleFill = {
+    connect: zero,
     offset: {
         x: -.9,
         bevelJoin: .624,
         roundJoin: .4
     },
-    path: [ ...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1 ],
-    dashPath: [ 1, -2, 0, 2, -.5, 0 ]
+    path: [ ...triangleLinePath ]
 };
 
-const arrowLinePath = [ 1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0 ];
+const triangle = draw.DataHelper.clone(triangleFill);
 
-const arrow = {
-    connect: half,
-    offset: {
-        x: -1.1,
-        bevelJoin: .872,
-        roundJoin: .6
-    },
-    path: [ ...arrowLinePath, 1, -2.25, .95, 2, -2.25, -.95 ],
-    dashPath: [ 1, -3, 0, 2, -.5, 0 ]
+triangle.path = [ ...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1 ];
+
+triangle.dashPath = [ 1, -2, 0, 2, -.5, 0 ];
+
+const triangleFlipFill = {
+    connect: zero,
+    offset: half,
+    path: [ ...triangleFill.path ]
 };
 
 const triangleFlip = {
+    connect: zero,
     offset: half,
     path: [ ...triangle.path ],
     dashPath: [ 1, -2.5, 0, 2, -1, 0 ]
 };
 
+rotate(triangleFlipFill.path, 180, {
+    x: -1.5,
+    y: 0
+});
+
 rotate(triangleFlip.path, 180, {
     x: -1.5,
     y: 0
 });
 
+const arrowLinePath = [ 1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0 ];
+
+const arrowFill = {
+    connect: zero,
+    offset: {
+        x: -1.1,
+        bevelJoin: .872,
+        roundJoin: .6
+    },
+    path: [ ...arrowLinePath ]
+};
+
+const arrow = draw.DataHelper.clone(arrowFill);
+
+arrow.path = [ ...arrowLinePath, 1, -2.25, .95, 2, -2.25, -.95 ];
+
+arrow.dashPath = [ 1, -3, 0, 2, -.5, 0 ];
+
 const circleLine = {
     connect: {
-        x: -1.3
+        x: -1.8
     },
     path: [ 1, 1.8, -.1, 2, 1.8, 0, 26, 0, 0, 1.8, 0, 359, 0 ]
 };
 
-const circle = {
+const circleFill = {
     connect: {
         x: .5
     },
-    path: [ ...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0 ],
-    dashPath: [ 1, -.5, 0, 2, .5, 0 ]
+    path: [ ...circleLine.path ]
 };
 
+const circle = draw.DataHelper.clone(circleFill);
+
+circle.path = [ ...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0 ];
+
+circle.dashPath = [ 1, -.5, 0, 2, .5, 0 ];
+
 const squareLine = {
     connect: {
-        x: -1.3
+        x: -1.4
     },
     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 squareFill = {
+    path: [ ...squareLine.path ]
+};
+
 const square = {
     path: [ ...squareLine.path, 2, -1.4, -.49, 2, 1, -.49, 1, -1.4, .49, 2, 1, .49 ]
 };
 
 const diamondLine = draw.DataHelper.clone(squareLine);
 
+diamondLine.connect.x = -1.9;
+
+const diamondFill = draw.DataHelper.clone(squareFill);
+
 const diamond = draw.DataHelper.clone(square);
 
 rotate(diamondLine.path, 45);
 
+rotate(diamondFill.path, 45);
+
 rotate(diamond.path, 45);
 
 const mark = {
@@ -221,19 +260,34 @@ const arrows = {
     mark: mark
 };
 
+const fillArrows = {
+    triangle: triangleFill,
+    "triangle-flip": triangleFlipFill,
+    arrow: arrowFill,
+    circle: circleFill,
+    square: squareFill,
+    diamond: diamondFill
+};
+
 function getArrowPath(ui, arrow, from, to, size, connectOffset, hasDashPattern) {
-    let pathData, scale;
+    let pathData, scale = 1, rotation = 0, fill;
     const {strokeCap: strokeCap, strokeJoin: strokeJoin} = ui.__;
     if (draw.isObject(arrow)) {
         if (arrow.type) {
-            scale = arrow.scale;
+            scale = arrow.scale || 1;
+            rotation = arrow.rotation || 0;
             pathData = arrows[arrow.type];
+            if (scale > 1) {
+                const fillData = fillArrows[arrow.type];
+                if (fillData) pathData = fillData, fill = true;
+            }
         } else pathData = arrow;
     } else {
         pathData = arrows[arrow];
     }
+    if (!fill) fill = pathData.fill;
     const {offset: offset, connect: connect, path: path, dashPath: dashPath} = pathData;
-    let connectX = connect ? connect.x : 0;
+    let connectX = connect ? connect.x * scale : 0;
     let offsetX = offset ? offset.x : 0;
     const data = [ ...path ];
     if (hasDashPattern && dashPath) data.push(...dashPath);
@@ -241,28 +295,38 @@ function getArrowPath(ui, arrow, from, to, size, connectOffset, hasDashPattern)
     if (offset) {
         if (strokeJoin === "round" && offset.roundJoin) offsetX += offset.roundJoin; else if (strokeJoin === "bevel" && offset.bevelJoin) offsetX += offset.bevelJoin;
     }
-    if (scale) layout(data, 0, 0, scale, scale);
+    if (scale !== 1) layout(data, 0, 0, scale, scale);
     if (offsetX) layout(data, offsetX, 0);
-    layout(data, to.x, to.y, size, size, getAngle(from, to));
+    layout(data, to.x, to.y, size, size, getAngle(from, to) + rotation);
     connectOffset.x = (connectX + offsetX) * size;
-    return data;
+    const arrowData = {
+        data: data
+    };
+    if (fill) arrowData.fill = fill;
+    return arrowData;
 }
 
 const {M: M, L: L, C: C, Q: Q, Z: Z, N: N, D: D, X: X, G: G, F: F, O: O, P: P, U: U} = draw.PathCommandMap;
 
-const {copy: copy, copyFrom: copyFrom, getDistancePoint: getDistancePoint} = draw.PointHelper;
+const {copy: copy, copyFrom: copyFrom, getDistancePoint: getDistancePoint, isSame: isSame} = draw.PointHelper;
+
+const {stintSet: stintSet} = draw.DataHelper;
 
 const connectPoint = {};
 
 const first = {}, second = {};
 
-const last = {}, now = {};
+const old = {}, last = {}, now = {};
 
 const PathArrowModule = {
     list: arrows,
-    addArrows(ui) {
-        const {startArrow: startArrow, endArrow: endArrow, strokeWidth: strokeWidth, dashPattern: dashPattern, __pathForRender: data, cornerRadius: cornerRadius} = ui.__;
+    fillList: fillArrows,
+    addArrows(ui, updateCache) {
+        const uData = ui.__;
+        const {startArrow: startArrow, endArrow: endArrow, __strokeWidth: strokeWidth, dashPattern: dashPattern, __pathForRender: data, cornerRadius: cornerRadius} = uData;
         const clonePathForArrow = !cornerRadius;
+        if (!updateCache) uData.__strokeWidthCache = strokeWidth;
+        let startArrowPath, singleStartArrow, endArrowPath, singleEndArrow;
         let command, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== "none";
         while (i < len) {
             command = data[i];
@@ -270,6 +334,7 @@ const PathArrowModule = {
               case M:
               case L:
                 if (count < 2 || i + 6 >= len) {
+                    copy(old, now);
                     copyFrom(now, data[i + 1], data[i + 2]);
                     if (!count && useStartArrow) copy(first, now);
                 }
@@ -277,12 +342,18 @@ const PathArrowModule = {
                 break;
 
               case C:
-                if (count === 1 || i + 7 >= len - 3) copyPoints(data, last, now, i + 3);
+                if (count === 1 || i + 7 >= len - 3) {
+                    copyPoints(data, last, now, i + 3);
+                    old.x = data[i + 1], old.y = data[i + 2];
+                }
                 i += 7;
                 break;
 
               case Q:
-                if (count === 1 || i + 5 >= len - 3) copyPoints(data, last, now, i + 1);
+                if (count === 1 || i + 5 >= len - 3) {
+                    copyPoints(data, last, now, i + 1);
+                    copy(old, last);
+                }
                 i += 5;
                 break;
 
@@ -320,6 +391,7 @@ const PathArrowModule = {
               case U:
                 if (count === 1 || i + 6 >= len - 3) {
                     copyPoints(data, last, now, i + 1);
+                    copy(old, last);
                     if (i + 6 !== len) {
                         now.x -= (now.x - last.x) / 10;
                         now.y -= (now.y - last.y) / 10;
@@ -330,13 +402,13 @@ const PathArrowModule = {
             }
             count++;
             if (count === 1 && command !== M) return;
-            if (count === 2 && useStartArrow) copy(second, command === L ? now : last);
+            if (count === 2 && useStartArrow) copy(second, command === L ? now : isSame(old, first) ? last : old);
             if (i === len) {
-                const path = ui.__.__pathForRender = clonePathForArrow ? [ ...data ] : data;
-                const pathForArrow = ui.__.__pathForArrow = [];
+                const path = uData.__pathForRender = clonePathForArrow ? [ ...data ] : data;
                 if (useStartArrow) {
-                    const startArrowPath = getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint, !!dashPattern);
-                    dashPattern ? pathForArrow.push(...startArrowPath) : path.push(...startArrowPath);
+                    startArrowPath = getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint, !!dashPattern);
+                    singleStartArrow = startArrowPath.fill || dashPattern;
+                    if (!singleStartArrow) path.push(...startArrowPath.data);
                     if (connectPoint.x) {
                         getDistancePoint(first, second, -connectPoint.x, true);
                         path[1] = second.x;
@@ -344,8 +416,10 @@ const PathArrowModule = {
                     }
                 }
                 if (endArrow && endArrow !== "none") {
-                    const endArrowPath = getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint, !!dashPattern);
-                    dashPattern ? pathForArrow.push(...endArrowPath) : path.push(...endArrowPath);
+                    if (isSame(last, now)) copy(last, old);
+                    endArrowPath = getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint, !!dashPattern);
+                    singleEndArrow = endArrowPath.fill || dashPattern;
+                    if (!singleEndArrow) path.push(...endArrowPath.data);
                     if (connectPoint.x) {
                         getDistancePoint(now, last, -connectPoint.x, true);
                         let index;
@@ -372,10 +446,21 @@ const PathArrowModule = {
             } else {
                 copy(last, now);
             }
+            stintSet(uData, "__startArrowPath", singleStartArrow && startArrowPath);
+            stintSet(uData, "__endArrowPath", singleEndArrow && endArrowPath);
+        }
+    },
+    updateArrow(ui) {
+        const data = ui.__;
+        if (data.strokeScaleFixed) {
+            if (data.__strokeWidthCache !== data.__strokeWidth) {
+                ui.__updateRenderPath(true);
+            }
         }
     },
-    register(name, data) {
+    register(name, data, fillData) {
         this.list[name] = data;
+        if (fillData) this.fillList[name] = data;
     },
     get(name) {
         return this.list[name];
@@ -401,12 +486,26 @@ draw.UI.addAttr("endArrow", "none", arrowType);
 Object.assign(draw.PathArrow, PathArrowModule);
 
 Object.assign(draw.Paint, {
-    strokeArrow(_stroke, ui, canvas, _renderOptions) {
-        if (ui.__.dashPattern) {
+    strokeArrow(stroke, ui, canvas, _renderOptions) {
+        const {__startArrowPath: __startArrowPath, __endArrowPath: __endArrowPath, dashPattern: dashPattern} = ui.__;
+        if (dashPattern) canvas.dashPattern = null;
+        if (__startArrowPath) {
+            canvas.beginPath();
+            ui.__drawPathByData(canvas, __startArrowPath.data);
+            canvas.stroke();
+            if (__startArrowPath.fill) {
+                canvas.fillStyle = stroke;
+                canvas.fill();
+            }
+        }
+        if (__endArrowPath) {
             canvas.beginPath();
-            ui.__drawPathByData(canvas, ui.__.__pathForArrow);
-            canvas.dashPattern = null;
+            ui.__drawPathByData(canvas, __endArrowPath.data);
             canvas.stroke();
+            if (__endArrowPath.fill) {
+                canvas.fillStyle = stroke;
+                canvas.fill();
+            }
         }
     }
 });