@visactor/vrender-core 0.16.0-alpha.0

package/es/graphic/graphic.js

@@ -0,0 +1,639 @@
+import { AABBBounds, Matrix, normalTransform, Point, isNil, has, isString, isValidUrl, isBase64 } from "@visactor/vutils";
+
+import { Node } from "./node-tree";
+
+import { EventTarget, CustomEvent } from "../event";
+
+import { DefaultTransform } from "./config";
+
+import { application } from "../application";
+
+import { Animate, DefaultStateAnimateConfig } from "../animate";
+
+import { interpolateColor } from "../color-string/interpolate";
+
+import { CustomPath2D } from "../common/custom-path2d";
+
+import { getTheme } from "./theme";
+
+import { ResourceLoader } from "../resource-loader/loader";
+
+import { AttributeUpdateType, IContainPointMode, UpdateTag } from "../common/enums";
+
+const tempMatrix = new Matrix;
+
+export const PURE_STYLE_KEY = [ "stroke", "opacity", "strokeOpacity", "lineDash", "lineDashOffset", "lineCap", "lineJoin", "miterLimit", "fill", "fillOpacity" ];
+
+export const GRAPHIC_UPDATE_TAG_KEY = [ "lineWidth", "lineCap", "lineJoin", "miterLimit", "scaleX", "scaleY", "angle", "anchor" ];
+
+const tempConstantXYKey = [ "x", "y" ], tempConstantScaleXYKey = [ "scaleX", "scaleY" ], tempConstantAngleKey = [ "angle" ], point = new Point;
+
+export const NOWORK_ANIMATE_ATTR = {
+    strokeSeg: 1,
+    boundsPadding: 2,
+    pickMode: 1,
+    boundsMode: 1,
+    customPickShape: 1,
+    pickable: 1,
+    childrenPickable: 1,
+    visible: 1,
+    zIndex: 1,
+    layout: 1,
+    keepDirIn3d: 1,
+    outerBorder: 1,
+    innerBorder: 1,
+    lineDash: 1,
+    lineCap: 1,
+    lineJoin: 1,
+    miterLimit: 2,
+    strokeBoundsBuffer: 2,
+    scaleCenter: 1,
+    anchor: 1,
+    anchor3d: 1,
+    postMatrix: 1,
+    backgroundMode: 2,
+    background: 1,
+    texture: 1,
+    cursor: 1,
+    html: 1
+};
+
+export class Graphic extends Node {
+    static mixin(source) {
+        const keys = Object.keys(source);
+        for (let i = 0; i < keys.length; ++i) {
+            const propertyName = keys[i];
+            Object.defineProperty(Graphic.prototype, propertyName, Object.getOwnPropertyDescriptor(source, propertyName));
+        }
+    }
+    get AABBBounds() {
+        return this.tryUpdateAABBBounds("imprecise" === this.attribute.boundsMode);
+    }
+    get OBBBounds() {
+        return this.tryUpdateOBBBounds();
+    }
+    get globalAABBBounds() {
+        return this.tryUpdateGlobalAABBBounds();
+    }
+    get transMatrix() {
+        return this.tryUpdateLocalTransMatrix(!0);
+    }
+    get globalTransMatrix() {
+        return this.tryUpdateGlobalTransMatrix(!0);
+    }
+    constructor(params = {}) {
+        super(), this._AABBBounds = new AABBBounds, this._updateTag = UpdateTag.INIT, this.attribute = params, 
+        this.valid = this.isValid(), params.background && this.loadImage(params.background, !0);
+    }
+    setMode(mode) {
+        "3d" === mode ? this.set3dMode() : this.set2dMode();
+    }
+    set3dMode() {
+        this.in3dMode = !0;
+    }
+    set2dMode() {
+        this.in3dMode = !1;
+    }
+    getOffsetXY(attr, includeScroll = !1) {
+        const {dx: dx = attr.dx, dy: dy = attr.dy} = this.attribute;
+        if (includeScroll && this.parent) {
+            const groupTheme = getTheme(this.parent).group, {scrollX: scrollX = groupTheme.scrollX, scrollY: scrollY = groupTheme.scrollY} = this.parent.attribute;
+            point.x = dx + scrollX, point.y = dy + scrollY;
+        } else point.x = dx, point.y = dy;
+        return point;
+    }
+    onAnimateBind(animate) {
+        this._emitCustomEvent("animate-bind", animate);
+    }
+    tryUpdateAABBBounds(full) {
+        if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
+        if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
+        application.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
+        const bounds = this.doUpdateAABBBounds(full);
+        return this.addUpdateLayoutTag(), application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), 
+        bounds;
+    }
+    combindShadowAABBBounds(bounds) {
+        if (this.shadowRoot) {
+            const b = this.shadowRoot.AABBBounds.clone();
+            bounds.union(b);
+        }
+    }
+    tryUpdateGlobalAABBBounds() {
+        return this._globalAABBBounds ? this._globalAABBBounds.setValue(this._AABBBounds.x1, this._AABBBounds.y1, this._AABBBounds.x2, this._AABBBounds.y2) : this._globalAABBBounds = this.AABBBounds.clone(), 
+        this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), 
+        this._globalAABBBounds;
+    }
+    tryUpdateGlobalTransMatrix(clearTag = !0) {
+        if (this._globalTransMatrix) {
+            if (this.parent) {
+                const m = this.parent.globalTransMatrix;
+                this._globalTransMatrix.setValue(m.a, m.b, m.c, m.d, m.e, m.f);
+            }
+        } else this._globalTransMatrix = this.parent ? this.parent.globalTransMatrix.clone() : this.transMatrix.clone();
+        return this.shouldUpdateGlobalMatrix() && this.doUpdateGlobalMatrix(), this._globalTransMatrix;
+    }
+    shouldUpdateGlobalMatrix() {
+        return !0;
+    }
+    tryUpdateLocalTransMatrix(clearTag = !0) {
+        return this._transMatrix || (this._transMatrix = new Matrix), this.shouldUpdateLocalMatrix() && (this.doUpdateLocalMatrix(), 
+        clearTag && this.clearUpdateLocalPositionTag()), this._transMatrix;
+    }
+    shouldUpdateAABBBounds() {
+        return this.shadowRoot ? !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS);
+    }
+    shouldSelfChangeUpdateAABBBounds() {
+        return this.shadowRoot ? !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS);
+    }
+    shouldUpdateLocalMatrix() {
+        return !!(this._updateTag & UpdateTag.UPDATE_LOCAL_MATRIX);
+    }
+    isValid() {
+        var _a, _b;
+        const attribute = this.attribute;
+        return Number.isFinite((null !== (_a = attribute.x) && void 0 !== _a ? _a : 0) + (null !== (_b = attribute.y) && void 0 !== _b ? _b : 0));
+    }
+    _validNumber(num) {
+        return null == num || Number.isFinite(num);
+    }
+    shouldUpdateShape() {
+        return !!(this._updateTag & UpdateTag.UPDATE_SHAPE);
+    }
+    clearUpdateShapeTag() {
+        this._updateTag &= UpdateTag.CLEAR_SHAPE;
+    }
+    containsPoint(x, y, mode, picker) {
+        if (!picker) return !1;
+        if (mode === IContainPointMode.GLOBAL) {
+            const point = new Point(x, y);
+            this.parent && this.parent.globalTransMatrix.transformPoint(point, point), x = point.x, 
+            y = point.y;
+        }
+        return picker.containsPoint(this, {
+            x: x,
+            y: y
+        });
+    }
+    setAttributes(params, forceUpdateTag = !1, context) {
+        (params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background && this.loadImage(params.background, !0), 
+        this._setAttributes(params, forceUpdateTag, context);
+    }
+    _setAttributes(params, forceUpdateTag = !1, context) {
+        const keys = Object.keys(params);
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            this.attribute[key] = params[key];
+        }
+        this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTags(keys) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), 
+        this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context);
+    }
+    setAttribute(key, value, forceUpdateTag, context) {
+        var _a;
+        const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+            [key]: value
+        }, this.attribute, key, context);
+        params ? this._setAttributes(params, forceUpdateTag, context) : isNil(null === (_a = this.normalAttrs) || void 0 === _a ? void 0 : _a[key]) ? (this.attribute[key] = value, 
+        this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), 
+        this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context)) : this.normalAttrs[key] = value, 
+        "background" === key && this.loadImage(value, !0);
+    }
+    needUpdateTags(keys, k = GRAPHIC_UPDATE_TAG_KEY) {
+        for (let i = 0; i < k.length; i++) {
+            const attrKey = k[i];
+            if (-1 !== keys.indexOf(attrKey)) return !0;
+        }
+        return !1;
+    }
+    needUpdateTag(key, k = GRAPHIC_UPDATE_TAG_KEY) {
+        for (let i = 0; i < k.length; i++) {
+            if (key === k[i]) return !0;
+        }
+        return !1;
+    }
+    initAttributes(params) {
+        const context = {
+            type: AttributeUpdateType.INIT
+        };
+        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, 
+        this.attribute = params, params.background && this.loadImage(params.background, !0), 
+        this._updateTag = UpdateTag.INIT, this.onAttributeUpdate(context);
+    }
+    translate(x, y) {
+        var _a, _b;
+        if (0 === x && 0 === y) return this;
+        const context = {
+            type: AttributeUpdateType.TRANSLATE
+        }, params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+            x: x,
+            y: y
+        }, this.attribute, tempConstantXYKey, context);
+        params && (x = params.x, y = params.y, delete params.x, delete params.y, this._setAttributes(params));
+        const attribute = this.attribute, postMatrix = attribute.postMatrix;
+        return postMatrix ? application.transformUtil.fromMatrix(postMatrix, postMatrix).translate(x, y) : (attribute.x = (null !== (_a = attribute.x) && void 0 !== _a ? _a : DefaultTransform.x) + x, 
+        attribute.y = (null !== (_b = attribute.y) && void 0 !== _b ? _b : DefaultTransform.y) + y), 
+        this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), 
+        this.onAttributeUpdate(context), this;
+    }
+    translateTo(x, y) {
+        const attribute = this.attribute;
+        if (attribute.x === x && attribute.y === y) return this;
+        const context = {
+            type: AttributeUpdateType.TRANSLATE_TO
+        }, params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+            x: x,
+            y: y
+        }, this.attribute, tempConstantXYKey, context);
+        return params ? (this._setAttributes(params, !1, context), this) : (attribute.x = x, 
+        attribute.y = y, this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), 
+        this.onAttributeUpdate(context), this);
+    }
+    scale(scaleX, scaleY, scaleCenter) {
+        var _a, _b;
+        if (1 === scaleX && 1 === scaleY) return this;
+        const context = {
+            type: AttributeUpdateType.SCALE
+        }, params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+            scaleX: scaleX,
+            scaleY: scaleY,
+            scaleCenter: scaleCenter
+        }, this.attribute, tempConstantScaleXYKey, context);
+        params && (scaleX = params.scaleX, scaleY = params.scaleY, delete params.scaleX, 
+        delete params.scaleY, this._setAttributes(params));
+        const attribute = this.attribute;
+        if (scaleCenter) {
+            let {postMatrix: postMatrix} = this.attribute;
+            postMatrix || (postMatrix = new Matrix, attribute.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).scale(scaleX, scaleY, scaleCenter);
+        } else attribute.scaleX = (null !== (_a = attribute.scaleX) && void 0 !== _a ? _a : DefaultTransform.scaleX) * scaleX, 
+        attribute.scaleY = (null !== (_b = attribute.scaleY) && void 0 !== _b ? _b : DefaultTransform.scaleY) * scaleY;
+        return this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), 
+        this.onAttributeUpdate(context), this;
+    }
+    scaleTo(scaleX, scaleY) {
+        const attribute = this.attribute;
+        if (attribute.scaleX === scaleX && attribute.scaleY === scaleY) return this;
+        const context = {
+            type: AttributeUpdateType.SCALE_TO
+        }, params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+            scaleX: scaleX,
+            scaleY: scaleY
+        }, this.attribute, tempConstantScaleXYKey, context);
+        return params ? (this._setAttributes(params, !1, context), this) : (attribute.scaleX = scaleX, 
+        attribute.scaleY = scaleY, this.addUpdatePositionTag(), this.addUpdateBoundTag(), 
+        this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this);
+    }
+    rotate(angle, rotateCenter) {
+        var _a;
+        if (0 === angle) return this;
+        const context = {
+            type: AttributeUpdateType.ROTATE
+        }, params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+            angle: angle,
+            rotateCenter: rotateCenter
+        }, this.attribute, tempConstantAngleKey, context);
+        params && (delete params.angle, this._setAttributes(params, !1, context));
+        const attribute = this.attribute;
+        if (rotateCenter) {
+            let {postMatrix: postMatrix} = this.attribute;
+            postMatrix || (postMatrix = new Matrix, attribute.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter);
+        } else attribute.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : DefaultTransform.angle) + angle;
+        return this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), 
+        this.onAttributeUpdate(context), this;
+    }
+    rotateTo(angle) {
+        const attribute = this.attribute;
+        if (attribute.angle === angle) return this;
+        const context = {
+            type: AttributeUpdateType.ROTATE_TO
+        }, params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(angle, this.attribute, tempConstantAngleKey, context);
+        return params ? (this._setAttributes(params, !1, context), this) : (attribute.angle = angle, 
+        this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), 
+        this.onAttributeUpdate(context), this);
+    }
+    skewTo(b, c) {
+        return this;
+    }
+    animate(params) {
+        this.animates || (this.animates = new Map);
+        const animate = new Animate(null == params ? void 0 : params.id).bind(this);
+        if (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((() => {
+            this.animates.delete(animate.id);
+        })), animate;
+    }
+    onAttributeUpdate(context) {
+        application.graphicService.onAttributeUpdate(this), this._emitCustomEvent("afterAttributeUpdate", context);
+    }
+    update(d) {
+        d ? (d.bounds && this.tryUpdateAABBBounds("imprecise" === this.attribute.boundsMode), 
+        d.trans && this.tryUpdateLocalTransMatrix()) : (this.tryUpdateAABBBounds("imprecise" === this.attribute.boundsMode), 
+        this.tryUpdateLocalTransMatrix());
+    }
+    hasState(stateName) {
+        return !(!this.currentStates || !this.currentStates.length) && (!!isNil(stateName) || this.currentStates.includes(stateName));
+    }
+    getState(stateName) {
+        var _a;
+        return null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
+    }
+    applyStateAttrs(attrs, stateNames, hasAnimation, isClear) {
+        var _a, _b, _c, _d;
+        if (hasAnimation) {
+            const keys = Object.keys(attrs), animateAttrs = isClear ? keys.reduce(((res, key) => (res[key] = void 0 === attrs[key] ? this.getDefaultAttribute(key) : attrs[key], 
+            res)), {}) : attrs, animate = this.animate();
+            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);
+        } else this.setAttributes(attrs, !1, {
+            type: AttributeUpdateType.STATE
+        });
+    }
+    updateNormalAttrs(stateAttrs) {
+        const newNormalAttrs = {};
+        this.normalAttrs ? (Object.keys(stateAttrs).forEach((key => {
+            key in this.normalAttrs ? (newNormalAttrs[key] = this.normalAttrs[key], delete this.normalAttrs[key]) : newNormalAttrs[key] = this.getNormalAttribute(key);
+        })), Object.keys(this.normalAttrs).forEach((key => {
+            stateAttrs[key] = this.normalAttrs[key];
+        }))) : Object.keys(stateAttrs).forEach((key => {
+            newNormalAttrs[key] = this.getNormalAttribute(key);
+        })), this.normalAttrs = newNormalAttrs;
+    }
+    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;
+    }
+    clearStates(hasAnimation) {
+        this.hasState() && this.normalAttrs && this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0), 
+        this.normalAttrs = null, this.currentStates = [];
+    }
+    removeState(stateName, hasAnimation) {
+        if ((this.currentStates ? this.currentStates.indexOf(stateName) : -1) >= 0) {
+            const currentStates = this.currentStates.filter((state => state !== stateName));
+            this.useStates(currentStates, hasAnimation);
+        }
+    }
+    toggleState(stateName, hasAnimation) {
+        if (this.hasState(stateName)) this.removeState(stateName, hasAnimation); else {
+            if ((this.currentStates ? this.currentStates.indexOf(stateName) : -1) < 0) {
+                const nextStates = this.currentStates ? this.currentStates.slice() : [];
+                nextStates.push(stateName), this.useStates(nextStates, hasAnimation);
+            }
+        }
+    }
+    addState(stateName, keepCurrentStates, hasAnimation) {
+        var _a;
+        if (this.currentStates && this.currentStates.includes(stateName) && (keepCurrentStates || 1 === this.currentStates.length)) return;
+        const newStates = keepCurrentStates && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) ? this.currentStates.concat([ stateName ]) : [ stateName ];
+        this.useStates(newStates, hasAnimation);
+    }
+    useStates(states, hasAnimation) {
+        var _a;
+        if (!states.length) return void this.clearStates(hasAnimation);
+        if (!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) !== states.length || states.some(((stateName, index) => this.currentStates[index] !== stateName)))) return;
+        const stateAttrs = {};
+        states.forEach((stateName => {
+            var _a;
+            const attrs = this.stateProxy ? this.stateProxy(stateName, states) : null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
+            attrs && Object.assign(stateAttrs, attrs);
+        })), this.updateNormalAttrs(stateAttrs), this.currentStates = states, this.applyStateAttrs(stateAttrs, states, hasAnimation);
+    }
+    addUpdateBoundTag() {
+        this._updateTag |= UpdateTag.UPDATE_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag(), 
+        this.glyphHost && this.glyphHost.addUpdateBoundTag();
+    }
+    addUpdateShapeTag() {
+        this._updateTag |= UpdateTag.UPDATE_SHAPE;
+    }
+    addUpdateShapeAndBoundsTag() {
+        this._updateTag |= UpdateTag.UPDATE_SHAPE_AND_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag(), 
+        this.glyphHost && this.glyphHost.addUpdateBoundTag();
+    }
+    updateShapeAndBoundsTagSetted() {
+        return (this._updateTag & UpdateTag.UPDATE_SHAPE_AND_BOUNDS) === UpdateTag.UPDATE_SHAPE_AND_BOUNDS;
+    }
+    clearUpdateBoundTag() {
+        this._updateTag &= UpdateTag.CLEAR_BOUNDS;
+    }
+    addUpdatePositionTag() {
+        this.shadowRoot && this.shadowRoot.addUpdateGlobalPositionTag(), this._updateTag |= UpdateTag.UPDATE_GLOBAL_LOCAL_MATRIX;
+    }
+    addUpdateGlobalPositionTag() {
+        this.shadowRoot && this.shadowRoot.addUpdateGlobalPositionTag(), this._updateTag |= UpdateTag.UPDATE_GLOBAL_MATRIX;
+    }
+    clearUpdateLocalPositionTag() {
+        this._updateTag &= UpdateTag.CLEAR_LOCAL_MATRIX;
+    }
+    clearUpdateGlobalPositionTag() {
+        this._updateTag &= UpdateTag.CLEAR_GLOBAL_MATRIX;
+    }
+    addUpdateLayoutTag() {
+        this._updateTag |= UpdateTag.UPDATE_LAYOUT;
+    }
+    clearUpdateLayoutTag() {
+        this._updateTag &= UpdateTag.CLEAR_LAYOUT;
+    }
+    needUpdateLayout() {
+        return !!(this._updateTag & UpdateTag.UPDATE_LAYOUT);
+    }
+    doUpdateLocalMatrix() {
+        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, _anchor = [ 0, 0 ];
+        if (anchor) {
+            if ("string" == typeof anchor[0]) {
+                const ratio = parseFloat(anchor[0]) / 100, bounds = this.AABBBounds;
+                _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
+            } else _anchor[0] = anchor[0];
+            if ("string" == typeof anchor[1]) {
+                const ratio = parseFloat(anchor[1]) / 100, bounds = this.AABBBounds;
+                _anchor[1] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
+            } else _anchor[1] = anchor[1];
+        }
+        if (!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), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
+                x: scaleCenter[0],
+                y: scaleCenter[1]
+            });
+        }
+        const p = this.getOffsetXY(DefaultTransform);
+        if (this._transMatrix.e += p.x, this._transMatrix.f += p.y, postMatrix) {
+            const m1 = tempMatrix.setValue(postMatrix.a, postMatrix.b, postMatrix.c, postMatrix.d, postMatrix.e, postMatrix.f), m2 = this._transMatrix;
+            m1.multiply(m2.a, m2.b, m2.c, m2.d, m2.e, m2.f), m2.setValue(m1.a, m1.b, m1.c, m1.d, m1.e, m1.f);
+        }
+    }
+    doUpdateGlobalMatrix() {
+        if (this.parent) {
+            this._globalTransMatrix.multiply(this.transMatrix.a, this.transMatrix.b, this.transMatrix.c, this.transMatrix.d, this.transMatrix.e, this.transMatrix.f);
+            const {scrollX: scrollX = 0, scrollY: scrollY = 0} = this.parent.attribute;
+            this._globalTransMatrix.translate(scrollX, scrollY);
+        }
+    }
+    setStage(stage, layer) {
+        if (this.stage !== stage) {
+            if (this.stage = stage, this.layer = layer, this.setStageToShadowRoot(stage, layer), 
+            this.animates && this.animates.size) {
+                const timeline = stage.getTimeline();
+                this.animates.forEach((a => {
+                    a.setTimeline(timeline);
+                }));
+            }
+            this._onSetStage && this._onSetStage(this, stage, layer), application.graphicService.onSetStage(this, stage);
+        }
+    }
+    setStageToShadowRoot(stage, layer) {
+        this.shadowRoot && this.shadowRoot.setStage(stage, layer);
+    }
+    onAddStep(step) {}
+    onStop(props) {
+        props && this.setAttributes(props, !1, {
+            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);
+            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)) 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;
+        }
+        return !1;
+    }
+    _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {}
+    getDefaultAttribute(name) {
+        return getTheme(this)[this.type][name];
+    }
+    getComputedAttribute(name) {
+        var _a;
+        return null !== (_a = this.attribute[name]) && void 0 !== _a ? _a : this.getDefaultAttribute(name);
+    }
+    onSetStage(cb, immediate = !1) {
+        this._onSetStage = cb, immediate && this.stage && cb(this, this.stage);
+    }
+    attachShadow(shadowRoot) {
+        return shadowRoot && (shadowRoot.shadowHost = this), this.shadowRoot = null != shadowRoot ? shadowRoot : application.graphicService.creator.shadowRoot(this), 
+        this.addUpdateBoundTag(), this.shadowRoot.setStage(this.stage, this.layer), this.shadowRoot;
+    }
+    detachShadow() {
+        this.shadowRoot && (this.addUpdateBoundTag(), this.shadowRoot = null);
+    }
+    toJson() {
+        return {
+            attribute: this.attribute,
+            _uid: this._uid,
+            type: this.type,
+            name: this.name,
+            children: this.children.map((item => item.toJson()))
+        };
+    }
+    createPathProxy(path) {
+        return isString(path, !0) ? this.pathProxy = (new CustomPath2D).fromString(path) : this.pathProxy = new CustomPath2D, 
+        this.pathProxy;
+    }
+    loadImage(image, background = !1) {
+        if (!image || background && backgroundNotImage(image)) return;
+        const url = image;
+        this.resources || (this.resources = new Map);
+        const cache = {
+            data: "init",
+            state: null
+        };
+        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", 
+        isValidUrl(image) || isBase64(image) ? (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background) : image.startsWith("<svg") && (ResourceLoader.GetSvg(image, this), 
+        this.backgroundImg = this.backgroundImg || background)) : (cache.state = "success", 
+        cache.data = image, this.backgroundImg = this.backgroundImg || background);
+    }
+    imageLoadSuccess(url, image, cb) {
+        if (!this.resources) return;
+        const res = this.resources.get(url);
+        res && (res.state = "success", res.data = image, cb && cb(), this.addUpdateBoundTag(), 
+        this.stage && this.stage.renderNextFrame());
+    }
+    imageLoadFail(url, cb) {
+        if (!this.resources) return;
+        const res = this.resources.get(url);
+        res && (res.state = "fail", cb && cb());
+    }
+    _stopAnimates(animates) {
+        animates && animates.forEach((animate => {
+            animate.stop();
+        }));
+    }
+    stopAnimates(stopChildren = !1) {
+        this._stopAnimates(this.animates), this.shadowRoot && this.shadowRoot.stopAnimates(!0), 
+        this.isContainer && stopChildren && this.forEachChildren((c => {
+            c.stopAnimates(stopChildren);
+        }));
+    }
+    release() {
+        this.releaseStatus = "released";
+    }
+    _emitCustomEvent(type, context) {
+        var _a, _b;
+        if (this._events && type in this._events) {
+            const changeEvent = new CustomEvent(type, context);
+            changeEvent.bubbles = !1, changeEvent.manager = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem) || void 0 === _b ? void 0 : _b.manager, 
+            this.dispatchEvent(changeEvent);
+        }
+    }
+}
+
+function backgroundNotImage(image) {
+    return !(!image.fill && !image.stroke);
+}
+
+Graphic.mixin(EventTarget);
+//# sourceMappingURL=graphic.js.map