@leafer/canvas 1.0.0-beta.2 → 1.0.0-beta.5

package/package.json

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

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 { Canvas } from './Canvas'
+import { FileHelper } from '@leafer/file'
+import { Debug } from '@leafer/debug'
 
 
 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,6 +25,7 @@ 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
@@ -64,14 +68,54 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
     }
 
     public init(): void { }
-    public setBackgroundColor(_color: string): void { }
-    public setHittable(_hittable: boolean): void { }
+
+
+    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,10 +123,11 @@ 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
         }
 
@@ -93,7 +138,7 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
         }
     }
 
-    public setViewSize(_size: IScreenSizeData): void { }
+    public updateViewSize(): void { }
     public startAutoLayout(_autoBounds: IAutoBounds, _listener: IResizeEventListener): void { }
     public stopAutoLayout(): void { }
 
@@ -213,6 +258,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