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

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@leafer/canvas-web",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-rc.10",
   "description": "@leafer/canvas-web",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
+  "types": "types/index.d.ts",
   "files": [
-    "src"
+    "src",
+    "types",
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -19,14 +22,9 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/canvas": "1.0.0-beta.9",
-    "@leafer/math": "1.0.0-beta.9",
-    "@leafer/data": "1.0.0-beta.9",
-    "@leafer/event": "1.0.0-beta.9",
-    "@leafer/platform": "1.0.0-beta.9",
-    "@leafer/debug": "1.0.0-beta.9"
+    "@leafer/core": "1.0.0-rc.10"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.9"
+    "@leafer/interface": "1.0.0-rc.10"
   }
 }

package/src/LeaferCanvas.ts

@@ -1,17 +1,13 @@
 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'
+import { LeaferCanvasBase, canvasSizeAttrs, ResizeEvent, DataHelper, Platform, Debug } from '@leafer/core'
 
 
 const debug = Debug.get('LeaferCanvas')
 
 export class LeaferCanvas extends LeaferCanvasBase {
 
-    public view: HTMLCanvasElement | OffscreenCanvas
-    public parentView: HTMLElement
+    declare public view: HTMLCanvasElement
+    declare public parentView: HTMLElement
 
     protected resizeObserver: ResizeObserver
     protected autoBounds: IAutoBounds
@@ -20,13 +16,15 @@ export class LeaferCanvas extends LeaferCanvasBase {
     public init(): void {
         const { view } = this.config
 
-        if (this.offscreen) {
-            view ? this.view = view as OffscreenCanvas : this.__createView()
-        } else {
-            view ? this.__createViewFrom(view) : this.__createView()
-            const { style } = this.view as HTMLCanvasElement
-            style.display || (style.display = 'block')
-            this.parentView = (this.view as HTMLCanvasElement).parentElement
+        view ? this.__createViewFrom(view) : this.__createView()
+        const { style } = this.view
+        style.display || (style.display = 'block')
+        this.parentView = this.view.parentElement
+        if (this.parentView) this.parentView.style.userSelect = 'none'
+
+        if (Platform.syncDomFont && !this.parentView) { // fix: firefox default font
+            this.view.style.display = 'none'
+            document.body.appendChild(this.view)
         }
 
         this.__createContext()
@@ -34,21 +32,13 @@ export class LeaferCanvas extends LeaferCanvasBase {
         if (!this.autoLayout) this.resize(this.config as IScreenSizeData)
     }
 
-    public set backgroundColor(color: string) { (this.view as HTMLElement).style.backgroundColor = color }
-    public get backgroundColor(): string { return (this.view as HTMLElement).style.backgroundColor }
+    public set backgroundColor(color: string) { this.view.style.backgroundColor = color }
+    public get backgroundColor(): string { return this.view.style.backgroundColor }
 
-    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' }
+    public set hittable(hittable: boolean) { this.view.style.pointerEvents = hittable ? 'auto' : 'none' }
+    public get hittable() { return this.view.style.pointerEvents !== 'none' }
 
     protected __createView(): void {
-        if (this.offscreen) {
-            try {
-                this.view = new OffscreenCanvas(1, 1)
-                return
-            } catch (e) {
-                debug.error(e)
-            }
-        }
         this.view = document.createElement('canvas')
     }
 
@@ -72,7 +62,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
                 }
 
                 this.__createView()
-                const view = this.view as HTMLCanvasElement
+                const view = this.view
 
                 if (parent.hasChildNodes()) {
                     const { style } = view
@@ -92,43 +82,38 @@ export class LeaferCanvas extends LeaferCanvasBase {
     public updateViewSize(): void {
         const { width, height, pixelRatio } = this
 
-        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
+        const { style } = this.view
+        style.width = width + 'px'
+        style.height = height + 'px'
 
+        this.view.width = Math.ceil(width * pixelRatio)
+        this.view.height = Math.ceil(height * pixelRatio)
     }
 
     public updateClientBounds(): void {
-        if (!this.offscreen) this.clientBounds = (this.view as HTMLCanvasElement).getBoundingClientRect()
+        this.clientBounds = this.view.getBoundingClientRect()
     }
 
     public startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {
-        if (!this.offscreen) {
-            this.autoBounds = autoBounds
-            this.resizeListener = listener
-            try {
-
-                this.resizeObserver = new ResizeObserver((entries) => {
-                    this.updateClientBounds()
-                    for (const entry of entries) this.checkAutoBounds(entry.contentRect)
-                })
-
-                const parent = this.parentView
-                if (parent) {
-                    this.resizeObserver.observe(parent)
-                    this.checkAutoBounds(parent.getBoundingClientRect())
-                }
+        this.autoBounds = autoBounds
+        this.resizeListener = listener
+        try {
+
+            this.resizeObserver = new ResizeObserver((entries) => {
+                this.updateClientBounds()
+                for (const entry of entries) this.checkAutoBounds(entry.contentRect)
+            })
+
+            const parent = this.parentView
+            if (parent) {
+                this.resizeObserver.observe(parent)
+                this.checkAutoBounds(parent.getBoundingClientRect())
+            }
 
-            } catch (e) {
+        } catch {
 
-                this.imitateResizeObserver()
+            this.imitateResizeObserver()
 
-            }
         }
     }
 
@@ -140,7 +125,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
     }
 
     protected checkAutoBounds(parentSize: ISizeData): void {
-        const view = this.view as HTMLCanvasElement
+        const view = this.view
         const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize)
         if (width !== this.width || height !== this.height) {
             const { style } = view
@@ -166,7 +151,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
 
     public unrealCanvas(): void { // App needs to use
         if (!this.unreal && this.parentView) {
-            const view = this.view as HTMLCanvasElement
+            const view = this.view
             if (view) view.remove()
 
             this.view = this.parentView as HTMLCanvasElement
@@ -177,8 +162,8 @@ export class LeaferCanvas extends LeaferCanvasBase {
     public destroy(): void {
         if (this.view) {
             this.stopAutoLayout()
-            if (!this.unreal && !this.offscreen) {
-                const view = this.view as HTMLCanvasElement
+            if (!this.unreal) {
+                const view = this.view
                 if (view.parentElement) view.remove()
             }
             super.destroy()

package/src/index.ts

@@ -1,4 +1,4 @@
-import { canvasPatch } from '@leafer/canvas'
+import { canvasPatch } from '@leafer/core'
 
 export { LeaferCanvas } from './LeaferCanvas'
 

package/types/index.d.ts

@@ -0,0 +1,27 @@
+import { IAutoBounds, IResizeEventListener, ISizeData } from '@leafer/interface';
+import { LeaferCanvasBase } from '@leafer/core';
+
+declare class LeaferCanvas extends LeaferCanvasBase {
+    view: HTMLCanvasElement;
+    parentView: HTMLElement;
+    protected resizeObserver: ResizeObserver;
+    protected autoBounds: IAutoBounds;
+    protected resizeListener: IResizeEventListener;
+    init(): void;
+    set backgroundColor(color: string);
+    get backgroundColor(): string;
+    set hittable(hittable: boolean);
+    get hittable(): boolean;
+    protected __createView(): void;
+    protected __createViewFrom(inputView: string | object): void;
+    updateViewSize(): void;
+    updateClientBounds(): void;
+    startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void;
+    protected imitateResizeObserver(): void;
+    protected checkAutoBounds(parentSize: ISizeData): void;
+    stopAutoLayout(): void;
+    unrealCanvas(): void;
+    destroy(): void;
+}
+
+export { LeaferCanvas };