@leafer/path 1.0.0-alpha.21 → 1.0.0-alpha.30

package/src/PathCommandMap.ts

@@ -1,37 +1,51 @@
 import { INumberMap, IStringMap } from '@leafer/interface'
 
+export const CanvasCommandOnlyMap: INumberMap = {
+
+    N: 21, // rect
+    D: 22, // roundRect
+    X: 23, // simple roundRect
+    G: 24, // ellipse
+    F: 25, // simple ellipse
+    O: 26, // arc
+    P: 27, // simple arc
+    U: 28 // arcTo
+
+}
 
 export const PathCommandMap: INumberMap = {
-    M: 1, //moveto
+
+    // svg and canvas
+
+    M: 1, // moveto
     m: 10,
-    L: 2, //lineto
+    L: 2, // lineto
     l: 20,
-    H: 3, //horizontal lineto
+    H: 3, // horizontal lineto
     h: 30,
-    V: 4, //vertical lineto
+    V: 4, // vertical lineto
     v: 40,
-    C: 5, //curveto
+    C: 5, // curveto
     c: 50,
-    S: 6, //smooth curveto
+    S: 6, // smooth curveto
     s: 60,
-    Q: 7, //quadratic Belzier curve
+    Q: 7, // quadratic Belzier curve
     q: 70,
-    T: 8, //smooth quadratic Belzier curveto
+    T: 8, // smooth quadratic Belzier curveto
     t: 80,
-    A: 9, //elliptical Arc
+    A: 9, //e lliptical Arc
     a: 90,
-    Z: 11, //closepath
+    Z: 11, // closepath
     z: 11,
 
-    // 非svg标准的canvas绘图命令
-    rect: 100,
-    roundRect: 101,
-    ellipse: 102,
-    arc: 103,
-    arcTo: 104
+    R: 12,  // Catmull Rom
+
+    // canvas
+    ...CanvasCommandOnlyMap
 }
 
 export const PathCommandLengthMap: INumberMap = {
+
     M: 3, //moveto
     m: 3,
     L: 3, //lineto
@@ -53,15 +67,21 @@ export const PathCommandLengthMap: INumberMap = {
     Z: 1, //closepath
     z: 1,
 
-    // 非svg标准的canvas绘图命令
-    rect: 5,
-    roundRect: 6,
-    ellipse: 9,
-    arc: 7,
-    arcTo: 6
+    // canvas
+
+    N: 5, // rect
+    D: 9, // roundRect
+    X: 6, // simple roundRect
+    G: 9, // ellipse
+    F: 5, // simple ellipse
+    O: 7, // arc
+    P: 4, // simple arc
+    U: 6 // arcTo
+
 }
 
-export const PathCommandNeedConvertMap: INumberMap = { // convert to:  M L C Q Z
+export const NeedConvertToCanvasCommandMap: INumberMap = { // convert to:  M L C Q Z
+
     // M: 1, //moveto
     m: 10,
     // L: 2, //lineto
@@ -83,25 +103,24 @@ export const PathCommandNeedConvertMap: INumberMap = { // convert to:  M L C Q Z
     // Z: 11, //closepath
     // z: 11
 
-    // 非svg标准的canvas绘图命令
-    rect: 100,
-    roundRect: 101,
-    ellipse: 102,
-    arc: 103,
-    arcTo: 104
 }
 
 
+export const NeedConvertToCurveCommandMap: INumberMap = {
+    ...NeedConvertToCanvasCommandMap,
+    ...CanvasCommandOnlyMap
+}
+
 const P = PathCommandMap
 
-export const NumberPathCommandMap: IStringMap = {}
+export const PathNumberCommandMap: IStringMap = {}
 for (let key in P) {
-    NumberPathCommandMap[P[key]] = key
+    PathNumberCommandMap[P[key]] = key
 }
 // {1: 'M'}
 
-export const NumberPathCommandLengthMap: INumberMap = {}
+export const PathNumberCommandLengthMap: INumberMap = {}
 for (let key in P) {
-    NumberPathCommandLengthMap[P[key]] = PathCommandLengthMap[key]
+    PathNumberCommandLengthMap[P[key]] = PathCommandLengthMap[key]
 }
 // {1: 3}

package/src/PathConvert.ts

@@ -1,8 +1,10 @@
-import { IPathCommandData } from '@leafer/interface'
+import { IPathCommandData, IPointData } from '@leafer/interface'
 import { StringNumberMap } from '@leafer/math'
-import { PathCommandMap as Command, PathCommandNeedConvertMap as NeedConvertCommand, PathCommandLengthMap as CommandLength, NumberPathCommandMap as CommandName, NumberPathCommandLengthMap as NumberCommandLength } from './PathCommandMap'
+import { Debug } from '@leafer/debug'
 
+import { PathCommandMap as Command, NeedConvertToCanvasCommandMap, NeedConvertToCurveCommandMap, PathCommandLengthMap, PathNumberCommandMap, PathNumberCommandLengthMap } from './PathCommandMap'
 import { BezierHelper } from './BezierHelper'
+import { EllipseHelper } from './EllipseHelper'
 
 
 interface ICurrentCommand {
@@ -12,8 +14,12 @@ interface ICurrentCommand {
 }
 
 
-const { M, m, L, l, H, h, V, v, C, c, S, s, Q, q, T, t, A, a, Z, z } = Command
-const { getFromACommand } = BezierHelper
+const { M, m, L, l, H, h, V, v, C, c, S, s, Q, q, T, t, A, a, Z, z, N, D, X, G, F, O, P, U } = Command
+const { rect, roundRect, arcTo, arc, ellipse, quadraticCurveTo } = BezierHelper
+const { ellipticalArc } = EllipseHelper
+const debug = Debug.get('PathConvert')
+
+const setEndPoint = {} as IPointData
 
 export const PathConvert = {
 
@@ -23,11 +29,11 @@ export const PathConvert = {
         let i = 0, len = data.length, count: number, str: string = '', command: number, lastCommand: number
         while (i < len) {
             command = data[i]
-            count = NumberCommandLength[command]
+            count = PathNumberCommandLengthMap[command]
             if (command === lastCommand) {
                 str += ' ' // 重复的命令可以省略
             } else {
-                str += CommandName[command]
+                str += PathNumberCommandMap[command]
             }
 
             for (let j = 1; j < count; j++) {
@@ -41,10 +47,11 @@ export const PathConvert = {
         return str
     },
 
-    parse(pathString: string, convert: boolean = true): IPathCommandData {
+    parse(pathString: string, curveMode?: boolean): IPathCommandData {
 
-        let needConvert: boolean, char: string, num = ''
+        let needConvert: boolean, char: string, lastChar: string, num = ''
         const data: IPathCommandData = []
+        const convertCommand = curveMode ? NeedConvertToCurveCommandMap : NeedConvertToCanvasCommandMap
 
         for (let i = 0, len = pathString.length; i < len; i++) {
 
@@ -59,32 +66,39 @@ export const PathConvert = {
                 if (num) { pushData(data, Number(num)); num = '' }
 
                 current.name = Command[char]
-                current.length = CommandLength[char]
+                current.length = PathCommandLengthMap[char]
                 current.index = 0
                 pushData(data, current.name)
 
-                if (!needConvert && NeedConvertCommand[char]) needConvert = true
+                if (!needConvert && convertCommand[char]) needConvert = true
 
             } else {
 
-                if (char === '-') { // L-34-35
-                    if (num) { pushData(data, Number(num)) }
-                    num = char
+                if (char === '-' || char === '+') {
+
+                    if (lastChar === 'e' || lastChar === 'E') { // L45e-12  21e+22
+                        num += char
+                    } else {
+                        if (num) pushData(data, Number(num)) // L-34-35 L+12+28
+                        num = char
+                    }
+
                 } else {
                     if (num) { pushData(data, Number(num)); num = '' }
                 }
 
             }
 
+            lastChar = char
+
         }
 
         if (num) pushData(data, Number(num))
 
-        //console.log(pathString, P._data)
-        return (convert && needConvert) ? PathConvert.convertToSimple(data) : data
+        return needConvert ? PathConvert.toCanvasData(data, curveMode) : data
     },
 
-    convertToSimple(old: IPathCommandData): IPathCommandData {
+    toCanvasData(old: IPathCommandData, curveMode?: boolean): IPathCommandData {
 
         let x = 0, y = 0, x1 = 0, y1 = 0, i = 0, len = old.length, controlX: number, controlY: number, command: number, lastCommand: number, smooth: boolean
         const data: IPathCommandData = []
@@ -94,7 +108,7 @@ export const PathConvert = {
             command = old[i]
 
             switch (command) {
-                //moveto x,y
+                //moveto(x, y)
                 case m:
                     old[i + 1] += x
                     old[i + 2] += y
@@ -105,7 +119,7 @@ export const PathConvert = {
                     i += 3
                     break
 
-                //horizontal lineto x
+                //horizontal lineto(x)
                 case h:
                     old[i + 1] += x
                 case H:
@@ -114,7 +128,7 @@ export const PathConvert = {
                     i += 2
                     break
 
-                //vertical lineto y
+                //vertical lineto(y)
                 case v:
                     old[i + 1] += y
                 case V:
@@ -123,7 +137,7 @@ export const PathConvert = {
                     i += 2
                     break
 
-                //lineto x,y
+                //lineto(x,y)
                 case l:
                     old[i + 1] += x
                     old[i + 2] += y
@@ -134,7 +148,7 @@ export const PathConvert = {
                     i += 3
                     break
 
-                //smooth bezierCurveTo x2,y2,x,y
+                //smooth bezierCurveTo(x2, y2, x, y)
                 case s:  //smooth
                     old[i + 1] += x
                     old[i + 2] += y
@@ -153,7 +167,7 @@ export const PathConvert = {
                     i += 5
                     break
 
-                //bezierCurveTo x1,y1,x2,y2,x,y
+                //bezierCurveTo(x1, y1, x2, y2, x, y)
                 case c:
                     old[i + 1] += x
                     old[i + 2] += y
@@ -171,7 +185,7 @@ export const PathConvert = {
                     i += 7
                     break
 
-                //smooth quadraticCurveTo x,y
+                //smooth quadraticCurveTo(x, y)
                 case t:
                     old[i + 1] += x
                     old[i + 2] += y
@@ -180,13 +194,13 @@ export const PathConvert = {
                     smooth = (lastCommand === Q) || (lastCommand === T)
                     controlX = smooth ? (x * 2 - controlX) : old[i + 1]
                     controlY = smooth ? (y * 2 - controlY) : old[i + 2]
+                    curveMode ? quadraticCurveTo(data, x, y, controlX, controlY, old[i + 1], old[i + 2]) : data.push(Q, controlX, controlY, old[i + 1], old[i + 2])
                     x = old[i + 1]
                     y = old[i + 2]
-                    data.push(Q, controlX, controlY, x, y)
                     i += 3
                     break
 
-                //quadraticCurveTo x1,y1,x,y
+                //quadraticCurveTo(x1, y1, x, y)
                 case q:
                     old[i + 1] += x
                     old[i + 2] += y
@@ -196,18 +210,18 @@ export const PathConvert = {
                 case Q:
                     controlX = old[i + 1]
                     controlY = old[i + 2]
+                    curveMode ? quadraticCurveTo(data, x, y, controlX, controlY, old[i + 3], old[i + 4]) : data.push(Q, controlX, controlY, old[i + 3], old[i + 4])
                     x = old[i + 3]
                     y = old[i + 4]
-                    data.push(Q, controlX, controlY, x, y)
                     i += 5
                     break
 
-                //ellipticalArc rx ry x-axis-rotation large-arc-flag sweep-flag x y
+                //ellipticalArc(rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)
                 case a:
                     old[i + 6] += x
                     old[i + 7] += y
                 case A:
-                    data.push(...getFromACommand(x, y, old[i + 1], old[i + 2], old[i + 3], old[i + 4], old[i + 5], old[i + 6], old[i + 7])) // convert bezier
+                    ellipticalArc(data, x, y, old[i + 1], old[i + 2], old[i + 3], old[i + 4], old[i + 5], old[i + 6], old[i + 7], curveMode) // convert to canvas ellipse or curve
                     x = old[i + 6]
                     y = old[i + 7]
                     i += 8
@@ -217,6 +231,61 @@ export const PathConvert = {
                     data.push(Z)
                     i++
                     break
+
+
+                // canvas command
+
+                case N: // rect(x, y, width, height)
+                    x = old[i + 1]
+                    y = old[i + 2]
+                    curveMode ? rect(data, x, y, old[i + 3], old[i + 4]) : copyData(data, old, i, 5)
+                    i += 5
+                    break
+                case D: // roundRect(x, y, width, height, radius1, radius2, radius3, radius4)
+                    x = old[i + 1]
+                    y = old[i + 2]
+                    curveMode ? roundRect(data, x, y, old[i + 3], old[i + 4], [old[i + 5], old[i + 6], old[i + 7], old[i + 8]]) : copyData(data, old, i, 9)
+                    i += 9
+                    break
+                case X: // simple roundRect(x, y, width, height, radius)
+                    x = old[i + 1]
+                    y = old[i + 2]
+                    curveMode ? roundRect(data, x, y, old[i + 3], old[i + 4], old[i + 5]) : copyData(data, old, i, 6)
+                    i += 6
+                    break
+                case G: // ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
+                    ellipse(curveMode ? data : copyData(data, old, i, 9), old[i + 1], old[i + 2], old[i + 3], old[i + 4], old[i + 5], old[i + 6], old[i + 7], old[i + 8] as unknown as boolean, null, setEndPoint)
+                    x = setEndPoint.x
+                    y = setEndPoint.y
+                    i += 9
+                    break
+                case F: // simple ellipse(x, y, radiusX, radiusY)
+                    curveMode ? ellipse(data, old[i + 1], old[i + 2], old[i + 3], old[i + 4], 0, 0, 360, false) : copyData(data, old, i, 5)
+                    x = old[i + 1] + old[i + 3]
+                    y = old[i + 2]
+                    i += 5
+                    break
+                case O: // arc(x, y, radius, startAngle, endAngle, anticlockwise)
+                    arc(curveMode ? data : copyData(data, old, i, 7), old[i + 1], old[i + 2], old[i + 3], old[i + 4], old[i + 5], old[i + 6] as unknown as boolean, null, setEndPoint)
+                    x = setEndPoint.x
+                    y = setEndPoint.y
+                    i += 7
+                    break
+                case P: //  simple arc(x, y, radius)
+                    curveMode ? arc(data, old[i + 1], old[i + 2], old[i + 3], 0, 360, false) : copyData(data, old, i, 4)
+                    x = old[i + 1] + old[i + 3]
+                    y = old[i + 2]
+                    i += 4
+                    break
+                case U: // arcTo(x1, y1, x2, y2, radius)
+                    arcTo(curveMode ? data : copyData(data, old, i, 6), x, y, old[i + 1], old[i + 2], old[i + 3], old[i + 4], old[i + 5], null, setEndPoint)
+                    x = setEndPoint.x
+                    y = setEndPoint.y
+                    i += 6
+                    break
+                default:
+                    debug.error(`command: ${command} [index:${i}]`, old)
+                    return data
             }
 
             lastCommand = command
@@ -226,6 +295,12 @@ export const PathConvert = {
 
     },
 
+    copyData(data: IPathCommandData, old: IPathCommandData, index: number, count: number): void {
+        for (let i = index, end = index + count; i < end; i++) {
+            data.push(old[i])
+        }
+    },
+
     pushData(data: IPathCommandData, num: number) {
         if (current.index === current.length) { // 单个命令，多个数据的情况
             current.index = 1
@@ -238,4 +313,4 @@ export const PathConvert = {
 
 }
 
-const { current, pushData } = PathConvert
+const { current, pushData, copyData } = PathConvert

package/src/PathCorner.ts

@@ -0,0 +1,10 @@
+import { IPathCommandData } from '@leafer/interface'
+
+
+export const PathCorner = {
+
+    smooth(data: IPathCommandData, _cornerRadius: number, _cornerSmoothing?: number): IPathCommandData {
+        return data
+    }
+
+}

package/src/PathCreator.ts

@@ -1,64 +1,92 @@
-import { IPathCommandData } from '@leafer/interface'
-import { PathCommandMap } from './PathCommandMap'
+import { IPathCommandData, IPathDrawer } from '@leafer/interface'
+import { PathCommandDataHelper } from './PathCommandDataHelper'
+import { IPathString } from '@leafer-ui/interface'
+import { PathHelper } from './PathHelper'
 
 
-let data: IPathCommandData
-const { M, L, C, Q, Z, rect, roundRect, ellipse, arc, arcTo } = PathCommandMap
+const { moveTo, lineTo, quadraticCurveTo, bezierCurveTo, closePath, beginPath, rect, roundRect, ellipse, arc, arcTo, moveToEllipse, moveToArc } = PathCommandDataHelper
 
-export const PathCreator = {
+export class PathCreator implements IPathDrawer {
 
-    begin(commandData: IPathCommandData): void {
-        data = commandData
-    },
+    public path: IPathCommandData
 
-    end(): void {
-        data = null
-    },
+    constructor(path?: IPathCommandData | IPathString) {
+        if (path) {
+            this.path = typeof path === 'string' ? PathHelper.parse(path) : path
+        } else {
+            this.path = []
+        }
+    }
+
+    public beginPath(): PathCreator {
+        beginPath(this.path)
+        return this
+    }
+
+    // svg and canvas
 
-    // draw
+    public moveTo(x: number, y: number): PathCreator {
+        moveTo(this.path, x, y)
+        return this
+    }
+
+    public lineTo(x: number, y: number): PathCreator {
+        lineTo(this.path, x, y)
+        return this
+    }
 
-    moveTo(x: number, y: number): void {
-        data.push(M, x, y)
-    },
+    public bezierCurveTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number): PathCreator {
+        bezierCurveTo(this.path, x1, y1, x2, y2, x, y)
+        return this
+    }
 
-    lineTo(x: number, y: number): void {
-        data.push(L, x, y)
-    },
+    public quadraticCurveTo(x1: number, y1: number, x: number, y: number): PathCreator {
+        quadraticCurveTo(this.path, x1, y1, x, y)
+        return this
+    }
 
-    bezierCurveTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number): void {
-        data.push(C, x1, y1, x2, y2, x, y)
-    },
+    public closePath(): PathCreator {
+        closePath(this.path)
+        return this
+    }
 
-    quadraticCurveTo(x1: number, y1: number, x: number, y: number): void {
-        data.push(Q, x1, y1, x, y)
-    },
+    // canvas
 
-    close(end?: boolean): void {
-        data.push(Z)
-        if (end) data = null
-    },
+    public rect(x: number, y: number, width: number, height: number): PathCreator {
+        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)
+        return this
+    }
 
-    // 非svg标准的canvas绘图命令
+    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)
+        return this
+    }
 
-    rect(x: number, y: number, width: number, height: number): void {
-        data.push(rect, x, y, width, height)
-    },
+    public arc(x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator {
+        arc(this.path, x, y, radius, startAngle, endAngle, anticlockwise)
+        return this
+    }
 
-    roundRect(x: number, y: number, width: number, height: number, cornerRadius?: number | number[]): void {
-        data.push(roundRect, x, y, width, height, cornerRadius as unknown as number)
-    },
+    public arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): PathCreator {
+        arcTo(this.path, x1, y1, x2, y2, radius)
+        return this
+    }
 
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void {
-        data.push(ellipse, x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise as unknown as number)
-    },
+    // moveTo, then draw
 
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void {
-        data.push(arc, x, y, radius, startAngle, endAngle, counterclockwise as unknown as number)
-    },
+    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)
+        return this
+    }
 
-    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void {
-        data.push(arcTo, x1, y1, x2, y2, radius)
+    public moveToArc(x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator {
+        moveToArc(this.path, x, y, radius, startAngle, endAngle, anticlockwise)
+        return this
     }
 
 }

package/src/PathDrawer.ts

@@ -0,0 +1,85 @@
+import { IPathDrawer, IPathCommandData } from '@leafer/interface'
+import { OneRadian, PI2 } from '@leafer/math'
+import { Debug } from '@leafer/debug'
+
+import { PathCommandMap as Command } from './PathCommandMap'
+
+
+const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = Command
+const debug = Debug.get('PathDrawer')
+
+export const PathDrawer = {
+
+    drawPathByData(drawer: IPathDrawer, data: IPathCommandData): 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)
+                    drawer.moveTo(data[i + 1], data[i + 2])
+                    i += 3
+                    break
+                case L:  //lineto(x, y)
+                    drawer.lineTo(data[i + 1], data[i + 2])
+                    i += 3
+                    break
+                case C:  //bezierCurveTo(x1, y1, x2, y2, x, y)
+                    drawer.bezierCurveTo(data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6])
+                    i += 7
+                    break
+                case Q:  //quadraticCurveTo(x1, y1, x, y)
+                    drawer.quadraticCurveTo(data[i + 1], data[i + 2], data[i + 3], data[i + 4])
+                    i += 5
+                    break
+                case Z:  //closepath()
+                    drawer.closePath()
+                    i += 1
+                    break
+
+                // canvas command
+
+                case N: // rect(x, y, width, height)
+                    drawer.rect(data[i + 1], data[i + 2], data[i + 3], data[i + 4])
+                    i += 5
+                    break
+                case D: // roundRect(x, y, width, height, radius1, radius2, radius3, radius4)
+                    drawer.roundRect(data[i + 1], data[i + 2], data[i + 3], data[i + 4], [data[i + 5], data[i + 6], data[i + 7], data[i + 8]])
+                    i += 9
+                    break
+                case X: // simple roundRect(x, y, width, height, radius)
+                    drawer.roundRect(data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5])
+                    i += 6
+                    break
+                case G: // ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
+                    drawer.ellipse(data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5] * OneRadian, data[i + 6] * OneRadian, data[i + 7] * OneRadian, data[i + 8] as unknown as boolean)
+                    i += 9
+                    break
+                case F: // simple ellipse(x, y, radiusX, radiusY)
+                    drawer.ellipse(data[i + 1], data[i + 2], data[i + 3], data[i + 4], 0, 0, PI2, false)
+                    i += 5
+                    break
+                case O: // arc(x, y, radius, startAngle, endAngle, anticlockwise)
+                    drawer.arc(data[i + 1], data[i + 2], data[i + 3], data[i + 4] * OneRadian, data[i + 5] * OneRadian, data[i + 6] as unknown as boolean)
+                    i += 7
+                    break
+                case P: // simple arc(x, y, radius)
+                    drawer.arc(data[i + 1], data[i + 2], data[i + 3], 0, PI2, false)
+                    i += 4
+                    break
+                case U: // arcTo(x1, y1, x2, y2, radius)
+                    drawer.arcTo(data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5])
+                    i += 6
+                    break
+                default:
+                    debug.error(`command: ${command} [index:${i}]`, data)
+                    return
+            }
+        }
+
+    }
+
+}