@leafer-ui/app 1.0.0-rc.9 → 1.0.0

package/package.json

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

package/src/App.ts

@@ -1,9 +1,9 @@
-import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, ILeaferBase } from '@leafer/interface'
+import { ILeaferConfig, IResizeEvent, ILeaferCanvas, IRenderOptions, ILeaferBase, IBoundsData } from '@leafer/interface'
 import { Creator, DataHelper, Debug, LayoutEvent, PropertyEvent, RenderEvent, canvasSizeAttrs, registerUI } from '@leafer/core'
 
 import { IApp, IAppConfig, IAppInputData, IEditorBase, ILeafer } from '@leafer-ui/interface'
 
-import { Leafer } from './Leafer'
+import { Leafer } from '@leafer-ui/draw'
 
 
 @registerUI()
@@ -23,6 +23,10 @@ export class App extends Leafer implements IApp {
 
     constructor(userConfig?: IAppConfig, data?: IAppInputData) {
         super(userConfig, data)
+    }
+
+    override init(userConfig?: IAppConfig, parentApp?: IApp): void {
+        super.init(userConfig, parentApp)
         if (userConfig) {
             const { ground, tree, sky, editor } = userConfig
             if (ground) this.ground = this.addLeafer(ground)
@@ -51,42 +55,47 @@ export class App extends Leafer implements IApp {
         this.__eventIds.push(this.on_(PropertyEvent.CHANGE, this.__onPropertyChange, this))
     }
 
-    public start(): void {
+    override start(): void {
         super.start()
         this.children.forEach(leafer => leafer.start())
     }
 
-    public stop(): void {
+    override stop(): void {
         this.children.forEach(leafer => leafer.stop())
         super.stop()
     }
 
-    public unlockLayout(): void {
+    override unlockLayout(): void {
         super.unlockLayout()
         this.children.forEach(leafer => leafer.unlockLayout())
     }
 
-    public lockLayout(): void {
+    override lockLayout(): void {
         super.lockLayout()
         this.children.forEach(leafer => leafer.lockLayout())
     }
 
+    override forceRender(bounds?: IBoundsData): void {
+        this.children.forEach(leafer => leafer.forceRender(bounds))
+    }
+
     public addLeafer(merge?: ILeaferConfig): Leafer {
         const leafer = new Leafer(merge)
         this.add(leafer)
         return leafer
     }
 
-    public add(leafer: ILeafer): void {
+    override add(leafer: ILeafer, index?: number): void {
         if (!leafer.view) {
             if (this.realCanvas && !this.canvas.bounds) { // wait miniapp select canvas
-                setTimeout(() => this.add(leafer), 10)
+                setTimeout(() => this.add(leafer, index), 10)
                 return
             }
             leafer.init(this.__getChildConfig(leafer.userConfig), this)
         }
 
-        super.add(leafer)
+        super.add(leafer, index)
+        if (index !== undefined) leafer.canvas.childIndex = index
         this.__listenChildEvents(leafer)
     }
 
@@ -111,7 +120,11 @@ export class App extends Leafer implements IApp {
         if (this.viewReady) this.renderer.update()
     }
 
-    public __render(canvas: ILeaferCanvas, _options: IRenderOptions): void {
+    override __render(canvas: ILeaferCanvas, options: IRenderOptions): void {
+        if (options.matrix) {
+            const { a, b, c, d, e, f } = options.matrix
+            canvas.setTransform(a, b, c, d, e, f) // screenshot
+        }
         this.children.forEach(leafer => canvas.copyWorld(leafer.canvas))
     }
 

package/src/index.ts

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

package/types/index.d.ts

@@ -1,82 +1,7 @@
-import { ILeaferCanvas, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaferConfig, IAutoBounds, IPointData, IEventListenerId, ITimer, IControl, IScreenSizeData, IResizeEvent, ILeaf, IValue, IRenderOptions, ILeaferBase } from '@leafer/interface';
-import { ILeafer, ILeaferData, IApp, IEditorBase, IGroup, IFunction, ILeaferInputData, IUIInputData, IAppConfig, IAppInputData } from '@leafer-ui/interface';
-import { Group } from '@leafer-ui/display';
+import { IBoundsData, ILeaferConfig, ILeaferCanvas, IRenderOptions, IResizeEvent, ILeaferBase } from '@leafer/interface';
 import { RenderEvent } from '@leafer/core';
-
-declare class Leafer extends Group implements ILeafer {
-    get __tag(): string;
-    __: ILeaferData;
-    pixelRatio: number;
-    get isApp(): boolean;
-    get app(): ILeafer;
-    parent?: IApp;
-    running: boolean;
-    created: boolean;
-    ready: boolean;
-    viewReady: boolean;
-    viewCompleted: boolean;
-    get imageReady(): boolean;
-    get layoutLocked(): boolean;
-    view: unknown;
-    canvas: ILeaferCanvas;
-    renderer: IRenderer;
-    watcher: IWatcher;
-    layouter: ILayouter;
-    selector?: ISelector;
-    interaction?: IInteraction;
-    canvasManager: ICanvasManager;
-    hitCanvasManager?: IHitCanvasManager;
-    editor: IEditorBase;
-    zoomLayer: IGroup;
-    userConfig: ILeaferConfig;
-    config: ILeaferConfig;
-    autoLayout?: IAutoBounds;
-    get cursorPoint(): IPointData;
-    leafs: number;
-    __eventIds: IEventListenerId[];
-    protected __startTimer: ITimer;
-    protected __controllers: IControl[];
-    protected __readyWait: IFunction[];
-    protected __viewReadyWait: IFunction[];
-    protected __viewCompletedWait: IFunction[];
-    __nextRenderWait: IFunction[];
-    constructor(userConfig?: ILeaferConfig, data?: ILeaferInputData);
-    init(userConfig?: ILeaferConfig, parentApp?: IApp): void;
-    set(data: IUIInputData): void;
-    start(): void;
-    stop(): void;
-    unlockLayout(): void;
-    lockLayout(): void;
-    resize(size: IScreenSizeData): void;
-    forceFullRender(): void;
-    updateCursor(): void;
-    protected __doResize(size: IScreenSizeData): void;
-    protected __onResize(event: IResizeEvent): void;
-    protected __setApp(): void;
-    protected __bindApp(app: IApp): void;
-    __setLeafer(leafer: ILeafer): void;
-    setZoomLayer(zoomLayer: ILeaf): void;
-    protected __checkAutoLayout(config: ILeaferConfig): void;
-    __setAttr(attrName: string, newValue: IValue): void;
-    __getAttr(attrName: string): IValue;
-    protected __changeCanvasSize(attrName: string, newValue: number): void;
-    protected __changeFill(newValue: string): void;
-    protected __onCreated(): void;
-    protected __onReady(): void;
-    protected __onViewReady(): void;
-    protected __onAnimateFrame(): void;
-    protected __checkViewCompleted(emit?: boolean): void;
-    protected __onWatchData(): void;
-    waitReady(item: IFunction): void;
-    waitViewReady(item: IFunction): void;
-    waitViewCompleted(item: IFunction): void;
-    nextRender(item: IFunction): void;
-    protected __checkUpdateLayout(): void;
-    protected emitLeafer(type: string): void;
-    protected __listenEvents(): void;
-    protected __removeListenEvents(): void;
-    destroy(): void;
-}
+import { IApp, ILeafer, IAppConfig, IAppInputData } from '@leafer-ui/interface';
+import { Leafer } from '@leafer-ui/draw';
 
 declare class App extends Leafer implements IApp {
     get __tag(): string;
@@ -87,23 +12,25 @@ declare class App extends Leafer implements IApp {
     tree: ILeafer;
     sky: ILeafer;
     constructor(userConfig?: IAppConfig, data?: IAppInputData);
+    init(userConfig?: IAppConfig, parentApp?: IApp): void;
     protected __setApp(): void;
     start(): void;
     stop(): void;
     unlockLayout(): void;
     lockLayout(): void;
+    forceRender(bounds?: IBoundsData): void;
     addLeafer(merge?: ILeaferConfig): Leafer;
-    add(leafer: ILeafer): void;
+    add(leafer: ILeafer, index?: number): void;
     protected __onPropertyChange(): void;
     protected __onCreated(): void;
     protected __onReady(): void;
     protected __onViewReady(): void;
     protected __onChildRenderEnd(e: RenderEvent): void;
-    __render(canvas: ILeaferCanvas, _options: IRenderOptions): void;
+    __render(canvas: ILeaferCanvas, options: IRenderOptions): void;
     __onResize(event: IResizeEvent): void;
     protected __checkUpdateLayout(): void;
     protected __getChildConfig(userConfig?: ILeaferConfig): ILeaferConfig;
     protected __listenChildEvents(leafer: ILeaferBase): void;
 }
 
-export { App, Leafer };
+export { App };

package/src/Leafer.ts

@@ -1,394 +0,0 @@
-import { ILeaferCanvas, IRenderer, ILayouter, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IAutoBounds, IScreenSizeData, IResizeEvent, ILeaf, IEventListenerId, ITimer, IValue, IObject, IControl, IPointData } from '@leafer/interface'
-import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, HitCanvasManager, ImageManager, DataHelper, Creator, Run, Debug, RenderEvent, AnimateEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, PluginManager, WaitHelper, WatchEvent } from '@leafer/core'
-
-import { ILeaferInputData, ILeaferData, IFunction, IUIInputData, ILeafer, IGroup, IApp, IEditorBase } from '@leafer-ui/interface'
-import { LeaferTypeCreator } from '@leafer-ui/type'
-import { LeaferData } from '@leafer-ui/data'
-import { Group } from '@leafer-ui/display'
-
-
-const debug = Debug.get('Leafer')
-
-@registerUI()
-export class Leafer extends Group implements ILeafer {
-
-    public get __tag() { return 'Leafer' }
-
-    @dataProcessor(LeaferData)
-    declare public __: ILeaferData
-
-    @boundsType()
-    public pixelRatio: number
-
-    public get isApp(): boolean { return false }
-    public get app(): ILeafer { return this.parent || this }
-
-    declare public parent?: IApp
-
-    public running: boolean
-    public created: boolean
-    public ready: boolean
-    public viewReady: boolean
-    public viewCompleted: boolean
-    public get imageReady(): boolean { return this.viewReady && ImageManager.isComplete }
-    public get layoutLocked() { return !this.layouter.running }
-
-    public view: unknown
-
-    //  manager
-    public canvas: ILeaferCanvas
-    public renderer: IRenderer
-
-    public watcher: IWatcher
-    public layouter: ILayouter
-
-    public selector?: ISelector
-    public interaction?: IInteraction
-
-    public canvasManager: ICanvasManager
-    public hitCanvasManager?: IHitCanvasManager
-
-    // plugin
-    public editor: IEditorBase
-
-    public zoomLayer: IGroup = this
-
-    public userConfig: ILeaferConfig
-    public config: ILeaferConfig = {
-        type: 'design',
-        start: true,
-        hittable: true,
-        smooth: true,
-        zoom: {
-            min: 0.02,
-            max: 256
-        },
-        move: {
-            holdSpaceKey: true,
-            dragOut: true,
-            autoDistance: 2
-        }
-    }
-
-    public autoLayout?: IAutoBounds
-
-    public get cursorPoint(): IPointData { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 } }
-    public leafs = 0
-
-    public __eventIds: IEventListenerId[] = []
-    protected __startTimer: ITimer
-    protected __controllers: IControl[] = []
-
-    protected __readyWait: IFunction[] = []
-    protected __viewReadyWait: IFunction[] = []
-    protected __viewCompletedWait: IFunction[] = []
-    public __nextRenderWait: IFunction[] = []
-
-    constructor(userConfig?: ILeaferConfig, data?: ILeaferInputData) {
-        super(data)
-        this.userConfig = userConfig
-        if (userConfig && (userConfig.view || userConfig.width)) this.init(userConfig)
-    }
-
-    public init(userConfig?: ILeaferConfig, parentApp?: IApp): void {
-        if (this.canvas) return
-
-        this.__setLeafer(this)
-        if (userConfig) DataHelper.assign(this.config, userConfig)
-
-        let start: boolean
-        const { config } = this
-        LeaferTypeCreator.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 (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))
-
-            this.canvasManager = new CanvasManager()
-            this.hitCanvasManager = new HitCanvasManager()
-
-            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))
-
-        PluginManager.onLeafer(this)
-    }
-
-    public set(data: IUIInputData): void {
-        if (!this.children) {
-            setTimeout(() => {
-                super.set(data)
-            })
-        } else {
-            super.set(data)
-        }
-    }
-
-    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
-        }
-    }
-
-    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 unlockLayout(): void {
-        this.layouter.start()
-        this.updateLayout()
-    }
-
-    public lockLayout(): void {
-        this.updateLayout()
-        this.layouter.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()
-    }
-
-    public updateCursor(): void {
-        if (this.interaction) this.interaction.updateCursor()
-    }
-
-    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 {
-        this.selector = app.selector
-        this.interaction = app.interaction
-
-        this.canvasManager = app.canvasManager
-        this.hitCanvasManager = app.hitCanvasManager
-    }
-
-    public __setLeafer(leafer: ILeafer): void {
-        this.leafer = leafer
-        this.isLeafer = !!leafer
-        this.__level = 1
-    }
-
-    public setZoomLayer(zoomLayer: ILeaf): void {
-        this.zoomLayer = zoomLayer as IGroup
-    }
-
-    protected __checkAutoLayout(config: ILeaferConfig): void {
-        if (!config.width || !config.height) {
-            this.autoLayout = new AutoBounds(config)
-            this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this))
-        }
-    }
-
-    public __setAttr(attrName: string, newValue: IValue): 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.hittable = newValue as boolean
-            }
-        }
-        super.__setAttr(attrName, newValue)
-    }
-
-    public __getAttr(attrName: string): IValue {
-        if (this.canvas && canvasSizeAttrs.includes(attrName)) return this.canvas[attrName]
-        return super.__getAttr(attrName)
-    }
-
-    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.backgroundColor = newValue as string
-        } else {
-            this.forceFullRender()
-        }
-    }
-
-    protected __onCreated(): void {
-        this.created = true
-    }
-
-    protected __onReady(): void {
-        if (this.ready) return
-        this.ready = true
-        this.emitLeafer(LeaferEvent.BEFORE_READY)
-        this.emitLeafer(LeaferEvent.READY)
-        this.emitLeafer(LeaferEvent.AFTER_READY)
-        WaitHelper.run(this.__readyWait)
-    }
-
-    protected __onViewReady(): void {
-        if (this.viewReady) return
-        this.viewReady = true
-        this.emitLeafer(LeaferEvent.VIEW_READY)
-        WaitHelper.run(this.__viewReadyWait)
-    }
-
-    protected __onAnimateFrame(): void {
-        if (this.viewReady) {
-            if (this.__nextRenderWait.length) WaitHelper.run(this.__nextRenderWait)
-
-            const { imageReady } = this
-            if (imageReady && !this.viewCompleted) this.__checkViewCompleted()
-            if (!imageReady) this.viewCompleted = false
-        }
-    }
-
-    protected __checkViewCompleted(emit: boolean = true): void {
-        this.nextRender(() => {
-            if (this.imageReady) {
-                if (emit) this.emitLeafer(LeaferEvent.VIEW_COMPLETED)
-                WaitHelper.run(this.__viewCompletedWait)
-                this.viewCompleted = true
-            }
-        })
-    }
-
-    protected __onWatchData(): void {
-        if (this.watcher.childrenChanged && this.interaction) {
-            this.nextRender(() => this.interaction.updateCursor())
-        }
-    }
-
-    public waitReady(item: IFunction): void {
-        this.ready ? item() : this.__readyWait.push(item)
-    }
-
-    public waitViewReady(item: IFunction): void {
-        this.viewReady ? item() : this.__viewReadyWait.push(item)
-    }
-
-    public waitViewCompleted(item: IFunction): void {
-        this.__viewCompletedWait.push(item)
-        if (this.viewCompleted) {
-            this.__checkViewCompleted(false)
-        } else {
-            if (!this.running) this.start()
-        }
-    }
-
-    public nextRender(item: IFunction): void {
-        this.__nextRenderWait.push(item)
-    }
-
-    protected __checkUpdateLayout(): void {
-        this.__layout.update()
-    }
-
-    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.START, () => this.__onCreated())
-        this.once(RenderEvent.END, () => this.__onViewReady())
-        this.__eventIds.push(
-            this.on_(WatchEvent.DATA, this.__onWatchData, this),
-            this.on_(AnimateEvent.FRAME, this.__onAnimateFrame, this),
-            this.on_(LayoutEvent.CHECK_UPDATE, this.__checkUpdateLayout, this)
-        )
-    }
-
-    protected __removeListenEvents(): void {
-        this.off_(this.__eventIds)
-        this.__eventIds.length = 0
-    }
-
-    public destroy(): void {
-        setTimeout(() => {
-            if (!this.destroyed) {
-                try {
-                    this.stop()
-                    this.emitEvent(new LeaferEvent(LeaferEvent.END, this))
-                    this.__removeListenEvents()
-
-                    this.__controllers.forEach(item => {
-                        if (!(this.parent && item === this.interaction)) item.destroy()
-                    })
-                    this.__controllers.length = 0
-
-                    if (!this.parent) {
-                        this.selector.destroy()
-                        this.canvasManager.destroy()
-                        this.hitCanvasManager.destroy()
-                    }
-
-                    this.canvas.destroy()
-
-                    this.config.view = this.view = null
-                    if (this.userConfig) this.userConfig.view = null
-
-                    super.destroy()
-
-                    setTimeout(() => { ImageManager.clearRecycled() }, 100)
-                } catch (e) {
-                    debug.error(e)
-                }
-            }
-        })
-
-    }
-}