@leafer-in/arrow 2.0.1 → 2.0.3

package/src/PathArrowModule.ts

@@ -1,25 +1,31 @@
-import { IPathArrowModule, IUI, IPathCommandData, IPointData, IPathDataArrow } from '@leafer-ui/interface'
-import { PathCommandMap as Command, PointHelper } from '@leafer-ui/draw'
+import { IPathArrowModule, IUI, IPathCommandData, IPointData, IPathDataArrow, IArrowPathData } from '@leafer-ui/interface'
+import { PathCommandMap as Command, PointHelper, DataHelper } from '@leafer-ui/draw'
 
-import { arrows, getArrowPath } from './data/arrows'
+import { arrows, fillArrows, 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 { copy, copyFrom, getDistancePoint, isSame } = PointHelper
+const { stintSet } = DataHelper
 
 const connectPoint = {} as IPointData
 const first = {} as IPointData, second = {} as IPointData
-const last = {} as IPointData, now = {} as IPointData
+const old = {} as IPointData, last = {} as IPointData, now = {} as IPointData
 
 export const PathArrowModule: IPathArrowModule = {
 
     list: arrows,
+    fillList: fillArrows,
 
-    addArrows(ui: IUI): void {
-        const { startArrow, endArrow, strokeWidth, dashPattern, __pathForRender: data, cornerRadius } = ui.__
+    addArrows(ui: IUI, updateCache?: boolean): void {
+        const uData = ui.__
+        const { startArrow, endArrow, __strokeWidth: strokeWidth, dashPattern, __pathForRender: data, cornerRadius } = uData
 
         const clonePathForArrow = !cornerRadius // cornerRadius会创建新的render路径，所以不用再clone
 
+        if (!updateCache) uData.__strokeWidthCache = strokeWidth
+
+        let startArrowPath: IArrowPathData, singleStartArrow: boolean, endArrowPath: IArrowPathData, singleEndArrow: boolean
         let command: number, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== 'none'
 
         while (i < len) {
@@ -30,17 +36,24 @@ export const PathArrowModule: IPathArrowModule = {
                 case M:  // moveto(x, y)
                 case L:  // lineto(x, y)
                     if (count < 2 || i + 6 >= len) { // 3 + 3 可能是两个连续L命令结束
+                        copy(old, now)
                         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 - 3) copyPoints(data, last, now, i + 3) // C 或 C + L结束
+                    if (count === 1 || i + 7 >= len - 3) {
+                        copyPoints(data, last, now, i + 3) // C 或 C + L结束
+                        old.x = data[i + 1], old.y = data[i + 2]
+                    }
                     i += 7
                     break
                 case Q:  // quadraticCurveTo(x1, y1, x, y)
-                    if (count === 1 || i + 5 >= len - 3) copyPoints(data, last, now, i + 1) // Q 或 Q + L结束
+                    if (count === 1 || i + 5 >= len - 3) {
+                        copyPoints(data, last, now, i + 1) // Q 或 Q + L结束
+                        copy(old, last)
+                    }
                     i += 5
                     break
                 case Z:  // closepath()
@@ -72,6 +85,7 @@ export const PathArrowModule: IPathArrowModule = {
                 case U: // arcTo(x1, y1, x2, y2, radius)
                     if (count === 1 || i + 6 >= len - 3) { // U 或 U + L结束
                         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
@@ -84,15 +98,15 @@ export const PathArrowModule: IPathArrowModule = {
             count++
 
             if (count === 1 && command !== M) return // no arrow
-            if (count === 2 && useStartArrow) copy(second, command === L ? now : last)
+            if (count === 2 && useStartArrow) copy(second, command === L ? now : (isSame(old, first) ? last : old)) // 获取第二个点， 防止C命令起点和控制点相同的情况
 
             if (i === len) {
-                const path = ui.__.__pathForRender = clonePathForArrow ? [...data] : data
-                const pathForArrow: IPathCommandData = 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) as boolean
+                    if (!singleStartArrow) path.push(...startArrowPath.data)
 
                     if (connectPoint.x) {
                         getDistancePoint(first, second, -connectPoint.x, true)
@@ -102,8 +116,11 @@ export const PathArrowModule: IPathArrowModule = {
                 }
 
                 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) // 防止C命令结束点和控制点相同的情况
+
+                    endArrowPath = getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint, !!dashPattern)
+                    singleEndArrow = (endArrowPath.fill || dashPattern) as boolean
+                    if (!singleEndArrow) path.push(...endArrowPath.data)
 
                     if (connectPoint.x) {
                         getDistancePoint(now, last, -connectPoint.x, true)
@@ -129,13 +146,26 @@ export const PathArrowModule: IPathArrowModule = {
             } else {
                 copy(last, now)
             }
+
+            stintSet(uData, '__startArrowPath', singleStartArrow && startArrowPath)
+            stintSet(uData, '__endArrowPath', singleEndArrow && endArrowPath)
         }
 
 
     },
 
-    register(name: string, data: IPathDataArrow): void {
+    updateArrow(ui: IUI): void {
+        const data = ui.__
+        if (data.strokeScaleFixed) {
+            if (data.__strokeWidthCache !== data.__strokeWidth) {
+                ui.__updateRenderPath(true)
+            }
+        }
+    },
+
+    register(name: string, data: IPathDataArrow, fillData?: IPathDataArrow): void {
         this.list[name] = data
+        if (fillData) this.fillList[name] = data
     },
 
     get(name: string): IPathDataArrow {

package/src/data/arrows.ts

@@ -1,4 +1,4 @@
-import { IArrowStyle, IArrowTypeData, IPathDataArrow, IPathDataArrowMap, IUI, IPathCommandData, IPointData } from '@leafer-ui/interface'
+import { IArrowStyle, IArrowTypeData, IPathDataArrow, IPathDataArrowMap, IUI, IPointData, IArrowPathData } from '@leafer-ui/interface'
 import { DataHelper, PointHelper, isObject } from '@leafer-ui/draw'
 
 import { PathMatrixHelper } from '../PathMatrixHelper'
@@ -6,30 +6,44 @@ import { PathMatrixHelper } from '../PathMatrixHelper'
 
 const { layout, rotate } = PathMatrixHelper
 const { getAngle } = PointHelper
-const half = { x: -0.5 }
+const zero = { x: 0 }, 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 angle: IPathDataArrow = { connect: zero, 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], dashPath: [1, -2, 0, 2, -0.5, 0] } // 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], dashPath: [1, -3, 0, 2, -0.5, 0] } // fill: moveTo(-2.25, 0.95).lineTo(-2.25, -0.95) 
-
-const triangleFlip: IPathDataArrow = { offset: half, path: [...triangle.path], dashPath: [1, -2.5, 0, 2, -1, 0] } // triangle rotate 180
+const triangleFill: IPathDataArrow = { connect: zero, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath] }
+const triangle: IPathDataArrow = DataHelper.clone(triangleFill) as IPathDataArrow
+triangle.path = [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1] // fill: moveTo(-2.05, 1.1).lineTo(-2.05, -1.1)
+triangle.dashPath = [1, -2, 0, 2, -0.5, 0]
+
+const triangleFlipFill: IPathDataArrow = { connect: zero, offset: half, path: [...triangleFill.path] } // triangle rotate 180
+const triangleFlip: IPathDataArrow = { connect: zero, offset: half, path: [...triangle.path], dashPath: [1, -2.5, 0, 2, -1, 0] } // triangle rotate 180
+rotate(triangleFlipFill.path, 180, { x: -1.5, y: 0 })
 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], dashPath: [1, -0.5, 0, 2, 0.5, 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 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 arrowFill: IPathDataArrow = { connect: zero, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath] }
+const arrow: IPathDataArrow = DataHelper.clone(arrowFill) as IPathDataArrow
+arrow.path = [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95] // fill: moveTo(-2.25, 0.95).lineTo(-2.25, -0.95) 
+arrow.dashPath = [1, -3, 0, 2, -0.5, 0]
+
+const circleLine: IPathDataArrow = { connect: { x: -1.8 }, 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 circleFill: IPathDataArrow = { connect: { x: 0.5 }, path: [...circleLine.path] }
+const circle: IPathDataArrow = DataHelper.clone(circleFill) as IPathDataArrow
+circle.path = [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0] // fill: moveTo(0,0).arc(0, 0, 1, 0, 360)
+circle.dashPath = [1, -0.5, 0, 2, 0.5, 0]
+
+const squareLine: IPathDataArrow = { connect: { 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] } // 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 squareFill: IPathDataArrow = { path: [...squareLine.path] }
 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
+diamondLine.connect.x = -1.9
+const diamondFill: IPathDataArrow = DataHelper.clone(squareFill) as IPathDataArrow // squareFill rotate 45
 const diamond: IPathDataArrow = DataHelper.clone(square) as IPathDataArrow // square rotate 45
 rotate(diamondLine.path, 45)
+rotate(diamondFill.path, 45)
 rotate(diamond.path, 45)
 
 const mark: IPathDataArrow = { offset: half, path: [1, 0, -2, 2, 0, 2] } // moveTo(0, -2).lineTo(0, 2)
@@ -52,26 +66,41 @@ export const arrows: IPathDataArrowMap = {
     'diamond-line': diamondLine,
 
     mark,
+}
 
+export const fillArrows: IPathDataArrowMap = {
+    triangle: triangleFill,
+    'triangle-flip': triangleFlipFill,
+    arrow: arrowFill,
+    circle: circleFill,
+    square: squareFill,
+    diamond: diamondFill
 }
 
-export function getArrowPath(ui: IUI, arrow: IArrowStyle, from: IPointData, to: IPointData, size: number, connectOffset: IPointData, hasDashPattern?: boolean): IPathCommandData {
-    let pathData: IPathDataArrow, scale: number
+export function getArrowPath(ui: IUI, arrow: IArrowStyle, from: IPointData, to: IPointData, size: number, connectOffset: IPointData, hasDashPattern?: boolean): IArrowPathData {
+    let pathData: IPathDataArrow, scale = 1, rotation = 0, fill: boolean
 
     const { strokeCap, strokeJoin } = ui.__
 
     if (isObject(arrow)) {
         if ((arrow as IArrowTypeData).type) {
-            scale = (arrow as IArrowTypeData).scale
+            scale = (arrow as IArrowTypeData).scale || 1
+            rotation = (arrow as IArrowTypeData).rotation || 0
             pathData = arrows[(arrow as IArrowTypeData).type]
+            if (scale > 1) { // 放大后，优先使用fill路径数据
+                const fillData = fillArrows[(arrow as IArrowTypeData).type]
+                if (fillData) pathData = fillData, fill = true
+            }
         } else pathData = arrow as IPathDataArrow
     } else {
         pathData = arrows[arrow]
     }
 
+    if (!fill) fill = pathData.fill
+
     const { offset, connect, path, dashPath } = pathData
 
-    let connectX = connect ? connect.x : 0
+    let connectX = connect ? connect.x * scale : 0
     let offsetX = offset ? offset.x : 0
 
     const data = [...path]
@@ -83,12 +112,15 @@ export function getArrowPath(ui: IUI, arrow: IArrowStyle, from: IPointData, to:
         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)) // scale rotate 先围绕 data 数据应用后，再加 to
+    layout(data, to.x, to.y, size, size, getAngle(from, to) + rotation) // scale rotate 先围绕 data 数据应用后，再加 to
 
     connectOffset.x = (connectX + offsetX) * size
-    return data
+
+    const arrowData: IArrowPathData = { data }
+    if (fill) arrowData.fill = fill
+    return arrowData
 }

package/src/index.ts

@@ -20,12 +20,28 @@ UI.addAttr('endArrow', 'none', arrowType)
 
 Object.assign(PathArrow, PathArrowModule)
 Object.assign(Paint, {
-    strokeArrow(_stroke: string, ui: IUI, canvas: ILeaferCanvas, _renderOptions: IRenderOptions): void {
-        if (ui.__.dashPattern) {  // fix: dashPattern Arrow
+    strokeArrow(stroke: string, ui: IUI, canvas: ILeaferCanvas, _renderOptions: IRenderOptions): void {
+        const { __startArrowPath, __endArrowPath, dashPattern } = ui.__
+        if (dashPattern) canvas.dashPattern = null // fix: dashPattern Arrow
+
+        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()
+            }
         }
     }
 })