@leafer-ui/display 1.0.0-rc.2 → 1.0.0-rc.21

package/src/Rect.ts

@@ -1,5 +1,4 @@
-import { IPathDrawer, IPathCommandData, __Number } from '@leafer/interface'
-import { dataProcessor, registerUI, useModule } from '@leafer/core'
+import { dataProcessor, registerUI, rewriteAble, useModule } from '@leafer/core'
 
 import { IRect, IRectInputData, IRectData } from '@leafer-ui/interface'
 import { RectData } from '@leafer-ui/data'
@@ -9,8 +8,9 @@ import { UI } from './UI'
 
 
 @useModule(RectRender)
+@rewriteAble()
 @registerUI()
-export class Rect extends UI implements IRect {
+export class Rect extends UI implements IRect { // tip: rewrited Box
 
     public get __tag() { return 'Rect' }
 
@@ -21,12 +21,4 @@ export class Rect extends UI implements IRect {
         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)
-        }
-    }
 }

package/src/Star.ts

@@ -1,4 +1,4 @@
-import { __Number } from '@leafer/interface'
+import { INumber } from '@leafer/interface'
 import { PathCommandDataHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IStar, IStarData, IStarInputData } from '@leafer-ui/interface'
@@ -20,10 +20,10 @@ export class Star extends UI implements IStar {
     declare public __: IStarData
 
     @pathType(5)
-    public corners: __Number
+    public corners: INumber
 
     @pathType(0.382)
-    public innerRadius: __Number
+    public innerRadius: INumber
 
     constructor(data?: IStarInputData) {
         super(data)

package/src/Text.ts

@@ -1,7 +1,7 @@
-import { ILeaferCanvas, IPathDrawer, IPathCommandData, __Boolean, __Number, __String } from '@leafer/interface'
-import { BoundsHelper, boundsType, dataProcessor, registerUI, affectStrokeBoundsType } from '@leafer/core'
+import { ILeaferCanvas, IPathDrawer, IPathCommandData, IBoolean, INumber, IString, IBoundsData } from '@leafer/interface'
+import { BoundsHelper, boundsType, surfaceType, dataProcessor, registerUI, affectStrokeBoundsType, hitType, MathHelper } from '@leafer/core'
 
-import { IText, IFontWeight, ITextCase, ITextDecoration, ITextData, ITextInputData, ITextAlign, IVerticalAlign, ITextDrawData, IOverflow, IUnitData, IStrokeAlign } from '@leafer-ui/interface'
+import { IFill, IText, IFontWeight, ITextCase, ITextDecoration, ITextData, ITextInputData, ITextAlign, IVerticalAlign, ITextDrawData, IOverflow, IUnitData, IStrokeAlign, IHitType, ITextWrap } from '@leafer-ui/interface'
 import { TextData, UnitConvert } from '@leafer-ui/data'
 
 import { TextConvert } from '@leafer-ui/external'
@@ -9,7 +9,7 @@ import { TextConvert } from '@leafer-ui/external'
 import { UI } from './UI'
 
 
-const { copyAndSpread, includes, spread } = BoundsHelper
+const { copyAndSpread, includes, spread, setList } = BoundsHelper
 
 @registerUI()
 export class Text extends UI implements IText {
@@ -21,31 +21,37 @@ export class Text extends UI implements IText {
 
     // size
     @boundsType(0)
-    declare public width: __Number
+    declare public width: INumber
 
     @boundsType(0)
-    declare public height: __Number
+    declare public height: INumber
 
     @boundsType(0)
     public padding: number | number[]
 
+    @surfaceType('#000000')
+    declare public fill: IFill
+
     @affectStrokeBoundsType('outside')
     declare public strokeAlign: IStrokeAlign
 
+    @hitType('all')
+    declare public hitFill: IHitType
+
     @boundsType('')
-    public text: __String
+    public text: IString
 
     @boundsType('L')
-    public fontFamily: __String
+    public fontFamily: IString
 
     @boundsType(12)
-    public fontSize: __Number
+    public fontSize: INumber
 
     @boundsType('normal')
     public fontWeight: IFontWeight
 
     @boundsType(false)
-    public italic: __Boolean
+    public italic: IBoolean
 
     @boundsType('none')
     public textCase: ITextCase
@@ -54,16 +60,16 @@ export class Text extends UI implements IText {
     public textDecoration: ITextDecoration
 
     @boundsType(0)
-    public letterSpacing: __Number | IUnitData
+    public letterSpacing: INumber | IUnitData
 
     @boundsType({ type: 'percent', value: 150 } as IUnitData)
-    public lineHeight: __Number | IUnitData
+    public lineHeight: INumber | IUnitData
 
     @boundsType(0)
-    public paraIndent: __Number
+    public paraIndent: INumber
 
     @boundsType(0)
-    public paraSpacing: __Number
+    public paraSpacing: INumber
 
     @boundsType('left')
     public textAlign: ITextAlign
@@ -71,11 +77,14 @@ export class Text extends UI implements IText {
     @boundsType('top')
     public verticalAlign: IVerticalAlign
 
+    @boundsType('normal')
+    public textWrap: ITextWrap
+
     @boundsType('show')
     public textOverflow: IOverflow | string
 
     public get textDrawData(): ITextDrawData {
-        this.__layout.checkUpdate()
+        this.__layout.update()
         return this.__.__textDrawData
     }
 
@@ -114,14 +123,19 @@ export class Text extends UI implements IText {
 
         const data = this.__
         const layout = this.__layout
-        const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase } = data
+        const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow, padding } = data
+
+        const autoWidth = data.__autoWidth
+        const autoHeight = data.__autoHeight
 
         // compute
 
         data.__lineHeight = UnitConvert.number(lineHeight, fontSize)
         data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize)
+        data.__padding = padding ? MathHelper.fourNumber(padding) : undefined
         data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * 0.7) / 2
         data.__font = `${italic ? 'italic ' : ''}${textCase === 'small-caps' ? 'small-caps ' : ''}${fontWeight !== 'normal' ? fontWeight + ' ' : ''}${fontSize}px ${fontFamily}`
+        data.__clipText = textOverflow !== 'show' && !data.__autoSize
 
         this.__updateTextDrawData()
 
@@ -130,23 +144,37 @@ export class Text extends UI implements IText {
 
         if (data.__lineHeight < fontSize) spread(bounds, fontSize / 2)
 
-        const width = data.__getInput('width')
-        const height = data.__getInput('height')
-
-        if (width && height) {
-            super.__updateBoxBounds()
-        } else {
-            b.x = width ? 0 : bounds.x
-            b.y = height ? 0 : bounds.y
-            b.width = width ? width : bounds.width
-            b.height = height ? height : bounds.height
+        if (autoWidth || autoHeight) {
+            b.x = autoWidth ? bounds.x : 0
+            b.y = autoHeight ? bounds.y : 0
+            b.width = autoWidth ? bounds.width : data.width
+            b.height = autoHeight ? bounds.height : data.height
+
+            if (padding) {
+                const [top, right, bottom, left] = data.__padding
+                if (autoWidth) {
+                    b.x -= left
+                    b.width += (right + left)
+                }
+                if (autoHeight) {
+                    b.y -= top
+                    b.height += (bottom + top)
+                }
+            }
             this.__updateNaturalSize()
+        } else {
+            super.__updateBoxBounds()
         }
 
+        if (italic) b.width += fontSize * 0.16
+
         const contentBounds = includes(b, bounds) ? b : bounds
         if (contentBounds !== layout.contentBounds) {
             layout.contentBounds = contentBounds
             layout.renderChanged = true
+            setList(data.__textBoxBounds = {} as IBoundsData, [b, bounds])
+        } else {
+            data.__textBoxBounds = contentBounds
         }
 
     }
@@ -158,7 +186,7 @@ export class Text extends UI implements IText {
     }
 
     public __updateRenderBounds(): void {
-        copyAndSpread(this.__layout.renderBounds, this.__layout.contentBounds, this.__layout.renderSpread)
+        copyAndSpread(this.__layout.renderBounds, this.__.__textBoxBounds, this.__layout.renderSpread)
     }
 
 }

package/src/UI.ts

@@ -1,37 +1,49 @@
-import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, __Number, __Boolean, __String, IPathString, IExportFileType, IPointData, ICursorType, IAround } 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 } from '@leafer/core'
+import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, INumber, IBoolean, IString, IPathString, IExportFileType, IPointData, ICursorType, IMaskType, IAround, IValue, IWindingRule, IPathCreator } from '@leafer/interface'
+import { Leaf, PathDrawer, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, 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, IPaint, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IPaintString, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUIInputData, IUIBaseInputData, IExportOptions, IExportResult } 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, IEditSize, ILeafer, IEditorConfig } 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
+
+    public get app(): ILeafer { return this.leafer && this.leafer.app }
+
+    declare public leafer?: ILeafer
     declare public parent?: IGroup
 
+    @zoomLayerType()
+    public zoomLayer: IGroup
+
+    public get isFrame(): boolean { return false }
+
+    declare public children?: IUI[]
+
     // ---
 
     // id
     @dataType('')
-    public id: __String
+    public id: IString
 
     @dataType('')
-    public name: __String
+    public name: IString
 
     @dataType('')
-    public className: __String
+    public className: IString
 
 
     // layer
@@ -39,67 +51,90 @@ export class UI extends Leaf implements IUI {
     public blendMode: IBlendMode
 
     @opacityType(1)
-    public opacity: __Number
+    public opacity: INumber
 
     @opacityType(true)
-    public visible: __Boolean
+    public visible: IBoolean
 
-    @maskType(false)
-    public isMask: __Boolean
 
-    @eraserType(false)
-    public isEraser?: __Boolean
+    @stateType(false)
+    public selected: IBoolean
+
+    @stateType(false)
+    public disabled: IBoolean
+
+    @dataType(false)
+    public locked: IBoolean
+
 
     @sortType(0)
-    public zIndex: __Number
+    public zIndex: INumber
 
-    @dataType()
-    public locked: __Boolean
+
+    @maskType(false)
+    public mask: IBoolean
+
+    @surfaceType('pixel')
+    public maskType: IMaskType
+
+    @eraserType(false)
+    public eraser: IBoolean
 
 
     // position
-    @positionType(0)
-    public x: __Number
+    @positionType(0, true)
+    public x: INumber
 
-    @positionType(0)
-    public y: __Number
+    @positionType(0, true)
+    public y: INumber
 
     // size
-    @boundsType(100)
-    public width: __Number
+    @boundsType(100, true)
+    public width: INumber
 
-    @boundsType(100)
-    public height: __Number
+    @boundsType(100, true)
+    public height: INumber
 
     // scale
-    @scaleType(1)
-    public scaleX: __Number
+    @scaleType(1, true)
+    public scaleX: INumber
 
-    @scaleType(1)
-    public scaleY: __Number
+    @scaleType(1, true)
+    public scaleY: INumber
 
     // rotate
-    @rotationType(0)
-    public rotation: __Number
+    @rotationType(0, true)
+    public rotation: INumber
 
     // skew
-    @rotationType(0)
-    public skewX: __Number
+    @rotationType(0, true)
+    public skewX: INumber
 
-    @rotationType(0)
-    public skewY: __Number
+    @rotationType(0, true)
+    public skewY: INumber
 
 
-    @positionType()
+    @autoLayoutType()
     public around: IAround
 
 
     @dataType(false)
-    public draggable: __Boolean
+    public draggable: IBoolean
+
+
+    @dataType(false)
+    public editable: IBoolean
+
+    @dataType('size')
+    public editSize?: IEditSize
+
+    @dataType()
+    public editorStyle: IEditorConfig
+
 
     // hit
     @hitType(true)
-    public hittable: __Boolean
+    public hittable: IBoolean
 
     @hitType('path')
     public hitFill: IHitType
@@ -107,16 +142,19 @@ export class UI extends Leaf implements IUI {
     @strokeType('path')
     public hitStroke: IHitType
 
+    @hitType(false)
+    public hitBox: IBoolean
+
     @hitType(true)
-    public hitChildren: __Boolean
+    public hitChildren: IBoolean
 
     @hitType(true)
-    public hitSelf: __Boolean
+    public hitSelf: IBoolean
 
     @hitType()
-    public hitRadius: __Number
+    public hitRadius: INumber
 
-    @cursorType('default')
+    @cursorType('')
     public cursor: ICursorType | ICursorType[]
 
     // ---
@@ -125,18 +163,21 @@ export class UI extends Leaf implements IUI {
     // fill
 
     @surfaceType()
-    public fill: IPaint | IPaint[] | IPaintString
+    public fill: IFill
 
     // stroke
 
     @strokeType()
-    public stroke: IPaint | IPaint[] | IPaintString
+    public stroke: IStroke
 
     @strokeType('inside')
     public strokeAlign: IStrokeAlign
 
     @strokeType(1)
-    public strokeWidth: number | number[] | IStrokeWidthString
+    public strokeWidth: INumber | INumber[] | IStrokeWidthString
+
+    @strokeType(false)
+    public strokeWidthFixed: IBoolean
 
     @strokeType('none')
     public strokeCap: IStrokeCap
@@ -145,22 +186,49 @@ export class UI extends Leaf implements IUI {
     public strokeJoin: IStrokeJoin
 
     @strokeType()
-    public dashPattern: __Number[] | IDashPatternString
+    public dashPattern: INumber[] | IDashPatternString
 
     @strokeType()
-    public dashOffset: __Number
+    public dashOffset: INumber
 
     @strokeType(10)
-    public miterLimit: __Number
+    public miterLimit: INumber
 
+    // image
 
-    // corner
+    @dataType(false)
+    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
+
+
+    // arrow
+
+    @arrowType('none')
+    public startArrow: IArrowType
+
+    @arrowType('none')
+    public endArrow: IArrowType
+
+    // corner
+
+    @pathType(0)
     public cornerRadius: number | number[] | ICornerRadiusString
 
     @pathType()
-    public cornerSmoothing: __Number
+    public cornerSmoothing: INumber
 
     // effect
 
@@ -171,16 +239,37 @@ export class UI extends Leaf implements IUI {
     public innerShadow: IShadowEffect | IShadowEffect[] | IShadowString
 
     @effectType()
-    public blur: __Number | IBlurEffect
+    public blur: INumber | IBlurEffect
 
     @effectType()
-    public backgroundBlur: __Number | IBlurEffect
+    public backgroundBlur: INumber | IBlurEffect
 
     @effectType()
-    public grayscale: __Number | IGrayscaleEffect
+    public grayscale: INumber | IGrayscaleEffect
+
 
+    // states
 
-    public set scale(value: __Number | IPointData) {
+    @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
+
+
+    public set scale(value: INumber | IPointData) {
         if (typeof value === 'number') {
             this.scaleX = this.scaleY = value
         } else {
@@ -189,49 +278,79 @@ export class UI extends Leaf implements IUI {
         }
     }
 
-    public get scale(): __Number | IPointData {
+    public get scale(): INumber | IPointData {
         const { scaleX, scaleY } = this
         return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX
     }
 
 
-    constructor(data?: IUIBaseInputData) {
+    public get pen(): IPathCreator {
+        pen.set(this.path = this.__.path || [])
+        return pen
+    }
+
+
+    constructor(data?: IUIInputData) {
         super(data)
     }
 
 
+    // data
+
+    @rewrite(Leaf.prototype.reset)
+    public reset(_data?: IUIInputData): void { }
+
+
     public set(data: IUIInputData): void {
         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 }
+
 
-    public getPath(curve?: boolean): IPathCommandData {
-        const path = this.__.path
-        if (!path) return []
+    // hit rewrite
+
+    public find(_condition: number | string | IFindUIMethod, _options?: any): IUI[] { return undefined }
+
+    public findOne(_condition: number | string | IFindUIMethod, _options?: any): IUI { return undefined }
+
+
+    // path
+
+    public getPath(curve?: boolean, pathForRender?: boolean): IPathCommandData {
+        this.__layout.update()
+        let path = pathForRender ? this.__.__pathForRender : this.__.path
+        if (!path) {
+            const { width, height } = this.boxBounds
+            if (width || height) {
+                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 __onUpdateSize(): void {
         if (this.__.__input) {
-            const { fill, stroke } = this.__.__input
-            if (fill) Paint.compute(this, 'fill')
-            if (stroke) Paint.compute(this, 'stroke')
+            const data = this.__;
+            (data.lazy && this.leafer && this.leafer.created && !this.leafer.lazyBounds.hit(this.__world)) ? 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)
         }
     }
 
@@ -245,8 +364,25 @@ 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)
+        } else {
+            drawer.rect(x, y, width, height)
+        }
+    }
+
+
+    // create
 
     public export(filename: IExportFileType | string, options?: IExportOptions | number | boolean): Promise<IExportResult> {
         return Export.export(this, filename, options)
@@ -260,6 +396,14 @@ 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)
+    }
+
     public destroy(): void {
         this.fill = this.stroke = null
         super.destroy()