@leafer-ui/display 1.9.4 → 1.9.6

package/package.json

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

package/src/Box.ts

@@ -13,7 +13,7 @@ const rect = Rect.prototype, group = Group.prototype
 
 @rewriteAble()
 @registerUI()
-export class Box extends Group implements IBox {
+export class Box<TInputData = IBoxInputData> extends Group<TInputData> implements IBox {
 
     public get __tag() { return 'Box' }
 
@@ -46,7 +46,7 @@ export class Box extends Group implements IBox {
     public scroller?: IScroller
     public hasScroller?: boolean
 
-    constructor(data?: IBoxInputData) {
+    constructor(data?: TInputData) {
         super(data)
         this.__layout.renderChanged || this.__layout.renderChange()
     }

package/src/Canvas.ts

@@ -9,7 +9,7 @@ import { Rect } from './Rect'
 
 
 @registerUI()
-export class Canvas extends Rect implements ICanvas {
+export class Canvas<TInputData = ICanvasInputData> extends Rect<TInputData> implements ICanvas {
 
     public get __tag() { return 'Canvas' }
 
@@ -42,10 +42,10 @@ export class Canvas extends Rect implements ICanvas {
 
     public url?: string // 用于临时加载canvas的base64数据，完成后会置空
 
-    constructor(data?: ICanvasInputData) {
+    constructor(data?: TInputData) {
         super(data)
         this.canvas = Creator.canvas(this.__ as ILeaferCanvasConfig)
-        if (data && data.url) this.drawImage(data.url)
+        if (data && (data as ICanvasInputData).url) this.drawImage((data as ICanvasInputData).url)
     }
 
     public drawImage(url: string): void {

package/src/Ellipse.ts

@@ -10,7 +10,7 @@ import { UI } from './UI'
 const { moveTo, closePath, ellipse } = PathCommandDataHelper
 
 @registerUI()
-export class Ellipse extends UI implements IEllipse {
+export class Ellipse<TInputData = IEllipseInputData> extends UI<TInputData> implements IEllipse {
 
     public get __tag() { return 'Ellipse' }
 
@@ -26,9 +26,6 @@ export class Ellipse extends UI implements IEllipse {
     @pathType(0)
     public endAngle?: INumber
 
-    constructor(data?: IEllipseInputData) {
-        super(data)
-    }
 
     public __updatePath(): void {
 

package/src/Frame.ts

@@ -7,7 +7,7 @@ import { Box } from './Box'
 
 
 @registerUI()
-export class Frame extends Box implements IFrame {
+export class Frame<TInputData = IFrameInputData> extends Box<TInputData> implements IFrame {
 
     public get __tag() { return 'Frame' }
 
@@ -22,7 +22,4 @@ export class Frame extends Box implements IFrame {
     @affectRenderBoundsType('hide')
     declare public overflow?: IOverflow
 
-    constructor(data?: IFrameInputData) {
-        super(data)
-    }
 }

package/src/Group.ts

@@ -9,7 +9,7 @@ import { UI } from './UI'
 
 @useModule(Branch)
 @registerUI()
-export class Group extends UI implements IGroup {   // tip: rewrited Box
+export class Group<TInputData = IGroupInputData> extends UI<TInputData> implements IGroup {   // tip: rewrited Box
 
     public get __tag() { return 'Group' }
 
@@ -31,9 +31,6 @@ export class Group extends UI implements IGroup {   // tip: rewrited Box
 
     public childlessJSON?: boolean
 
-    constructor(data?: IGroupInputData) {
-        super(data)
-    }
 
     public reset(data?: IGroupInputData): void {
         this.__setBranch()

package/src/Image.ts

@@ -8,7 +8,7 @@ import { Rect } from './Rect'
 
 
 @registerUI()
-export class Image extends Rect implements IImage {
+export class Image<TInputData = IImageInputData> extends Rect<TInputData> implements IImage {
 
     public get __tag() { return 'Image' }
 
@@ -22,10 +22,6 @@ export class Image extends Rect implements IImage {
 
     public get image(): ILeaferImage { const { fill } = this.__; return isArray(fill) && fill[0].image }
 
-    constructor(data?: IImageInputData) {
-        super(data)
-    }
-
 }
 
 export const MyImage = Image

package/src/Leafer.ts

@@ -1,5 +1,5 @@
-import { ILeaferCanvas, IRenderer, ILayouter, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IAutoBounds, IScreenSizeData, IResizeEvent, IEventListenerId, ITimer, IValue, IObject, IControl, IPointData, ILeaferType, ICursorType, IBoundsData, INumber, IZoomType, IZoomOptions, IFourNumber, IBounds, IClientPointData, ITransition } from '@leafer/interface'
-import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, ImageManager, Resource, DataHelper, Creator, Run, Debug, RenderEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, WaitHelper, WatchEvent, Bounds, LeafList, Plugin, getBoundsData } from '@leafer/core'
+import { ILeaferCanvas, IRenderer, ILayouter, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IAutoBounds, IScreenSizeData, IResizeEvent, IEventListenerId, ITimer, IValue, IObject, IControl, IPointData, ILeaferType, ICursorType, IBoundsData, INumber, IZoomType, IZoomOptions, IFourNumber, IBounds, IClientPointData, ITransition, ICanvasSizeAttr, ILeaferMode } from '@leafer/interface'
+import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, ImageManager, Resource, DataHelper, Creator, Run, Debug, RenderEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, WaitHelper, WatchEvent, Bounds, LeafList, Plugin, getBoundsData, dataType } from '@leafer/core'
 
 import { ILeaferInputData, ILeaferData, IFunction, IUIInputData, ILeafer, IApp, IEditorBase } from '@leafer-ui/interface'
 import { LeaferData } from '@leafer-ui/data'
@@ -23,6 +23,9 @@ export class Leafer extends Group implements ILeafer {
     @boundsType()
     declare public pixelRatio?: INumber
 
+    @dataType('normal')
+    public mode: ILeaferMode
+
     public get isApp(): boolean { return false }
     public get app(): ILeafer { return this.parent || this }
 
@@ -65,6 +68,7 @@ export class Leafer extends Group implements ILeafer {
         hittable: true,
         smooth: true,
         lazySpeard: 100,
+        // maxFPS: 120, // 最大的运行帧率
         // pixelSnap: false // 是否对齐像素，避免图片存在浮点坐标导致模糊
     }
 
@@ -123,7 +127,7 @@ export class Leafer extends Group implements ILeafer {
         )
 
         if (this.isApp) this.__setApp()
-        this.__checkAutoLayout(config, parentApp)
+        this.__checkAutoLayout()
         this.view = canvas.view
 
         // interaction / manager
@@ -247,7 +251,8 @@ export class Leafer extends Group implements ILeafer {
         this.__level = 1
     }
 
-    protected __checkAutoLayout(config: ILeaferConfig, parentApp?: IApp): void {
+    protected __checkAutoLayout(): void {
+        const { config, parentApp } = this
         if (!parentApp) {
             if (!config.width || !config.height) this.autoLayout = new AutoBounds(config)
             this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this))
@@ -258,7 +263,7 @@ export class Leafer extends Group implements ILeafer {
         if (this.canvas) {
             if (canvasSizeAttrs.includes(attrName)) {
                 // if (!newValue) debug.warn(attrName + ' is 0')
-                this.__changeCanvasSize(attrName, newValue as number)
+                this.__changeCanvasSize(attrName as ICanvasSizeAttr, newValue as number)
             } else if (attrName === 'fill') {
                 this.__changeFill(newValue as string)
             } else if (attrName === 'hittable') {
@@ -266,7 +271,7 @@ export class Leafer extends Group implements ILeafer {
             } else if (attrName === 'zIndex') {
                 this.canvas.zIndex = newValue as any
                 setTimeout(() => this.parent && this.parent.__updateSortChildren())
-            }
+            } else if (attrName === 'mode') this.emit(LeaferEvent.UPDATE_MODE, { mode: newValue })
         }
         return super.__setAttr(attrName, newValue)
     }
@@ -276,10 +281,11 @@ export class Leafer extends Group implements ILeafer {
         return super.__getAttr(attrName)
     }
 
-    protected __changeCanvasSize(attrName: string, newValue: number): void {
-        const data = DataHelper.copyAttrs({}, this.canvas, canvasSizeAttrs)
-        data[attrName] = (this.config as IObject)[attrName] = newValue
-        if (newValue) this.canvas.stopAutoLayout()
+    protected __changeCanvasSize(attrName: ICanvasSizeAttr, newValue: number): void {
+        const { config, canvas } = this
+        const data = DataHelper.copyAttrs({}, canvas, canvasSizeAttrs)
+        data[attrName] = config[attrName] = newValue
+        config.width && config.height ? canvas.stopAutoLayout() : this.__checkAutoLayout()
         this.__doResize(data as IScreenSizeData)
     }
 
@@ -455,10 +461,10 @@ export class Leafer extends Group implements ILeafer {
                     if (!this.parent) {
                         if (this.selector) this.selector.destroy()
                         if (this.hitCanvasManager) this.hitCanvasManager.destroy()
-                        this.canvasManager.destroy()
+                        if (this.canvasManager) this.canvasManager.destroy()
                     }
 
-                    this.canvas.destroy()
+                    if (this.canvas) this.canvas.destroy()
 
                     this.config.view = this.view = this.parentApp = null
                     if (this.userConfig) this.userConfig.view = null

package/src/Line.ts

@@ -1,20 +1,18 @@
 import { IPointData, INumber } from '@leafer/interface'
-import { PathBounds, PathCommandDataHelper, PointHelper, boundsType, pathType, affectStrokeBoundsType, dataProcessor, registerUI, getPointData } from '@leafer/core'
+import { PathCommandDataHelper, PointHelper, boundsType, pathType, affectStrokeBoundsType, dataProcessor, registerUI, getPointData } from '@leafer/core'
 
 import { ILine, ILineData, ILineInputData, IStrokeAlign } from '@leafer-ui/interface'
 import { LineData } from '@leafer-ui/data'
 
 import { UI } from './UI'
-import { PathArrow } from '@leafer-ui/external'
 
 
 const { moveTo, lineTo, drawPoints } = PathCommandDataHelper
 const { rotate, getAngle, getDistance, defaultPoint } = PointHelper
-const { toBounds } = PathBounds
 
 
 @registerUI()
-export class Line extends UI implements ILine { // tip: rewrited Polygon
+export class Line<TInputData = ILineInputData> extends UI<TInputData> implements ILine { // tip: rewrited Polygon
 
     public get __tag() { return 'Line' }
 
@@ -53,10 +51,6 @@ export class Line extends UI implements ILine { // tip: rewrited Polygon
     }
 
 
-    constructor(data?: ILineInputData) {
-        super(data)
-    }
-
     public __updatePath(): void {
 
         const data = this.__
@@ -64,7 +58,7 @@ export class Line extends UI implements ILine { // tip: rewrited Polygon
 
         if (data.points) {
 
-            drawPoints(path, data.points, false, data.closed)
+            drawPoints(path, data.points, data.curve, data.closed)
 
         } else {
 
@@ -74,18 +68,4 @@ export class Line extends UI implements ILine { // tip: rewrited Polygon
 
     }
 
-    public __updateRenderPath(): void {
-        const data = this.__
-        if (!this.pathInputed && data.points && data.curve) {
-            drawPoints(data.__pathForRender = [], data.points, data.curve, data.closed)
-            if (data.__useArrow) PathArrow.addArrows(this, false)
-        } else super.__updateRenderPath()
-    }
-
-    public __updateBoxBounds(): void {
-        if (this.points) {
-            toBounds(this.__.__pathForRender, this.__layout.boxBounds)
-        } else super.__updateBoxBounds()
-    }
-
 }

package/src/Path.ts

@@ -7,7 +7,7 @@ import { UI } from './UI'
 
 
 @registerUI()
-export class Path extends UI implements IPath {
+export class Path<TInputData = IPathInputData> extends UI<TInputData> implements IPath {
 
     public get __tag() { return 'Path' }
 
@@ -17,8 +17,4 @@ export class Path extends UI implements IPath {
     @affectStrokeBoundsType('center')
     declare public strokeAlign?: IStrokeAlign
 
-    constructor(data?: IPathInputData) {
-        super(data)
-    }
-
 }

package/src/Pen.ts

@@ -8,7 +8,7 @@ import { Path } from './Path'
 
 @useModule(PathCreator, ['set', 'path', 'paint'])
 @registerUI()
-export class Pen extends Group implements IPen {
+export class Pen<TInputData = IPenInputData> extends Group<TInputData> implements IPen {
 
     public get __tag() { return 'Pen' }
 
@@ -23,9 +23,6 @@ export class Pen extends Group implements IPen {
 
     public __path: IPathCommandData
 
-    constructor(data?: IPenInputData) {
-        super(data)
-    }
 
     public setStyle(data: IPathInputData): Pen {
         const path = this.pathElement = new Path(data)

package/src/Polygon.ts

@@ -1,20 +1,18 @@
 import { INumber, IPointData } from '@leafer/interface'
-import { PathCommandDataHelper, dataProcessor, pathType, registerUI, rewrite, rewriteAble } from '@leafer/core'
+import { PathCommandDataHelper, dataProcessor, pathType, registerUI, 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 line = Line.prototype
 
 @rewriteAble()
 @registerUI()
-export class Polygon extends UI implements IPolygon {
+export class Polygon<TInputData = IPolygonInputData> extends UI<TInputData> implements IPolygon {
 
     public get __tag() { return 'Polygon' }
 
@@ -30,21 +28,19 @@ export class Polygon extends UI implements IPolygon {
     @pathType(0)
     public curve?: boolean | number
 
-    constructor(data?: IPolygonInputData) {
-        super(data)
-    }
 
     public __updatePath(): void {
 
-        const path: number[] = this.__.path = []
+        const data = this.__
+        const path: number[] = data.path = []
 
-        if (this.__.points) {
+        if (data.points) {
 
-            drawPoints(path, this.__.points, false, true)
+            drawPoints(path, data.points, data.curve, true)
 
         } else {
 
-            const { width, height, sides } = this.__
+            const { width, height, sides } = data
             const rx = width / 2, ry = height / 2
 
             moveTo(path, rx, 0)
@@ -59,10 +55,4 @@ export class Polygon extends UI implements IPolygon {
 
     }
 
-    @rewrite(line.__updateRenderPath)
-    public __updateRenderPath(): void { }
-
-    @rewrite(line.__updateBoxBounds)
-    public __updateBoxBounds(): void { }
-
 }

package/src/Rect.ts

@@ -10,15 +10,11 @@ import { UI } from './UI'
 @useModule(RectRender)
 @rewriteAble()
 @registerUI()
-export class Rect extends UI implements IRect { // tip: rewrited Box
+export class Rect<TInputData = IRectInputData> extends UI<TInputData> implements IRect { // tip: rewrited Box
 
     public get __tag() { return 'Rect' }
 
     @dataProcessor(RectData)
     declare public __: IRectData
 
-    constructor(data?: IRectInputData) {
-        super(data)
-    }
-
 }

package/src/Star.ts

@@ -12,7 +12,7 @@ const { moveTo, lineTo, closePath } = PathCommandDataHelper
 
 
 @registerUI()
-export class Star extends UI implements IStar {
+export class Star<TInputData = IStarInputData> extends UI<TInputData> implements IStar {
 
     public get __tag() { return 'Star' }
 
@@ -25,9 +25,6 @@ export class Star extends UI implements IStar {
     @pathType(0.382)
     public innerRadius?: INumber
 
-    constructor(data?: IStarInputData) {
-        super(data)
-    }
 
     public __updatePath() {
 

package/src/Text.ts

@@ -12,7 +12,7 @@ import { UI } from './UI'
 const { copyAndSpread, includes, spread, setList } = BoundsHelper
 
 @registerUI()
-export class Text extends UI implements IText {
+export class Text<TConstructorData = ITextInputData> extends UI<TConstructorData> implements IText {
 
     public get __tag() { return 'Text' }
 
@@ -103,10 +103,6 @@ export class Text extends UI implements IText {
     public get textDrawData(): ITextDrawData { this.updateLayout(); return this.__.__textDrawData }
 
 
-    constructor(data?: ITextInputData) {
-        super(data)
-    }
-
     public __updateTextDrawData(): void {
         const data = this.__
         const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow, padding } = data
@@ -158,11 +154,6 @@ export class Text extends UI implements IText {
         else data.__textBoxBounds = b
     }
 
-    override __onUpdateSize(): void {
-        if (this.__box) this.__box.__onUpdateSize()
-        super.__onUpdateSize()
-    }
-
     override __updateRenderSpread(): number {
         let width = super.__updateRenderSpread()
         if (!width) width = this.isOverflow ? 1 : 0
@@ -175,6 +166,12 @@ export class Text extends UI implements IText {
         if (this.__box) this.__box.__layout.renderBounds = renderBounds
     }
 
+    override __updateChange(): void {
+        super.__updateChange()
+        const box = this.__box
+        if (box) box.__onUpdateSize(), box.__updateChange()
+    }
+
     override __drawRenderPath(canvas: ILeaferCanvas): void {
         canvas.font = this.__.__font
     }

package/src/UI.ts

@@ -1,7 +1,7 @@
 import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, INumber, IBoolean, IString, IPathString, IExportFileType, IPointData, ICursorType, IMaskType, IEraserType, IValue, IWindingRule, IPathCreator, IFourNumber, IBoundsData, IFlowType, IGap, IFlowWrap, IAxis, IConstraint, IAutoBoxData, IFlowBoxType, IPointGap, IFlowAlign, IFlowAxisAlign, IFindCondition, IAutoSize, IRangeSize, IAlign, IUnitPointData, IObject, IScaleData, IUnitData, IPathCommandObject, ITransition, IFilter, ILeaferImage, IScaleFixed, IDragBoundsType } from '@leafer/interface'
 import { Leaf, PathDrawer, surfaceType, dataType, positionType, scrollType, boundsType, pathType, scaleType, rotationType, opacityType, visibleType, sortType, maskType, dataProcessor, registerUI, useModule, rewrite, rewriteAble, UICreator, PathCorner, hitType, strokeType, PathConvert, eraserType, cursorType, autoLayoutType, pen, naturalBoundsType, pathInputType, MathHelper, Plugin, DataHelper, affectRenderBoundsType, isString, isNumber } from '@leafer/core'
 
-import { IUI, IShadowEffect, IBlurEffect, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUIInputData, IExportOptions, IExportResult, IFill, IStroke, IArrowType, IFindUIMethod, ILeafer, IEditorConfig, IEditorConfigFunction, IEditToolFunction, IKeyframe, IAnimation, IAnimate, IStates, IStateName, IAnimateType, IStateStyle, IColorString, IAnimateList } from '@leafer-ui/interface'
+import { IUI, IShadowEffect, IBlurEffect, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUIInputData, IExportOptions, IExportResult, IFill, IStroke, IArrowStyle, IFindUIMethod, ILeafer, IEditorConfig, IEditorConfigFunction, IEditToolFunction, IKeyframe, IAnimation, IAnimate, IStates, IStateName, IAnimateType, IStateStyle, IColorString, IAnimateList } from '@leafer-ui/interface'
 import { effectType, zoomLayerType } from '@leafer-ui/decorator'
 
 import { UIData } from '@leafer-ui/data'
@@ -13,7 +13,7 @@ import { Export, Paint, PathArrow } from '@leafer-ui/external'
 @useModule(UIBounds)
 @useModule(UIRender)
 @rewriteAble()
-export class UI extends Leaf implements IUI { // tip: rewrited Box
+export class UI<TInputData = IUIInputData> extends Leaf<TInputData> implements IUI { // tip: rewrited Box
 
     @dataProcessor(UIData)
     declare public __: IUIData
@@ -272,9 +272,9 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
 
     // @leafer-in/arrow rewrite
 
-    public startArrow?: IArrowType
+    public startArrow?: IArrowStyle
 
-    public endArrow?: IArrowType
+    public endArrow?: IArrowStyle
 
     // corner
 
@@ -399,27 +399,16 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     }
 
 
-    constructor(data?: IUIInputData) {
-        super(data)
-    }
-
-
     // data
 
     @rewrite(Leaf.prototype.reset)
     public reset(_data?: IUIInputData): void { }
 
 
-    public set(data: IUIInputData, transition?: ITransition | 'temp'): void {
-        if (data) {
-            if (transition) {
-                if (transition === 'temp') {
-                    this.lockNormalStyle = true
-                    Object.assign(this, data)
-                    this.lockNormalStyle = false
-                } else this.animate(data, transition)
-            } else Object.assign(this, data)
-        }
+    // @leafer-in/animate will rewrite
+
+    public set(data: IUIInputData, _transition?: ITransition | 'temp'): void {
+        if (data) Object.assign(this, data)
     }
 
     public get(name?: string | string[] | IUIInputData): IUIInputData | IValue {
@@ -469,7 +458,7 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
         const data = this.__
         if (data.path) {
             data.__pathForRender = data.cornerRadius ? PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path
-            if (data.__useArrow) PathArrow.addArrows(this, !data.cornerRadius)
+            if (data.__useArrow) PathArrow.addArrows(this)
         } else data.__pathForRender && (data.__pathForRender = undefined)
     }
 
@@ -501,7 +490,8 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
 
     // @leafer-in/animate rewrite
 
-    public animate(_keyframe?: IUIInputData | IKeyframe[] | IAnimation | IAnimation[], _options?: ITransition, _type?: IAnimateType, _isTemp?: boolean): IAnimate {
+    public animate(keyframe?: IUIInputData | IKeyframe[] | IAnimation | IAnimation[], _options?: ITransition, _type?: IAnimateType, _isTemp?: boolean): IAnimate {
+        this.set(keyframe as IUIInputData)
         return Plugin.need('animate')
     }
 

package/types/index.d.ts

@@ -1,8 +1,8 @@
-import { IString, INumber, IBoolean, IMaskType, IEraserType, IAlign, IUnitPointData, IPathCommandData, IPathCommandObject, IPathString, IWindingRule, IFlowType, IFourNumber, IGap, IPointGap, IFlowAlign, IFlowAxisAlign, IFlowWrap, IFlowBoxType, IAutoSize, IAutoBoxData, IConstraint, IRangeSize, IAxis, IBoundsData, IDragBoundsType, IHitType, ICursorType, IScaleFixed, IFilter, ITransition, IUnitData, IObject, IPointData, IPathCreator, IValue, IFindCondition, ILeaferCanvas, IPathDrawer, ILeaferImage, IExportFileType, IJSONOptions, IPickOptions, IPickResult, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaferConfig, IAutoBounds, IBounds, IEventListenerId, ITimer, IControl, ILeaferType, IScreenSizeData, IResizeEvent, IZoomType, IZoomOptions, IClientPointData, IRenderOptions, ICanvasContext2DSettings, ICanvasContext2D } from '@leafer/interface';
+import { IString, INumber, IBoolean, IMaskType, IEraserType, IAlign, IUnitPointData, IPathCommandData, IPathCommandObject, IPathString, IWindingRule, IFlowType, IFourNumber, IGap, IPointGap, IFlowAlign, IFlowAxisAlign, IFlowWrap, IFlowBoxType, IAutoSize, IAutoBoxData, IConstraint, IRangeSize, IAxis, IBoundsData, IDragBoundsType, IHitType, ICursorType, IScaleFixed, IFilter, ITransition, IUnitData, IObject, IPointData, IPathCreator, IValue, IFindCondition, ILeaferCanvas, IPathDrawer, ILeaferImage, IExportFileType, IJSONOptions, IPickOptions, IPickResult, ILeaferMode, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaferConfig, IAutoBounds, IBounds, IEventListenerId, ITimer, IControl, ILeaferType, IScreenSizeData, IResizeEvent, ICanvasSizeAttr, IZoomType, IZoomOptions, IClientPointData, IRenderOptions, ICanvasContext2DSettings, ICanvasContext2D } from '@leafer/interface';
 import { Leaf, LeafList } from '@leafer/core';
-import { IUI, IUIData, IUIInputData, ILeafer, IGroup, IBlendMode, IFill, IStroke, IStrokeAlign, IStrokeWidthString, IStrokeCap, IStrokeJoin, IDashPatternString, IArrowType, ICornerRadiusString, IShadowEffect, IShadowString, IBlurEffect, IGrayscaleEffect, IAnimation, IStates, IStateName, IStateStyle, IColorString, IEditorConfig, IAnimate, IAnimateList, IFindUIMethod, IKeyframe, IAnimateType, IExportOptions, IExportResult, IEditorConfigFunction, IEditToolFunction, IGroupData, IGroupInputData, IUIJSONData, IFindCondition as IFindCondition$1, ILeaferData, IApp, IEditorBase, IFunction, ILeaferInputData, IBox, IBoxData, IOverflow, IScrollConfig, IScroller, 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, IBackgroundBoxStyle, IHitType as IHitType$1, IFontWeight, ITextCase, ITextDecoration, IWritingMode, ITextAlign, IVerticalAlign, ITextWrap, ITextOverflow, ITextDrawData, ITextInputData, IPath, IPathData, IPathInputData, IPen, IPenData, IPathCommandData as IPathCommandData$1, IPenInputData, IPointData as IPointData$1 } from '@leafer-ui/interface';
+import { IUIInputData, IUI, IUIData, ILeafer, IGroup, IBlendMode, IFill, IStroke, IStrokeAlign, IStrokeWidthString, IStrokeCap, IStrokeJoin, IDashPatternString, IArrowStyle, ICornerRadiusString, IShadowEffect, IShadowString, IBlurEffect, IGrayscaleEffect, IAnimation, IStates, IStateName, IStateStyle, IColorString, IEditorConfig, IAnimate, IAnimateList, IFindUIMethod, IKeyframe, IAnimateType, IExportOptions, IExportResult, IEditorConfigFunction, IEditToolFunction, IGroupInputData, IGroupData, IUIJSONData, IFindCondition as IFindCondition$1, ILeaferData, IApp, IEditorBase, IFunction, ILeaferInputData, IBoxInputData, IBox, IBoxData, IOverflow, IScrollConfig, IScroller, IFrameInputData, IFrame, IFrameData, IRectInputData, IRect, IRectData, IEllipseInputData, IEllipse, IEllipseData, IPolygonInputData, IPolygon, IPolygonData, IStarInputData, IStar, IStarData, ILineInputData, ILine, ILineData, IImageInputData, IImage, IImageData, ICanvasInputData, ICanvas, ICanvasData, ITextInputData, IText, ITextData, IBackgroundBoxStyle, IHitType as IHitType$1, IFontWeight, ITextCase, ITextDecoration, IWritingMode, ITextAlign, IVerticalAlign, ITextWrap, ITextOverflow, ITextDrawData, IPathInputData, IPath, IPathData, IPenInputData, IPen, IPenData, IPathCommandData as IPathCommandData$1, IPointData as IPointData$1 } from '@leafer-ui/interface';
 
-declare class UI extends Leaf implements IUI {
+declare class UI<TInputData = IUIInputData> extends Leaf<TInputData> implements IUI {
     __: IUIData;
     proxyData?: IUIInputData;
     __proxyData?: IUIInputData;
@@ -80,8 +80,8 @@ declare class UI extends Leaf implements IUI {
     dashPattern?: INumber[] | IDashPatternString;
     dashOffset?: INumber;
     miterLimit?: INumber;
-    startArrow?: IArrowType;
-    endArrow?: IArrowType;
+    startArrow?: IArrowStyle;
+    endArrow?: IArrowStyle;
     cornerRadius?: IFourNumber | ICornerRadiusString;
     cornerSmoothing?: INumber;
     shadow?: IShadowEffect | IShadowEffect[] | IShadowString;
@@ -124,9 +124,8 @@ declare class UI extends Leaf implements IUI {
     __box?: IUI;
     __animate?: IAnimate | IAnimateList;
     get pen(): IPathCreator;
-    constructor(data?: IUIInputData);
     reset(_data?: IUIInputData): void;
-    set(data: IUIInputData, transition?: ITransition | 'temp'): void;
+    set(data: IUIInputData, _transition?: ITransition | 'temp'): void;
     get(name?: string | string[] | IUIInputData): IUIInputData | IValue;
     createProxyData(): IUIInputData;
     find(_condition: number | string | IFindCondition | IFindUIMethod, _options?: any): IUI[];
@@ -143,7 +142,7 @@ declare class UI extends Leaf implements IUI {
     __drawPathByData(drawer: IPathDrawer, data: IPathCommandData): void;
     __drawPathByBox(drawer: IPathDrawer): void;
     drawImagePlaceholder(canvas: ILeaferCanvas, _image?: ILeaferImage): void;
-    animate(_keyframe?: IUIInputData | IKeyframe[] | IAnimation | IAnimation[], _options?: ITransition, _type?: IAnimateType, _isTemp?: boolean): IAnimate;
+    animate(keyframe?: IUIInputData | IKeyframe[] | IAnimation | IAnimation[], _options?: ITransition, _type?: IAnimateType, _isTemp?: boolean): IAnimate;
     killAnimate(_type?: IAnimateType, _nextStyle?: IUIInputData): void;
     export(_filename: IExportFileType | string, _options?: IExportOptions | number | boolean): Promise<IExportResult>;
     syncExport(_filename: IExportFileType | string, _options?: IExportOptions | number | boolean): IExportResult;
@@ -157,7 +156,7 @@ declare class UI extends Leaf implements IUI {
     destroy(): void;
 }
 
-declare class Group extends UI implements IGroup {
+declare class Group<TInputData = IGroupInputData> extends UI<TInputData> implements IGroup {
     get __tag(): string;
     get isBranch(): boolean;
     __: IGroupData;
@@ -166,7 +165,6 @@ declare class Group extends UI implements IGroup {
     children: IUI[];
     topChildren?: IUI[];
     childlessJSON?: boolean;
-    constructor(data?: IGroupInputData);
     reset(data?: IGroupInputData): void;
     __setBranch(): void;
     set(data: IUIInputData, transition?: ITransition | 'temp'): void;
@@ -187,6 +185,7 @@ declare class Leafer extends Group implements ILeafer {
     get __tag(): string;
     __: ILeaferData;
     pixelRatio?: INumber;
+    mode: ILeaferMode;
     get isApp(): boolean;
     get app(): ILeafer;
     get isLeafer(): boolean;
@@ -245,10 +244,10 @@ declare class Leafer extends Group implements ILeafer {
     protected __setApp(): void;
     protected __bindApp(app: IApp): void;
     __setLeafer(leafer: ILeafer): void;
-    protected __checkAutoLayout(config: ILeaferConfig, parentApp?: IApp): void;
+    protected __checkAutoLayout(): void;
     __setAttr(attrName: string, newValue: IValue): boolean;
     __getAttr(attrName: string): IValue;
-    protected __changeCanvasSize(attrName: string, newValue: number): void;
+    protected __changeCanvasSize(attrName: ICanvasSizeAttr, newValue: number): void;
     protected __changeFill(newValue: string): void;
     protected __onCreated(): void;
     protected __onReady(): void;
@@ -276,7 +275,7 @@ declare class Leafer extends Group implements ILeafer {
     destroy(sync?: boolean): void;
 }
 
-declare class Box extends Group implements IBox {
+declare class Box<TInputData = IBoxInputData> extends Group<TInputData> implements IBox {
     get __tag(): string;
     get isBranchLeaf(): boolean;
     __: IBoxData;
@@ -289,7 +288,7 @@ declare class Box extends Group implements IBox {
     scrollConfig?: IScrollConfig;
     scroller?: IScroller;
     hasScroller?: boolean;
-    constructor(data?: IBoxInputData);
+    constructor(data?: TInputData);
     __updateStrokeSpread(): number;
     __updateRectRenderSpread(): number;
     __updateRenderSpread(): number;
@@ -307,53 +306,46 @@ declare class Box extends Group implements IBox {
     __drawContent(canvas: ILeaferCanvas, options: IRenderOptions): void;
 }
 
-declare class Frame extends Box implements IFrame {
+declare class Frame<TInputData = IFrameInputData> extends Box<TInputData> implements IFrame {
     get __tag(): string;
     get isFrame(): boolean;
     __: IFrameData;
     fill?: IFill;
     overflow?: IOverflow;
-    constructor(data?: IFrameInputData);
 }
 
-declare class Rect extends UI implements IRect {
+declare class Rect<TInputData = IRectInputData> extends UI<TInputData> implements IRect {
     get __tag(): string;
     __: IRectData;
-    constructor(data?: IRectInputData);
 }
 
-declare class Ellipse extends UI implements IEllipse {
+declare class Ellipse<TInputData = IEllipseInputData> extends UI<TInputData> implements IEllipse {
     get __tag(): string;
     __: IEllipseData;
     innerRadius?: INumber;
     startAngle?: INumber;
     endAngle?: INumber;
-    constructor(data?: IEllipseInputData);
     __updatePath(): void;
 }
 
-declare class Polygon extends UI implements IPolygon {
+declare class Polygon<TInputData = IPolygonInputData> extends UI<TInputData> implements IPolygon {
     get __tag(): string;
     __: IPolygonData;
     sides?: INumber;
     points?: number[] | IPointData[];
     curve?: boolean | number;
-    constructor(data?: IPolygonInputData);
     __updatePath(): void;
-    __updateRenderPath(): void;
-    __updateBoxBounds(): void;
 }
 
-declare class Star extends UI implements IStar {
+declare class Star<TInputData = IStarInputData> extends UI<TInputData> implements IStar {
     get __tag(): string;
     __: IStarData;
     corners?: INumber;
     innerRadius?: INumber;
-    constructor(data?: IStarInputData);
     __updatePath(): void;
 }
 
-declare class Line extends UI implements ILine {
+declare class Line<TInputData = ILineInputData> extends UI<TInputData> implements ILine {
     get __tag(): string;
     __: ILineData;
     strokeAlign?: IStrokeAlign;
@@ -363,23 +355,19 @@ declare class Line extends UI implements ILine {
     closed?: boolean;
     get toPoint(): IPointData;
     set toPoint(value: IPointData);
-    constructor(data?: ILineInputData);
     __updatePath(): void;
-    __updateRenderPath(): void;
-    __updateBoxBounds(): void;
 }
 
-declare class Image extends Rect implements IImage {
+declare class Image<TInputData = IImageInputData> extends Rect<TInputData> implements IImage {
     get __tag(): string;
     __: IImageData;
     url: IString;
     get ready(): boolean;
     get image(): ILeaferImage;
-    constructor(data?: IImageInputData);
 }
 declare const MyImage: typeof Image;
 
-declare class Canvas extends Rect implements ICanvas {
+declare class Canvas<TInputData = ICanvasInputData> extends Rect<TInputData> implements ICanvas {
     get __tag(): string;
     __: ICanvasData;
     width?: INumber;
@@ -392,7 +380,7 @@ declare class Canvas extends Rect implements ICanvas {
     get context(): ICanvasContext2D;
     get ready(): boolean;
     url?: string;
-    constructor(data?: ICanvasInputData);
+    constructor(data?: TInputData);
     drawImage(url: string): void;
     draw(ui: IUI, offset?: IPointData, scale?: number | IPointData, rotation?: number): void;
     paint(): void;
@@ -401,7 +389,7 @@ declare class Canvas extends Rect implements ICanvas {
     destroy(): void;
 }
 
-declare class Text extends UI implements IText {
+declare class Text<TConstructorData = ITextInputData> extends UI<TConstructorData> implements IText {
     get __tag(): string;
     __: ITextData;
     width?: INumber;
@@ -432,33 +420,30 @@ declare class Text extends UI implements IText {
     textEditing: boolean;
     isOverflow: boolean;
     get textDrawData(): ITextDrawData;
-    constructor(data?: ITextInputData);
     __updateTextDrawData(): void;
     __updateBoxBounds(): void;
-    __onUpdateSize(): void;
     __updateRenderSpread(): number;
     __updateRenderBounds(): void;
+    __updateChange(): void;
     __drawRenderPath(canvas: ILeaferCanvas): void;
     __draw(canvas: ILeaferCanvas, options: IRenderOptions, originCanvas?: ILeaferCanvas): void;
     __drawShape(canvas: ILeaferCanvas, options: IRenderOptions): void;
     destroy(): void;
 }
 
-declare class Path extends UI implements IPath {
+declare class Path<TInputData = IPathInputData> extends UI<TInputData> implements IPath {
     get __tag(): string;
     __: IPathData;
     strokeAlign?: IStrokeAlign;
-    constructor(data?: IPathInputData);
 }
 
-declare class Pen extends Group implements IPen {
+declare class Pen<TInputData = IPenInputData> extends Group<TInputData> implements IPen {
     get __tag(): string;
     __: IPenData;
     pathElement: IPath;
     pathStyle: IPathInputData;
     path: IPathCommandData$1;
     __path: IPathCommandData$1;
-    constructor(data?: IPenInputData);
     setStyle(data: IPathInputData): Pen;
     beginPath(): Pen;
     moveTo(_x: number, _y: number): Pen;