@leafer/interface 1.0.0-rc.22 → 1.0.0-rc.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/interface",
-  "version": "1.0.0-rc.22",
+  "version": "1.0.0-rc.23",
   "description": "@leafer/interface",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",

package/src/app/ILeafer.ts

@@ -69,7 +69,6 @@ export interface ILeaferAttrData {
     unlockLayout(): void
     lockLayout(): void
 
-    forceFullRender(): void
     forceRender(bounds?: IBoundsData): void
     updateCursor(cursor?: ICursorType): void
     resize(size: IScreenSizeData): void

package/src/display/ILeaf.ts

@@ -4,8 +4,8 @@ import { IEventer } from '../event/IEventer'
 import { ILeaferCanvas, IHitCanvas } from '../canvas/ILeaferCanvas'
 import { IRenderOptions } from '../renderer/IRenderer'
 
-import { IObject, INumber, IBoolean, IValue, IString, IPathString } from '../data/IData'
-import { IMatrixWithBoundsData, IMatrix, IPointData, IBoundsData, IRadiusPointData, ILayoutAttr, ILayoutBoundsData, IMatrixData, IMatrixWithBoundsScaleData, IMatrixWithScaleData } from '../math/IMath'
+import { IObject, INumber, IBoolean, IValue, IString, IPathString, IFourNumber } from '../data/IData'
+import { IMatrixWithBoundsData, IMatrix, IPointData, IBoundsData, IRadiusPointData, ILayoutAttr, ILayoutBoundsData, IMatrixData, IMatrixWithBoundsScaleData, IMatrixWithScaleData, IAutoBoxData, IUnitPointData } from '../math/IMath'
 import { IFunction } from '../function/IFunction'
 
 import { ILeafDataProxy } from './module/ILeafDataProxy'
@@ -41,9 +41,9 @@ export interface ILeafAttrData {
     locked: IBoolean
     zIndex: INumber
 
-    mask: IBoolean
+    mask: IMaskType
     maskType: IMaskType
-    eraser: IBoolean
+    eraser: IEraserType
 
     // layout data
     x: INumber
@@ -57,20 +57,43 @@ export interface ILeafAttrData {
     skewY: INumber
 
     scale: INumber | IPointData // helper
-    around: IAround
+
+    offsetX: INumber
+    offsetY: INumber
+    scrollX: INumber
+    scrollY: INumber
+
+    origin: IAlign | IUnitPointData
+    around: IAlign | IUnitPointData
 
     lazy: IBoolean
     pixelRatio: INumber
 
-    draggable: IBoolean | 'x' | 'y'
-    dragBounds?: IBoundsData | 'parent'
-
     path: IPathCommandData | IPathString
     windingRule: IWindingRule
     closed: boolean
 
+    // auto layout
+    flow: IFlowType
+    padding: IFourNumber
+    gap: IGap | IPointGap
+    align: IFlowAlign | IFlowAxisAlign
+    wrap: IWrap
+    itemBox: IFlowBoxType
+
+    inFlow: IBoolean
+    autoWidth: IAutoSize
+    autoHeight: IAutoSize
+    autoBox: IAutoBoxData | IConstraint
+
+    widthRange: IRangeSize
+    heightRange: IRangeSize
+
+    // interactive
+    draggable: IBoolean | IAxis
+    dragBounds?: IBoundsData | 'parent'
+
     editable: IBoolean
-    editSize: IEditSize
 
     hittable: IBoolean
     hitFill: IHitType
@@ -90,6 +113,48 @@ export interface ILeafAttrData {
     disabledStyle: ILeafInputData
 }
 
+
+export type IAxis = 'x' | 'y'
+
+export type IAxisReverse = 'x-reverse' | 'y-reverse'
+
+export type IFlowType = boolean | IAxis | IAxisReverse
+
+export type IFlowBoxType = 'box' | 'stroke'
+
+export type IGap = INumber | 'auto' | 'fit'
+
+export interface IPointGap { x?: IGap, y?: IGap }
+
+export type IAxisAlign = 'from' | 'center' | 'to'
+
+export interface IFlowAxisAlign { content?: IFlowAlign, rowX?: IAxisAlign, rowY?: IAxisAlign }
+
+export type IWrap = boolean | 'reverse'
+
+export type IAutoSize = IBoolean | INumber | IPercentData
+
+export interface IRangeSize {
+    min?: number
+    max?: number
+}
+
+export interface IUnitData {
+    type: 'percent' | 'px'
+    value: number
+}
+
+export interface IPercentData extends IUnitData {
+    type: 'percent'
+}
+
+export interface IConstraint {
+    x: IConstraintType
+    y: IConstraintType
+}
+
+export type IConstraintType = 'from' | 'center' | 'to' | 'from-to' | 'scale'
+
 export type IHitType =
     | 'path'
     | 'pixel'
@@ -97,10 +162,16 @@ export type IHitType =
     | 'none'
 
 export type IMaskType =
+    | boolean
     | 'path'
     | 'pixel'
     | 'clipping'
 
+export type IEraserType =
+    | boolean
+    | 'path'
+    | 'pixel'
+
 export type IBlendMode =
     | 'pass-through'
     | 'normal'
@@ -138,19 +209,31 @@ export interface IImageCursor {
 }
 
 export type IDirection =
-    | 'topLeft'
+    | 'top-left'
     | 'top'
-    | 'topRight'
+    | 'top-right'
     | 'right'
-    | 'bottomRight'
+    | 'bottom-right'
     | 'bottom'
-    | 'bottomLeft'
+    | 'bottom-left'
     | 'left'
     | 'center'
 
+export type IAlign = IDirection
+
+export type IBaseLineAlign =
+    | 'baseline-left'
+    | 'baseline-center'
+    | 'baseline-right'
+
+export type IFlowAlign =
+    | IAlign
+    | IBaseLineAlign
+
+
 export type IAround =
-    | IDirection
-    | IPointData
+    | IAlign
+    | IUnitPointData
 
 export type ICursorType =
     | IImageCursor
@@ -215,9 +298,9 @@ export interface ILeafInputData {
     locked?: IBoolean
     zIndex?: INumber
 
-    mask?: IBoolean
+    mask?: IMaskType
     maskType?: IMaskType
-    eraser?: IBoolean
+    eraser?: IEraserType
 
     // layout data
     x?: INumber
@@ -231,20 +314,43 @@ export interface ILeafInputData {
     skewY?: INumber
 
     scale?: INumber | IPointData // helper
-    around?: IAround
+
+    offsetX?: INumber
+    offsetY?: INumber
+    scrollX?: INumber
+    scrollY?: INumber
+
+    origin?: IAlign | IUnitPointData
+    around?: IAlign | IUnitPointData
 
     lazy?: IBoolean
     pixelRatio?: INumber
 
-    draggable?: IBoolean | 'x' | 'y'
-    dragBounds?: IBoundsData | 'parent'
-
     path?: IPathCommandData | IPathString
     windingRule?: IWindingRule
     closed?: boolean
 
+    // auto layout
+    flow?: IFlowType
+    padding?: IFourNumber
+    gap?: IGap | IPointGap
+    align?: IFlowAlign | IFlowAxisAlign
+    wrap?: IWrap
+    itemBox?: IFlowBoxType
+
+    inFlow?: IBoolean
+    autoWidth?: IAutoSize
+    autoHeight?: IAutoSize
+    autoBox?: IAutoBoxData | IConstraint
+
+    widthRange?: IRangeSize
+    heightRange?: IRangeSize
+
+    // interactive
+    draggable?: IBoolean | IAxis
+    dragBounds?: IBoundsData | 'parent'
+
     editable?: IBoolean
-    editSize?: IEditSize
 
     hittable?: IBoolean
     hitFill?: IHitType
@@ -282,9 +388,9 @@ export interface ILeafComputedData {
     locked?: boolean
     zIndex?: number
 
-    mask?: boolean
+    mask?: boolean | IMaskType
     maskType?: IMaskType
-    eraser?: boolean
+    eraser?: IEraserType
 
     // layout data
     x?: number
@@ -297,7 +403,13 @@ export interface ILeafComputedData {
     skewX?: number
     skewY?: number
 
-    around?: IAround
+    offsetX?: number
+    offsetY?: number
+    scrollX?: number
+    scrollY?: number
+
+    origin?: IAlign | IUnitPointData
+    around?: IAlign | IUnitPointData
 
     lazy?: boolean
     pixelRatio?: number
@@ -306,11 +418,27 @@ export interface ILeafComputedData {
     windingRule?: IWindingRule
     closed?: boolean
 
-    draggable?: boolean | 'x' | 'y'
+    // auto layout
+    flow?: IFlowType
+    padding?: IFourNumber
+    gap?: IGap | IPointGap
+    align?: IFlowAlign | IFlowAxisAlign
+    wrap?: IWrap
+    itemBox?: IFlowBoxType
+
+    inFlow?: boolean
+    autoWidth?: IAutoSize
+    autoHeight?: IAutoSize
+    autoBox?: IAutoBoxData | IConstraint
+
+    widthRange?: IRangeSize
+    heightRange?: IRangeSize
+
+    // interactive
+    draggable?: boolean | IAxis
     dragBounds?: IBoundsData | 'parent'
 
     editable?: boolean
-    editSize?: IEditSize
 
     hittable?: boolean
     hitFill?: IHitType
@@ -404,6 +532,11 @@ export interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix,
     __hasEraser?: boolean
     __hitCanvas?: IHitCanvas
 
+    __flowBounds?: IBoundsData // localBoxBounds or localStrokeBounds
+    __widthGrow?: number
+    __heightGrow?: number
+    __hasGrow?: boolean
+
     readonly __onlyHitMask: boolean
     readonly __ignoreHitWorld: boolean
 
@@ -439,7 +572,9 @@ export interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix,
 
     // find
     find(condition: number | string | IFindMethod, options?: any): ILeaf[]
+    findTag(tag: string | string[]): ILeaf[]
     findOne(condition: number | string | IFindMethod, options?: any): ILeaf
+    findId(id: number | string): ILeaf
 
     focus(value?: boolean): void
     forceUpdate(attrName?: string): void
@@ -458,11 +593,13 @@ export interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix,
     __updateLocalStrokeBounds(): void
     __updateLocalRenderBounds(): void
 
+    __updateContentBounds(): void
     __updateBoxBounds(): void
     __updateStrokeBounds(): void
     __updateRenderBounds(): void
 
     __updateAutoLayout(): void
+    __updateFlowLayout(): void
     __updateNaturalSize(): void
 
     __updateStrokeSpread(): number
@@ -474,6 +611,7 @@ export interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix,
     __updateEraser(value?: boolean): void
     __updateMask(value?: boolean): void
     __renderMask(canvas: ILeaferCanvas, options: IRenderOptions): void
+    __renderEraser(canvas: ILeaferCanvas, options: IRenderOptions): void
 
     // convert
     __getNowWorld(options: IRenderOptions): IMatrixWithBoundsScaleData // when render use other matrix

package/src/display/module/ILeafBounds.ts

@@ -15,6 +15,7 @@ export interface ILeafBounds {
     __updateRenderBounds?(): void
 
     __updateAutoLayout?(): void
+    __updateFlowLayout?(): void
     __updateNaturalSize?(): void
 
     __updateStrokeSpread?(): number

package/src/display/module/ILeafEventer.ts

@@ -8,7 +8,7 @@ export type ILeafEventerModule = ILeafEventer & ThisType<ILeaf>
 
 export interface ILeafEventer {
     on?(type: string | string[], listener: IEventListener, options?: IEventListenerOptions | boolean): void
-    off?(type: string | string[], listener: IEventListener, options?: IEventListenerOptions | boolean): void
+    off?(type?: string | string[], listener?: IEventListener, options?: IEventListenerOptions | boolean): void
     on_?(type: string | string[], listener: IEventListener, bind?: IObject, options?: IEventListenerOptions | boolean): IEventListenerId
     off_?(id: IEventListenerId | IEventListenerId[]): void
     once?(type: string | string[], listener: IEventListener, capture?: boolean): void

package/src/index.ts

@@ -1,6 +1,6 @@
 export { IAppBase } from './app/IApp'
 export { ILeaferBase, ILeaferAttrData, ILeaferType, ILeaferTypeCreator, ILeaferTypeFunction, ILeaferTypeList, ILeaferConfig, ICreator, IUICreator, IZoomType } from './app/ILeafer'
-export { ILeaf, ILeafAttrData, ILeafComputedData, ILeafInputData, ICachedLeaf, IHitType, IMaskType, IBlendMode, IEditSize, IImageCursor, ICursorType, IStateStyleType, IDirection, IAround, ILeafAttrDescriptor, ILeafAttrDescriptorFn } from './display/ILeaf'
+export { ILeaf, ILeafAttrData, ILeafComputedData, ILeafInputData, ICachedLeaf, IFlowType, IFlowBoxType, IAlign, IAxisAlign, IFlowAlign, IFlowAxisAlign, IAxis, IGap, IPointGap, IAxisReverse, IBaseLineAlign, IWrap, IAutoSize, IRangeSize, IPercentData, IUnitData, IConstraint, IConstraintType, IHitType, IMaskType, IEraserType, IBlendMode, IEditSize, IImageCursor, ICursorType, IStateStyleType, IDirection, IAround, ILeafAttrDescriptor, ILeafAttrDescriptorFn } from './display/ILeaf'
 export { IBranch } from './display/IBranch'
 export { IZoomView } from './display/IView'
 
@@ -19,7 +19,7 @@ export { IBranchRender, IBranchRenderModule } from './display/module/IBranchRend
 export { IRenderer, IRendererConfig, IRenderOptions } from './renderer/IRenderer'
 export { IWatcher, IWatchEventData, IWatcherConfig } from './watcher/IWatcher'
 export { ILayouter, ILayoutChangedData, ILayoutBlockData, ILayouterConfig, IPartLayoutConfig } from './layouter/ILayouter'
-export { ISelector, ISelectorConfig, ISelectorProxy, IFindMethod, IPickResult, IPickOptions, IPickBottom, IAnswer } from './selector/ISelector'
+export { ISelector, ISelectorConfig, ISelectorProxy, IFindCondition, IFindMethod, IPickResult, IPickOptions, IPickBottom, IAnswer } from './selector/ISelector'
 
 export { ICanvasManager } from './canvas/ICanvasManager'
 export { IHitCanvasManager } from './canvas/IHitCanvasManager'
@@ -52,5 +52,5 @@ export { IInteraction, IInteractionCanvas, IInteractionConfig, IWheelConfig, IPo
 
 export { INumber, IBoolean, IString, IValue, IFourNumber, IPathString, ITimer, IObject, INumberMap, IStringMap, IBooleanMap, IPointDataMap, IDataTypeHandle } from './data/IData'
 export { ILeafList, ILeafArrayMap, ILeafMap, ILeafLevelList, ILeafListItemCallback } from './data/IList'
-export { IPoint, IPointData, IRadiusPointData, ISize, ISizeData, IScreenSizeData, IBounds, IBoundsData, IBoundsDataFn, IOffsetBoundsData, ITwoPointBoundsData, IAutoBounds, IAutoBoundsData, IMatrix, IMatrixData, IMatrixWithBoundsData, IMatrixWithScaleData, IMatrixWithOptionScaleData, IMatrixWithBoundsScaleData, IMatrixWithLayoutData, IScaleRotationData, IScaleData, ISkewData, ILayoutBoundsData, ILayoutData, ILayoutAttr } from './math/IMath'
+export { IPoint, IPointData, IUnitPointData, IScrollPointData, IRadiusPointData, ISize, ISizeData, IScreenSizeData, IBounds, IBoundsData, IBoundsDataFn, IOffsetBoundsData, ITwoPointBoundsData, IAutoBounds, IAutoBoxData, IAutoBoundsData, IMatrix, IMatrixData, IMatrixWithBoundsData, IMatrixWithScaleData, IMatrixWithOptionScaleData, IMatrixWithBoundsScaleData, IMatrixWithLayoutData, IScaleRotationData, IScaleData, ISkewData, ILayoutBoundsData, ILayoutData, ILayoutAttr } from './math/IMath'
 export { IFunction, IStringFunction, INumberFunction, IObjectFunction, IPointDataFunction, IAttrDecorator } from './function/IFunction'

package/src/layout/ILeafLayout.ts

@@ -2,7 +2,7 @@ import { IBoundsData, IMatrixData, ILayoutBoundsData, IPointData } from '../math
 import { ILeaf } from '../display/ILeaf'
 
 export type ILocationType = 'world' | 'page' | 'local' | 'inner'
-export type IBoundsType = 'content' | 'box' | 'stroke' | 'margin' | 'render'
+export type IBoundsType = 'content' | 'box' | 'stroke' | 'render'
 
 export interface ILeafLayout {
 
@@ -12,19 +12,24 @@ export interface ILeafLayout {
 
     // inner
 
+    contentBounds: IBoundsData // | content | 
     boxBounds: IBoundsData    //  | content + padding |
     strokeBounds: IBoundsData  //  | boxBounds + border |  
     renderBounds: IBoundsData //  | strokeBounds + shadow |
 
-    // auto layout
-    marginBounds: IBoundsData //  | strokeBounds + margin |
-    contentBounds: IBoundsData // | content |  
-
     // local
 
-    //localBoxBounds: IBoundsData = leaf.__local
-    localStrokeBounds?: IBoundsData
-    localRenderBounds?: IBoundsData
+    localContentBounds: IBoundsData
+    // localBoxBounds: IBoundsData // use leaf.__localBoxBounds
+    localStrokeBounds: IBoundsData
+    localRenderBounds: IBoundsData
+
+    // world
+
+    worldContentBounds: IBoundsData
+    worldBoxBounds: IBoundsData
+    worldStrokeBounds: IBoundsData
+    // worldRenderBounds: IBoundsData // use leaf.__world
 
     // state
     resized: boolean
@@ -84,8 +89,10 @@ export interface ILeafLayout {
     getLayoutPoints(type?: IBoundsType, relative?: ILocationType | ILeaf): IPointData[]
 
     // 独立 / 引用 boxBounds
+    shrinkContent(): void
     spreadStroke(): void
     spreadRender(): void
+    shrinkContentCancel(): void
     spreadStrokeCancel(): void
     spreadRenderCancel(): void
 

package/src/math/IMath.ts

@@ -5,6 +5,17 @@ export interface IPointData {
     y: number
 }
 
+export interface IUnitPointData {
+    type?: 'percent' | 'px'
+    x: number
+    y: number
+}
+
+export interface IScrollPointData {
+    scrollX: number
+    scrollY: number
+}
+
 export interface IPoint extends IPointData {
     set(x?: number | IPointData, y?: number): IPoint
     get(): IPointData
@@ -70,7 +81,7 @@ export interface IBounds extends IBoundsData, ITwoPointBoundsData {
     toInnerOf(matrix: IMatrixData, to?: IBoundsData): IBounds
     getFitMatrix(put: IBoundsData, baseScale?: number): IMatrix
 
-    spread(fourNumber: IFourNumber, spreadY?: number): IBounds
+    spread(fourNumber: IFourNumber): IBounds
     shrink(fourNumber: IFourNumber): IBounds
     ceil(): IBounds
     unsign(): IBounds
@@ -106,13 +117,15 @@ export interface ITwoPointBoundsData {
     maxY: number
 }
 
-
-export interface IAutoBoundsData {
+export interface IAutoBoxData {
     top?: number
     right?: number
     bottom?: number
     left?: number
+}
+
 
+export interface IAutoBoundsData extends IAutoBoxData {
     width?: number
     height?: number
 }

package/src/selector/ISelector.ts

@@ -31,6 +31,12 @@ export interface ISelectorConfig {
 
 export type IAnswer = 0 | 1 | 2 | 3
 
+export interface IFindCondition {
+    id?: number | string,
+    className?: string,
+    tag?: string | string[]
+}
+
 export interface IFindMethod {
     (leaf: ILeaf, options?: any): IAnswer
 }

package/types/index.d.ts

@@ -4,6 +4,15 @@ interface IPointData {
     x: number;
     y: number;
 }
+interface IUnitPointData {
+    type?: 'percent' | 'px';
+    x: number;
+    y: number;
+}
+interface IScrollPointData {
+    scrollX: number;
+    scrollY: number;
+}
 interface IPoint extends IPointData {
     set(x?: number | IPointData, y?: number): IPoint;
     get(): IPointData;
@@ -55,7 +64,7 @@ interface IBounds extends IBoundsData, ITwoPointBoundsData {
     toOuterOf(matrix: IMatrixData, to?: IBoundsData): IBounds;
     toInnerOf(matrix: IMatrixData, to?: IBoundsData): IBounds;
     getFitMatrix(put: IBoundsData, baseScale?: number): IMatrix;
-    spread(fourNumber: IFourNumber, spreadY?: number): IBounds;
+    spread(fourNumber: IFourNumber): IBounds;
     shrink(fourNumber: IFourNumber): IBounds;
     ceil(): IBounds;
     unsign(): IBounds;
@@ -84,11 +93,13 @@ interface ITwoPointBoundsData {
     maxX: number;
     maxY: number;
 }
-interface IAutoBoundsData {
+interface IAutoBoxData {
     top?: number;
     right?: number;
     bottom?: number;
     left?: number;
+}
+interface IAutoBoundsData extends IAutoBoxData {
     width?: number;
     height?: number;
 }
@@ -368,7 +379,7 @@ interface IKeepTouchData {
 type ILeafEventerModule = ILeafEventer & ThisType<ILeaf>;
 interface ILeafEventer {
     on?(type: string | string[], listener: IEventListener, options?: IEventListenerOptions | boolean): void;
-    off?(type: string | string[], listener: IEventListener, options?: IEventListenerOptions | boolean): void;
+    off?(type?: string | string[], listener?: IEventListener, options?: IEventListenerOptions | boolean): void;
     on_?(type: string | string[], listener: IEventListener, bind?: IObject, options?: IEventListenerOptions | boolean): IEventListenerId;
     off_?(id: IEventListenerId | IEventListenerId[]): void;
     once?(type: string | string[], listener: IEventListener, capture?: boolean): void;
@@ -786,17 +797,20 @@ type IExportImageType = 'jpg' | 'png' | 'webp';
 type IExportFileType = IExportImageType | 'svg' | 'pdf' | 'json';
 
 type ILocationType = 'world' | 'page' | 'local' | 'inner';
-type IBoundsType = 'content' | 'box' | 'stroke' | 'margin' | 'render';
+type IBoundsType = 'content' | 'box' | 'stroke' | 'render';
 interface ILeafLayout {
     leaf: ILeaf;
     proxyZoom: boolean;
+    contentBounds: IBoundsData;
     boxBounds: IBoundsData;
     strokeBounds: IBoundsData;
     renderBounds: IBoundsData;
-    marginBounds: IBoundsData;
-    contentBounds: IBoundsData;
-    localStrokeBounds?: IBoundsData;
-    localRenderBounds?: IBoundsData;
+    localContentBounds: IBoundsData;
+    localStrokeBounds: IBoundsData;
+    localRenderBounds: IBoundsData;
+    worldContentBounds: IBoundsData;
+    worldBoxBounds: IBoundsData;
+    worldStrokeBounds: IBoundsData;
     resized: boolean;
     waitAutoLayout: boolean;
     matrixChanged: boolean;
@@ -834,8 +848,10 @@ interface ILeafLayout {
     getBounds(type?: IBoundsType, relative?: ILocationType | ILeaf): IBoundsData;
     getLayoutBounds(type?: IBoundsType, relative?: ILocationType | ILeaf, unscale?: boolean): ILayoutBoundsData;
     getLayoutPoints(type?: IBoundsType, relative?: ILocationType | ILeaf): IPointData[];
+    shrinkContent(): void;
     spreadStroke(): void;
     spreadRender(): void;
+    shrinkContentCancel(): void;
     spreadStrokeCancel(): void;
     spreadRenderCancel(): void;
     boxChange(): void;
@@ -1084,6 +1100,7 @@ interface ILeafBounds {
     __updateStrokeBounds?(): void;
     __updateRenderBounds?(): void;
     __updateAutoLayout?(): void;
+    __updateFlowLayout?(): void;
     __updateNaturalSize?(): void;
     __updateStrokeSpread?(): number;
     __updateRenderSpread?(): number;
@@ -1166,6 +1183,11 @@ interface IPickBottom {
 interface ISelectorConfig {
 }
 type IAnswer = 0 | 1 | 2 | 3;
+interface IFindCondition {
+    id?: number | string;
+    className?: string;
+    tag?: string | string[];
+}
 interface IFindMethod {
     (leaf: ILeaf, options?: any): IAnswer;
 }
@@ -1202,9 +1224,9 @@ interface ILeafAttrData {
     disabled: IBoolean;
     locked: IBoolean;
     zIndex: INumber;
-    mask: IBoolean;
+    mask: IMaskType;
     maskType: IMaskType;
-    eraser: IBoolean;
+    eraser: IEraserType;
     x: INumber;
     y: INumber;
     width: INumber;
@@ -1215,16 +1237,32 @@ interface ILeafAttrData {
     skewX: INumber;
     skewY: INumber;
     scale: INumber | IPointData;
-    around: IAround;
+    offsetX: INumber;
+    offsetY: INumber;
+    scrollX: INumber;
+    scrollY: INumber;
+    origin: IAlign | IUnitPointData;
+    around: IAlign | IUnitPointData;
     lazy: IBoolean;
     pixelRatio: INumber;
-    draggable: IBoolean | 'x' | 'y';
-    dragBounds?: IBoundsData | 'parent';
     path: IPathCommandData | IPathString;
     windingRule: IWindingRule;
     closed: boolean;
+    flow: IFlowType;
+    padding: IFourNumber;
+    gap: IGap | IPointGap;
+    align: IFlowAlign | IFlowAxisAlign;
+    wrap: IWrap;
+    itemBox: IFlowBoxType;
+    inFlow: IBoolean;
+    autoWidth: IAutoSize;
+    autoHeight: IAutoSize;
+    autoBox: IAutoBoxData | IConstraint;
+    widthRange: IRangeSize;
+    heightRange: IRangeSize;
+    draggable: IBoolean | IAxis;
+    dragBounds?: IBoundsData | 'parent';
     editable: IBoolean;
-    editSize: IEditSize;
     hittable: IBoolean;
     hitFill: IHitType;
     hitStroke: IHitType;
@@ -1240,8 +1278,42 @@ interface ILeafAttrData {
     selectedStyle: ILeafInputData;
     disabledStyle: ILeafInputData;
 }
+type IAxis = 'x' | 'y';
+type IAxisReverse = 'x-reverse' | 'y-reverse';
+type IFlowType = boolean | IAxis | IAxisReverse;
+type IFlowBoxType = 'box' | 'stroke';
+type IGap = INumber | 'auto' | 'fit';
+interface IPointGap {
+    x?: IGap;
+    y?: IGap;
+}
+type IAxisAlign = 'from' | 'center' | 'to';
+interface IFlowAxisAlign {
+    content?: IFlowAlign;
+    rowX?: IAxisAlign;
+    rowY?: IAxisAlign;
+}
+type IWrap = boolean | 'reverse';
+type IAutoSize = IBoolean | INumber | IPercentData;
+interface IRangeSize {
+    min?: number;
+    max?: number;
+}
+interface IUnitData {
+    type: 'percent' | 'px';
+    value: number;
+}
+interface IPercentData extends IUnitData {
+    type: 'percent';
+}
+interface IConstraint {
+    x: IConstraintType;
+    y: IConstraintType;
+}
+type IConstraintType = 'from' | 'center' | 'to' | 'from-to' | 'scale';
 type IHitType = 'path' | 'pixel' | 'all' | 'none';
-type IMaskType = 'path' | 'pixel' | 'clipping';
+type IMaskType = boolean | 'path' | 'pixel' | 'clipping';
+type IEraserType = boolean | 'path' | 'pixel';
 type IBlendMode = 'pass-through' | 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity' | 'source-over' | 'source-in' | 'source-out' | 'source-atop' | 'destination-over' | 'destination-in' | 'destination-out' | 'destination-atop' | 'xor';
 type IEditSize = 'size' | 'scale';
 interface IImageCursor {
@@ -1250,8 +1322,11 @@ interface IImageCursor {
     y?: number;
     rotation?: number;
 }
-type IDirection = 'topLeft' | 'top' | 'topRight' | 'right' | 'bottomRight' | 'bottom' | 'bottomLeft' | 'left' | 'center';
-type IAround = IDirection | IPointData;
+type IDirection = 'top-left' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'center';
+type IAlign = IDirection;
+type IBaseLineAlign = 'baseline-left' | 'baseline-center' | 'baseline-right';
+type IFlowAlign = IAlign | IBaseLineAlign;
+type IAround = IAlign | IUnitPointData;
 type ICursorType = IImageCursor | '' | 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'grab' | 'grabbing' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'col-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out';
 type IStateStyleType = 'hoverStyle' | 'pressStyle' | 'focusStyle' | 'selectedStyle' | 'disabledStyle';
 interface ILeafInputData {
@@ -1266,9 +1341,9 @@ interface ILeafInputData {
     disabled?: IBoolean;
     locked?: IBoolean;
     zIndex?: INumber;
-    mask?: IBoolean;
+    mask?: IMaskType;
     maskType?: IMaskType;
-    eraser?: IBoolean;
+    eraser?: IEraserType;
     x?: INumber;
     y?: INumber;
     width?: INumber;
@@ -1279,16 +1354,32 @@ interface ILeafInputData {
     skewX?: INumber;
     skewY?: INumber;
     scale?: INumber | IPointData;
-    around?: IAround;
+    offsetX?: INumber;
+    offsetY?: INumber;
+    scrollX?: INumber;
+    scrollY?: INumber;
+    origin?: IAlign | IUnitPointData;
+    around?: IAlign | IUnitPointData;
     lazy?: IBoolean;
     pixelRatio?: INumber;
-    draggable?: IBoolean | 'x' | 'y';
-    dragBounds?: IBoundsData | 'parent';
     path?: IPathCommandData | IPathString;
     windingRule?: IWindingRule;
     closed?: boolean;
+    flow?: IFlowType;
+    padding?: IFourNumber;
+    gap?: IGap | IPointGap;
+    align?: IFlowAlign | IFlowAxisAlign;
+    wrap?: IWrap;
+    itemBox?: IFlowBoxType;
+    inFlow?: IBoolean;
+    autoWidth?: IAutoSize;
+    autoHeight?: IAutoSize;
+    autoBox?: IAutoBoxData | IConstraint;
+    widthRange?: IRangeSize;
+    heightRange?: IRangeSize;
+    draggable?: IBoolean | IAxis;
+    dragBounds?: IBoundsData | 'parent';
     editable?: IBoolean;
-    editSize?: IEditSize;
     hittable?: IBoolean;
     hitFill?: IHitType;
     hitStroke?: IHitType;
@@ -1317,9 +1408,9 @@ interface ILeafComputedData {
     disabled?: boolean;
     locked?: boolean;
     zIndex?: number;
-    mask?: boolean;
+    mask?: boolean | IMaskType;
     maskType?: IMaskType;
-    eraser?: boolean;
+    eraser?: IEraserType;
     x?: number;
     y?: number;
     width?: number;
@@ -1329,16 +1420,32 @@ interface ILeafComputedData {
     rotation?: number;
     skewX?: number;
     skewY?: number;
-    around?: IAround;
+    offsetX?: number;
+    offsetY?: number;
+    scrollX?: number;
+    scrollY?: number;
+    origin?: IAlign | IUnitPointData;
+    around?: IAlign | IUnitPointData;
     lazy?: boolean;
     pixelRatio?: number;
     path?: IPathCommandData;
     windingRule?: IWindingRule;
     closed?: boolean;
-    draggable?: boolean | 'x' | 'y';
+    flow?: IFlowType;
+    padding?: IFourNumber;
+    gap?: IGap | IPointGap;
+    align?: IFlowAlign | IFlowAxisAlign;
+    wrap?: IWrap;
+    itemBox?: IFlowBoxType;
+    inFlow?: boolean;
+    autoWidth?: IAutoSize;
+    autoHeight?: IAutoSize;
+    autoBox?: IAutoBoxData | IConstraint;
+    widthRange?: IRangeSize;
+    heightRange?: IRangeSize;
+    draggable?: boolean | IAxis;
     dragBounds?: IBoundsData | 'parent';
     editable?: boolean;
-    editSize?: IEditSize;
     hittable?: boolean;
     hitFill?: IHitType;
     hitStroke?: IHitType;
@@ -1406,6 +1513,10 @@ interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix, ILeafDa
     __hasMask?: boolean;
     __hasEraser?: boolean;
     __hitCanvas?: IHitCanvas;
+    __flowBounds?: IBoundsData;
+    __widthGrow?: number;
+    __heightGrow?: number;
+    __hasGrow?: boolean;
     readonly __onlyHitMask: boolean;
     readonly __ignoreHitWorld: boolean;
     readonly pathInputed: boolean;
@@ -1430,7 +1541,9 @@ interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix, ILeafDa
     setProxyAttr(name: string, newValue: IValue): void;
     getProxyAttr(name: string): IValue;
     find(condition: number | string | IFindMethod, options?: any): ILeaf[];
+    findTag(tag: string | string[]): ILeaf[];
     findOne(condition: number | string | IFindMethod, options?: any): ILeaf;
+    findId(id: number | string): ILeaf;
     focus(value?: boolean): void;
     forceUpdate(attrName?: string): void;
     updateLayout(): void;
@@ -1441,10 +1554,12 @@ interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix, ILeafDa
     __updateLocalBoxBounds(): void;
     __updateLocalStrokeBounds(): void;
     __updateLocalRenderBounds(): void;
+    __updateContentBounds(): void;
     __updateBoxBounds(): void;
     __updateStrokeBounds(): void;
     __updateRenderBounds(): void;
     __updateAutoLayout(): void;
+    __updateFlowLayout(): void;
     __updateNaturalSize(): void;
     __updateStrokeSpread(): number;
     __updateRenderSpread(): number;
@@ -1452,6 +1567,7 @@ interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix, ILeafDa
     __updateEraser(value?: boolean): void;
     __updateMask(value?: boolean): void;
     __renderMask(canvas: ILeaferCanvas, options: IRenderOptions): void;
+    __renderEraser(canvas: ILeaferCanvas, options: IRenderOptions): void;
     __getNowWorld(options: IRenderOptions): IMatrixWithBoundsScaleData;
     getWorld(attrName: ILayoutAttr): number;
     getTransform(relative?: ILocationType | ILeaf): IMatrixData;
@@ -1765,7 +1881,6 @@ interface ILeaferAttrData {
     stop(): void;
     unlockLayout(): void;
     lockLayout(): void;
-    forceFullRender(): void;
     forceRender(bounds?: IBoundsData): void;
     updateCursor(cursor?: ICursorType): void;
     resize(size: IScreenSizeData): void;
@@ -1980,4 +2095,4 @@ interface ICursorRotateMap {
     [name: string]: ICursorRotate;
 }
 
-export type { ACommandData, ArcCommandData, ArcToCommandData, CCommandData, CanvasPathCommand, EllipseCommandData, HCommandData, IAnimateEvent, IAnswer, IAppBase, IAround, IAttrDecorator, IAutoBounds, IAutoBoundsData, IBlendMode, IBlob, IBlobFunction, IBoolean, IBooleanMap, IBounds, IBoundsData, IBoundsDataFn, IBoundsType, IBranch, IBranchRender, IBranchRenderModule, ICachedLeaf, ICanvasAttr, ICanvasCacheOptions, ICanvasContext2D, ICanvasContext2DSettings, ICanvasManager, ICanvasPattern, ICanvasStrokeOptions, ICanvasType, IChildEvent, IControl, ICreator, ICursorRotate, ICursorRotateMap, ICursorType, ICursorTypeMap, IDataProcessor, IDataTypeHandle, IDirection, IDragEvent, IDropEvent, IEditSize, IEvent, IEventListener, IEventListenerId, IEventListenerItem, IEventListenerMap, IEventListenerOptions, IEventTarget, IEventer, IExportFileType, IExportImageType, IExportOnCanvasFunction, IExportOptions, IExportResult, IExportResultFunction, IFindMethod, IFourNumber, IFunction, IHitCanvas, IHitCanvasConfig, IHitCanvasManager, IHitType, IImageCursor, IImageEvent, IImageManager, IInteraction, IInteractionCanvas, IInteractionConfig, IKeepTouchData, IKeyEvent, ILayoutAttr, ILayoutBlockData, ILayoutBoundsData, ILayoutChangedData, ILayoutData, ILayoutEvent, ILayouter, ILayouterConfig, ILeaf, ILeafArrayMap, ILeafAttrData, ILeafAttrDescriptor, ILeafAttrDescriptorFn, ILeafBounds, ILeafBoundsModule, ILeafComputedData, ILeafData, ILeafDataOptions, ILeafDataProxy, ILeafDataProxyModule, ILeafEventer, ILeafEventerModule, ILeafHit, ILeafHitModule, ILeafInputData, ILeafLayout, ILeafLevelList, ILeafList, ILeafListItemCallback, ILeafMap, ILeafMatrix, ILeafMatrixModule, ILeafRender, ILeafRenderModule, ILeaferAttrData, ILeaferBase, ILeaferCanvas, ILeaferCanvasConfig, ILeaferCanvasView, ILeaferConfig, ILeaferEvent, ILeaferImage, ILeaferImageCacheCanvas, ILeaferImageConfig, ILeaferImageOnError, ILeaferImageOnLoaded, ILeaferImagePatternPaint, ILeaferType, ILeaferTypeCreator, ILeaferTypeFunction, ILeaferTypeList, ILocationType, IMaskType, IMatrix, IMatrixData, IMatrixWithBoundsData, IMatrixWithBoundsScaleData, IMatrixWithLayoutData, IMatrixWithOptionScaleData, IMatrixWithScaleData, IMiniapp, IMiniappSelect, IMiniappSizeView, IMoveEvent, IMultiTouchData, INumber, INumberFunction, INumberMap, IObject, IObjectFunction, IOffsetBoundsData, IPartLayoutConfig, IPath2D, IPathCommandData, IPathCreator, IPathDrawer, IPathString, IPickBottom, IPickOptions, IPickResult, IPlatform, IPlugin, IPoint, IPointData, IPointDataFunction, IPointDataMap, IPointerConfig, IPointerEvent, IPropertyEvent, IRadiusPointData, IRenderEvent, IRenderOptions, IRenderer, IRendererConfig, IResizeEvent, IResizeEventListener, IRotateEvent, IScaleData, IScaleRotationData, IScreenSizeData, ISelector, ISelectorConfig, ISelectorProxy, ISize, ISizeData, ISkewData, ISkiaCanvas, ISkiaCanvasExportConfig, ISkiaNAPICanvas, IStateStyleType, IString, IStringFunction, IStringMap, ISwipeEvent, ITaskItem, ITaskOptions, ITaskProcessor, ITaskProcessorConfig, ITextMetrics, ITimer, ITwoPointBoundsData, IUICreator, IUIEvent, IUpdateEvent, IValue, IWatchEvent, IWatchEventData, IWatcher, IWatcherConfig, IWheelConfig, IWindingRule, IZoomEvent, IZoomType, IZoomView, InnerId, LCommandData, MCommandData, PointerType, QCommandData, RectCommandData, RoundRectCommandData, SCommandData, TCommandData, VCommandData, ZCommandData };
+export type { ACommandData, ArcCommandData, ArcToCommandData, CCommandData, CanvasPathCommand, EllipseCommandData, HCommandData, IAlign, IAnimateEvent, IAnswer, IAppBase, IAround, IAttrDecorator, IAutoBounds, IAutoBoundsData, IAutoBoxData, IAutoSize, IAxis, IAxisAlign, IAxisReverse, IBaseLineAlign, IBlendMode, IBlob, IBlobFunction, IBoolean, IBooleanMap, IBounds, IBoundsData, IBoundsDataFn, IBoundsType, IBranch, IBranchRender, IBranchRenderModule, ICachedLeaf, ICanvasAttr, ICanvasCacheOptions, ICanvasContext2D, ICanvasContext2DSettings, ICanvasManager, ICanvasPattern, ICanvasStrokeOptions, ICanvasType, IChildEvent, IConstraint, IConstraintType, IControl, ICreator, ICursorRotate, ICursorRotateMap, ICursorType, ICursorTypeMap, IDataProcessor, IDataTypeHandle, IDirection, IDragEvent, IDropEvent, IEditSize, IEraserType, IEvent, IEventListener, IEventListenerId, IEventListenerItem, IEventListenerMap, IEventListenerOptions, IEventTarget, IEventer, IExportFileType, IExportImageType, IExportOnCanvasFunction, IExportOptions, IExportResult, IExportResultFunction, IFindCondition, IFindMethod, IFlowAlign, IFlowAxisAlign, IFlowBoxType, IFlowType, IFourNumber, IFunction, IGap, IHitCanvas, IHitCanvasConfig, IHitCanvasManager, IHitType, IImageCursor, IImageEvent, IImageManager, IInteraction, IInteractionCanvas, IInteractionConfig, IKeepTouchData, IKeyEvent, ILayoutAttr, ILayoutBlockData, ILayoutBoundsData, ILayoutChangedData, ILayoutData, ILayoutEvent, ILayouter, ILayouterConfig, ILeaf, ILeafArrayMap, ILeafAttrData, ILeafAttrDescriptor, ILeafAttrDescriptorFn, ILeafBounds, ILeafBoundsModule, ILeafComputedData, ILeafData, ILeafDataOptions, ILeafDataProxy, ILeafDataProxyModule, ILeafEventer, ILeafEventerModule, ILeafHit, ILeafHitModule, ILeafInputData, ILeafLayout, ILeafLevelList, ILeafList, ILeafListItemCallback, ILeafMap, ILeafMatrix, ILeafMatrixModule, ILeafRender, ILeafRenderModule, ILeaferAttrData, ILeaferBase, ILeaferCanvas, ILeaferCanvasConfig, ILeaferCanvasView, ILeaferConfig, ILeaferEvent, ILeaferImage, ILeaferImageCacheCanvas, ILeaferImageConfig, ILeaferImageOnError, ILeaferImageOnLoaded, ILeaferImagePatternPaint, ILeaferType, ILeaferTypeCreator, ILeaferTypeFunction, ILeaferTypeList, ILocationType, IMaskType, IMatrix, IMatrixData, IMatrixWithBoundsData, IMatrixWithBoundsScaleData, IMatrixWithLayoutData, IMatrixWithOptionScaleData, IMatrixWithScaleData, IMiniapp, IMiniappSelect, IMiniappSizeView, IMoveEvent, IMultiTouchData, INumber, INumberFunction, INumberMap, IObject, IObjectFunction, IOffsetBoundsData, IPartLayoutConfig, IPath2D, IPathCommandData, IPathCreator, IPathDrawer, IPathString, IPercentData, IPickBottom, IPickOptions, IPickResult, IPlatform, IPlugin, IPoint, IPointData, IPointDataFunction, IPointDataMap, IPointGap, IPointerConfig, IPointerEvent, IPropertyEvent, IRadiusPointData, IRangeSize, IRenderEvent, IRenderOptions, IRenderer, IRendererConfig, IResizeEvent, IResizeEventListener, IRotateEvent, IScaleData, IScaleRotationData, IScreenSizeData, IScrollPointData, ISelector, ISelectorConfig, ISelectorProxy, ISize, ISizeData, ISkewData, ISkiaCanvas, ISkiaCanvasExportConfig, ISkiaNAPICanvas, IStateStyleType, IString, IStringFunction, IStringMap, ISwipeEvent, ITaskItem, ITaskOptions, ITaskProcessor, ITaskProcessorConfig, ITextMetrics, ITimer, ITwoPointBoundsData, IUICreator, IUIEvent, IUnitData, IUnitPointData, IUpdateEvent, IValue, IWatchEvent, IWatchEventData, IWatcher, IWatcherConfig, IWheelConfig, IWindingRule, IWrap, IZoomEvent, IZoomType, IZoomView, InnerId, LCommandData, MCommandData, PointerType, QCommandData, RectCommandData, RoundRectCommandData, SCommandData, TCommandData, VCommandData, ZCommandData };