@leafer/canvas-web 1.0.0-beta.12 → 1.0.0-beta.16

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@leafer/canvas-web",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.16",
   "description": "@leafer/canvas-web",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
+  "types": "types/index.d.ts",
   "files": [
-    "src"
+    "src",
+    "types",
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -19,14 +22,9 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/canvas": "1.0.0-beta.12",
-    "@leafer/math": "1.0.0-beta.12",
-    "@leafer/data": "1.0.0-beta.12",
-    "@leafer/event": "1.0.0-beta.12",
-    "@leafer/platform": "1.0.0-beta.12",
-    "@leafer/debug": "1.0.0-beta.12"
+    "@leafer/core": "1.0.0-beta.16"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.12"
+    "@leafer/interface": "1.0.0-beta.16"
   }
 }

package/src/LeaferCanvas.ts

@@ -1,17 +1,13 @@
-import { IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener } from '@leafer/interface'
-import { LeaferCanvasBase, canvasSizeAttrs } from '@leafer/canvas'
-import { ResizeEvent } from '@leafer/event'
-import { DataHelper } from '@leafer/data'
-import { Platform } from '@leafer/platform'
-import { Debug } from '@leafer/debug'
+import { IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener, ICursorType } from '@leafer/interface'
+import { LeaferCanvasBase, canvasSizeAttrs, ResizeEvent, DataHelper, Platform, Debug, Cursor } from '@leafer/core'
 
 
 const debug = Debug.get('LeaferCanvas')
 
 export class LeaferCanvas extends LeaferCanvasBase {
 
-    public view: HTMLCanvasElement | OffscreenCanvas
-    public parentView: HTMLElement
+    declare public view: HTMLCanvasElement
+    declare public parentView: HTMLElement
 
     protected resizeObserver: ResizeObserver
     protected autoBounds: IAutoBounds
@@ -21,25 +17,51 @@ export class LeaferCanvas extends LeaferCanvasBase {
         const { view } = this.config
 
         view ? this.__createViewFrom(view) : this.__createView()
-        const { style } = this.view as HTMLCanvasElement
+        const { style } = this.view
         style.display || (style.display = 'block')
-        this.parentView = (this.view as HTMLCanvasElement).parentElement
+        this.parentView = this.view.parentElement
+
+        if (Platform.syncDomFont && !this.parentView) { // fix: firefox default font
+            this.view.style.display = 'none'
+            document.body.appendChild(this.view)
+        }
 
         this.__createContext()
 
         if (!this.autoLayout) this.resize(this.config as IScreenSizeData)
     }
 
-    public set backgroundColor(color: string) { (this.view as HTMLElement).style.backgroundColor = color }
-    public get backgroundColor(): string { return (this.view as HTMLElement).style.backgroundColor }
+    public set backgroundColor(color: string) { this.view.style.backgroundColor = color }
+    public get backgroundColor(): string { return this.view.style.backgroundColor }
 
-    public set hittable(hittable: boolean) { (this.view as HTMLElement).style.pointerEvents = hittable ? 'auto' : 'none' }
-    public get hittable() { return (this.view as HTMLElement).style.pointerEvents !== 'none' }
+    public set hittable(hittable: boolean) { this.view.style.pointerEvents = hittable ? 'auto' : 'none' }
+    public get hittable() { return this.view.style.pointerEvents !== 'none' }
 
     protected __createView(): void {
         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) {
@@ -60,7 +82,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
                 }
 
                 this.__createView()
-                const view = this.view as HTMLCanvasElement
+                const view = this.view
 
                 if (parent.hasChildNodes()) {
                     const { style } = view
@@ -80,7 +102,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
     public updateViewSize(): void {
         const { width, height, pixelRatio } = this
 
-        const { style } = this.view as HTMLCanvasElement
+        const { style } = this.view
         style.width = width + 'px'
         style.height = height + 'px'
 
@@ -90,7 +112,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
     }
 
     public updateClientBounds(): void {
-        this.clientBounds = (this.view as HTMLCanvasElement).getBoundingClientRect()
+        this.clientBounds = this.view.getBoundingClientRect()
     }
 
     public startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {
@@ -109,7 +131,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
                 this.checkAutoBounds(parent.getBoundingClientRect())
             }
 
-        } catch (e) {
+        } catch {
 
             this.imitateResizeObserver()
 
@@ -124,7 +146,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
     }
 
     protected checkAutoBounds(parentSize: ISizeData): void {
-        const view = this.view as HTMLCanvasElement
+        const view = this.view
         const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize)
         if (width !== this.width || height !== this.height) {
             const { style } = view
@@ -150,7 +172,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
 
     public unrealCanvas(): void { // App needs to use
         if (!this.unreal && this.parentView) {
-            const view = this.view as HTMLCanvasElement
+            const view = this.view
             if (view) view.remove()
 
             this.view = this.parentView as HTMLCanvasElement
@@ -162,7 +184,7 @@ export class LeaferCanvas extends LeaferCanvasBase {
         if (this.view) {
             this.stopAutoLayout()
             if (!this.unreal) {
-                const view = this.view as HTMLCanvasElement
+                const view = this.view
                 if (view.parentElement) view.remove()
             }
             super.destroy()

package/src/index.ts

@@ -1,4 +1,4 @@
-import { canvasPatch } from '@leafer/canvas'
+import { canvasPatch } from '@leafer/core'
 
 export { LeaferCanvas } from './LeaferCanvas'
 

package/types/index.d.ts

@@ -0,0 +1,29 @@
+import { IAutoBounds, IResizeEventListener, ICursorType, ISizeData } from '@leafer/interface';
+import { LeaferCanvasBase } from '@leafer/core';
+
+declare class LeaferCanvas extends LeaferCanvasBase {
+    view: HTMLCanvasElement;
+    parentView: HTMLElement;
+    protected resizeObserver: ResizeObserver;
+    protected autoBounds: IAutoBounds;
+    protected resizeListener: IResizeEventListener;
+    init(): void;
+    set backgroundColor(color: string);
+    get backgroundColor(): string;
+    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;
+    updateViewSize(): void;
+    updateClientBounds(): void;
+    startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void;
+    protected imitateResizeObserver(): void;
+    protected checkAutoBounds(parentSize: ISizeData): void;
+    stopAutoLayout(): void;
+    unrealCanvas(): void;
+    destroy(): void;
+}
+
+export { LeaferCanvas };