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

package/es/graphic/graphic.d.ts

@@ -1,10 +1,9 @@
 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, IGraphicAnimateParams, IGraphicJson, ISetAttributeContext, ITransform, GraphicReleaseStatus } from '../interface/graphic';
+import type { GraphicType, IAnimateConfig, IGraphicAttribute, IGraphic, IGraphicJson, ISetAttributeContext, ITransform, GraphicReleaseStatus } from '../interface/graphic';
 import { Node } from './node-tree';
-import type { IAnimate, IAnimateTarget, IGlyphGraphicAttribute, ILayer, IPickerService, IShadowRoot, IStage, IStep, ISubAnimate, ISymbolClass } from '../interface';
-import { Animate } from '../animate';
+import type { IAnimate, IAnimateTarget, IGlyphGraphicAttribute, ILayer, IPickerService, IShadowRoot, IStage, IStep, ISymbolClass } from '../interface';
 import { IContainPointMode } from '../common/enums';
 import { CustomSymbolClass } from './builtin-symbol';
 export declare const PURE_STYLE_KEY: string[];
@@ -42,6 +41,7 @@ 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>;
-    nextAttrs?: T;
-    prevAttrs?: T;
-    finalAttrs?: T;
+    animate?: () => IAnimate;
     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 | ISubAnimate): void;
+    onAnimateBind(animate: IAnimate): void;
     protected tryUpdateAABBBounds(): IAABBBounds;
     protected tryUpdateOBBBounds(): IOBBBounds;
     protected combindShadowAABBBounds(bounds: IAABBBounds): void;
@@ -123,6 +123,7 @@ 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;
@@ -136,7 +137,6 @@ 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,10 +174,6 @@ 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;
@@ -195,4 +191,5 @@ 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, has, isString, isValidUrl, isBase64, isObject } from "@visactor/vutils";
+import { AABBBounds, Matrix, normalTransform, Point, isNil, isString, isValidUrl, isBase64, isObject } from "@visactor/vutils";
 
 import { Node } from "./node-tree";
 
@@ -10,10 +10,6 @@ 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";
@@ -32,6 +28,10 @@ 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,6 +99,13 @@ 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();
     }
@@ -124,9 +131,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;
-        application.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
+        this.getGraphicService().beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
         const bounds = this.doUpdateAABBBounds(full);
-        return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), 
+        return this.getGraphicService().afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), 
         "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
     }
     tryUpdateOBBBounds() {
@@ -222,7 +229,7 @@ export class Graphic extends Node {
         clearTag && this.clearUpdateLocalPositionTag()), this._transMatrix;
     }
     shouldUpdateAABBBounds() {
-        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);
+        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);
     }
     shouldSelfChangeUpdateAABBBounds() {
         return this.shadowRoot ? !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS);
@@ -259,6 +266,13 @@ 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);
@@ -397,22 +411,8 @@ 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 || (application.graphicService.onAttributeUpdate(this), 
+        context && context.skipUpdateCallback || (this.getGraphicService().onAttributeUpdate(this), 
         this._emitCustomEvent("afterAttributeUpdate", context));
     }
     update(d) {
@@ -427,21 +427,29 @@ 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, _c, _d;
+        var _a, _b;
         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 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, {
+            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, {
                 type: AttributeUpdateType.STATE
             });
-        } else this.stopStateAnimates(), this.setAttributes(attrs, !1, {
+        } else this.stopStateAnimates(), this.setAttributesAndPreventAnimate(attrs, !1, {
+            type: AttributeUpdateType.STATE
+        });
+        this._emitCustomEvent("afterStateUpdate", {
             type: AttributeUpdateType.STATE
         });
     }
@@ -461,13 +469,9 @@ export class Graphic extends Node {
         }));
     }
     getNormalAttribute(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;
+        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];
     }
     clearStates(hasAnimation) {
         this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], 
@@ -590,10 +594,10 @@ export class Graphic extends Node {
             this.animates && this.animates.size) {
                 const timeline = stage.getTimeline();
                 this.animates.forEach((a => {
-                    a.timeline === defaultTimeline && a.setTimeline(timeline);
+                    a.timeline.isGlobal && (a.setTimeline(timeline), timeline.addAnimate(a));
                 }));
             }
-            this._onSetStage && this._onSetStage(this, stage, layer), application.graphicService.onSetStage(this, stage);
+            this._onSetStage && this._onSetStage(this, stage, layer), this.getGraphicService().onSetStage(this, stage);
         }
     }
     setStageToShadowRoot(stage, layer) {
@@ -605,76 +609,6 @@ 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];
     }
@@ -756,6 +690,15 @@ 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) {