@leafer/canvas-web 1.0.0-beta.11 → 1.0.0-beta.15

package/package.json

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

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 };

package/src/LeaferCanvas.ts

@@ -1,188 +0,0 @@
-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'
-
-
-const debug = Debug.get('LeaferCanvas')
-
-export class LeaferCanvas extends LeaferCanvasBase {
-
-    public view: HTMLCanvasElement | OffscreenCanvas
-    public parentView: HTMLElement
-
-    protected resizeObserver: ResizeObserver
-    protected autoBounds: IAutoBounds
-    protected resizeListener: IResizeEventListener
-
-    public init(): void {
-        const { view } = this.config
-
-        if (this.offscreen) {
-            view ? this.view = view as OffscreenCanvas : this.__createView()
-        } else {
-            view ? this.__createViewFrom(view) : this.__createView()
-            const { style } = this.view as HTMLCanvasElement
-            style.display || (style.display = 'block')
-            this.parentView = (this.view as HTMLCanvasElement).parentElement
-        }
-
-        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 hittable(hittable: boolean) { (this.view as HTMLElement).style.pointerEvents = hittable ? 'auto' : 'none' }
-    public get hittable() { return (this.view as HTMLElement).style.pointerEvents !== 'none' }
-
-    protected __createView(): void {
-        if (this.offscreen) {
-            try {
-                this.view = new OffscreenCanvas(1, 1)
-                return
-            } catch (e) {
-                debug.error(e)
-            }
-        }
-        this.view = document.createElement('canvas')
-    }
-
-    protected __createViewFrom(inputView: string | object): void {
-        let find: unknown = (typeof inputView === 'string') ? document.getElementById(inputView) : inputView as HTMLElement
-        if (find) {
-            if (find instanceof HTMLCanvasElement) {
-
-                this.view = find
-
-            } else {
-
-                let parent = find as HTMLDivElement
-                if (find === window || find === document) {
-                    const div = document.createElement('div')
-                    const { style } = div
-                    style.position = 'absolute'
-                    style.top = style.bottom = style.left = style.right = '0px'
-                    document.body.appendChild(div)
-                    parent = div
-                }
-
-                this.__createView()
-                const view = this.view as HTMLCanvasElement
-
-                if (parent.hasChildNodes()) {
-                    const { style } = view
-                    style.position = 'absolute'
-                    style.top = style.left = '0px'
-                    parent.style.position || (parent.style.position = 'relative')
-                }
-
-                parent.appendChild(view)
-            }
-        } else {
-            debug.error(`no id: ${inputView}`)
-            this.__createView()
-        }
-    }
-
-    public updateViewSize(): void {
-        const { width, height, pixelRatio } = this
-
-        if (!this.offscreen) {
-            const { style } = this.view as HTMLCanvasElement
-            style.width = width + 'px'
-            style.height = height + 'px'
-        }
-
-        this.view.width = width * pixelRatio
-        this.view.height = height * pixelRatio
-
-    }
-
-    public updateClientBounds(): void {
-        if (!this.offscreen) this.clientBounds = (this.view as HTMLCanvasElement).getBoundingClientRect()
-    }
-
-    public startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {
-        if (!this.offscreen) {
-            this.autoBounds = autoBounds
-            this.resizeListener = listener
-            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())
-                }
-
-            } catch (e) {
-
-                this.imitateResizeObserver()
-
-            }
-        }
-    }
-
-    protected imitateResizeObserver(): void {
-        if (this.autoLayout) {
-            if (this.parentView) this.checkAutoBounds(this.parentView.getBoundingClientRect())
-            Platform.requestRender(this.imitateResizeObserver.bind(this))
-        }
-    }
-
-    protected checkAutoBounds(parentSize: ISizeData): void {
-        const view = this.view as HTMLCanvasElement
-        const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize)
-        if (width !== this.width || height !== this.height) {
-            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))
-        }
-    }
-
-    public stopAutoLayout(): void {
-        this.autoLayout = false
-        this.resizeListener = null
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect()
-            this.resizeObserver = null
-        }
-    }
-
-    public unrealCanvas(): void { // App needs to use
-        if (!this.unreal && this.parentView) {
-            const view = this.view as HTMLCanvasElement
-            if (view) view.remove()
-
-            this.view = this.parentView as HTMLCanvasElement
-            this.unreal = true
-        }
-    }
-
-    public destroy(): void {
-        if (this.view) {
-            this.stopAutoLayout()
-            if (!this.unreal && !this.offscreen) {
-                const view = this.view as HTMLCanvasElement
-                if (view.parentElement) view.remove()
-            }
-            super.destroy()
-        }
-    }
-
-}