@leafer-ui/app 1.0.0-alpha.9 → 1.0.0-beta

package/package.json

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

package/src/App.ts

@@ -0,0 +1,106 @@
+import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, IApp, __Value } from '@leafer/interface'
+import { DataHelper, Debug, LayoutEvent, PropertyEvent, RenderEvent, canvasSizeAttrs, registerUI } from '@leafer/core'
+
+import { Leafer } from './Leafer'
+
+
+@registerUI()
+export class App extends Leafer implements IApp {
+
+    public get __tag() { return 'App' }
+
+    public get isApp(): boolean { return true }
+
+    public children: Leafer[] = []
+
+    public realCanvas: boolean
+
+    protected __setApp(): void {
+        const { canvas } = this
+        const { realCanvas, view } = this.config
+        if (realCanvas || view === this.canvas.view || !canvas.parentView) {
+            this.realCanvas = true
+        } else {
+            canvas.unrealCanvas()
+        }
+
+        this.leafer = this
+        this.watcher.disable()
+        this.layouter.disable()
+
+        this.__eventIds.push(
+            this.on_(PropertyEvent.CHANGE, () => {
+                if (Debug.showHitView) this.children.forEach(leafer => { leafer.forceUpdate('blendMode') })
+            })
+        )
+    }
+
+    public start(): void {
+        super.start()
+        this.children.forEach(leafer => { leafer.start() })
+    }
+
+    public stop(): void {
+        this.children.forEach(leafer => { leafer.stop() })
+        super.stop()
+    }
+
+    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)
+
+        leafer.once(LayoutEvent.END, () => {
+            if (!this.ready && this.children.every(child => child.ready)) this.__onReady()
+        })
+
+        leafer.once(RenderEvent.END, () => {
+            if (!this.viewReady && this.children.every(child => child.viewReady)) this.__onViewReady()
+        })
+
+        if (this.realCanvas) {
+            this.__eventIds.push(
+                leafer.on_(RenderEvent.END, this.__onChildRenderEnd, this),
+            )
+        }
+    }
+
+    protected __onChildRenderEnd(e: RenderEvent): void {
+        this.renderer.addBlock(e.renderBounds)
+        if (this.viewReady) this.renderer.update()
+    }
+
+    public __render(canvas: ILeaferCanvas, _options: IRenderOptions): void {
+        this.children.forEach(leafer => { canvas.copyWorld(leafer.canvas) })
+    }
+
+    public __onResize(event: IResizeEvent): void {
+        this.children.forEach(leafer => { leafer.resize(event) })
+        super.__onResize(event)
+    }
+
+    protected __checkUpdateLayout(): void {
+        this.children.forEach(leafer => { leafer.__layout.checkUpdate() })
+    }
+
+    protected __getChildConfig(userConfig?: ILeaferConfig): ILeaferConfig {
+        let config = { ...this.config }
+        if (userConfig) DataHelper.assign(config, userConfig)
+        config.view = this.realCanvas ? undefined : this.view
+        config.fill = config.hittable = config.realCanvas = undefined
+        if (this.autoLayout) DataHelper.copyAttrs(config, this, canvasSizeAttrs)
+        return config
+    }
+
+    public destory(): void {
+        this.children.forEach(leafer => { leafer.destory() })
+        this.children.length = 0
+        super.destory()
+    }
+
+}

package/src/Leafer.ts

@@ -1,42 +1,38 @@
-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, 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 { ILeaferInputData, ILeaferData } from '@leafer-ui/interface'
+import { LeaferData } from '@leafer-ui/data'
 import { Group } from '@leafer-ui/display'
 
-import { SuperLeafer } from './SuperLeafer'
+import { App } from './App'
+import { LeaferType } from './type/LeaferType'
 
 
+const debug = Debug.get('Leafer')
+
 @registerUI()
 export class Leafer extends Group implements ILeafer {
 
-    public creator: ICreator
-
-    public get isSupperLeafer(): boolean { return false }
-
-    public parent?: SuperLeafer
+    public get __tag() { return 'Leafer' }
 
-    public running: boolean
+    @dataProcessor(LeaferData)
+    public __: ILeaferData
 
-    @resizeType()
-    public width: number
+    @boundsType()
+    public pixelRatio: number
 
-    @resizeType()
-    public height: number
+    public get isApp(): boolean { return false }
 
-    @resizeType()
-    public pixelRatio: number
+    public parent?: App
 
-    public config: ILeaferConfig = {
-        zoom: true,
-        move: true,
-        start: true,
-        pixelRatio: devicePixelRatio
-    }
+    public running: boolean
+    public ready: boolean
+    public viewReady: boolean
 
-    public autoLayout?: IAutoBounds
+    public view: unknown
 
     //  manager
-
     public canvas: ILeaferCanvas
     public renderer: IRenderer
 
@@ -50,191 +46,246 @@ export class Leafer extends Group implements ILeafer {
     public hitCanvasManager?: IHitCanvasManager
     public imageManager: IImageManager
 
-    public zoomLayer?: ILeaf
-    public moveLayer?: ILeaf
+    public zoomLayer: ILeaf = this
+    public moveLayer: ILeaf = this
     public transformData?: ITransformEventData
 
-    protected __eventIds: IEventListenerId[] = []
-
-    constructor(userConfig?: ILeaferConfig, parentLeafer?: ILeafer) {
-        super()
+    public userConfig: ILeaferConfig
+    public config: ILeaferConfig = {
+        type: 'design',
+        start: true,
+        hittable: true,
+        zoom: {
+            min: 0.02,
+            max: 256
+        },
+        move: {
+            dragOut: true,
+            autoDistance: 2
+        }
+    }
 
-        this.creator = Creator
+    public autoLayout?: IAutoBounds
 
-        const { config } = this
+    public __eventIds: IEventListenerId[] = []
+    protected __startTimer: ITimer
+    protected __controllers: IControl[] = []
 
-        this.__setAsLeafer()
-        this.__setConfig(userConfig)
+    constructor(userConfig?: ILeaferConfig, data?: ILeaferInputData) {
+        super(data)
+        this.userConfig = userConfig
+        if (userConfig?.view) this.init(userConfig)
+    }
 
-        // render
-        this.canvas = Creator.canvas(config)
-        this.renderer = Creator.renderer(this, this.canvas, config)
+    public init(userConfig?: ILeaferConfig, parentApp?: IApp): void {
+        if (this.canvas) return
 
-        // layout
-        if (this.isSupperLeafer) {
-            this.__level = 1
-        } else {
+        this.__setLeafer(this)
+        if (userConfig) DataHelper.assign(this.config, userConfig)
 
-            this.watcher = Creator.watcher(this)
-            this.layouter = Creator.layouter(this)
+        let start: boolean
+        const { config } = this
+        LeaferType.run(config.type, this)
 
-        }
+        // render / layout
+        this.canvas = Creator.canvas(config)
+        this.__controllers.push(
+            this.renderer = Creator.renderer(this, this.canvas, config),
+            this.watcher = Creator.watcher(this, config),
+            this.layouter = Creator.layouter(this, config)
+        )
 
+        if (this.isApp) this.__setApp()
         this.__checkAutoLayout(config)
+        this.view = this.canvas.view
 
         // interaction / manager
-        if (parentLeafer) {
+        if (parentApp) {
+            this.__bindApp(parentApp)
+            start = parentApp.running
+        } else {
+            this.selector = Creator.selector(this)
+            this.__controllers.unshift(this.interaction = Creator.interaction(this, this.canvas, this.selector, config))
 
-            parentLeafer.selector?.defaultPath.unshift(this)
+            this.canvasManager = new CanvasManager()
+            this.hitCanvasManager = new HitCanvasManager()
+            this.imageManager = new ImageManager(this, config)
 
-            this.selector = parentLeafer.selector
-            this.interaction = parentLeafer.interaction
+            start = config.start
+        }
 
-            this.canvasManager = parentLeafer.canvasManager
-            this.hitCanvasManager = parentLeafer.hitCanvasManager
-            this.imageManager = parentLeafer.imageManager
+        this.hittable = config.hittable
+        this.fill = config.fill
+        this.canvasManager.add(this.canvas)
 
-            if (parentLeafer.running) setTimeout(this.start.bind(this))
+        this.__listenEvents()
 
-        } else {
+        if (start) this.__startTimer = setTimeout(this.start.bind(this))
+    }
 
-            this.selector = Creator.selector(this)
-            this.interaction = Creator.interaction(this, this.canvas, this.selector, config)
+    public start(): void {
+        clearTimeout(this.__startTimer)
+        if (!this.running && this.canvas) {
+            this.ready ? this.emitLeafer(LeaferEvent.RESTART) : this.emitLeafer(LeaferEvent.START)
+            this.__controllers.forEach(item => item.start())
+            if (!this.isApp) this.renderer.render()
+            this.running = true
+        }
+    }
 
-            this.canvasManager = new CanvasManager(this)
-            this.hitCanvasManager = new HitCanvasManager(this)
-            this.imageManager = new ImageManager(this, config)
+    public stop(): void {
+        clearTimeout(this.__startTimer)
+        if (this.running && this.canvas) {
+            this.__controllers.forEach(item => item.stop())
+            this.running = false
+            this.emitLeafer(LeaferEvent.STOP)
+        }
+    }
 
-            if (config.start) setTimeout(this.start.bind(this))
+    public resize(size: IScreenSizeData): void {
+        const data = DataHelper.copyAttrs({}, size, canvasSizeAttrs)
+        Object.keys(data).forEach(key => (this as any)[key] = data[key])
+    }
 
-        }
+    public forceFullRender(): void {
+        this.renderer.addBlock(this.canvas.bounds)
+        if (this.viewReady) this.renderer.update()
+    }
 
-        this.canvasManager.add(this.canvas)
-        this.__listenEvents()
+    protected __doResize(size: IScreenSizeData): void {
+        if (!this.canvas || this.canvas.isSameSize(size)) return
+        const old = DataHelper.copyAttrs({}, this.canvas, canvasSizeAttrs) as IScreenSizeData
+        this.canvas.resize(size)
+        this.__onResize(new ResizeEvent(size, old))
+    }
 
+    protected __onResize(event: IResizeEvent): void {
+        this.emitEvent(event)
+        DataHelper.copyAttrs(this.__, event, canvasSizeAttrs)
+        setTimeout(() => { if (this.canvasManager) this.canvasManager.clearRecycled() }, 0)
     }
 
-    protected __listenEvents(): void {
-        this.once(LayoutEvent.END, this.__setAsRoot.bind(this))
+    protected __setApp(): void { }
+
+    protected __bindApp(app: IApp): void {
+        this.selector = app.selector
+        this.interaction = app.interaction
+
+        this.canvasManager = app.canvasManager
+        this.hitCanvasManager = app.hitCanvasManager
+        this.imageManager = app.imageManager
     }
 
-    protected __removeListenEvents(): void {
-        this.off__(this.__eventIds)
+    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)
+    public setZoomLayer(zoomLayer: ILeaf, moveLayer?: ILeaf): void {
+        this.zoomLayer = zoomLayer
+        this.moveLayer = moveLayer || zoomLayer
     }
 
     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()
-            this.renderer.start()
-            this.layouter.start()
-            this.watcher.start()
-            this.running = true
+    public __setAttr(attrName: string, newValue: __Value): void {
+        if (this.canvas) {
+            if (canvasSizeAttrs.includes(attrName)) {
+                this.__changeCanvasSize(attrName, newValue as number)
+            } else if (attrName === 'fill') {
+                this.__changeFill(newValue as string)
+            } else if (attrName === 'hittable') {
+                this.canvas.setHittable(newValue as boolean)
+            }
         }
+        super.__setAttr(attrName, newValue)
     }
 
-    public stop(): void {
-        if (this.running) {
-            this.interaction?.stop()
-            this.watcher.stop()
-            this.layouter.stop()
-            this.renderer.stop()
-            this.running = false
-        }
+    public __getAttr(attrName: string): __Value {
+        if (this.canvas && canvasSizeAttrs.includes(attrName)) return this.canvas[attrName]
+        return super.__getAttr(attrName)
     }
 
-    protected __interactiveWindow(): void {
-        const { zoom, move } = this.config
-        if (move) {
-            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 (zoom && !this.hasEvent(ZOOM)) this.__eventIds.push(this.on__(ZOOM, (e: ZoomEvent) => { LeafHelper.zoomOfWorld(this, e.scale, e) }))
+    protected __changeCanvasSize(attrName: string, newValue: number): void {
+        const data = DataHelper.copyAttrs({}, this.canvas, canvasSizeAttrs)
+        data[attrName] = (this.config as IObject)[attrName] = newValue
+        if (newValue) this.canvas.stopAutoLayout()
+        this.__doResize(data as IScreenSizeData)
+    }
+
+    protected __changeFill(newValue: string): void {
+        this.config.fill = newValue as string
+        if (this.canvas.allowBackgroundColor) {
+            this.canvas.setBackgroundColor(newValue as string)
+        } else {
+            this.forceFullRender()
         }
     }
 
-    public resize(size: IScreenSizeData): void {
-        if (this.canvas.isSameSize(size)) return
-        const { width, height, pixelRatio } = this.canvas
-        const oldSize = { width, height, pixelRatio }
-        this.canvas.resize(size)
-        this.__onResize(new ResizeEvent(size, oldSize))
+    protected __onReady(): void {
+        if (this.ready) return
+        this.ready = true
+        this.emitLeafer(LeaferEvent.BEFORE_READY)
+        this.emitLeafer(LeaferEvent.READY)
+        this.emitLeafer(LeaferEvent.AFTER_READY)
     }
 
-    protected __onResize(event: IResizeEvent): void {
-        this.emitEvent(event)
-        setTimeout(() => { this.canvasManager.clearRecycled() }, 0)
+    protected __onViewReady(): void {
+        if (this.viewReady) return
+        this.viewReady = true
+        this.emitLeafer(LeaferEvent.VIEW_READY)
+    }
+
+    protected __checkUpdateLayout(): void {
+        this.__layout.checkUpdate()
+    }
+
+    protected emitLeafer(type: string): void {
+        this.emitEvent(new LeaferEvent(type, this))
+    }
+
+    protected __listenEvents(): void {
+        const runId = Run.start('FirstCreate ' + this.innerName)
+        this.once(LeaferEvent.START, () => Run.end(runId))
+        this.once(LayoutEvent.END, () => this.__onReady())
+        this.once(RenderEvent.END, () => this.__onViewReady())
+        this.on(LayoutEvent.CHECK_UPDATE, () => this.__checkUpdateLayout())
+    }
+
+    protected __removeListenEvents(): void {
+        this.off_(this.__eventIds)
     }
 
     public destory(): void {
         if (this.canvas) {
-            super.destroy()
+            try {
+                this.stop()
+                this.emitEvent(new LeaferEvent(LeaferEvent.END, this))
+                this.__removeListenEvents()
 
-            this.__removeListenEvents()
+                this.__controllers.forEach(item => item.destroy())
+                this.__controllers.length = 0
 
-            if (!this.parent) {
-                this.interaction?.destroy()
                 this.selector.destroy()
-
-                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.creator = undefined
-            this.config = undefined
-
-            this.interaction = undefined
-            this.selector = undefined
-
 
-            this.renderer = undefined
-            this.watcher = undefined
-            this.layouter = undefined
+                this.canvas.destroy()
+                this.canvas = null
 
-            this.canvasManager = undefined
-            this.hitCanvasManager = undefined
-            this.imageManager = undefined
-
-            this.zoomLayer = undefined
-            this.moveLayer = undefined
-
-            this.parent = undefined
-        }
-    }
-}
+                this.config = this.userConfig = this.view = null
 
-function resizeType() {
-    return (target: Leafer, key: string) => {
-        const property: IObject & ThisType<Leafer> = {
-            get() {
-                return (this.canvas as IObject)[key]
-            },
-            set(value: number) {
-                const { width, height, pixelRatio } = this.canvas
-                const data = { width, height, pixelRatio } as IObject
-                data[key] = value
-                this.resize(data as IScreenSizeData)
+                super.destroy()
+            } catch (e) {
+                debug.error(e)
             }
         }
-        Object.defineProperty(target, key, property)
     }
 }

package/src/index.ts

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

package/src/type/LeaferType.ts

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,19 @@
+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

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

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