@leafer/path 1.0.0-rc.8 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/path",
-  "version": "1.0.0-rc.8",
+  "version": "1.0.0",
   "description": "@leafer/path",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,10 +22,10 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/math": "1.0.0-rc.8",
-    "@leafer/debug": "1.0.0-rc.8"
+    "@leafer/math": "1.0.0",
+    "@leafer/debug": "1.0.0"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-rc.8"
+    "@leafer/interface": "1.0.0"
   }
 }

package/src/PathCommandDataHelper.ts

@@ -88,18 +88,13 @@ export const PathCommandDataHelper = {
     // new
 
     drawEllipse(data: IPathCommandData, x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void {
-        if (rotation === undefined) rotation = 0
-        if (startAngle === undefined) startAngle = 0
-        if (endAngle === undefined) endAngle = 360
-        BezierHelper.ellipse(null, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise, null, null, startPoint)
+        BezierHelper.ellipse(null, x, y, radiusX, radiusY, rotation === undefined ? 0 : rotation, startAngle === undefined ? 0 : startAngle, endAngle === undefined ? 360 : endAngle, anticlockwise, null, null, startPoint)
         data.push(M, startPoint.x, startPoint.y)
         ellipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
     },
 
     drawArc(data: IPathCommandData, x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void {
-        if (startAngle === undefined) startAngle = 0
-        if (endAngle === undefined) endAngle = 360
-        BezierHelper.arc(null, x, y, radius, startAngle, endAngle, anticlockwise, null, null, startPoint)
+        BezierHelper.arc(null, x, y, radius, startAngle === undefined ? 0 : startAngle, endAngle === undefined ? 360 : endAngle, anticlockwise, null, null, startPoint)
         data.push(M, startPoint.x, startPoint.y)
         arc(data, x, y, radius, startAngle, endAngle, anticlockwise)
     },

package/src/PathConvert.ts

@@ -1,5 +1,5 @@
 import { IPathCommandData, IPointData } from '@leafer/interface'
-import { StringNumberMap } from '@leafer/math'
+import { MathHelper, StringNumberMap } from '@leafer/math'
 import { Debug } from '@leafer/debug'
 
 import { PathCommandMap as Command, NeedConvertToCanvasCommandMap, NeedConvertToCurveCommandMap, PathCommandLengthMap, PathNumberCommandMap, PathNumberCommandLengthMap } from './PathCommandMap'
@@ -26,7 +26,7 @@ export const PathConvert = {
 
     current: { dot: 0 } as ICurrentCommand,
 
-    stringify(data: IPathCommandData): string {
+    stringify(data: IPathCommandData, floatLength?: number): string {
         let i = 0, len = data.length, count: number, str: string = '', command: number, lastCommand: number
         while (i < len) {
             command = data[i]
@@ -38,7 +38,7 @@ export const PathConvert = {
             }
 
             for (let j = 1; j < count; j++) {
-                str += data[i + j];
+                str += MathHelper.float(data[i + j], floatLength);
                 (j === count - 1) || (str += ' ')
             }
 
@@ -61,12 +61,12 @@ export const PathConvert = {
             if (StringNumberMap[char]) {
 
                 if (char === '.') {
+                    if (current.dot) { pushData(data, num); num = '' } //  .375.375
                     current.dot++
-                    if (current.dot > 1) {
-                        pushData(data, num); num = '' //  .375.375
-                    }
                 }
 
+                if (num === '0' && char !== '.') { pushData(data, num); num = '' } //  00 01
+
                 num += char
 
             } else if (Command[char]) {

package/src/PathCreator.ts

@@ -1,96 +1,106 @@
-import { IPathCommandData, IPathDrawer, IPathString } from '@leafer/interface'
+import { IPathCommandData, IPathCreator, IPathString } from '@leafer/interface'
 import { PathCommandDataHelper } from './PathCommandDataHelper'
 import { PathHelper } from './PathHelper'
 
 
 const { moveTo, lineTo, quadraticCurveTo, bezierCurveTo, closePath, beginPath, rect, roundRect, ellipse, arc, arcTo, drawEllipse, drawArc, drawPoints } = PathCommandDataHelper
 
-export class PathCreator implements IPathDrawer {
+export class PathCreator implements IPathCreator { //  tip: rewrited Pen
 
-    public path: IPathCommandData
+    public set path(value: IPathCommandData) { this.__path = value }
+    public get path() { return this.__path }
+
+    public __path: IPathCommandData // 提供一个更安全的内部变量（比如覆盖给Pen时需要用到，避免与原有属性冲突）
 
     constructor(path?: IPathCommandData | IPathString) {
+        this.set(path)
+    }
+
+    public set(path?: IPathCommandData | IPathString): PathCreator {
         if (path) {
-            this.path = typeof path === 'string' ? PathHelper.parse(path) : path
+            this.__path = typeof path === 'string' ? PathHelper.parse(path) : path
         } else {
-            this.path = []
+            this.__path = []
         }
+        return this
     }
 
     public beginPath(): PathCreator {
-        beginPath(this.path)
+        beginPath(this.__path)
         return this
     }
 
     // svg and canvas
 
     public moveTo(x: number, y: number): PathCreator {
-        moveTo(this.path, x, y)
+        moveTo(this.__path, x, y)
         return this
     }
 
     public lineTo(x: number, y: number): PathCreator {
-        lineTo(this.path, x, y)
+        lineTo(this.__path, x, y)
         return this
     }
 
     public bezierCurveTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number): PathCreator {
-        bezierCurveTo(this.path, x1, y1, x2, y2, x, y)
+        bezierCurveTo(this.__path, x1, y1, x2, y2, x, y)
         return this
     }
 
     public quadraticCurveTo(x1: number, y1: number, x: number, y: number): PathCreator {
-        quadraticCurveTo(this.path, x1, y1, x, y)
+        quadraticCurveTo(this.__path, x1, y1, x, y)
         return this
     }
 
     public closePath(): PathCreator {
-        closePath(this.path)
+        closePath(this.__path)
         return this
     }
 
     // canvas
 
     public rect(x: number, y: number, width: number, height: number): PathCreator {
-        rect(this.path, x, y, width, height)
+        rect(this.__path, x, y, width, height)
         return this
     }
 
     public roundRect(x: number, y: number, width: number, height: number, cornerRadius: number | number[]): PathCreator {
-        roundRect(this.path, x, y, width, height, cornerRadius)
+        roundRect(this.__path, x, y, width, height, cornerRadius)
         return this
     }
 
     public ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator {
-        ellipse(this.path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
+        ellipse(this.__path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
         return this
     }
 
     public arc(x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator {
-        arc(this.path, x, y, radius, startAngle, endAngle, anticlockwise)
+        arc(this.__path, x, y, radius, startAngle, endAngle, anticlockwise)
         return this
     }
 
     public arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): PathCreator {
-        arcTo(this.path, x1, y1, x2, y2, radius)
+        arcTo(this.__path, x1, y1, x2, y2, radius)
         return this
     }
 
     // moveTo, then draw
 
     public drawEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator {
-        drawEllipse(this.path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
+        drawEllipse(this.__path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
         return this
     }
 
     public drawArc(x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator {
-        drawArc(this.path, x, y, radius, startAngle, endAngle, anticlockwise)
+        drawArc(this.__path, x, y, radius, startAngle, endAngle, anticlockwise)
         return this
     }
 
     public drawPoints(points: number[], curve?: boolean | number, close?: boolean): PathCreator {
-        drawPoints(this.path, points, curve, close)
+        drawPoints(this.__path, points, curve, close)
         return this
     }
 
+    public clearPath = this.beginPath
+
 }

package/src/index.ts

@@ -3,7 +3,6 @@ export { PathConvert } from './PathConvert'
 export { PathCreator } from './PathCreator'
 export { PathCommandDataHelper } from './PathCommandDataHelper'
 export { PathDrawer } from './PathDrawer'
-export { PathScaler } from './PathScaler'
 export { PathBounds } from './PathBounds'
 export { PathCorner } from './PathCorner'
 export { BezierHelper } from './BezierHelper'
@@ -20,3 +19,5 @@ import { PathHelper } from './PathHelper'
 PathHelper.creator = new PathCreator()
 PathHelper.parse = PathConvert.parse
 PathHelper.convertToCanvasData = PathConvert.toCanvasData
+
+export const pen = new PathCreator()

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import { IPathCreator, IPathCommandData, IPathDrawer, IPathString, IBoundsData, ITwoPointBoundsData, IPointData, INumberMap, IStringMap } from '@leafer/interface';
+import { IPathCreator, IPathCommandData, IPathString, IPathDrawer, IBoundsData, ITwoPointBoundsData, IPointData, INumberMap, IStringMap } from '@leafer/interface';
 
 declare const PathHelper: {
     creator: IPathCreator;
@@ -14,16 +14,19 @@ interface ICurrentCommand {
 }
 declare const PathConvert: {
     current: ICurrentCommand;
-    stringify(data: IPathCommandData): string;
+    stringify(data: IPathCommandData, floatLength?: number): string;
     parse(pathString: string, curveMode?: boolean): IPathCommandData;
     toCanvasData(old: IPathCommandData, curveMode?: boolean): IPathCommandData;
     copyData(data: IPathCommandData, old: IPathCommandData, index: number, count: number): void;
     pushData(data: IPathCommandData, strNum: string | number): void;
 };
 
-declare class PathCreator implements IPathDrawer {
-    path: IPathCommandData;
+declare class PathCreator implements IPathCreator {
+    set path(value: IPathCommandData);
+    get path(): IPathCommandData;
+    __path: IPathCommandData;
     constructor(path?: IPathCommandData | IPathString);
+    set(path?: IPathCommandData | IPathString): PathCreator;
     beginPath(): PathCreator;
     moveTo(x: number, y: number): PathCreator;
     lineTo(x: number, y: number): PathCreator;
@@ -38,6 +41,7 @@ declare class PathCreator implements IPathDrawer {
     drawEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator;
     drawArc(x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator;
     drawPoints(points: number[], curve?: boolean | number, close?: boolean): PathCreator;
+    clearPath: () => PathCreator;
 }
 
 declare const PathCommandDataHelper: {
@@ -61,11 +65,6 @@ declare const PathDrawer: {
     drawPathByData(drawer: IPathDrawer, data: IPathCommandData): void;
 };
 
-declare const PathScaler: {
-    scale(data: IPathCommandData, scaleX: number, scaleY: number): void;
-    scalePoints(data: IPathCommandData, scaleX: number, scaleY: number, start?: number, pointCount?: number): void;
-};
-
 declare const PathBounds: {
     toBounds(data: IPathCommandData, setBounds: IBoundsData): void;
     toTwoPointBounds(data: IPathCommandData, setPointBounds: ITwoPointBoundsData): void;
@@ -102,4 +101,6 @@ declare const NeedConvertToCanvasCommandMap: INumberMap;
 declare const PathNumberCommandMap: IStringMap;
 declare const PathNumberCommandLengthMap: INumberMap;
 
-export { BezierHelper, EllipseHelper, NeedConvertToCanvasCommandMap, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, RectHelper };
+declare const pen: PathCreator;
+
+export { BezierHelper, EllipseHelper, NeedConvertToCanvasCommandMap, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, RectHelper, pen };

package/src/PathScaler.ts

@@ -1,93 +0,0 @@
-import { IPathCommandData } from '@leafer/interface'
-
-import { PathCommandMap as Command } from './PathCommandMap'
-
-
-const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = Command
-
-export const PathScaler = {
-
-    scale(data: IPathCommandData, scaleX: number, scaleY: number): void {
-        if (!data) return
-
-        let command: number
-        let i = 0, len = data.length
-
-        while (i < len) {
-            command = data[i]
-            switch (command) {
-                case M:  //moveto(x, y)
-                    scalePoints(data, scaleX, scaleY, i, 1)
-                    i += 3
-                    break
-                case L:  //lineto(x, y)
-                    scalePoints(data, scaleX, scaleY, i, 1)
-                    i += 3
-                    break
-                case C:  //bezierCurveTo(x1, y1, x2, y2, x, y)
-                    scalePoints(data, scaleX, scaleY, i, 3)
-                    i += 7
-                    break
-                case Q:  //quadraticCurveTo(x1, y1, x, y)
-                    scalePoints(data, scaleX, scaleY, i, 2)
-                    i += 5
-                    break
-                case Z:  //closepath()
-                    i += 1
-                    break
-
-                // canvas command
-
-                case N: // rect(x, y, width, height)
-                    scalePoints(data, scaleX, scaleY, i, 2)
-                    i += 5
-                    break
-                case D: // roundRect(x, y, width, height, radius1, radius2, radius3, radius4)
-                    scalePoints(data, scaleX, scaleY, i, 2)
-                    i += 9
-                    break
-                case X: // simple roundRect(x, y, width, height, radius)
-                    scalePoints(data, scaleX, scaleY, i, 2)
-                    i += 6
-                    break
-                case G: // ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
-                    scalePoints(data, scaleX, scaleY, i, 2)
-                    i += 9
-                    break
-                case F: // simple ellipse(x, y, radiusX, radiusY)
-                    scalePoints(data, scaleX, scaleY, i, 2)
-                    i += 5
-                    break
-                case O: // arc(x, y, radius, startAngle, endAngle, anticlockwise)
-                    data[i] = G // to ellipse
-                    data.splice(i + 4, 0, data[i + 3], 0)
-                    scalePoints(data, scaleX, scaleY, i, 2)
-                    i += 7 + 2
-                    len += 2
-                    break
-                case P: // simple arc(x, y, radius)
-                    data[i] = F // to simple ellipse
-                    data.splice(i + 4, 0, data[i + 3])
-                    scalePoints(data, scaleX, scaleY, i, 2)
-                    i += 4 + 1
-                    len += 1
-                    break
-                case U: // arcTo(x1, y1, x2, y2, radius)
-                    scalePoints(data, scaleX, scaleY, i, 2)
-                    i += 6
-                    break
-            }
-        }
-
-    },
-
-    scalePoints(data: IPathCommandData, scaleX: number, scaleY: number, start?: number, pointCount?: number): void {
-        for (let i = pointCount ? start + 1 : 0, end = pointCount ? i + pointCount * 2 : data.length; i < end; i += 2) {
-            data[i] *= scaleX
-            data[i + 1] *= scaleY
-        }
-    }
-
-}
-
-const { scalePoints } = PathScaler