@visactor/vrender-core 0.22.15-alpha.1 → 0.22.16

package/es/graphic/graphic.d.ts

@@ -1,9 +1,10 @@
 import type { ICustomPath2D } from './../interface/path';
 import type { Dict, IPointLike, IAABBBounds, IOBBBounds } from '@visactor/vutils';
 import { Matrix, Point } from '@visactor/vutils';
-import type { GraphicType, IAnimateConfig, IGraphicAttribute, IGraphic, IGraphicJson, ISetAttributeContext, ITransform, GraphicReleaseStatus } from '../interface/graphic';
+import type { GraphicType, IAnimateConfig, IGraphicAttribute, IGraphic, IGraphicAnimateParams, IGraphicJson, ISetAttributeContext, ITransform, GraphicReleaseStatus } from '../interface/graphic';
 import { Node } from './node-tree';
-import type { IAnimate, IAnimateTarget, IGlyphGraphicAttribute, ILayer, IPickerService, IShadowRoot, IStage, IStep, ISymbolClass } from '../interface';
+import type { IAnimate, IAnimateTarget, IGlyphGraphicAttribute, ILayer, IPickerService, IShadowRoot, IStage, IStep, ISubAnimate, ISymbolClass } from '../interface';
+import { Animate } from '../animate';
 import { IContainPointMode } from '../common/enums';
 import { CustomSymbolClass } from './builtin-symbol';
 export declare const PURE_STYLE_KEY: string[];
@@ -41,7 +42,6 @@ export declare const NOWORK_ANIMATE_ATTR: {
 export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>> extends Node implements IGraphic<T>, IAnimateTarget {
     static mixin(source: Dict<any>): void;
     _events?: any;
-    context?: Record<string, any>;
     static userSymbolMap: Record<string, ISymbolClass>;
     onBeforeAttributeUpdate?: (val: any, attributes: Partial<T>, key: null | string | string[], context?: ISetAttributeContext) => T | undefined;
     parent: any;
@@ -86,20 +86,20 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     normalAttrs?: Partial<T>;
     stateProxy?: (stateName: string, targetStates?: string[]) => T;
     animates: Map<string | number, IAnimate>;
-    animate?: () => IAnimate;
+    nextAttrs?: T;
+    prevAttrs?: T;
+    finalAttrs?: T;
     pathProxy?: ICustomPath2D;
     attachedThemeGraphic?: IGraphic;
     protected updateAABBBoundsStamp: number;
     protected updateOBBBoundsStamp?: number;
     clipPathMap?: Map<string, ISymbolClass>;
     constructor(params?: T);
-    getGraphicService(): import("../interface").IGraphicService;
-    getAttributes(): T;
     setMode(mode: '2d' | '3d'): void;
     set3dMode(): void;
     set2dMode(): void;
     getOffsetXY(attr?: ITransform, includeScroll?: boolean): Point;
-    onAnimateBind(animate: IAnimate): void;
+    onAnimateBind(animate: IAnimate | ISubAnimate): void;
     protected tryUpdateAABBBounds(): IAABBBounds;
     protected tryUpdateOBBBounds(): IOBBBounds;
     protected combindShadowAABBBounds(bounds: IAABBBounds): void;
@@ -123,7 +123,6 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     clearUpdateShapeTag(): void;
     containsPoint(x: number, y: number, mode: IContainPointMode, picker?: IPickerService): boolean;
     protected setWidthHeightWithoutTransform(aabbBounds: IAABBBounds): void;
-    setAttributesAndPreventAnimate(params: Partial<T>, forceUpdateTag?: boolean, context?: ISetAttributeContext): void;
     setAttributes(params: Partial<T>, forceUpdateTag?: boolean, context?: ISetAttributeContext): void;
     _setAttributes(params: Partial<T>, forceUpdateTag?: boolean, context?: ISetAttributeContext): void;
     setAttribute(key: string, value: any, forceUpdateTag?: boolean, context?: ISetAttributeContext): void;
@@ -137,6 +136,7 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     rotate(angle: number, rotateCenter?: IPointLike): this;
     rotateTo(angle: number): this;
     skewTo(b: number, c: number): this;
+    animate(params?: IGraphicAnimateParams): Animate;
     onAttributeUpdate(context?: ISetAttributeContext): void;
     update(d?: {
         bounds: boolean;
@@ -174,6 +174,10 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     setStageToShadowRoot(stage?: IStage, layer?: ILayer): void;
     onAddStep(step: IStep): void;
     onStop(props?: Partial<T>): void;
+    onStep(subAnimate: ISubAnimate, animate: IAnimate, step: IStep, ratio: number, end: boolean): void;
+    stepInterpolate(subAnimate: ISubAnimate, animate: IAnimate, nextAttributes: Record<string, any>, step: IStep, ratio: number, end: boolean, nextProps: Record<string, any>, lastProps?: Record<string, any>, nextParsedProps?: any, propKeys?: string[]): void;
+    defaultInterpolate(nextStepVal: any, lastStepVal: any, key: string, nextAttributes: Record<string, any>, nextParsedProps: any, ratio: number): boolean;
+    protected _interpolate(key: string, ratio: number, lastStepVal: any, nextStepVal: any, nextAttributes: any): void;
     getDefaultAttribute(name: string): any;
     getComputedAttribute(name: string): any;
     onSetStage(cb: (g: IGraphic, stage: IStage) => void, immediate?: boolean): void;
@@ -191,5 +195,4 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     protected _emitCustomEvent(type: string, context?: any): void;
     abstract getNoWorkAnimateAttr(): Record<string, number>;
     abstract clone(): IGraphic<any>;
-    toCustomPath(): ICustomPath2D;
 }

package/es/graphic/graphic.js

@@ -1,6 +1,6 @@
 import { isArray, max, OBBBounds } from "@visactor/vutils";
 
-import { AABBBounds, Matrix, normalTransform, Point, isNil, isString, isValidUrl, isBase64, isObject } from "@visactor/vutils";
+import { AABBBounds, Matrix, normalTransform, Point, isNil, has, isString, isValidUrl, isBase64, isObject } from "@visactor/vutils";
 
 import { Node } from "./node-tree";
 
@@ -10,6 +10,10 @@ import { DefaultTransform } from "./config";
 
 import { application } from "../application";
 
+import { Animate, DefaultStateAnimateConfig, defaultTimeline } from "../animate";
+
+import { interpolateColor } from "../color-string/interpolate";
+
 import { CustomPath2D } from "../common/custom-path2d";
 
 import { ResourceLoader } from "../resource-loader/loader";
@@ -28,10 +32,6 @@ import { isSvg, XMLParser } from "../common/xml";
 
 import { SVG_PARSE_ATTRIBUTE_MAP, SVG_PARSE_ATTRIBUTE_MAP_KEYS } from "./constants";
 
-import { DefaultStateAnimateConfig } from "../animate/config";
-
-import { EmptyContext2d } from "../canvas";
-
 const _tempBounds = new AABBBounds, tempMatrix = new Matrix, tempBounds = new AABBBounds;
 
 export const PURE_STYLE_KEY = [ "stroke", "opacity", "strokeOpacity", "lineDash", "lineDashOffset", "lineCap", "lineJoin", "miterLimit", "fill", "fillOpacity" ];
@@ -99,13 +99,6 @@ export class Graphic extends Node {
         super(), this._AABBBounds = new AABBBounds, this._updateTag = UpdateTag.INIT, this.attribute = params, 
         this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background ? this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
     }
-    getGraphicService() {
-        var _a, _b;
-        return null !== (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.graphicService) && void 0 !== _b ? _b : application.graphicService;
-    }
-    getAttributes() {
-        return this.attribute;
-    }
     setMode(mode) {
         "3d" === mode ? this.set3dMode() : this.set2dMode();
     }
@@ -131,9 +124,9 @@ export class Graphic extends Node {
         const full = "imprecise" === this.attribute.boundsMode;
         if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
         if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
-        this.getGraphicService().beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
+        application.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
         const bounds = this.doUpdateAABBBounds(full);
-        return this.getGraphicService().afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), 
+        return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), 
         "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
     }
     tryUpdateOBBBounds() {
@@ -229,7 +222,7 @@ export class Graphic extends Node {
         clearTag && this.clearUpdateLocalPositionTag()), this._transMatrix;
     }
     shouldUpdateAABBBounds() {
-        return this.shadowRoot ? (!!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds()) && this.getGraphicService().validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this) : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) && this.getGraphicService().validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this);
+        return this.shadowRoot ? (!!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds()) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this) : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this);
     }
     shouldSelfChangeUpdateAABBBounds() {
         return this.shadowRoot ? !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS);
@@ -266,13 +259,6 @@ export class Graphic extends Node {
     setWidthHeightWithoutTransform(aabbBounds) {
         this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
     }
-    setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context) {
-        this.setAttributes(params, forceUpdateTag, context), this.animates && this.animates.forEach((animate => {
-            Object.keys(params).forEach((key => {
-                animate.preventAttr(key);
-            }));
-        }));
-    }
     setAttributes(params, forceUpdateTag = !1, context) {
         (params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), 
         this._setAttributes(params, forceUpdateTag, context);
@@ -411,8 +397,22 @@ export class Graphic extends Node {
     skewTo(b, c) {
         return this;
     }
+    animate(params) {
+        var _a;
+        this.animates || (this.animates = new Map);
+        const animate = new Animate(null == params ? void 0 : params.id, null !== (_a = null == params ? void 0 : params.timeline) && void 0 !== _a ? _a : this.stage && this.stage.getTimeline(), null == params ? void 0 : params.slience);
+        if (animate.bind(this), params) {
+            const {onStart: onStart, onFrame: onFrame, onEnd: onEnd, onRemove: onRemove} = params;
+            null != onStart && animate.onStart(onStart), null != onFrame && animate.onFrame(onFrame), 
+            null != onEnd && animate.onEnd(onEnd), null != onRemove && animate.onRemove(onRemove), 
+            animate.interpolateFunc = params.interpolate;
+        }
+        return this.animates.set(animate.id, animate), animate.onRemove((() => {
+            animate.stop(), this.animates.delete(animate.id);
+        })), animate;
+    }
     onAttributeUpdate(context) {
-        context && context.skipUpdateCallback || (this.getGraphicService().onAttributeUpdate(this), 
+        context && context.skipUpdateCallback || (application.graphicService.onAttributeUpdate(this), 
         this._emitCustomEvent("afterAttributeUpdate", context));
     }
     update(d) {
@@ -427,29 +427,21 @@ export class Graphic extends Node {
         return null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
     }
     applyStateAttrs(attrs, stateNames, hasAnimation, isClear) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (hasAnimation) {
             const keys = Object.keys(attrs), noWorkAttrs = this.getNoWorkAnimateAttr(), animateAttrs = {};
             let noAnimateAttrs;
             keys.forEach((key => {
                 noWorkAttrs[key] ? (noAnimateAttrs || (noAnimateAttrs = {}), noAnimateAttrs[key] = attrs[key]) : animateAttrs[key] = isClear && void 0 === attrs[key] ? this.getDefaultAttribute(key) : attrs[key];
             }));
-            const stateAnimateConfig = null !== (_b = null !== (_a = this.context && this.context.stateAnimateConfig) && void 0 !== _a ? _a : this.stateAnimateConfig) && void 0 !== _b ? _b : DefaultStateAnimateConfig;
-            this.applyAnimationState([ "state" ], [ {
-                name: "state",
-                animation: {
-                    type: "state",
-                    to: animateAttrs,
-                    duration: stateAnimateConfig.duration,
-                    easing: stateAnimateConfig.easing
-                }
-            } ]), noAnimateAttrs && this.setAttributesAndPreventAnimate(noAnimateAttrs, !1, {
+            const animate = this.animate({
+                slience: !0
+            });
+            animate.stateNames = stateNames, animate.to(animateAttrs, null !== (_b = null === (_a = this.stateAnimateConfig) || void 0 === _a ? void 0 : _a.duration) && void 0 !== _b ? _b : DefaultStateAnimateConfig.duration, null !== (_d = null === (_c = this.stateAnimateConfig) || void 0 === _c ? void 0 : _c.easing) && void 0 !== _d ? _d : DefaultStateAnimateConfig.easing), 
+            noAnimateAttrs && this.setAttributes(noAnimateAttrs, !1, {
                 type: AttributeUpdateType.STATE
             });
-        } else this.stopStateAnimates(), this.setAttributesAndPreventAnimate(attrs, !1, {
-            type: AttributeUpdateType.STATE
-        });
-        this._emitCustomEvent("afterStateUpdate", {
+        } else this.stopStateAnimates(), this.setAttributes(attrs, !1, {
             type: AttributeUpdateType.STATE
         });
     }
@@ -469,9 +461,13 @@ export class Graphic extends Node {
         }));
     }
     getNormalAttribute(key) {
-        var _a, _b;
-        const value = this.attribute[key];
-        return this.animates ? null === (_a = this.finalAttribute) || void 0 === _a ? void 0 : _a[key] : null != value ? value : null === (_b = this.finalAttribute) || void 0 === _b ? void 0 : _b[key];
+        let value = this.attribute[key];
+        return this.animates && this.animates.forEach((animate => {
+            if (animate.stateNames) {
+                const endProps = animate.getEndProps();
+                has(endProps, key) && (value = endProps[key]);
+            }
+        })), value;
     }
     clearStates(hasAnimation) {
         this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], 
@@ -594,10 +590,10 @@ export class Graphic extends Node {
             this.animates && this.animates.size) {
                 const timeline = stage.getTimeline();
                 this.animates.forEach((a => {
-                    a.timeline.isGlobal && (a.setTimeline(timeline), timeline.addAnimate(a));
+                    a.timeline === defaultTimeline && a.setTimeline(timeline);
                 }));
             }
-            this._onSetStage && this._onSetStage(this, stage, layer), this.getGraphicService().onSetStage(this, stage);
+            this._onSetStage && this._onSetStage(this, stage, layer), application.graphicService.onSetStage(this, stage);
         }
     }
     setStageToShadowRoot(stage, layer) {
@@ -609,6 +605,76 @@ export class Graphic extends Node {
             type: AttributeUpdateType.ANIMATE_END
         });
     }
+    onStep(subAnimate, animate, step, ratio, end) {
+        const nextAttributes = {};
+        if (step.customAnimate) step.customAnimate.update(end, ratio, nextAttributes); else {
+            const nextProps = step.props, nextParsedProps = step.parsedProps, propKeys = step.propKeys;
+            this.stepInterpolate(subAnimate, animate, nextAttributes, step, ratio, end, nextProps, void 0, nextParsedProps, propKeys);
+        }
+        this.setAttributes(nextAttributes, !1, {
+            type: AttributeUpdateType.ANIMATE_UPDATE,
+            animationState: {
+                ratio: ratio,
+                end: end,
+                step: step,
+                isFirstFrameOfStep: subAnimate.getLastStep() !== step
+            }
+        }), this.stage && this.stage.renderNextFrame();
+    }
+    stepInterpolate(subAnimate, animate, nextAttributes, step, ratio, end, nextProps, lastProps, nextParsedProps, propKeys) {
+        propKeys || (propKeys = Object.keys(nextProps), step.propKeys = propKeys), end ? step.propKeys.forEach((key => {
+            animate.validAttr(key) && (nextAttributes[key] = nextProps[key]);
+        })) : propKeys.forEach((key => {
+            var _a;
+            if (!animate.validAttr(key)) return;
+            const nextStepVal = nextProps[key], lastStepVal = null !== (_a = lastProps && lastProps[key]) && void 0 !== _a ? _a : subAnimate.getLastPropByName(key, step);
+            if (null == nextStepVal || null == lastStepVal || nextStepVal === lastStepVal) return void (nextAttributes[key] = nextStepVal);
+            let match;
+            match = animate.interpolateFunc && animate.interpolateFunc(key, ratio, lastStepVal, nextStepVal, nextAttributes), 
+            match || (match = animate.customInterpolate(key, ratio, lastStepVal, nextStepVal, this, nextAttributes), 
+            match || this.defaultInterpolate(nextStepVal, lastStepVal, key, nextAttributes, nextParsedProps, ratio) || this._interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes));
+        })), step.parsedProps = nextParsedProps;
+    }
+    defaultInterpolate(nextStepVal, lastStepVal, key, nextAttributes, nextParsedProps, ratio) {
+        if (Number.isFinite(nextStepVal) && Number.isFinite(lastStepVal)) return nextAttributes[key] = lastStepVal + (nextStepVal - lastStepVal) * ratio, 
+        !0;
+        if ("fill" === key) {
+            nextParsedProps || (nextParsedProps = {});
+            const fillColorArray = nextParsedProps.fillColorArray, color = interpolateColor(lastStepVal, null != fillColorArray ? fillColorArray : nextStepVal, ratio, !1, ((fArray, tArray) => {
+                nextParsedProps.fillColorArray = tArray;
+            }));
+            return color && (nextAttributes[key] = color), !0;
+        }
+        if ("stroke" === key) {
+            nextParsedProps || (nextParsedProps = {});
+            const strokeColorArray = nextParsedProps.strokeColorArray, color = interpolateColor(lastStepVal, null != strokeColorArray ? strokeColorArray : nextStepVal, ratio, !1, ((fArray, tArray) => {
+                nextParsedProps.strokeColorArray = tArray;
+            }));
+            return color && (nextAttributes[key] = color), !0;
+        }
+        if ("shadowColor" === key) {
+            nextParsedProps || (nextParsedProps = {});
+            const shadowColorArray = nextParsedProps.shadowColorArray, color = interpolateColor(lastStepVal, null != shadowColorArray ? shadowColorArray : nextStepVal, ratio, !0, ((fArray, tArray) => {
+                nextParsedProps.shadowColorArray = tArray;
+            }));
+            return color && (nextAttributes[key] = color), !0;
+        }
+        if (Array.isArray(nextStepVal) && nextStepVal.length === lastStepVal.length) {
+            const nextList = [];
+            let valid = !0;
+            for (let i = 0; i < nextStepVal.length; i++) {
+                const v = lastStepVal[i], val = v + (nextStepVal[i] - v) * ratio;
+                if (!Number.isFinite(val)) {
+                    valid = !1;
+                    break;
+                }
+                nextList.push(val);
+            }
+            valid && (nextAttributes[key] = nextList);
+        }
+        return !1;
+    }
+    _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {}
     getDefaultAttribute(name) {
         return this.getGraphicTheme()[name];
     }
@@ -690,15 +756,6 @@ export class Graphic extends Node {
             this.dispatchEvent(changeEvent);
         }
     }
-    toCustomPath() {
-        var _a, _b, _c;
-        const renderer = null === (_c = null === (_b = (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.renderService) || application.renderService) || void 0 === _b ? void 0 : _b.drawContribution) || void 0 === _c ? void 0 : _c.getRenderContribution(this);
-        if (renderer) {
-            const context = new EmptyContext2d(null, 1);
-            return renderer.drawShape(this, context, 0, 0, {}, {}), context.path;
-        }
-        return null;
-    }
 }
 
 function backgroundNotImage(image) {