@leafer-ui/display 1.0.2 → 1.0.4

package/package.json

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

package/src/Canvas.ts

@@ -1,4 +1,4 @@
-import { ILeaferCanvas, ILeaferCanvasConfig, INumber, IRenderOptions, IPointData, ICanvasContext2D, ICanvasContext2DSettings, IScreenSizeData, ISizeData } from '@leafer/interface'
+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'
@@ -37,7 +37,7 @@ export class Canvas extends Rect implements ICanvas {
 
     public get ready(): boolean { return !this.url }
 
-    protected url?: string // 用于临时加载canvas的base64数据，完成后会置空
+    public url?: string // 用于临时加载canvas的base64数据，完成后会置空
 
     constructor(data?: ICanvasInputData) {
         super(data)
@@ -72,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/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,7 +373,7 @@ 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')
     }
 
 

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(data?: IUIInputData): IUI {
+        const json = this.toJSON()
+        if (data) Object.assign(json, data)
+        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/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(data?: 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;
@@ -349,7 +362,7 @@ declare class Canvas extends Rect implements ICanvas {
     canvas?: ILeaferCanvas;
     context?: ICanvasContext2D;
     get ready(): boolean;
-    protected url?: string;
+    url?: string;
     constructor(data?: ICanvasInputData);
     drawImage(url: string): void;
     draw(ui: IUI, offset?: IPointData, scale?: number | IPointData, rotation?: number): void;