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

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@leafer-ui/app",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.21",
   "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.21",
+    "@leafer-ui/display": "1.0.0-alpha.21"
   },
   "devDependencies": {
-     "@leafer/interface": "1.0.0-alpha.1",
-     "@leafer-ui/interface": "1.0.0-alpha.1"
+    "@leafer/interface": "1.0.0-alpha.21",
+    "@leafer-ui/interface": "1.0.0-alpha.21"
   }
 }

package/src/App.ts

@@ -0,0 +1,84 @@
+import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, IApp } from '@leafer/interface'
+import { DataHelper, LayoutEvent, RenderEvent } from '@leafer/core'
+
+import { Leafer } from './Leafer'
+
+
+export class App extends Leafer implements IApp {
+
+    public get isApp(): boolean { return true }
+
+    public children: Leafer[] = []
+
+    constructor(userConfig?: ILeaferConfig) {
+        super(userConfig)
+    }
+
+    public start(): void {
+        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
+    }
+
+    public addLeafer(merge?: ILeaferConfig): Leafer {
+        const leafer = new Leafer(this.__getChildConfig(merge), this)
+        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
+    }
+
+    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 = null
+        if (this.autoLayout) {
+            userConfig.width = this.width
+            userConfig.height = this.height
+            userConfig.pixelRatio = this.pixelRatio
+        }
+        return userConfig
+    }
+
+    public destory(): void {
+        super.destory()
+
+        const { children } = this
+        if (children.length) {
+            children.forEach(leafer => leafer.destory())
+            children.length = 0
+        }
+    }
+
+}

package/src/Leafer.ts

@@ -1,19 +1,18 @@
-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 } from '@leafer/interface'
+import { AutoBounds, LayoutEvent, ResizeEvent, MoveEvent, ZoomEvent, CanvasManager, HitCanvasManager, ImageManager, DataHelper, LeafHelper, Creator, Run } 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
 
@@ -27,9 +26,10 @@ export class Leafer extends Group implements ILeafer {
     public pixelRatio: number
 
     public config: ILeaferConfig = {
-        zoom: true,
-        move: true,
-        start: true,
+        useZoom: true,
+        useMove: true,
+        autoStart: true,
+        hittable: true,
         pixelRatio: devicePixelRatio
     }
 
@@ -56,56 +56,54 @@ export class Leafer extends Group implements ILeafer {
 
     protected __eventIds: IEventListenerId[] = []
 
-    constructor(userConfig?: ILeaferConfig, parentLeafer?: ILeafer) {
+    constructor(userConfig?: ILeaferConfig, app?: IApp) {
         super()
 
-        this.creator = Creator
-
-        const { config } = this
-
         this.__setAsLeafer()
         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)
 
         // layout
-        if (this.isSupperLeafer) {
+        if (this.isApp) {
             this.__level = 1
         } else {
-
             this.watcher = Creator.watcher(this)
             this.layouter = Creator.layouter(this)
-
         }
 
         this.__checkAutoLayout(config)
 
         // interaction / manager
-        if (parentLeafer) {
+        if (app) {
 
-            parentLeafer.selector?.defaultPath.unshift(this)
+            app.selector?.defaultPath.unshift(this)
 
-            this.selector = parentLeafer.selector
-            this.interaction = parentLeafer.interaction
+            this.selector = app.selector
+            if (config.hittable) this.interaction = app.interaction
 
-            this.canvasManager = parentLeafer.canvasManager
-            this.hitCanvasManager = parentLeafer.hitCanvasManager
-            this.imageManager = parentLeafer.imageManager
+            this.canvasManager = app.canvasManager
+            this.hitCanvasManager = app.hitCanvasManager
+            this.imageManager = app.imageManager
 
-            if (parentLeafer.running) setTimeout(this.start.bind(this))
+            if (app.running) setTimeout(this.start.bind(this))
 
         } 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.canvas, this.selector, config)
 
             this.canvasManager = new CanvasManager(this)
             this.hitCanvasManager = new HitCanvasManager(this)
             this.imageManager = new ImageManager(this, config)
-
-            if (config.start) setTimeout(this.start.bind(this))
+            Run.start('FullCreate')
+            if (config.autoStart) setTimeout(this.start.bind(this))
 
         }
 
@@ -129,14 +127,17 @@ export class Leafer extends Group implements ILeafer {
     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()
+            Run.endOfName('FullCreate')
+            if (this.interaction) {
+                this.__interactiveWindow()
+                this.interaction.start()
+            }
             this.renderer.start()
             this.layouter.start()
             this.watcher.start()
@@ -146,7 +147,7 @@ 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()
@@ -155,12 +156,12 @@ export class Leafer extends Group implements ILeafer {
     }
 
     protected __interactiveWindow(): void {
-        const { zoom, move } = this.config
-        if (move) {
+        const { useZoom, useMove } = this.config
+        if (useMove) {
             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.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) }))
         }
     }
 
@@ -197,24 +198,24 @@ export class Leafer extends Group implements ILeafer {
             }
 
             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

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
-        }
-    }
-
-}