@leafer-ui/display 1.0.0-rc.6 → 1.0.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/display",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.8",
   "description": "@leafer-ui/display",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,14 +22,14 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-rc.6",
-    "@leafer-ui/data": "1.0.0-rc.6",
-    "@leafer-ui/display-module": "1.0.0-rc.6",
-    "@leafer-ui/decorator": "1.0.0-rc.6",
-    "@leafer-ui/external": "1.0.0-rc.6"
+    "@leafer/core": "1.0.0-rc.8",
+    "@leafer-ui/data": "1.0.0-rc.8",
+    "@leafer-ui/display-module": "1.0.0-rc.8",
+    "@leafer-ui/decorator": "1.0.0-rc.8",
+    "@leafer-ui/external": "1.0.0-rc.8"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-rc.6",
-    "@leafer-ui/interface": "1.0.0-rc.6"
+    "@leafer/interface": "1.0.0-rc.8",
+    "@leafer-ui/interface": "1.0.0-rc.8"
   }
 }

package/src/Box.ts

@@ -1,4 +1,4 @@
-import { ILeaferCanvas, IRenderOptions, IPathDrawer, IBoundsData, IPathCommandData, __Boolean } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions, IPathDrawer, IBoundsData, IPathCommandData } from '@leafer/interface'
 import { rewrite, rewriteAble, registerUI, BoundsHelper, dataProcessor, affectRenderBoundsType } from '@leafer/core'
 
 import { IBox, IBoxData, IBoxInputData, IOverflow } from '@leafer-ui/interface'
@@ -25,14 +25,21 @@ export class Box extends Group implements IBox {
     @affectRenderBoundsType('show')
     declare public overflow: IOverflow
 
-    public get resizeable(): boolean { return true }
-
     constructor(data?: IBoxInputData) {
         super(data)
         this.isBranchLeaf = true
         this.__layout.renderChanged || this.__layout.renderChange()
     }
 
+    public __scaleResize(scaleX: number, scaleY: number): void {
+        if (this.__.__autoBounds && this.children.length) {
+            super.__scaleResize(scaleX, scaleY)
+        } else {
+            this.width *= scaleX
+            this.height *= scaleY
+        }
+    }
+
     @rewrite(rect.__updateStrokeSpread)
     public __updateStrokeSpread(): number { return 0 }
 
@@ -48,7 +55,15 @@ export class Box extends Group implements IBox {
 
 
     @rewrite(rect.__updateBoxBounds)
-    public __updateBoxBounds(): void { }
+    public __updateRectBoxBounds(): void { }
+
+    public __updateBoxBounds(): void {
+        if (this.__.__autoBounds && this.children.length) {
+            super.__updateBoxBounds()
+        } else {
+            this.__updateRectBoxBounds()
+        }
+    }
 
     @rewrite(rect.__updateStrokeBounds)
     public __updateStrokeBounds(): void { }

package/src/Canvas.ts

@@ -1,4 +1,4 @@
-import { ILeaferCanvas, ILeaferCanvasConfig, __String, __Number, IRenderOptions, IPointData, ICanvasContext2D, IScreenSizeData, ISizeData, IHitType } from '@leafer/interface'
+import { ILeaferCanvas, ILeaferCanvasConfig, INumber, IRenderOptions, IPointData, ICanvasContext2D, IScreenSizeData, ISizeData, IHitType } from '@leafer/interface'
 import { Creator, Matrix, Platform, dataProcessor, registerUI, hitType } from '@leafer/core'
 
 import { ICanvas, ICanvasData, ICanvasInputData, IUI } from '@leafer-ui/interface'
@@ -17,13 +17,13 @@ export class Canvas extends Rect implements ICanvas {
     declare public __: ICanvasData
 
     @resizeType(100)
-    declare public width: __Number
+    declare public width: INumber
 
     @resizeType(100)
-    declare public height: __Number
+    declare public height: INumber
 
     @resizeType(Platform.devicePixelRatio)
-    public pixelRatio: __Number
+    public pixelRatio: INumber
 
     @resizeType(true)
     public smooth: boolean
@@ -43,7 +43,7 @@ export class Canvas extends Rect implements ICanvas {
     }
 
     public draw(ui: IUI, offset?: IPointData, scale?: number | IPointData, rotation?: number): void {
-        ui.__layout.checkUpdate()
+        ui.__layout.update()
 
         const matrix = new Matrix(ui.__world)
         matrix.invert()
@@ -52,7 +52,7 @@ export class Canvas extends Rect implements ICanvas {
         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)
+        matrix.multiplyParent(m)
 
         ui.__render(this.canvas, { matrix })
         this.paint()

package/src/Ellipse.ts

@@ -1,5 +1,5 @@
-import { __Number } from '@leafer/interface'
-import { PathCommandDataHelper, PathConvert, Platform, dataProcessor, pathType, registerUI } from '@leafer/core'
+import { INumber } from '@leafer/interface'
+import { PathCommandDataHelper, Platform, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IEllipse, IEllipseInputData, IEllipseData } from '@leafer-ui/interface'
 import { EllipseData } from '@leafer-ui/data'
@@ -18,13 +18,13 @@ export class Ellipse extends UI implements IEllipse {
     declare public __: IEllipseData
 
     @pathType(0)
-    public innerRadius: __Number
+    public innerRadius: INumber
 
     @pathType(0)
-    public startAngle: __Number
+    public startAngle: INumber
 
     @pathType(0)
-    public endAngle: __Number
+    public endAngle: INumber
 
     constructor(data?: IEllipseInputData) {
         super(data)
@@ -52,7 +52,7 @@ export class Ellipse extends UI implements IEllipse {
             }
 
             // fix node
-            if (Platform.ellipseToCurve) this.__.path = PathConvert.toCanvasData(path, true)
+            if (Platform.ellipseToCurve) this.__.path = this.getPath(true)
 
         } else {
 

package/src/Frame.ts

@@ -1,4 +1,3 @@
-import { __Boolean } from '@leafer/interface'
 import { dataProcessor, registerUI, affectRenderBoundsType } from '@leafer/core'
 
 import { IFrame, IFrameData, IFrameInputData, IOverflow } from '@leafer-ui/interface'
@@ -20,6 +19,7 @@ export class Frame extends Box implements IFrame {
 
     constructor(data?: IFrameInputData) {
         super(data)
+        this.isFrame = true
         if (!this.__.fill) this.__.fill = '#FFFFFF'
     }
 }

package/src/Group.ts

@@ -1,4 +1,4 @@
-import { Branch, useModule, dataProcessor, registerUI, UICreator } from '@leafer/core'
+import { Branch, useModule, dataProcessor, registerUI, UICreator, MatrixHelper } from '@leafer/core'
 
 import { IGroup, IGroupData, IGroupInputData, IUI, IUIInputData } from '@leafer-ui/interface'
 import { GroupData } from '@leafer-ui/data'
@@ -6,6 +6,8 @@ import { GroupData } from '@leafer-ui/data'
 import { UI } from './UI'
 
 
+const matrix = MatrixHelper.get()
+
 @useModule(Branch)
 @registerUI()
 export class Group extends UI implements IGroup {
@@ -17,8 +19,6 @@ export class Group extends UI implements IGroup {
 
     declare public children: IUI[]
 
-    public get resizeable(): boolean { return false }
-
     public set mask(child: IUI) {
         if (this.__hasMask) this.__removeMask()
         if (child) {
@@ -74,6 +74,15 @@ export class Group extends UI implements IGroup {
         return data
     }
 
+    public __scaleResize(scaleX: number, scaleY: number): void {
+        const { children } = this
+        for (let i = 0; i < children.length; i++) {
+            matrix.a = scaleX // must update
+            matrix.d = scaleY
+            children[i].transform(matrix, true)
+        }
+    }
+
     // add
 
     public addAt(child: IUI, index: number): void {

package/src/Image.ts

@@ -1,4 +1,4 @@
-import { ILeaferImage, __String } from '@leafer/interface'
+import { ILeaferImage, IString } from '@leafer/interface'
 import { ImageEvent, boundsType, dataProcessor, registerUI } from '@leafer/core'
 
 import { IImage, IImageInputData, IImageData, IImagePaint } from '@leafer-ui/interface'
@@ -16,7 +16,7 @@ export class Image extends Rect implements IImage {
     declare public __: IImageData
 
     @boundsType('')
-    public url: __String
+    public url: IString
 
     public get ready(): boolean { return this.image ? this.image.ready : false }
 

package/src/Line.ts

@@ -1,5 +1,5 @@
-import { IPointData, __Number } from '@leafer/interface'
-import { PathBounds, PathCommandDataHelper, PointHelper, boundsType, pathType, affectStrokeBoundsType, dataProcessor, registerUI } from '@leafer/core'
+import { IPointData, INumber } from '@leafer/interface'
+import { PathBounds, PathCommandDataHelper, PointHelper, boundsType, pathType, affectStrokeBoundsType, dataProcessor, registerUI, PathScaler } from '@leafer/core'
 
 import { ILine, ILineData, ILineInputData, IStrokeAlign } from '@leafer-ui/interface'
 import { LineData } from '@leafer-ui/data'
@@ -24,7 +24,7 @@ export class Line extends UI implements ILine {
     declare public strokeAlign: IStrokeAlign
 
     @boundsType(0)
-    declare public height: __Number
+    declare public height: INumber
 
     @pathType()
     public points: number[]
@@ -32,9 +32,6 @@ export class Line extends UI implements ILine {
     @pathType(0)
     public curve: boolean | number
 
-    public get resizeable(): boolean { return !this.points }
-
-
     public get toPoint(): IPointData {
         const { width, rotation } = this.__
         const to: IPointData = { x: 0, y: 0 }
@@ -74,7 +71,7 @@ export class Line extends UI implements ILine {
 
     public __updateRenderPath(): void {
         if (this.__.points && this.__.curve) {
-            drawPoints(this.__.__pathForRender = [], this.__.points, this.__.curve, false)
+            drawPoints(this.__.__pathForRender = [], this.__.points, this.__.curve, this.__tag !== 'Line')
         } else {
             super.__updateRenderPath()
         }
@@ -83,10 +80,27 @@ export class Line extends UI implements ILine {
     public __updateBoxBounds(): void {
         if (this.points) {
             toBounds(this.__.__pathForRender, this.__layout.boxBounds)
-            this.__updateNaturalSize()
         } else {
             super.__updateBoxBounds()
         }
     }
 
+    public __scaleResize(scaleX: number, scaleY: number): void {
+        if (this.points) {
+            PathScaler.scalePoints(this.__.points, scaleX, scaleY)
+            this.points = this.__.points
+        } else {
+
+            if (this.__tag === 'Line') {
+                const point = this.toPoint
+                point.x *= scaleX
+                point.y *= scaleY
+                this.toPoint = point
+            } else {
+                // Polygon ...
+                super.__scaleResize(scaleX, scaleY)
+            }
+        }
+    }
+
 }

package/src/Path.ts

@@ -1,5 +1,5 @@
 import { IPathCommandData, IWindingRule } from '@leafer/interface'
-import { PathBounds, dataProcessor, pathType, affectStrokeBoundsType, registerUI } from '@leafer/core'
+import { PathBounds, dataProcessor, pathType, affectStrokeBoundsType, registerUI, PathScaler } from '@leafer/core'
 
 import { IPath, IPathData, IPathInputData, IPathString, IStrokeAlign } from '@leafer-ui/interface'
 import { PathData } from '@leafer-ui/data'
@@ -26,15 +26,17 @@ export class Path extends UI implements IPath {
     @affectStrokeBoundsType('center')
     declare public strokeAlign: IStrokeAlign
 
-    public get resizeable(): boolean { return false }
-
     constructor(data?: IPathInputData) {
         super(data)
     }
 
+    public __scaleResize(scaleX: number, scaleY: number): void {
+        PathScaler.scale(this.__.path, scaleX, scaleY)
+        this.path = this.__.path
+    }
+
     public __updateBoxBounds(): void {
         toBounds(this.__.path, this.__layout.boxBounds)
-        this.__updateNaturalSize()
     }
 
 }

package/src/Polygon.ts

@@ -1,16 +1,18 @@
-import { __Number } from '@leafer/interface'
-import { PathBounds, PathCommandDataHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
+import { INumber } from '@leafer/interface'
+import { PathCommandDataHelper, dataProcessor, pathType, registerUI, rewrite, rewriteAble } from '@leafer/core'
 
 import { IPolygon, IPolygonData, IPolygonInputData } from '@leafer-ui/interface'
 import { PolygonData } from '@leafer-ui/data'
 
 import { UI } from './UI'
+import { Line } from './Line'
 
 
 const { sin, cos, PI } = Math
 const { moveTo, lineTo, closePath, drawPoints } = PathCommandDataHelper
-const { toBounds } = PathBounds
+const line = Line.prototype
 
+@rewriteAble()
 @registerUI()
 export class Polygon extends UI implements IPolygon {
 
@@ -20,7 +22,7 @@ export class Polygon extends UI implements IPolygon {
     declare public __: IPolygonData
 
     @pathType(3)
-    sides: number
+    sides: INumber
 
     @pathType()
     points: number[]
@@ -28,8 +30,6 @@ export class Polygon extends UI implements IPolygon {
     @pathType(0)
     curve: boolean | number
 
-    public get resizeable(): boolean { return !this.points }
-
     constructor(data?: IPolygonInputData) {
         super(data)
     }
@@ -58,22 +58,13 @@ export class Polygon extends UI implements IPolygon {
         closePath(path)
     }
 
+    @rewrite(line.__updateRenderPath)
+    public __updateRenderPath(): void { }
 
-    public __updateRenderPath(): void {
-        if (this.__.points && this.__.curve) {
-            drawPoints(this.__.__pathForRender = [], this.__.points, this.__.curve, true)
-        } else {
-            super.__updateRenderPath()
-        }
-    }
+    @rewrite(line.__updateBoxBounds)
+    public __updateBoxBounds(): void { }
 
-    public __updateBoxBounds(): void {
-        if (this.__.points) {
-            toBounds(this.__.__pathForRender, this.__layout.boxBounds)
-            this.__updateNaturalSize()
-        } else {
-            super.__updateBoxBounds()
-        }
-    }
+    @rewrite(line.__scaleResize)
+    public __scaleResize(_scaleX: number, _scaleY: number): void { }
 
 }

package/src/Rect.ts

@@ -1,5 +1,5 @@
-import { IPathDrawer, IPathCommandData, __Number } from '@leafer/interface'
-import { dataProcessor, registerUI, useModule } from '@leafer/core'
+import { IPathDrawer, IPathCommandData } from '@leafer/interface'
+import { dataProcessor, registerUI, rewrite, rewriteAble, useModule } from '@leafer/core'
 
 import { IRect, IRectInputData, IRectData } from '@leafer-ui/interface'
 import { RectData } from '@leafer-ui/data'
@@ -9,6 +9,7 @@ import { UI } from './UI'
 
 
 @useModule(RectRender)
+@rewriteAble()
 @registerUI()
 export class Rect extends UI implements IRect {
 
@@ -21,12 +22,7 @@ export class Rect extends UI implements IRect {
         super(data)
     }
 
-    public __drawPathByData(drawer: IPathDrawer, _data: IPathCommandData): void {
-        const { width, height, cornerRadius } = this.__
-        if (cornerRadius) {
-            drawer.roundRect(0, 0, width, height, cornerRadius)
-        } else {
-            drawer.rect(0, 0, width, height)
-        }
-    }
+    @rewrite(UI.prototype.__drawPathByBox)
+    public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
+
 }

package/src/Star.ts

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

package/src/Text.ts

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

package/src/UI.ts

@@ -1,7 +1,7 @@
-import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, __Number, __Boolean, __String, IPathString, IExportFileType, IPointData, ICursorType, IAround, ILeafDataOptions, IFindMethod } from '@leafer/interface'
-import { Leaf, PathDrawer, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, maskType, dataProcessor, useModule, rewrite, rewriteAble, UICreator, PathCorner, hitType, strokeType, PathConvert, eraserType, cursorType } from '@leafer/core'
+import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, INumber, IBoolean, IString, IPathString, IExportFileType, IPointData, ICursorType, IAround, IFindMethod } from '@leafer/interface'
+import { Leaf, PathDrawer, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, maskType, dataProcessor, useModule, rewrite, rewriteAble, UICreator, PathCorner, hitType, strokeType, PathConvert, eraserType, cursorType, autoLayoutType } from '@leafer/core'
 
-import { IUI, IShadowEffect, IBlurEffect, IPaint, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IPaintString, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUIInputData, IExportOptions, IExportResult } from '@leafer-ui/interface'
+import { IUI, IShadowEffect, IBlurEffect, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUIInputData, IExportOptions, IExportResult, IFill, IStroke, IFindUIMethod, IEditSize, ILeafer } from '@leafer-ui/interface'
 import { effectType } from '@leafer-ui/decorator'
 
 import { UIData } from '@leafer-ui/data'
@@ -19,21 +19,29 @@ export class UI extends Leaf implements IUI {
     @dataProcessor(UIData)
     declare public __: IUIData
 
-    declare public proxyData?: IUIInputData
+    declare public proxyData: IUIInputData // need rewrite getter
+    declare public __proxyData?: IUIInputData
 
+    public get app(): ILeafer { return this.leafer && this.leafer.app }
+
+    declare public leafer?: ILeafer
     declare public parent?: IGroup
 
+    public isFrame?: boolean
+
+    declare public children?: IUI[]
+
     // ---
 
     // id
     @dataType('')
-    public id: __String
+    public id: IString
 
     @dataType('')
-    public name: __String
+    public name: IString
 
     @dataType('')
-    public className: __String
+    public className: IString
 
 
     // layer
@@ -41,67 +49,75 @@ export class UI extends Leaf implements IUI {
     public blendMode: IBlendMode
 
     @opacityType(1)
-    public opacity: __Number
+    public opacity: INumber
 
     @opacityType(true)
-    public visible: __Boolean
+    public visible: IBoolean
 
     @maskType(false)
-    public isMask: __Boolean
+    public isMask: IBoolean
 
     @eraserType(false)
-    public isEraser?: __Boolean
+    public isEraser?: IBoolean
 
-    @sortType(0)
-    public zIndex: __Number
+    @dataType(false)
+    public locked: IBoolean
 
-    @dataType()
-    public locked: __Boolean
+    @sortType(0)
+    public zIndex: INumber
 
 
     // position
     @positionType(0)
-    public x: __Number
+    public x: INumber
 
     @positionType(0)
-    public y: __Number
+    public y: INumber
 
     // size
     @boundsType(100)
-    public width: __Number
+    public width: INumber
 
     @boundsType(100)
-    public height: __Number
+    public height: INumber
 
     // scale
     @scaleType(1)
-    public scaleX: __Number
+    public scaleX: INumber
 
     @scaleType(1)
-    public scaleY: __Number
+    public scaleY: INumber
 
     // rotate
     @rotationType(0)
-    public rotation: __Number
+    public rotation: INumber
 
     // skew
     @rotationType(0)
-    public skewX: __Number
+    public skewX: INumber
 
     @rotationType(0)
-    public skewY: __Number
+    public skewY: INumber
 
 
-    @positionType()
+    @autoLayoutType()
     public around: IAround
 
 
     @dataType(false)
-    public draggable: __Boolean
+    public draggable: IBoolean
+
+
+    @dataType(false)
+    public editable: IBoolean
+
+    @dataType('size')
+    public editSize?: IEditSize
+
 
     // hit
     @hitType(true)
-    public hittable: __Boolean
+    public hittable: IBoolean
 
     @hitType('path')
     public hitFill: IHitType
@@ -110,16 +126,16 @@ export class UI extends Leaf implements IUI {
     public hitStroke: IHitType
 
     @hitType(false)
-    public hitBox: __Boolean
+    public hitBox: IBoolean
 
     @hitType(true)
-    public hitChildren: __Boolean
+    public hitChildren: IBoolean
 
     @hitType(true)
-    public hitSelf: __Boolean
+    public hitSelf: IBoolean
 
     @hitType()
-    public hitRadius: __Number
+    public hitRadius: INumber
 
     @cursorType('')
     public cursor: ICursorType | ICursorType[]
@@ -130,12 +146,12 @@ export class UI extends Leaf implements IUI {
     // fill
 
     @surfaceType()
-    public fill: IPaint | IPaint[] | IPaintString
+    public fill: IFill
 
     // stroke
 
     @strokeType()
-    public stroke: IPaint | IPaint[] | IPaintString
+    public stroke: IStroke
 
     @strokeType('inside')
     public strokeAlign: IStrokeAlign
@@ -150,22 +166,22 @@ export class UI extends Leaf implements IUI {
     public strokeJoin: IStrokeJoin
 
     @strokeType()
-    public dashPattern: __Number[] | IDashPatternString
+    public dashPattern: INumber[] | IDashPatternString
 
     @strokeType()
-    public dashOffset: __Number
+    public dashOffset: INumber
 
     @strokeType(10)
-    public miterLimit: __Number
+    public miterLimit: INumber
 
 
     // corner
 
-    @pathType()
+    @pathType(0)
     public cornerRadius: number | number[] | ICornerRadiusString
 
     @pathType()
-    public cornerSmoothing: __Number
+    public cornerSmoothing: INumber
 
     // effect
 
@@ -176,16 +192,16 @@ export class UI extends Leaf implements IUI {
     public innerShadow: IShadowEffect | IShadowEffect[] | IShadowString
 
     @effectType()
-    public blur: __Number | IBlurEffect
+    public blur: INumber | IBlurEffect
 
     @effectType()
-    public backgroundBlur: __Number | IBlurEffect
+    public backgroundBlur: INumber | IBlurEffect
 
     @effectType()
-    public grayscale: __Number | IGrayscaleEffect
+    public grayscale: INumber | IGrayscaleEffect
 
 
-    public set scale(value: __Number | IPointData) {
+    public set scale(value: INumber | IPointData) {
         if (typeof value === 'number') {
             this.scaleX = this.scaleY = value
         } else {
@@ -194,12 +210,17 @@ export class UI extends Leaf implements IUI {
         }
     }
 
-    public get scale(): __Number | IPointData {
+    public get scale(): INumber | IPointData {
         const { scaleX, scaleY } = this
         return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX
     }
 
 
+    constructor(data?: IUIInputData) {
+        super(data)
+    }
+
+
     // data
 
     @rewrite(Leaf.prototype.reset)
@@ -210,28 +231,28 @@ export class UI extends Leaf implements IUI {
         Object.assign(this, data)
     }
 
-    public get(options?: ILeafDataOptions): IUIInputData {
-        return this.__.__getInputData(options)
+    public get(): IUIInputData {
+        return this.__.__getInputData()
     }
 
-    public getProxyData(): IUIInputData { return undefined }
+    public createProxyData(): IUIInputData { return undefined }
 
 
     // find
 
-    public find(condition: number | string | IFindMethod): IUI[] {
-        return this.leafer ? this.leafer.selector.getBy(condition, this) as IUI[] : []
+    public find(condition: number | string | IFindUIMethod, options?: any): IUI[] {
+        return this.leafer ? this.leafer.selector.getBy(condition as IFindMethod, this, false, options) as IUI[] : []
     }
 
-    public findOne(condition: number | string | IFindMethod): IUI {
-        return this.leafer ? this.leafer.selector.getBy(condition, this, true) as IUI : null
+    public findOne(condition: number | string | IFindUIMethod, options?: any): IUI {
+        return this.leafer ? this.leafer.selector.getBy(condition as IFindMethod, this, true, options) as IUI : null
     }
 
 
     // path
 
     public getPath(curve?: boolean): IPathCommandData {
-        const path = this.__.path
+        const { path } = this.__
         if (!path) return []
         return curve ? PathConvert.toCanvasData(path, true) : path
     }
@@ -269,6 +290,15 @@ export class UI extends Leaf implements IUI {
     @rewrite(PathDrawer.drawPathByData)
     public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
 
+    public __drawPathByBox(drawer: IPathDrawer): void {
+        const { x, y, width, height } = this.__layout.boxBounds
+        if (this.__.cornerRadius) {
+            drawer.roundRect(x, y, width, height, this.__.cornerRadius)
+        } else {
+            drawer.rect(x, y, width, height)
+        }
+    }
+
 
     // create
 

package/types/index.d.ts

@@ -1,64 +1,72 @@
-import { __String, __Number, __Boolean, IAround, IHitType, ICursorType, IPointData, ILeafDataOptions, IFindMethod, IPathCommandData, IPathString, ILeaferCanvas, IPathDrawer, IExportFileType, IRenderOptions, ILeaferImage, ICanvasContext2D, IWindingRule } from '@leafer/interface';
+import { IString, INumber, IBoolean, IAround, IHitType, ICursorType, IPointData, IPathCommandData, IPathString, ILeaferCanvas, IPathDrawer, IExportFileType, IRenderOptions, ILeaferImage, ICanvasContext2D, IWindingRule } from '@leafer/interface';
 import { Leaf } from '@leafer/core';
-import { IUI, IUIData, IUIInputData, IGroup, IBlendMode, IPaint, IPaintString, IStrokeAlign, IStrokeWidthString, IStrokeCap, IStrokeJoin, IDashPatternString, ICornerRadiusString, IShadowEffect, IShadowString, IBlurEffect, IGrayscaleEffect, IExportOptions, IExportResult, IGroupData, IGroupInputData, IBox, IBoxData, IOverflow, IBoxInputData, IFrame, IFrameData, IFrameInputData, IRect, IRectData, IRectInputData, IEllipse, IEllipseData, IEllipseInputData, IPolygon, IPolygonData, IPolygonInputData, IStar, IStarData, IStarInputData, ILine, ILineData, ILineInputData, IImage, IImageData, IImageInputData, ICanvas, ICanvasData, ICanvasInputData, IText, ITextData, IHitType as IHitType$1, IFontWeight, ITextCase, ITextDecoration, IUnitData, ITextAlign, IVerticalAlign, ITextWrap, ITextDrawData, ITextInputData, IPath, IPathData, IPathString as IPathString$1, IPathInputData, IPen, IPenData, IPathCommandData as IPathCommandData$1, IPenInputData } from '@leafer-ui/interface';
+import { IUI, IUIData, IUIInputData, ILeafer, IGroup, IBlendMode, IEditSize, IFill, IStroke, IStrokeAlign, IStrokeWidthString, IStrokeCap, IStrokeJoin, IDashPatternString, ICornerRadiusString, IShadowEffect, IShadowString, IBlurEffect, IGrayscaleEffect, IFindUIMethod, IExportOptions, IExportResult, IGroupData, IGroupInputData, IBox, IBoxData, IOverflow, IBoxInputData, IFrame, IFrameData, IFrameInputData, IRect, IRectData, IRectInputData, IEllipse, IEllipseData, IEllipseInputData, IPolygon, IPolygonData, IPolygonInputData, IStar, IStarData, IStarInputData, ILine, ILineData, ILineInputData, IImage, IImageData, IImageInputData, ICanvas, ICanvasData, ICanvasInputData, IText, ITextData, IHitType as IHitType$1, IFontWeight, ITextCase, ITextDecoration, IUnitData, ITextAlign, IVerticalAlign, ITextWrap, ITextDrawData, ITextInputData, IPath, IPathData, IPathString as IPathString$1, IPathInputData, IPen, IPenData, IPathCommandData as IPathCommandData$1, IPenInputData } from '@leafer-ui/interface';
 
 declare class UI extends Leaf implements IUI {
     __: IUIData;
-    proxyData?: IUIInputData;
+    proxyData: IUIInputData;
+    __proxyData?: IUIInputData;
+    get app(): ILeafer;
+    leafer?: ILeafer;
     parent?: IGroup;
-    id: __String;
-    name: __String;
-    className: __String;
+    isFrame?: boolean;
+    children?: IUI[];
+    id: IString;
+    name: IString;
+    className: IString;
     blendMode: IBlendMode;
-    opacity: __Number;
-    visible: __Boolean;
-    isMask: __Boolean;
-    isEraser?: __Boolean;
-    zIndex: __Number;
-    locked: __Boolean;
-    x: __Number;
-    y: __Number;
-    width: __Number;
-    height: __Number;
-    scaleX: __Number;
-    scaleY: __Number;
-    rotation: __Number;
-    skewX: __Number;
-    skewY: __Number;
+    opacity: INumber;
+    visible: IBoolean;
+    isMask: IBoolean;
+    isEraser?: IBoolean;
+    locked: IBoolean;
+    zIndex: INumber;
+    x: INumber;
+    y: INumber;
+    width: INumber;
+    height: INumber;
+    scaleX: INumber;
+    scaleY: INumber;
+    rotation: INumber;
+    skewX: INumber;
+    skewY: INumber;
     around: IAround;
-    draggable: __Boolean;
-    hittable: __Boolean;
+    draggable: IBoolean;
+    editable: IBoolean;
+    editSize?: IEditSize;
+    hittable: IBoolean;
     hitFill: IHitType;
     hitStroke: IHitType;
-    hitBox: __Boolean;
-    hitChildren: __Boolean;
-    hitSelf: __Boolean;
-    hitRadius: __Number;
+    hitBox: IBoolean;
+    hitChildren: IBoolean;
+    hitSelf: IBoolean;
+    hitRadius: INumber;
     cursor: ICursorType | ICursorType[];
-    fill: IPaint | IPaint[] | IPaintString;
-    stroke: IPaint | IPaint[] | IPaintString;
+    fill: IFill;
+    stroke: IStroke;
     strokeAlign: IStrokeAlign;
     strokeWidth: number | number[] | IStrokeWidthString;
     strokeCap: IStrokeCap;
     strokeJoin: IStrokeJoin;
-    dashPattern: __Number[] | IDashPatternString;
-    dashOffset: __Number;
-    miterLimit: __Number;
+    dashPattern: INumber[] | IDashPatternString;
+    dashOffset: INumber;
+    miterLimit: INumber;
     cornerRadius: number | number[] | ICornerRadiusString;
-    cornerSmoothing: __Number;
+    cornerSmoothing: INumber;
     shadow: IShadowEffect | IShadowEffect[] | IShadowString;
     innerShadow: IShadowEffect | IShadowEffect[] | IShadowString;
-    blur: __Number | IBlurEffect;
-    backgroundBlur: __Number | IBlurEffect;
-    grayscale: __Number | IGrayscaleEffect;
-    set scale(value: __Number | IPointData);
-    get scale(): __Number | IPointData;
+    blur: INumber | IBlurEffect;
+    backgroundBlur: INumber | IBlurEffect;
+    grayscale: INumber | IGrayscaleEffect;
+    set scale(value: INumber | IPointData);
+    get scale(): INumber | IPointData;
+    constructor(data?: IUIInputData);
     reset(_data?: IUIInputData): void;
     set(data: IUIInputData): void;
-    get(options?: ILeafDataOptions): IUIInputData;
-    getProxyData(): IUIInputData;
-    find(condition: number | string | IFindMethod): IUI[];
-    findOne(condition: number | string | IFindMethod): IUI;
+    get(): IUIInputData;
+    createProxyData(): IUIInputData;
+    find(condition: number | string | IFindUIMethod, options?: any): IUI[];
+    findOne(condition: number | string | IFindUIMethod, options?: any): IUI;
     getPath(curve?: boolean): IPathCommandData;
     getPathString(curve?: boolean): IPathString;
     __onUpdateSize(): void;
@@ -66,6 +74,7 @@ declare class UI extends Leaf implements IUI {
     __drawRenderPath(canvas: ILeaferCanvas): void;
     __drawPath(canvas: ILeaferCanvas): void;
     __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void;
+    __drawPathByBox(drawer: IPathDrawer): void;
     export(filename: IExportFileType | string, options?: IExportOptions | number | boolean): Promise<IExportResult>;
     clone(): IUI;
     static one(data: IUIInputData, x?: number, y?: number, width?: number, height?: number): IUI;
@@ -76,13 +85,13 @@ declare class Group extends UI implements IGroup {
     get __tag(): string;
     __: IGroupData;
     children: IUI[];
-    get resizeable(): boolean;
     set mask(child: IUI);
     get mask(): IUI;
     constructor(data?: IGroupInputData);
     __setBranch(): void;
     set(data: IUIInputData): void;
     toJSON(): IUIInputData;
+    __scaleResize(scaleX: number, scaleY: number): void;
     addAt(child: IUI, index: number): void;
     addAfter(child: IUI, after: IUI): void;
     addBefore(child: UI, before: IUI): void;
@@ -96,11 +105,12 @@ declare class Box extends Group implements IBox {
     get __tag(): string;
     __: IBoxData;
     overflow: IOverflow;
-    get resizeable(): boolean;
     constructor(data?: IBoxInputData);
+    __scaleResize(scaleX: number, scaleY: number): void;
     __updateStrokeSpread(): number;
     __updateRectRenderSpread(): number;
     __updateRenderSpread(): number;
+    __updateRectBoxBounds(): void;
     __updateBoxBounds(): void;
     __updateStrokeBounds(): void;
     __updateRenderBounds(): void;
@@ -125,15 +135,15 @@ declare class Rect extends UI implements IRect {
     get __tag(): string;
     __: IRectData;
     constructor(data?: IRectInputData);
-    __drawPathByData(drawer: IPathDrawer, _data: IPathCommandData): void;
+    __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void;
 }
 
 declare class Ellipse extends UI implements IEllipse {
     get __tag(): string;
     __: IEllipseData;
-    innerRadius: __Number;
-    startAngle: __Number;
-    endAngle: __Number;
+    innerRadius: INumber;
+    startAngle: INumber;
+    endAngle: INumber;
     constructor(data?: IEllipseInputData);
     __updatePath(): void;
 }
@@ -141,21 +151,21 @@ declare class Ellipse extends UI implements IEllipse {
 declare class Polygon extends UI implements IPolygon {
     get __tag(): string;
     __: IPolygonData;
-    sides: number;
+    sides: INumber;
     points: number[];
     curve: boolean | number;
-    get resizeable(): boolean;
     constructor(data?: IPolygonInputData);
     __updatePath(): void;
     __updateRenderPath(): void;
     __updateBoxBounds(): void;
+    __scaleResize(_scaleX: number, _scaleY: number): void;
 }
 
 declare class Star extends UI implements IStar {
     get __tag(): string;
     __: IStarData;
-    corners: __Number;
-    innerRadius: __Number;
+    corners: INumber;
+    innerRadius: INumber;
     constructor(data?: IStarInputData);
     __updatePath(): void;
 }
@@ -164,22 +174,22 @@ declare class Line extends UI implements ILine {
     get __tag(): string;
     __: ILineData;
     strokeAlign: IStrokeAlign;
-    height: __Number;
+    height: INumber;
     points: number[];
     curve: boolean | number;
-    get resizeable(): boolean;
     get toPoint(): IPointData;
     set toPoint(value: IPointData);
     constructor(data?: ILineInputData);
     __updatePath(): void;
     __updateRenderPath(): void;
     __updateBoxBounds(): void;
+    __scaleResize(scaleX: number, scaleY: number): void;
 }
 
 declare class Image extends Rect implements IImage {
     get __tag(): string;
     __: IImageData;
-    url: __String;
+    url: IString;
     get ready(): boolean;
     image: ILeaferImage;
     constructor(data?: IImageInputData);
@@ -190,9 +200,9 @@ declare class Image extends Rect implements IImage {
 declare class Canvas extends Rect implements ICanvas {
     get __tag(): string;
     __: ICanvasData;
-    width: __Number;
-    height: __Number;
-    pixelRatio: __Number;
+    width: INumber;
+    height: INumber;
+    pixelRatio: INumber;
     smooth: boolean;
     hitFill: IHitType;
     canvas: ILeaferCanvas;
@@ -208,22 +218,23 @@ declare class Canvas extends Rect implements ICanvas {
 declare class Text extends UI implements IText {
     get __tag(): string;
     __: ITextData;
-    width: __Number;
-    height: __Number;
+    width: INumber;
+    height: INumber;
     padding: number | number[];
+    fill: IFill;
     strokeAlign: IStrokeAlign;
     hitFill: IHitType$1;
-    text: __String;
-    fontFamily: __String;
-    fontSize: __Number;
+    text: IString;
+    fontFamily: IString;
+    fontSize: INumber;
     fontWeight: IFontWeight;
-    italic: __Boolean;
+    italic: IBoolean;
     textCase: ITextCase;
     textDecoration: ITextDecoration;
-    letterSpacing: __Number | IUnitData;
-    lineHeight: __Number | IUnitData;
-    paraIndent: __Number;
-    paraSpacing: __Number;
+    letterSpacing: INumber | IUnitData;
+    lineHeight: INumber | IUnitData;
+    paraIndent: INumber;
+    paraSpacing: INumber;
     textAlign: ITextAlign;
     verticalAlign: IVerticalAlign;
     textWrap: ITextWrap;
@@ -245,8 +256,8 @@ declare class Path extends UI implements IPath {
     path: IPathCommandData | IPathString$1;
     windingRule: IWindingRule;
     strokeAlign: IStrokeAlign;
-    get resizeable(): boolean;
     constructor(data?: IPathInputData);
+    __scaleResize(scaleX: number, scaleY: number): void;
     __updateBoxBounds(): void;
 }