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

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'
@@ -17,13 +17,13 @@ export class Star extends UI implements IStar {
     public get __tag() { return 'Star' }
 
     @dataProcessor(StarData)
-    public __: IStarData
+    declare public __: IStarData
 
     @pathType(5)
-    public points: __Number
+    public corners: INumber
 
     @pathType(0.382)
-    public innerRadius: __Number
+    public innerRadius: INumber
 
     constructor(data?: IStarInputData) {
         super(data)
@@ -31,14 +31,14 @@ export class Star extends UI implements IStar {
 
     public __updatePath() {
 
-        const { width, height, points, innerRadius } = this.__
+        const { width, height, corners, innerRadius } = this.__
         const rx = width / 2, ry = height / 2
 
         const path: number[] = this.__.path = []
         moveTo(path, rx, 0)
 
-        for (let i = 1; i < points * 2; i++) {
-            lineTo(path, rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin((i * PI) / points), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos((i * PI) / points))
+        for (let i = 1; i < corners * 2; i++) {
+            lineTo(path, rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin((i * PI) / corners), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos((i * PI) / corners))
         }
 
         closePath(path)

package/src/Text.ts

@@ -1,14 +1,15 @@
-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/text'
+
+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 {
@@ -16,35 +17,41 @@ export class Text extends UI implements IText {
     public get __tag() { return 'Text' }
 
     @dataProcessor(TextData)
-    public __: ITextData
+    declare public __: ITextData
 
     // size
     @boundsType(0)
-    public width: __Number
+    declare public width: INumber
 
     @boundsType(0)
-    public height: __Number
+    declare public height: INumber
 
     @boundsType(0)
     public padding: number | number[]
 
+    @surfaceType('#000000')
+    declare public fill: IFill
+
     @affectStrokeBoundsType('outside')
-    public strokeAlign: IStrokeAlign
+    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
@@ -53,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
@@ -70,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
     }
 
@@ -84,11 +94,17 @@ export class Text extends UI implements IText {
 
     public __drawHitPath(canvas: ILeaferCanvas): void {
         const { __lineHeight, __baseLine, __textDrawData: data } = this.__
+
         canvas.beginPath()
-        data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight))
+
+        if (this.__.__letterSpacing < 0) {
+            this.__drawPathByData(canvas)
+        } else {
+            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight))
+        }
     }
 
-    public __drawPathByData(drawer: IPathDrawer, _data: IPathCommandData): void {
+    public __drawPathByData(drawer: IPathDrawer, _data?: IPathCommandData): void {
         const { x, y, width, height } = this.__layout.boxBounds
         drawer.rect(x, y, width, height)
     }
@@ -107,14 +123,19 @@ export class Text extends UI implements IText {
 
         const data = this.__
         const layout = this.__layout
-        const { width, height, 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.__autoBounds
 
         this.__updateTextDrawData()
 
@@ -123,19 +144,35 @@ export class Text extends UI implements IText {
 
         if (data.__lineHeight < fontSize) spread(bounds, fontSize / 2)
 
-        if (width && height) {
-            super.__updateBoxBounds()
+        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 {
-            b.x = width ? 0 : bounds.x
-            b.y = height ? 0 : bounds.y
-            b.width = width ? width : bounds.width
-            b.height = height ? height : bounds.height
+            super.__updateBoxBounds()
         }
 
         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
         }
 
     }
@@ -147,7 +184,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,46 @@
-import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, __Number, __Boolean, __String, IPathString, IExportFileType } 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 } from '@leafer/core'
+import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, INumber, IBoolean, IString, IPathString, IExportFileType, IPointData, ICursorType, IMaskType, 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, autoLayoutType, PathCreator } from '@leafer/core'
 
-import { IUI, IShadowEffect, IBlurEffect, IPaint, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IPaintString, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUITagInputData, IUIInputData, IExportOptions, IExportResult } from '@leafer-ui/interface'
+import { IUI, IShadowEffect, IBlurEffect, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUIInputData, IExportOptions, IExportResult, IFill, IStroke, IArrowType, IFindUIMethod, IEditSize, ILeafer } from '@leafer-ui/interface'
 import { effectType } 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 } from '@leafer-ui/external'
 
 
 @useModule(UIBounds)
-@useModule(UIHit)
 @useModule(UIRender)
 @rewriteAble()
 export class UI extends Leaf implements IUI {
 
     @dataProcessor(UIData)
-    public __: IUIData
+    declare public __: IUIData
 
-    public parent?: IGroup
+    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
+
+    public isFrame?: boolean
+
+    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,63 +48,79 @@ 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
+    @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
+    public x: INumber
 
     @positionType(0)
-    public y: __Number
+    public y: INumber
 
     // size
     @boundsType(100)
-    public width: __Number
+    public width: INumber
 
     @boundsType(100)
-    public height: __Number
+    public height: INumber
 
     // scale
     @scaleType(1)
-    public scaleX: __Number
+    public scaleX: INumber
 
     @scaleType(1)
-    public scaleY: __Number
+    public scaleY: INumber
 
     // rotate
     @rotationType(0)
-    public rotation: __Number
+    public rotation: INumber
 
     // skew
     @rotationType(0)
-    public skewX: __Number
+    public skewX: INumber
 
     @rotationType(0)
-    public skewY: __Number
+    public skewY: INumber
+
+
+    @autoLayoutType()
+    public around: IAround
 
 
     @dataType(false)
-    public draggable: __Boolean
+    public draggable: IBoolean
+
+
+    @dataType(false)
+    public editable: IBoolean
+
+    @dataType('size')
+    public editSize?: IEditSize
+
 
     // hit
     @hitType(true)
-    public hittable: __Boolean
+    public hittable: IBoolean
 
     @hitType('path')
     public hitFill: IHitType
@@ -103,11 +128,20 @@ 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: INumber
+
+    @cursorType('')
+    public cursor: ICursorType | ICursorType[]
 
     // ---
 
@@ -115,18 +149,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
@@ -135,22 +172,34 @@ 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
+
+    // load 
+
+    @dataType(false)
+    public lazy: IBoolean  // load image / compute paint
+
+    // arrow
+
+    @strokeType('none')
+    public startArrow: IArrowType
 
+    @strokeType('none')
+    public endArrow: IArrowType
 
     // corner
 
-    @pathType()
+    @pathType(0)
     public cornerRadius: number | number[] | ICornerRadiusString
 
     @pathType()
-    public cornerSmoothing: __Number
+    public cornerSmoothing: INumber
 
     // effect
 
@@ -161,13 +210,28 @@ 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
+
+
+    public set scale(value: INumber | IPointData) {
+        if (typeof value === 'number') {
+            this.scaleX = this.scaleY = value
+        } else {
+            this.scaleX = value.x
+            this.scaleY = value.y
+        }
+    }
+
+    public get scale(): INumber | IPointData {
+        const { scaleX, scaleY } = this
+        return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX
+    }
 
 
     constructor(data?: IUIInputData) {
@@ -175,37 +239,60 @@ export class UI extends Leaf implements IUI {
     }
 
 
-    public set(data: IUITagInputData): void {
+    // data
+
+    @rewrite(Leaf.prototype.reset)
+    public reset(_data?: IUIInputData): void { }
+
+
+    public set(data: IUIInputData): void {
         Object.assign(this, data)
     }
 
-    public get(): IUITagInputData {
+    public get(): IUIInputData {
         return this.__.__getInputData()
     }
 
+    public createProxyData(): IUIInputData { return undefined }
+
+
+    // hit rewrite
+
+    public find(_condition: number | string | IFindUIMethod, _options?: any): IUI[] { return undefined }
 
-    public getPath(curve?: boolean): IPathCommandData {
-        const path = this.__.path
-        if (!path) return []
+    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) {
+            path = []
+            const { width, height } = this.boxBounds
+            if (width || height) this.__drawPathByBox(new PathCreator(path))
+        }
         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.computeFill(this)
-            if (stroke) Paint.computeStroke(this)
+            const data = this.__
+            data.__needComputePaint = true
+            if (data.lazy && this.leafer && !this.leafer.canvas.bounds.hit(this.__world)) return
+            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
         }
     }
@@ -223,12 +310,34 @@ export class UI extends Leaf implements IUI {
     @rewrite(PathDrawer.drawPathByData)
     public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
 
+    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)
     }
 
-    static one(data: IUITagInputData, x?: number, y?: number, width?: number, height?: number): IUI {
+    public clone(): IUI {
+        return UI.one(this.toJSON())
+    }
+
+    static one(data: IUIInputData, x?: number, y?: number, width?: number, height?: number): IUI {
         return UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height) as IUI
     }
 
+
+    public destroy(): void {
+        this.fill = this.stroke = null
+        super.destroy()
+    }
+
 }

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'