@leafer-ui/app 1.0.0-alpha.21 → 1.0.0-alpha.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/app",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "description": "@leafer-ui/app",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,11 +19,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-alpha.21",
-    "@leafer-ui/display": "1.0.0-alpha.21"
+    "@leafer/core": "1.0.0-alpha.23",
+    "@leafer-ui/display": "1.0.0-alpha.23"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.21",
-    "@leafer-ui/interface": "1.0.0-alpha.21"
+    "@leafer/interface": "1.0.0-alpha.23",
+    "@leafer-ui/interface": "1.0.0-alpha.23"
   }
 }

package/src/App.ts

@@ -1,5 +1,5 @@
-import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, IApp } from '@leafer/interface'
-import { DataHelper, LayoutEvent, RenderEvent } from '@leafer/core'
+import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, IApp, __Value } from '@leafer/interface'
+import { DataHelper, LayoutEvent, RenderEvent, defineLeafAttr } from '@leafer/core'
 
 import { Leafer } from './Leafer'
 
@@ -8,39 +8,60 @@ export class App extends Leafer implements IApp {
 
     public get isApp(): boolean { return true }
 
+    public view: unknown
+
+    public virtualCanvas: boolean
+
     public children: Leafer[] = []
 
-    constructor(userConfig?: ILeaferConfig) {
-        super(userConfig)
+    @hitType(true)
+    public hittable: boolean
+
+    protected __setApp(): void {
+        if (this.config.view === this.canvas.view) {
+            this.virtualCanvas = true
+        } else {
+            this.canvas.unloadView()
+            this.view = this.canvas.parentView
+        }
     }
 
     public start(): void {
-        this.children.forEach(leafer => { leafer.start() })
-        this.renderer.start()
-        this.running = true
+        if (!this.running) {
+            this.children.forEach(leafer => { leafer.start() })
+            this.renderer.start()
+            this.running = true
+        }
     }
 
     public stop(): void {
-        this.children.forEach(leafer => { leafer.stop() })
-        this.renderer.stop()
-        this.running = false
+        if (this.running) {
+            this.children.forEach(leafer => { leafer.stop() })
+            this.renderer.stop()
+            this.running = false
+        }
     }
 
     public addLeafer(merge?: ILeaferConfig): Leafer {
-        const leafer = new Leafer(this.__getChildConfig(merge), this)
+        const leafer = new Leafer(merge)
         this.add(leafer)
-
-        const { renderer } = this
-
-        this.__eventIds.push(
-            leafer.on__(LayoutEvent.END, this.__onChildLayoutEnd, this),
-            leafer.on__(RenderEvent.END, renderer.update, renderer),
-            this.on__(LayoutEvent.REQUEST, renderer.mergeBlocks, renderer),
-        )
-
         return leafer
     }
 
+    public add(leafer: Leafer): void {
+        if (!leafer.view) leafer.init(this.__getChildConfig(leafer.userConfig), this)
+        super.add(leafer)
+
+        if (this.virtualCanvas) {
+            const { renderer } = this
+            this.__eventIds.push(
+                leafer.on__(LayoutEvent.END, this.__onChildLayoutEnd, this),
+                leafer.on__(RenderEvent.END, renderer.update, renderer),
+                this.on__(LayoutEvent.REQUEST, renderer.mergeBlocks, renderer)
+            )
+        }
+    }
+
     protected __onChildLayoutEnd(event: LayoutEvent): void {
         const { renderer } = this
         if ((event.current as Leafer).config.usePartRender) {
@@ -62,7 +83,8 @@ export class App extends Leafer implements IApp {
     protected __getChildConfig(userConfig?: ILeaferConfig): ILeaferConfig {
         let old = { ...this.config }
         userConfig = userConfig ? DataHelper.default(userConfig, old) : old
-        userConfig.view = null
+        userConfig.view = this.virtualCanvas ? null : this.canvas.parentView
+        userConfig.virtualCanvas = null
         if (this.autoLayout) {
             userConfig.width = this.width
             userConfig.height = this.height
@@ -71,14 +93,17 @@ export class App extends Leafer implements IApp {
         return userConfig
     }
 
-    public destory(): void {
-        super.destory()
-
-        const { children } = this
-        if (children.length) {
-            children.forEach(leafer => leafer.destory())
-            children.length = 0
-        }
+}
+
+export function hitType(defaultValue?: __Value) {
+    return (target: IApp, key: string) => {
+        defineLeafAttr(target, key, defaultValue, {
+            set(value: __Value) {
+                this.__setAttr(key, value)
+                this.children.forEach(item => {
+                    item.hittable = value as boolean
+                })
+            }
+        })
     }
-
 }

package/src/Leafer.ts

@@ -1,5 +1,5 @@
-import { IApp, ILeafer, ILeaferCanvas, IRenderer, ILayouter, ICreator, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IImageManager, IAutoBounds, IScreenSizeData, IResizeEvent, IObject, ILeaf, IEventListenerId, ITransformEventData } from '@leafer/interface'
-import { AutoBounds, LayoutEvent, ResizeEvent, MoveEvent, ZoomEvent, CanvasManager, HitCanvasManager, ImageManager, DataHelper, LeafHelper, Creator, Run } from '@leafer/core'
+import { IApp, ILeafer, ILeaferCanvas, IRenderer, ILayouter, ICreator, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IImageManager, IAutoBounds, IScreenSizeData, IResizeEvent, IObject, ILeaf, IEventListenerId, ITransformEventData, ILeaferType, IBounds } from '@leafer/interface'
+import { AutoBounds, LayoutEvent, ResizeEvent, MoveEvent, ZoomEvent, LeaferEvent, CanvasManager, HitCanvasManager, ImageManager, DataHelper, LeafHelper, Creator, Run, RenderEvent } from '@leafer/core'
 
 import { Group } from '@leafer-ui/display'
 
@@ -15,6 +15,9 @@ export class Leafer extends Group implements ILeafer {
     public parent?: App
 
     public running: boolean
+    public ready: boolean
+
+    public startTimer: number
 
     @resizeType()
     public width: number
@@ -25,18 +28,20 @@ export class Leafer extends Group implements ILeafer {
     @resizeType()
     public pixelRatio: number
 
+    public get bounds(): IBounds { return this.canvas.bounds }
+
+    public userConfig: ILeaferConfig
     public config: ILeaferConfig = {
-        useZoom: true,
-        useMove: true,
-        autoStart: true,
-        hittable: true,
-        pixelRatio: devicePixelRatio
+        type: 'design',
+        start: true,
+        hittable: true
     }
 
     public autoLayout?: IAutoBounds
 
-    //  manager
+    public view: unknown
 
+    //  manager
     public canvas: ILeaferCanvas
     public renderer: IRenderer
 
@@ -56,10 +61,16 @@ export class Leafer extends Group implements ILeafer {
 
     protected __eventIds: IEventListenerId[] = []
 
-    constructor(userConfig?: ILeaferConfig, app?: IApp) {
+
+
+    constructor(userConfig?: ILeaferConfig) {
         super()
+        this.userConfig = userConfig
+        if (userConfig?.view) this.init(userConfig)
+    }
 
-        this.__setAsLeafer()
+    public init(userConfig?: ILeaferConfig, app?: IApp): void {
+        this.__setLeafer(this)
         this.__setConfig(userConfig)
 
         const { config } = this
@@ -69,11 +80,12 @@ export class Leafer extends Group implements ILeafer {
         // render
         this.canvas = Creator.canvas(config)
         this.renderer = Creator.renderer(this, this.canvas, config)
+        this.view = this.canvas.view
 
-        // layout
         if (this.isApp) {
-            this.__level = 1
+            this.__setApp()
         } else {
+            // layout
             this.watcher = Creator.watcher(this)
             this.layouter = Creator.layouter(this)
         }
@@ -82,46 +94,86 @@ export class Leafer extends Group implements ILeafer {
 
         // interaction / manager
         if (app) {
-
-            app.selector?.defaultPath.unshift(this)
-
-            this.selector = app.selector
-            if (config.hittable) this.interaction = app.interaction
-
-            this.canvasManager = app.canvasManager
-            this.hitCanvasManager = app.hitCanvasManager
-            this.imageManager = app.imageManager
-
-            if (app.running) setTimeout(this.start.bind(this))
-
+            this.__bindApp(app)
         } else {
-
             this.selector = Creator.selector(this)
-            if (config.hittable) this.interaction = Creator.interaction(this, this.canvas, this.selector, config)
+            if (config.hittable) this.interaction = Creator.interaction(this, this, this.selector, config)
 
-            this.canvasManager = new CanvasManager(this)
-            this.hitCanvasManager = new HitCanvasManager(this)
+            this.canvasManager = new CanvasManager()
+            this.hitCanvasManager = new HitCanvasManager()
             this.imageManager = new ImageManager(this, config)
-            Run.start('FullCreate')
-            if (config.autoStart) setTimeout(this.start.bind(this))
 
+            if (config.start) this.startTimer = setTimeout(this.start.bind(this))
         }
 
         this.canvasManager.add(this.canvas)
-        this.__listenEvents()
 
+        this.__listenEvents()
     }
 
     protected __listenEvents(): void {
-        this.once(LayoutEvent.END, this.__setAsRoot.bind(this))
+        Run.start('FirstCreate')
+        this.once(LeaferEvent.START, () => {
+            Run.endOfName('FirstCreate')
+            Run.start('FirstLayout')
+        })
+
+        this.once(LayoutEvent.END, () => {
+            Run.endOfName('FirstLayout')
+            Run.start('FirstRender')
+
+            this.ready = true
+
+            this.emit(LeaferEvent.BEFORE_READY)
+            this.emit(LeaferEvent.READY)
+            this.emit(LeaferEvent.AFTER_READY)
+        })
+
+        this.once(RenderEvent.END, () => {
+            Run.endOfName('FirstRender')
+            this.emit(LeaferEvent.VIEW_READY)
+        })
     }
 
     protected __removeListenEvents(): void {
         this.off__(this.__eventIds)
     }
 
+    protected __setApp(): void { }
+
+    protected __bindApp(app: IApp): void {
+        app.selector?.defaultPath.unshift(this)
+
+        this.selector = app.selector
+        if (this.config.hittable) this.interaction = app.interaction
+
+        this.canvasManager = app.canvasManager
+        this.hitCanvasManager = app.hitCanvasManager
+        this.imageManager = app.imageManager
+
+        if (app.running) this.startTimer = setTimeout(this.start.bind(this))
+    }
+
+
+    public __setLeafer(leafer: ILeafer): void {
+        this.leafer = leafer
+        this.isLeafer = !!leafer
+        this.__level = 1
+    }
+
     protected __setConfig(userConfig?: ILeaferConfig): void {
-        if (userConfig) this.config = DataHelper.default(userConfig, this.config)
+        if (userConfig) {
+            this.config = DataHelper.default(userConfig, this.config)
+            this.__setAppType(this.config.type)
+        }
+    }
+
+    protected __setAppType(type: ILeaferType): void {
+        if (type === 'user') {
+            const { config } = this
+            if (!config.pointer) config.pointer = {}
+            config.pointer.autoMoveDistance = 0
+        }
     }
 
     protected __checkAutoLayout(config: ILeaferConfig): void {
@@ -133,11 +185,18 @@ export class Leafer extends Group implements ILeafer {
 
     public start(): void {
         if (!this.running) {
-            Run.endOfName('FullCreate')
+
+            if (this.ready) {
+                this.emit(LeaferEvent.RESTART)
+            } else {
+                this.emit(LeaferEvent.START)
+            }
+
             if (this.interaction) {
                 this.__interactiveWindow()
                 this.interaction.start()
             }
+
             this.renderer.start()
             this.layouter.start()
             this.watcher.start()
@@ -152,16 +211,16 @@ export class Leafer extends Group implements ILeafer {
             this.layouter.stop()
             this.renderer.stop()
             this.running = false
+            this.emit(LeaferEvent.STOP)
         }
     }
 
     protected __interactiveWindow(): void {
-        const { useZoom, useMove } = this.config
-        if (useMove) {
+        if (this.config.type !== 'user') {
             const { MOVE } = MoveEvent
             const { ZOOM } = ZoomEvent
-            if (!this.hasEvent(MOVE)) this.__eventIds.push(this.on__(MOVE, (e: MoveEvent) => { LeafHelper.moveOfWorld(this, e.moveX, e.moveY) }))
-            if (useZoom && !this.hasEvent(ZOOM)) this.__eventIds.push(this.on__(ZOOM, (e: ZoomEvent) => { LeafHelper.zoomOfWorld(this, e.scale, e) }))
+            if (!this.hasEvent(MOVE)) this.__eventIds.push(this.on__(MOVE, (e: MoveEvent) => { LeafHelper.move(this, e.moveX, e.moveY) }))
+            if (!this.hasEvent(ZOOM)) this.__eventIds.push(this.on__(ZOOM, (e: ZoomEvent) => { LeafHelper.zoomOf(this, e, e.scale) }))
         }
     }
 
@@ -180,22 +239,24 @@ export class Leafer extends Group implements ILeafer {
 
     public destory(): void {
         if (this.canvas) {
-            super.destroy()
 
+            clearTimeout(this.startTimer)
+            this.emit(LeaferEvent.END)
+
+            this.stop()
             this.__removeListenEvents()
 
-            if (!this.parent) {
-                this.interaction?.destroy()
-                this.selector.destroy()
 
-                this.renderer.destroy()
-                this.watcher.destroy()
-                this.layouter.destroy()
+            this.interaction?.destroy()
+            this.selector.destroy()
 
-                this.canvasManager.destory()
-                this.hitCanvasManager.destory()
-                this.imageManager.destory()
-            }
+            this.renderer.destroy()
+            this.watcher?.destroy()
+            this.layouter?.destroy()
+
+            this.canvasManager.destory()
+            this.hitCanvasManager.destory()
+            this.imageManager.destory()
 
             this.canvas.destroy()
             this.canvas = null
@@ -219,6 +280,8 @@ export class Leafer extends Group implements ILeafer {
             this.moveLayer = undefined
 
             this.parent = undefined
+
+            super.destroy()
         }
     }
 }