@leafer/canvas-web 1.0.0-alpha.30 → 1.0.0-alpha.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/canvas-web",
-  "version": "1.0.0-alpha.30",
+  "version": "1.0.0-alpha.31",
   "description": "@leafer/canvas-web",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,11 +19,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/math": "1.0.0-alpha.30",
-    "@leafer/event": "1.0.0-alpha.30",
-    "@leafer/debug": "1.0.0-alpha.30"
+    "@leafer/math": "1.0.0-alpha.31",
+    "@leafer/event": "1.0.0-alpha.31",
+    "@leafer/debug": "1.0.0-alpha.31"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.30"
+    "@leafer/interface": "1.0.0-alpha.31"
   }
 }

package/src/LeaferCanvas.ts

@@ -1,6 +1,7 @@
 import { ICanvasContext2D, IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener } from '@leafer/interface'
 import { ResizeEvent } from '@leafer/event'
-import { LeaferCanvasBase } from '@leafer/canvas'
+import { LeaferCanvasBase, canvasSizeAttrs } from '@leafer/canvas'
+import { DataHelper } from '@leafer/data'
 import { Debug } from '@leafer/debug'
 
 
@@ -12,6 +13,8 @@ export class LeaferCanvas extends LeaferCanvasBase {
     public parentView: HTMLElement
 
     protected resizeObserver: ResizeObserver
+    protected autoBounds: IAutoBounds
+    protected resizeListener: IResizeEventListener
 
     public init(): void {
         const { view } = this.config
@@ -46,7 +49,15 @@ export class LeaferCanvas extends LeaferCanvasBase {
     }
 
     protected __createView(): void {
-        this.view = this.offscreen ? new OffscreenCanvas(1, 1) : document.createElement('canvas')
+        if (this.offscreen) {
+            try {
+                this.view = new OffscreenCanvas(1, 1)
+                return
+            } catch (e) {
+                debug.error(e)
+            }
+        }
+        this.view = document.createElement('canvas')
     }
 
     protected __createViewFrom(inputView: string | object): void {
@@ -101,41 +112,57 @@ export class LeaferCanvas extends LeaferCanvasBase {
 
     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.autoBounds = autoBounds
+            this.resizeListener = listener
+            try {
+
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    for (const entry of entries) this.checkAutoBounds(entry.contentRect)
+                })
+
+                const parent = this.parentView
+                if (parent) {
+                    this.resizeObserver.observe(parent)
+                    this.checkAutoBounds(parent.getBoundingClientRect())
                 }
-            }
 
-            this.resizeObserver = new ResizeObserver((entries) => {
-                for (const entry of entries) {
-                    check(entry.contentRect)
-                }
-            })
+            } catch (e) {
+
+                this.imitateResizeObserver()
 
-            const parent = this.parentView
-            if (parent) {
-                this.resizeObserver.observe(parent)
-                check(parent.getBoundingClientRect())
             }
         }
     }
 
+    protected imitateResizeObserver(): void {
+        if (this.autoLayout) {
+            if (this.parentView) this.checkAutoBounds(this.parentView.getBoundingClientRect())
+            window.requestAnimationFrame(this.imitateResizeObserver.bind(this))
+        }
+    }
+
+    protected checkAutoBounds(parentSize: ISizeData): void {
+        const view = this.view as HTMLCanvasElement
+        const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize)
+        if (width !== this.width || height !== this.height) {
+            const { style } = view
+            const { pixelRatio } = this
+            style.marginLeft = x + 'px'
+            style.marginTop = y + 'px'
+            const size = { width, height, pixelRatio }
+            const oldSize = {} as IScreenSizeData
+            DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs)
+            this.resize(size)
+            if (this.width !== undefined) this.resizeListener(new ResizeEvent(size, oldSize))
+        }
+    }
+
     public stopAutoLayout(): void {
+        this.autoLayout = false
+        this.resizeListener = null
         if (this.resizeObserver) {
             this.resizeObserver.disconnect()
             this.resizeObserver = null
-            this.autoLayout = false
         }
     }