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

package/src/UI.ts

@@ -1,25 +1,24 @@
-import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, INumber, IBoolean, IString, IPathString, IExportFileType, IPointData, ICursorType, IAround, IFindMethod } from '@leafer/interface'
-import { Leaf, PathDrawer, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, maskType, dataProcessor, useModule, rewrite, rewriteAble, UICreator, PathCorner, hitType, strokeType, PathConvert, eraserType, cursorType, autoLayoutType } from '@leafer/core'
+import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, INumber, IBoolean, IString, IPathString, IExportFileType, IPointData, ICursorType, IMaskType, IEraserType, IValue, IWindingRule, IPathCreator, IFourNumber, IBoundsData, IFlowType, IGap, IFlowWrap, IAxis, IConstraint, IAutoBoxData, IFlowBoxType, IPointGap, IFlowAlign, IFlowAxisAlign, IFindCondition, IAutoSize, IRangeSize, IAlign, IUnitPointData, IObject } from '@leafer/interface'
+import { Leaf, PathDrawer, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, visibleType, sortType, maskType, dataProcessor, registerUI, useModule, rewrite, rewriteAble, UICreator, PathCorner, hitType, strokeType, PathConvert, eraserType, cursorType, autoLayoutType, pen, naturalBoundsType, pathInputType } from '@leafer/core'
 
-import { IUI, IShadowEffect, IBlurEffect, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUIInputData, IExportOptions, IExportResult, IFill, IStroke, IFindUIMethod, IEditSize, ILeafer } from '@leafer-ui/interface'
-import { effectType } from '@leafer-ui/decorator'
+import { IUI, IShadowEffect, IBlurEffect, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUIInputData, IExportOptions, IExportResult, IFill, IStroke, IArrowType, IFindUIMethod, ILeafer, IEditorConfig, IEditorConfigFunction, IEditToolFunction } from '@leafer-ui/interface'
+import { arrowType, effectType, stateType, zoomLayerType } from '@leafer-ui/decorator'
 
 import { UIData } from '@leafer-ui/data'
-import { UIBounds, UIHit, UIRender } from '@leafer-ui/display-module'
+import { UIBounds, UIRender } from '@leafer-ui/display-module'
 
-import { Export, Paint } from '@leafer-ui/external'
+import { Export, PathArrow } from '@leafer-ui/external'
 
 
 @useModule(UIBounds)
-@useModule(UIHit)
 @useModule(UIRender)
 @rewriteAble()
-export class UI extends Leaf implements IUI {
+export class UI extends Leaf implements IUI { // tip: rewrited Box
 
     @dataProcessor(UIData)
     declare public __: IUIData
 
-    declare public proxyData: IUIInputData // need rewrite getter
+    declare public proxyData?: IUIInputData // need rewrite getter
     declare public __proxyData?: IUIInputData
 
     public get app(): ILeafer { return this.leafer && this.leafer.app }
@@ -27,7 +26,10 @@ export class UI extends Leaf implements IUI {
     declare public leafer?: ILeafer
     declare public parent?: IGroup
 
-    public isFrame?: boolean
+    @zoomLayerType()
+    public zoomLayer: IGroup
+
+    public get isFrame(): boolean { return false }
 
     declare public children?: IUI[]
 
@@ -35,110 +37,201 @@ export class UI extends Leaf implements IUI {
 
     // id
     @dataType('')
-    public id: IString
+    public id?: IString
 
     @dataType('')
-    public name: IString
+    public name?: IString
 
     @dataType('')
-    public className: IString
+    public className?: IString
 
 
     // layer
     @surfaceType('pass-through')
-    public blendMode: IBlendMode
+    public blendMode?: IBlendMode
 
     @opacityType(1)
-    public opacity: INumber
+    public opacity?: INumber
 
-    @opacityType(true)
-    public visible: IBoolean
+    @visibleType(true)
+    public visible?: IBoolean | 0
 
-    @maskType(false)
-    public isMask: IBoolean
 
-    @eraserType(false)
-    public isEraser?: IBoolean
+    @stateType(false)
+    public selected?: IBoolean
+
+    @stateType(false)
+    public disabled?: IBoolean
+
+    @surfaceType(false)
+    public locked?: IBoolean
 
-    @dataType(false)
-    public locked: IBoolean
 
     @sortType(0)
-    public zIndex: INumber
+    public zIndex?: INumber
+
+
+    @maskType(false)
+    public mask?: IBoolean | IMaskType
+
+    @eraserType(false)
+    public eraser?: IBoolean | IEraserType
 
 
     // position
-    @positionType(0)
-    public x: INumber
+    @positionType(0, true)
+    public x?: INumber
 
-    @positionType(0)
-    public y: INumber
+    @positionType(0, true)
+    public y?: INumber
 
     // size
-    @boundsType(100)
-    public width: INumber
+    @boundsType(100, true)
+    public width?: INumber
 
-    @boundsType(100)
-    public height: INumber
+    @boundsType(100, true)
+    public height?: INumber
 
     // scale
-    @scaleType(1)
-    public scaleX: INumber
+    @scaleType(1, true)
+    public scaleX?: INumber
 
-    @scaleType(1)
-    public scaleY: INumber
+    @scaleType(1, true)
+    public scaleY?: INumber
 
     // rotate
-    @rotationType(0)
-    public rotation: INumber
+    @rotationType(0, true)
+    public rotation?: INumber
 
     // skew
-    @rotationType(0)
-    public skewX: INumber
+    @rotationType(0, true)
+    public skewX?: INumber
 
-    @rotationType(0)
-    public skewY: INumber
+    @rotationType(0, true)
+    public skewY?: INumber
 
 
+    // offset
+    @positionType(0, true)
+    public offsetX?: INumber
+
+    @positionType(0, true)
+    public offsetY?: INumber
+
+    // scroll
+    @positionType(0, true)
+    public scrollX?: INumber
+
+    @positionType(0, true)
+    public scrollY?: INumber
+
+
+    // center
     @autoLayoutType()
-    public around: IAround
+    public origin?: IAlign | IUnitPointData
 
+    @autoLayoutType()
+    public around?: IAlign | IUnitPointData
 
+
+    // image
     @dataType(false)
-    public draggable: IBoolean
+    public lazy?: IBoolean  // load image / compute paint
+
+    @naturalBoundsType(1)
+    public pixelRatio?: INumber
 
 
+    // path
+    @pathInputType()
+    public path?: IPathCommandData | IPathString
+
+    @pathType()
+    public windingRule?: IWindingRule
+
+    @pathType(true)
+    public closed?: boolean
+
+
+    // auto layout
+    @autoLayoutType(false)
+    public flow?: IFlowType
+
+    @boundsType(0)
+    public padding?: IFourNumber
+
+    @boundsType(0)
+    public gap?: IGap | IPointGap
+
+    @boundsType('top-left')
+    public flowAlign?: IFlowAlign | IFlowAxisAlign
+
+    @boundsType(false)
+    public flowWrap?: IFlowWrap
+
+    @boundsType('box')
+    public itemBox?: IFlowBoxType
+
+
+    @boundsType(true)
+    public inFlow?: IBoolean
+
+    @boundsType() // rewrite in flow
+    public autoWidth?: IAutoSize
+
+    @boundsType()  // rewrite in flow
+    public autoHeight?: IAutoSize
+
+    @boundsType()
+    public lockRatio?: IBoolean
+
+    @boundsType()
+    public autoBox?: IAutoBoxData | IConstraint
+
+
+    @boundsType()
+    public widthRange?: IRangeSize
+
+    @boundsType()
+    public heightRange?: IRangeSize
+
+
+    // drag
     @dataType(false)
-    public editable: IBoolean
+    public draggable?: IBoolean | IAxis
 
-    @dataType('size')
-    public editSize?: IEditSize
+    @dataType()
+    public dragBounds?: IBoundsData | 'parent'
+
+
+    @dataType(false)
+    public editable?: IBoolean
 
 
     // hit
     @hitType(true)
-    public hittable: IBoolean
+    public hittable?: IBoolean
 
     @hitType('path')
-    public hitFill: IHitType
+    public hitFill?: IHitType
 
     @strokeType('path')
-    public hitStroke: IHitType
+    public hitStroke?: IHitType
 
     @hitType(false)
-    public hitBox: IBoolean
+    public hitBox?: IBoolean
 
     @hitType(true)
-    public hitChildren: IBoolean
+    public hitChildren?: IBoolean
 
     @hitType(true)
-    public hitSelf: IBoolean
+    public hitSelf?: IBoolean
 
     @hitType()
-    public hitRadius: INumber
+    public hitRadius?: INumber
 
     @cursorType('')
-    public cursor: ICursorType | ICursorType[]
+    public cursor?: ICursorType | ICursorType[]
 
     // ---
 
@@ -146,59 +239,96 @@ export class UI extends Leaf implements IUI {
     // fill
 
     @surfaceType()
-    public fill: IFill
+    public fill?: IFill
 
     // stroke
 
     @strokeType()
-    public stroke: IStroke
+    public stroke?: IStroke
 
     @strokeType('inside')
-    public strokeAlign: IStrokeAlign
+    public strokeAlign?: IStrokeAlign
 
     @strokeType(1)
-    public strokeWidth: number | number[] | IStrokeWidthString
+    public strokeWidth?: IFourNumber | IStrokeWidthString
+
+    @strokeType(false)
+    public strokeWidthFixed?: IBoolean
 
     @strokeType('none')
-    public strokeCap: IStrokeCap
+    public strokeCap?: IStrokeCap
 
     @strokeType('miter')
-    public strokeJoin: IStrokeJoin
+    public strokeJoin?: IStrokeJoin
 
     @strokeType()
-    public dashPattern: INumber[] | IDashPatternString
+    public dashPattern?: INumber[] | IDashPatternString
 
     @strokeType()
-    public dashOffset: INumber
+    public dashOffset?: INumber
 
     @strokeType(10)
-    public miterLimit: INumber
+    public miterLimit?: INumber
+
 
+    // arrow
+
+    @arrowType('none')
+    public startArrow?: IArrowType
+
+    @arrowType('none')
+    public endArrow?: IArrowType
 
     // corner
 
     @pathType(0)
-    public cornerRadius: number | number[] | ICornerRadiusString
+    public cornerRadius?: IFourNumber | ICornerRadiusString
 
     @pathType()
-    public cornerSmoothing: INumber
+    public cornerSmoothing?: INumber
 
     // effect
 
     @effectType()
-    public shadow: IShadowEffect | IShadowEffect[] | IShadowString
+    public shadow?: IShadowEffect | IShadowEffect[] | IShadowString
 
     @effectType()
-    public innerShadow: IShadowEffect | IShadowEffect[] | IShadowString
+    public innerShadow?: IShadowEffect | IShadowEffect[] | IShadowString
 
     @effectType()
-    public blur: INumber | IBlurEffect
+    public blur?: INumber | IBlurEffect
 
     @effectType()
-    public backgroundBlur: INumber | IBlurEffect
+    public backgroundBlur?: INumber | IBlurEffect
 
     @effectType()
-    public grayscale: INumber | IGrayscaleEffect
+    public grayscale?: INumber | IGrayscaleEffect
+
+
+    // states
+
+    @dataType()
+    public normalStyle?: IUIInputData // auto restore hover / press / focus / selected / disabled style
+
+    @dataType()
+    public hoverStyle?: IUIInputData
+
+    @dataType()
+    public pressStyle?: IUIInputData
+
+    @dataType()
+    public focusStyle?: IUIInputData
+
+    @dataType()
+    public selectedStyle?: IUIInputData
+
+    @dataType()
+    public disabledStyle?: IUIInputData
+
+
+    // 预留给用户使用的数据对象
+    @dataType({})
+    public data: IObject
 
 
     public set scale(value: INumber | IPointData) {
@@ -215,6 +345,22 @@ export class UI extends Leaf implements IUI {
         return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX
     }
 
+    public get pen(): IPathCreator {
+        const { path } = this.__
+        pen.set(this.path = path || [])
+        if (!path) this.__drawPathByBox(pen)
+        return pen
+    }
+
+
+    // editor
+
+    public get editConfig(): IEditorConfig { return undefined }
+
+    public get editOuter(): string { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool' }
+
+    public get editInner(): string { return 'PathEditor' }
+
 
     constructor(data?: IUIInputData) {
         super(data)
@@ -231,49 +377,54 @@ export class UI extends Leaf implements IUI {
         Object.assign(this, data)
     }
 
-    public get(): IUIInputData {
-        return this.__.__getInputData()
+    public get(name?: string | string[] | IUIInputData): IUIInputData | IValue {
+        return typeof name === 'string' ? this.__.__getInput(name) : this.__.__getInputData(name)
     }
 
     public createProxyData(): IUIInputData { return undefined }
 
 
-    // find
+    // hit rewrite
 
-    public find(condition: number | string | IFindUIMethod, options?: any): IUI[] {
-        return this.leafer ? this.leafer.selector.getBy(condition as IFindMethod, this, false, options) as IUI[] : []
-    }
+    public find(_condition: number | string | IFindCondition | IFindUIMethod, _options?: any): IUI[] { return undefined }
 
-    public findOne(condition: number | string | IFindUIMethod, options?: any): IUI {
-        return this.leafer ? this.leafer.selector.getBy(condition as IFindMethod, this, true, options) as IUI : null
-    }
+    public findTag(tag: string | string[]): IUI[] { return this.find({ tag }) }
+
+    public findOne(_condition: number | string | IFindCondition | IFindUIMethod, _options?: any): IUI | undefined { return undefined }
+
+    public findId(id: number | string): IUI | undefined { return this.findOne({ id }) }
 
 
     // path
 
-    public getPath(curve?: boolean): IPathCommandData {
-        const { path } = this.__
-        if (!path) return []
+    public getPath(curve?: boolean, pathForRender?: boolean): IPathCommandData {
+        this.__layout.update()
+        let path = pathForRender ? this.__.__pathForRender : this.__.path
+        if (!path) pen.set(path = []), this.__drawPathByBox(pen)
         return curve ? PathConvert.toCanvasData(path, true) : path
     }
 
-    public getPathString(curve?: boolean): IPathString {
-        return PathConvert.stringify(this.getPath(curve))
+    public getPathString(curve?: boolean, pathForRender?: boolean): IPathString {
+        return PathConvert.stringify(this.getPath(curve, pathForRender))
     }
 
 
+    public load(): void {
+        this.__.__computePaint() // 手动加载图片
+    }
+
     public __onUpdateSize(): void {
         if (this.__.__input) {
-            const { fill, stroke } = this.__.__input
-            if (fill) Paint.compute('fill', this)
-            if (stroke) Paint.compute('stroke', this)
+            const data = this.__;
+            (data.lazy && !this.__inLazyBounds && !Export.running) ? data.__needComputePaint = true : data.__computePaint()
         }
     }
 
     public __updateRenderPath(): void {
         if (this.__.path) {
-            const { __: data } = this
+            const data = this.__
             data.__pathForRender = data.cornerRadius ? PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path
+            if (data.__useArrow) PathArrow.addArrows(this, !data.cornerRadius)
         }
     }
 
@@ -287,13 +438,19 @@ export class UI extends Leaf implements IUI {
         this.__drawPathByData(canvas, this.__.path)
     }
 
-    @rewrite(PathDrawer.drawPathByData)
-    public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
+    public __drawPathByData(drawer: IPathDrawer, data: IPathCommandData): void {
+        if (data) {
+            PathDrawer.drawPathByData(drawer, data)
+        } else {
+            this.__drawPathByBox(drawer)
+        }
+    }
 
     public __drawPathByBox(drawer: IPathDrawer): void {
         const { x, y, width, height } = this.__layout.boxBounds
         if (this.__.cornerRadius) {
-            drawer.roundRect(x, y, width, height, this.__.cornerRadius)
+            const { cornerRadius } = this.__
+            drawer.roundRect(x, y, width, height, typeof cornerRadius === 'number' ? [cornerRadius] : cornerRadius) // 修复微信浏览器bug, 后续需进一步优化
         } else {
             drawer.rect(x, y, width, height)
         }
@@ -314,6 +471,23 @@ export class UI extends Leaf implements IUI {
         return UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height) as IUI
     }
 
+    static registerUI(): void {
+        registerUI()(this)
+    }
+
+    static registerData(data: IUIData): void {
+        dataProcessor(data)(this.prototype)
+    }
+
+
+    // @leafer-in/editor rewrite
+
+    static setEditConfig(_config: IEditorConfig | IEditorConfigFunction): void { }
+
+    static setEditOuter(_toolName: string | IEditToolFunction): void { }
+
+    static setEditInner(_editorName: string | IEditToolFunction): void { }
+
 
     public destroy(): void {
         this.fill = this.stroke = null

package/src/index.ts

@@ -1,5 +1,6 @@
 export { UI } from './UI'
 
+export { Leafer } from './Leafer'
 export { Group } from './Group'
 export { Box } from './Box'
 export { Frame } from './Frame'