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

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@leafer/canvas-web",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.21",
   "description": "@leafer/canvas-web",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/leaferjs/leafer.git"
@@ -17,11 +19,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/math": "1.0.0-alpha.1",
-    "@leafer/event": "1.0.0-alpha.1",
-    "@leafer/debug": "1.0.0-alpha.1"
+    "@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.1"
+    "@leafer/interface": "1.0.0-alpha.21"
   }
-}
+}

package/src/CanvasBase.ts

@@ -1,4 +1,4 @@
-import { ICanvasAttr, CanvasFillRule, Path2D, TextMetrics, CanvasRenderingContext2D, IObject, InnerId, IMatrixData, IFunction } from '@leafer/interface'
+import { ICanvasAttr, ITextMetrics, ICanvasContext2D, IPath2D, IObject, InnerId, IMatrixData, IFunction, IWindingRule } from '@leafer/interface'
 
 
 function contextAttr(realName?: string) {
@@ -14,7 +14,7 @@ function contextAttr(realName?: string) {
 
 const contextMethodNameList: string[] = []
 function contextMethod() {
-    return (target: CanvasBase, key: string) => {
+    return (_target: CanvasBase, key: string) => {
         contextMethodNameList.push(key)
     }
 }
@@ -29,7 +29,7 @@ export class CanvasBase {
 
     public __: ICanvasAttr
 
-    public context: CanvasRenderingContext2D
+    public context: ICanvasContext2D
 
     // canvas attr
 
@@ -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]
@@ -133,7 +133,7 @@ export class CanvasBase {
     // canvas method
 
     @contextMethod()
-    public setTransform(a: number | IMatrixData, b?: number, c?: number, d?: number, e?: number, f?: number): void { }
+    public setTransform(_a: number | IMatrixData, _b?: number, _c?: number, _d?: number, _e?: number, _f?: number): void { }
 
     @contextMethod()
     public resetTransform(): void { }
@@ -148,31 +148,31 @@ export class CanvasBase {
     public restore(): void { }
 
     @contextMethod()
-    public translate(x: number, y: number): void { }
+    public translate(_x: number, _y: number): void { }
 
     @contextMethod()
-    public scale(x: number, y: number): void { }
+    public scale(_x: number, _y: number): void { }
 
     @contextMethod()
-    public rotate(angle: number): void { }
+    public rotate(_angle: number): void { }
 
     @contextMethod()
-    public fill(path2d?: Path2D | CanvasFillRule, rule?: CanvasFillRule): void { }
+    public fill(_path2d?: IPath2D | IWindingRule, _rule?: IWindingRule): void { }
 
     @contextMethod()
-    public stroke(path2d?: Path2D): void { }
+    public stroke(_path2d?: IPath2D): void { }
 
     @contextMethod()
-    public clip(path2d?: Path2D | CanvasFillRule, rule?: CanvasFillRule): void { }
+    public clip(_path2d?: IPath2D | IWindingRule, _rule?: IWindingRule): void { }
 
     @contextMethod()
-    public fillRect(x: number, y: number, width: number, height: number): void { }
+    public fillRect(_x: number, _y: number, _width: number, _height: number): void { }
 
     @contextMethod()
-    public strokeRect(x: number, y: number, width: number, height: number): void { }
+    public strokeRect(_x: number, _y: number, _width: number, _height: number): void { }
 
     @contextMethod()
-    public clearRect(x: number, y: number, width: number, height: number): void { }
+    public clearRect(_x: number, _y: number, _width: number, _height: number): void { }
 
     public drawImage(image: CanvasImageSource, sx: number, sy: number, sw?: number, sh?: number, dx?: number, dy?: number, dw?: number, dh?: number): void {
         switch (arguments.length) {
@@ -211,62 +211,62 @@ export class CanvasBase {
     public beginPath(): void { }
 
     @contextMethod()
-    public moveTo(x: number, y: number): void { }
+    public moveTo(_x: number, _y: number): void { }
 
     @contextMethod()
-    public lineTo(x: number, y: number): void { }
+    public lineTo(_x: number, _y: number): void { }
 
     @contextMethod()
-    public bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void { }
+    public bezierCurveTo(_cp1x: number, _cp1y: number, _cp2x: number, _cp2y: number, _x: number, _y: number): void { }
 
     @contextMethod()
-    public quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void { }
+    public quadraticCurveTo(_cpx: number, _cpy: number, _x: number, _y: number): void { }
 
     @contextMethod()
     public closePath(): void { }
 
     @contextMethod()
-    public arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void { }
+    public arc(_x: number, _y: number, _radius: number, _startAngle: number, _endAngle: number, _counterclockwise?: boolean): void { }
 
     @contextMethod()
-    public arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void { }
+    public arcTo(_x1: number, _y1: number, _x2: number, _y2: number, _radius: number): void { }
 
     @contextMethod()
-    public ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void { }
+    public ellipse(_x: number, _y: number, _radiusX: number, _radiusY: number, _rotation: number, _startAngle: number, _endAngle: number, _counterclockwise?: boolean): void { }
 
     @contextMethod()
-    public rect(x: number, y: number, width: number, height: number): void { }
+    public rect(_x: number, _y: number, _width: number, _height: number): void { }
 
     @contextMethod()
-    public roundRect(x: number, y: number, width: number, height: number, radius?: number | number[]): void { }
+    public roundRect(_x: number, _y: number, _width: number, _height: number, _radius?: number | number[]): void { }
 
     // end canvas draw
 
     // paint
 
     @contextMethod()
-    public createConicGradient(startAngle: number, x: number, y: number): CanvasGradient { return void 0 }
+    public createConicGradient(_startAngle: number, _x: number, _y: number): CanvasGradient { return void 0 }
 
     @contextMethod()
-    public createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient { return void 0 }
+    public createLinearGradient(_x0: number, _y0: number, _x1: number, _y1: number): CanvasGradient { return void 0 }
 
     @contextMethod()
-    public createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null { return void 0 }
+    public createPattern(_image: CanvasImageSource, _repetition: string | null): CanvasPattern | null { return void 0 }
 
     @contextMethod()
-    public createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient { return void 0 }
+    public createRadialGradient(_x0: number, _y0: number, _r0: number, _x1: number, _y1: number, _r1: number): CanvasGradient { return void 0 }
 
     // text
     @contextMethod()
-    public fillText(text: string, x: number, y: number, maxWidth?: number): void { }
+    public fillText(_text: string, _x: number, _y: number, _maxWidth?: number): void { }
 
     @contextMethod()
-    public measureText(text: string): TextMetrics { return void 0 }
+    public measureText(_text: string): ITextMetrics { return void 0 }
 
     @contextMethod()
-    public strokeText(text: string, x: number, y: number, maxWidth?: number): void { }
+    public strokeText(_text: string, _x: number, _y: number, _maxWidth?: number): void { }
 
     public destroy(): void {
-        this.context = undefined
+        this.context = null
     }
 }

package/src/LeaferCanvas.ts

@@ -1,12 +1,15 @@
-import { IBounds, ILeaferCanvas, ICanvasStrokeOptions, CanvasFillRule, ILeaferCanvasConfig, IMatrixData, IBoundsData, IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener, IMatrixWithBoundsData, IPointData, InnerId, ILeafer, ICanvasManager } from '@leafer/interface'
+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,110 +43,139 @@ 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.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.smooth = true
+        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'
+                    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')
-            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())
+            }
         }
     }
 
     public stopAutoLayout(): void {
         if (this.resizeObserver) {
             this.resizeObserver.disconnect()
-            this.resizeObserver = undefined
+            this.resizeObserver = null
         }
     }
 
     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?: CanvasFillRule): 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()
-            this.manager = undefined
-            if (this.view && this.view.parentElement) this.view.remove()
-            this.view = undefined
-            this.bounds = undefined
+            if (!this.offscreen) {
+                const view = this.view as HTMLCanvasElement
+                if (view.parentElement) view.remove()
+            }
+            this.manager = null
+            this.view = null
+            this.context = null
         }
     }
 

package/src/patch/roundRect.ts

@@ -1,11 +1,11 @@
-import { ICanvasDrawPath } from '@leafer/interface'
+import { IObject } from '@leafer/interface'
 
 
 export function roundRect(): void {
 
-    if (!(CanvasRenderingContext2D.prototype as ICanvasDrawPath).roundRect) {
+    if (!(CanvasRenderingContext2D.prototype as IObject).roundRect) {
 
-        (CanvasRenderingContext2D.prototype as ICanvasDrawPath).roundRect = (Path2D.prototype as ICanvasDrawPath).roundRect = function (x: number, y: number, w: number, h: number, r: number | number[]): void {
+        (CanvasRenderingContext2D.prototype as IObject).roundRect = (Path2D.prototype as IObject).roundRect = function (x: number, y: number, w: number, h: number, r: number | number[]): void {
 
             let topLeft: number, topRight: number, bottomRight: number, bottomLeft: number