@leafer/interface 2.0.2 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/interface",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "@leafer/interface",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",

package/src/app/ILeafer.ts

@@ -18,6 +18,7 @@ import { ILeaferVideo, ILeaferVideoConfig } from '../image/ILeaferVideo'
 import { IControl } from '../control/IControl'
 import { IFunction } from '../function/IFunction'
 import { ITransition } from '../animate/ITransition'
+import { ILeafMap } from '../data/IList'
 
 
 export type ILeaferType = 'draw' | 'block' | 'viewport' | 'editor' | 'design' | 'board' | 'document' | 'app' | 'website' | 'game' | 'player' | 'chart' | 'custom' // 应用场景类型
@@ -66,6 +67,12 @@ export interface ILeaferAttrData {
     config: ILeaferConfig
     userConfig?: ILeaferConfig
 
+    // @leafer-in/find
+    cacheId?: boolean
+    cacheInnerId?: boolean
+    innerIdMap?: ILeafMap
+    idMap?: ILeafMap
+
     readonly cursorPoint: IPointData
     readonly clientBounds: IBoundsData
     leafs: number
@@ -147,7 +154,7 @@ export interface ICreator {
     layouter?(target: ILeaf, options?: ILayouterConfig): ILayouter
     renderer?(target: ILeaf, canvas: ILeaferCanvas, options?: IRendererConfig): IRenderer
     selector?(target?: ILeaf, options?: ISelectorConfig): ISelector
-    finder?(target?: ILeaf): IFinder
+    finder?(target?: ILeaf, options?: ISelectorConfig): IFinder
 
     interaction?(target: ILeaf, canvas: IInteractionCanvas, selector: ISelector, options?: IInteractionConfig): IInteraction
 

package/src/data/ILeafData.ts

@@ -29,6 +29,7 @@ export interface ILeafDataOptions {
 export interface ILeafData extends IDataProcessor, ILeafComputedData {
     __single?: boolean
     readonly __hasMultiPaint?: boolean // fill 、stroke 、shadow 等同时存在两次以上外观绘制的情况
+    __willDestroy?: boolean
     __checkSingle(): void
     __removeNaturalSize(): void
 }

package/src/display/ILeaf.ts

@@ -21,14 +21,7 @@ import { IWindingRule, IPath2D } from '../canvas/ICanvas'
 import { IJSONOptions } from '../file/IExport'
 import { IMotionPathData } from '../path/IPathData'
 import { ITransition } from '../animate/ITransition'
-
-
-export interface ICachedLeaf {
-    canvas: ILeaferCanvas, // 完整的元素缓存画布
-    matrix?: IMatrix, // 包含导出时附加的 options.matrix
-    fitMatrix?: IMatrix, // 不包含导出时附加的 options.matrix
-    bounds: IBoundsData
-}
+import { ITaskItem } from '../task/ITaskProcessor'
 
 
 export type ISide = 'width' | 'height'
@@ -434,6 +427,7 @@ export interface ILeafComputedData {
     // other
     __childBranchNumber?: number // 存在子分支的个数
     __complex?: boolean // 外观是否复杂
+    __complexData?: ILeafComplexCachedData // 复杂元素的缓存图
 
     __naturalWidth?: number
     __naturalHeight?: number
@@ -456,12 +450,19 @@ export interface ILeafComputedData {
     __pathInputed?: number // 是否为输入path, 0：否，1：是，2：永远是（不自动检测）
     __pathForRender?: IPathCommandData
     __path2DForRender?: IPath2D
-    __pathForArrow?: IPathCommandData
+
+    __startArrowPath?: IArrowPathData
+    __endArrowPath?: IArrowPathData
     __pathForMotion?: IMotionPathData
 
     __clipAfterFill?: boolean // 一般用于判断是否裁剪 Box
 }
 
+export interface IArrowPathData {
+    data: IPathCommandData
+    fill?: boolean
+}
+
 export interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix, ILeafDataProxy, ILeafInputData, IEventer {
     tag: string
     readonly __tag: string
@@ -532,6 +533,7 @@ export interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix,
 
     __hasAutoLayout?: boolean
     __hasMotionPath?: boolean
+    __hasComplex?: boolean
 
     __hasMask?: boolean
     __hasEraser?: boolean
@@ -635,7 +637,7 @@ export interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix,
     // convert
     __getNowWorld(options: IRenderOptions): IMatrixWithBoundsScaleData // when render use other matrix
     getClampRenderScale(): number // 获取当前渲染元素的缩放比例，限制最小为1
-    getRenderScaleData(abs?: boolean, scaleFixed?: IScaleFixed): IScaleData // 当前渲染的比例数据，必须马上分解使用
+    getRenderScaleData(abs?: boolean, scaleFixed?: IScaleFixed, unscale?: boolean): IScaleData // 当前渲染的比例数据，必须马上分解使用
 
     getTransform(relative?: ILocationType | ILeaf): IMatrixData
 
@@ -699,7 +701,6 @@ export interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix,
 
     // ILeafRender ->
     __render(canvas: ILeaferCanvas, options: IRenderOptions): void
-    __renderComplex(canvas: ILeaferCanvas, options: IRenderOptions): void
     __drawFast(canvas: ILeaferCanvas, options: IRenderOptions): void
     __draw(canvas: ILeaferCanvas, options: IRenderOptions, originCanvas?: ILeaferCanvas): void
 
@@ -714,7 +715,7 @@ export interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix,
     __drawPath(canvas: ILeaferCanvas): void
     __drawRenderPath(canvas: ILeaferCanvas): void
     __updatePath(): void
-    __updateRenderPath(): void
+    __updateRenderPath(updateCache?: boolean): void
 
     // motion path
     getMotionPathData(): IMotionPathData
@@ -742,3 +743,19 @@ export type ILeafAttrDescriptor = IObject & ThisType<ILeaf>
 export interface ILeafAttrDescriptorFn {
     (key: string): ILeafAttrDescriptor
 }
+
+export interface ICachedLeaf {
+    canvas: ILeaferCanvas, // 完整的元素缓存画布
+    matrix?: IMatrix, // 包含导出时附加的 options.matrix
+    fitMatrix?: IMatrix, // 不包含导出时附加的 options.matrix
+    bounds: IBoundsData
+}
+
+export interface ILeafComplexCachedData { // 复杂元素缓存对象
+    canvas?: ILeaferCanvas
+    scaleX?: number
+    scaleY?: number
+    changed?: boolean
+    task?: ITaskItem
+    destroy(): void
+}

package/src/image/ILeaferImage.ts

@@ -1,7 +1,7 @@
 import { ICanvasPattern } from '../canvas/ICanvas'
 import { IObject } from '../data/IData'
 import { InnerId } from '../event/IEventer'
-import { IExportFileType } from '../file/IFileType'
+import { IExportFileType, IFilmFileType, IVideoFileType } from '../file/IFileType'
 import { IBoundsData, IMatrixData, IPointData, ISizeData } from '../math/IMath'
 import { ILeaferCanvas } from '../canvas/ILeaferCanvas'
 import { IProgressData } from '../event/IProgress'
@@ -13,7 +13,7 @@ import { IFunction } from '../function/IFunction'
 export interface ILeaferImageConfig {
     url: string
     lod?: IImageLOD
-    format?: IExportFileType
+    format?: IExportFileType | IFilmFileType | IVideoFileType
     crossOrigin?: IImageCrossOrigin
     showProgress?: boolean | string // 是否显示进度
     view?: IObject | ILeaferImage | ILeaferCanvas
@@ -102,6 +102,14 @@ export interface ILeaferImage {
 
     isPlacehold?: boolean // 是否显示占位符，一般在加载100ms后自动判断
 
+    // filter
+    parent?: ILeaferImage
+    childrenMap?: ILeaferImageMap
+
+    filter?: any[]
+    filterKey?: string
+
+    // lod
     largeThumb?: ILeaferImageLevel
     thumb?: ILeaferImageLevel
     levels?: ILeaferImageLevel[]
@@ -130,7 +138,12 @@ export interface ILeaferImage {
     getLevelData(level: number, width?: number, height?: number): ILeaferImageLevel
     clearLevels(checkUse?: boolean): void
 
+    destroyFilter(): void // parent and childrenMap
     destroy(): void
 }
 
+export interface ILeaferImageMap {
+    [name: string]: ILeaferImage
+}
+
 export type IImageStatus = 'wait' | 'thumb-loading' | 'thumb-success' | 'thumb-error' | 'loading' | 'success' | 'error' 

package/src/index.ts

@@ -1,6 +1,6 @@
 export { IAppBase } from './app/IApp'
 export { ILeaferBase, ILeaferAttrData, ILeaferType, ILeaferMode, ILeaferTypeCreator, ILeaferTypeFunction, ILeaferTypeList, ILeaferConfig, ICreator, IUICreator, IZoomType, IZoomOptions } from './app/ILeafer'
-export { ILeaf, ILeafAttrData, ILeafComputedData, ILeafInputData, ICachedLeaf, IFlowType, IFlowBoxType, IAlign, IAxisAlign, IFlowAlign, IFlowAxisAlign, ISide, IAxis, IGap, IPointGap, IAxisReverse, IBaseLineAlign, IFlowWrap, IAutoSize, IRangeSize, IInterlace, IPercentData, IUnitData, IConstraint, IConstraintType, IScaleFixed, IHitType, IMaskType, IEraserType, IBlendMode, IEditSize, IDragBoundsType, IImageCursor, ICursorType, IStateStyleType, IDirection, IDirection4, IAround, IFilter, ILeafAttrDescriptor, ILeafAttrDescriptorFn } from './display/ILeaf'
+export { ILeaf, ILeafAttrData, ILeafComputedData, ILeafInputData, ICachedLeaf, ILeafComplexCachedData, IFlowType, IFlowBoxType, IAlign, IAxisAlign, IFlowAlign, IFlowAxisAlign, ISide, IAxis, IGap, IPointGap, IAxisReverse, IBaseLineAlign, IFlowWrap, IAutoSize, IRangeSize, IInterlace, IPercentData, IUnitData, IConstraint, IConstraintType, IScaleFixed, IHitType, IMaskType, IEraserType, IBlendMode, IEditSize, IDragBoundsType, IImageCursor, ICursorType, IStateStyleType, IDirection, IDirection4, IAround, IFilter, ILeafAttrDescriptor, ILeafAttrDescriptorFn, IArrowPathData } from './display/ILeaf'
 export { IBranch } from './display/IBranch'
 export { IZoomView } from './display/IView'
 
@@ -40,7 +40,7 @@ export { IMotionPathData } from './path/IPathData'
 export { IWindingRule, ICanvasContext2D, ICanvasContext2DSettings, ITextMetrics, IPath2D, ICanvasPattern } from './canvas/ICanvas'
 export { CanvasPathCommand, IPathCommandData, MCommandData, HCommandData, VCommandData, LCommandData, CCommandData, SCommandData, QCommandData, TCommandData, ZCommandData, ACommandData, RectCommandData, RoundRectCommandData, EllipseCommandData, ArcCommandData, ArcToCommandData, MoveToCommandObject, LineToCommandObject, BezierCurveToCommandObject, QuadraticCurveToCommandObject, IPathCommandObject, IPathCommandNodeBase, MoveToCommandNode, LineToCommandNode, BezierCurveToCommandNode, ClosePathCommandNode, IPathCommandNode, PathNodeHandleType, PathNodeHandleName, IPathNodeBase } from './path/IPathCommand'
 
-export { ILeaferImage, ILeaferImageConfig, IImageLOD, IImageTileLOD, ILeaferImageSliceData, ILeaferImageSlice, ILeaferImageLevel, ILeaferImageOnLoaded, ILeaferImageOnError, ILeaferImageCacheCanvas, ILeaferImagePatternPaint } from './image/ILeaferImage'
+export { ILeaferImage, ILeaferImageMap, ILeaferImageConfig, IImageLOD, IImageTileLOD, ILeaferImageSliceData, ILeaferImageSlice, ILeaferImageLevel, ILeaferImageOnLoaded, ILeaferImageOnError, ILeaferImageCacheCanvas, ILeaferImagePatternPaint } from './image/ILeaferImage'
 export { ILeaferFilm, ILeaferFilmConfig, IFilmDecoder, IFilmFrame, IFilmOptions, IFilmPlayOptions } from './image/ILeaferFilm'
 export { ILeaferVideo, ILeaferVideoConfig } from './image/ILeaferVideo'
 export { IResource } from './file/IResource'

package/src/interaction/IInteraction.ts

@@ -79,6 +79,7 @@ export interface IInteraction extends IControl {
     cancelHover(): void
     stopDragAnimate(): void
 
+    replaceDownTarget(target: ILeaf): void
     updateDownData(data?: IPointerEvent, options?: IPickOptions, merge?: boolean): void
     updateHoverData(data: IPointerEvent): void
 
@@ -104,6 +105,7 @@ export interface IInteractionConfig {
     eventer?: IObject
     cursor?: boolean
     keyEvent?: boolean
+    shadowDOM?: boolean
 }
 
 export interface IZoomConfig {

package/src/layout/ILeafLayout.ts

@@ -24,6 +24,7 @@ export interface ILeafLayout {
     // localBoxBounds: IBoundsData // use leaf.__localBoxBounds
     localStrokeBounds: IBoundsData
     localRenderBounds: IBoundsData
+    localOuterBounds?: IBoundsData //  | renderBounds * (1 / scaleFixed) |
 
     // world
 
@@ -57,13 +58,14 @@ export interface ILeafLayout {
     localBoxChanged: boolean // position
 
     // face changed
-    surfaceChanged: boolean
+    surfaceChanged: boolean // 不能包含透明度变化
     opacityChanged: boolean
 
     hitCanvasChanged: boolean
 
     childrenSortChanged?: boolean
     stateStyleChanged?: boolean // hoverStyle ...
+    linkerChanged?: boolean
 
     // config changed
     scrollConfigChanged?: boolean
@@ -79,6 +81,10 @@ export interface ILeafLayout {
     renderSpread: IFourNumber // -1 表示需监视变化，不影响实际renderBounds，目前用在Box上
     renderShapeSpread: IFourNumber
 
+    // scale fixed
+    scaleFixed?: number
+    outerScale?: number // localOuterBounds: scaleFixed < 1
+
     // temp local
     a: number
     b: number

package/src/layouter/ILayouter.ts

@@ -48,6 +48,8 @@ export interface ILayouter extends IControl {
 
     config: ILayouterConfig
 
+    __updatedList: ILeafList
+
     disable(): void
 
     layout(): void

package/src/math/IMath.ts

@@ -1,5 +1,5 @@
 import { IFourNumber, IObject } from '../data/IData'
-import { IAlign, ISide } from '../display/ILeaf'
+import { IAlign, ISide, IAround } from '../display/ILeaf'
 
 export interface IPointData {
     x: number
@@ -56,6 +56,8 @@ export interface IPoint extends IPointData {
     getAngle(to: IPointData): number
     getAtan2(to: IPointData): number
 
+    isSame(point: IPointData, quick?: boolean): boolean
+
     reset(): IPoint
 }
 
@@ -126,6 +128,7 @@ export interface IBounds extends IBoundsData, ITwoPointBoundsData {
     setPoints(points: IPointData[]): IBounds
     addPoint(point: IPointData): IBounds
     getPoints(): IPointData[] // topLeft, topRight, bottomRight, bottomLeft
+    getPoint(around: IAround, onlyBoxSize?: boolean, to?: IPointData): IPointData
 
     hitPoint(point: IPointData, pointMatrix?: IMatrixData): boolean
     hitRadiusPoint(point: IRadiusPointData, pointMatrix?: IMatrixWithLayoutData): boolean

package/src/platform/IPlatform.ts

@@ -81,6 +81,7 @@ export interface IPlatform {
         resize(image: any, width: number, height: number, xGap?: number, yGap?: number, clip?: IBoundsData, smooth?: boolean, opacity?: number, filters?: IObject, interlace?: IInterlace): any
         canUse(image: any): boolean
         setPatternTransform(pattern: ICanvasPattern, transform?: IMatrixData, paint?: IObject): void
+        applyFilter?(canvas: any, image: any, filter: any[]): void
     },
 
     canCreateImageBitmap?: boolean // 是否能使用 createImageBitmap

package/src/renderer/IRenderer.ts

@@ -25,6 +25,9 @@ export interface IRenderOptions {
     ignoreFill?: boolean, // 绘制外形时忽略fill
     ignoreStroke?: boolean // 绘制外形时忽略stroke
 
+    ignoreOpacity?: boolean // 绘制时忽略元素的opacity
+
+
     cellList?: ILeafList
 }
 

package/types/index.d.ts

@@ -43,6 +43,7 @@ interface IPoint extends IPointData {
     getDistancePoint(to: IPointData, distance: number, changeTo?: boolean): IPoint;
     getAngle(to: IPointData): number;
     getAtan2(to: IPointData): number;
+    isSame(point: IPointData, quick?: boolean): boolean;
     reset(): IPoint;
 }
 interface IRadiusPointData extends IPointData {
@@ -99,6 +100,7 @@ interface IBounds extends IBoundsData, ITwoPointBoundsData {
     setPoints(points: IPointData[]): IBounds;
     addPoint(point: IPointData): IBounds;
     getPoints(): IPointData[];
+    getPoint(around: IAround, onlyBoxSize?: boolean, to?: IPointData): IPointData;
     hitPoint(point: IPointData, pointMatrix?: IMatrixData): boolean;
     hitRadiusPoint(point: IRadiusPointData, pointMatrix?: IMatrixWithLayoutData): boolean;
     hit(bounds: IBoundsData, boundsMatrix?: IMatrixData): boolean;
@@ -338,6 +340,7 @@ interface ILayouter extends IControl {
     layouting: boolean;
     waitAgain: boolean;
     config: ILayouterConfig;
+    __updatedList: ILeafList;
     disable(): void;
     layout(): void;
     layoutAgain(): void;
@@ -934,6 +937,7 @@ interface ILeafLayout {
     localContentBounds: IBoundsData;
     localStrokeBounds: IBoundsData;
     localRenderBounds: IBoundsData;
+    localOuterBounds?: IBoundsData;
     worldContentBounds: IBoundsData;
     worldBoxBounds: IBoundsData;
     worldStrokeBounds: IBoundsData;
@@ -955,6 +959,7 @@ interface ILeafLayout {
     hitCanvasChanged: boolean;
     childrenSortChanged?: boolean;
     stateStyleChanged?: boolean;
+    linkerChanged?: boolean;
     scrollConfigChanged?: boolean;
     editConfigChanged?: boolean;
     affectScaleOrRotation: boolean;
@@ -964,6 +969,8 @@ interface ILeafLayout {
     strokeBoxSpread: number;
     renderSpread: IFourNumber;
     renderShapeSpread: IFourNumber;
+    scaleFixed?: number;
+    outerScale?: number;
     a: number;
     b: number;
     c: number;
@@ -1206,6 +1213,7 @@ interface IRenderOptions {
     shape?: boolean;
     ignoreFill?: boolean;
     ignoreStroke?: boolean;
+    ignoreOpacity?: boolean;
     cellList?: ILeafList;
 }
 interface IRendererConfig {
@@ -1319,6 +1327,7 @@ interface ILeafDataOptions {
 interface ILeafData extends IDataProcessor, ILeafComputedData {
     __single?: boolean;
     readonly __hasMultiPaint?: boolean;
+    __willDestroy?: boolean;
     __checkSingle(): void;
     __removeNaturalSize(): void;
 }
@@ -1444,12 +1453,49 @@ interface IAnimateEventFunction {
     (animate?: any): any;
 }
 
-interface ICachedLeaf {
-    canvas: ILeaferCanvas;
-    matrix?: IMatrix;
-    fitMatrix?: IMatrix;
-    bounds: IBoundsData;
+interface ITaskProcessorConfig {
+    onComplete?: IFunction;
+    onTask?: IFunction;
+    onError?: IFunction;
+    parallel?: number;
+}
+interface ITaskProcessor {
+    config: ITaskProcessorConfig;
+    running: boolean;
+    isComplete: boolean;
+    percent: number;
+    total: number;
+    index: number;
+    finishedIndex: number;
+    remain: number;
+    start(): void;
+    pause(): void;
+    resume(): void;
+    skip(): void;
+    stop(): void;
+    add(taskCallback: IFunction, options?: ITaskOptions | number, canUse?: IFunction): ITaskItem;
+    destroy(): void;
 }
+interface ITaskItem {
+    parent: ITaskProcessor;
+    parallel: boolean;
+    isComplete: boolean;
+    isCancel: boolean;
+    time: number;
+    task?: IFunction;
+    canUse?: IFunction;
+    run(): Promise<void>;
+    complete(): void;
+    cancel(): void;
+}
+interface ITaskOptions {
+    start?: boolean;
+    time?: number;
+    parallel?: boolean;
+    delay?: number;
+    canUse?: IFunction;
+}
+
 type ISide = 'width' | 'height';
 type IAxis = 'x' | 'y';
 type IAxisReverse = 'x-reverse' | 'y-reverse';
@@ -1666,6 +1712,7 @@ interface ILeafComputedData {
     data?: IObject;
     __childBranchNumber?: number;
     __complex?: boolean;
+    __complexData?: ILeafComplexCachedData;
     __naturalWidth?: number;
     __naturalHeight?: number;
     readonly __autoWidth?: boolean;
@@ -1683,10 +1730,15 @@ interface ILeafComputedData {
     __pathInputed?: number;
     __pathForRender?: IPathCommandData;
     __path2DForRender?: IPath2D;
-    __pathForArrow?: IPathCommandData;
+    __startArrowPath?: IArrowPathData;
+    __endArrowPath?: IArrowPathData;
     __pathForMotion?: IMotionPathData;
     __clipAfterFill?: boolean;
 }
+interface IArrowPathData {
+    data: IPathCommandData;
+    fill?: boolean;
+}
 interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix, ILeafDataProxy, ILeafInputData, IEventer {
     tag: string;
     readonly __tag: string;
@@ -1736,6 +1788,7 @@ interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix, ILeafDa
     animationOut?: IObject | IObject[];
     __hasAutoLayout?: boolean;
     __hasMotionPath?: boolean;
+    __hasComplex?: boolean;
     __hasMask?: boolean;
     __hasEraser?: boolean;
     __hitCanvas?: IHitCanvas;
@@ -1807,7 +1860,7 @@ interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix, ILeafDa
     __renderEraser(canvas: ILeaferCanvas, options: IRenderOptions): void;
     __getNowWorld(options: IRenderOptions): IMatrixWithBoundsScaleData;
     getClampRenderScale(): number;
-    getRenderScaleData(abs?: boolean, scaleFixed?: IScaleFixed): IScaleData;
+    getRenderScaleData(abs?: boolean, scaleFixed?: IScaleFixed, unscale?: boolean): IScaleData;
     getTransform(relative?: ILocationType | ILeaf): IMatrixData;
     getBounds(type?: IBoundsType, relative?: ILocationType | ILeaf): IBoundsData;
     getLayoutBounds(type?: IBoundsType, relative?: ILocationType | ILeaf, unscale?: boolean): ILayoutBoundsData;
@@ -1855,7 +1908,6 @@ interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix, ILeafDa
     __drawHitPath(canvas: ILeaferCanvas): void;
     __updateHitCanvas(): void;
     __render(canvas: ILeaferCanvas, options: IRenderOptions): void;
-    __renderComplex(canvas: ILeaferCanvas, options: IRenderOptions): void;
     __drawFast(canvas: ILeaferCanvas, options: IRenderOptions): void;
     __draw(canvas: ILeaferCanvas, options: IRenderOptions, originCanvas?: ILeaferCanvas): void;
     __clip(canvas: ILeaferCanvas, options: IRenderOptions): void;
@@ -1866,7 +1918,7 @@ interface ILeaf extends ILeafRender, ILeafHit, ILeafBounds, ILeafMatrix, ILeafDa
     __drawPath(canvas: ILeaferCanvas): void;
     __drawRenderPath(canvas: ILeaferCanvas): void;
     __updatePath(): void;
-    __updateRenderPath(): void;
+    __updateRenderPath(updateCache?: boolean): void;
     getMotionPathData(): IMotionPathData;
     getMotionPoint(motionDistance: number | IUnitData): IRotationPointData;
     getMotionTotal(): number;
@@ -1884,6 +1936,20 @@ type ILeafAttrDescriptor = IObject & ThisType<ILeaf>;
 interface ILeafAttrDescriptorFn {
     (key: string): ILeafAttrDescriptor;
 }
+interface ICachedLeaf {
+    canvas: ILeaferCanvas;
+    matrix?: IMatrix;
+    fitMatrix?: IMatrix;
+    bounds: IBoundsData;
+}
+interface ILeafComplexCachedData {
+    canvas?: ILeaferCanvas;
+    scaleX?: number;
+    scaleY?: number;
+    changed?: boolean;
+    task?: ITaskItem;
+    destroy(): void;
+}
 
 interface IProgressData {
     value: number;
@@ -2031,6 +2097,7 @@ interface IPlatform {
         resize(image: any, width: number, height: number, xGap?: number, yGap?: number, clip?: IBoundsData, smooth?: boolean, opacity?: number, filters?: IObject, interlace?: IInterlace): any;
         canUse(image: any): boolean;
         setPatternTransform(pattern: ICanvasPattern, transform?: IMatrixData, paint?: IObject): void;
+        applyFilter?(canvas: any, image: any, filter: any[]): void;
     };
     canCreateImageBitmap?: boolean;
     canClipImageBitmap?: boolean;
@@ -2050,53 +2117,10 @@ interface IMiniapp {
     saveToAlbum(path: string): Promise<any>;
 }
 
-interface ITaskProcessorConfig {
-    onComplete?: IFunction;
-    onTask?: IFunction;
-    onError?: IFunction;
-    parallel?: number;
-}
-interface ITaskProcessor {
-    config: ITaskProcessorConfig;
-    running: boolean;
-    isComplete: boolean;
-    percent: number;
-    total: number;
-    index: number;
-    finishedIndex: number;
-    remain: number;
-    start(): void;
-    pause(): void;
-    resume(): void;
-    skip(): void;
-    stop(): void;
-    add(taskCallback: IFunction, options?: ITaskOptions | number, canUse?: IFunction): ITaskItem;
-    destroy(): void;
-}
-interface ITaskItem {
-    parent: ITaskProcessor;
-    parallel: boolean;
-    isComplete: boolean;
-    isCancel: boolean;
-    time: number;
-    task?: IFunction;
-    canUse?: IFunction;
-    run(): Promise<void>;
-    complete(): void;
-    cancel(): void;
-}
-interface ITaskOptions {
-    start?: boolean;
-    time?: number;
-    parallel?: boolean;
-    delay?: number;
-    canUse?: IFunction;
-}
-
 interface ILeaferImageConfig {
     url: string;
     lod?: IImageLOD;
-    format?: IExportFileType;
+    format?: IExportFileType | IFilmFileType | IVideoFileType;
     crossOrigin?: IImageCrossOrigin;
     showProgress?: boolean | string;
     view?: IObject | ILeaferImage | ILeaferCanvas;
@@ -2167,6 +2191,10 @@ interface ILeaferImage {
     error: IObject;
     loading: boolean;
     isPlacehold?: boolean;
+    parent?: ILeaferImage;
+    childrenMap?: ILeaferImageMap;
+    filter?: any[];
+    filterKey?: string;
     largeThumb?: ILeaferImageLevel;
     thumb?: ILeaferImageLevel;
     levels?: ILeaferImageLevel[];
@@ -2188,8 +2216,12 @@ interface ILeaferImage {
     getMinLevel(): number;
     getLevelData(level: number, width?: number, height?: number): ILeaferImageLevel;
     clearLevels(checkUse?: boolean): void;
+    destroyFilter(): void;
     destroy(): void;
 }
+interface ILeaferImageMap {
+    [name: string]: ILeaferImage;
+}
 
 interface IUIEvent extends IEvent {
     x: number;
@@ -2334,6 +2366,7 @@ interface IInteraction extends IControl {
     isFocus(leaf: ILeaf): boolean;
     cancelHover(): void;
     stopDragAnimate(): void;
+    replaceDownTarget(target: ILeaf): void;
     updateDownData(data?: IPointerEvent, options?: IPickOptions, merge?: boolean): void;
     updateHoverData(data: IPointerEvent): void;
     updateCursor(hoverData?: IPointerEvent): void;
@@ -2353,6 +2386,7 @@ interface IInteractionConfig {
     eventer?: IObject;
     cursor?: boolean;
     keyEvent?: boolean;
+    shadowDOM?: boolean;
 }
 interface IZoomConfig {
     disabled?: boolean;
@@ -2464,6 +2498,10 @@ interface ILeaferAttrData {
     lazyBounds: IBounds;
     config: ILeaferConfig;
     userConfig?: ILeaferConfig;
+    cacheId?: boolean;
+    cacheInnerId?: boolean;
+    innerIdMap?: ILeafMap;
+    idMap?: ILeafMap;
     readonly cursorPoint: IPointData;
     readonly clientBounds: IBoundsData;
     leafs: number;
@@ -2526,7 +2564,7 @@ interface ICreator {
     layouter?(target: ILeaf, options?: ILayouterConfig): ILayouter;
     renderer?(target: ILeaf, canvas: ILeaferCanvas, options?: IRendererConfig): IRenderer;
     selector?(target?: ILeaf, options?: ISelectorConfig): ISelector;
-    finder?(target?: ILeaf): IFinder;
+    finder?(target?: ILeaf, options?: ISelectorConfig): IFinder;
     interaction?(target: ILeaf, canvas: IInteractionCanvas, selector: ISelector, options?: IInteractionConfig): IInteraction;
     editor?(options?: IObject, app?: IAppBase): ILeaf;
 }
@@ -2607,4 +2645,4 @@ interface ITransformer {
 }
 
 export { PathNodeHandleType };
-export type { ACommandData, ArcCommandData, ArcToCommandData, BezierCurveToCommandNode, BezierCurveToCommandObject, CCommandData, CanvasPathCommand, ClosePathCommandNode, EllipseCommandData, HCommandData, IAlign, IAnimateEasing, IAnimateEasingFunction, IAnimateEasingName, IAnimateEnding, IAnimateEvent, IAnimateEventFunction, IAnimateEvents, IAnimateOptions, IAnswer, IAppBase, IAround, IAttrDecorator, IAutoBounds, IAutoBoundsData, IAutoBoxData, IAutoSize, IAxis, IAxisAlign, IAxisReverse, IBaseLineAlign, IBlendMode, IBlob, IBlobFunction, IBoolean, IBooleanMap, IBounds, IBoundsData, IBoundsDataFn, IBoundsDataWithOptionRotation, IBoundsEvent, IBoundsType, IBranch, IBranchRender, IBranchRenderModule, ICachedLeaf, ICanvasAttr, ICanvasCacheOptions, ICanvasContext2D, ICanvasContext2DSettings, ICanvasManager, ICanvasPattern, ICanvasSizeAttr, ICanvasStrokeOptions, ICanvasType, IChildEvent, IClientPointData, IConstraint, IConstraintType, IControl, ICreator, ICubicBezierEasing, ICursorConfig, ICursorRotate, ICursorRotateMap, ICursorType, ICursorTypeMap, ICustomEasingFunction, IDataProcessor, IDataTypeHandle, IDirection, IDirection4, IDragBoundsType, IDragEvent, IDropEvent, IEditSize, IEraserType, IEvent, IEventListener, IEventListenerId, IEventListenerItem, IEventListenerMap, IEventListenerOptions, IEventOption, IEventParams, IEventParamsMap, IEventTarget, IEventer, IExportFileType, IExportImageType, IExportOnCanvasFunction, IExportOptions, IExportResult, IExportResultFunction, IFilmDecoder, IFilmFileType, IFilmFrame, IFilmOptions, IFilmPlayOptions, IFilter, IFindCondition, IFindMethod, IFinder, IFlowAlign, IFlowAxisAlign, IFlowBoxType, IFlowType, IFlowWrap, IFourNumber, IFromToData, IFunction, IFunctionMap, IGap, IGestureType, IHitCanvas, IHitCanvasConfig, IHitCanvasManager, IHitType, IImageCrossOrigin, IImageCursor, IImageEvent, IImageLOD, IImageManager, IImageTileLOD, IInteraction, IInteractionCanvas, IInteractionConfig, IInterlace, IJSONOptions, IKeepTouchData, IKeyCodes, 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, ILeaferFilm, ILeaferFilmConfig, ILeaferImage, ILeaferImageCacheCanvas, ILeaferImageConfig, ILeaferImageLevel, ILeaferImageOnError, ILeaferImageOnLoaded, ILeaferImagePatternPaint, ILeaferImageSlice, ILeaferImageSliceData, ILeaferMode, ILeaferType, ILeaferTypeCreator, ILeaferTypeFunction, ILeaferTypeList, ILeaferVideo, ILeaferVideoConfig, ILocationType, IMaskType, IMatrix, IMatrixData, IMatrixWithBoundsData, IMatrixWithBoundsScaleData, IMatrixWithLayoutData, IMatrixWithOptionHalfData, IMatrixWithOptionScaleData, IMatrixWithScaleData, IMiniapp, IMiniappSelect, IMiniappSizeView, IMotionPathData, IMoveConfig, IMoveEvent, IMultiTouchConfig, IMultiTouchData, IMultimediaType, INumber, INumberFunction, INumberMap, IObject, IObjectFunction, IOffsetBoundsData, IOptionPointData, IOptionSizeData, IPartLayoutConfig, IPath2D, IPathCommandData, IPathCommandNode, IPathCommandNodeBase, IPathCommandObject, IPathCreator, IPathDrawer, IPathNodeBase, IPathString, IPercentData, IPickBottom, IPickOptions, IPickResult, IPicker, IPlatform, IPlugin, IPoint, IPointData, IPointDataFunction, IPointDataMap, IPointGap, IPointerConfig, IPointerEvent, IProgressData, IProgressFunction, IPropertyEvent, IRadiusPointData, IRangeSize, IRenderEvent, IRenderOptions, IRenderer, IRendererConfig, IResizeEvent, IResizeEventListener, IResource, IResponseType, IRotateEvent, IRotationPointData, IScaleData, IScaleFixed, IScaleRotationData, IScreenSizeData, IScrollPointData, ISelector, ISelectorConfig, ISelectorProxy, IShortcutKeyCodes, IShortcutKeys, IShortcutKeysCheck, ISide, ISingleGestureConfig, ISize, ISizeData, ISkewData, ISkiaCanvas, ISkiaCanvasExportConfig, ISkiaNAPICanvas, IStateStyleType, IStepsEasing, IString, IStringFunction, IStringMap, ISwipeEvent, ITaskItem, ITaskOptions, ITaskProcessor, ITaskProcessorConfig, ITextMetrics, ITimer, ITouchConfig, ITouchEvent, ITransformer, ITransition, ITwoPointBoundsData, IUICreator, IUIEvent, IUnitData, IUnitPointData, IUpdateEvent, IValue, IValueFunction, IVideoFileType, IWatchEvent, IWatchEventData, IWatcher, IWatcherConfig, IWheelConfig, IWheelEvent, IWindingRule, IWindingRuleData, IZoomConfig, IZoomEvent, IZoomOptions, IZoomType, IZoomView, InnerId, LCommandData, LineToCommandNode, LineToCommandObject, MCommandData, MoveToCommandNode, MoveToCommandObject, PathNodeHandleName, PointerType, QCommandData, QuadraticCurveToCommandObject, RectCommandData, RoundRectCommandData, SCommandData, TCommandData, VCommandData, ZCommandData };
+export type { ACommandData, ArcCommandData, ArcToCommandData, BezierCurveToCommandNode, BezierCurveToCommandObject, CCommandData, CanvasPathCommand, ClosePathCommandNode, EllipseCommandData, HCommandData, IAlign, IAnimateEasing, IAnimateEasingFunction, IAnimateEasingName, IAnimateEnding, IAnimateEvent, IAnimateEventFunction, IAnimateEvents, IAnimateOptions, IAnswer, IAppBase, IAround, IArrowPathData, IAttrDecorator, IAutoBounds, IAutoBoundsData, IAutoBoxData, IAutoSize, IAxis, IAxisAlign, IAxisReverse, IBaseLineAlign, IBlendMode, IBlob, IBlobFunction, IBoolean, IBooleanMap, IBounds, IBoundsData, IBoundsDataFn, IBoundsDataWithOptionRotation, IBoundsEvent, IBoundsType, IBranch, IBranchRender, IBranchRenderModule, ICachedLeaf, ICanvasAttr, ICanvasCacheOptions, ICanvasContext2D, ICanvasContext2DSettings, ICanvasManager, ICanvasPattern, ICanvasSizeAttr, ICanvasStrokeOptions, ICanvasType, IChildEvent, IClientPointData, IConstraint, IConstraintType, IControl, ICreator, ICubicBezierEasing, ICursorConfig, ICursorRotate, ICursorRotateMap, ICursorType, ICursorTypeMap, ICustomEasingFunction, IDataProcessor, IDataTypeHandle, IDirection, IDirection4, IDragBoundsType, IDragEvent, IDropEvent, IEditSize, IEraserType, IEvent, IEventListener, IEventListenerId, IEventListenerItem, IEventListenerMap, IEventListenerOptions, IEventOption, IEventParams, IEventParamsMap, IEventTarget, IEventer, IExportFileType, IExportImageType, IExportOnCanvasFunction, IExportOptions, IExportResult, IExportResultFunction, IFilmDecoder, IFilmFileType, IFilmFrame, IFilmOptions, IFilmPlayOptions, IFilter, IFindCondition, IFindMethod, IFinder, IFlowAlign, IFlowAxisAlign, IFlowBoxType, IFlowType, IFlowWrap, IFourNumber, IFromToData, IFunction, IFunctionMap, IGap, IGestureType, IHitCanvas, IHitCanvasConfig, IHitCanvasManager, IHitType, IImageCrossOrigin, IImageCursor, IImageEvent, IImageLOD, IImageManager, IImageTileLOD, IInteraction, IInteractionCanvas, IInteractionConfig, IInterlace, IJSONOptions, IKeepTouchData, IKeyCodes, IKeyEvent, ILayoutAttr, ILayoutBlockData, ILayoutBoundsData, ILayoutChangedData, ILayoutData, ILayoutEvent, ILayouter, ILayouterConfig, ILeaf, ILeafArrayMap, ILeafAttrData, ILeafAttrDescriptor, ILeafAttrDescriptorFn, ILeafBounds, ILeafBoundsModule, ILeafComplexCachedData, 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, ILeaferFilm, ILeaferFilmConfig, ILeaferImage, ILeaferImageCacheCanvas, ILeaferImageConfig, ILeaferImageLevel, ILeaferImageMap, ILeaferImageOnError, ILeaferImageOnLoaded, ILeaferImagePatternPaint, ILeaferImageSlice, ILeaferImageSliceData, ILeaferMode, ILeaferType, ILeaferTypeCreator, ILeaferTypeFunction, ILeaferTypeList, ILeaferVideo, ILeaferVideoConfig, ILocationType, IMaskType, IMatrix, IMatrixData, IMatrixWithBoundsData, IMatrixWithBoundsScaleData, IMatrixWithLayoutData, IMatrixWithOptionHalfData, IMatrixWithOptionScaleData, IMatrixWithScaleData, IMiniapp, IMiniappSelect, IMiniappSizeView, IMotionPathData, IMoveConfig, IMoveEvent, IMultiTouchConfig, IMultiTouchData, IMultimediaType, INumber, INumberFunction, INumberMap, IObject, IObjectFunction, IOffsetBoundsData, IOptionPointData, IOptionSizeData, IPartLayoutConfig, IPath2D, IPathCommandData, IPathCommandNode, IPathCommandNodeBase, IPathCommandObject, IPathCreator, IPathDrawer, IPathNodeBase, IPathString, IPercentData, IPickBottom, IPickOptions, IPickResult, IPicker, IPlatform, IPlugin, IPoint, IPointData, IPointDataFunction, IPointDataMap, IPointGap, IPointerConfig, IPointerEvent, IProgressData, IProgressFunction, IPropertyEvent, IRadiusPointData, IRangeSize, IRenderEvent, IRenderOptions, IRenderer, IRendererConfig, IResizeEvent, IResizeEventListener, IResource, IResponseType, IRotateEvent, IRotationPointData, IScaleData, IScaleFixed, IScaleRotationData, IScreenSizeData, IScrollPointData, ISelector, ISelectorConfig, ISelectorProxy, IShortcutKeyCodes, IShortcutKeys, IShortcutKeysCheck, ISide, ISingleGestureConfig, ISize, ISizeData, ISkewData, ISkiaCanvas, ISkiaCanvasExportConfig, ISkiaNAPICanvas, IStateStyleType, IStepsEasing, IString, IStringFunction, IStringMap, ISwipeEvent, ITaskItem, ITaskOptions, ITaskProcessor, ITaskProcessorConfig, ITextMetrics, ITimer, ITouchConfig, ITouchEvent, ITransformer, ITransition, ITwoPointBoundsData, IUICreator, IUIEvent, IUnitData, IUnitPointData, IUpdateEvent, IValue, IValueFunction, IVideoFileType, IWatchEvent, IWatchEventData, IWatcher, IWatcherConfig, IWheelConfig, IWheelEvent, IWindingRule, IWindingRuleData, IZoomConfig, IZoomEvent, IZoomOptions, IZoomType, IZoomView, InnerId, LCommandData, LineToCommandNode, LineToCommandObject, MCommandData, MoveToCommandNode, MoveToCommandObject, PathNodeHandleName, PointerType, QCommandData, QuadraticCurveToCommandObject, RectCommandData, RoundRectCommandData, SCommandData, TCommandData, VCommandData, ZCommandData };