@leafer/canvas-web 1.0.0-beta → 1.0.0-beta.10

package/package.json

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

package/src/LeaferCanvas.ts

@@ -1,7 +1,8 @@
-import { ICanvasContext2D, IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener } from '@leafer/interface'
+import { IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener } from '@leafer/interface'
 import { LeaferCanvasBase, canvasSizeAttrs } from '@leafer/canvas'
 import { ResizeEvent } from '@leafer/event'
 import { DataHelper } from '@leafer/data'
+import { Platform } from '@leafer/platform'
 import { Debug } from '@leafer/debug'
 
 
@@ -24,7 +25,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
         } else {
             view ? this.__createViewFrom(view) : this.__createView()
             const { style } = this.view as HTMLCanvasElement
-            if (this.autoLayout) style.display || (style.display = 'block')
+            style.display || (style.display = 'block')
             this.parentView = (this.view as HTMLCanvasElement).parentElement
         }
 
@@ -33,20 +34,11 @@ export class LeaferCanvas extends LeaferCanvasBase {
         if (!this.autoLayout) this.resize(this.config as IScreenSizeData)
     }
 
-    public setBackgroundColor(color: string): void {
-        const view = this.view as HTMLElement
-        view.style.backgroundColor = color
-    }
-
-    public setHittable(hittable: boolean): void {
-        const view = this.view as HTMLElement
-        view.style.pointerEvents = hittable ? 'auto' : 'none'
-    }
+    public set backgroundColor(color: string) { (this.view as HTMLElement).style.backgroundColor = color }
+    public get backgroundColor(): string { return (this.view as HTMLElement).style.backgroundColor }
 
-    protected __createContext(): void {
-        this.context = this.view.getContext('2d') as ICanvasContext2D
-        this.__bindContext()
-    }
+    public set hittable(hittable: boolean) { (this.view as HTMLElement).style.pointerEvents = hittable ? 'auto' : 'none' }
+    public get hittable() { return (this.view as HTMLElement).style.pointerEvents !== 'none' }
 
     protected __createView(): void {
         if (this.offscreen) {
@@ -97,8 +89,8 @@ export class LeaferCanvas extends LeaferCanvasBase {
         }
     }
 
-    public setViewSize(size: IScreenSizeData): void {
-        const { width, height, pixelRatio } = size
+    public updateViewSize(): void {
+        const { width, height, pixelRatio } = this
 
         if (!this.offscreen) {
             const { style } = this.view as HTMLCanvasElement
@@ -108,6 +100,11 @@ export class LeaferCanvas extends LeaferCanvasBase {
 
         this.view.width = width * pixelRatio
         this.view.height = height * pixelRatio
+
+    }
+
+    public updateClientBounds(): void {
+        if (!this.offscreen) this.clientBounds = (this.view as HTMLCanvasElement).getBoundingClientRect()
     }
 
     public startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {
@@ -117,6 +114,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
             try {
 
                 this.resizeObserver = new ResizeObserver((entries) => {
+                    this.updateClientBounds()
                     for (const entry of entries) this.checkAutoBounds(entry.contentRect)
                 })
 
@@ -137,7 +135,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
     protected imitateResizeObserver(): void {
         if (this.autoLayout) {
             if (this.parentView) this.checkAutoBounds(this.parentView.getBoundingClientRect())
-            window.requestAnimationFrame(this.imitateResizeObserver.bind(this))
+            Platform.requestRender(this.imitateResizeObserver.bind(this))
         }
     }
 

package/src/index.ts

@@ -1,4 +1,6 @@
+import { canvasPatch } from '@leafer/canvas'
+
 export { LeaferCanvas } from './LeaferCanvas'
 
-import { patch } from './patch'
-patch()
+canvasPatch(CanvasRenderingContext2D.prototype)
+canvasPatch(Path2D.prototype)

package/src/patch/index.ts

@@ -1,5 +0,0 @@
-import { roundRect } from './roundRect'
-
-export function patch(): void {
-    roundRect()
-}

package/src/patch/roundRect.ts

@@ -1,20 +0,0 @@
-import { IObject, IPathDrawer } from '@leafer/interface'
-import { RectHelper } from '@leafer/path'
-
-
-const { drawRoundRect } = RectHelper
-
-export function roundRect(): void {
-
-    const canvas = CanvasRenderingContext2D.prototype as IPathDrawer
-
-    if (!canvas.roundRect) {
-
-        canvas.roundRect = (Path2D.prototype as IObject).roundRect = function (x: number, y: number, width: number, height: number, cornerRadius: number | number[]): void {
-
-            drawRoundRect(this as IPathDrawer, x, y, width, height, cornerRadius)
-        }
-    }
-
-}
-