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

package/src/Leafer.ts

@@ -0,0 +1,417 @@
+import { ILeaferCanvas, IRenderer, ILayouter, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IAutoBounds, IScreenSizeData, IResizeEvent, ILeaf, IEventListenerId, ITimer, IValue, IObject, IControl, IPointData, ILeaferType, ICursorType, IBoundsData } from '@leafer/interface'
+import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, ImageManager, DataHelper, Creator, Run, Debug, RenderEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, WaitHelper, WatchEvent, Bounds } from '@leafer/core'
+
+import { ILeaferInputData, ILeaferData, IFunction, IUIInputData, ILeafer, IGroup, 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 {
+
+    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 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 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,
+            holdMiddleKey: 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
+
+        this.initType(config.type) // LeaferType
+
+        // 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.interaction = Creator.interaction(this, 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(this.canvas)
+
+        this.__listenEvents()
+
+        if (start) this.__startTimer = setTimeout(this.start.bind(this))
+
+        this.onInit() // can rewrite init event
+    }
+
+    public onInit(): void { }
+
+    public initType(_type: ILeaferType): void { } // rewrite in @leafer-ui/type
+
+    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.forceRender()
+    }
+
+    public forceRender(bounds?: IBoundsData): void {
+        this.renderer.addBlock(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()
+    }
+
+    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 __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 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, off?: 'off'): void {
+        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)
+        }
+    }
+
+    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_(RenderEvent.NEXT, this.__onNextRender, 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) {
+                        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)
+                }
+            }
+        })
+
+    }
+}

package/src/Line.ts

@@ -1,5 +1,5 @@
-import { IPointData, ITwoPointBoundsData, __Number } from '@leafer/interface'
-import { PathCommandDataHelper, PointHelper, TwoPointBoundsHelper, boundsType, affectStrokeBoundsType, dataProcessor, registerUI } from '@leafer/core'
+import { IPointData, INumber } from '@leafer/interface'
+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'
@@ -7,11 +7,9 @@ import { LineData } from '@leafer-ui/data'
 import { UI } from './UI'
 
 
-const { moveTo, lineTo } = PathCommandDataHelper
+const { moveTo, lineTo, drawPoints } = PathCommandDataHelper
 const { rotate, getAngle, getDistance, defaultPoint } = PointHelper
-const { setPoint, addPoint, toBounds } = TwoPointBoundsHelper
-
-const pointBounds = {} as ITwoPointBoundsData
+const { toBounds } = PathBounds
 
 
 @registerUI()
@@ -20,25 +18,26 @@ export class Line extends UI implements ILine {
     public get __tag() { return 'Line' }
 
     @dataProcessor(LineData)
-    public __: ILineData
-
-    @boundsType()
-    public rotation: __Number
+    declare public __: ILineData
 
     @affectStrokeBoundsType('center')
-    public strokeAlign: IStrokeAlign
+    declare public strokeAlign: IStrokeAlign
 
-    protected __toPoint: IPointData
+    @boundsType(0)
+    declare public height: INumber
 
-    public get toPoint(): IPointData {
-        if (this.__toPoint && !this.__layout.boxChanged) return this.__toPoint
+    @pathType()
+    public points: number[]
 
+    @pathType(0)
+    public curve: boolean | number
+
+    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)
-        this.__toPoint = to
 
         return to
     }
@@ -57,16 +56,33 @@ export class Line extends UI implements ILine {
     public __updatePath(): void {
 
         const path: number[] = this.__.path = []
-        moveTo(path, 0, 0)
 
-        const to = this.toPoint
-        lineTo(path, to.x, to.y)
+        if (this.__.points) {
+
+            drawPoints(path, this.__.points, false)
+
+        } else {
+
+            moveTo(path, 0, 0)
+            lineTo(path, this.width, 0)
+        }
+
+    }
+
+    public __updateRenderPath(): void {
+        if (this.__.points && this.__.curve) {
+            drawPoints(this.__.__pathForRender = [], this.__.points, this.__.curve, this.__tag !== 'Line')
+        } else {
+            super.__updateRenderPath()
+        }
     }
 
     public __updateBoxBounds(): void {
-        setPoint(pointBounds, 0, 0)
-        addPoint(pointBounds, this.__toPoint.x, this.__toPoint.y)
-        toBounds(pointBounds, this.__layout.boxBounds)
+        if (this.points) {
+            toBounds(this.__.__pathForRender, this.__layout.boxBounds)
+        } else {
+            super.__updateBoxBounds()
+        }
     }
 
 }

package/src/Path.ts

@@ -15,7 +15,7 @@ export class Path extends UI implements IPath {
     public get __tag() { return 'Path' }
 
     @dataProcessor(PathData)
-    public __: IPathData
+    declare public __: IPathData
 
     @pathType()
     public path: IPathCommandData | IPathString
@@ -24,7 +24,7 @@ export class Path extends UI implements IPath {
     public windingRule: IWindingRule
 
     @affectStrokeBoundsType('center')
-    public strokeAlign: IStrokeAlign
+    declare public strokeAlign: IStrokeAlign
 
     constructor(data?: IPathInputData) {
         super(data)

package/src/Pen.ts

@@ -1,6 +1,6 @@
 import { PathCreator, dataProcessor, registerUI, useModule } from '@leafer/core'
 
-import { IPenData, IPenInputData, IPathInputData, IPathCommandData, IPath } from '@leafer-ui/interface'
+import { IPenData, IPenInputData, IPathInputData, IPathCommandData, IPath, IPen } from '@leafer-ui/interface'
 import { PenData } from '@leafer-ui/data'
 
 import { Group } from './Group'
@@ -9,12 +9,12 @@ import { Path } from './Path'
 
 @useModule(PathCreator, ['beginPath'])
 @registerUI()
-export class Pen extends Group {
+export class Pen extends Group implements IPen {
 
     public get __tag() { return 'Pen' }
 
     @dataProcessor(PenData)
-    public __: IPenData
+    declare public __: IPenData
 
     public pathElement: IPath
     public pathStyle: IPathInputData
@@ -66,9 +66,11 @@ export class Pen extends Group {
 
     // moveTo, then draw
 
-    public moveToEllipse(_x: number, _y: number, _radiusX: number, _radiusY: number, _rotation?: number, _startAngle?: number, _endAngle?: number, _anticlockwise?: boolean): Pen { return this }
+    public drawEllipse(_x: number, _y: number, _radiusX: number, _radiusY: number, _rotation?: number, _startAngle?: number, _endAngle?: number, _anticlockwise?: boolean): Pen { return this }
 
-    public moveToArc(_x: number, _y: number, _radius: number, _startAngle?: number, _endAngle?: number, _anticlockwise?: boolean): Pen { return this }
+    public drawArc(_x: number, _y: number, _radius: number, _startAngle?: number, _endAngle?: number, _anticlockwise?: boolean): Pen { return this }
+
+    public drawPoints(_points: number[], _curve?: boolean | number, _close?: boolean): Pen { return this }
 
 
     public paint(): void {

package/src/Polygon.ts

@@ -1,26 +1,34 @@
-import { __Number } from '@leafer/interface'
-import { PathCommandDataHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
+import { INumber } from '@leafer/interface'
+import { PathCommandDataHelper, dataProcessor, pathType, registerUI, rewrite, rewriteAble } from '@leafer/core'
 
 import { IPolygon, IPolygonData, IPolygonInputData } from '@leafer-ui/interface'
 import { PolygonData } from '@leafer-ui/data'
 
 import { UI } from './UI'
+import { Line } from './Line'
 
 
 const { sin, cos, PI } = Math
-const { moveTo, lineTo, closePath } = PathCommandDataHelper
-
+const { moveTo, lineTo, closePath, drawPoints } = PathCommandDataHelper
+const line = Line.prototype
 
+@rewriteAble()
 @registerUI()
 export class Polygon extends UI implements IPolygon {
 
     public get __tag() { return 'Polygon' }
 
     @dataProcessor(PolygonData)
-    public __: IPolygonData
+    declare public __: IPolygonData
 
     @pathType(3)
-    sides: number
+    sides: INumber
+
+    @pathType()
+    points: number[]
+
+    @pathType(0)
+    curve: boolean | number
 
     constructor(data?: IPolygonInputData) {
         super(data)
@@ -28,17 +36,32 @@ export class Polygon extends UI implements IPolygon {
 
     public __updatePath(): void {
 
-        const { width, height, sides } = this.__
-        const rx = width / 2, ry = height / 2
-
         const path: number[] = this.__.path = []
-        moveTo(path, rx, 0)
 
-        for (let i = 1; i < sides; i++) {
-            lineTo(path, rx + rx * sin((i * 2 * PI) / sides), ry - ry * cos((i * 2 * PI) / sides))
+        if (this.__.points) {
+
+            drawPoints(path, this.__.points, false, true)
+
+        } else {
+
+            const { width, height, sides } = this.__
+            const rx = width / 2, ry = height / 2
+
+            moveTo(path, rx, 0)
+
+            for (let i = 1; i < sides; i++) {
+                lineTo(path, rx + rx * sin((i * 2 * PI) / sides), ry - ry * cos((i * 2 * PI) / sides))
+            }
+
         }
 
         closePath(path)
     }
 
+    @rewrite(line.__updateRenderPath)
+    public __updateRenderPath(): void { }
+
+    @rewrite(line.__updateBoxBounds)
+    public __updateBoxBounds(): void { }
+
 }

package/src/Rect.ts

@@ -1,5 +1,5 @@
-import { IPathDrawer, IPathCommandData, __Number } from '@leafer/interface'
-import { dataProcessor, registerUI, useModule } from '@leafer/core'
+import { IPathDrawer, IPathCommandData } from '@leafer/interface'
+import { dataProcessor, registerUI, rewrite, rewriteAble, useModule } from '@leafer/core'
 
 import { IRect, IRectInputData, IRectData } from '@leafer-ui/interface'
 import { RectData } from '@leafer-ui/data'
@@ -9,24 +9,20 @@ import { UI } from './UI'
 
 
 @useModule(RectRender)
+@rewriteAble()
 @registerUI()
 export class Rect extends UI implements IRect {
 
     public get __tag() { return 'Rect' }
 
     @dataProcessor(RectData)
-    public __: IRectData
+    declare public __: IRectData
 
     constructor(data?: IRectInputData) {
         super(data)
     }
 
-    public __drawPathByData(drawer: IPathDrawer, _data: IPathCommandData): void {
-        const { width, height, cornerRadius } = this.__
-        if (cornerRadius) {
-            drawer.roundRect(0, 0, width, height, cornerRadius)
-        } else {
-            drawer.rect(0, 0, width, height)
-        }
-    }
+    @rewrite(UI.prototype.__drawPathByBox)
+    public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
+
 }