@leafer/path 1.0.0-beta.9 → 1.0.0-rc.2

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@leafer/path",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-rc.2",
   "description": "@leafer/path",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
+  "types": "types/index.d.ts",
   "files": [
-    "src"
+    "src",
+    "types",
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -19,10 +22,10 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/math": "1.0.0-beta.9",
-    "@leafer/debug": "1.0.0-beta.9"
+    "@leafer/math": "1.0.0-rc.2",
+    "@leafer/debug": "1.0.0-rc.2"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.9"
+    "@leafer/interface": "1.0.0-rc.2"
   }
 }

package/src/BezierHelper.ts

@@ -5,13 +5,74 @@ import { PathCommandMap } from './PathCommandMap'
 import { RectHelper } from './RectHelper'
 import { PathHelper } from './PathHelper'
 
-const { sin, cos, atan2, ceil, abs, PI } = Math
+const { sin, cos, atan2, ceil, abs, PI, sqrt, pow } = Math
 const { setPoint, addPoint } = TwoPointBoundsHelper
 const { set } = PointHelper
+const { M, L, C, Q, Z } = PathCommandMap
 const tempPoint = {} as IPointData
 
 export const BezierHelper = {
 
+    points(data: IPathCommandData, points: number[], curve?: boolean | number, close?: boolean): void {
+        data.push(M, points[0], points[1])
+
+        if (curve && points.length > 5) {
+
+            let aX: number, aY: number, bX: number, bY: number, cX: number, cY: number, c1X: number, c1Y: number, c2X: number, c2Y: number
+            let ba: number, cb: number, d: number, len = points.length
+            const t = curve === true ? 0.5 : curve as number
+
+            if (close) {
+                points = [points[len - 2], points[len - 1], ...points, points[0], points[1], points[2], points[3]]
+                len = points.length
+            }
+
+            for (let i = 2; i < len - 2; i += 2) {
+                aX = points[i - 2]
+                aY = points[i - 1]
+
+                bX = points[i]
+                bY = points[i + 1]
+
+                cX = points[i + 2]
+                cY = points[i + 3]
+
+                ba = sqrt(pow(bX - aX, 2) + pow(bY - aY, 2))
+                cb = sqrt(pow(cX - bX, 2) + pow(cY - bY, 2))
+
+                d = ba + cb
+                ba = (t * ba) / d
+                cb = (t * cb) / d
+
+                cX -= aX
+                cY -= aY
+
+                c1X = bX - ba * cX
+                c1Y = bY - ba * cY
+
+                if (i === 2) {
+                    if (!close) data.push(Q, c1X, c1Y, bX, bY)
+                } else {
+                    data.push(C, c2X, c2Y, c1X, c1Y, bX, bY)
+                }
+
+                c2X = bX + cb * cX
+                c2Y = bY + cb * cY
+            }
+
+            if (!close) data.push(Q, c2X, c2Y, points[len - 2], points[len - 1])
+
+        } else {
+
+            for (let i = 2, len = points.length; i < len; i += 2) {
+                data.push(L, points[i], points[i + 1])
+            }
+
+        }
+
+        if (close) data.push(Z)
+    },
+
     rect(data: IPathCommandData, x: number, y: number, width: number, height: number) {
         PathHelper.creator.path = data
         PathHelper.creator.moveTo(x, y).lineTo(x + width, y).lineTo(x + width, y + height).lineTo(x, y + height).lineTo(x, y)
@@ -35,7 +96,7 @@ export const BezierHelper = {
         if (totalRadian < 0) totalRadian += PI2
 
         if (totalRadian === PI || (abs(BAx + BAy) < 1.e-12) || (abs(CBx + CBy) < 1.e-12)) { // invalid
-            if (data) data.push(PathCommandMap.L, x1, y1)
+            if (data) data.push(L, x1, y1)
             if (setPointBounds) {
                 setPoint(setPointBounds, fromX, fromY)
                 addPoint(setPointBounds, x1, y1)
@@ -97,7 +158,7 @@ export const BezierHelper = {
 
         let fromX = cx + x, fromY = cy + y
 
-        if (data) data.push(PathCommandMap.L, fromX, fromY)
+        if (data) data.push(L, fromX, fromY)
         if (setPointBounds) setPoint(setPointBounds, fromX, fromY)
         if (setStartPoint) set(setStartPoint, fromX, fromY)
 
@@ -113,7 +174,7 @@ export const BezierHelper = {
             x2 = cx + x + control * (rotationCos * radiusX * endSin + rotationSin * radiusY * endCos)
             y2 = cy + y + control * (rotationSin * radiusX * endSin - rotationCos * radiusY * endCos)
 
-            if (data) data.push(PathCommandMap.C, x1, y1, x2, y2, cx + x, cy + y)
+            if (data) data.push(C, x1, y1, x2, y2, cx + x, cy + y)
             if (setPointBounds) toTwoPointBounds(cx + startX, cy + startY, x1, y1, x2, y2, cx + x, cy + y, setPointBounds, true)
 
             startX = x
@@ -129,7 +190,7 @@ export const BezierHelper = {
     },
 
     quadraticCurveTo(data: IPathCommandData, fromX: number, fromY: number, x1: number, y1: number, toX: number, toY: number): void {
-        data.push(PathCommandMap.C, (fromX + 2 * x1) / 3, (fromY + 2 * y1) / 3, (toX + 2 * x1) / 3, (toY + 2 * y1) / 3, toX, toY)
+        data.push(C, (fromX + 2 * x1) / 3, (fromY + 2 * y1) / 3, (toX + 2 * x1) / 3, (toY + 2 * y1) / 3, toX, toY)
     },
 
     toTwoPointBoundsByQuadraticCurve(fromX: number, fromY: number, x1: number, y1: number, toX: number, toY: number, pointBounds: ITwoPointBoundsData, addMode?: boolean): void {

package/src/PathCommandDataHelper.ts

@@ -73,7 +73,13 @@ export const PathCommandDataHelper = {
         }
     },
 
-    moveToEllipse(data: IPathCommandData, x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void {
+    arcTo(data: IPathCommandData, x1: number, y1: number, x2: number, y2: number, radius: number): void {
+        data.push(U, x1, y1, x2, y2, radius)
+    },
+
+    // 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
@@ -82,7 +88,7 @@ export const PathCommandDataHelper = {
         ellipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
     },
 
-    moveToArc(data: IPathCommandData, x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void {
+    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)
@@ -90,9 +96,10 @@ export const PathCommandDataHelper = {
         arc(data, x, y, radius, startAngle, endAngle, anticlockwise)
     },
 
-    arcTo(data: IPathCommandData, x1: number, y1: number, x2: number, y2: number, radius: number): void {
-        data.push(U, x1, y1, x2, y2, radius)
+    drawPoints(data: IPathCommandData, points: number[], curve?: boolean | number, close?: boolean): void {
+        BezierHelper.points(data, points, curve, close)
     }
+
 }
 
 const { ellipse, arc } = PathCommandDataHelper

package/src/PathCreator.ts

@@ -3,7 +3,7 @@ import { PathCommandDataHelper } from './PathCommandDataHelper'
 import { PathHelper } from './PathHelper'
 
 
-const { moveTo, lineTo, quadraticCurveTo, bezierCurveTo, closePath, beginPath, rect, roundRect, ellipse, arc, arcTo, moveToEllipse, moveToArc } = PathCommandDataHelper
+const { moveTo, lineTo, quadraticCurveTo, bezierCurveTo, closePath, beginPath, rect, roundRect, ellipse, arc, arcTo, drawEllipse, drawArc, drawPoints } = PathCommandDataHelper
 
 export class PathCreator implements IPathDrawer {
 
@@ -78,13 +78,18 @@ export class PathCreator implements IPathDrawer {
 
     // moveTo, then draw
 
-    public moveToEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator {
-        moveToEllipse(this.path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
+    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)
         return this
     }
 
-    public moveToArc(x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator {
-        moveToArc(this.path, x, y, radius, startAngle, endAngle, anticlockwise)
+    public drawArc(x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator {
+        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)
         return this
     }
 

package/types/index.d.ts

@@ -0,0 +1,100 @@
+import { IPathCreator, IPathCommandData, IPathDrawer, IPathString, IBoundsData, ITwoPointBoundsData, IPointData, INumberMap, IStringMap } from '@leafer/interface';
+
+declare const PathHelper: {
+    creator: IPathCreator;
+    parse(_pathString: string, _curveMode?: boolean): IPathCommandData;
+    convertToCanvasData(_old: IPathCommandData, _curveMode?: boolean): IPathCommandData;
+};
+
+interface ICurrentCommand {
+    name?: number;
+    length?: number;
+    index?: number;
+    dot?: number;
+}
+declare const PathConvert: {
+    current: ICurrentCommand;
+    stringify(data: IPathCommandData): 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;
+    constructor(path?: IPathCommandData | IPathString);
+    beginPath(): PathCreator;
+    moveTo(x: number, y: number): PathCreator;
+    lineTo(x: number, y: number): PathCreator;
+    bezierCurveTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number): PathCreator;
+    quadraticCurveTo(x1: number, y1: number, x: number, y: number): PathCreator;
+    closePath(): PathCreator;
+    rect(x: number, y: number, width: number, height: number): PathCreator;
+    roundRect(x: number, y: number, width: number, height: number, cornerRadius: number | number[]): PathCreator;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator;
+    arc(x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): PathCreator;
+    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;
+}
+
+declare const PathCommandDataHelper: {
+    beginPath(data: IPathCommandData): void;
+    moveTo(data: IPathCommandData, x: number, y: number): void;
+    lineTo(data: IPathCommandData, x: number, y: number): void;
+    bezierCurveTo(data: IPathCommandData, x1: number, y1: number, x2: number, y2: number, x: number, y: number): void;
+    quadraticCurveTo(data: IPathCommandData, x1: number, y1: number, x: number, y: number): void;
+    closePath(data: IPathCommandData): void;
+    rect(data: IPathCommandData, x: number, y: number, width: number, height: number): void;
+    roundRect(data: IPathCommandData, x: number, y: number, width: number, height: number, cornerRadius: number | number[]): void;
+    ellipse(data: IPathCommandData, x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void;
+    arc(data: IPathCommandData, x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void;
+    arcTo(data: IPathCommandData, x1: number, y1: number, x2: number, y2: number, radius: number): void;
+    drawEllipse(data: IPathCommandData, x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void;
+    drawArc(data: IPathCommandData, x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void;
+    drawPoints(data: IPathCommandData, points: number[], curve?: boolean | number, close?: boolean): void;
+};
+
+declare const PathDrawer: {
+    drawPathByData(drawer: IPathDrawer, data: IPathCommandData): void;
+};
+
+declare const PathBounds: {
+    toBounds(data: IPathCommandData, setBounds: IBoundsData): void;
+    toTwoPointBounds(data: IPathCommandData, setPointBounds: ITwoPointBoundsData): void;
+};
+
+declare const PathCorner: {
+    smooth(data: IPathCommandData, _cornerRadius: number, _cornerSmoothing?: number): IPathCommandData;
+};
+
+declare const BezierHelper: {
+    points(data: IPathCommandData, points: number[], curve?: boolean | number, close?: boolean): void;
+    rect(data: IPathCommandData, x: number, y: number, width: number, height: number): void;
+    roundRect(data: IPathCommandData, x: number, y: number, width: number, height: number, radius: number | number[]): void;
+    arcTo(data: IPathCommandData | null | void, fromX: number, fromY: number, x1: number, y1: number, toX: number, toY: number, radius: number, setPointBounds?: ITwoPointBoundsData, setEndPoint?: IPointData, setStartPoint?: IPointData): void;
+    arc(data: IPathCommandData | null | void, x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean, setPointBounds?: ITwoPointBoundsData, setEndPoint?: IPointData, setStartPoint?: IPointData): void;
+    ellipse(data: IPathCommandData | null | void, cx: number, cy: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean, setPointBounds?: ITwoPointBoundsData, setEndPoint?: IPointData, setStartPoint?: IPointData): void;
+    quadraticCurveTo(data: IPathCommandData, fromX: number, fromY: number, x1: number, y1: number, toX: number, toY: number): void;
+    toTwoPointBoundsByQuadraticCurve(fromX: number, fromY: number, x1: number, y1: number, toX: number, toY: number, pointBounds: ITwoPointBoundsData, addMode?: boolean): void;
+    toTwoPointBounds(fromX: number, fromY: number, x1: number, y1: number, x2: number, y2: number, toX: number, toY: number, pointBounds: ITwoPointBoundsData, addMode?: boolean): void;
+    getPointAndSet(t: number, fromX: number, fromY: number, x1: number, y1: number, x2: number, y2: number, toX: number, toY: number, setPoint: IPointData): void;
+    getPoint(t: number, fromX: number, fromY: number, x1: number, y1: number, x2: number, y2: number, toX: number, toY: number): IPointData;
+};
+
+declare const EllipseHelper: {
+    ellipticalArc(data: IPathCommandData, fromX: number, fromY: number, radiusX: number, radiusY: number, rotation: number, largeFlag: number, sweepFlag: number, toX: number, toY: number, curveMode?: boolean): void;
+};
+
+declare const RectHelper: {
+    drawRoundRect(drawer: IPathDrawer, x: number, y: number, width: number, height: number, cornerRadius: number | number[]): void;
+};
+
+declare const PathCommandMap: INumberMap;
+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, RectHelper };