@leafer-ui/display 1.0.0-alpha.23 → 1.0.0-alpha.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/display",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.30",
   "description": "@leafer-ui/display",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,13 +19,13 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-alpha.23",
-    "@leafer-ui/data": "1.0.0-alpha.23",
-    "@leafer-ui/display-module": "1.0.0-alpha.23",
-    "@leafer-ui/decorator": "1.0.0-alpha.23"
+    "@leafer/core": "1.0.0-alpha.30",
+    "@leafer-ui/data": "1.0.0-alpha.30",
+    "@leafer-ui/display-module": "1.0.0-alpha.30",
+    "@leafer-ui/decorator": "1.0.0-alpha.30"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.23",
-    "@leafer-ui/interface": "1.0.0-alpha.23"
+    "@leafer/interface": "1.0.0-alpha.30",
+    "@leafer-ui/interface": "1.0.0-alpha.30"
   }
 }

package/src/Box.ts

@@ -0,0 +1,105 @@
+import { ILeaferCanvas, IRenderOptions, IPathDrawer, IBoundsData, IPathCommandData, __Boolean } from '@leafer/interface'
+import { rewrite, rewriteAble, registerUI, BoundsHelper, dataProcessor, affectRenderBoundsType } from '@leafer/core'
+
+import { IBox, IBoxData, IBoxInputData, IOverflow } from '@leafer-ui/interface'
+
+import { Group } from './Group'
+import { Rect } from './Rect'
+import { BoxData } from '@leafer-ui/data'
+
+
+const rect = Rect.prototype
+const group = Group.prototype
+const bounds = {} as IBoundsData
+const { copy, add } = BoundsHelper
+
+@rewriteAble()
+@registerUI()
+export class Box extends Group implements IBox {
+
+    public get __tag() { return 'Box' }
+
+    @dataProcessor(BoxData)
+    public __: IBoxData
+
+    @affectRenderBoundsType('show')
+    public overflow: IOverflow
+
+    constructor(data?: IBoxInputData) {
+        super(data)
+        this.isBranchLeaf = true
+        this.__layout.renderBoundsChanged || this.__layout.renderBoundsChange()
+    }
+
+    @rewrite(rect.__updateStrokeBoundsSpreadWidth)
+    public __updateStrokeBoundsSpreadWidth(): number { return 0 }
+
+    @rewrite(rect.__updateRenderBoundsSpreadWidth)
+    public __updateRectRenderBoundsSpreadWidth(): number { return 0 }
+
+    public __updateRenderBoundsSpreadWidth(): number {
+        let width = this.__updateRectRenderBoundsSpreadWidth() || super.__updateRenderBoundsSpreadWidth()
+        this.__.__drawAfterFill = this.__.overflow === 'hide'
+        if (!width) width = this.__.__drawAfterFill ? 0 : 1
+        return width
+    }
+
+
+    @rewrite(rect.__updateBoxBounds)
+    public __updateBoxBounds(): void { }
+
+    @rewrite(rect.__updateStrokeBounds)
+    public __updateStrokeBounds(): void { }
+
+    public __updateRenderBounds(): void {
+        this.__updateRectRenderBounds()
+        if (!this.__.__drawAfterFill) {
+            const { renderBounds } = this.__layout
+            copy(bounds, renderBounds)
+            super.__updateRenderBounds()
+            add(renderBounds, bounds)
+        }
+    }
+
+
+    @rewrite(rect.__updateRenderBounds)
+    public __updateRectRenderBounds(): void { }
+
+    @rewrite(rect.__updateChange)
+    public __updateRectChange(): void { }
+
+    public __updateChange(): void {
+        super.__updateChange()
+        this.__updateRectChange()
+    }
+
+
+    @rewrite(rect.__drawPathByData)
+    public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
+
+
+    @rewrite(rect.__render)
+    public __renderRect(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
+
+    @rewrite(group.__render)
+    public __renderGroup(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
+
+
+    public __render(canvas: ILeaferCanvas, options: IRenderOptions): void {
+        if (this.__.__drawAfterFill) {
+            this.__renderRect(canvas, options)
+        } else {
+            this.__renderRect(canvas, options)
+            this.__renderGroup(canvas, options)
+        }
+    }
+
+    public __drawAfterFill(canvas: ILeaferCanvas, options: IRenderOptions): void {
+        canvas.save()
+        canvas.clip()
+        this.__renderGroup(canvas, options)
+        canvas.restore()
+        if (this.__.stroke) this.__drawRenderPath(canvas)
+    }
+
+}

package/src/Canvas.ts

@@ -0,0 +1,60 @@
+import { ILeaferCanvas, ILeaferCanvasConfig, __String, IRenderOptions, IPointData, ICanvasContext2D, IScreenSizeData } from '@leafer/interface'
+import { Creator, Matrix, boundsType, dataProcessor, registerUI, surfaceType } from '@leafer/core'
+
+import { ICanvas, ICanvasData, ICanvasInputData, IUI } from '@leafer-ui/interface'
+import { ImageData } from '@leafer-ui/data'
+
+import { Rect } from './Rect'
+
+
+@registerUI()
+export class Canvas extends Rect implements ICanvas {
+
+    public get __tag() { return 'Canvas' }
+
+    @dataProcessor(ImageData)
+    public __: ICanvasData
+
+    @boundsType('')
+    public pixelRatio: number
+
+    @surfaceType('true')
+    public smooth: boolean
+
+    public canvas: ILeaferCanvas
+
+    public readonly context: ICanvasContext2D
+
+    constructor(data?: ICanvasInputData) {
+        super(data)
+        this.canvas = Creator.canvas(data as ILeaferCanvasConfig)
+        this.context = this.canvas.context
+        this.__.hitType = 'all'
+        this.__.pixelRatio = this.canvas.pixelRatio
+    }
+
+    public draw(ui: IUI, offset?: IPointData, scale?: number | IPointData, rotation?: number): void {
+        ui.__layout.checkUpdate()
+        const matrix = new Matrix(ui.__world)
+        matrix.invert()
+
+        const m = new Matrix()
+        if (offset) m.translate(offset.x, offset.y)
+        if (scale) typeof scale === 'number' ? m.scale(scale) : m.scale(scale.x, scale.y)
+        if (rotation) m.rotate(rotation)
+        matrix.preMultiply(m)
+
+        ui.__render(this.canvas, { matrix })
+        this.forceUpdate('fill')
+    }
+
+    public __draw(canvas: ILeaferCanvas, _options: IRenderOptions): void {
+        canvas.drawImage(this.canvas.view as any, 0, 0)
+    }
+
+    public __updateBoxBounds(): void {
+        super.__updateBoxBounds()
+        this.canvas.resize(this.__ as IScreenSizeData)
+    }
+
+}

package/src/Ellipse.ts

@@ -1,5 +1,5 @@
 import { __Number } from '@leafer/interface'
-import { PathCreator, OneRadian, dataProcessor, pathType, registerUI } from '@leafer/core'
+import { PathCommandDataHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IEllipse, IEllipseInputData, IEllipseData } from '@leafer-ui/interface'
 import { EllipseData } from '@leafer-ui/data'
@@ -7,9 +7,7 @@ import { EllipseData } from '@leafer-ui/data'
 import { UI } from './UI'
 
 
-const { PI } = Math
-const { begin, moveTo, close, ellipse } = PathCreator
-
+const { moveTo, closePath, ellipse } = PathCommandDataHelper
 
 @registerUI()
 export class Ellipse extends UI implements IEllipse {
@@ -37,30 +35,30 @@ export class Ellipse extends UI implements IEllipse {
         const { width, height, innerRadius, startAngle, endAngle } = this.__
         const rx = width / 2, ry = height / 2
 
-        begin(this.__.path = [])
+        const path: number[] = this.__.path = []
 
         if (innerRadius) {
 
             if (startAngle || endAngle) {
-                if (innerRadius < 1) ellipse(rx, ry, rx * innerRadius, ry * innerRadius, 0, startAngle * OneRadian, endAngle * OneRadian, false)
-                ellipse(rx, ry, rx, ry, 0, endAngle * OneRadian, startAngle * OneRadian, true)
-                if (innerRadius < 1) close()
+                if (innerRadius < 1) ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius, 0, startAngle, endAngle, false)
+                ellipse(path, rx, ry, rx, ry, 0, endAngle, startAngle, true)
+                if (innerRadius < 1) closePath(path)
             } else {
                 if (innerRadius < 1) {
-                    ellipse(rx, ry, rx * innerRadius, ry * innerRadius, 0, 0, 2 * PI, false)
-                    moveTo(width, ry)
+                    ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius)
+                    moveTo(path, width, ry)
                 }
-                ellipse(rx, ry, rx, ry, 0, 0, 2 * PI, true)
+                ellipse(path, rx, ry, rx, ry, 0, 0, 360, true)
             }
 
         } else {
 
             if (startAngle || endAngle) {
-                moveTo(rx, ry)
-                ellipse(rx, ry, rx, ry, 0, startAngle * OneRadian, endAngle * OneRadian, false)
-                close()
+                moveTo(path, rx, ry)
+                ellipse(path, rx, ry, rx, ry, 0, startAngle, endAngle, false)
+                closePath(path)
             } else {
-                ellipse(rx, ry, rx, ry, 0, 0, 2 * PI, false)
+                ellipse(path, rx, ry, rx, ry)
             }
 
         }

package/src/Frame.ts

@@ -1,86 +1,25 @@
-import { ILeaferCanvas, IRenderOptions, IPathDrawer, IBoundsData, IPathCommandData, __Boolean } from '@leafer/interface'
-import { BoundsHelper, dataProcessor, boundsType, rewrite, useModule, rewriteAble, registerUI } from '@leafer/core'
+import { __Boolean } from '@leafer/interface'
+import { dataProcessor, registerUI, affectRenderBoundsType } from '@leafer/core'
 
-import { IFrame, IFrameData, IFrameInputData } from '@leafer-ui/interface'
+import { IFrame, IFrameData, IFrameInputData, IOverflow } from '@leafer-ui/interface'
 import { FrameData } from '@leafer-ui/data'
-import { FrameRender } from '@leafer-ui/display-module'
 
-import { Group } from './Group'
-import { Rect } from './Rect'
+import { Box } from './Box'
 
 
-const rect = Rect.prototype
-const group = Group.prototype
-const bounds = {} as IBoundsData
-const { copy, add } = BoundsHelper
-
-
-@useModule(FrameRender)
-@rewriteAble()
 @registerUI()
-export class Frame extends Group implements IFrame {
+export class Frame extends Box implements IFrame {
 
     public get __tag() { return 'Frame' }
 
     @dataProcessor(FrameData)
     public __: IFrameData
 
-    @boundsType(true)
-    public clip: __Boolean
+    @affectRenderBoundsType('hide')
+    public overflow: IOverflow
 
     constructor(data?: IFrameInputData) {
         super(data)
-        if (!this.fill) this.fill = '#FFFFFF'
-        this.__isBranchLeaf = true
-    }
-
-    @rewrite(rect.__drawPathByData)
-    public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
-
-    public __updateBoxBounds(): void {
-        this.__updateRectBoxBounds()
-        if (!this.__.clip) {
-            const { boxBounds } = this.__layout
-            copy(bounds, boxBounds)
-            super.__updateBoxBounds()
-            add(boxBounds, bounds)
-        }
-    }
-
-    public __updateStrokeBounds(): void {
-        this.__updateRectStrokeBounds()
-        if (!this.__.clip) {
-            const { strokeBounds: eventBounds } = this.__layout
-            copy(bounds, eventBounds)
-            super.__updateStrokeBounds()
-            add(eventBounds, bounds)
-        }
-    }
-
-    public __updateRenderBounds(): void {
-        this.__updateRectRenderBounds()
-        if (!this.__.clip) {
-            const { renderBounds } = this.__layout
-            copy(bounds, renderBounds)
-            super.__updateRenderBounds()
-            add(renderBounds, bounds)
-        }
+        if (!this.__.fill) this.__.fill = '#FFFFFF'
     }
-
-    @rewrite(rect.__updateBoxBounds)
-    public __updateRectBoxBounds(): void { }
-
-    @rewrite(rect.__updateStrokeBounds)
-    public __updateRectStrokeBounds(): void { }
-
-    @rewrite(rect.__updateRenderBounds)
-    public __updateRectRenderBounds(): void { }
-
-
-    @rewrite(rect.__render)
-    public __renderRect(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
-
-    @rewrite(group.__render)
-    public __renderGroup(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
-
 }

package/src/Group.ts

@@ -30,7 +30,7 @@ export class Group extends UI implements IGroup {
 
     constructor(data?: IGroupInputData) {
         super(data)
-        this.__isBranch = true
+        this.isBranch = true
         this.children = []
     }
 
@@ -52,20 +52,4 @@ export class Group extends UI implements IGroup {
 
     public remove(_child?: IUI): void { }
 
-    protected __removeMask(child?: IUI): void {
-        if (child) {
-            child.isMask = false
-            this.remove(child)
-        } else {
-            const { children } = this
-            for (let i = 0, len = children.length; i < len; i++) {
-                child = children[i]
-                if (child.isMask) {
-                    child.isMask = false
-                    this.remove(child)
-                    len--, i--
-                }
-            }
-        }
-    }
 }

package/src/Image.ts

@@ -31,9 +31,10 @@ export class Image extends Rect implements IImage {
         let update: boolean
 
         const { url } = this
-        const fills = this.fill as IImagePaint[]
-        if (fills) {
-            if (fills[0].url !== url) update = true
+        const fill = this.fill as IImagePaint
+
+        if (fill) {
+            if (fill.url !== url) update = true
         } else {
             if (url) update = true
         }

package/src/Line.ts

@@ -1,5 +1,5 @@
 import { IPointData, ITwoPointBoundsData, __Number } from '@leafer/interface'
-import { PathCreator, PointHelper, TwoPointBoundsHelper, boundsType, affectEventBoundsType, dataProcessor, registerUI } from '@leafer/core'
+import { PathCommandDataHelper, PointHelper, TwoPointBoundsHelper, boundsType, affectStrokeBoundsType, dataProcessor, registerUI } from '@leafer/core'
 
 import { ILine, ILineData, ILineInputData, IStrokeAlign } from '@leafer-ui/interface'
 import { LineData } from '@leafer-ui/data'
@@ -7,7 +7,7 @@ import { LineData } from '@leafer-ui/data'
 import { UI } from './UI'
 
 
-const { begin, moveTo, lineTo, end } = PathCreator
+const { moveTo, lineTo } = PathCommandDataHelper
 const { rotate, getAngle, getDistance, defaultPoint } = PointHelper
 const { setPoint, addPoint, toBounds } = TwoPointBoundsHelper
 
@@ -25,7 +25,7 @@ export class Line extends UI implements ILine {
     @boundsType()
     public rotation: __Number
 
-    @affectEventBoundsType('center')
+    @affectStrokeBoundsType('center')
     public strokeAlign: IStrokeAlign
 
     protected __toPoint: IPointData
@@ -56,12 +56,11 @@ export class Line extends UI implements ILine {
 
     public __updatePath(): void {
 
-        begin(this.__.path = [])
-        moveTo(0, 0)
+        const path: number[] = this.__.path = []
+        moveTo(path, 0, 0)
 
         const to = this.toPoint
-        lineTo(to.x, to.y)
-        end()
+        lineTo(path, to.x, to.y)
     }
 
     public __updateBoxBounds(): void {

package/src/Path.ts

@@ -1,5 +1,5 @@
-import { ILeaferCanvas, IPathCommandData, IWindingRule } from '@leafer/interface'
-import { PathHelper, dataProcessor, pathType, affectEventBoundsType, registerUI } from '@leafer/core'
+import { IPathCommandData, IWindingRule } from '@leafer/interface'
+import { PathBounds, dataProcessor, pathType, affectStrokeBoundsType, registerUI, PathConvert } from '@leafer/core'
 
 import { IPath, IPathData, IPathInputData, IPathString, IStrokeAlign } from '@leafer-ui/interface'
 import { PathData } from '@leafer-ui/data'
@@ -7,7 +7,7 @@ import { PathData } from '@leafer-ui/data'
 import { UI } from './UI'
 
 
-const { toBounds } = PathHelper
+const { toBounds } = PathBounds
 
 @registerUI()
 export class Path extends UI implements IPath {
@@ -23,16 +23,21 @@ export class Path extends UI implements IPath {
     @pathType()
     public windingRule: IWindingRule
 
-    @affectEventBoundsType('center')
+    @affectStrokeBoundsType('center')
     public strokeAlign: IStrokeAlign
 
     constructor(data?: IPathInputData) {
         super(data)
     }
 
-    public __drawRenderPath(canvas: ILeaferCanvas): void {
-        canvas.beginPath()
-        this.__drawPathByData(canvas, this.__.path)
+    public getCurvePath(): IPathCommandData {
+        return PathConvert.toCanvasData(this.__.path, true)
+    }
+
+    public getStringPath(curve?: boolean): IPathString {
+        let path = this.__.path
+        if (curve) path = PathConvert.toCanvasData([...path], true)
+        return PathConvert.stringify(path)
     }
 
     public __updateBoxBounds(): void {

package/src/Pen.ts

@@ -0,0 +1,78 @@
+import { PathCreator, dataProcessor, registerUI, useModule } from '@leafer/core'
+
+import { IPenData, IPenInputData, IPathInputData, IPathCommandData, IPath } from '@leafer-ui/interface'
+import { PenData } from '@leafer-ui/data'
+
+import { Group } from './Group'
+import { Path } from './Path'
+
+
+@useModule(PathCreator, ['beginPath'])
+@registerUI()
+export class Pen extends Group {
+
+    public get __tag() { return 'Pen' }
+
+    @dataProcessor(PenData)
+    public __: IPenData
+
+    public pathElement: IPath
+    public pathStyle: IPathInputData
+    public path: IPathCommandData
+
+    constructor(data?: IPenInputData) {
+        super(data)
+    }
+
+    public setStyle(data: IPathInputData): Pen {
+        const path = this.pathElement = new Path(data)
+        this.pathStyle = data
+        this.path = path.path as IPathCommandData || (path.path = [])
+        this.add(path)
+        return this
+    }
+
+    public beginPath(): Pen {
+        this.path.length = 0
+        this.paint()
+        return this
+    }
+
+    // svg and canvas
+
+    public moveTo(_x: number, _y: number): Pen { return this }
+
+    public lineTo(_x: number, _y: number): Pen { return this }
+
+    public bezierCurveTo(_x1: number, _y1: number, _x2: number, _y2: number, _x: number, _y: number): Pen { return this }
+
+    public quadraticCurveTo(_x1: number, _y1: number, _x: number, _y: number): Pen { return this }
+
+    public closePath(): Pen { return this }
+
+
+    // canvas
+
+    public rect(_x: number, _y: number, _width: number, _height: number): Pen { return this }
+
+    public roundRect(_x: number, _y: number, _width: number, _height: number, _cornerRadius: number | number[]): Pen { return this }
+
+    public ellipse(_x: number, _y: number, _radiusX: number, _radiusY: number, _rotation?: number, _startAngle?: number, _endAngle?: number, _anticlockwise?: boolean): Pen { return this }
+
+    public arc(_x: number, _y: number, _radius: number, _startAngle?: number, _endAngle?: number, _anticlockwise?: boolean): Pen { return this }
+
+    public arcTo(_x1: number, _y1: number, _x2: number, _y2: number, _radius: number): Pen { return this }
+
+
+    // 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 moveToArc(_x: number, _y: number, _radius: number, _startAngle?: number, _endAngle?: number, _anticlockwise?: boolean): Pen { return this }
+
+
+    public paint(): void {
+        this.pathElement.forceUpdate('path')
+    }
+
+}

package/src/Polygon.ts

@@ -1,5 +1,5 @@
 import { __Number } from '@leafer/interface'
-import { PathCreator, dataProcessor, pathType, registerUI } from '@leafer/core'
+import { PathCommandDataHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IPolygon, IPolygonData, IPolygonInputData } from '@leafer-ui/interface'
 import { PolygonData } from '@leafer-ui/data'
@@ -8,7 +8,7 @@ import { UI } from './UI'
 
 
 const { sin, cos, PI } = Math
-const { begin, moveTo, lineTo, close } = PathCreator
+const { moveTo, lineTo, closePath } = PathCommandDataHelper
 
 
 @registerUI()
@@ -31,14 +31,14 @@ export class Polygon extends UI implements IPolygon {
         const { width, height, sides } = this.__
         const rx = width / 2, ry = height / 2
 
-        begin(this.__.path = [])
-        moveTo(rx, 0)
+        const path: number[] = this.__.path = []
+        moveTo(path, rx, 0)
 
         for (let i = 1; i < sides; i++) {
-            lineTo(rx + rx * sin((i * 2 * PI) / sides), ry - ry * cos((i * 2 * PI) / sides))
+            lineTo(path, rx + rx * sin((i * 2 * PI) / sides), ry - ry * cos((i * 2 * PI) / sides))
         }
 
-        close()
+        closePath(path)
     }
 
 }

package/src/Star.ts

@@ -1,5 +1,5 @@
 import { __Number } from '@leafer/interface'
-import { PathCreator, dataProcessor, pathType, registerUI } from '@leafer/core'
+import { PathCommandDataHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IStar, IStarData, IStarInputData } from '@leafer-ui/interface'
 import { StarData } from '@leafer-ui/data'
@@ -8,7 +8,7 @@ import { UI } from './UI'
 
 
 const { sin, cos, PI } = Math
-const { begin, moveTo, lineTo, close } = PathCreator
+const { moveTo, lineTo, closePath } = PathCommandDataHelper
 
 
 @registerUI()
@@ -34,14 +34,14 @@ export class Star extends UI implements IStar {
         const { width, height, points, innerRadius } = this.__
         const rx = width / 2, ry = height / 2
 
-        begin(this.__.path = [])
-        moveTo(rx, 0)
+        const path: number[] = this.__.path = []
+        moveTo(path, rx, 0)
 
         for (let i = 1; i < points * 2; i++) {
-            lineTo(rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin((i * PI) / points), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos((i * PI) / points))
+            lineTo(path, rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin((i * PI) / points), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos((i * PI) / points))
         }
 
-        close()
+        closePath(path)
 
     }
 

package/src/Text.ts

@@ -1,13 +1,16 @@
-import { IPathDrawer, IPathCommandData, __Boolean, __Number, __String } from '@leafer/interface'
-import { boundsType, dataProcessor, registerUI, surfaceType, useModule } from '@leafer/core'
+import { ILeaferCanvas, IPathDrawer, IPathCommandData, __Boolean, __Number, __String } from '@leafer/interface'
+import { BoundsHelper, boundsType, dataProcessor, registerUI, useModule, affectStrokeBoundsType } from '@leafer/core'
 
-import { IText, IFontWeight, ITextCase, ITextDecoration, IPercent, ITextData, ITextInputData, ITextAlign, IVerticalAlign, ITextDrawData } from '@leafer-ui/interface'
-import { TextData } from '@leafer-ui/data'
+import { IText, IFontWeight, ITextCase, ITextDecoration, ITextData, ITextInputData, ITextAlign, IVerticalAlign, ITextDrawData, IOverflow, IUnitData, IStrokeAlign } from '@leafer-ui/interface'
+import { TextData, UnitConvert } from '@leafer-ui/data'
 import { TextRender } from '@leafer-ui/display-module'
 import { TextConvert } from '@leafer-ui/text'
 
 import { UI } from './UI'
 
+
+const { copyAndSpread, includes, spread } = BoundsHelper
+
 @useModule(TextRender)
 @registerUI()
 export class Text extends UI implements IText {
@@ -18,16 +21,22 @@ export class Text extends UI implements IText {
     public __: ITextData
 
     // size
-    @boundsType(undefined)
+    @boundsType(0)
     public width: __Number
 
-    @boundsType(undefined)
+    @boundsType(0)
     public height: __Number
 
+    @boundsType(0)
+    public padding: number | number[]
+
+    @affectStrokeBoundsType('outside')
+    public strokeAlign: IStrokeAlign
+
     @boundsType('')
-    public content: __String
+    public text: __String
 
-    @boundsType('arial')
+    @boundsType('L')
     public fontFamily: __String
 
     @boundsType(12)
@@ -39,36 +48,35 @@ export class Text extends UI implements IText {
     @boundsType(false)
     public italic: __Boolean
 
-    @boundsType('normal')
+    @boundsType('none')
     public textCase: ITextCase
 
     @boundsType('none')
     public textDecoration: ITextDecoration
 
-    @boundsType()
-    public letterSpacing: __Number | IPercent
+    @boundsType(0)
+    public letterSpacing: __Number | IUnitData
 
-    @boundsType(1)
-    public lineHeight: __Number | IPercent
+    @boundsType({ type: 'percent', value: 150 } as IUnitData)
+    public lineHeight: __Number | IUnitData
 
-    @boundsType()
-    public paragraphIndent: __Number
+    @boundsType(0)
+    public paraIndent: __Number
 
-    @boundsType()
-    public paragraphSpacing: __Number
+    @boundsType(0)
+    public paraSpacing: __Number
 
-    @surfaceType('left')
+    @boundsType('left')
     public textAlign: ITextAlign
 
-    @surfaceType('top')
+    @boundsType('top')
     public verticalAlign: IVerticalAlign
 
-    public get realWidth(): number { return this.textDrawData.width }
-
-    public get realHeight(): number { return this.textDrawData.height }
+    @boundsType('show')
+    public textOverflow: IOverflow | string
 
     public get textDrawData(): ITextDrawData {
-        this.__updateTextDrawData()
+        this.__layout.checkUpdate()
         return this.__.__textDrawData
     }
 
@@ -76,26 +84,68 @@ export class Text extends UI implements IText {
         super(data)
     }
 
+    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))
+    }
+
     public __drawPathByData(drawer: IPathDrawer, _data: IPathCommandData): void {
-        const { width, height } = this.__
-        drawer.rect(0, 0, width, height)
+        const { x, y, width, height } = this.__layout.boxBounds
+        drawer.rect(x, y, width, height)
     }
 
     public __updateTextDrawData(): void {
-        this.__.__textDrawData || (this.__.__textDrawData = TextConvert.getDrawData(this.__.content, this.__))
+        const data = this.__
+        data.__textDrawData = TextConvert.getDrawData(data.text, this.__)
+
     }
 
     public __updateBoxBounds(): void {
 
+        const data = this.__
+        const layout = this.__layout
+        const { width, height, lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic } = data
+
+        // compute
+
+        data.__lineHeight = UnitConvert.number(lineHeight, fontSize)
+        data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize)
+        data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * 0.7) / 2
+        data.__font = `${italic ? 'italic ' : ''}${fontWeight !== 'normal' ? fontWeight + ' ' : ''}${fontSize}px ${fontFamily}`
+
         this.__updateTextDrawData()
 
-        const { width, height, __textDrawData: data } = this.__
-        const b = this.__layout.boxBounds
+        const { bounds } = data.__textDrawData
+        const b = layout.boxBounds
+
+        if (data.__lineHeight < fontSize) spread(bounds, fontSize / 2)
+
+        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
+        }
+
+        const contentBounds = includes(b, bounds) ? b : bounds
+        if (contentBounds !== layout.contentBounds) {
+            layout.contentBounds = contentBounds
+            layout.renderBoundsChanged = true
+        }
+
+    }
+
+    public __updateRenderBoundsSpreadWidth(): number {
+        let width = super.__updateRenderBoundsSpreadWidth()
+        if (!width) width = this.__layout.boxBounds === this.__layout.contentBounds ? 0 : 1
+        return width
+    }
 
-        b.x = width ? 0 : data.x || 0
-        b.y = height ? 0 : data.y || 0
-        b.width = width ? Math.max(width, data.width) : data.width
-        b.height = height ? Math.max(height, data.height) : data.height
+    public __updateRenderBounds(): void {
+        copyAndSpread(this.__layout.renderBounds, this.__layout.contentBounds, this.__layout.renderBoundsSpreadWidth)
     }
 
 }

package/src/UI.ts

@@ -1,5 +1,5 @@
 import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, __Number, __Boolean, __String } from '@leafer/interface'
-import { Leaf, PathHelper, affectEventBoundsType, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, maskType, dataProcessor, useModule, rewrite, rewriteAble, UICreator } from '@leafer/core'
+import { Leaf, PathDrawer, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, maskType, dataProcessor, useModule, rewrite, rewriteAble, UICreator, PathCorner, hitType, strokeType } from '@leafer/core'
 
 import { IUI, IShadowEffect, IBlurEffect, IPaint, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IPaintString, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUITagInputData, IUIInputData } from '@leafer-ui/interface'
 import { effectType } from '@leafer-ui/decorator'
@@ -16,7 +16,6 @@ import { Paint } from '@leafer-ui/external'
 @rewriteAble()
 export class UI extends Leaf implements IUI {
 
-
     @dataProcessor(UIData)
     public __: IUIData
 
@@ -94,15 +93,21 @@ export class UI extends Leaf implements IUI {
     public draggable: __Boolean
 
     // hit
-    @dataType(true)
+    @hitType(true)
     public hittable: __Boolean
 
-    @dataType('visible')
-    public hitType: IHitType
+    @hitType('visible')
+    public hitFill: IHitType
+
+    @strokeType('visible')
+    public hitStroke: IHitType
 
-    @dataType(true)
+    @hitType(true)
     public hitChildren: __Boolean
 
+    @hitType(true)
+    public hitSelf: __Boolean
+
     // ---
 
 
@@ -113,28 +118,28 @@ export class UI extends Leaf implements IUI {
 
     // stroke
 
-    @affectEventBoundsType()
+    @strokeType()
     public stroke: IPaint | IPaint[] | IPaintString
 
-    @affectEventBoundsType('inside')
+    @strokeType('inside')
     public strokeAlign: IStrokeAlign
 
-    @affectEventBoundsType(1)
+    @strokeType(1)
     public strokeWidth: number | number[] | IStrokeWidthString
 
-    @surfaceType('none')
+    @strokeType('none')
     public strokeCap: IStrokeCap
 
-    @surfaceType('miter')
+    @strokeType('miter')
     public strokeJoin: IStrokeJoin
 
-    @surfaceType()
+    @strokeType()
     public dashPattern: __Number[] | IDashPatternString
 
-    @surfaceType()
+    @strokeType()
     public dashOffset: __Number
 
-    @surfaceType(10)
+    @strokeType(10)
     public miterLimit: __Number
 
 
@@ -188,7 +193,7 @@ export class UI extends Leaf implements IUI {
     public __updateRenderPath(): void {
         if (this.__.path) {
             const { __: data } = this
-            data.__pathForRender = data.cornerRadius ? PathHelper.smoothCorner(data.path, data.cornerRadius, data.cornerSmoothing) : data.path
+            data.__pathForRender = data.cornerRadius ? PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path
         }
     }
 
@@ -202,7 +207,7 @@ export class UI extends Leaf implements IUI {
         this.__drawPathByData(canvas, this.__.path)
     }
 
-    @rewrite(PathHelper.drawData)
+    @rewrite(PathDrawer.drawPathByData)
     public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
 
     static one(data: IUITagInputData, x?: number, y?: number, width?: number, height?: number): IUI {

package/src/index.ts

@@ -1,13 +1,23 @@
 export { UI } from './UI'
+
 export { Group } from './Group'
+export { Box } from './Box'
 export { Frame } from './Frame'
+
 export { Rect } from './Rect'
 export { Ellipse } from './Ellipse'
 export { Polygon } from './Polygon'
 export { Star } from './Star'
 export { Line } from './Line'
+
+export { Image } from './Image'
+export { Canvas } from './Canvas'
+
+export { Text } from './Text'
+
 export { Path } from './Path'
+export { Pen } from './Pen'
 export { Vector } from './Vector'
-export { Text } from './Text'
-export { Image } from './Image'
+
+