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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/display",
-  "version": "1.0.0-alpha.21",
+  "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.21",
-    "@leafer-ui/data": "1.0.0-alpha.21",
-    "@leafer-ui/display-module": "1.0.0-alpha.21",
-    "@leafer-ui/decorator": "1.0.0-alpha.21"
+    "@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.21",
-    "@leafer-ui/interface": "1.0.0-alpha.21"
+    "@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,14 +7,13 @@ 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 {
 
+    public get __tag() { return 'Ellipse' }
+
     @dataProcessor(EllipseData)
     public __: IEllipseData
 
@@ -36,28 +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) {
-                ellipse(rx, ry, rx * (1 - innerRadius), ry * (1 - innerRadius), 0, startAngle * OneRadian, endAngle * OneRadian, false)
-                ellipse(rx, ry, rx, ry, 0, endAngle * OneRadian, startAngle * OneRadian, true)
-                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 {
-                ellipse(rx, ry, rx * (1 - innerRadius), ry * (1 - innerRadius), 0, 0, 2 * PI, false)
-                moveTo(width, ry)
-                ellipse(rx, ry, rx, ry, 0, 0, 2 * PI, true)
+                if (innerRadius < 1) {
+                    ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius)
+                    moveTo(path, width, ry)
+                }
+                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,84 +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
+        if (!this.__.fill) this.__.fill = '#FFFFFF'
     }
-
-    @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 __updateEventBounds(): void {
-        this.__updateRectEventBounds()
-        if (!this.__.clip) {
-            const { eventBounds } = this.__layout
-            copy(bounds, eventBounds)
-            super.__updateEventBounds()
-            add(eventBounds, bounds)
-        }
-    }
-
-    public __updateRenderBounds(): void {
-        this.__updateRectRenderBounds()
-        if (!this.__.clip) {
-            const { renderBounds } = this.__layout
-            copy(bounds, renderBounds)
-            super.__updateRenderBounds()
-            add(renderBounds, bounds)
-        }
-    }
-
-    @rewrite(rect.__updateBoxBounds)
-    public __updateRectBoxBounds(): void { }
-
-    @rewrite(rect.__updateEventBounds)
-    public __updateRectEventBounds(): 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

@@ -10,14 +10,27 @@ import { UI } from './UI'
 @registerUI()
 export class Group extends UI implements IGroup {
 
+    public get __tag() { return 'Group' }
+
     @dataProcessor(GroupData)
     public __: IGroupData
 
     public children: IUI[]
 
+    public set mask(child: IUI) {
+        if (this.__hasMask) this.__removeMask()
+        if (child) {
+            child.isMask = true
+            this.addAt(child, 0)
+        }
+    }
+    public get mask(): IUI {
+        return this.children.find(item => item.isMask)
+    }
+
     constructor(data?: IGroupInputData) {
         super(data)
-        this.__isBranch = true
+        this.isBranch = true
         this.children = []
     }
 

package/src/Image.ts

@@ -1,7 +1,7 @@
 import { ILeaferImage, __String } from '@leafer/interface'
-import { boundsType, dataProcessor, registerUI, Creator } from '@leafer/core'
+import { ImageEvent, boundsType, dataProcessor, registerUI } from '@leafer/core'
 
-import { IImage, IImageInputData, IImageData } from '@leafer-ui/interface'
+import { IImage, IImageInputData, IImageData, IImagePaint } from '@leafer-ui/interface'
 import { ImageData } from '@leafer-ui/data'
 
 import { Rect } from './Rect'
@@ -10,27 +10,42 @@ import { Rect } from './Rect'
 @registerUI()
 export class Image extends Rect implements IImage {
 
+    public get __tag() { return 'Image' }
+
     @dataProcessor(ImageData)
     public __: IImageData
 
     @boundsType('')
     public url: __String
 
-    @boundsType('')
-    public thumb: __String
+    public get ready(): boolean { return this.image?.ready }
 
-    public __image: ILeaferImage
+    public image: ILeaferImage
 
     constructor(data?: IImageInputData) {
         super(data)
     }
 
     public __updateBoxBounds(): void {
-        this.__image = Creator.image(this)
-    }
 
+        let update: boolean
+
+        const { url } = this
+        const fill = this.fill as IImagePaint
+
+        if (fill) {
+            if (fill.url !== url) update = true
+        } else {
+            if (url) update = true
+        }
+
+        if (update) {
+            if (this.image) this.image = null
+            this.fill = { type: 'image', mode: 'strench', url }
+            this.once(ImageEvent.LOADED, (e) => this.image = e.image)
+        }
 
-    public drawFill(): void {
+        super.__updateBoxBounds()
 
     }
 

package/src/Line.ts

@@ -1,13 +1,13 @@
 import { IPointData, ITwoPointBoundsData, __Number } from '@leafer/interface'
-import { PathCreator, PointHelper, TwoPointBoundsHelper, boundsType, dataProcessor, registerUI } from '@leafer/core'
+import { PathCommandDataHelper, PointHelper, TwoPointBoundsHelper, boundsType, affectStrokeBoundsType, dataProcessor, registerUI } from '@leafer/core'
 
-import { ILine, ILineData, ILineInputData } from '@leafer-ui/interface'
+import { ILine, ILineData, ILineInputData, IStrokeAlign } from '@leafer-ui/interface'
 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
 
@@ -17,12 +17,17 @@ const pointBounds = {} as ITwoPointBoundsData
 @registerUI()
 export class Line extends UI implements ILine {
 
+    public get __tag() { return 'Line' }
+
     @dataProcessor(LineData)
     public __: ILineData
 
     @boundsType()
     public rotation: __Number
 
+    @affectStrokeBoundsType('center')
+    public strokeAlign: IStrokeAlign
+
     protected __toPoint: IPointData
 
     public get toPoint(): IPointData {
@@ -51,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,21 +1,19 @@
-import { ITwoPointBoundsData, ILeaferCanvas, IPathCommandData, IWindingRule } from '@leafer/interface'
-import { PathHelper, TwoPointBoundsHelper, dataProcessor, pathType, 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 } from '@leafer-ui/interface'
+import { IPath, IPathData, IPathInputData, IPathString, IStrokeAlign } from '@leafer-ui/interface'
 import { PathData } from '@leafer-ui/data'
 
 import { UI } from './UI'
 
 
-const { toTwoPointBounds } = PathHelper
-const { toBounds } = TwoPointBoundsHelper
-
-const pointBounds = {} as ITwoPointBoundsData
-
+const { toBounds } = PathBounds
 
 @registerUI()
 export class Path extends UI implements IPath {
 
+    public get __tag() { return 'Path' }
+
     @dataProcessor(PathData)
     public __: IPathData
 
@@ -25,18 +23,25 @@ export class Path extends UI implements IPath {
     @pathType()
     public windingRule: IWindingRule
 
+    @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 {
-        toTwoPointBounds(this.__.path, pointBounds)
-        toBounds(pointBounds, this.__layout.boxBounds)
+        toBounds(this.__.path, this.__layout.boxBounds)
     }
 
 }

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,12 +8,14 @@ import { UI } from './UI'
 
 
 const { sin, cos, PI } = Math
-const { begin, moveTo, lineTo, close } = PathCreator
+const { moveTo, lineTo, closePath } = PathCommandDataHelper
 
 
 @registerUI()
 export class Polygon extends UI implements IPolygon {
 
+    public get __tag() { return 'Polygon' }
+
     @dataProcessor(PolygonData)
     public __: IPolygonData
 
@@ -29,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/Rect.ts

@@ -12,6 +12,8 @@ import { UI } from './UI'
 @registerUI()
 export class Rect extends UI implements IRect {
 
+    public get __tag() { return 'Rect' }
+
     @dataProcessor(RectData)
     public __: IRectData
 

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,19 +8,21 @@ import { UI } from './UI'
 
 
 const { sin, cos, PI } = Math
-const { begin, moveTo, lineTo, close } = PathCreator
+const { moveTo, lineTo, closePath } = PathCommandDataHelper
 
 
 @registerUI()
 export class Star extends UI implements IStar {
 
+    public get __tag() { return 'Star' }
+
     @dataProcessor(StarData)
     public __: IStarData
 
     @pathType(5)
     public points: __Number
 
-    @pathType(0.38)
+    @pathType(0.382)
     public innerRadius: __Number
 
     constructor(data?: IStarInputData) {
@@ -32,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,24 +1,42 @@
-import { IPathDrawer, IPathCommandData, __Boolean, __Number, __String } from '@leafer/interface'
-import { Platform, boundsType, dataProcessor, registerUI, 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 } 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 {
 
+    public get __tag() { return 'Text' }
+
     @dataProcessor(TextData)
     public __: ITextData
 
+    // size
+    @boundsType(0)
+    public width: __Number
+
+    @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)
@@ -30,45 +48,104 @@ export class Text extends UI implements IText {
     @boundsType(false)
     public italic: __Boolean
 
-    @boundsType('normal')
+    @boundsType('none')
     public textCase: ITextCase
 
-    @boundsType('normal')
+    @boundsType('none')
     public textDecoration: ITextDecoration
 
-    @boundsType()
-    public letterSpacing: __Number | IPercent
+    @boundsType(0)
+    public letterSpacing: __Number | IUnitData
 
-    @boundsType()
-    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
+
+    @boundsType('left')
+    public textAlign: ITextAlign
+
+    @boundsType('top')
+    public verticalAlign: IVerticalAlign
+
+    @boundsType('show')
+    public textOverflow: IOverflow | string
+
+    public get textDrawData(): ITextDrawData {
+        this.__layout.checkUpdate()
+        return this.__.__textDrawData
+    }
 
     constructor(data?: ITextInputData) {
         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 {
+        const data = this.__
+        data.__textDrawData = TextConvert.getDrawData(data.text, this.__)
+
     }
 
     public __updateBoxBounds(): void {
-        const { fontFamily, fontSize, fontWeight, italic, textCase, lineHeight } = this.__
-        const b = this.__layout.boxBounds
 
-        this.__.__font = Platform.canvas.font = `${italic ? 'italic' : ''} ${textCase === 'small-caps' ? 'small-caps' : 'normal'} ${fontWeight ? fontWeight : 'normal'} ${fontSize}px/${lineHeight ? lineHeight : fontSize}px ${fontFamily}`
-        const width = Platform.canvas.measureText(this.content).width
-        const height = fontSize
+        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 { 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 = 0
-        b.y = -fontSize * 0.75
-        b.width = width
-        b.height = height
+    public __updateRenderBounds(): void {
+        copyAndSpread(this.__layout.renderBounds, this.__layout.contentBounds, this.__layout.renderBoundsSpreadWidth)
     }
 
 }

package/src/UI.ts

@@ -1,12 +1,14 @@
-import { ILeaferCanvas, IPathDrawer, IPathCommandData, IMatrixData, IBoundsData, IHitType, __Number, __Boolean, __String } from '@leafer/interface'
-import { Leaf, PathHelper, affectEventBoundsType, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, dataProcessor, useModule, rewrite, rewriteAble } from '@leafer/core'
+import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, __Number, __Boolean, __String } from '@leafer/interface'
+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 } from '@leafer-ui/interface'
+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'
 
 import { UIData } from '@leafer-ui/data'
 import { UIBounds, UIHit, UIRender } from '@leafer-ui/display-module'
 
+import { Paint } from '@leafer-ui/external'
+
 
 @useModule(UIBounds)
 @useModule(UIHit)
@@ -14,11 +16,9 @@ import { UIBounds, UIHit, UIRender } from '@leafer-ui/display-module'
 @rewriteAble()
 export class UI extends Leaf implements IUI {
 
-
     @dataProcessor(UIData)
     public __: IUIData
 
-    public root?: IGroup
     public parent?: IGroup
 
     // ---
@@ -35,15 +35,24 @@ export class UI extends Leaf implements IUI {
 
 
     // layer
+    @surfaceType() // "pass-through"
+    public blendMode: IBlendMode
+
     @opacityType(1)
     public opacity: __Number
 
     @opacityType(true)
     public visible: __Boolean
 
+    @maskType(false)
+    public isMask: __Boolean
+
     @sortType(0)
     public zIndex: __Number
 
+    @dataType()
+    public locked: __Boolean
+
 
     // position
     @positionType(0)
@@ -84,28 +93,23 @@ export class UI extends Leaf implements IUI {
     public draggable: __Boolean
 
     // hit
-    @dataType(true)
+    @hitType(true)
     public hittable: __Boolean
 
-    @dataType('visible')
-    public hitType: IHitType
-
-    @dataType(true)
-    public hitChildren: __Boolean
+    @hitType('visible')
+    public hitFill: IHitType
 
-    // ---
+    @strokeType('visible')
+    public hitStroke: IHitType
 
+    @hitType(true)
+    public hitChildren: __Boolean
 
-    // layer
+    @hitType(true)
+    public hitSelf: __Boolean
 
-    @surfaceType() // "pass-through"
-    public blendMode: IBlendMode
-
-    @boundsType()
-    public mask: __Boolean
+    // ---
 
-    @dataType()
-    public locked: __Boolean
 
     // fill
 
@@ -114,28 +118,28 @@ export class UI extends Leaf implements IUI {
 
     // stroke
 
-    @affectEventBoundsType()
+    @strokeType()
     public stroke: IPaint | IPaint[] | IPaintString
 
-    @affectEventBoundsType('center')
+    @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
 
 
@@ -165,23 +169,31 @@ export class UI extends Leaf implements IUI {
     public grayscale: __Number | IGrayscaleEffect
 
 
-    // now transform
-
-    public get worldTransform(): IMatrixData { return this.__layout.getTransform('world') }
-
-    public get relativeTransform(): IMatrixData { return this.__layout.getTransform('relative') }
+    constructor(data?: IUIInputData) {
+        super(data)
+    }
 
-    // now bounds
 
-    public get worldBoxBounds(): IBoundsData { return this.__layout.getBounds('world', 'box') }
+    public set(data: IUITagInputData): void {
+        Object.assign(this, data)
+    }
 
-    public get worldRenderBounds(): IBoundsData { return this.__layout.getBounds('world', 'render') }
+    public get(): IUITagInputData {
+        return this.__.__getInputData()
+    }
 
+    public __onUpdateSize(): void {
+        if (this.__.__input) {
+            const { fill, stroke } = this.__.__input
+            if (fill) Paint.computeFill(this)
+            if (stroke) Paint.computeStroke(this)
+        }
+    }
 
     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
         }
     }
 
@@ -195,7 +207,11 @@ 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 {
+        return UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height) as IUI
+    }
+
 }

package/src/Vector.ts

@@ -9,6 +9,8 @@ import { Group } from './Group'
 @registerUI()
 export class Vector extends Group implements IVector {
 
+    public get __tag() { return 'Vector' }
+
     @dataProcessor(VectorData)
     public __: IVectorData
 

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'
+
+