@visactor/vrender-core 0.23.0-alpha.3 → 1.0.0-alpha.10

package/es/graphic/graphic.d.ts

@@ -3,7 +3,7 @@ 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 { Node } from './node-tree';
-import type { IAnimate, IAnimateTarget, IGlyphGraphicAttribute, ILayer, IPickerService, IShadowRoot, IStage, IStep, ISubAnimate, ISymbolClass } from '../interface';
+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[];
@@ -61,6 +61,10 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     glyphHost?: IGraphic<IGlyphGraphicAttribute>;
     _onSetStage?: (g: IGraphic, stage: IStage, layer: ILayer) => void;
     in3dMode?: boolean;
+    widthWithoutTransform?: number;
+    heightWithoutTransform?: number;
+    x1WithoutTransform?: number;
+    y1WithoutTransform?: number;
     protected _AABBBounds: IAABBBounds;
     get AABBBounds(): IAABBBounds;
     protected _OBBBounds?: IOBBBounds;
@@ -83,9 +87,6 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     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;
@@ -97,7 +98,7 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     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;
@@ -120,6 +121,8 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     shouldUpdateShape(): boolean;
     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;
@@ -163,17 +166,13 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     protected needUpdateLayout(): boolean;
     protected getAnchor(anchor: [string | number, string | number], params: {
         b?: IAABBBounds;
-    }): [number, number];
+    }, resetScale?: boolean): [number, number];
     protected doUpdateLocalMatrix(): void;
     protected doUpdateGlobalMatrix(): void;
     setStage(stage?: IStage, layer?: ILayer): void;
     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,4 +190,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,8 +10,6 @@ import { DefaultTransform } from "./config";
 
 import { application } from "../application";
 
-import { interpolateColor } from "../color-string/interpolate";
-
 import { CustomPath2D } from "../common/custom-path2d";
 
 import { ResourceLoader } from "../resource-loader/loader";
@@ -32,6 +30,8 @@ import { SVG_PARSE_ATTRIBUTE_MAP, SVG_PARSE_ATTRIBUTE_MAP_KEYS } from "./constan
 
 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" ];
@@ -124,12 +124,13 @@ export class Graphic extends Node {
         this._emitCustomEvent("animate-bind", animate);
     }
     tryUpdateAABBBounds() {
+        var _a, _b;
         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);
+        null === (_a = this.stage) || void 0 === _a || _a.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
         const bounds = this.doUpdateAABBBounds(full);
-        return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), 
+        return null === (_b = this.stage) || void 0 === _b || _b.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), 
         "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
     }
     tryUpdateOBBBounds() {
@@ -259,6 +260,16 @@ export class Graphic extends Node {
             y: y
         });
     }
+    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);
@@ -398,7 +409,8 @@ export class Graphic extends Node {
         return this;
     }
     onAttributeUpdate(context) {
-        context && context.skipUpdateCallback || (application.graphicService.onAttributeUpdate(this), 
+        var _a;
+        context && context.skipUpdateCallback || (null === (_a = this.stage) || void 0 === _a || _a.graphicService.onAttributeUpdate(this), 
         this._emitCustomEvent("afterAttributeUpdate", context));
     }
     update(d) {
@@ -420,7 +432,7 @@ export class Graphic extends Node {
             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.stateAnimateConfig) && void 0 !== _a ? _a : this.stateAnimateConfig) && void 0 !== _b ? _b : DefaultStateAnimateConfig;
+            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: {
@@ -429,10 +441,13 @@ export class Graphic extends Node {
                     duration: stateAnimateConfig.duration,
                     easing: stateAnimateConfig.easing
                 }
-            } ]), noAnimateAttrs && this.setAttributes(noAnimateAttrs, !1, {
+            } ]), 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
         });
     }
@@ -452,13 +467,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 = [], 
@@ -533,19 +544,12 @@ export class Graphic extends Node {
     needUpdateLayout() {
         return !!(this._updateTag & UpdateTag.UPDATE_LAYOUT);
     }
-    getAnchor(anchor, params) {
+    getAnchor(anchor, params, resetScale) {
         const _anchor = [ 0, 0 ], getBounds = () => {
             if (params.b) return params.b;
-            const {scaleX: scaleX, scaleY: scaleY, angle: angle} = this.attribute;
-            return tempBounds.copy(this._AABBBounds), this.setAttributes({
-                scaleX: 1,
-                scaleY: 1,
-                angle: 0
-            }), params.b = this.AABBBounds.clone(), this._AABBBounds.copy(tempBounds), this.setAttributes({
-                scaleX: scaleX,
-                scaleY: scaleY,
-                angle: angle
-            }), params.b;
+            const graphic = this.clone();
+            return graphic.attribute.angle = 0, graphic.attribute.scaleCenter = null, resetScale && (graphic.attribute.scaleX = 1, 
+            graphic.attribute.scaleY = 1), params.b = graphic.AABBBounds, params.b;
         };
         if ("string" == typeof anchor[0]) {
             const ratio = parseFloat(anchor[0]) / 100, bounds = getBounds();
@@ -561,10 +565,10 @@ export class Graphic extends Node {
         const {x: x = DefaultTransform.x, y: y = DefaultTransform.y, scaleX: scaleX = DefaultTransform.scaleX, scaleY: scaleY = DefaultTransform.scaleY, angle: angle = DefaultTransform.angle, scaleCenter: scaleCenter, anchor: anchor, postMatrix: postMatrix} = this.attribute;
         let _anchor = [ 0, 0 ];
         const params = {};
-        if (anchor && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor); else {
+        if (anchor && angle && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor); else {
             const m = this._transMatrix;
             m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), 
-            m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
+            m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params, !0), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
                 x: _anchor[0],
                 y: _anchor[1]
             });
@@ -583,6 +587,7 @@ export class Graphic extends Node {
         }
     }
     setStage(stage, layer) {
+        var _a;
         if (this.stage !== stage) {
             if (this.stage = stage, this.layer = layer, this.setStageToShadowRoot(stage, layer), 
             this.animates && this.animates.size) {
@@ -591,7 +596,7 @@ export class Graphic extends Node {
                     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), null === (_a = this.stage) || void 0 === _a || _a.graphicService.onSetStage(this, stage);
         }
     }
     setStageToShadowRoot(stage, layer) {
@@ -603,76 +608,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];
     }
@@ -754,6 +689,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) {