@leafer/canvas-web 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/canvas-web",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "@leafer/canvas-web",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,9 +22,9 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0"
+    "@leafer/core": "1.0.1"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0"
+    "@leafer/interface": "1.0.1"
   }
 }

package/src/LeaferCanvas.ts

@@ -33,7 +33,8 @@ export class LeaferCanvas extends LeaferCanvasBase {
     protected resizeListener: IResizeEventListener
 
     public init(): void {
-        const { view } = this.config
+        const { config } = this
+        const view = config.view || config.canvas
 
         view ? this.__createViewFrom(view) : this.__createView()
         const { style } = this.view
@@ -52,7 +53,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
 
         this.__createContext()
 
-        if (!this.autoLayout) this.resize(this.config as IScreenSizeData)
+        if (!this.autoLayout) this.resize(config as IScreenSizeData)
     }
 
     public set backgroundColor(color: string) { this.view.style.backgroundColor = color }
@@ -122,29 +123,47 @@ export class LeaferCanvas extends LeaferCanvasBase {
     }
 
     public startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {
-        this.autoBounds = autoBounds
         this.resizeListener = listener
-        try {
 
-            this.resizeObserver = new ResizeObserver((entries) => {
-                this.updateClientBounds()
-                for (const entry of entries) this.checkAutoBounds(entry.contentRect)
-            })
+        if (autoBounds) {
+
+            // check auto layout
+            this.autoBounds = autoBounds
+            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())
+                } else {
+                    this.checkAutoBounds(this.view)
+                    debug.warn('no parent')
+                }
+
+            } catch {
+
+                this.imitateResizeObserver()
 
-            const parent = this.parentView
-            if (parent) {
-                this.resizeObserver.observe(parent)
-                this.checkAutoBounds(parent.getBoundingClientRect())
-            } else {
-                this.checkAutoBounds(this.view)
-                debug.warn('no parent')
             }
 
-        } catch {
+        } else {
 
-            this.imitateResizeObserver()
+            // check devicePixelRatio change
+            window.addEventListener('resize', () => {
+                const pixelRatio = Platform.devicePixelRatio
+                if (this.pixelRatio !== pixelRatio) {
+                    const { width, height } = this
+                    this.emitResize({ width, height, pixelRatio })
+                }
+            })
 
         }
+
     }
 
     protected imitateResizeObserver(): void {
@@ -157,16 +176,12 @@ export class LeaferCanvas extends LeaferCanvasBase {
     protected checkAutoBounds(parentSize: ISizeData): void {
         const view = this.view
         const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize)
-        if (width !== this.width || height !== this.height) {
+        const size = { width, height, pixelRatio: Platform.devicePixelRatio } as IScreenSizeData
+        if (!this.isSameSize(size)) {
             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))
+            this.emitResize(size)
         }
     }
 
@@ -179,6 +194,14 @@ export class LeaferCanvas extends LeaferCanvasBase {
         }
     }
 
+    protected emitResize(size: IScreenSizeData): void {
+        const oldSize = {} as IScreenSizeData
+        DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs)
+        this.resize(size)
+        if (this.width !== undefined) this.resizeListener(new ResizeEvent(size, oldSize))
+    }
+
+
     public unrealCanvas(): void { // App needs to use
         if (!this.unreal && this.parentView) {
             const view = this.view

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import { IAutoBounds, IResizeEventListener, ISizeData } from '@leafer/interface';
+import { IAutoBounds, IResizeEventListener, ISizeData, IScreenSizeData } from '@leafer/interface';
 import { LeaferCanvasBase } from '@leafer/core';
 
 declare class LeaferCanvas extends LeaferCanvasBase {
@@ -23,6 +23,7 @@ declare class LeaferCanvas extends LeaferCanvasBase {
     protected imitateResizeObserver(): void;
     protected checkAutoBounds(parentSize: ISizeData): void;
     stopAutoLayout(): void;
+    protected emitResize(size: IScreenSizeData): void;
     unrealCanvas(): void;
     destroy(): void;
 }