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

package/src/Leafer.ts

@@ -0,0 +1,447 @@
+import { ILeaferCanvas, IRenderer, ILayouter, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IAutoBounds, IScreenSizeData, IResizeEvent, IEventListenerId, ITimer, IValue, IObject, IControl, IPointData, ILeaferType, ICursorType, IBoundsData, INumber, IZoomType, IFourNumber, IBounds, IClientPointData } from '@leafer/interface'
+import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, ImageManager, DataHelper, Creator, Run, Debug, RenderEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, WaitHelper, WatchEvent, Bounds, LeafList } from '@leafer/core'
+
+import { ILeaferInputData, ILeaferData, IFunction, IUIInputData, ILeafer, IApp, IEditorBase } from '@leafer-ui/interface'
+import { LeaferData } from '@leafer-ui/data'
+import { Group } from './Group'
+
+
+const debug = Debug.get('Leafer')
+
+@registerUI()
+export class Leafer extends Group implements ILeafer {
+
+    static list = new LeafList() // 所有leafer实例
+
+
+    public get __tag() { return 'Leafer' }
+
+    @dataProcessor(LeaferData)
+    declare public __: ILeaferData
+
+    @boundsType()
+    declare public pixelRatio?: INumber
+
+    public get isApp(): boolean { return false }
+    public get app(): ILeafer { return this.parent || this }
+
+    public get isLeafer(): boolean { return true }
+
+    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 transforming: boolean
+
+    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 userConfig: ILeaferConfig
+    public config: ILeaferConfig = {
+        type: 'design',
+        start: true,
+        hittable: true,
+        smooth: true,
+        lazySpeard: 100,
+        zoom: {
+            min: 0.01,
+            max: 256
+        },
+        move: {
+            holdSpaceKey: true,
+            holdMiddleKey: true,
+            autoDistance: 2
+        }
+    }
+
+    public autoLayout?: IAutoBounds
+    public lazyBounds: IBounds
+
+    public get FPS(): number { return this.renderer ? this.renderer.FPS : 60 }
+    public get cursorPoint(): IPointData { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 } }
+    public get clientBounds(): IBoundsData { return this.canvas && this.canvas.getClientBounds() }
+    public leafs = 0
+
+    public __eventIds: IEventListenerId[] = []
+    protected __startTimer: ITimer
+    protected __controllers: IControl[] = []
+
+    protected __initWait: IFunction[] // assign in waitInit()
+    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)
+        Leafer.list.add(this)
+    }
+
+    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
+
+        this.initType(config.type) // LeaferType
+
+        // render / layout
+        const canvas = this.canvas = Creator.canvas(config)
+        this.__controllers.push(
+            this.renderer = Creator.renderer(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 = canvas.view
+
+        // interaction / manager
+        if (parentApp) {
+            this.__bindApp(parentApp)
+            start = parentApp.running
+        } else {
+            this.selector = Creator.selector(this)
+            this.interaction = Creator.interaction(this, canvas, this.selector, config)
+
+            if (this.interaction) {
+                this.__controllers.unshift(this.interaction)
+                this.hitCanvasManager = Creator.hitCanvasManager()
+            }
+
+            this.canvasManager = new CanvasManager()
+
+            start = config.start
+        }
+
+        this.hittable = config.hittable
+        this.fill = config.fill
+        this.canvasManager.add(canvas)
+
+
+        this.__listenEvents()
+
+        if (start) this.__startTimer = setTimeout(this.start.bind(this))
+
+        WaitHelper.run(this.__initWait)
+        this.onInit() // can rewrite init event
+    }
+
+    public onInit(): void { }
+
+    public initType(_type: ILeaferType): void { } // rewrite in @leafer-ui/type
+
+    public set(data: IUIInputData): void {
+        this.waitInit(() => { 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])
+    }
+
+    override forceRender(bounds?: IBoundsData): void {
+        this.renderer.addBlock(bounds ? new Bounds(bounds) : this.canvas.bounds)
+        if (this.viewReady) this.renderer.update()
+    }
+
+    public updateCursor(cursor?: ICursorType): void {
+        const i = this.interaction
+        if (i) cursor ? i.setCursor(cursor) : i.updateCursor()
+    }
+
+    public updateLazyBounds(): void {
+        this.lazyBounds = this.canvas.bounds.clone().spread(this.config.lazySpeard)
+    }
+
+    protected __doResize(size: IScreenSizeData): void {
+        const { canvas } = this
+        if (!canvas || canvas.isSameSize(size)) return
+        const old = DataHelper.copyAttrs({}, this.canvas, canvasSizeAttrs) as IScreenSizeData
+        canvas.resize(size)
+        this.updateLazyBounds()
+        this.__onResize(new ResizeEvent(size, old))
+    }
+
+    protected __onResize(event: IResizeEvent): void {
+        this.emitEvent(event)
+        DataHelper.copyAttrs(this.__, event, canvasSizeAttrs)
+        if (!event.width || !event.height) debug.warn('w = 0 or h = 0')
+        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.__level = 1
+    }
+
+    protected __checkAutoLayout(config: ILeaferConfig): void {
+        if (!config.width || !config.height) {
+            this.autoLayout = new AutoBounds(config)
+            this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this))
+        }
+    }
+
+    override __setAttr(attrName: string, newValue: IValue): boolean {
+        if (this.canvas) {
+            if (canvasSizeAttrs.includes(attrName)) {
+                if (!newValue) debug.warn(attrName + ' is 0')
+                this.__changeCanvasSize(attrName, newValue as number)
+            } else if (attrName === 'fill') {
+                this.__changeFill(newValue as string)
+            } else if (attrName === 'hittable') {
+                if (!this.parent) this.canvas.hittable = newValue as boolean
+            } else if (attrName === 'zIndex') {
+                this.canvas.zIndex = newValue as any
+                setTimeout(() => this.parent && this.parent.__updateSortChildren())
+            }
+        }
+        return super.__setAttr(attrName, newValue)
+    }
+
+    override __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.forceRender()
+        }
+    }
+
+    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 __onNextRender(): void {
+        if (this.viewReady) {
+            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 waitInit(item: IFunction, bind?: IObject): void {
+        if (bind) item = item.bind(bind)
+        if (!this.__initWait) this.__initWait = [] // set() use
+        this.canvas ? item() : this.__initWait.push(item)
+    }
+
+    public waitReady(item: IFunction, bind?: IObject): void {
+        if (bind) item = item.bind(bind)
+        this.ready ? item() : this.__readyWait.push(item)
+    }
+
+    public waitViewReady(item: IFunction, bind?: IObject): void {
+        if (bind) item = item.bind(bind)
+        this.viewReady ? item() : this.__viewReadyWait.push(item)
+    }
+
+    public waitViewCompleted(item: IFunction, bind?: IObject): void {
+        if (bind) item = item.bind(bind)
+        this.__viewCompletedWait.push(item)
+        if (this.viewCompleted) {
+            this.__checkViewCompleted(false)
+        } else {
+            if (!this.running) this.start()
+        }
+    }
+
+    public nextRender(item: IFunction, bind?: IObject, off?: 'off'): void {
+        if (bind) item = item.bind(bind)
+        const list = this.__nextRenderWait
+        if (off) {
+            for (let i = 0; i < list.length; i++) {
+                if (list[i] === item) { list.splice(i, 1); break }
+            }
+        } else {
+            list.push(item)
+        }
+    }
+
+    // need view plugin
+    public zoom(_zoomType: IZoomType, _padding?: IFourNumber, _fixedScale?: boolean): IBoundsData { return undefined }
+
+    // interaction window rewrite
+    public getValidMove(moveX: number, moveY: number): IPointData { return { x: moveX, y: moveY } }
+    public getValidScale(changeScale: number): number { return changeScale }
+
+
+    public getWorldPointByClient(clientPoint: IClientPointData, updateClient?: boolean): IPointData {
+        return this.interaction && this.interaction.getLocal(clientPoint, updateClient)
+    }
+
+    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.START, () => this.updateLazyBounds())
+        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_(RenderEvent.NEXT, this.__onNextRender, this),
+            this.on_(LayoutEvent.CHECK_UPDATE, this.__checkUpdateLayout, this)
+        )
+    }
+
+    protected __removeListenEvents(): void {
+        this.off_(this.__eventIds)
+        this.__eventIds.length = 0
+    }
+
+    override destroy(sync?: boolean): void {
+        const doDestory = () => {
+            if (!this.destroyed) {
+                Leafer.list.remove(this)
+                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) {
+                        if (this.selector) this.selector.destroy()
+                        if (this.hitCanvasManager) this.hitCanvasManager.destroy()
+                        this.canvasManager.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)
+                }
+            }
+        }
+        sync ? doDestory() : setTimeout(doDestory)
+    }
+}

package/src/Line.ts

@@ -1,10 +1,11 @@
 import { IPointData, INumber } from '@leafer/interface'
-import { PathBounds, PathCommandDataHelper, PointHelper, boundsType, pathType, affectStrokeBoundsType, dataProcessor, registerUI, PathScaler } from '@leafer/core'
+import { PathBounds, PathCommandDataHelper, PointHelper, boundsType, pathType, affectStrokeBoundsType, dataProcessor, registerUI, getPointData } from '@leafer/core'
 
 import { ILine, ILineData, ILineInputData, IStrokeAlign } from '@leafer-ui/interface'
 import { LineData } from '@leafer-ui/data'
 
 import { UI } from './UI'
+import { PathArrow } from '@leafer-ui/external'
 
 
 const { moveTo, lineTo, drawPoints } = PathCommandDataHelper
@@ -13,7 +14,7 @@ const { toBounds } = PathBounds
 
 
 @registerUI()
-export class Line extends UI implements ILine {
+export class Line extends UI implements ILine { // tip: rewrited Polygon
 
     public get __tag() { return 'Line' }
 
@@ -21,20 +22,23 @@ export class Line extends UI implements ILine {
     declare public __: ILineData
 
     @affectStrokeBoundsType('center')
-    declare public strokeAlign: IStrokeAlign
+    declare public strokeAlign?: IStrokeAlign
 
     @boundsType(0)
-    declare public height: INumber
+    declare public height?: INumber
 
     @pathType()
-    public points: number[]
+    public points?: number[]
 
     @pathType(0)
-    public curve: boolean | number
+    public curve?: boolean | number
+
+    @pathType(false)
+    declare public closed?: boolean
 
     public get toPoint(): IPointData {
         const { width, rotation } = this.__
-        const to: IPointData = { x: 0, y: 0 }
+        const to: IPointData = getPointData()
 
         if (width) to.x = width
         if (rotation) rotate(to, rotation)
@@ -55,11 +59,12 @@ export class Line extends UI implements ILine {
 
     public __updatePath(): void {
 
-        const path: number[] = this.__.path = []
+        const data = this.__
+        const path: number[] = data.path = []
 
-        if (this.__.points) {
+        if (data.points) {
 
-            drawPoints(path, this.__.points, false)
+            drawPoints(path, data.points, false, data.closed)
 
         } else {
 
@@ -70,8 +75,10 @@ export class Line extends UI implements ILine {
     }
 
     public __updateRenderPath(): void {
-        if (this.__.points && this.__.curve) {
-            drawPoints(this.__.__pathForRender = [], this.__.points, this.__.curve, this.__tag !== 'Line')
+        const data = this.__
+        if (!this.pathInputed && data.points && data.curve) {
+            drawPoints(data.__pathForRender = [], data.points, data.curve, data.closed)
+            if (data.__useArrow) PathArrow.addArrows(this, false)
         } else {
             super.__updateRenderPath()
         }
@@ -85,22 +92,4 @@ export class Line extends UI implements ILine {
         }
     }
 
-    public __scaleResize(scaleX: number, scaleY: number): void {
-        if (this.points) {
-            PathScaler.scalePoints(this.__.points, scaleX, scaleY)
-            this.points = this.__.points
-        } else {
-
-            if (this.__tag === 'Line') {
-                const point = this.toPoint
-                point.x *= scaleX
-                point.y *= scaleY
-                this.toPoint = point
-            } else {
-                // Polygon ...
-                super.__scaleResize(scaleX, scaleY)
-            }
-        }
-    }
-
 }

package/src/Path.ts

@@ -1,14 +1,11 @@
-import { IPathCommandData, IWindingRule } from '@leafer/interface'
-import { PathBounds, dataProcessor, pathType, affectStrokeBoundsType, registerUI, PathScaler } from '@leafer/core'
+import { dataProcessor, affectStrokeBoundsType, registerUI } from '@leafer/core'
 
-import { IPath, IPathData, IPathInputData, IPathString, IStrokeAlign } from '@leafer-ui/interface'
+import { IPath, IPathData, IPathInputData, IStrokeAlign } from '@leafer-ui/interface'
 import { PathData } from '@leafer-ui/data'
 
 import { UI } from './UI'
 
 
-const { toBounds } = PathBounds
-
 @registerUI()
 export class Path extends UI implements IPath {
 
@@ -17,26 +14,12 @@ export class Path extends UI implements IPath {
     @dataProcessor(PathData)
     declare public __: IPathData
 
-    @pathType()
-    public path: IPathCommandData | IPathString
-
-    @pathType()
-    public windingRule: IWindingRule
-
     @affectStrokeBoundsType('center')
-    declare public strokeAlign: IStrokeAlign
+    declare public strokeAlign?: IStrokeAlign
 
     constructor(data?: IPathInputData) {
         super(data)
-    }
-
-    public __scaleResize(scaleX: number, scaleY: number): void {
-        PathScaler.scale(this.__.path, scaleX, scaleY)
-        this.path = this.__.path
-    }
-
-    public __updateBoxBounds(): void {
-        toBounds(this.__.path, this.__layout.boxBounds)
+        this.__.__pathInputed = 2
     }
 
 }

package/src/Pen.ts

@@ -1,4 +1,4 @@
-import { PathCreator, dataProcessor, registerUI, useModule } from '@leafer/core'
+import { PathCreator, dataProcessor, defineKey, registerUI, useModule } from '@leafer/core'
 
 import { IPenData, IPenInputData, IPathInputData, IPathCommandData, IPath, IPen } from '@leafer-ui/interface'
 import { PenData } from '@leafer-ui/data'
@@ -7,7 +7,7 @@ import { Group } from './Group'
 import { Path } from './Path'
 
 
-@useModule(PathCreator, ['beginPath'])
+@useModule(PathCreator, ['set', 'beginPath', 'path'])
 @registerUI()
 export class Pen extends Group implements IPen {
 
@@ -18,7 +18,11 @@ export class Pen extends Group implements IPen {
 
     public pathElement: IPath
     public pathStyle: IPathInputData
-    public path: IPathCommandData
+
+    @penPathType()
+    declare public path: IPathCommandData // use __path, readonly
+
+    public __path: IPathCommandData
 
     constructor(data?: IPenInputData) {
         super(data)
@@ -27,13 +31,13 @@ export class Pen extends Group implements IPen {
     public setStyle(data: IPathInputData): Pen {
         const path = this.pathElement = new Path(data)
         this.pathStyle = data
-        this.path = path.path as IPathCommandData || (path.path = [])
+        this.__path = path.path as IPathCommandData || (path.path = [])
         this.add(path)
         return this
     }
 
     public beginPath(): Pen {
-        this.path.length = 0
+        this.__path.length = 0
         this.paint()
         return this
     }
@@ -72,13 +76,19 @@ export class Pen extends Group implements IPen {
 
     public drawPoints(_points: number[], _curve?: boolean | number, _close?: boolean): Pen { return this }
 
+    public clearPath(): Pen { return this }
 
     public paint(): void {
         this.pathElement.forceUpdate('path')
     }
 
-    public clear(): void {
-        this.removeAll(true)
-    }
 
+}
+
+function penPathType() {
+    return (target: IPen, key: string) => {
+        defineKey(target, key, {
+            get() { return this.__path }
+        })
+    }
 }

package/src/Polygon.ts

@@ -22,13 +22,13 @@ export class Polygon extends UI implements IPolygon {
     declare public __: IPolygonData
 
     @pathType(3)
-    sides: INumber
+    public sides?: INumber
 
     @pathType()
-    points: number[]
+    public points?: number[]
 
     @pathType(0)
-    curve: boolean | number
+    public curve?: boolean | number
 
     constructor(data?: IPolygonInputData) {
         super(data)
@@ -64,7 +64,4 @@ export class Polygon extends UI implements IPolygon {
     @rewrite(line.__updateBoxBounds)
     public __updateBoxBounds(): void { }
 
-    @rewrite(line.__scaleResize)
-    public __scaleResize(_scaleX: number, _scaleY: number): void { }
-
 }