@leafer-ui/app 1.0.0-rc.6 → 1.0.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/app",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.8",
   "description": "@leafer-ui/app",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,13 +22,13 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-rc.6",
-    "@leafer-ui/display": "1.0.0-rc.6",
-    "@leafer-ui/type": "1.0.0-rc.6",
-    "@leafer-ui/data": "1.0.0-rc.6"
+    "@leafer/core": "1.0.0-rc.8",
+    "@leafer-ui/display": "1.0.0-rc.8",
+    "@leafer-ui/type": "1.0.0-rc.8",
+    "@leafer-ui/data": "1.0.0-rc.8"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-rc.6",
-    "@leafer-ui/interface": "1.0.0-rc.6"
+    "@leafer/interface": "1.0.0-rc.8",
+    "@leafer-ui/interface": "1.0.0-rc.8"
   }
 }

package/src/App.ts

@@ -1,5 +1,7 @@
-import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, IApp, __Value, ILeafer } from '@leafer/interface'
-import { DataHelper, Debug, LayoutEvent, PropertyEvent, RenderEvent, canvasSizeAttrs, registerUI } from '@leafer/core'
+import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, ILeaferBase } from '@leafer/interface'
+import { Creator, DataHelper, Debug, LayoutEvent, PropertyEvent, RenderEvent, canvasSizeAttrs, registerUI } from '@leafer/core'
+
+import { IApp, IAppConfig, IAppInputData, IEditorBase, ILeafer } from '@leafer-ui/interface'
 
 import { Leafer } from './Leafer'
 
@@ -11,10 +13,28 @@ export class App extends Leafer implements IApp {
 
     public get isApp(): boolean { return true }
 
-    declare public children: Leafer[]
+    declare public children: ILeafer[]
 
     public realCanvas: boolean
 
+    public ground: ILeafer
+    public tree: ILeafer
+    public sky: ILeafer
+
+    constructor(userConfig?: IAppConfig, data?: IAppInputData) {
+        super(userConfig, data)
+        if (userConfig) {
+            const { ground, tree, sky, editor } = userConfig
+            if (ground) this.ground = this.addLeafer(ground)
+            if (tree || editor) this.tree = this.addLeafer(tree)
+            if (sky || editor) this.sky = this.addLeafer(sky || { type: 'draw', usePartRender: false })
+            if (editor) {
+                this.editor = Creator.editor(editor) as IEditorBase
+                this.sky.add(this.editor)
+            }
+        }
+    }
+
     protected __setApp(): void {
         const { canvas } = this
         const { realCanvas, view } = this.config
@@ -33,21 +53,31 @@ export class App extends Leafer implements IApp {
 
     public start(): void {
         super.start()
-        this.children.forEach(leafer => { leafer.start() })
+        this.children.forEach(leafer => leafer.start())
     }
 
     public stop(): void {
-        this.children.forEach(leafer => { leafer.stop() })
+        this.children.forEach(leafer => leafer.stop())
         super.stop()
     }
 
+    public unlockLayout(): void {
+        super.unlockLayout()
+        this.children.forEach(leafer => leafer.unlockLayout())
+    }
+
+    public lockLayout(): void {
+        super.lockLayout()
+        this.children.forEach(leafer => leafer.lockLayout())
+    }
+
     public addLeafer(merge?: ILeaferConfig): Leafer {
         const leafer = new Leafer(merge)
         this.add(leafer)
         return leafer
     }
 
-    public add(leafer: Leafer): void {
+    public add(leafer: ILeafer): void {
         if (!leafer.view) {
             if (this.realCanvas && !this.canvas.bounds) { // wait miniapp select canvas
                 setTimeout(() => this.add(leafer), 10)
@@ -61,7 +91,7 @@ export class App extends Leafer implements IApp {
     }
 
     protected __onPropertyChange(): void {
-        if (Debug.showHitView) this.children.forEach(leafer => { leafer.forceUpdate('surface') })
+        if (Debug.showHitView) this.children.forEach(leafer => leafer.forceUpdate('surface'))
     }
 
     protected __onCreated(): void {
@@ -76,26 +106,22 @@ export class App extends Leafer implements IApp {
         if (this.children.every(child => child.viewReady)) super.__onViewReady()
     }
 
-    protected __checkViewCompleted(): boolean {
-        return this.children.every(item => item.viewCompleted)
-    }
-
     protected __onChildRenderEnd(e: RenderEvent): void {
         this.renderer.addBlock(e.renderBounds)
         if (this.viewReady) this.renderer.update()
     }
 
     public __render(canvas: ILeaferCanvas, _options: IRenderOptions): void {
-        this.children.forEach(leafer => { canvas.copyWorld(leafer.canvas) })
+        this.children.forEach(leafer => canvas.copyWorld(leafer.canvas))
     }
 
     public __onResize(event: IResizeEvent): void {
-        this.children.forEach(leafer => { leafer.resize(event) })
+        this.children.forEach(leafer => leafer.resize(event))
         super.__onResize(event)
     }
 
     protected __checkUpdateLayout(): void {
-        this.children.forEach(leafer => { leafer.__layout.checkUpdate() })
+        this.children.forEach(leafer => leafer.__layout.update())
     }
 
     protected __getChildConfig(userConfig?: ILeaferConfig): ILeaferConfig {
@@ -110,10 +136,10 @@ export class App extends Leafer implements IApp {
         return config
     }
 
-    protected __listenChildEvents(leafer: ILeafer): void {
+    protected __listenChildEvents(leafer: ILeaferBase): void {
         leafer.once(LayoutEvent.END, () => this.__onReady())
         leafer.once(RenderEvent.START, () => this.__onCreated())
-        leafer.once(RenderEvent.END, (e) => this.__onRenderEnd(e))
+        leafer.once(RenderEvent.END, () => this.__onViewReady())
         if (this.realCanvas) this.__eventIds.push(leafer.on_(RenderEvent.END, this.__onChildRenderEnd, this))
     }
 

package/src/Leafer.ts

@@ -1,13 +1,11 @@
-import { IApp, ILeafer, ILeaferCanvas, IRenderer, ILayouter, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IAutoBounds, IScreenSizeData, IResizeEvent, ILeaf, IEventListenerId, ITimer, __Value, IObject, IControl, IPointData } from '@leafer/interface'
-import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, HitCanvasManager, ImageManager, DataHelper, Creator, Run, Debug, RenderEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, PluginManager, WaitHelper, WatchEvent } from '@leafer/core'
+import { ILeaferCanvas, IRenderer, ILayouter, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IAutoBounds, IScreenSizeData, IResizeEvent, ILeaf, IEventListenerId, ITimer, IValue, IObject, IControl, IPointData } from '@leafer/interface'
+import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, HitCanvasManager, ImageManager, DataHelper, Creator, Run, Debug, RenderEvent, AnimateEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, PluginManager, WaitHelper, WatchEvent } from '@leafer/core'
 
-import { ILeaferInputData, ILeaferData, IFunction, IUIInputData } from '@leafer-ui/interface'
+import { ILeaferInputData, ILeaferData, IFunction, IUIInputData, ILeafer, IGroup, IApp, IEditorBase } from '@leafer-ui/interface'
 import { LeaferTypeCreator } from '@leafer-ui/type'
 import { LeaferData } from '@leafer-ui/data'
 import { Group } from '@leafer-ui/display'
 
-import { App } from './App'
-
 
 const debug = Debug.get('Leafer')
 
@@ -25,13 +23,15 @@ export class Leafer extends Group implements ILeafer {
     public get isApp(): boolean { return false }
     public get app(): ILeafer { return this.parent || this }
 
-    declare public parent?: App
+    declare public parent?: IApp
 
     public running: boolean
     public created: boolean
     public ready: boolean
     public viewReady: boolean
     public viewCompleted: boolean
+    public get imageReady(): boolean { return this.viewReady && ImageManager.isComplete }
+    public get layoutLocked() { return !this.layouter.running }
 
     public view: unknown
 
@@ -48,7 +48,10 @@ export class Leafer extends Group implements ILeafer {
     public canvasManager: ICanvasManager
     public hitCanvasManager?: IHitCanvasManager
 
-    public zoomLayer: ILeaf = this
+    // plugin
+    public editor: IEditorBase
+
+    public zoomLayer: IGroup = this
 
     public userConfig: ILeaferConfig
     public config: ILeaferConfig = {
@@ -163,15 +166,21 @@ export class Leafer extends Group implements ILeafer {
         }
     }
 
+    public unlockLayout(): void {
+        this.layouter.start()
+        this.updateLayout()
+    }
+
+    public lockLayout(): void {
+        this.updateLayout()
+        this.layouter.stop()
+    }
+
     public resize(size: IScreenSizeData): void {
         const data = DataHelper.copyAttrs({}, size, canvasSizeAttrs)
         Object.keys(data).forEach(key => (this as any)[key] = data[key])
     }
 
-    public forceLayout(): void {
-        this.__layout.checkUpdate(true)
-    }
-
     public forceFullRender(): void {
         this.renderer.addBlock(this.canvas.bounds)
         if (this.viewReady) this.renderer.update()
@@ -211,7 +220,7 @@ export class Leafer extends Group implements ILeafer {
     }
 
     public setZoomLayer(zoomLayer: ILeaf): void {
-        this.zoomLayer = zoomLayer
+        this.zoomLayer = zoomLayer as IGroup
     }
 
     protected __checkAutoLayout(config: ILeaferConfig): void {
@@ -221,7 +230,7 @@ export class Leafer extends Group implements ILeafer {
         }
     }
 
-    public __setAttr(attrName: string, newValue: __Value): void {
+    public __setAttr(attrName: string, newValue: IValue): void {
         if (this.canvas) {
             if (canvasSizeAttrs.includes(attrName)) {
                 this.__changeCanvasSize(attrName, newValue as number)
@@ -234,7 +243,7 @@ export class Leafer extends Group implements ILeafer {
         super.__setAttr(attrName, newValue)
     }
 
-    public __getAttr(attrName: string): __Value {
+    public __getAttr(attrName: string): IValue {
         if (this.canvas && canvasSizeAttrs.includes(attrName)) return this.canvas[attrName]
         return super.__getAttr(attrName)
     }
@@ -275,23 +284,24 @@ export class Leafer extends Group implements ILeafer {
         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 __onAnimateFrame(): void {
+        if (this.viewReady) {
+            if (this.__nextRenderWait.length) WaitHelper.run(this.__nextRenderWait)
 
-    protected __checkViewCompleted(): boolean {
-        return this.viewReady && !this.watcher.changed && ImageManager.isComplete
+            const { imageReady } = this
+            if (imageReady && !this.viewCompleted) this.__checkViewCompleted()
+            if (!imageReady) this.viewCompleted = false
+        }
     }
 
-    protected __onViewCompleted(): void {
-        if (!this.viewCompleted) {
-            this.emitLeafer(LeaferEvent.VIEW_COMPLETED)
-            WaitHelper.run(this.__viewCompletedWait)
-        }
+    protected __checkViewCompleted(emit: boolean = true): void {
+        this.nextRender(() => {
+            if (this.imageReady) {
+                if (emit) this.emitLeafer(LeaferEvent.VIEW_COMPLETED)
+                WaitHelper.run(this.__viewCompletedWait)
+                this.viewCompleted = true
+            }
+        })
     }
 
     protected __onWatchData(): void {
@@ -309,24 +319,20 @@ export class Leafer extends Group implements ILeafer {
     }
 
     public waitViewCompleted(item: IFunction): void {
+        this.__viewCompletedWait.push(item)
         if (this.viewCompleted) {
-            item()
+            this.__checkViewCompleted(false)
         } 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)
-        }
+        this.__nextRenderWait.push(item)
     }
 
     protected __checkUpdateLayout(): void {
-        this.__layout.checkUpdate()
+        this.__layout.update()
     }
 
     protected emitLeafer(type: string): void {
@@ -338,9 +344,10 @@ export class Leafer extends Group implements ILeafer {
         this.once(LeaferEvent.START, () => Run.end(runId))
         this.once(LayoutEvent.END, () => this.__onReady())
         this.once(RenderEvent.START, () => this.__onCreated())
+        this.once(RenderEvent.END, () => this.__onViewReady())
         this.__eventIds.push(
             this.on_(WatchEvent.DATA, this.__onWatchData, this),
-            this.on_(RenderEvent.END, this.__onRenderEnd, this),
+            this.on_(AnimateEvent.FRAME, this.__onAnimateFrame, this),
             this.on_(LayoutEvent.CHECK_UPDATE, this.__checkUpdateLayout, this)
         )
     }

package/types/index.d.ts

@@ -1,30 +1,7 @@
-import { IApp, ILeaferConfig, ILeaferCanvas, IRenderOptions, IResizeEvent, ILeafer, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaf, IAutoBounds, IPointData, IEventListenerId, ITimer, IControl, IScreenSizeData, __Value } from '@leafer/interface';
-import { RenderEvent } from '@leafer/core';
-import { ILeaferData, IFunction, ILeaferInputData, IUIInputData } from '@leafer-ui/interface';
+import { ILeaferCanvas, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaferConfig, IAutoBounds, IPointData, IEventListenerId, ITimer, IControl, IScreenSizeData, IResizeEvent, ILeaf, IValue, IRenderOptions, ILeaferBase } from '@leafer/interface';
+import { ILeafer, ILeaferData, IApp, IEditorBase, IGroup, IFunction, ILeaferInputData, IUIInputData, IAppConfig, IAppInputData } 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;
-}
+import { RenderEvent } from '@leafer/core';
 
 declare class Leafer extends Group implements ILeafer {
     get __tag(): string;
@@ -32,12 +9,14 @@ declare class Leafer extends Group implements ILeafer {
     pixelRatio: number;
     get isApp(): boolean;
     get app(): ILeafer;
-    parent?: App;
+    parent?: IApp;
     running: boolean;
     created: boolean;
     ready: boolean;
     viewReady: boolean;
     viewCompleted: boolean;
+    get imageReady(): boolean;
+    get layoutLocked(): boolean;
     view: unknown;
     canvas: ILeaferCanvas;
     renderer: IRenderer;
@@ -47,7 +26,8 @@ declare class Leafer extends Group implements ILeafer {
     interaction?: IInteraction;
     canvasManager: ICanvasManager;
     hitCanvasManager?: IHitCanvasManager;
-    zoomLayer: ILeaf;
+    editor: IEditorBase;
+    zoomLayer: IGroup;
     userConfig: ILeaferConfig;
     config: ILeaferConfig;
     autoLayout?: IAutoBounds;
@@ -65,8 +45,9 @@ declare class Leafer extends Group implements ILeafer {
     set(data: IUIInputData): void;
     start(): void;
     stop(): void;
+    unlockLayout(): void;
+    lockLayout(): void;
     resize(size: IScreenSizeData): void;
-    forceLayout(): void;
     forceFullRender(): void;
     updateCursor(): void;
     protected __doResize(size: IScreenSizeData): void;
@@ -76,16 +57,15 @@ declare class Leafer extends Group implements ILeafer {
     __setLeafer(leafer: ILeafer): void;
     setZoomLayer(zoomLayer: ILeaf): void;
     protected __checkAutoLayout(config: ILeaferConfig): void;
-    __setAttr(attrName: string, newValue: __Value): void;
-    __getAttr(attrName: string): __Value;
+    __setAttr(attrName: string, newValue: IValue): void;
+    __getAttr(attrName: string): IValue;
     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 __onAnimateFrame(): void;
+    protected __checkViewCompleted(emit?: boolean): void;
     protected __onWatchData(): void;
     waitReady(item: IFunction): void;
     waitViewReady(item: IFunction): void;
@@ -98,4 +78,32 @@ declare class Leafer extends Group implements ILeafer {
     destroy(): void;
 }
 
+declare class App extends Leafer implements IApp {
+    get __tag(): string;
+    get isApp(): boolean;
+    children: ILeafer[];
+    realCanvas: boolean;
+    ground: ILeafer;
+    tree: ILeafer;
+    sky: ILeafer;
+    constructor(userConfig?: IAppConfig, data?: IAppInputData);
+    protected __setApp(): void;
+    start(): void;
+    stop(): void;
+    unlockLayout(): void;
+    lockLayout(): void;
+    addLeafer(merge?: ILeaferConfig): Leafer;
+    add(leafer: ILeafer): void;
+    protected __onPropertyChange(): void;
+    protected __onCreated(): void;
+    protected __onReady(): void;
+    protected __onViewReady(): void;
+    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: ILeaferBase): void;
+}
+
 export { App, Leafer };