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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/canvas-web",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.23",
   "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.23",
+    "@leafer/event": "1.0.0-alpha.23",
+    "@leafer/debug": "1.0.0-alpha.23"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.10"
+    "@leafer/interface": "1.0.0-alpha.23"
   }
 }

package/src/CanvasBase.ts

@@ -19,6 +19,7 @@ function contextMethod() {
     }
 }
 
+const emptyArray: number[] = []
 
 export class CanvasBase {
 
@@ -62,8 +63,12 @@ export class CanvasBase {
     @contextAttr('lineJoin')
     public strokeJoin: string
 
-    @contextAttr('lineDash')
-    public dashPattern: Array<number>
+    public set dashPattern(value: number[]) {
+        this.context.setLineDash(value || emptyArray)
+    }
+    public get dashPattern(): number[] {
+        return this.context.getLineDash()
+    }
 
     @contextAttr('lineDashOffset')
     public dashOffset: number
@@ -122,7 +127,7 @@ export class CanvasBase {
 
     // end
 
-    public bindContextMethod(): void {
+    public __bindContext(): void {
         let method: IFunction
         contextMethodNameList.forEach(name => {
             method = (this.context as IObject)[name]
@@ -147,6 +152,9 @@ export class CanvasBase {
     @contextMethod()
     public restore(): void { }
 
+    @contextMethod()
+    public transform(_a: number, _b: number, _c: number, _d: number, _e: number, _f: number): void { }
+
     @contextMethod()
     public translate(_x: number, _y: number): void { }
 

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,91 +28,137 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
 
     public bounds: IBounds
 
+    public view: HTMLCanvasElement | OffscreenCanvas
+    public parentView: HTMLElement
+
+    public offscreen: boolean
+
     public recycled?: boolean
 
     protected resizeObserver: ResizeObserver
 
+    protected savedblendMode: string
+
     constructor(config?: ILeaferCanvasConfig, manager?: ICanvasManager) {
         super()
 
         if (!config) config = minSize
+        if (!config.pixelRatio) config.pixelRatio = devicePixelRatio
 
         this.manager = manager
         this.innerId = IncrementId.create(IncrementId.CNAVAS)
 
-        if (config.view) {
+        const { view, width, height, pixelRatio, fill, hittable } = 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 (!hittable) style.pointerEvents = 'none'
+            if (autoLayout) style.display || (style.display = 'block')
+            this.parentView = (this.view as HTMLCanvasElement).parentElement
+        }
 
-                    this.view = realView
+        this.__init()
+        if (!autoLayout) this.resize(config as IScreenSizeData)
+    }
 
-                } 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 __init(): void {
+        this.context = this.view.getContext('2d') as ICanvasContext2D
+        this.__bindContext()
+    }
+
+    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'
+                    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 debug(): void {
+        const panel = document.createElement('div')
+        panel.style.position = 'absolute'
+        panel.style.top = '10px'
+        panel.style.left = '10px'
+        panel.style.transform = 'scale(0.5)'
+        panel.style.transformOrigin = '0px 0px'
+        panel.style.pointerEvents = 'none'
+        panel.style.zIndex = '100'
+        document.body.appendChild(panel)
+        panel.appendChild(this.view as HTMLCanvasElement)
+    }
 
     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 = this.parentView
+            if (parent) {
+                this.resizeObserver.observe(parent)
+                check(parent.getBoundingClientRect())
+            }
         }
     }
 
@@ -122,30 +170,43 @@ 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
+        this.smooth = false
 
         if (this.context && takeCanvas) {
-            this.copy(takeCanvas)
+            this.copyWorld(takeCanvas)
             takeCanvas.recycle()
         }
     }
 
+    public saveBlendMode(blendMode: string): void {
+        this.savedblendMode = this.blendMode
+        this.blendMode = blendMode
+    }
+
+    public restoreBlendMode(): void {
+        this.blendMode = this.savedblendMode
+    }
+
     public setWorld(matrix: IMatrixData, parentMatrix?: IMatrixData, onlyTranslate?: boolean): void {
         const { pixelRatio } = this
         if (parentMatrix) {
@@ -197,11 +258,21 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
             this.strokeCap = options.strokeCap
             this.strokeJoin = options.strokeJoin
             this.dashPattern = options.dashPattern
+            this.dashOffset = options.dashOffset
             this.miterLimit = options.miterLimit
         }
     }
 
-    public setShadow(x: number, y: number, blur: number, color?: string): void {
+    public hitFill(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,79 +280,65 @@ 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 (blendMode) this.blendMode = blendMode
         if (from) {
-            if (!to) to = from
             const { pixelRatio } = this
-            if (blendMode) this.blendMode = blendMode
+            if (!to) to = from
             this.drawImage(canvas.view as HTMLCanvasElement, from.x * pixelRatio, from.y * pixelRatio, from.width * pixelRatio, from.height * pixelRatio, to.x * pixelRatio, to.y * pixelRatio, to.width * pixelRatio, to.height * pixelRatio)
-            if (blendMode) this.blendMode = 'normal'
         } else {
             this.drawImage(canvas.view as HTMLCanvasElement, 0, 0)
         }
-
+        if (blendMode) this.blendMode = 'normal'
     }
 
-    public copyWorldToLocal(canvas: ILeaferCanvas, fromWorld: IMatrixWithBoundsData, toLocalBounds: IBoundsData, blendMode?: string): void {
-        const { pixelRatio } = this
+    public copyWorldToInner(canvas: ILeaferCanvas, fromWorld: IMatrixWithBoundsData, toInnerBounds: IBoundsData, blendMode?: string): void {
         if (blendMode) this.blendMode = blendMode
         if (fromWorld.b || fromWorld.c) {
             this.save()
             this.resetTransform()
-            this.copy(canvas, fromWorld, BoundsHelper.tempTimesMatrix(toLocalBounds, fromWorld))
+            this.copyWorld(canvas, fromWorld, BoundsHelper.tempToOuterOf(toInnerBounds, 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)
+            const { pixelRatio } = this
+            this.drawImage(canvas.view as HTMLCanvasElement, fromWorld.x * pixelRatio, fromWorld.y * pixelRatio, fromWorld.width * pixelRatio, fromWorld.height * pixelRatio, toInnerBounds.x, toInnerBounds.y, toInnerBounds.width, toInnerBounds.height)
         }
         if (blendMode) this.blendMode = 'normal'
     }
 
-    public fillBounds(bounds: IBoundsData, color: string | object, blendMode?: string): void {
-        const { pixelRatio } = this
+    public fillWorld(bounds: IBoundsData, color: string | object, blendMode?: string): void {
         if (blendMode) this.blendMode = blendMode
         this.fillStyle = color
-        this.fillRect(bounds.x * pixelRatio, bounds.y * pixelRatio, bounds.width * pixelRatio, bounds.height * pixelRatio)
+        temp.copy(bounds).scale(this.pixelRatio)
+        this.fillRect(temp.x, temp.y, temp.width, temp.height)
         if (blendMode) this.blendMode = 'normal'
     }
 
-    public strokeBounds(bounds: IBoundsData, color: string | object, blendMode?: string): void {
-        const { pixelRatio } = this
+    public strokeWorld(bounds: IBoundsData, color: string | object, blendMode?: string): void {
         if (blendMode) this.blendMode = blendMode
         this.strokeStyle = color
-        this.strokeRect(bounds.x * pixelRatio, bounds.y * pixelRatio, bounds.width * pixelRatio, bounds.height * pixelRatio)
+        temp.copy(bounds).scale(this.pixelRatio)
+        this.strokeRect(temp.x, temp.y, temp.width, temp.height)
         if (blendMode) this.blendMode = 'normal'
     }
 
-    public clearBounds(bounds: IBoundsData): void {
-        const { pixelRatio } = this
-        this.clearRect(bounds.x * pixelRatio, bounds.y * pixelRatio, bounds.width * pixelRatio, bounds.height * pixelRatio)
+    public clearWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
+        temp.copy(bounds).scale(this.pixelRatio)
+        if (ceilPixel) temp.ceil()
+        this.clearRect(temp.x, temp.y, temp.width, temp.height)
     }
 
-    public clipBounds(bounds: IBoundsData): void {
-        const { pixelRatio } = this
+    public clipWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
         this.beginPath()
-        this.rect(bounds.x * pixelRatio, bounds.y * pixelRatio, bounds.width * pixelRatio, bounds.height * pixelRatio)
+        temp.copy(bounds).scale(this.pixelRatio)
+        if (ceilPixel) temp.ceil()
+        this.rect(temp.x, temp.y, temp.width, temp.height)
         this.clip()
 
     }
@@ -323,15 +380,27 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
         this.manager.recycle(this)
     }
 
+    public unloadView(): void {
+        if (this.parentView) {
+            const view = this.view as HTMLCanvasElement
+            const fill = view.style.backgroundColor
+            if (fill) this.parentView.style.backgroundColor = fill
+            view.remove() // App needs to use
+        }
+    }
 
     public destroy(): void {
         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.parentView = null
+            this.context = null
         }
     }