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

package/package.json

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

@@ -29,21 +29,26 @@ 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)
 
-        const { view, width, height, pixelRatio, fill, hittable: hitable } = config
+        const { view, width, height, pixelRatio, fill, hittable } = config
         const autoLayout = !width || !height
 
         this.pixelRatio = pixelRatio
@@ -55,8 +60,9 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
             view ? this.__createViewFrom(view) : this.__createView()
             const { style } = this.view as HTMLCanvasElement
             if (fill) style.backgroundColor = fill
-            if (!hitable) style.pointerEvents = 'none'
+            if (!hittable) style.pointerEvents = 'none'
             if (autoLayout) style.display || (style.display = 'block')
+            this.parentView = (this.view as HTMLCanvasElement).parentElement
         }
 
         this.__init()
@@ -65,7 +71,6 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
 
     protected __init(): void {
         this.context = this.view.getContext('2d') as ICanvasContext2D
-        this.smooth = true
         this.__bindContext()
     }
 
@@ -88,7 +93,6 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
                     const { style } = div
                     style.position = 'absolute'
                     style.top = style.bottom = style.left = style.right = '0px'
-                    style.overflow = 'hidden'
                     document.body.appendChild(div)
                     parent = div
                 }
@@ -111,6 +115,19 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
         }
     }
 
+    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 startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {
@@ -137,7 +154,7 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
                 }
             })
 
-            const parent = view.parentElement
+            const parent = this.parentView
             if (parent) {
                 this.resizeObserver.observe(parent)
                 check(parent.getBoundingClientRect())
@@ -173,6 +190,7 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
 
         this.view.width = width * pixelRatio
         this.view.height = height * pixelRatio
+        this.smooth = false
 
         if (this.context && takeCanvas) {
             this.copyWorld(takeCanvas)
@@ -180,6 +198,15 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
         }
     }
 
+    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) {
@@ -231,11 +258,12 @@ 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 hitPath(point: IPointData, fillRule?: IWindingRule): boolean {
+    public hitFill(point: IPointData, fillRule?: IWindingRule): boolean {
         return this.context.isPointInPath(point.x, point.y, fillRule)
     }
 
@@ -259,59 +287,56 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
 
 
     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.copyWorld(canvas, fromWorld, BoundsHelper.tempToWorld(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 fillWorld(bounds: IBoundsData, color: string | object, blendMode?: string): void {
-        const { pixelRatio } = this
         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 strokeWorld(bounds: IBoundsData, color: string | object, blendMode?: string): void {
-        const { pixelRatio } = this
         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 clearWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
-        const { pixelRatio } = this
-        temp.copy(bounds).scale(pixelRatio)
+        temp.copy(bounds).scale(this.pixelRatio)
         if (ceilPixel) temp.ceil()
         this.clearRect(temp.x, temp.y, temp.width, temp.height)
     }
 
     public clipWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
-        const { pixelRatio } = this
         this.beginPath()
-        temp.copy(bounds).scale(pixelRatio)
+        temp.copy(bounds).scale(this.pixelRatio)
         if (ceilPixel) temp.ceil()
         this.rect(temp.x, temp.y, temp.width, temp.height)
         this.clip()
@@ -355,6 +380,14 @@ 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) {
@@ -366,6 +399,7 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
             }
             this.manager = null
             this.view = null
+            this.parentView = null
             this.context = null
         }
     }