@leafer-ui/display 1.0.0-beta.8 → 1.0.0-rc.2

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@leafer-ui/display",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-rc.2",
   "description": "@leafer-ui/display",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
+  "types": "types/index.d.ts",
   "files": [
-    "src"
+    "src",
+    "types",
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -19,14 +22,14 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-beta.8",
-    "@leafer-ui/data": "1.0.0-beta.8",
-    "@leafer-ui/text": "1.0.0-beta.8",
-    "@leafer-ui/display-module": "1.0.0-beta.8",
-    "@leafer-ui/decorator": "1.0.0-beta.8"
+    "@leafer/core": "1.0.0-rc.2",
+    "@leafer-ui/data": "1.0.0-rc.2",
+    "@leafer-ui/display-module": "1.0.0-rc.2",
+    "@leafer-ui/decorator": "1.0.0-rc.2",
+    "@leafer-ui/external": "1.0.0-rc.2"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.8",
-    "@leafer-ui/interface": "1.0.0-beta.8"
+    "@leafer/interface": "1.0.0-rc.2",
+    "@leafer-ui/interface": "1.0.0-rc.2"
   }
 }

package/src/Box.ts

@@ -20,10 +20,12 @@ export class Box extends Group implements IBox {
     public get __tag() { return 'Box' }
 
     @dataProcessor(BoxData)
-    public __: IBoxData
+    declare public __: IBoxData
 
     @affectRenderBoundsType('show')
-    public overflow: IOverflow
+    declare public overflow: IOverflow
+
+    public get resizeable(): boolean { return true }
 
     constructor(data?: IBoxInputData) {
         super(data)

package/src/Canvas.ts

@@ -14,13 +14,13 @@ export class Canvas extends Rect implements ICanvas {
     public get __tag() { return 'Canvas' }
 
     @dataProcessor(ImageData)
-    public __: ICanvasData
+    declare public __: ICanvasData
 
     @resizeType(100)
-    public width: __Number
+    declare public width: __Number
 
     @resizeType(100)
-    public height: __Number
+    declare public height: __Number
 
     @resizeType(Platform.devicePixelRatio)
     public pixelRatio: __Number
@@ -29,7 +29,7 @@ export class Canvas extends Rect implements ICanvas {
     public smooth: boolean
 
     @hitType('all')
-    public hitFill: IHitType
+    declare public hitFill: IHitType
 
     public canvas: ILeaferCanvas
 

package/src/Ellipse.ts

@@ -15,7 +15,7 @@ export class Ellipse extends UI implements IEllipse {
     public get __tag() { return 'Ellipse' }
 
     @dataProcessor(EllipseData)
-    public __: IEllipseData
+    declare public __: IEllipseData
 
     @pathType(0)
     public innerRadius: __Number

package/src/Frame.ts

@@ -13,10 +13,10 @@ export class Frame extends Box implements IFrame {
     public get __tag() { return 'Frame' }
 
     @dataProcessor(FrameData)
-    public __: IFrameData
+    declare public __: IFrameData
 
     @affectRenderBoundsType('hide')
-    public overflow: IOverflow
+    declare public overflow: IOverflow
 
     constructor(data?: IFrameInputData) {
         super(data)

package/src/Group.ts

@@ -1,6 +1,6 @@
-import { Branch, useModule, dataProcessor, registerUI } from '@leafer/core'
+import { Branch, useModule, dataProcessor, registerUI, UICreator } from '@leafer/core'
 
-import { IGroup, IGroupData, IGroupInputData, IUI } from '@leafer-ui/interface'
+import { IGroup, IGroupData, IGroupInputData, IUI, IUIInputData } from '@leafer-ui/interface'
 import { GroupData } from '@leafer-ui/data'
 
 import { UI } from './UI'
@@ -13,9 +13,11 @@ export class Group extends UI implements IGroup {
     public get __tag() { return 'Group' }
 
     @dataProcessor(GroupData)
-    public __: IGroupData
+    declare public __: IGroupData
 
-    public children: IUI[]
+    declare public children: IUI[]
+
+    public get resizeable(): boolean { return false }
 
     public set mask(child: IUI) {
         if (this.__hasMask) this.__removeMask()
@@ -30,10 +32,46 @@ export class Group extends UI implements IGroup {
 
     constructor(data?: IGroupInputData) {
         super(data)
+        this.__setBranch()
+    }
+
+    public __setBranch(): void {
         this.isBranch = true
-        this.children = []
+        if (!this.children) this.children = []
+    }
+
+    // data
+
+    public set(data: IUIInputData): void {
+        if (data.children) {
+            const { children } = data
+            delete data.children
+
+            if (!this.children) this.__setBranch()
+
+            super.set(data)
+
+            let child: IUI
+            children.forEach(childData => {
+                child = UICreator.get(childData.tag, childData) as IUI
+                this.add(child)
+            })
+
+            data.children = children
+
+        } else {
+            super.set(data)
+        }
     }
 
+    public toJSON(): IUIInputData {
+        const data = super.toJSON()
+        data.children = this.children.map(child => child.toJSON())
+        return data
+    }
+
+    // add
+
     public addAt(child: IUI, index: number): void {
         this.add(child, index)
     }
@@ -50,8 +88,10 @@ export class Group extends UI implements IGroup {
 
     public add(_child: IUI, _index?: number): void { }
 
-    public remove(_child?: IUI): void { }
+    public addMany(..._children: IUI[]): void { }
+
+    public remove(_child?: IUI, _destroy?: boolean): void { }
 
-    public removeAll(): void { }
+    public removeAll(_destroy?: boolean): void { }
 
 }

package/src/Image.ts

@@ -13,7 +13,7 @@ export class Image extends Rect implements IImage {
     public get __tag() { return 'Image' }
 
     @dataProcessor(ImageData)
-    public __: IImageData
+    declare public __: IImageData
 
     @boundsType('')
     public url: __String
@@ -41,7 +41,7 @@ export class Image extends Rect implements IImage {
 
         if (update) {
             if (this.image) this.image = null
-            this.fill = { type: 'image', mode: 'strench', url }
+            this.fill = url ? { type: 'image', mode: 'strench', url } : undefined
             this.once(ImageEvent.LOADED, (e) => this.image = e.image)
         }
 

package/src/Line.ts

@@ -1,5 +1,5 @@
-import { IPointData, ITwoPointBoundsData, __Number } from '@leafer/interface'
-import { PathCommandDataHelper, PointHelper, TwoPointBoundsHelper, boundsType, affectStrokeBoundsType, dataProcessor, registerUI } from '@leafer/core'
+import { IPointData, __Number } from '@leafer/interface'
+import { PathBounds, PathCommandDataHelper, PointHelper, boundsType, pathType, affectStrokeBoundsType, dataProcessor, registerUI } from '@leafer/core'
 
 import { ILine, ILineData, ILineInputData, IStrokeAlign } from '@leafer-ui/interface'
 import { LineData } from '@leafer-ui/data'
@@ -7,11 +7,9 @@ import { LineData } from '@leafer-ui/data'
 import { UI } from './UI'
 
 
-const { moveTo, lineTo } = PathCommandDataHelper
+const { moveTo, lineTo, drawPoints } = PathCommandDataHelper
 const { rotate, getAngle, getDistance, defaultPoint } = PointHelper
-const { setPoint, addPoint, toBounds } = TwoPointBoundsHelper
-
-const pointBounds = {} as ITwoPointBoundsData
+const { toBounds } = PathBounds
 
 
 @registerUI()
@@ -20,25 +18,29 @@ export class Line extends UI implements ILine {
     public get __tag() { return 'Line' }
 
     @dataProcessor(LineData)
-    public __: ILineData
-
-    @boundsType()
-    public rotation: __Number
+    declare public __: ILineData
 
     @affectStrokeBoundsType('center')
-    public strokeAlign: IStrokeAlign
+    declare public strokeAlign: IStrokeAlign
 
-    protected __toPoint: IPointData
+    @boundsType(0)
+    declare public height: __Number
 
-    public get toPoint(): IPointData {
-        if (this.__toPoint && !this.__layout.boxChanged) return this.__toPoint
+    @pathType()
+    public points: number[]
+
+    @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 }
 
         if (width) to.x = width
         if (rotation) rotate(to, rotation)
-        this.__toPoint = to
 
         return to
     }
@@ -57,16 +59,34 @@ export class Line extends UI implements ILine {
     public __updatePath(): void {
 
         const path: number[] = this.__.path = []
-        moveTo(path, 0, 0)
 
-        const to = this.toPoint
-        lineTo(path, to.x, to.y)
+        if (this.__.points) {
+
+            drawPoints(path, this.__.points, false)
+
+        } else {
+
+            moveTo(path, 0, 0)
+            lineTo(path, this.width, 0)
+        }
+
+    }
+
+    public __updateRenderPath(): void {
+        if (this.__.points && this.__.curve) {
+            drawPoints(this.__.__pathForRender = [], this.__.points, this.__.curve, false)
+        } else {
+            super.__updateRenderPath()
+        }
     }
 
     public __updateBoxBounds(): void {
-        setPoint(pointBounds, 0, 0)
-        addPoint(pointBounds, this.__toPoint.x, this.__toPoint.y)
-        toBounds(pointBounds, this.__layout.boxBounds)
+        if (this.points) {
+            toBounds(this.__.path, this.__layout.boxBounds)
+            this.__updateNaturalSize()
+        } else {
+            super.__updateBoxBounds()
+        }
     }
 
 }

package/src/Path.ts

@@ -15,7 +15,7 @@ export class Path extends UI implements IPath {
     public get __tag() { return 'Path' }
 
     @dataProcessor(PathData)
-    public __: IPathData
+    declare public __: IPathData
 
     @pathType()
     public path: IPathCommandData | IPathString
@@ -24,7 +24,9 @@ export class Path extends UI implements IPath {
     public windingRule: IWindingRule
 
     @affectStrokeBoundsType('center')
-    public strokeAlign: IStrokeAlign
+    declare public strokeAlign: IStrokeAlign
+
+    public get resizeable(): boolean { return false }
 
     constructor(data?: IPathInputData) {
         super(data)
@@ -32,6 +34,7 @@ export class Path extends UI implements IPath {
 
     public __updateBoxBounds(): void {
         toBounds(this.__.path, this.__layout.boxBounds)
+        this.__updateNaturalSize()
     }
 
 }

package/src/Pen.ts

@@ -1,6 +1,6 @@
 import { PathCreator, dataProcessor, registerUI, useModule } from '@leafer/core'
 
-import { IPenData, IPenInputData, IPathInputData, IPathCommandData, IPath } from '@leafer-ui/interface'
+import { IPenData, IPenInputData, IPathInputData, IPathCommandData, IPath, IPen } from '@leafer-ui/interface'
 import { PenData } from '@leafer-ui/data'
 
 import { Group } from './Group'
@@ -9,12 +9,12 @@ import { Path } from './Path'
 
 @useModule(PathCreator, ['beginPath'])
 @registerUI()
-export class Pen extends Group {
+export class Pen extends Group implements IPen {
 
     public get __tag() { return 'Pen' }
 
     @dataProcessor(PenData)
-    public __: IPenData
+    declare public __: IPenData
 
     public pathElement: IPath
     public pathStyle: IPathInputData
@@ -66,13 +66,19 @@ export class Pen extends Group {
 
     // 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 drawEllipse(_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 drawArc(_x: number, _y: number, _radius: number, _startAngle?: number, _endAngle?: number, _anticlockwise?: boolean): Pen { return this }
+
+    public drawPoints(_points: number[], _curve?: boolean | number, _close?: boolean): Pen { return this }
 
 
     public paint(): void {
         this.pathElement.forceUpdate('path')
     }
 
+    public clear(): void {
+        this.removeAll(true)
+    }
+
 }

package/src/Polygon.ts

@@ -1,5 +1,5 @@
 import { __Number } from '@leafer/interface'
-import { PathCommandDataHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
+import { PathBounds, PathCommandDataHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IPolygon, IPolygonData, IPolygonInputData } from '@leafer-ui/interface'
 import { PolygonData } from '@leafer-ui/data'
@@ -8,8 +8,8 @@ import { UI } from './UI'
 
 
 const { sin, cos, PI } = Math
-const { moveTo, lineTo, closePath } = PathCommandDataHelper
-
+const { moveTo, lineTo, closePath, drawPoints } = PathCommandDataHelper
+const { toBounds } = PathBounds
 
 @registerUI()
 export class Polygon extends UI implements IPolygon {
@@ -17,28 +17,59 @@ export class Polygon extends UI implements IPolygon {
     public get __tag() { return 'Polygon' }
 
     @dataProcessor(PolygonData)
-    public __: IPolygonData
+    declare public __: IPolygonData
 
     @pathType(3)
     sides: number
 
+    @pathType()
+    points: number[]
+
+    @pathType(0)
+    curve: boolean | number
+
+    public get resizeable(): boolean { return !this.points }
+
     constructor(data?: IPolygonInputData) {
         super(data)
     }
 
     public __updatePath(): void {
 
-        const { width, height, sides } = this.__
-        const rx = width / 2, ry = height / 2
-
         const path: number[] = this.__.path = []
-        moveTo(path, rx, 0)
 
-        for (let i = 1; i < sides; i++) {
-            lineTo(path, rx + rx * sin((i * 2 * PI) / sides), ry - ry * cos((i * 2 * PI) / sides))
+        if (this.__.points) {
+
+            drawPoints(path, this.__.points, false, true)
+
+        } else {
+
+            const { width, height, sides } = this.__
+            const rx = width / 2, ry = height / 2
+
+            moveTo(path, rx, 0)
+
+            for (let i = 1; i < sides; i++) {
+                lineTo(path, rx + rx * sin((i * 2 * PI) / sides), ry - ry * cos((i * 2 * PI) / sides))
+            }
+
         }
 
         closePath(path)
     }
 
+
+    public __updateRenderPath(): void {
+        if (this.__.points && this.__.curve) {
+            drawPoints(this.__.__pathForRender = [], this.__.points, this.__.curve, true)
+            this.__updateNaturalSize()
+        } else {
+            super.__updateRenderPath()
+        }
+    }
+
+    public __updateBoxBounds(): void {
+        this.__.points ? toBounds(this.__.path, this.__layout.boxBounds) : super.__updateBoxBounds()
+    }
+
 }

package/src/Rect.ts

@@ -15,7 +15,7 @@ export class Rect extends UI implements IRect {
     public get __tag() { return 'Rect' }
 
     @dataProcessor(RectData)
-    public __: IRectData
+    declare public __: IRectData
 
     constructor(data?: IRectInputData) {
         super(data)

package/src/Star.ts

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

package/src/Text.ts

@@ -3,7 +3,8 @@ import { BoundsHelper, boundsType, dataProcessor, registerUI, affectStrokeBounds
 
 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 { TextConvert } from '@leafer-ui/text'
+
+import { TextConvert } from '@leafer-ui/external'
 
 import { UI } from './UI'
 
@@ -16,20 +17,20 @@ export class Text extends UI implements IText {
     public get __tag() { return 'Text' }
 
     @dataProcessor(TextData)
-    public __: ITextData
+    declare public __: ITextData
 
     // size
     @boundsType(0)
-    public width: __Number
+    declare public width: __Number
 
     @boundsType(0)
-    public height: __Number
+    declare public height: __Number
 
     @boundsType(0)
     public padding: number | number[]
 
     @affectStrokeBoundsType('outside')
-    public strokeAlign: IStrokeAlign
+    declare public strokeAlign: IStrokeAlign
 
     @boundsType('')
     public text: __String
@@ -84,11 +85,17 @@ export class Text extends UI implements IText {
 
     public __drawHitPath(canvas: ILeaferCanvas): void {
         const { __lineHeight, __baseLine, __textDrawData: data } = this.__
+
         canvas.beginPath()
-        data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight))
+
+        if (this.__.__letterSpacing < 0) {
+            this.__drawPathByData(canvas)
+        } else {
+            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight))
+        }
     }
 
-    public __drawPathByData(drawer: IPathDrawer, _data: IPathCommandData): void {
+    public __drawPathByData(drawer: IPathDrawer, _data?: IPathCommandData): void {
         const { x, y, width, height } = this.__layout.boxBounds
         drawer.rect(x, y, width, height)
     }
@@ -107,7 +114,7 @@ export class Text extends UI implements IText {
 
         const data = this.__
         const layout = this.__layout
-        const { width, height, lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase } = data
+        const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase } = data
 
         // compute
 
@@ -123,6 +130,9 @@ export class Text extends UI implements IText {
 
         if (data.__lineHeight < fontSize) spread(bounds, fontSize / 2)
 
+        const width = data.__getInput('width')
+        const height = data.__getInput('height')
+
         if (width && height) {
             super.__updateBoxBounds()
         } else {
@@ -130,6 +140,7 @@ export class Text extends UI implements IText {
             b.y = height ? 0 : bounds.y
             b.width = width ? width : bounds.width
             b.height = height ? height : bounds.height
+            this.__updateNaturalSize()
         }
 
         const contentBounds = includes(b, bounds) ? b : bounds

package/src/UI.ts

@@ -1,7 +1,7 @@
-import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, __Number, __Boolean, __String, IPathString, IExportFileType } from '@leafer/interface'
-import { Leaf, PathDrawer, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, maskType, dataProcessor, useModule, rewrite, rewriteAble, UICreator, PathCorner, hitType, strokeType, PathConvert, eraserType } from '@leafer/core'
+import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, __Number, __Boolean, __String, IPathString, IExportFileType, IPointData, ICursorType, IAround } from '@leafer/interface'
+import { Leaf, PathDrawer, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, maskType, dataProcessor, useModule, rewrite, rewriteAble, UICreator, PathCorner, hitType, strokeType, PathConvert, eraserType, cursorType } from '@leafer/core'
 
-import { IUI, IShadowEffect, IBlurEffect, IPaint, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IPaintString, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUITagInputData, IUIInputData, IExportOptions, IExportResult } from '@leafer-ui/interface'
+import { IUI, IShadowEffect, IBlurEffect, IPaint, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IPaintString, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUIInputData, IUIBaseInputData, IExportOptions, IExportResult } from '@leafer-ui/interface'
 import { effectType } from '@leafer-ui/decorator'
 
 import { UIData } from '@leafer-ui/data'
@@ -17,9 +17,9 @@ import { Export, Paint } from '@leafer-ui/external'
 export class UI extends Leaf implements IUI {
 
     @dataProcessor(UIData)
-    public __: IUIData
+    declare public __: IUIData
 
-    public parent?: IGroup
+    declare public parent?: IGroup
 
     // ---
 
@@ -90,6 +90,10 @@ export class UI extends Leaf implements IUI {
     public skewY: __Number
 
 
+    @positionType()
+    public around: IAround
+
+
     @dataType(false)
     public draggable: __Boolean
 
@@ -109,6 +113,12 @@ export class UI extends Leaf implements IUI {
     @hitType(true)
     public hitSelf: __Boolean
 
+    @hitType()
+    public hitRadius: __Number
+
+    @cursorType('default')
+    public cursor: ICursorType | ICursorType[]
+
     // ---
 
 
@@ -170,16 +180,31 @@ export class UI extends Leaf implements IUI {
     public grayscale: __Number | IGrayscaleEffect
 
 
-    constructor(data?: IUIInputData) {
+    public set scale(value: __Number | IPointData) {
+        if (typeof value === 'number') {
+            this.scaleX = this.scaleY = value
+        } else {
+            this.scaleX = value.x
+            this.scaleY = value.y
+        }
+    }
+
+    public get scale(): __Number | IPointData {
+        const { scaleX, scaleY } = this
+        return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX
+    }
+
+
+    constructor(data?: IUIBaseInputData) {
         super(data)
     }
 
 
-    public set(data: IUITagInputData): void {
+    public set(data: IUIInputData): void {
         Object.assign(this, data)
     }
 
-    public get(): IUITagInputData {
+    public get(): IUIInputData {
         return this.__.__getInputData()
     }
 
@@ -198,8 +223,8 @@ export class UI extends Leaf implements IUI {
     public __onUpdateSize(): void {
         if (this.__.__input) {
             const { fill, stroke } = this.__.__input
-            if (fill) Paint.computeFill(this)
-            if (stroke) Paint.computeStroke(this)
+            if (fill) Paint.compute(this, 'fill')
+            if (stroke) Paint.compute(this, 'stroke')
         }
     }
 
@@ -227,8 +252,17 @@ export class UI extends Leaf implements IUI {
         return Export.export(this, filename, options)
     }
 
-    static one(data: IUITagInputData, x?: number, y?: number, width?: number, height?: number): IUI {
+    public clone(): IUI {
+        return UI.one(this.toJSON())
+    }
+
+    static one(data: IUIInputData, x?: number, y?: number, width?: number, height?: number): IUI {
         return UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height) as IUI
     }
 
+    public destroy(): void {
+        this.fill = this.stroke = null
+        super.destroy()
+    }
+
 }

package/types/index.d.ts

@@ -0,0 +1,272 @@
+import { __String, __Number, __Boolean, IAround, IHitType, ICursorType, IPointData, IPathCommandData, IPathString, ILeaferCanvas, IPathDrawer, IExportFileType, IRenderOptions, ILeaferImage, ICanvasContext2D, IWindingRule } from '@leafer/interface';
+import { Leaf } from '@leafer/core';
+import { IUI, IUIData, IGroup, IBlendMode, IPaint, IPaintString, IStrokeAlign, IStrokeWidthString, IStrokeCap, IStrokeJoin, IDashPatternString, ICornerRadiusString, IShadowEffect, IShadowString, IBlurEffect, IGrayscaleEffect, IUIBaseInputData, IUIInputData, 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, IFontWeight, ITextCase, ITextDecoration, IUnitData, ITextAlign, IVerticalAlign, 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;
+    parent?: IGroup;
+    id: __String;
+    name: __String;
+    className: __String;
+    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;
+    around: IAround;
+    draggable: __Boolean;
+    hittable: __Boolean;
+    hitFill: IHitType;
+    hitStroke: IHitType;
+    hitChildren: __Boolean;
+    hitSelf: __Boolean;
+    hitRadius: __Number;
+    cursor: ICursorType | ICursorType[];
+    fill: IPaint | IPaint[] | IPaintString;
+    stroke: IPaint | IPaint[] | IPaintString;
+    strokeAlign: IStrokeAlign;
+    strokeWidth: number | number[] | IStrokeWidthString;
+    strokeCap: IStrokeCap;
+    strokeJoin: IStrokeJoin;
+    dashPattern: __Number[] | IDashPatternString;
+    dashOffset: __Number;
+    miterLimit: __Number;
+    cornerRadius: number | number[] | ICornerRadiusString;
+    cornerSmoothing: __Number;
+    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;
+    constructor(data?: IUIBaseInputData);
+    set(data: IUIInputData): void;
+    get(): IUIInputData;
+    getPath(curve?: boolean): IPathCommandData;
+    getPathString(curve?: boolean): IPathString;
+    __onUpdateSize(): void;
+    __updateRenderPath(): void;
+    __drawRenderPath(canvas: ILeaferCanvas): void;
+    __drawPath(canvas: ILeaferCanvas): void;
+    __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): 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;
+    destroy(): void;
+}
+
+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;
+    addAt(child: IUI, index: number): void;
+    addAfter(child: IUI, after: IUI): void;
+    addBefore(child: UI, before: IUI): void;
+    add(_child: IUI, _index?: number): void;
+    addMany(..._children: IUI[]): void;
+    remove(_child?: IUI, _destroy?: boolean): void;
+    removeAll(_destroy?: boolean): void;
+}
+
+declare class Box extends Group implements IBox {
+    get __tag(): string;
+    __: IBoxData;
+    overflow: IOverflow;
+    get resizeable(): boolean;
+    constructor(data?: IBoxInputData);
+    __updateStrokeSpread(): number;
+    __updateRectRenderSpread(): number;
+    __updateRenderSpread(): number;
+    __updateBoxBounds(): void;
+    __updateStrokeBounds(): void;
+    __updateRenderBounds(): void;
+    __updateRectRenderBounds(): void;
+    __updateRectChange(): void;
+    __updateChange(): void;
+    __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void;
+    __renderRect(_canvas: ILeaferCanvas, _options: IRenderOptions): void;
+    __renderGroup(_canvas: ILeaferCanvas, _options: IRenderOptions): void;
+    __render(canvas: ILeaferCanvas, options: IRenderOptions): void;
+    __drawAfterFill(canvas: ILeaferCanvas, options: IRenderOptions): void;
+}
+
+declare class Frame extends Box implements IFrame {
+    get __tag(): string;
+    __: IFrameData;
+    overflow: IOverflow;
+    constructor(data?: IFrameInputData);
+}
+
+declare class Rect extends UI implements IRect {
+    get __tag(): string;
+    __: IRectData;
+    constructor(data?: IRectInputData);
+    __drawPathByData(drawer: IPathDrawer, _data: IPathCommandData): void;
+}
+
+declare class Ellipse extends UI implements IEllipse {
+    get __tag(): string;
+    __: IEllipseData;
+    innerRadius: __Number;
+    startAngle: __Number;
+    endAngle: __Number;
+    constructor(data?: IEllipseInputData);
+    __updatePath(): void;
+}
+
+declare class Polygon extends UI implements IPolygon {
+    get __tag(): string;
+    __: IPolygonData;
+    sides: number;
+    points: number[];
+    curve: boolean | number;
+    get resizeable(): boolean;
+    constructor(data?: IPolygonInputData);
+    __updatePath(): void;
+    __updateRenderPath(): void;
+    __updateBoxBounds(): void;
+}
+
+declare class Star extends UI implements IStar {
+    get __tag(): string;
+    __: IStarData;
+    corners: __Number;
+    innerRadius: __Number;
+    constructor(data?: IStarInputData);
+    __updatePath(): void;
+}
+
+declare class Line extends UI implements ILine {
+    get __tag(): string;
+    __: ILineData;
+    strokeAlign: IStrokeAlign;
+    height: __Number;
+    points: number[];
+    curve: boolean | number;
+    get resizeable(): boolean;
+    get toPoint(): IPointData;
+    set toPoint(value: IPointData);
+    constructor(data?: ILineInputData);
+    __updatePath(): void;
+    __updateRenderPath(): void;
+    __updateBoxBounds(): void;
+}
+
+declare class Image extends Rect implements IImage {
+    get __tag(): string;
+    __: IImageData;
+    url: __String;
+    get ready(): boolean;
+    image: ILeaferImage;
+    constructor(data?: IImageInputData);
+    __updateBoxBounds(): void;
+    destroy(): void;
+}
+
+declare class Canvas extends Rect implements ICanvas {
+    get __tag(): string;
+    __: ICanvasData;
+    width: __Number;
+    height: __Number;
+    pixelRatio: __Number;
+    smooth: boolean;
+    hitFill: IHitType;
+    canvas: ILeaferCanvas;
+    context: ICanvasContext2D;
+    constructor(data?: ICanvasInputData);
+    draw(ui: IUI, offset?: IPointData, scale?: number | IPointData, rotation?: number): void;
+    paint(): void;
+    __drawAfterFill(canvas: ILeaferCanvas, _options: IRenderOptions): void;
+    __updateSize(): void;
+    destroy(): void;
+}
+
+declare class Text extends UI implements IText {
+    get __tag(): string;
+    __: ITextData;
+    width: __Number;
+    height: __Number;
+    padding: number | number[];
+    strokeAlign: IStrokeAlign;
+    text: __String;
+    fontFamily: __String;
+    fontSize: __Number;
+    fontWeight: IFontWeight;
+    italic: __Boolean;
+    textCase: ITextCase;
+    textDecoration: ITextDecoration;
+    letterSpacing: __Number | IUnitData;
+    lineHeight: __Number | IUnitData;
+    paraIndent: __Number;
+    paraSpacing: __Number;
+    textAlign: ITextAlign;
+    verticalAlign: IVerticalAlign;
+    textOverflow: IOverflow | string;
+    get textDrawData(): ITextDrawData;
+    constructor(data?: ITextInputData);
+    __drawHitPath(canvas: ILeaferCanvas): void;
+    __drawPathByData(drawer: IPathDrawer, _data?: IPathCommandData): void;
+    __drawRenderPath(canvas: ILeaferCanvas): void;
+    __updateTextDrawData(): void;
+    __updateBoxBounds(): void;
+    __updateRenderSpread(): number;
+    __updateRenderBounds(): void;
+}
+
+declare class Path extends UI implements IPath {
+    get __tag(): string;
+    __: IPathData;
+    path: IPathCommandData | IPathString$1;
+    windingRule: IWindingRule;
+    strokeAlign: IStrokeAlign;
+    get resizeable(): boolean;
+    constructor(data?: IPathInputData);
+    __updateBoxBounds(): void;
+}
+
+declare class Pen extends Group implements IPen {
+    get __tag(): string;
+    __: IPenData;
+    pathElement: IPath;
+    pathStyle: IPathInputData;
+    path: IPathCommandData$1;
+    constructor(data?: IPenInputData);
+    setStyle(data: IPathInputData): Pen;
+    beginPath(): Pen;
+    moveTo(_x: number, _y: number): Pen;
+    lineTo(_x: number, _y: number): Pen;
+    bezierCurveTo(_x1: number, _y1: number, _x2: number, _y2: number, _x: number, _y: number): Pen;
+    quadraticCurveTo(_x1: number, _y1: number, _x: number, _y: number): Pen;
+    closePath(): Pen;
+    rect(_x: number, _y: number, _width: number, _height: number): Pen;
+    roundRect(_x: number, _y: number, _width: number, _height: number, _cornerRadius: number | number[]): Pen;
+    ellipse(_x: number, _y: number, _radiusX: number, _radiusY: number, _rotation?: number, _startAngle?: number, _endAngle?: number, _anticlockwise?: boolean): Pen;
+    arc(_x: number, _y: number, _radius: number, _startAngle?: number, _endAngle?: number, _anticlockwise?: boolean): Pen;
+    arcTo(_x1: number, _y1: number, _x2: number, _y2: number, _radius: number): Pen;
+    drawEllipse(_x: number, _y: number, _radiusX: number, _radiusY: number, _rotation?: number, _startAngle?: number, _endAngle?: number, _anticlockwise?: boolean): Pen;
+    drawArc(_x: number, _y: number, _radius: number, _startAngle?: number, _endAngle?: number, _anticlockwise?: boolean): Pen;
+    drawPoints(_points: number[], _curve?: boolean | number, _close?: boolean): Pen;
+    paint(): void;
+    clear(): void;
+}
+
+export { Box, Canvas, Ellipse, Frame, Group, Image, Line, Path, Pen, Polygon, Rect, Star, Text, UI };