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

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@leafer-ui/app",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.23",
   "description": "@leafer-ui/app",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/leaferjs/ui.git"
@@ -13,16 +15,15 @@
   "homepage": "https://github.com/leaferjs/ui/tree/main/packages/app",
   "bugs": "https://github.com/leaferjs/ui/issues",
   "keywords": [
-    "leaferui",
     "leafer-ui",
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-alpha.1",
-    "@leafer-ui/display": "1.0.0-alpha.2"
+    "@leafer/core": "1.0.0-alpha.23",
+    "@leafer-ui/display": "1.0.0-alpha.23"
   },
   "devDependencies": {
-     "@leafer/interface": "1.0.0-alpha.1",
-     "@leafer-ui/interface": "1.0.0-alpha.1"
+    "@leafer/interface": "1.0.0-alpha.23",
+    "@leafer-ui/interface": "1.0.0-alpha.23"
   }
 }

package/src/App.ts

@@ -0,0 +1,109 @@
+import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, IApp, __Value } from '@leafer/interface'
+import { DataHelper, LayoutEvent, RenderEvent, defineLeafAttr } from '@leafer/core'
+
+import { Leafer } from './Leafer'
+
+
+export class App extends Leafer implements IApp {
+
+    public get isApp(): boolean { return true }
+
+    public view: unknown
+
+    public virtualCanvas: boolean
+
+    public children: Leafer[] = []
+
+    @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 {
+        if (!this.running) {
+            this.children.forEach(leafer => { leafer.start() })
+            this.renderer.start()
+            this.running = true
+        }
+    }
+
+    public stop(): void {
+        if (this.running) {
+            this.children.forEach(leafer => { leafer.stop() })
+            this.renderer.stop()
+            this.running = false
+        }
+    }
+
+    public addLeafer(merge?: ILeaferConfig): Leafer {
+        const leafer = new Leafer(merge)
+        this.add(leafer)
+        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) {
+            event.data.map(item => renderer.addBlock(item.updatedBounds))
+        } else {
+            renderer.addBlock(renderer.canvas.bounds)
+        }
+    }
+
+    public __render(canvas: ILeaferCanvas, _options: IRenderOptions): void {
+        this.children.forEach(leafer => { canvas.copyWorld(leafer.canvas) })
+    }
+
+    public __onResize(event: IResizeEvent): void {
+        this.emitEvent(event)
+        this.children.forEach(leafer => { leafer.resize(event) })
+    }
+
+    protected __getChildConfig(userConfig?: ILeaferConfig): ILeaferConfig {
+        let old = { ...this.config }
+        userConfig = userConfig ? DataHelper.default(userConfig, old) : old
+        userConfig.view = this.virtualCanvas ? null : this.canvas.parentView
+        userConfig.virtualCanvas = null
+        if (this.autoLayout) {
+            userConfig.width = this.width
+            userConfig.height = this.height
+            userConfig.pixelRatio = this.pixelRatio
+        }
+        return userConfig
+    }
+
+}
+
+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,21 +1,23 @@
-import { ILayouter, ILeafer, ILeaferCanvas, IRenderer, ICreator, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IImageManager, IAutoBounds, IScreenSizeData, IResizeEvent, IObject, ILeaf, IEventListenerId, ITransformEventData } from '@leafer/interface'
-import { registerUI, AutoBounds, LayoutEvent, ResizeEvent, MoveEvent, ZoomEvent, CanvasManager, HitCanvasManager, ImageManager, DataHelper, LeafHelper, Creator } 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'
 
-import { SuperLeafer } from './SuperLeafer'
+import { App } from './App'
 
 
-@registerUI()
 export class Leafer extends Group implements ILeafer {
 
     public creator: ICreator
 
-    public get isSupperLeafer(): boolean { return false }
+    public get isApp(): boolean { return false }
 
-    public parent?: SuperLeafer
+    public parent?: App
 
     public running: boolean
+    public ready: boolean
+
+    public startTimer: number
 
     @resizeType()
     public width: number
@@ -26,17 +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 = {
-        zoom: true,
-        move: true,
+        type: 'design',
         start: true,
-        pixelRatio: devicePixelRatio
+        hittable: true
     }
 
     public autoLayout?: IAutoBounds
 
-    //  manager
+    public view: unknown
 
+    //  manager
     public canvas: ILeaferCanvas
     public renderer: IRenderer
 
@@ -56,87 +61,142 @@ export class Leafer extends Group implements ILeafer {
 
     protected __eventIds: IEventListenerId[] = []
 
-    constructor(userConfig?: ILeaferConfig, parentLeafer?: ILeafer) {
-        super()
 
-        this.creator = Creator
 
-        const { config } = this
+    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
+        this.creator = Creator
+        this.hittable = config.hittable
+
         // render
         this.canvas = Creator.canvas(config)
         this.renderer = Creator.renderer(this, this.canvas, config)
+        this.view = this.canvas.view
 
-        // layout
-        if (this.isSupperLeafer) {
-            this.__level = 1
+        if (this.isApp) {
+            this.__setApp()
         } else {
-
+            // layout
             this.watcher = Creator.watcher(this)
             this.layouter = Creator.layouter(this)
-
         }
 
         this.__checkAutoLayout(config)
 
         // interaction / manager
-        if (parentLeafer) {
-
-            parentLeafer.selector?.defaultPath.unshift(this)
-
-            this.selector = parentLeafer.selector
-            this.interaction = parentLeafer.interaction
-
-            this.canvasManager = parentLeafer.canvasManager
-            this.hitCanvasManager = parentLeafer.hitCanvasManager
-            this.imageManager = parentLeafer.imageManager
-
-            if (parentLeafer.running) setTimeout(this.start.bind(this))
-
+        if (app) {
+            this.__bindApp(app)
         } else {
-
             this.selector = Creator.selector(this)
-            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)
 
-            if (config.start) 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 {
         if (!config.width || !config.height) {
             this.autoLayout = new AutoBounds(config)
-            this.canvas.autoLayout(this.autoLayout, this.__onResize.bind(this))
+            this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this))
         }
     }
 
     public start(): void {
         if (!this.running) {
-            this.__interactiveWindow()
-            this.interaction?.start()
+
+            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()
@@ -146,21 +206,21 @@ export class Leafer extends Group implements ILeafer {
 
     public stop(): void {
         if (this.running) {
-            this.interaction?.stop()
+            if (this.interaction) this.interaction.stop()
             this.watcher.stop()
             this.layouter.stop()
             this.renderer.stop()
             this.running = false
+            this.emit(LeaferEvent.STOP)
         }
     }
 
     protected __interactiveWindow(): void {
-        const { zoom, move } = this.config
-        if (move) {
+        if (this.config.type !== 'user') {
             const { MOVE } = MoveEvent
             const { ZOOM } = ZoomEvent
-            if (!this.hasEvent(MOVE)) this.__eventIds.push(this.on__(MOVE, (e: MoveEvent) => { LeafHelper.moveByWorld(this, e.moveX, e.moveY) }))
-            if (zoom && !this.hasEvent(ZOOM)) this.__eventIds.push(this.on__(ZOOM, (e: ZoomEvent) => { LeafHelper.zoomByWorld(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) }))
         }
     }
 
@@ -179,45 +239,49 @@ 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 = undefined
+            this.canvas = null
 
-            this.creator = undefined
-            this.config = undefined
+            this.creator = null
+            this.config = null
 
-            this.interaction = undefined
-            this.selector = undefined
+            this.interaction = null
+            this.selector = null
 
 
-            this.renderer = undefined
-            this.watcher = undefined
-            this.layouter = undefined
+            this.renderer = null
+            this.watcher = null
+            this.layouter = null
 
-            this.canvasManager = undefined
-            this.hitCanvasManager = undefined
-            this.imageManager = undefined
+            this.canvasManager = null
+            this.hitCanvasManager = null
+            this.imageManager = null
 
-            this.zoomLayer = undefined
+            this.zoomLayer = null
             this.moveLayer = undefined
 
             this.parent = undefined
+
+            super.destroy()
         }
     }
 }

package/src/index.ts

@@ -1,2 +1,2 @@
 export { Leafer } from './Leafer'
-export { SuperLeafer } from './SuperLeafer'
+export { App } from './App'

package/src/SuperLeafer.ts

@@ -1,68 +0,0 @@
-import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions } from '@leafer/interface'
-import { registerUI, DataHelper, RenderEvent } from '@leafer/core'
-
-import { IGroup } from '@leafer-ui/interface'
-
-import { Leafer } from './Leafer'
-
-
-@registerUI()
-export class SuperLeafer extends Leafer implements IGroup {
-
-    public get isSupperLeafer(): boolean { return true }
-
-    public children: Leafer[] = []
-
-    public start(): void {
-        if (!this.running) {
-            this.children.forEach(leafer => { leafer.start() })
-            this.running = false
-        }
-    }
-
-    public stop(): void {
-        if (this.running) {
-            this.children.forEach(leafer => { leafer.stop() })
-            this.running = false
-        }
-    }
-
-    public addLeafer(merge?: ILeaferConfig): Leafer {
-        const leafer = new Leafer(this.__getChildConfig(merge), this)
-        this.add(leafer)
-        this.__eventIds.push(leafer.on__(RenderEvent.END, this.renderer.start, this.renderer))
-        return leafer
-    }
-
-    public __render(canvas: ILeaferCanvas, options: IRenderOptions): void {
-        this.children.forEach(leafer => { canvas.copy(leafer.canvas) })
-    }
-
-    public __onResize(event: IResizeEvent): void {
-        this.emitEvent(event)
-        this.children.forEach(leafer => { leafer.resize(event) })
-    }
-
-    protected __getChildConfig(userConfig?: ILeaferConfig): ILeaferConfig {
-        let old = { ...this.config }
-        userConfig = userConfig ? DataHelper.default(userConfig, old) : old
-        userConfig.view = undefined
-        if (this.autoLayout) {
-            userConfig.width = this.width
-            userConfig.height = this.height
-            userConfig.pixelRatio = this.pixelRatio
-        }
-        return userConfig
-    }
-
-    public destory(): void {
-        if (this.children.length) {
-            super.destory()
-            this.children.forEach(leafer => {
-                leafer.destory()
-            })
-            this.children.length = 0
-        }
-    }
-
-}