@leafer/canvas-web 1.0.0-rc.27 → 1.0.0-rc.28

package/package.json

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

package/src/LeaferCanvas.ts

@@ -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
@@ -69,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')
                 }
 
@@ -83,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
 

package/types/index.d.ts

@@ -4,6 +4,8 @@ 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;
@@ -14,6 +16,7 @@ declare class LeaferCanvas extends LeaferCanvasBase {
     get hittable(): boolean;
     protected __createView(): void;
     protected __createViewFrom(inputView: string | object): void;
+    protected setAbsolute(view: HTMLCanvasElement): void;
     updateViewSize(): void;
     updateClientBounds(): void;
     startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void;