@leafer-ui/app 1.0.0-beta.11 → 1.0.0-beta.15

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@leafer-ui/app",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.15",
   "description": "@leafer-ui/app",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
+  "types": "types/index.d.ts",
   "files": [
-    "src"
+    "src",
+    "types",
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -19,13 +22,13 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-beta.11",
-    "@leafer-ui/display": "1.0.0-beta.11",
-    "@leafer-ui/type": "1.0.0-beta.11",
-    "@leafer-ui/data": "1.0.0-beta.11"
+    "@leafer/core": "1.0.0-beta.15",
+    "@leafer-ui/display": "1.0.0-beta.15",
+    "@leafer-ui/type": "1.0.0-beta.15",
+    "@leafer-ui/data": "1.0.0-beta.15"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.11",
-    "@leafer-ui/interface": "1.0.0-beta.11"
+    "@leafer/interface": "1.0.0-beta.15",
+    "@leafer-ui/interface": "1.0.0-beta.15"
   }
 }

package/src/App.ts

@@ -1,5 +1,5 @@
-import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, IApp, __Value, IFunction } from '@leafer/interface'
-import { DataHelper, Debug, LayoutEvent, Platform, PropertyEvent, RenderEvent, canvasSizeAttrs, registerUI } from '@leafer/core'
+import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, IApp, __Value, ILeafer } from '@leafer/interface'
+import { DataHelper, Debug, LayoutEvent, PropertyEvent, RenderEvent, canvasSizeAttrs, registerUI } from '@leafer/core'
 
 import { Leafer } from './Leafer'
 
@@ -11,7 +11,7 @@ export class App extends Leafer implements IApp {
 
     public get isApp(): boolean { return true }
 
-    public children: Leafer[] = []
+    declare public children: Leafer[]
 
     public realCanvas: boolean
 
@@ -28,11 +28,7 @@ export class App extends Leafer implements IApp {
         this.watcher.disable()
         this.layouter.disable()
 
-        this.__eventIds.push(
-            this.on_(PropertyEvent.CHANGE, () => {
-                if (Debug.showHitView) this.children.forEach(leafer => { leafer.forceUpdate('blendMode') })
-            })
-        )
+        this.__eventIds.push(this.on_(PropertyEvent.CHANGE, this.__onPropertyChange, this))
     }
 
     public start(): void {
@@ -52,28 +48,36 @@ export class App extends Leafer implements IApp {
     }
 
     public add(leafer: Leafer): void {
-        if (!leafer.view) leafer.init(this.__getChildConfig(leafer.userConfig), this)
+        if (!leafer.view) {
+            if (this.realCanvas && !this.canvas.bounds) { // wait miniapp select canvas
+                setTimeout(() => this.add(leafer), 10)
+                return
+            }
+            leafer.init(this.__getChildConfig(leafer.userConfig), this)
+        }
+
         super.add(leafer)
+        this.__listenChildEvents(leafer)
+    }
+
+    protected __onPropertyChange(): void {
+        if (Debug.showHitView) this.children.forEach(leafer => { leafer.forceUpdate('surface') })
+    }
 
-        leafer.once(LayoutEvent.END, () => {
-            if (!this.ready && this.children.every(child => child.ready)) this.__onReady()
-        })
+    protected __onCreated(): void {
+        this.created = this.children.every(child => child.created)
+    }
 
-        leafer.once(RenderEvent.END, () => {
-            if (!this.viewReady && this.children.every(child => child.viewReady)) this.__onViewReady()
-        })
+    protected __onReady(): void {
+        if (this.children.every(child => child.ready)) super.__onReady()
+    }
 
-        if (this.realCanvas) {
-            this.__eventIds.push(
-                leafer.on_(RenderEvent.END, this.__onChildRenderEnd, this),
-            )
-        }
+    protected __onViewReady(): void {
+        if (this.children.every(child => child.viewReady)) super.__onViewReady()
     }
 
-    public waitViewLoaded(fun: IFunction): void {
-        const wait = () => { if (this.children.every(item => item.viewLoaded)) Platform.requestRender(fun) }
-        this.children.forEach(leafer => { leafer.waitViewLoaded(wait) })
-        if (!this.running) this.start()
+    protected __checkViewCompleted(): boolean {
+        return this.children.every(item => item.viewCompleted)
     }
 
     protected __onChildRenderEnd(e: RenderEvent): void {
@@ -106,4 +110,11 @@ export class App extends Leafer implements IApp {
         return config
     }
 
+    protected __listenChildEvents(leafer: ILeafer): void {
+        leafer.once(LayoutEvent.END, () => this.__onReady())
+        leafer.once(RenderEvent.START, () => this.__onCreated())
+        leafer.once(RenderEvent.END, (e) => this.__onRenderEnd(e))
+        if (this.realCanvas) this.__eventIds.push(leafer.on_(RenderEvent.END, this.__onChildRenderEnd, this))
+    }
+
 }

package/src/Leafer.ts

@@ -1,7 +1,7 @@
 import { IApp, ILeafer, ILeaferCanvas, IRenderer, ILayouter, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IAutoBounds, IScreenSizeData, IResizeEvent, ILeaf, IEventListenerId, ITransformEventData, ITimer, __Value, IObject, IControl } from '@leafer/interface'
-import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, HitCanvasManager, ImageManager, DataHelper, Creator, Run, Debug, RenderEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, Platform, PluginManager, AnimateEvent } from '@leafer/core'
+import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, HitCanvasManager, ImageManager, DataHelper, Creator, Run, Debug, RenderEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, PluginManager, WaitHelper, WatchEvent } from '@leafer/core'
 
-import { ILeaferInputData, ILeaferData, IFunction } from '@leafer-ui/interface'
+import { ILeaferInputData, ILeaferData, IFunction, IUIInputData } from '@leafer-ui/interface'
 import { LeaferTypeCreator } from '@leafer-ui/type'
 import { LeaferData } from '@leafer-ui/data'
 import { Group } from '@leafer-ui/display'
@@ -17,19 +17,21 @@ export class Leafer extends Group implements ILeafer {
     public get __tag() { return 'Leafer' }
 
     @dataProcessor(LeaferData)
-    public __: ILeaferData
+    declare public __: ILeaferData
 
     @boundsType()
     public pixelRatio: number
 
     public get isApp(): boolean { return false }
+    public get app(): ILeafer { return this.parent || this }
 
-    public parent?: App
+    declare public parent?: App
 
     public running: boolean
+    public created: boolean
     public ready: boolean
     public viewReady: boolean
-    public get viewLoaded(): boolean { return this.viewReady && !this.watcher.changed && ImageManager.isComplete }
+    public viewCompleted: boolean
 
     public view: unknown
 
@@ -61,6 +63,7 @@ export class Leafer extends Group implements ILeafer {
             max: 256
         },
         move: {
+            holdSpaceKey: true,
             dragOut: true,
             autoDistance: 2
         }
@@ -72,6 +75,11 @@ export class Leafer extends Group implements ILeafer {
     protected __startTimer: ITimer
     protected __controllers: IControl[] = []
 
+    protected __readyWait: IFunction[] = []
+    protected __viewReadyWait: IFunction[] = []
+    protected __viewCompletedWait: IFunction[] = []
+    public __nextRenderWait: IFunction[] = []
+
     constructor(userConfig?: ILeaferConfig, data?: ILeaferInputData) {
         super(data)
         this.userConfig = userConfig
@@ -125,6 +133,16 @@ export class Leafer extends Group implements ILeafer {
         PluginManager.onLeafer(this)
     }
 
+    public set(data: IUIInputData): void {
+        if (!this.children) {
+            setTimeout(() => {
+                super.set(data)
+            })
+        } else {
+            super.set(data)
+        }
+    }
+
     public start(): void {
         clearTimeout(this.__startTimer)
         if (!this.running && this.canvas) {
@@ -158,6 +176,10 @@ export class Leafer extends Group implements ILeafer {
         if (this.viewReady) this.renderer.update()
     }
 
+    public updateCursor(): void {
+        if (this.interaction) this.interaction.updateCursor()
+    }
+
     protected __doResize(size: IScreenSizeData): void {
         if (!this.canvas || this.canvas.isSameSize(size)) return
         const old = DataHelper.copyAttrs({}, this.canvas, canvasSizeAttrs) as IScreenSizeData
@@ -192,19 +214,6 @@ export class Leafer extends Group implements ILeafer {
         this.moveLayer = moveLayer || zoomLayer
     }
 
-    public waitViewLoaded(fun: IFunction): void {
-        let id: IEventListenerId
-        const check = () => {
-            if (this.viewLoaded) {
-                if (id) this.off_(id)
-                Platform.requestRender(fun)
-            }
-        }
-        if (!this.running) this.start()
-        check()
-        if (!this.viewLoaded) id = this.on_(AnimateEvent.FRAME, check)
-    }
-
     protected __checkAutoLayout(config: ILeaferConfig): void {
         if (!config.width || !config.height) {
             this.autoLayout = new AutoBounds(config)
@@ -246,18 +255,74 @@ export class Leafer extends Group implements ILeafer {
         }
     }
 
+    protected __onCreated(): void {
+        this.created = true
+    }
+
     protected __onReady(): void {
         if (this.ready) return
         this.ready = true
         this.emitLeafer(LeaferEvent.BEFORE_READY)
         this.emitLeafer(LeaferEvent.READY)
         this.emitLeafer(LeaferEvent.AFTER_READY)
+        WaitHelper.run(this.__readyWait)
     }
 
     protected __onViewReady(): void {
         if (this.viewReady) return
         this.viewReady = true
         this.emitLeafer(LeaferEvent.VIEW_READY)
+        WaitHelper.run(this.__viewReadyWait)
+    }
+
+    protected __onRenderEnd(_e: RenderEvent): void {
+        if (!this.viewReady) this.__onViewReady()
+        const completed = this.__checkViewCompleted()
+        if (completed) this.__onViewCompleted()
+        this.viewCompleted = completed
+        WaitHelper.run(this.__nextRenderWait)
+    }
+
+    protected __checkViewCompleted(): boolean {
+        return this.viewReady && !this.watcher.changed && ImageManager.isComplete
+    }
+
+    protected __onViewCompleted(): void {
+        if (!this.viewCompleted) {
+            this.emitLeafer(LeaferEvent.VIEW_COMPLETED)
+            WaitHelper.run(this.__viewCompletedWait)
+        }
+    }
+
+    protected __onWatchData(): void {
+        if (this.watcher.childrenChanged && this.interaction) {
+            this.nextRender(() => this.interaction.updateCursor())
+        }
+    }
+
+    public waitReady(item: IFunction): void {
+        this.ready ? item() : this.__readyWait.push(item)
+    }
+
+    public waitViewReady(item: IFunction): void {
+        this.viewReady ? item() : this.__viewReadyWait.push(item)
+    }
+
+    public waitViewCompleted(item: IFunction): void {
+        if (this.viewCompleted) {
+            item()
+        } else {
+            this.__viewCompletedWait.push(item)
+            if (!this.running) this.start()
+        }
+    }
+
+    public nextRender(item: IFunction): void {
+        if (this.watcher && !this.watcher.changed) {
+            item()
+        } else {
+            this.__nextRenderWait.push(item)
+        }
     }
 
     protected __checkUpdateLayout(): void {
@@ -272,17 +337,22 @@ export class Leafer extends Group implements ILeafer {
         const runId = Run.start('FirstCreate ' + this.innerName)
         this.once(LeaferEvent.START, () => Run.end(runId))
         this.once(LayoutEvent.END, () => this.__onReady())
-        this.once(RenderEvent.END, () => this.__onViewReady())
-        this.on(LayoutEvent.CHECK_UPDATE, () => this.__checkUpdateLayout())
+        this.once(RenderEvent.START, () => this.__onCreated())
+        this.__eventIds.push(
+            this.on_(WatchEvent.DATA, this.__onWatchData, this),
+            this.on_(RenderEvent.END, this.__onRenderEnd, this),
+            this.on_(LayoutEvent.CHECK_UPDATE, this.__checkUpdateLayout, this)
+        )
     }
 
     protected __removeListenEvents(): void {
         this.off_(this.__eventIds)
+        this.__eventIds.length = 0
     }
 
     public destroy(): void {
         setTimeout(() => {
-            if (this.canvas) {
+            if (!this.destroyed) {
                 try {
                     this.stop()
                     this.emitEvent(new LeaferEvent(LeaferEvent.END, this))
@@ -301,8 +371,8 @@ export class Leafer extends Group implements ILeafer {
 
                     this.canvas.destroy()
 
-                    this.config = this.userConfig = this.canvas = this.view = null
-                    this.selector = this.interaction = this.canvasManager = this.hitCanvasManager = null
+                    this.config.view = this.view = null
+                    if (this.userConfig) this.userConfig.view = null
 
                     super.destroy()
 
@@ -311,6 +381,7 @@ export class Leafer extends Group implements ILeafer {
                     debug.error(e)
                 }
             }
-        }, 0)
+        })
+
     }
 }

package/types/index.d.ts

@@ -0,0 +1,101 @@
+import { IApp, ILeaferConfig, ILeaferCanvas, IRenderOptions, IResizeEvent, ILeafer, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaf, ITransformEventData, IAutoBounds, IEventListenerId, ITimer, IControl, IScreenSizeData, __Value } from '@leafer/interface';
+import { RenderEvent } from '@leafer/core';
+import { ILeaferData, IFunction, ILeaferInputData, IUIInputData } from '@leafer-ui/interface';
+import { Group } from '@leafer-ui/display';
+
+declare class App extends Leafer implements IApp {
+    get __tag(): string;
+    get isApp(): boolean;
+    children: Leafer[];
+    realCanvas: boolean;
+    protected __setApp(): void;
+    start(): void;
+    stop(): void;
+    addLeafer(merge?: ILeaferConfig): Leafer;
+    add(leafer: Leafer): void;
+    protected __onPropertyChange(): void;
+    protected __onCreated(): void;
+    protected __onReady(): void;
+    protected __onViewReady(): void;
+    protected __checkViewCompleted(): boolean;
+    protected __onChildRenderEnd(e: RenderEvent): void;
+    __render(canvas: ILeaferCanvas, _options: IRenderOptions): void;
+    __onResize(event: IResizeEvent): void;
+    protected __checkUpdateLayout(): void;
+    protected __getChildConfig(userConfig?: ILeaferConfig): ILeaferConfig;
+    protected __listenChildEvents(leafer: ILeafer): void;
+}
+
+declare class Leafer extends Group implements ILeafer {
+    get __tag(): string;
+    __: ILeaferData;
+    pixelRatio: number;
+    get isApp(): boolean;
+    get app(): ILeafer;
+    parent?: App;
+    running: boolean;
+    created: boolean;
+    ready: boolean;
+    viewReady: boolean;
+    viewCompleted: boolean;
+    view: unknown;
+    canvas: ILeaferCanvas;
+    renderer: IRenderer;
+    watcher: IWatcher;
+    layouter: ILayouter;
+    selector?: ISelector;
+    interaction?: IInteraction;
+    canvasManager: ICanvasManager;
+    hitCanvasManager?: IHitCanvasManager;
+    zoomLayer: ILeaf;
+    moveLayer: ILeaf;
+    transformData?: ITransformEventData;
+    userConfig: ILeaferConfig;
+    config: ILeaferConfig;
+    autoLayout?: IAutoBounds;
+    __eventIds: IEventListenerId[];
+    protected __startTimer: ITimer;
+    protected __controllers: IControl[];
+    protected __readyWait: IFunction[];
+    protected __viewReadyWait: IFunction[];
+    protected __viewCompletedWait: IFunction[];
+    __renderWait: IFunction[];
+    constructor(userConfig?: ILeaferConfig, data?: ILeaferInputData);
+    init(userConfig?: ILeaferConfig, parentApp?: IApp): void;
+    set(data: IUIInputData): void;
+    start(): void;
+    stop(): void;
+    resize(size: IScreenSizeData): void;
+    forceLayout(): void;
+    forceFullRender(): void;
+    updateCursor(): void;
+    protected __doResize(size: IScreenSizeData): void;
+    protected __onResize(event: IResizeEvent): void;
+    protected __setApp(): void;
+    protected __bindApp(app: IApp): void;
+    __setLeafer(leafer: ILeafer): void;
+    setZoomLayer(zoomLayer: ILeaf, moveLayer?: ILeaf): void;
+    protected __checkAutoLayout(config: ILeaferConfig): void;
+    __setAttr(attrName: string, newValue: __Value): void;
+    __getAttr(attrName: string): __Value;
+    protected __changeCanvasSize(attrName: string, newValue: number): void;
+    protected __changeFill(newValue: string): void;
+    protected __onCreated(): void;
+    protected __onReady(): void;
+    protected __onViewReady(): void;
+    protected __onRenderEnd(_e: RenderEvent): void;
+    protected __checkViewCompleted(): boolean;
+    protected __onViewCompleted(): void;
+    protected __onWatchData(): void;
+    waitReady(item: IFunction): void;
+    waitViewReady(item: IFunction): void;
+    waitViewCompleted(item: IFunction): void;
+    waitRender(item: IFunction): void;
+    protected __checkUpdateLayout(): void;
+    protected emitLeafer(type: string): void;
+    protected __listenEvents(): void;
+    protected __removeListenEvents(): void;
+    destroy(): void;
+}
+
+export { App, Leafer };