@leafer/canvas-web 1.0.0-alpha.10 → 1.0.0-alpha.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/canvas-web",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.21",
   "description": "@leafer/canvas-web",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,11 +19,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/math": "1.0.0-alpha.10",
-    "@leafer/event": "1.0.0-alpha.10",
-    "@leafer/debug": "1.0.0-alpha.10"
+    "@leafer/math": "1.0.0-alpha.21",
+    "@leafer/event": "1.0.0-alpha.21",
+    "@leafer/debug": "1.0.0-alpha.21"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.10"
+    "@leafer/interface": "1.0.0-alpha.21"
   }
 }

package/src/CanvasBase.ts

@@ -122,7 +122,7 @@ export class CanvasBase {
 
     // end
 
-    public bindContextMethod(): void {
+    public __bindContext(): void {
         let method: IFunction
         contextMethodNameList.forEach(name => {
             method = (this.context as IObject)[name]

package/src/LeaferCanvas.ts

@@ -1,12 +1,15 @@
 import { IBounds, ILeaferCanvas, ICanvasStrokeOptions, ICanvasContext2D, ILeaferCanvasConfig, IMatrixData, IBoundsData, IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener, IMatrixWithBoundsData, IPointData, InnerId, ICanvasManager, IWindingRule } from '@leafer/interface'
 import { Bounds, BoundsHelper, IncrementId } from '@leafer/math'
 import { ResizeEvent } from '@leafer/event'
+import { Platform } from '@leafer/platform'
 import { Debug } from '@leafer/debug'
 
 import { CanvasBase } from './CanvasBase'
 
 
 const debug = Debug.get('LeaferCanvas')
+
+const temp = new Bounds()
 const minSize: IScreenSizeData = {
     width: 1,
     height: 1,
@@ -15,10 +18,9 @@ const minSize: IScreenSizeData = {
 
 export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
 
-    public readonly innerId: InnerId
-
     public manager: ICanvasManager
-    public view: HTMLCanvasElement
+
+    public readonly innerId: InnerId
 
     public pixelRatio: number
     public get pixelWidth(): number { return this.width * this.pixelRatio }
@@ -26,6 +28,9 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
 
     public bounds: IBounds
 
+    public view: HTMLCanvasElement | OffscreenCanvas
+    public offscreen: boolean
+
     public recycled?: boolean
 
     protected resizeObserver: ResizeObserver
@@ -38,79 +43,105 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
         this.manager = manager
         this.innerId = IncrementId.create(IncrementId.CNAVAS)
 
-        if (config.view) {
+        const { view, width, height, pixelRatio, fill, hittable: hitable } = config
+        const autoLayout = !width || !height
 
-            const { view } = config
+        this.pixelRatio = pixelRatio
+        this.offscreen = Platform.isWorker || config.offscreen
 
-            let realView: unknown = (typeof view === 'string') ? document.getElementById(view) : view as HTMLElement
-            if (realView) {
-                if (realView instanceof HTMLCanvasElement) {
+        if (this.offscreen) {
+            view ? this.view = view as OffscreenCanvas : this.__createView()
+        } else {
+            view ? this.__createViewFrom(view) : this.__createView()
+            const { style } = this.view as HTMLCanvasElement
+            if (fill) style.backgroundColor = fill
+            if (!hitable) style.pointerEvents = 'none'
+            if (autoLayout) style.display || (style.display = 'block')
+        }
+
+        this.__init()
+        if (!autoLayout) this.resize(config as IScreenSizeData)
+    }
 
-                    this.view = realView
+    protected __init(): void {
+        this.context = this.view.getContext('2d') as ICanvasContext2D
+        this.smooth = true
+        this.__bindContext()
+    }
 
-                } else {
-                    if (realView === window || realView === document) {
-                        const div = document.createElement('div')
-                        const { style } = div
-                        style.position = 'absolute'
-                        style.top = style.bottom = style.left = style.right = '0px'
-                        style.overflow = 'hidden'
-                        document.body.appendChild(div)
-                        realView = div
-                    }
+    protected __createView(): void {
+        this.view = this.offscreen ? new OffscreenCanvas(1, 1) : document.createElement('canvas')
+    }
+
+    protected __createViewFrom(inputView: string | object): void {
+        let find: unknown = (typeof inputView === 'string') ? document.getElementById(inputView) : inputView as HTMLElement
+        if (find) {
+            if (find instanceof HTMLCanvasElement) {
+
+                this.view = find
 
-                    this.view = document.createElement('canvas');
-                    (realView as HTMLElement).appendChild(this.view)
-                }
             } else {
-                debug.error(`can't find view by id: ${view}`)
-            }
 
-        }
+                let parent = find as HTMLDivElement
+                if (find === window || find === document) {
+                    const div = document.createElement('div')
+                    const { style } = div
+                    style.position = 'absolute'
+                    style.top = style.bottom = style.left = style.right = '0px'
+                    style.overflow = 'hidden'
+                    document.body.appendChild(div)
+                    parent = div
+                }
 
-        if (!this.view) this.view = document.createElement('canvas')
-        this.pixelRatio = config.pixelRatio
+                this.__createView()
+                const view = this.view as HTMLCanvasElement
 
-        if (!config.webgl) {
-            this.context = this.view.getContext('2d') as ICanvasContext2D
-            this.smooth = true
-            if (config.fill) this.view.style.backgroundColor = config.fill
-            if (config.width && config.height) this.resize(config as IScreenSizeData)
+                if (parent.hasChildNodes()) {
+                    const { style } = view
+                    style.position = 'absolute'
+                    style.top = style.left = '0px'
+                    parent.style.position || (parent.style.position = 'relative')
+                }
 
-            this.bindContextMethod()
+                parent.appendChild(view)
+            }
+        } else {
+            debug.error(`can't find view by id: ${inputView}`)
+            this.__createView()
         }
     }
 
-    public debug(): void { }
-
     public pixel(num: number): number { return num * this.pixelRatio }
 
-    public autoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {
-        const check = (parentSize: ISizeData) => {
-            const { x, y, width, height } = autoBounds.getBoundsFrom(parentSize)
-            const { style } = this.view
-            style.marginLeft = x + 'px'
-            style.marginTop = y + 'px'
-
-            if (width !== this.width || height !== this.height) {
-                const { pixelRatio } = this
-                const size = { width, height, pixelRatio }
-                const oldSize = { width: this.width, height: this.height, pixelRatio: this.pixelRatio }
-                this.resize(size)
-                if (this.width !== undefined) listener(new ResizeEvent(size, oldSize))
+    public startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {
+        if (!this.offscreen) {
+            const view = this.view as HTMLCanvasElement
+            const check = (parentSize: ISizeData) => {
+                const { x, y, width, height } = autoBounds.getBoundsFrom(parentSize)
+                const { style } = view
+                style.marginLeft = x + 'px'
+                style.marginTop = y + 'px'
+
+                if (width !== this.width || height !== this.height) {
+                    const { pixelRatio } = this
+                    const size = { width, height, pixelRatio }
+                    const oldSize = { width: this.width, height: this.height, pixelRatio: this.pixelRatio }
+                    this.resize(size)
+                    if (this.width !== undefined) listener(new ResizeEvent(size, oldSize))
+                }
             }
-        }
 
-        this.resizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                check(entry.contentRect)
-            }
-        })
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    check(entry.contentRect)
+                }
+            })
 
-        const parent = this.view.parentElement
-        if (parent) {
-            this.resizeObserver.observe(parent)
-            check(parent.getBoundingClientRect())
+            const parent = view.parentElement
+            if (parent) {
+                this.resizeObserver.observe(parent)
+                check(parent.getBoundingClientRect())
+            }
         }
     }
 
@@ -122,26 +153,29 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
     }
 
     public resize(size: IScreenSizeData): void {
-        const { style } = this.view
         const { width, height, pixelRatio } = size
         if (this.isSameSize(size)) return
 
         let takeCanvas: ILeaferCanvas
         if (this.context && this.width) {
             takeCanvas = this.getSameCanvas()
-            takeCanvas.copy(this)
+            takeCanvas.copyWorld(this)
         }
 
         Object.assign(this, { width, height, pixelRatio })
         this.bounds = new Bounds(0, 0, width, height)
 
-        style.width = width + 'px'
-        style.height = height + 'px'
+        if (!this.offscreen) {
+            const { style } = this.view as HTMLCanvasElement
+            style.width = width + 'px'
+            style.height = height + 'px'
+        }
+
         this.view.width = width * pixelRatio
         this.view.height = height * pixelRatio
 
         if (this.context && takeCanvas) {
-            this.copy(takeCanvas)
+            this.copyWorld(takeCanvas)
             takeCanvas.recycle()
         }
     }
@@ -201,7 +235,16 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
         }
     }
 
-    public setShadow(x: number, y: number, blur: number, color?: string): void {
+    public hitPath(point: IPointData, fillRule?: IWindingRule): boolean {
+        return this.context.isPointInPath(point.x, point.y, fillRule)
+    }
+
+    public hitStroke(point: IPointData): boolean {
+        return this.context.isPointInStroke(point.x, point.y)
+    }
+
+
+    public setWorldShadow(x: number, y: number, blur: number, color?: string): void {
         const { pixelRatio } = this
         this.shadowOffsetX = x * pixelRatio
         this.shadowOffsetY = y * pixelRatio
@@ -209,28 +252,13 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
         this.shadowColor = color || 'black'
     }
 
-    public setBlur(blur: number): void {
+    public setWorldBlur(blur: number): void {
         const { pixelRatio } = this
         this.filter = `blur(${blur * pixelRatio}px)`
     }
 
 
-    public hitPath(point: IPointData, fillRule?: IWindingRule): boolean {
-        return this.context.isPointInPath(point.x, point.y, fillRule)
-    }
-
-    public hitStroke(point: IPointData): boolean {
-        return this.context.isPointInStroke(point.x, point.y)
-    }
-
-    public replaceBy(canvas: ILeaferCanvas, from?: IBoundsData, to?: IBoundsData): void {
-        canvas.save()
-        this.blendMode = 'copy'
-        this.copy(canvas, from, to)
-        canvas.restore()
-    }
-
-    public copy(canvas: ILeaferCanvas, from?: IBoundsData, to?: IBoundsData, blendMode?: string): void {
+    public copyWorld(canvas: ILeaferCanvas, from?: IBoundsData, to?: IBoundsData, blendMode?: string): void {
         if (from) {
             if (!to) to = from
             const { pixelRatio } = this
@@ -249,7 +277,7 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
         if (fromWorld.b || fromWorld.c) {
             this.save()
             this.resetTransform()
-            this.copy(canvas, fromWorld, BoundsHelper.tempTimesMatrix(toLocalBounds, fromWorld))
+            this.copyWorld(canvas, fromWorld, BoundsHelper.tempToWorld(toLocalBounds, fromWorld))
             this.restore()
         } else {
             this.drawImage(canvas.view as HTMLCanvasElement, fromWorld.x * pixelRatio, fromWorld.y * pixelRatio, fromWorld.width * pixelRatio, fromWorld.height * pixelRatio, toLocalBounds.x, toLocalBounds.y, toLocalBounds.width, toLocalBounds.height)
@@ -257,7 +285,7 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
         if (blendMode) this.blendMode = 'normal'
     }
 
-    public fillBounds(bounds: IBoundsData, color: string | object, blendMode?: string): void {
+    public fillWorld(bounds: IBoundsData, color: string | object, blendMode?: string): void {
         const { pixelRatio } = this
         if (blendMode) this.blendMode = blendMode
         this.fillStyle = color
@@ -265,7 +293,7 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
         if (blendMode) this.blendMode = 'normal'
     }
 
-    public strokeBounds(bounds: IBoundsData, color: string | object, blendMode?: string): void {
+    public strokeWorld(bounds: IBoundsData, color: string | object, blendMode?: string): void {
         const { pixelRatio } = this
         if (blendMode) this.blendMode = blendMode
         this.strokeStyle = color
@@ -273,15 +301,19 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
         if (blendMode) this.blendMode = 'normal'
     }
 
-    public clearBounds(bounds: IBoundsData): void {
+    public clearWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
         const { pixelRatio } = this
-        this.clearRect(bounds.x * pixelRatio, bounds.y * pixelRatio, bounds.width * pixelRatio, bounds.height * pixelRatio)
+        temp.copy(bounds).scale(pixelRatio)
+        if (ceilPixel) temp.ceil()
+        this.clearRect(temp.x, temp.y, temp.width, temp.height)
     }
 
-    public clipBounds(bounds: IBoundsData): void {
+    public clipWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
         const { pixelRatio } = this
         this.beginPath()
-        this.rect(bounds.x * pixelRatio, bounds.y * pixelRatio, bounds.width * pixelRatio, bounds.height * pixelRatio)
+        temp.copy(bounds).scale(pixelRatio)
+        if (ceilPixel) temp.ceil()
+        this.rect(temp.x, temp.y, temp.width, temp.height)
         this.clip()
 
     }
@@ -328,10 +360,13 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
         if (this.view) {
             super.destroy()
             this.stopAutoLayout()
+            if (!this.offscreen) {
+                const view = this.view as HTMLCanvasElement
+                if (view.parentElement) view.remove()
+            }
             this.manager = null
-            if (this.view && this.view.parentElement) this.view.remove()
             this.view = null
-            this.bounds = null
+            this.context = null
         }
     }