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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/app",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-beta.11",
   "description": "@leafer-ui/app",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,12 +19,13 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-beta",
-    "@leafer-ui/display": "1.0.0-beta",
-    "@leafer-ui/data": "1.0.0-beta"
+    "@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"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta",
-    "@leafer-ui/interface": "1.0.0-beta"
+    "@leafer/interface": "1.0.0-beta.11",
+    "@leafer-ui/interface": "1.0.0-beta.11"
   }
 }

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,17 +96,14 @@ 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
     }
 
-    public destory(): void {
-        this.children.forEach(leafer => { leafer.destory() })
-        this.children.length = 0
-        super.destory()
-    }
-
 }

package/src/Leafer.ts

@@ -1,12 +1,12 @@
-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 { 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 { 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'
 
 import { App } from './App'
-import { LeaferType } from './type/LeaferType'
 
 
 const debug = Debug.get('Leafer')
@@ -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 && ImageManager.isComplete }
 
     public view: unknown
 
@@ -44,7 +45,6 @@ export class Leafer extends Group implements ILeafer {
 
     public canvasManager: ICanvasManager
     public hitCanvasManager?: IHitCanvasManager
-    public imageManager: IImageManager
 
     public zoomLayer: ILeaf = this
     public moveLayer: ILeaf = this
@@ -55,6 +55,7 @@ export class Leafer extends Group implements ILeafer {
         type: 'design',
         start: true,
         hittable: true,
+        smooth: true,
         zoom: {
             min: 0.02,
             max: 256
@@ -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 {
@@ -85,7 +86,7 @@ export class Leafer extends Group implements ILeafer {
 
         let start: boolean
         const { config } = this
-        LeaferType.run(config.type, this)
+        LeaferTypeCreator.run(config.type, this)
 
         // render / layout
         this.canvas = Creator.canvas(config)
@@ -109,7 +110,6 @@ export class Leafer extends Group implements ILeafer {
 
             this.canvasManager = new CanvasManager()
             this.hitCanvasManager = new HitCanvasManager()
-            this.imageManager = new ImageManager(this, config)
 
             start = config.start
         }
@@ -121,6 +121,8 @@ export class Leafer extends Group implements ILeafer {
         this.__listenEvents()
 
         if (start) this.__startTimer = setTimeout(this.start.bind(this))
+
+        PluginManager.onLeafer(this)
     }
 
     public start(): void {
@@ -147,6 +149,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()
@@ -173,7 +179,6 @@ export class Leafer extends Group implements ILeafer {
 
         this.canvasManager = app.canvasManager
         this.hitCanvasManager = app.hitCanvasManager
-        this.imageManager = app.imageManager
     }
 
     public __setLeafer(leafer: ILeafer): void {
@@ -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_(AnimateEvent.FRAME, 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()
         }
@@ -262,30 +280,37 @@ export class Leafer extends Group implements ILeafer {
         this.off_(this.__eventIds)
     }
 
-    public destory(): void {
-        if (this.canvas) {
-            try {
-                this.stop()
-                this.emitEvent(new LeaferEvent(LeaferEvent.END, this))
-                this.__removeListenEvents()
+    public destroy(): void {
+        setTimeout(() => {
+            if (this.canvas) {
+                try {
+                    this.stop()
+                    this.emitEvent(new LeaferEvent(LeaferEvent.END, this))
+                    this.__removeListenEvents()
 
-                this.__controllers.forEach(item => item.destroy())
-                this.__controllers.length = 0
+                    this.__controllers.forEach(item => {
+                        if (!(this.parent && item === this.interaction)) item.destroy()
+                    })
+                    this.__controllers.length = 0
 
-                this.selector.destroy()
-                this.canvasManager.destory()
-                this.hitCanvasManager.destory()
-                this.imageManager.destory()
+                    if (!this.parent) {
+                        this.selector.destroy()
+                        this.canvasManager.destroy()
+                        this.hitCanvasManager.destroy()
+                    }
 
-                this.canvas.destroy()
-                this.canvas = null
+                    this.canvas.destroy()
 
-                this.config = this.userConfig = this.view = null
+                    this.config = this.userConfig = this.canvas = this.view = null
+                    this.selector = this.interaction = this.canvasManager = this.hitCanvasManager = null
 
-                super.destroy()
-            } catch (e) {
-                debug.error(e)
+                    super.destroy()
+
+                    setTimeout(() => { ImageManager.clearRecycled() }, 100)
+                } catch (e) {
+                    debug.error(e)
+                }
             }
-        }
+        }, 0)
     }
 }

package/src/type/LeaferType.ts

@@ -1,37 +0,0 @@
-import { ILeafer, ILeaferTypeList, ILeaferTypeFunction } from '@leafer/interface'
-
-import { Debug } from '@leafer/core'
-
-import { user } from './user'
-import { design } from './design'
-
-
-const debug = Debug.get('LeaferType')
-
-export const LeaferType = {
-
-    list: {} as ILeaferTypeList,
-
-    register(name: string, fn: ILeaferTypeFunction): void {
-        if (list[name]) {
-            debug.error('repeat:', name)
-        } else {
-            list[name] = fn
-        }
-    },
-
-    run(name: string, leafer: ILeafer): void {
-        const fn = LeaferType.list[name]
-        if (fn) {
-            fn(leafer)
-        } else {
-            debug.error('no', name)
-        }
-    }
-
-}
-
-const { list } = LeaferType
-
-LeaferType.register('user', user)
-LeaferType.register('design', design)

package/src/type/design.ts

@@ -1,19 +0,0 @@
-import { ILeafer } from '@leafer/interface'
-
-import { MoveEvent, ZoomEvent, LeafHelper } from '@leafer/core'
-
-
-export function design(leafer: ILeafer): void {
-    const { MOVE } = MoveEvent
-    const { ZOOM } = ZoomEvent
-    leafer.__eventIds.push(
-        leafer.on_(MOVE, (e: MoveEvent) => { LeafHelper.move(leafer.moveLayer, e.moveX, e.moveY) }),
-        leafer.on_(ZOOM, (e: ZoomEvent) => {
-            const { scaleX } = leafer.zoomLayer.__, { min, max } = leafer.config.zoom
-            let { scale } = e
-            if (scale * scaleX < min) scale = min / scaleX
-            else if (scale * scaleX > max) scale = max / scaleX
-            if (scale !== 1) LeafHelper.zoomOf(leafer.zoomLayer, e, scale)
-        })
-    )
-}

package/src/type/user.ts

@@ -1,7 +0,0 @@
-import { ILeafer } from '@leafer/interface'
-
-
-export function user(leafer: ILeafer): void {
-    const { config } = leafer
-    config.move.dragOut = false
-}