@leafer-ui/display 1.0.1 → 1.0.3

package/package.json

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

package/src/Box.ts

@@ -10,7 +10,7 @@ import { Rect } from './Rect'
 const rect = Rect.prototype
 const group = Group.prototype
 const childrenRenderBounds = {} as IBoundsData
-const { copy, add, includes } = BoundsHelper
+const { copy, add, includes, copyAndSpread } = BoundsHelper
 
 @rewriteAble()
 @registerUI()
@@ -50,18 +50,26 @@ export class Box extends Group implements IBox {
     @rewrite(rect.__updateBoxBounds)
     public __updateRectBoxBounds(): void { }
 
-    public __updateBoxBounds(): void {
+    public __updateBoxBounds(secondLayout?: boolean): void {
         const data = this.__
 
         if (this.children.length) {
             if (data.__autoSide) {
+
                 if (this.leafer && this.leafer.ready) this.leafer.layouter.addExtra(this)
                 super.__updateBoxBounds()
+
+                const { boxBounds } = this.__layout
+
                 if (!data.__autoSize) {
-                    const b = this.__layout.boxBounds
-                    if (!data.__autoWidth) b.height += b.y, b.width = data.width, b.x = b.y = 0
-                    if (!data.__autoHeight) b.width += b.x, b.height = data.height, b.y = b.x = 0
+                    if (data.__autoWidth) boxBounds.width += boxBounds.x, boxBounds.height = data.height, boxBounds.y = boxBounds.x = 0
+                    else boxBounds.height += boxBounds.y, boxBounds.width = data.width, boxBounds.x = boxBounds.y = 0
                 }
+
+                if (secondLayout && data.flow && data.padding) copyAndSpread(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : (data.__autoWidth ? 'width' : 'height'))
+
+                this.__updateNaturalSize()
+
             } else {
                 this.__updateRectBoxBounds()
             }
@@ -85,13 +93,13 @@ export class Box extends Group implements IBox {
             copy(childrenRenderBounds, renderBounds)
             this.__updateRectRenderBounds()
 
-            isOverflow = !includes(renderBounds, childrenRenderBounds) || undefined
+            isOverflow = !includes(renderBounds, childrenRenderBounds) || !this.pathInputed || !this.__.cornerRadius // 路径与圆角直接当溢出处理
         } else {
             this.__updateRectRenderBounds()
         }
 
         this.isOverflow !== isOverflow && (this.isOverflow = isOverflow)
-        if (isOverflow && !(this.__.__drawAfterFill = this.__.overflow === 'hide')) add(renderBounds, childrenRenderBounds)
+        if (!(this.__.__drawAfterFill = this.__.overflow === 'hide') && isOverflow) add(renderBounds, childrenRenderBounds)
     }
 
     @rewrite(rect.__updateRenderBounds)

package/src/Canvas.ts

@@ -1,5 +1,5 @@
-import { ILeaferCanvas, ILeaferCanvasConfig, INumber, IRenderOptions, IPointData, ICanvasContext2D, ICanvasContext2DSettings, IScreenSizeData, ISizeData } from '@leafer/interface'
-import { Creator, Matrix, Platform, dataProcessor, registerUI } from '@leafer/core'
+import { ILeaferCanvas, ILeaferCanvasConfig, INumber, IRenderOptions, IPointData, ICanvasContext2D, ICanvasContext2DSettings, IScreenSizeData } from '@leafer/interface'
+import { Creator, ImageEvent, LeaferImage, Matrix, dataProcessor, registerUI } from '@leafer/core'
 
 import { ICanvas, ICanvasData, ICanvasInputData, IUI } from '@leafer-ui/interface'
 import { CanvasData } from '@leafer-ui/data'
@@ -22,7 +22,7 @@ export class Canvas extends Rect implements ICanvas {
     @resizeType(100)
     declare public height?: INumber
 
-    @resizeType(Platform.devicePixelRatio)
+    @resizeType(1)
     declare public pixelRatio?: INumber
 
     @resizeType(true)
@@ -35,11 +35,25 @@ export class Canvas extends Rect implements ICanvas {
 
     public context?: ICanvasContext2D
 
+    public get ready(): boolean { return !this.url }
+
+    public url?: string // 用于临时加载canvas的base64数据，完成后会置空
+
     constructor(data?: ICanvasInputData) {
         super(data)
         this.canvas = Creator.canvas(this.__ as ILeaferCanvasConfig)
         this.context = this.canvas.context
         this.__.__isCanvas = this.__.__drawAfterFill = true
+        if (data && data.url) this.drawImage(data.url)
+    }
+
+    public drawImage(url: string): void {
+        new LeaferImage({ url }).load((image: LeaferImage) => {
+            this.context.drawImage(image.view, 0, 0)
+            this.url = undefined
+            this.paint()
+            this.emitEvent(new ImageEvent(ImageEvent.LOADED, { image }))
+        })
     }
 
     public draw(ui: IUI, offset?: IPointData, scale?: number | IPointData, rotation?: number): void {
@@ -58,19 +72,18 @@ export class Canvas extends Rect implements ICanvas {
     }
 
     public paint(): void {
-        this.forceUpdate('fill')
+        this.forceRender()
     }
 
     public __drawAfterFill(canvas: ILeaferCanvas, _options: IRenderOptions): void {
-        const origin = this.canvas.view as ISizeData
-        const { width, height } = this
-        if (this.__.cornerRadius || this.pathInputed) {
+        const { width, height, cornerRadius } = this.__, { view } = this.canvas
+        if (cornerRadius || this.pathInputed) {
             canvas.save()
             canvas.clip()
-            canvas.drawImage(this.canvas.view as any, 0, 0, origin.width, origin.height, 0, 0, width, height)
+            canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height)
             canvas.restore()
         } else {
-            canvas.drawImage(this.canvas.view as any, 0, 0, origin.width, origin.height, 0, 0, width, height)
+            canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height)
         }
     }
 

package/src/Group.ts

@@ -36,7 +36,7 @@ export class Group extends UI implements IGroup {   // tip: rewrited Box
 
     // data
 
-    public set(data: IUIInputData): void {
+    public set(data: IUIInputData, isTemp?: boolean): void {
         if (data.children) {
             const { children } = data
             delete data.children
@@ -47,7 +47,7 @@ export class Group extends UI implements IGroup {   // tip: rewrited Box
                 this.clear()
             }
 
-            super.set(data)
+            super.set(data, isTemp)
 
             let child: IUI
             children.forEach(childData => {
@@ -58,7 +58,7 @@ export class Group extends UI implements IGroup {   // tip: rewrited Box
             data.children = children
 
         } else {
-            super.set(data)
+            super.set(data, isTemp)
         }
     }
 

package/src/Image.ts

@@ -34,4 +34,6 @@ export class Image extends Rect implements IImage {
         super.destroy()
     }
 
-}
+}
+
+export const MyImage = Image

package/src/Leafer.ts

@@ -1,8 +1,9 @@
 import { ILeaferCanvas, IRenderer, ILayouter, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IAutoBounds, IScreenSizeData, IResizeEvent, IEventListenerId, ITimer, IValue, IObject, IControl, IPointData, ILeaferType, ICursorType, IBoundsData, INumber, IZoomType, IFourNumber, IBounds, IClientPointData } from '@leafer/interface'
-import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, ImageManager, DataHelper, Creator, Run, Debug, RenderEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, WaitHelper, WatchEvent, Bounds, LeafList } from '@leafer/core'
+import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, ImageManager, DataHelper, Creator, Run, Debug, RenderEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, WaitHelper, WatchEvent, Bounds, LeafList, needPlugin } from '@leafer/core'
 
 import { ILeaferInputData, ILeaferData, IFunction, IUIInputData, ILeafer, IApp, IEditorBase } from '@leafer-ui/interface'
 import { LeaferData } from '@leafer-ui/data'
+
 import { Group } from './Group'
 
 
@@ -372,9 +373,10 @@ export class Leafer extends Group implements ILeafer {
 
     // need view plugin
     public zoom(_zoomType: IZoomType, _padding?: IFourNumber, _fixedScale?: boolean): IBoundsData {
-        return debug.error('need @leafer-in/view') as undefined
+        return needPlugin('view')
     }
 
+
     // interaction window rewrite
     public getValidMove(moveX: number, moveY: number): IPointData { return { x: moveX, y: moveY } }
     public getValidScale(changeScale: number): number { return changeScale }
@@ -384,6 +386,18 @@ export class Leafer extends Group implements ILeafer {
         return this.interaction && this.interaction.getLocal(clientPoint, updateClient)
     }
 
+    public getPagePointByClient(clientPoint: IClientPointData, updateClient?: boolean): IPointData {
+        return this.getPagePoint(this.getWorldPointByClient(clientPoint, updateClient))
+    }
+
+    public updateClientBounds(): void {
+        this.canvas && this.canvas.updateClientBounds()
+    }
+
+    // miniapp rewrite
+    public receiveEvent(_event: any): void { }
+
+
     protected __checkUpdateLayout(): void {
         this.__layout.update()
     }

package/src/Pen.ts

@@ -6,8 +6,7 @@ import { PenData } from '@leafer-ui/data'
 import { Group } from './Group'
 import { Path } from './Path'
 
-
-@useModule(PathCreator, ['set', 'beginPath', 'path'])
+@useModule(PathCreator, ['set', 'beginPath', 'path', 'paint'])
 @registerUI()
 export class Pen extends Group implements IPen {
 
@@ -79,10 +78,9 @@ export class Pen extends Group implements IPen {
     public clearPath(): Pen { return this }
 
     public paint(): void {
-        this.pathElement.forceUpdate('path')
+        if (!this.pathElement.__layout.boxChanged) this.pathElement.forceUpdate('path')
     }
 
-
 }
 
 function penPathType() {

package/src/Text.ts

@@ -96,14 +96,14 @@ export class Text extends UI implements IText {
     }
 
     public __drawHitPath(canvas: ILeaferCanvas): void {
-        const { __lineHeight, __baseLine, __textDrawData: data } = this.__
+        const { __lineHeight, fontSize, __baseLine, __textDrawData: data } = this.__
 
         canvas.beginPath()
 
         if (this.__.__letterSpacing < 0) {
             this.__drawPathByData(canvas)
         } else {
-            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight))
+            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight))
         }
     }
 

package/src/UI.ts

@@ -1,8 +1,8 @@
-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 } from '@leafer/interface'
-import { Leaf, PathDrawer, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, visibleType, sortType, maskType, dataProcessor, registerUI, useModule, rewrite, rewriteAble, UICreator, PathCorner, hitType, strokeType, PathConvert, eraserType, cursorType, autoLayoutType, pen, naturalBoundsType, pathInputType } from '@leafer/core'
+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 } from '@leafer/interface'
+import { Leaf, PathDrawer, surfaceType, dataType, positionType, 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, needPlugin } 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 } from '@leafer-ui/interface'
-import { arrowType, effectType, stateType, zoomLayerType } from '@leafer-ui/decorator'
+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, ITransition, IAnimateType } from '@leafer-ui/interface'
+import { effectType, zoomLayerType } from '@leafer-ui/decorator'
 
 import { UIData } from '@leafer-ui/data'
 import { UIBounds, UIRender } from '@leafer-ui/display-module'
@@ -57,12 +57,6 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     public visible?: IBoolean | 0
 
 
-    @stateType(false)
-    public selected?: IBoolean
-
-    @stateType(false)
-    public disabled?: IBoolean
-
     @surfaceType(false)
     public locked?: IBoolean
 
@@ -153,46 +147,34 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     public closed?: boolean
 
 
-    // auto layout
-    @autoLayoutType(false)
+    // @leafer-in/flow rewrite
     public flow?: IFlowType
 
     @boundsType(0)
     public padding?: IFourNumber
 
-    @boundsType(0)
     public gap?: IGap | IPointGap
 
-    @boundsType('top-left')
     public flowAlign?: IFlowAlign | IFlowAxisAlign
 
-    @boundsType(false)
     public flowWrap?: IFlowWrap
 
-    @boundsType('box')
-    public itemBox?: IFlowBoxType
 
+    public itemBox?: IFlowBoxType
 
-    @boundsType(true)
     public inFlow?: IBoolean
 
-    @boundsType() // rewrite in flow
+
     public autoWidth?: IAutoSize
 
-    @boundsType()  // rewrite in flow
     public autoHeight?: IAutoSize
 
-    @boundsType()
     public lockRatio?: IBoolean
 
-    @boundsType()
     public autoBox?: IAutoBoxData | IConstraint
 
-
-    @boundsType()
     public widthRange?: IRangeSize
 
-    @boundsType()
     public heightRange?: IRangeSize
 
 
@@ -271,12 +253,10 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     public miterLimit?: INumber
 
 
-    // arrow
+    // @leafer-in/arrow rewrite
 
-    @arrowType('none')
     public startArrow?: IArrowType
 
-    @arrowType('none')
     public endArrow?: IArrowType
 
     // corner
@@ -305,45 +285,64 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     public grayscale?: INumber | IGrayscaleEffect
 
 
-    // states
+    // @leafer-in/animate rewrite
 
-    @dataType()
-    public normalStyle?: IUIInputData // auto restore hover / press / focus / selected / disabled style
+    public animation?: IAnimation
+
+    public animationOut?: IAnimation
+
+
+    public transition?: ITransition
+
+    public transitionOut?: ITransition
+
+
+    // @leafer-in/motion-path rewrite
+
+    public motionPath?: boolean
+
+    public motion?: INumber | IUnitData
+
+    public motionRotation?: INumber | IBoolean
+
+
+    // @leafer-in/state rewrite
+
+    public states?: IStates
+
+    public state?: IStateName
+
+
+    public selected?: IBoolean
+
+    public disabled?: IBoolean
+
+
+    public normalStyle?: IUIInputData
 
-    @dataType()
     public hoverStyle?: IUIInputData
 
-    @dataType()
     public pressStyle?: IUIInputData
 
-    @dataType()
     public focusStyle?: IUIInputData
 
-    @dataType()
     public selectedStyle?: IUIInputData
 
-    @dataType()
     public disabledStyle?: IUIInputData
 
 
+    public button?: IBoolean
+
+
     // 预留给用户使用的数据对象
     @dataType({})
     public data: IObject
 
 
-    public set scale(value: INumber | IPointData) {
-        if (typeof value === 'number') {
-            this.scaleX = this.scaleY = value
-        } else {
-            this.scaleX = value.x
-            this.scaleY = value.y
-        }
-    }
+    public set scale(value: INumber | IPointData) { MathHelper.assignScale(this as IScaleData, value) }
+    public get scale(): INumber | IPointData { return this.__.scale }
 
-    public get scale(): INumber | IPointData {
-        const { scaleX, scaleY } = this
-        return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX
-    }
+    public __animate?: IAnimate
 
     public get pen(): IPathCreator {
         const { path } = this.__
@@ -373,8 +372,14 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     public reset(_data?: IUIInputData): void { }
 
 
-    public set(data: IUIInputData): void {
-        Object.assign(this, data)
+    public set(data: IUIInputData, isTemp?: boolean): void {
+        if (isTemp) {
+            this.lockNormalStyle = true
+            Object.assign(this, data)
+            this.lockNormalStyle = false
+        } else {
+            Object.assign(this, data)
+        }
     }
 
     public get(name?: string | string[] | IUIInputData): IUIInputData | IValue {
@@ -456,6 +461,14 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
         }
     }
 
+    // @leafer-in/animate rewrite
+
+    public animate(_keyframe?: IUIInputData | IKeyframe[] | IAnimation, _options?: ITransition, _type?: IAnimateType, _isTemp?: boolean): IAnimate {
+        return needPlugin('animate')
+    }
+
+    public killAnimate(_type?: IAnimateType): void { }
+
 
     // create
 
@@ -463,8 +476,10 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
         return Export.export(this, filename, options)
     }
 
-    public clone(): IUI {
-        return UI.one(this.toJSON())
+    public clone(newData?: IUIInputData): IUI {
+        const json = this.toJSON()
+        if (newData) Object.assign(json, newData)
+        return UI.one(json)
     }
 
     static one(data: IUIInputData, x?: number, y?: number, width?: number, height?: number): IUI {
@@ -491,6 +506,7 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
 
     public destroy(): void {
         this.fill = this.stroke = null
+        if (this.__animate) this.killAnimate()
         super.destroy()
     }
 

package/src/index.ts

@@ -11,7 +11,7 @@ export { Polygon } from './Polygon'
 export { Star } from './Star'
 export { Line } from './Line'
 
-export { Image } from './Image'
+export { Image, MyImage } from './Image'
 export { Canvas } from './Canvas'
 
 export { Text } from './Text'

package/types/index.d.ts

@@ -1,6 +1,6 @@
-import { IString, INumber, IBoolean, IMaskType, IEraserType, IAlign, IUnitPointData, IPathCommandData, IPathString, IWindingRule, IFlowType, IFourNumber, IGap, IPointGap, IFlowAlign, IFlowAxisAlign, IFlowWrap, IFlowBoxType, IAutoSize, IAutoBoxData, IConstraint, IRangeSize, IAxis, IBoundsData, IHitType, ICursorType, IObject, IPointData, IPathCreator, IValue, IFindCondition, ILeaferCanvas, IPathDrawer, IExportFileType, IJSONOptions, IPickOptions, IPickResult, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaferConfig, IAutoBounds, IBounds, IEventListenerId, ITimer, IControl, ILeaferType, IScreenSizeData, IResizeEvent, IZoomType, IClientPointData, IRenderOptions, ILeaferImage, ICanvasContext2DSettings, ICanvasContext2D, IUnitData } from '@leafer/interface';
+import { IString, INumber, IBoolean, IMaskType, IEraserType, IAlign, IUnitPointData, IPathCommandData, IPathString, IWindingRule, IFlowType, IFourNumber, IGap, IPointGap, IFlowAlign, IFlowAxisAlign, IFlowWrap, IFlowBoxType, IAutoSize, IAutoBoxData, IConstraint, IRangeSize, IAxis, IBoundsData, IHitType, ICursorType, IUnitData, IObject, IPointData, IPathCreator, IValue, IFindCondition, ILeaferCanvas, IPathDrawer, IExportFileType, IJSONOptions, IPickOptions, IPickResult, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaferConfig, IAutoBounds, IBounds, IEventListenerId, ITimer, IControl, ILeaferType, IScreenSizeData, IResizeEvent, IZoomType, IClientPointData, IRenderOptions, ILeaferImage, 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, IEditorConfig, IFindUIMethod, IExportOptions, IExportResult, IEditorConfigFunction, IEditToolFunction, IGroupData, IGroupInputData, IUIJSONData, ILeaferData, IApp, IEditorBase, IFunction, ILeaferInputData, 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, ITextAlign, IVerticalAlign, ITextWrap, ITextDrawData, ITextInputData, IPath, IPathData, IPathInputData, IPen, IPenData, IPathCommandData as IPathCommandData$1, IPenInputData } from '@leafer-ui/interface';
+import { IUI, IUIData, IUIInputData, ILeafer, IGroup, IBlendMode, IFill, IStroke, IStrokeAlign, IStrokeWidthString, IStrokeCap, IStrokeJoin, IDashPatternString, IArrowType, ICornerRadiusString, IShadowEffect, IShadowString, IBlurEffect, IGrayscaleEffect, IAnimation, ITransition, IStates, IStateName, IAnimate, IEditorConfig, IFindUIMethod, IKeyframe, IAnimateType, IExportOptions, IExportResult, IEditorConfigFunction, IEditToolFunction, IGroupData, IGroupInputData, IUIJSONData, ILeaferData, IApp, IEditorBase, IFunction, ILeaferInputData, 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, ITextAlign, IVerticalAlign, ITextWrap, ITextDrawData, ITextInputData, IPath, IPathData, IPathInputData, IPen, IPenData, IPathCommandData as IPathCommandData$1, IPenInputData } from '@leafer-ui/interface';
 
 declare class UI extends Leaf implements IUI {
     __: IUIData;
@@ -18,8 +18,6 @@ declare class UI extends Leaf implements IUI {
     blendMode?: IBlendMode;
     opacity?: INumber;
     visible?: IBoolean | 0;
-    selected?: IBoolean;
-    disabled?: IBoolean;
     locked?: IBoolean;
     zIndex?: INumber;
     mask?: IBoolean | IMaskType;
@@ -87,22 +85,35 @@ declare class UI extends Leaf implements IUI {
     blur?: INumber | IBlurEffect;
     backgroundBlur?: INumber | IBlurEffect;
     grayscale?: INumber | IGrayscaleEffect;
+    animation?: IAnimation;
+    animationOut?: IAnimation;
+    transition?: ITransition;
+    transitionOut?: ITransition;
+    motionPath?: boolean;
+    motion?: INumber | IUnitData;
+    motionRotation?: INumber | IBoolean;
+    states?: IStates;
+    state?: IStateName;
+    selected?: IBoolean;
+    disabled?: IBoolean;
     normalStyle?: IUIInputData;
     hoverStyle?: IUIInputData;
     pressStyle?: IUIInputData;
     focusStyle?: IUIInputData;
     selectedStyle?: IUIInputData;
     disabledStyle?: IUIInputData;
+    button?: IBoolean;
     data: IObject;
     set scale(value: INumber | IPointData);
     get scale(): INumber | IPointData;
+    __animate?: IAnimate;
     get pen(): IPathCreator;
     get editConfig(): IEditorConfig;
     get editOuter(): string;
     get editInner(): string;
     constructor(data?: IUIInputData);
     reset(_data?: IUIInputData): void;
-    set(data: IUIInputData): void;
+    set(data: IUIInputData, isTemp?: boolean): void;
     get(name?: string | string[] | IUIInputData): IUIInputData | IValue;
     createProxyData(): IUIInputData;
     find(_condition: number | string | IFindCondition | IFindUIMethod, _options?: any): IUI[];
@@ -118,8 +129,10 @@ declare class UI extends Leaf implements IUI {
     __drawPath(canvas: ILeaferCanvas): void;
     __drawPathByData(drawer: IPathDrawer, data: IPathCommandData): void;
     __drawPathByBox(drawer: IPathDrawer): void;
+    animate(_keyframe?: IUIInputData | IKeyframe[] | IAnimation, _options?: ITransition, _type?: IAnimateType, _isTemp?: boolean): IAnimate;
+    killAnimate(_type?: IAnimateType): void;
     export(filename: IExportFileType | string, options?: IExportOptions | number | boolean): Promise<IExportResult>;
-    clone(): IUI;
+    clone(newData?: IUIInputData): IUI;
     static one(data: IUIInputData, x?: number, y?: number, width?: number, height?: number): IUI;
     static registerUI(): void;
     static registerData(data: IUIData): void;
@@ -137,7 +150,7 @@ declare class Group extends UI implements IGroup {
     constructor(data?: IGroupInputData);
     reset(data?: IGroupInputData): void;
     __setBranch(): void;
-    set(data: IUIInputData): void;
+    set(data: IUIInputData, isTemp?: boolean): void;
     toJSON(options?: IJSONOptions): IUIJSONData;
     pick(_hitPoint: IPointData, _options?: IPickOptions): IPickResult;
     addAt(child: IUI, index: number): void;
@@ -231,6 +244,9 @@ declare class Leafer extends Group implements ILeafer {
     getValidMove(moveX: number, moveY: number): IPointData;
     getValidScale(changeScale: number): number;
     getWorldPointByClient(clientPoint: IClientPointData, updateClient?: boolean): IPointData;
+    getPagePointByClient(clientPoint: IClientPointData, updateClient?: boolean): IPointData;
+    updateClientBounds(): void;
+    receiveEvent(_event: any): void;
     protected __checkUpdateLayout(): void;
     protected emitLeafer(type: string): void;
     protected __listenEvents(): void;
@@ -250,7 +266,7 @@ declare class Box extends Group implements IBox {
     __updateRectRenderSpread(): number;
     __updateRenderSpread(): number;
     __updateRectBoxBounds(): void;
-    __updateBoxBounds(): void;
+    __updateBoxBounds(secondLayout?: boolean): void;
     __updateStrokeBounds(): void;
     __updateRenderBounds(): void;
     __updateRectRenderBounds(): void;
@@ -333,6 +349,7 @@ declare class Image extends Rect implements IImage {
     constructor(data?: IImageInputData);
     destroy(): void;
 }
+declare const MyImage: typeof Image;
 
 declare class Canvas extends Rect implements ICanvas {
     get __tag(): string;
@@ -344,7 +361,10 @@ declare class Canvas extends Rect implements ICanvas {
     contextSettings?: ICanvasContext2DSettings;
     canvas?: ILeaferCanvas;
     context?: ICanvasContext2D;
+    get ready(): boolean;
+    url?: string;
     constructor(data?: ICanvasInputData);
+    drawImage(url: string): void;
     draw(ui: IUI, offset?: IPointData, scale?: number | IPointData, rotation?: number): void;
     paint(): void;
     __drawAfterFill(canvas: ILeaferCanvas, _options: IRenderOptions): void;
@@ -422,4 +442,4 @@ declare class Pen extends Group implements IPen {
     paint(): void;
 }
 
-export { Box, Canvas, Ellipse, Frame, Group, Image, Leafer, Line, Path, Pen, Polygon, Rect, Star, Text, UI };
+export { Box, Canvas, Ellipse, Frame, Group, Image, Leafer, Line, MyImage, Path, Pen, Polygon, Rect, Star, Text, UI };