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

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@leafer-ui/display",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.23",
   "description": "@leafer-ui/display",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/leaferjs/ui.git"
@@ -13,18 +15,17 @@
   "homepage": "https://github.com/leaferjs/ui/tree/main/packages/display",
   "bugs": "https://github.com/leaferjs/ui/issues",
   "keywords": [
-    "leaferui",
     "leafer-ui",
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-alpha.1",
-    "@leafer-ui/data": "1.0.0-alpha.1",
-    "@leafer-ui/display-module": "1.0.0-alpha.1",
-    "@leafer-ui/decorator": "1.0.0-alpha.1"
+    "@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"
   },
   "devDependencies": {
-     "@leafer/interface": "1.0.0-alpha.1",
-     "@leafer-ui/interface": "1.0.0-alpha.1"
+    "@leafer/interface": "1.0.0-alpha.23",
+    "@leafer-ui/interface": "1.0.0-alpha.23"
   }
 }

package/src/Ellipse.ts

@@ -1,3 +1,4 @@
+import { __Number } from '@leafer/interface'
 import { PathCreator, OneRadian, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IEllipse, IEllipseInputData, IEllipseData } from '@leafer-ui/interface'
@@ -13,17 +14,19 @@ const { begin, moveTo, close, ellipse } = PathCreator
 @registerUI()
 export class Ellipse extends UI implements IEllipse {
 
+    public get __tag() { return 'Ellipse' }
+
     @dataProcessor(EllipseData)
     public __: IEllipseData
 
     @pathType(0)
-    public innerRadius: number
+    public innerRadius: __Number
 
     @pathType(0)
-    public startAngle: number
+    public startAngle: __Number
 
     @pathType(0)
-    public endAngle: number
+    public endAngle: __Number
 
     constructor(data?: IEllipseInputData) {
         super(data)
@@ -39,12 +42,14 @@ export class Ellipse extends UI implements IEllipse {
         if (innerRadius) {
 
             if (startAngle || endAngle) {
-                ellipse(rx, ry, rx * (1 - innerRadius), ry * (1 - innerRadius), 0, startAngle * OneRadian, endAngle * OneRadian, false)
+                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)
-                close()
+                if (innerRadius < 1) close()
             } else {
-                ellipse(rx, ry, rx * (1 - innerRadius), ry * (1 - innerRadius), 0, 0, 2 * PI, false)
-                moveTo(width, ry)
+                if (innerRadius < 1) {
+                    ellipse(rx, ry, rx * innerRadius, ry * innerRadius, 0, 0, 2 * PI, false)
+                    moveTo(width, ry)
+                }
                 ellipse(rx, ry, rx, ry, 0, 0, 2 * PI, true)
             }
 

package/src/Frame.ts

@@ -1,4 +1,4 @@
-import { ILeaferCanvas, IRenderOptions, ICanvasDrawPath, IBoundsData, IPathCommandData } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions, IPathDrawer, IBoundsData, IPathCommandData, __Boolean } from '@leafer/interface'
 import { BoundsHelper, dataProcessor, boundsType, rewrite, useModule, rewriteAble, registerUI } from '@leafer/core'
 
 import { IFrame, IFrameData, IFrameInputData } from '@leafer-ui/interface'
@@ -20,11 +20,13 @@ const { copy, add } = BoundsHelper
 @registerUI()
 export class Frame extends Group implements IFrame {
 
+    public get __tag() { return 'Frame' }
+
     @dataProcessor(FrameData)
     public __: IFrameData
 
     @boundsType(true)
-    public clip: boolean
+    public clip: __Boolean
 
     constructor(data?: IFrameInputData) {
         super(data)
@@ -33,7 +35,7 @@ export class Frame extends Group implements IFrame {
     }
 
     @rewrite(rect.__drawPathByData)
-    public __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void { }
+    public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
 
     public __updateBoxBounds(): void {
         this.__updateRectBoxBounds()
@@ -45,12 +47,12 @@ export class Frame extends Group implements IFrame {
         }
     }
 
-    public __updateEventBounds(): void {
-        this.__updateRectEventBounds()
+    public __updateStrokeBounds(): void {
+        this.__updateRectStrokeBounds()
         if (!this.__.clip) {
-            const { eventBounds } = this.__layout
+            const { strokeBounds: eventBounds } = this.__layout
             copy(bounds, eventBounds)
-            super.__updateEventBounds()
+            super.__updateStrokeBounds()
             add(eventBounds, bounds)
         }
     }
@@ -68,17 +70,17 @@ export class Frame extends Group implements IFrame {
     @rewrite(rect.__updateBoxBounds)
     public __updateRectBoxBounds(): void { }
 
-    @rewrite(rect.__updateEventBounds)
-    public __updateRectEventBounds(): void { }
+    @rewrite(rect.__updateStrokeBounds)
+    public __updateRectStrokeBounds(): void { }
 
     @rewrite(rect.__updateRenderBounds)
     public __updateRectRenderBounds(): void { }
 
 
     @rewrite(rect.__render)
-    public __renderRect(canvas: ILeaferCanvas, options: IRenderOptions): void { }
+    public __renderRect(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
 
     @rewrite(group.__render)
-    public __renderGroup(canvas: ILeaferCanvas, options: IRenderOptions): void { }
+    public __renderGroup(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
 
 }

package/src/Group.ts

@@ -10,23 +10,30 @@ 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.children = []
     }
 
-    public __updatePath(): void {
-
-    }
-
-    public add(child: IUI, index?: number): void { } // Branch rewrite
-
     public addAt(child: IUI, index: number): void {
         this.add(child, index)
     }
@@ -39,6 +46,26 @@ export class Group extends UI implements IGroup {
         this.add(child, this.children.indexOf(before))
     }
 
-    public remove(child?: IUI): void { }  // Branch rewrite
+    // Branch rewrite
+
+    public add(_child: IUI, _index?: number): void { }
 
+    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

@@ -1,6 +1,7 @@
-import { boundsType, dataProcessor, registerUI } from '@leafer/core'
+import { ILeaferImage, __String } from '@leafer/interface'
+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'
@@ -9,17 +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
+    public url: __String
 
-    @boundsType('')
-    public thumb: string
+    public get ready(): boolean { return this.image?.ready }
+
+    public image: ILeaferImage
 
     constructor(data?: IImageInputData) {
         super(data)
     }
 
+    public __updateBoxBounds(): void {
+
+        let update: boolean
+
+        const { url } = this
+        const fills = this.fill as IImagePaint[]
+        if (fills) {
+            if (fills[0].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)
+        }
+
+        super.__updateBoxBounds()
+
+    }
+
 }

package/src/Line.ts

@@ -1,7 +1,7 @@
-import { __Number, IPointData, ITwoPointBoundsData } from '@leafer/interface'
-import { PathCreator, PointHelper, TwoPointBoundsHelper, boundsType, dataProcessor, registerUI } from '@leafer/core'
+import { IPointData, ITwoPointBoundsData, __Number } from '@leafer/interface'
+import { PathCreator, PointHelper, TwoPointBoundsHelper, boundsType, affectEventBoundsType, 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'
@@ -17,26 +17,28 @@ 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
 
+    @affectEventBoundsType('center')
+    public strokeAlign: IStrokeAlign
 
-    protected __to: IPointData
+    protected __toPoint: IPointData
 
     public get toPoint(): IPointData {
-        if (this.__to && !this.__layout.boxBoundsChanged) return this.__to
+        if (this.__toPoint && !this.__layout.boxBoundsChanged) return this.__toPoint
 
-        const { width, height, rotation } = this.__
+        const { width, rotation } = this.__
         const to: IPointData = { x: 0, y: 0 }
 
         if (width) to.x = width
-        if (height) to.y = height
-
         if (rotation) rotate(to, rotation)
-        this.__to = to
+        this.__toPoint = to
 
         return to
     }
@@ -64,7 +66,7 @@ export class Line extends UI implements ILine {
 
     public __updateBoxBounds(): void {
         setPoint(pointBounds, 0, 0)
-        addPoint(pointBounds, this.__to.x, this.__to.y)
+        addPoint(pointBounds, this.__toPoint.x, this.__toPoint.y)
         toBounds(pointBounds, this.__layout.boxBounds)
     }
 

package/src/Path.ts

@@ -1,21 +1,19 @@
-import { ITwoPointBoundsData, ILeaferCanvas, IPathCommandData } from '@leafer/interface'
-import { PathHelper, TwoPointBoundsHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
+import { ILeaferCanvas, IPathCommandData, IWindingRule } from '@leafer/interface'
+import { PathHelper, dataProcessor, pathType, affectEventBoundsType, registerUI } from '@leafer/core'
 
-import { IPath, IPathData, IPathInputData, IWindingRule, 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 } = PathHelper
 
 @registerUI()
 export class Path extends UI implements IPath {
 
+    public get __tag() { return 'Path' }
+
     @dataProcessor(PathData)
     public __: IPathData
 
@@ -25,6 +23,9 @@ export class Path extends UI implements IPath {
     @pathType()
     public windingRule: IWindingRule
 
+    @affectEventBoundsType('center')
+    public strokeAlign: IStrokeAlign
+
     constructor(data?: IPathInputData) {
         super(data)
     }
@@ -35,8 +36,7 @@ export class Path extends UI implements IPath {
     }
 
     public __updateBoxBounds(): void {
-        toTwoPointBounds(this.__.path, pointBounds)
-        toBounds(pointBounds, this.__layout.boxBounds)
+        toBounds(this.__.path, this.__layout.boxBounds)
     }
 
 }

package/src/Polygon.ts

@@ -1,3 +1,4 @@
+import { __Number } from '@leafer/interface'
 import { PathCreator, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IPolygon, IPolygonData, IPolygonInputData } from '@leafer-ui/interface'
@@ -13,6 +14,8 @@ const { begin, moveTo, lineTo, close } = PathCreator
 @registerUI()
 export class Polygon extends UI implements IPolygon {
 
+    public get __tag() { return 'Polygon' }
+
     @dataProcessor(PolygonData)
     public __: IPolygonData
 

package/src/Rect.ts

@@ -1,4 +1,4 @@
-import { ICanvasDrawPath, IPathCommandData } from '@leafer/interface'
+import { IPathDrawer, IPathCommandData, __Number } from '@leafer/interface'
 import { dataProcessor, registerUI, useModule } from '@leafer/core'
 
 import { IRect, IRectInputData, IRectData } from '@leafer-ui/interface'
@@ -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
 
@@ -19,12 +21,10 @@ export class Rect extends UI implements IRect {
         super(data)
     }
 
-    public __updatePath(): void { }
-
-    public __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void {
-        const { width, height, borderRadius } = this.__
-        if (borderRadius) {
-            drawer.roundRect(0, 0, width, height, borderRadius)
+    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,3 +1,4 @@
+import { __Number } from '@leafer/interface'
 import { PathCreator, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IStar, IStarData, IStarInputData } from '@leafer-ui/interface'
@@ -13,14 +14,16 @@ const { begin, moveTo, lineTo, close } = PathCreator
 @registerUI()
 export class Star extends UI implements IStar {
 
+    public get __tag() { return 'Star' }
+
     @dataProcessor(StarData)
     public __: IStarData
 
     @pathType(5)
-    public points: number
+    public points: __Number
 
-    @pathType(0.38)
-    public innerRadius: number
+    @pathType(0.382)
+    public innerRadius: __Number
 
     constructor(data?: IStarInputData) {
         super(data)

package/src/Text.ts

@@ -1,78 +1,101 @@
-import { ICanvasDrawPath, IPathCommandData } from '@leafer/interface'
-import { Platform, boundsType, dataProcessor, registerUI, useModule } from '@leafer/core'
+import { IPathDrawer, IPathCommandData, __Boolean, __Number, __String } from '@leafer/interface'
+import { boundsType, dataProcessor, registerUI, surfaceType, useModule } from '@leafer/core'
 
-import { IText, IFontWeight, ITextCase, ITextDecoration, IPercent, ITextData, ITextInputData } from '@leafer-ui/interface'
+import { IText, IFontWeight, ITextCase, ITextDecoration, IPercent, ITextData, ITextInputData, ITextAlign, IVerticalAlign, ITextDrawData } from '@leafer-ui/interface'
 import { TextData } from '@leafer-ui/data'
 import { TextRender } from '@leafer-ui/display-module'
+import { TextConvert } from '@leafer-ui/text'
 
 import { UI } from './UI'
 
-
 @useModule(TextRender)
 @registerUI()
 export class Text extends UI implements IText {
 
+    public get __tag() { return 'Text' }
+
     @dataProcessor(TextData)
     public __: ITextData
 
+    // size
+    @boundsType(undefined)
+    public width: __Number
+
+    @boundsType(undefined)
+    public height: __Number
+
     @boundsType('')
-    public content: string
+    public content: __String
 
     @boundsType('arial')
-    public fontFamily: string
+    public fontFamily: __String
 
     @boundsType(12)
-    public fontSize: number
+    public fontSize: __Number
 
     @boundsType('normal')
     public fontWeight: IFontWeight
 
     @boundsType(false)
-    public italic: boolean
+    public italic: __Boolean
 
     @boundsType('normal')
     public textCase: ITextCase
 
-    @boundsType('normal')
+    @boundsType('none')
     public textDecoration: ITextDecoration
 
     @boundsType()
-    public letterSpacing: number | IPercent
+    public letterSpacing: __Number | IPercent
 
-    @boundsType()
-    public lineHeight: number | IPercent
+    @boundsType(1)
+    public lineHeight: __Number | IPercent
 
     @boundsType()
-    public paragraphIndent: number
+    public paragraphIndent: __Number
 
     @boundsType()
-    public paragraphSpacing: number
+    public paragraphSpacing: __Number
 
-    constructor(data?: ITextInputData) {
-        super(data)
-    }
+    @surfaceType('left')
+    public textAlign: ITextAlign
+
+    @surfaceType('top')
+    public verticalAlign: IVerticalAlign
 
-    public __updatePath(): void {
+    public get realWidth(): number { return this.textDrawData.width }
 
+    public get realHeight(): number { return this.textDrawData.height }
+
+    public get textDrawData(): ITextDrawData {
+        this.__updateTextDrawData()
+        return this.__.__textDrawData
+    }
+
+    constructor(data?: ITextInputData) {
+        super(data)
     }
 
-    public __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void {
+    public __drawPathByData(drawer: IPathDrawer, _data: IPathCommandData): void {
         const { width, height } = this.__
         drawer.rect(0, 0, width, height)
     }
 
+    public __updateTextDrawData(): void {
+        this.__.__textDrawData || (this.__.__textDrawData = TextConvert.getDrawData(this.__.content, 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
+        this.__updateTextDrawData()
+
+        const { width, height, __textDrawData: data } = this.__
+        const b = this.__layout.boxBounds
 
-        b.x = 0
-        b.y = -fontSize * 0.75
-        b.width = width
-        b.height = height
+        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
     }
 
 }

package/src/UI.ts

@@ -1,12 +1,14 @@
-import { ILeaferCanvas, ICanvasDrawPath, IPathCommandData, __Number, __Boolean, __String, IMatrixData, IBoundsData } 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, PathHelper, affectEventBoundsType, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, maskType, dataProcessor, useModule, rewrite, rewriteAble, UICreator } from '@leafer/core'
 
-import { IUI, IShadowEffect, IBlurEffect, IPaint, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IPaintString, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IBorderWidthString, IBorderRadiusString } 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)
@@ -18,7 +20,6 @@ export class UI extends Leaf implements IUI {
     @dataProcessor(UIData)
     public __: IUIData
 
-    public root?: IGroup
     public parent?: IGroup
 
     // ---
@@ -35,15 +36,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)
@@ -79,46 +89,38 @@ export class UI extends Leaf implements IUI {
     @rotationType(0)
     public skewY: __Number
 
+
+    @dataType(false)
     public draggable: __Boolean
 
-    // ---
+    // hit
+    @dataType(true)
+    public hittable: __Boolean
 
+    @dataType('visible')
+    public hitType: IHitType
 
-    // layer
+    @dataType(true)
+    public hitChildren: __Boolean
 
-    @surfaceType() // "pass-through"
-    public blendMode: IBlendMode
+    // ---
 
-    @boundsType()
-    public mask: __Boolean
-
-    @dataType()
-    public locked: __Boolean
 
     // fill
 
     @surfaceType()
     public fill: IPaint | IPaint[] | IPaintString
 
-    // border 
-
-    @pathType()
-    public borderRadius: __Number | __Number[] | IBorderRadiusString
-
-    @affectEventBoundsType(1)
-    public borderWidth: __Number | __Number[] | IBorderWidthString
-
-
     // stroke
 
     @affectEventBoundsType()
     public stroke: IPaint | IPaint[] | IPaintString
 
-    @affectEventBoundsType('center')
+    @affectEventBoundsType('inside')
     public strokeAlign: IStrokeAlign
 
     @affectEventBoundsType(1)
-    public strokeWidth: __Number
+    public strokeWidth: number | number[] | IStrokeWidthString
 
     @surfaceType('none')
     public strokeCap: IStrokeCap
@@ -139,7 +141,7 @@ export class UI extends Leaf implements IUI {
     // corner
 
     @pathType()
-    public cornerRadius: __Number
+    public cornerRadius: number | number[] | ICornerRadiusString
 
     @pathType()
     public cornerSmoothing: __Number
@@ -162,28 +164,37 @@ 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 {
-        const { __: data } = this
-        const { cornerRadius, path } = data
-        data.__renderPath = cornerRadius && path ? PathHelper.applyCorner(path, cornerRadius, data.cornerSmoothing) : path
+        if (this.__.path) {
+            const { __: data } = this
+            data.__pathForRender = data.cornerRadius ? PathHelper.smoothCorner(data.path, data.cornerRadius, data.cornerSmoothing) : data.path
+        }
     }
 
     public __drawRenderPath(canvas: ILeaferCanvas): void {
         canvas.beginPath()
-        this.__drawPathByData(canvas, this.__.__renderPath)
+        this.__drawPathByData(canvas, this.__.__pathForRender)
     }
 
     public __drawPath(canvas: ILeaferCanvas): void {
@@ -192,6 +203,10 @@ export class UI extends Leaf implements IUI {
     }
 
     @rewrite(PathHelper.drawData)
-    public __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void { }
+    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