@leafer-ui/app 1.0.0-beta.4 → 1.0.0-beta.5

package/package.json

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

package/src/App.ts

@@ -1,5 +1,5 @@
-import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, IApp, __Value } from '@leafer/interface'
-import { DataHelper, Debug, LayoutEvent, PropertyEvent, RenderEvent, canvasSizeAttrs, registerUI } from '@leafer/core'
+import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, IApp, __Value, IFunction } from '@leafer/interface'
+import { DataHelper, Debug, LayoutEvent, Platform, PropertyEvent, RenderEvent, canvasSizeAttrs, registerUI } from '@leafer/core'
 
 import { Leafer } from './Leafer'
 
@@ -70,6 +70,12 @@ export class App extends Leafer implements IApp {
         }
     }
 
+    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 __onChildRenderEnd(e: RenderEvent): void {
         this.renderer.addBlock(e.renderBounds)
         if (this.viewReady) this.renderer.update()
@@ -90,10 +96,13 @@ export class App extends Leafer implements IApp {
 
     protected __getChildConfig(userConfig?: ILeaferConfig): ILeaferConfig {
         let config = { ...this.config }
+        config.hittable = config.realCanvas = undefined
         if (userConfig) DataHelper.assign(config, userConfig)
-        config.view = this.realCanvas ? undefined : this.view
-        config.fill = config.hittable = config.realCanvas = undefined
+
+        // reset
         if (this.autoLayout) DataHelper.copyAttrs(config, this, canvasSizeAttrs)
+        config.view = this.realCanvas ? undefined : this.view
+        config.fill = undefined
         return config
     }
 

package/src/Leafer.ts

@@ -1,7 +1,7 @@
 import { IApp, ILeafer, ILeaferCanvas, IRenderer, ILayouter, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IImageManager, 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 } from '@leafer/core'
+import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, HitCanvasManager, ImageManager, DataHelper, Creator, Run, Debug, RenderEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, Platform } from '@leafer/core'
 
-import { ILeaferInputData, ILeaferData } from '@leafer-ui/interface'
+import { ILeaferInputData, ILeaferData, IFunction } from '@leafer-ui/interface'
 import { LeaferTypeCreator } from '@leafer-ui/type'
 import { LeaferData } from '@leafer-ui/data'
 import { Group } from '@leafer-ui/display'
@@ -29,6 +29,7 @@ export class Leafer extends Group implements ILeafer {
     public running: boolean
     public ready: boolean
     public viewReady: boolean
+    public get viewLoaded(): boolean { return this.viewReady && !this.watcher.changed && this.imageManager.tasker.isComplete }
 
     public view: unknown
 
@@ -74,7 +75,7 @@ export class Leafer extends Group implements ILeafer {
     constructor(userConfig?: ILeaferConfig, data?: ILeaferInputData) {
         super(data)
         this.userConfig = userConfig
-        if (userConfig?.view) this.init(userConfig)
+        if (userConfig && (userConfig.view || userConfig.width)) this.init(userConfig)
     }
 
     public init(userConfig?: ILeaferConfig, parentApp?: IApp): void {
@@ -147,6 +148,10 @@ export class Leafer extends Group implements ILeafer {
         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()
@@ -187,6 +192,19 @@ 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_('render.after', check)
+    }
+
     protected __checkAutoLayout(config: ILeaferConfig): void {
         if (!config.width || !config.height) {
             this.autoLayout = new AutoBounds(config)
@@ -201,7 +219,7 @@ export class Leafer extends Group implements ILeafer {
             } else if (attrName === 'fill') {
                 this.__changeFill(newValue as string)
             } else if (attrName === 'hittable') {
-                this.canvas.setHittable(newValue as boolean)
+                this.canvas.hittable = newValue as boolean
             }
         }
         super.__setAttr(attrName, newValue)
@@ -222,7 +240,7 @@ export class Leafer extends Group implements ILeafer {
     protected __changeFill(newValue: string): void {
         this.config.fill = newValue as string
         if (this.canvas.allowBackgroundColor) {
-            this.canvas.setBackgroundColor(newValue as string)
+            this.canvas.backgroundColor = newValue as string
         } else {
             this.forceFullRender()
         }