@leafer/canvas 1.0.0-beta → 1.0.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/canvas",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-beta.10",
   "description": "@leafer/canvas",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,12 +19,15 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/list": "1.0.0-beta",
-    "@leafer/math": "1.0.0-beta",
-    "@leafer/data": "1.0.0-beta",
-    "@leafer/platform": "1.0.0-beta"
+    "@leafer/file": "1.0.0-beta.10",
+    "@leafer/list": "1.0.0-beta.10",
+    "@leafer/math": "1.0.0-beta.10",
+    "@leafer/data": "1.0.0-beta.10",
+    "@leafer/path": "1.0.0-beta.10",
+    "@leafer/debug": "1.0.0-beta.10",
+    "@leafer/platform": "1.0.0-beta.10"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta"
+    "@leafer/interface": "1.0.0-beta.10"
   }
 }

package/src/Canvas.ts

@@ -136,6 +136,7 @@ export class Canvas implements ICanvasAttr {
             method = (this.context as IObject)[name]
             if (method) (this as IObject)[name] = method.bind(this.context)
         })
+        this.textBaseline = "alphabetic"
     }
 
     // canvas method
@@ -155,8 +156,13 @@ export class Canvas implements ICanvasAttr {
     @contextMethod()
     public restore(): void { }
 
-    @contextMethod()
-    public transform(_a: number, _b: number, _c: number, _d: number, _e: number, _f: number): void { }
+    public transform(a: number | IMatrixData, b?: number, c?: number, d?: number, e?: number, f?: number): void {
+        if (typeof a === 'object') {
+            this.context.transform(a.a, a.b, a.c, a.d, a.e, a.f)
+        } else {
+            this.context.transform(a, b, c, d, e, f)
+        }
+    }
 
     @contextMethod()
     public translate(_x: number, _y: number): void { }

package/src/CanvasManager.ts

@@ -49,7 +49,7 @@ export class CanvasManager implements ICanvasManager {
         this.list.length = 0
     }
 
-    public destory(): void {
+    public destroy(): void {
         this.clear()
     }
 

package/src/LeaferCanvasBase.ts

@@ -1,13 +1,16 @@
-import { IBounds, ILeaferCanvas, ICanvasStrokeOptions, ILeaferCanvasConfig, IMatrixData, IBoundsData, IAutoBounds, IScreenSizeData, IResizeEventListener, IMatrixWithBoundsData, IPointData, InnerId, ICanvasManager, IWindingRule, IBlendMode } from '@leafer/interface'
+import { IBounds, ILeaferCanvas, ICanvasStrokeOptions, ILeaferCanvasConfig, IMatrixData, IBoundsData, IAutoBounds, IScreenSizeData, IResizeEventListener, IMatrixWithBoundsData, IPointData, InnerId, ICanvasManager, IWindingRule, IBlendMode, IExportImageType, IExportFileType, IBlob } from '@leafer/interface'
 import { Bounds, BoundsHelper, IncrementId } from '@leafer/math'
 import { Creator, Platform } from '@leafer/platform'
 import { DataHelper } from '@leafer/data'
+import { FileHelper } from '@leafer/file'
+import { Debug } from '@leafer/debug'
 
 import { Canvas } from './Canvas'
 
 
 const temp = new Bounds()
 const minSize: IScreenSizeData = { width: 1, height: 1, pixelRatio: 1 }
+const debug = Debug.get('LeaferCanvasBase')
 
 export const canvasSizeAttrs = ['width', 'height', 'pixelRatio']
 
@@ -22,16 +25,18 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
     public pixelRatio: number
     public get pixelWidth(): number { return this.width * this.pixelRatio }
     public get pixelHeight(): number { return this.height * this.pixelRatio }
+
     public get allowBackgroundColor(): boolean { return this.view && this.parentView && !this.offscreen }
 
     public bounds: IBounds
+    public clientBounds: IBoundsData
 
     public config: ILeaferCanvasConfig
 
     public autoLayout: boolean
 
-    public view: unknown
-    public parentView: unknown
+    public view: any
+    public parentView: any
 
     public unreal?: boolean
 
@@ -59,19 +64,61 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
         this.config = config
 
         this.init()
-
-        this.textBaseline = "alphabetic"
     }
 
     public init(): void { }
-    public setBackgroundColor(_color: string): void { }
-    public setHittable(_hittable: boolean): void { }
+
+    protected __createContext(): void {
+        this.context = this.view.getContext('2d')
+        this.__bindContext()
+    }
+
+    public toBlob(type?: IExportFileType, quality?: number): Promise<IBlob> {
+        return new Promise((resolve) => {
+            const canvas = this.getSaveCanvas(type)
+            Platform.origin.canvasToBolb(canvas.view, type, quality).then((blob) => {
+                canvas.recycle()
+                resolve(blob)
+            }).catch((e) => {
+                debug.error(e)
+                resolve(null)
+            })
+        })
+    }
+
+    public toDataURL(type?: IExportImageType, quality?: number): string {
+        const canvas = this.getSaveCanvas(type)
+        const data = Platform.origin.canvasToDataURL(canvas.view, type, quality)
+        canvas.recycle()
+        return data
+    }
+
+    public saveAs(filename: string, quality?: number): Promise<boolean> {
+        return new Promise((resolve) => {
+            const canvas = this.getSaveCanvas(FileHelper.fileType(filename))
+            Platform.origin.canvasSaveAs(canvas.view, filename, quality).then(() => {
+                canvas.recycle()
+                resolve(true)
+            }).catch((e) => {
+                debug.error(e)
+                resolve(false)
+            })
+        })
+    }
+
+    public getSaveCanvas(type: string): ILeaferCanvas {
+        const { backgroundColor, bounds } = this as ILeaferCanvas
+        const canvas = this.getSameCanvas()
+        if (['jpg', 'jpeg'].includes(type)) canvas.fillWorld(bounds, '#FFFFFF')
+        if (backgroundColor) canvas.fillWorld(bounds, backgroundColor)
+        canvas.copyWorld(this)
+        return canvas
+    }
+
 
     public resize(size: IScreenSizeData): void {
         if (this.isSameSize(size)) return
 
-        const { width, height } = size
-
         let takeCanvas: ILeaferCanvas
         if (this.context && !this.unreal && this.width) {
             takeCanvas = this.getSameCanvas()
@@ -79,13 +126,16 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
         }
 
         DataHelper.copyAttrs(this, size, canvasSizeAttrs)
-        this.bounds = new Bounds(0, 0, width, height)
+        this.bounds = new Bounds(0, 0, this.width, this.height)
+        this.pixelRatio || (this.pixelRatio = 1)
 
         if (!this.unreal) {
-            this.setViewSize(size)
+            this.updateViewSize()
             this.smooth = this.config.smooth
         }
 
+        this.updateClientBounds()
+
         if (this.context && !this.unreal && takeCanvas) {
             this.clearWorld(takeCanvas.bounds)
             this.copyWorld(takeCanvas)
@@ -93,7 +143,9 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
         }
     }
 
-    public setViewSize(_size: IScreenSizeData): void { }
+    public updateViewSize(): void { }
+    public updateClientBounds(): void { }
+
     public startAutoLayout(_autoBounds: IAutoBounds, _listener: IResizeEventListener): void { }
     public stopAutoLayout(): void { }
 
@@ -160,7 +212,7 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
     }
 
     public hitFill(point: IPointData, fillRule?: IWindingRule): boolean {
-        return this.context.isPointInPath(point.x, point.y, fillRule)
+        return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y)
     }
 
     public hitStroke(point: IPointData, strokeWidth?: number): boolean {
@@ -213,6 +265,10 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
         this.copyWorld(maskCanvas, fromBounds, toBounds, 'destination-in')
     }
 
+    public useEraser(eraserCanvas: ILeaferCanvas, fromBounds?: IBoundsData, toBounds?: IBoundsData): void {
+        this.copyWorld(eraserCanvas, fromBounds, toBounds, 'destination-out')
+    }
+
     public fillWorld(bounds: IBoundsData, color: string | object, blendMode?: IBlendMode): void {
         if (blendMode) this.blendMode = blendMode
         this.fillStyle = color

package/src/index.ts

@@ -1,4 +1,4 @@
 export { CanvasManager } from './CanvasManager'
 export { HitCanvasManager } from './HitCanvasManager'
 export { LeaferCanvasBase, canvasSizeAttrs } from './LeaferCanvasBase'
-
+export { canvasPatch } from './patch'

package/src/patch/index.ts

@@ -0,0 +1,7 @@
+import { IPathDrawer } from '@leafer/interface'
+
+import { roundRect } from './roundRect'
+
+export function canvasPatch(drawer: IPathDrawer): void {
+    roundRect(drawer)
+}

package/src/patch/roundRect.ts

@@ -0,0 +1,18 @@
+import { IPathDrawer } from '@leafer/interface'
+import { RectHelper } from '@leafer/path'
+
+
+const { drawRoundRect } = RectHelper
+
+export function roundRect(drawer: IPathDrawer): void {
+
+    if (drawer && !drawer.roundRect) {
+
+        drawer.roundRect = function (x: number, y: number, width: number, height: number, cornerRadius: number | number[]): void {
+
+            drawRoundRect(this as IPathDrawer, x, y, width, height, cornerRadius)
+        }
+    }
+
+}
+