@leafer/canvas-web 1.0.0-rc.3 → 1.0.0-rc.30

package/package.json

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

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,6 +9,25 @@ 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
@@ -21,8 +40,13 @@ export class LeaferCanvas extends LeaferCanvasBase {
         style.display || (style.display = 'block')
         this.parentView = this.view.parentElement
 
+        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)
         }
 
@@ -41,27 +65,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) {
@@ -85,9 +88,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')
                 }
 
@@ -99,6 +100,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
 
@@ -106,9 +113,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 {
@@ -129,6 +135,9 @@ export class LeaferCanvas extends LeaferCanvasBase {
             if (parent) {
                 this.resizeObserver.observe(parent)
                 this.checkAutoBounds(parent.getBoundingClientRect())
+            } else {
+                this.checkAutoBounds(this.view)
+                debug.warn('no parent')
             }
 
         } catch {

package/types/index.d.ts

@@ -1,9 +1,11 @@
-import { IAutoBounds, IResizeEventListener, ICursorType, ISizeData } from '@leafer/interface';
+import { IAutoBounds, IResizeEventListener, ISizeData } 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,9 +15,8 @@ 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;