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

package/package.json

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

package/src/App.ts

@@ -1,45 +1,48 @@
 import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, IApp, __Value } from '@leafer/interface'
-import { DataHelper, LayoutEvent, RenderEvent, defineLeafAttr } from '@leafer/core'
+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 isApp(): boolean { return true }
-
-    public view: unknown
+    public get __tag() { return 'App' }
 
-    public virtualCanvas: boolean
+    public get isApp(): boolean { return true }
 
     public children: Leafer[] = []
 
-    @hitType(true)
-    public hittable: boolean
+    public realCanvas: boolean
 
     protected __setApp(): void {
-        if (this.config.view === this.canvas.view) {
-            this.virtualCanvas = true
+        const { canvas } = this
+        const { realCanvas, view } = this.config
+        if (realCanvas || view === this.canvas.view || !canvas.parentView) {
+            this.realCanvas = true
         } else {
-            this.canvas.unloadView()
-            this.view = this.canvas.parentView
+            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 {
-        if (!this.running) {
-            this.children.forEach(leafer => { leafer.start() })
-            this.renderer.start()
-            this.running = true
-        }
+        super.start()
+        this.children.forEach(leafer => { leafer.start() })
     }
 
     public stop(): void {
-        if (this.running) {
-            this.children.forEach(leafer => { leafer.stop() })
-            this.renderer.stop()
-            this.running = false
-        }
+        this.children.forEach(leafer => { leafer.stop() })
+        super.stop()
     }
 
     public addLeafer(merge?: ILeaferConfig): Leafer {
@@ -52,23 +55,24 @@ export class App extends Leafer implements IApp {
         if (!leafer.view) leafer.init(this.__getChildConfig(leafer.userConfig), this)
         super.add(leafer)
 
-        if (this.virtualCanvas) {
-            const { renderer } = this
+        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__(LayoutEvent.END, this.__onChildLayoutEnd, this),
-                leafer.on__(RenderEvent.END, renderer.update, renderer),
-                this.on__(LayoutEvent.REQUEST, renderer.mergeBlocks, renderer)
+                leafer.on__(RenderEvent.END, this.__onChildRenderEnd, this),
             )
         }
     }
 
-    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)
-        }
+    protected __onChildRenderEnd(e: RenderEvent): void {
+        this.renderer.addBlock(e.renderBounds)
+        if (this.viewReady) this.renderer.update()
     }
 
     public __render(canvas: ILeaferCanvas, _options: IRenderOptions): void {
@@ -76,34 +80,27 @@ export class App extends Leafer implements IApp {
     }
 
     public __onResize(event: IResizeEvent): void {
-        this.emitEvent(event)
         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 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
+        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
     }
 
-}
-
-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
-                })
-            }
-        })
+    public destory(): void {
+        this.children.forEach(leafer => { leafer.destory() })
+        this.children.length = 0
+        super.destory()
     }
+
 }

package/src/Leafer.ts

@@ -1,14 +1,26 @@
-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 { 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 { 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 __tag() { return 'Leafer' }
+
+    @dataProcessor(LeaferData)
+    public __: ILeaferData
+
+    @boundsType()
+    public pixelRatio: number
 
     public get isApp(): boolean { return false }
 
@@ -16,28 +28,7 @@ export class Leafer extends Group implements ILeafer {
 
     public running: boolean
     public ready: boolean
-
-    public startTimer: number
-
-    @resizeType()
-    public width: number
-
-    @resizeType()
-    public height: number
-
-    @resizeType()
-    public pixelRatio: number
-
-    public get bounds(): IBounds { return this.canvas.bounds }
-
-    public userConfig: ILeaferConfig
-    public config: ILeaferConfig = {
-        type: 'design',
-        start: true,
-        hittable: true
-    }
-
-    public autoLayout?: IAutoBounds
+    public viewReady: boolean
 
     public view: unknown
 
@@ -55,127 +46,130 @@ 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[] = []
+    public userConfig: ILeaferConfig
+    public config: ILeaferConfig = { type: 'design', start: true, hittable: true }
 
+    public autoLayout?: IAutoBounds
 
+    public __eventIds: IEventListenerId[] = []
+    protected __startTimer: ITimer
+    protected __controllers: IControl[] = []
 
-    constructor(userConfig?: ILeaferConfig) {
-        super()
+    constructor(userConfig?: ILeaferConfig, data?: ILeaferInputData) {
+        super(data)
         this.userConfig = userConfig
         if (userConfig?.view) this.init(userConfig)
     }
 
-    public init(userConfig?: ILeaferConfig, app?: IApp): void {
+    public init(userConfig?: ILeaferConfig, parentApp?: IApp): void {
+        if (this.canvas) return
+
         this.__setLeafer(this)
-        this.__setConfig(userConfig)
+        if (userConfig) DataHelper.assign(this.config, userConfig)
 
+        let start: boolean
         const { config } = this
-        this.creator = Creator
-        this.hittable = config.hittable
+        LeaferType.run(config.type, this)
 
-        // render
+        // render / layout
         this.canvas = Creator.canvas(config)
-        this.renderer = Creator.renderer(this, this.canvas, config)
-        this.view = this.canvas.view
-
-        if (this.isApp) {
-            this.__setApp()
-        } else {
-            // layout
-            this.watcher = Creator.watcher(this)
-            this.layouter = Creator.layouter(this)
-        }
+        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 (app) {
-            this.__bindApp(app)
+        if (parentApp) {
+            this.__bindApp(parentApp)
+            start = parentApp.running
         } else {
             this.selector = Creator.selector(this)
-            if (config.hittable) this.interaction = Creator.interaction(this, this, this.selector, config)
+            this.__controllers.unshift(this.interaction = Creator.interaction(this, this.canvas, this.selector, config))
 
             this.canvasManager = new CanvasManager()
             this.hitCanvasManager = new HitCanvasManager()
             this.imageManager = new ImageManager(this, config)
 
-            if (config.start) this.startTimer = setTimeout(this.start.bind(this))
+            start = config.start
         }
 
+        this.hittable = config.hittable
+        this.fill = config.fill
         this.canvasManager.add(this.canvas)
 
         this.__listenEvents()
+
+        if (start) this.__startTimer = setTimeout(this.start.bind(this))
     }
 
-    protected __listenEvents(): void {
-        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)
-        })
+    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
+        }
     }
 
-    protected __removeListenEvents(): void {
-        this.off__(this.__eventIds)
+    public stop(): void {
+        clearTimeout(this.__startTimer)
+        if (this.running && this.canvas) {
+            this.__controllers.forEach(item => item.stop())
+            this.running = false
+            this.emitLeafer(LeaferEvent.STOP)
+        }
+    }
+
+    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()
+    }
+
+    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 __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.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)
-            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)
@@ -183,122 +177,98 @@ export class Leafer extends Group implements ILeafer {
         }
     }
 
-    public start(): void {
-        if (!this.running) {
-
-            if (this.ready) {
-                this.emit(LeaferEvent.RESTART)
-            } else {
-                this.emit(LeaferEvent.START)
-            }
-
-            if (this.interaction) {
-                this.__interactiveWindow()
-                this.interaction.start()
+    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)
             }
-
-            this.renderer.start()
-            this.layouter.start()
-            this.watcher.start()
-            this.running = true
         }
+        super.__setAttr(attrName, newValue)
     }
 
-    public stop(): void {
-        if (this.running) {
-            if (this.interaction) this.interaction.stop()
-            this.watcher.stop()
-            this.layouter.stop()
-            this.renderer.stop()
-            this.running = false
-            this.emit(LeaferEvent.STOP)
-        }
+    public __getAttr(attrName: string): __Value {
+        if (this.canvas && canvasSizeAttrs.includes(attrName)) return this.canvas[attrName]
+        return super.__getAttr(attrName)
     }
 
-    protected __interactiveWindow(): void {
-        if (this.config.type !== 'user') {
-            const { MOVE } = MoveEvent
-            const { ZOOM } = ZoomEvent
-            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) }))
-        }
+    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)
     }
 
-    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 __changeFill(newValue: string): void {
+        this.config.fill = newValue as string
+        if (this.canvas.allowBackgroundColor) {
+            this.canvas.setBackgroundColor(newValue as string)
+        } else {
+            this.forceFullRender()
+        }
     }
 
-    protected __onResize(event: IResizeEvent): void {
-        this.emitEvent(event)
-        setTimeout(() => { this.canvasManager.clearRecycled() }, 0)
+    protected __onReady(): void {
+        if (this.ready) return
+        this.ready = true
+        this.emitLeafer(LeaferEvent.BEFORE_READY)
+        this.emitLeafer(LeaferEvent.READY)
+        this.emitLeafer(LeaferEvent.AFTER_READY)
     }
 
-    public destory(): void {
-        if (this.canvas) {
-
-            clearTimeout(this.startTimer)
-            this.emit(LeaferEvent.END)
-
-            this.stop()
-            this.__removeListenEvents()
-
-
-            this.interaction?.destroy()
-            this.selector.destroy()
-
-            this.renderer.destroy()
-            this.watcher?.destroy()
-            this.layouter?.destroy()
-
-            this.canvasManager.destory()
-            this.hitCanvasManager.destory()
-            this.imageManager.destory()
+    protected __onViewReady(): void {
+        if (this.viewReady) return
+        this.viewReady = true
+        this.emitLeafer(LeaferEvent.VIEW_READY)
+    }
 
-            this.canvas.destroy()
-            this.canvas = null
+    protected __checkUpdateLayout(): void {
+        this.__layout.checkUpdate()
+    }
 
-            this.creator = null
-            this.config = null
+    protected emitLeafer(type: string): void {
+        this.emitEvent(new LeaferEvent(type, this))
+    }
 
-            this.interaction = null
-            this.selector = null
+    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)
+    }
 
-            this.renderer = null
-            this.watcher = null
-            this.layouter = null
+    public destory(): void {
+        if (this.canvas) {
+            try {
+                this.stop()
+                this.emitEvent(new LeaferEvent(LeaferEvent.END, this))
+                this.__removeListenEvents()
 
-            this.canvasManager = null
-            this.hitCanvasManager = null
-            this.imageManager = null
+                this.__controllers.forEach(item => item.destroy())
+                this.__controllers.length = 0
 
-            this.zoomLayer = null
-            this.moveLayer = undefined
+                this.selector.destroy()
+                this.canvasManager.destory()
+                this.hitCanvasManager.destory()
+                this.imageManager.destory()
 
-            this.parent = undefined
+                this.canvas.destroy()
+                this.canvas = null
 
-            super.destroy()
-        }
-    }
-}
+                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/type/LeaferType.ts

@@ -0,0 +1,36 @@
+import { ILeafer, ILeaferTypeList, ILeaferTypeFunction } from '@leafer/interface'
+
+import { Debug } from '@leafer/debug'
+
+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,12 @@
+import { MoveEvent, ZoomEvent, LeafHelper } from '@leafer/core'
+import { ILeafer } from '@leafer/interface'
+
+
+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) => { LeafHelper.zoomOf(leafer.zoomLayer, e, e.scale) })
+    )
+}

package/src/type/user.ts

@@ -0,0 +1,8 @@
+import { ILeafer } from '@leafer/interface'
+
+
+export function user(leafer: ILeafer): void {
+    const { config } = leafer
+    if (!config.pointer) config.pointer = {}
+    config.pointer.autoMoveDistance = 0
+}