@leafer/canvas-web 1.0.0-rc.9 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/canvas-web",
-  "version": "1.0.0-rc.9",
+  "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-rc.9"
+    "@leafer/core": "1.0.1"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-rc.9"
+    "@leafer/interface": "1.0.1"
   }
 }

package/src/LeaferCanvas.ts

@@ -1,5 +1,5 @@
-import { IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener, ICursorType } from '@leafer/interface'
-import { LeaferCanvasBase, canvasSizeAttrs, ResizeEvent, DataHelper, Platform, Debug, Cursor } from '@leafer/core'
+import { IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener } from '@leafer/interface'
+import { LeaferCanvasBase, canvasSizeAttrs, ResizeEvent, DataHelper, Platform, Debug } from '@leafer/core'
 
 
 const debug = Debug.get('LeaferCanvas')
@@ -9,27 +9,51 @@ export class LeaferCanvas extends LeaferCanvasBase {
     declare public view: HTMLCanvasElement
     declare public parentView: HTMLElement
 
+    public set zIndex(zIndex: number) {
+        const { style } = this.view
+        style.zIndex = zIndex as unknown as string
+        this.setAbsolute(this.view)
+    }
+
+    public set childIndex(index: number) {
+        const { view, parentView } = this
+        if (view && parentView) {
+            const beforeNode = parentView.children[index]
+            if (beforeNode) {
+                this.setAbsolute(beforeNode as HTMLCanvasElement)
+                parentView.insertBefore(view, beforeNode)
+            } else {
+                parentView.appendChild(beforeNode)
+            }
+        }
+    }
+
     protected resizeObserver: ResizeObserver
     protected autoBounds: IAutoBounds
     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
         style.display || (style.display = 'block')
         this.parentView = this.view.parentElement
-        if (this.parentView) this.parentView.style.userSelect = 'none'
+
+        if (this.parentView) {
+            const pStyle = this.parentView.style
+            pStyle.webkitUserSelect = pStyle.userSelect = 'none' // fix safari: use webkitUserSelect
+        }
 
         if (Platform.syncDomFont && !this.parentView) { // fix: firefox default font
-            this.view.style.display = 'none'
+            style.display = 'none'
             document.body.appendChild(this.view)
         }
 
         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 }
@@ -42,27 +66,6 @@ export class LeaferCanvas extends LeaferCanvasBase {
         this.view = document.createElement('canvas')
     }
 
-    public setCursor(cursor: ICursorType | ICursorType[]): void {
-        const list: ICursorType[] = []
-        this.eachCursor(cursor, list)
-        if (typeof list[list.length - 1] === 'object') list.push('default')
-        this.view.style.cursor = list.map(item => (typeof item === 'object') ? `url(${item.url}) ${item.x || 0} ${item.y || 0}` : item).join(',')
-    }
-
-    protected eachCursor(cursor: ICursorType | ICursorType[], list: ICursorType[], level = 0): void {
-        level++
-        if (cursor instanceof Array) {
-            cursor.forEach(item => this.eachCursor(item, list, level))
-        } else {
-            const custom = typeof cursor === 'string' && Cursor.get(cursor)
-            if (custom && level < 2) {
-                this.eachCursor(custom, list, level)
-            } else {
-                list.push(cursor)
-            }
-        }
-    }
-
     protected __createViewFrom(inputView: string | object): void {
         let find: unknown = (typeof inputView === 'string') ? document.getElementById(inputView) : inputView as HTMLElement
         if (find) {
@@ -86,9 +89,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
                 const view = this.view
 
                 if (parent.hasChildNodes()) {
-                    const { style } = view
-                    style.position = 'absolute'
-                    style.top = style.left = '0px'
+                    this.setAbsolute(view)
                     parent.style.position || (parent.style.position = 'relative')
                 }
 
@@ -100,6 +101,12 @@ export class LeaferCanvas extends LeaferCanvasBase {
         }
     }
 
+    protected setAbsolute(view: HTMLCanvasElement): void {
+        const { style } = view
+        style.position = 'absolute'
+        style.top = style.left = '0px'
+    }
+
     public updateViewSize(): void {
         const { width, height, pixelRatio } = this
 
@@ -107,8 +114,8 @@ export class LeaferCanvas extends LeaferCanvasBase {
         style.width = width + 'px'
         style.height = height + 'px'
 
-        this.view.width = width * pixelRatio
-        this.view.height = height * pixelRatio
+        this.view.width = Math.ceil(width * pixelRatio)
+        this.view.height = Math.ceil(height * pixelRatio)
     }
 
     public updateClientBounds(): void {
@@ -116,26 +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())
             }
 
-        } 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 {
@@ -148,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)
         }
     }
 
@@ -170,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,9 +1,11 @@
-import { IAutoBounds, IResizeEventListener, ICursorType, ISizeData } from '@leafer/interface';
+import { IAutoBounds, IResizeEventListener, ISizeData, IScreenSizeData } from '@leafer/interface';
 import { LeaferCanvasBase } from '@leafer/core';
 
 declare class LeaferCanvas extends LeaferCanvasBase {
     view: HTMLCanvasElement;
     parentView: HTMLElement;
+    set zIndex(zIndex: number);
+    set childIndex(index: number);
     protected resizeObserver: ResizeObserver;
     protected autoBounds: IAutoBounds;
     protected resizeListener: IResizeEventListener;
@@ -13,15 +15,15 @@ declare class LeaferCanvas extends LeaferCanvasBase {
     set hittable(hittable: boolean);
     get hittable(): boolean;
     protected __createView(): void;
-    setCursor(cursor: ICursorType | ICursorType[]): void;
-    protected eachCursor(cursor: ICursorType | ICursorType[], list: ICursorType[], level?: number): void;
     protected __createViewFrom(inputView: string | object): void;
+    protected setAbsolute(view: HTMLCanvasElement): void;
     updateViewSize(): void;
     updateClientBounds(): void;
     startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void;
     protected imitateResizeObserver(): void;
     protected checkAutoBounds(parentSize: ISizeData): void;
     stopAutoLayout(): void;
+    protected emitResize(size: IScreenSizeData): void;
     unrealCanvas(): void;
     destroy(): void;
 }