@visactor/vrender-core 1.1.10 → 1.1.11-alpha.1

package/dist/index.es.js

@@ -9203,6 +9203,7 @@ class StateEngine {
         this.baseAttributes = {};
         this.compiledDefinitions = options.compiledDefinitions;
         this.stateSort = options.stateSort;
+        this.stateOrder = options.stateOrder;
         this.mergeMode = (_a = options.mergeMode) !== null && _a !== void 0 ? _a : 'shallow';
     }
     get activeStates() {
@@ -9318,6 +9319,9 @@ class StateEngine {
         return this._activeStates.includes(stateName);
     }
     sortStates(states) {
+        if (this.stateOrder === 'input') {
+            return this.stateSort ? states.sort(this.stateSort) : states;
+        }
         const withDefinition = [];
         const withoutDefinition = [];
         states.forEach(stateName => {
@@ -9471,6 +9475,8 @@ const ATTRIBUTE_CATEGORY = {
     shadowColor: UpdateCategory.PAINT,
     x: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
     y: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+    dx: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+    dy: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
     scaleX: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
     scaleY: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
     angle: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
@@ -10094,7 +10100,7 @@ class Graphic extends Node {
         }
         return (_b = this.localStateDefinitionsVersion) !== null && _b !== void 0 ? _b : 0;
     }
-    resolveEffectiveCompiledDefinitions() {
+    resolveEffectiveCompiledDefinitions(_stateNames) {
         this.syncSharedStateScopeBindingFromTree(false);
         const boundScope = this.boundSharedStateScope;
         if (boundScope) {
@@ -10329,7 +10335,37 @@ class Graphic extends Node {
         this.applyBaseAttributes(params);
         this.commitBaseAttributeMutation(false, context);
     }
+    commitBaseAttributesByCategory(params, forceUpdateTag = false, context) {
+        const base = this.getBaseAttributesStorage();
+        let category = UpdateCategory.NONE;
+        let hasKeys = false;
+        for (const key in params) {
+            if (!Object.prototype.hasOwnProperty.call(params, key)) {
+                continue;
+            }
+            hasKeys = true;
+            const prev = base[key];
+            const next = params[key];
+            if (prev !== next) {
+                category = this.mergeAttributeDeltaCategory(category, key, prev, next);
+            }
+            base[key] = next;
+        }
+        if (!hasKeys) {
+            return;
+        }
+        this.attribute = base;
+        this._baseAttributes = undefined;
+        this.attributeMayContainTransientAttrs = false;
+        this.valid = this.isValid();
+        this.submitUpdateByCategory(category, forceUpdateTag);
+        this.onAttributeUpdate(context);
+    }
     commitBaseAttributesByTouchedKeys(params, forceUpdateTag = false, context) {
+        if (this.glyphHost) {
+            this.commitBaseAttributesByCategory(params, forceUpdateTag, context);
+            return;
+        }
         const source = params;
         const baseAttributes = this.getBaseAttributesStorage();
         let hasKeys = false;
@@ -11002,6 +11038,9 @@ class Graphic extends Node {
             this.setShadowGraphic(value);
         }
     }
+    static needsShapeUpdate(graphic, key) {
+        return graphic.needUpdateTag(key);
+    }
     needUpdateTags(keys, k = GRAPHIC_UPDATE_TAG_KEY) {
         for (let i = 0; i < k.length; i++) {
             const attrKey = k[i];
@@ -11193,7 +11232,29 @@ class Graphic extends Node {
     skewTo(b, c) {
         return this;
     }
+    static bindGlyphAttributes(graphic, inherited) {
+        if (Object.getPrototypeOf(graphic.attribute) !== inherited) {
+            Object.setPrototypeOf(graphic.attribute, inherited);
+        }
+        if (graphic._baseAttributes && Object.getPrototypeOf(graphic._baseAttributes) !== inherited) {
+            Object.setPrototypeOf(graphic._baseAttributes, inherited);
+        }
+    }
+    static commitDerivedAttributePatch(graphic, patch, removedKeys, context) {
+        if (!(removedKeys === null || removedKeys === void 0 ? void 0 : removedKeys.length)) {
+            graphic.setAttributes(patch, false, context);
+            return;
+        }
+        graphic.detachAttributeFromBaseAttributes();
+        const base = graphic.getBaseAttributesStorage();
+        removedKeys.forEach(key => delete base[key]);
+        graphic.applyBaseAttributes(patch);
+        graphic.commitBaseAttributeMutation(false, context);
+    }
     onAttributeUpdate(context) {
+        if (this.glyphHost) {
+            Graphic.bindGlyphAttributes(this, this.glyphHost.attribute);
+        }
         if (context && context.skipUpdateCallback) {
             return;
         }
@@ -11242,8 +11303,11 @@ class Graphic extends Node {
         (_a = this.stateEngine) === null || _a === void 0 ? void 0 : _a.setResolveContext(this, stateResolveBaseAttrs);
         return stateResolveBaseAttrs;
     }
-    ensureStateEngine(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
-        const { compiledDefinitions } = this.resolveEffectiveCompiledDefinitions();
+    ensureStateEngine(stateResolveBaseAttrs, stateNames) {
+        var _a;
+        if (stateResolveBaseAttrs === void 0) { stateResolveBaseAttrs = this.getStateResolveBaseAttrs(); }
+        if (stateNames === void 0) { stateNames = (_a = this.currentStates) !== null && _a !== void 0 ? _a : EMPTY_STATE_NAMES; }
+        const { compiledDefinitions, stateOrder } = this.resolveEffectiveCompiledDefinitions(stateNames);
         this.compiledStateDefinitions = compiledDefinitions;
         if (!compiledDefinitions) {
             this.stateEngine = undefined;
@@ -11252,14 +11316,17 @@ class Graphic extends Node {
         else if (!this.stateEngine ||
             this.stateEngineCompiledDefinitions !== compiledDefinitions ||
             this.stateEngineStateSort !== this.stateSort ||
+            this.stateEngineStateOrder !== stateOrder ||
             this.stateEngineMergeMode !== this.stateMergeMode) {
             this.stateEngine = new StateEngine({
                 compiledDefinitions,
                 stateSort: this.stateSort,
+                stateOrder,
                 mergeMode: this.stateMergeMode
             });
             this.stateEngineCompiledDefinitions = compiledDefinitions;
             this.stateEngineStateSort = this.stateSort;
+            this.stateEngineStateOrder = stateOrder;
             this.stateEngineMergeMode = this.stateMergeMode;
         }
         this.syncStateResolveContext(stateResolveBaseAttrs);
@@ -11300,7 +11367,7 @@ class Graphic extends Node {
         };
     }
     resolveUseStatesTransition(states, stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
-        const stateEngine = this.ensureStateEngine(stateResolveBaseAttrs);
+        const stateEngine = this.ensureStateEngine(stateResolveBaseAttrs, states);
         return stateEngine
             ? this.toGraphicStateTransition(stateEngine.applyStates(states))
             : this.resolveLocalUseStatesTransition(states);
@@ -11313,7 +11380,7 @@ class Graphic extends Node {
     }
     resolveAddStateTransition(stateName, keepCurrentStates) {
         var _a;
-        const stateEngine = this.ensureStateEngine();
+        const stateEngine = this.ensureStateEngine(undefined, [stateName]);
         if (stateEngine) {
             return this.toGraphicStateTransition(stateEngine.addState(stateName, keepCurrentStates));
         }
@@ -11350,7 +11417,7 @@ class Graphic extends Node {
         return this.resolveLocalUseStatesTransition(nextStates);
     }
     resolveToggleStateTransition(stateName) {
-        const stateEngine = this.ensureStateEngine();
+        const stateEngine = this.ensureStateEngine(undefined, [stateName]);
         if (stateEngine) {
             return this.toGraphicStateTransition(stateEngine.toggleState(stateName));
         }
@@ -11364,7 +11431,7 @@ class Graphic extends Node {
     resolveGraphicStateTransition(states, forceResolverRefresh = false) {
         var _a;
         const stateResolveBaseAttrs = this.getStateResolveBaseAttrs();
-        const stateEngine = this.ensureStateEngine(stateResolveBaseAttrs);
+        const stateEngine = this.ensureStateEngine(stateResolveBaseAttrs, states);
         if (forceResolverRefresh) {
             stateEngine === null || stateEngine === void 0 ? void 0 : stateEngine.invalidateResolverCache();
         }
@@ -11493,7 +11560,7 @@ class Graphic extends Node {
     shouldSkipStateTransitionDefaultAttribute(_key, _targetAttrs) {
         return false;
     }
-    stopStateAnimates(type = 'end') {
+    stopStateAnimates(type) {
         const stopAnimationState = this.stopAnimationState;
         if (typeof stopAnimationState === 'function') {
             stopAnimationState.call(this, 'state', type);
@@ -13758,19 +13825,21 @@ class Glyph extends Graphic {
         this.valid = this.isValid();
     }
     setSubGraphic(subGraphic) {
+        var _a;
         this.detachSubGraphic();
         this.subGraphic = subGraphic;
         subGraphic.forEach(g => {
             g.glyphHost = this;
-            Object.setPrototypeOf(g.attribute, this.attribute);
+            Graphic.bindGlyphAttributes(g, this.attribute);
         });
         this.valid = this.isValid();
         this.addUpdateBoundTag();
+        (_a = this.subGraphicEncoder) === null || _a === void 0 ? void 0 : _a.call(this, this);
     }
     detachSubGraphic() {
         this.subGraphic.forEach(g => {
             g.glyphHost = null;
-            Object.setPrototypeOf(g.attribute, {});
+            Graphic.bindGlyphAttributes(g, Object.prototype);
         });
     }
     getSubGraphic() {
@@ -13785,67 +13854,52 @@ class Glyph extends Graphic {
     isValid() {
         return true;
     }
-    setAttribute(key, value, forceUpdateTag, context) {
-        super.setAttribute(key, value, forceUpdateTag, context);
-        this.subGraphic.forEach(g => {
-            g.addUpdateShapeAndBoundsTag();
-            g.addUpdatePositionTag();
-        });
-    }
-    setAttributes(params, forceUpdateTag = false, context) {
-        super.setAttributes(params, forceUpdateTag, context);
-        this.subGraphic.forEach(g => {
-            g.addUpdateShapeAndBoundsTag();
-            g.addUpdatePositionTag();
-        });
+    setSubGraphicEncoder(encoder) {
+        this.subGraphicEncoder = encoder;
+        encoder === null || encoder === void 0 ? void 0 : encoder(this);
     }
-    translate(x, y) {
-        super.translate(x, y);
-        this.subGraphic.forEach(g => {
-            g.addUpdatePositionTag();
-            g.addUpdateBoundTag();
-        });
-        return this;
+    commitSubGraphicAttributes(subGraphic, patch, removedKeys, context) {
+        Graphic.commitDerivedAttributePatch(subGraphic, patch, removedKeys, context);
     }
-    translateTo(x, y) {
-        super.translateTo(x, y);
-        this.subGraphic.forEach(g => {
-            g.addUpdatePositionTag();
-            g.addUpdateBoundTag();
-        });
-        return this;
-    }
-    scale(scaleX, scaleY, scaleCenter) {
-        super.scale(scaleX, scaleY, scaleCenter);
-        this.subGraphic.forEach(g => {
-            g.addUpdatePositionTag();
-            g.addUpdateBoundTag();
-        });
-        return this;
+    onAttributeUpdate(context) {
+        var _a, _b;
+        if (this.glyphHost) {
+            Graphic.bindGlyphAttributes(this, this.glyphHost.attribute);
+        }
+        for (const child of this.subGraphic) {
+            Graphic.bindGlyphAttributes(child, this.attribute);
+        }
+        (_a = this.subGraphicEncoder) === null || _a === void 0 ? void 0 : _a.call(this, this, context);
+        if (!(context === null || context === void 0 ? void 0 : context.skipUpdateCallback)) {
+            (_b = this._onUpdate) === null || _b === void 0 ? void 0 : _b.call(this, this);
+        }
+        super.onAttributeUpdate(context);
     }
-    scaleTo(scaleX, scaleY) {
-        super.scaleTo(scaleX, scaleY);
-        this.subGraphic.forEach(g => {
-            g.addUpdatePositionTag();
-            g.addUpdateBoundTag();
-        });
-        return this;
+    submitUpdateByCategory(category, forceUpdateTag = false) {
+        super.submitUpdateByCategory(category, forceUpdateTag);
+        for (const child of this.subGraphic) {
+            if (forceUpdateTag || category & UpdateCategory.SHAPE) {
+                child.addUpdateShapeAndBoundsTag();
+            }
+            else if (category & UpdateCategory.BOUNDS) {
+                child.addUpdateBoundTag();
+            }
+            if (category & UpdateCategory.PAINT) {
+                child.addUpdatePaintTag();
+            }
+            if (forceUpdateTag || category & UpdateCategory.TRANSFORM) {
+                child.addUpdatePositionTag();
+            }
+            if (forceUpdateTag || category & UpdateCategory.LAYOUT) {
+                child.addUpdateLayoutTag();
+            }
+        }
     }
-    rotate(angle) {
-        super.rotate(angle);
-        this.subGraphic.forEach(g => {
-            g.addUpdatePositionTag();
-            g.addUpdateBoundTag();
-        });
-        return this;
+    commitBaseAttributesByTouchedKeys(params, forceUpdateTag = false, context) {
+        this.commitBaseAttributesByCategory(params, forceUpdateTag, context);
     }
-    rotateTo(angle) {
-        super.rotate(angle);
-        this.subGraphic.forEach(g => {
-            g.addUpdatePositionTag();
-            g.addUpdateBoundTag();
-        });
-        return this;
+    commitBaseAttributeBySingleKey(key, value, forceUpdateTag = false, context) {
+        this.commitBaseAttributesByTouchedKeys({ [key]: value }, forceUpdateTag, context);
     }
     getGraphicTheme() {
         return getTheme(this).glyph;
@@ -13864,59 +13918,100 @@ class Glyph extends Graphic {
         return bounds;
     }
     needUpdateTags(keys) {
+        for (const key of keys) {
+            if (this.needUpdateTag(key)) {
+                return true;
+            }
+        }
         return false;
     }
     needUpdateTag(key) {
-        return false;
-    }
-    useStates(states, hasAnimation) {
-        var _a;
-        if (!states.length) {
-            this.clearStates(hasAnimation);
-            return;
+        if (ATTRIBUTE_CATEGORY[key] === UpdateCategory.PAINT) {
+            return false;
         }
-        const previousStates = this.currentStates ? this.currentStates.slice() : [];
-        const isChange = ((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length) !== states.length ||
-            states.some((stateName, index) => this.currentStates[index] !== stateName);
-        if (!isChange) {
-            return;
+        for (const child of this.subGraphic) {
+            if (Graphic.needsShapeUpdate(child, key)) {
+                return true;
+            }
         }
-        this.stopStateAnimates();
-        if (this.stateSort) {
-            states = states.sort(this.stateSort);
+        return false;
+    }
+    hasLegacyStateDefinitions() {
+        if (this.glyphStateProxy) {
+            return true;
         }
-        const stateAttrs = {};
-        states.forEach(stateName => {
-            const attrs = this.glyphStateProxy ? this.glyphStateProxy(stateName, states) : this.glyphStates[stateName];
-            if (attrs) {
-                Object.assign(stateAttrs, attrs.attributes);
+        for (const name in this.glyphStates) {
+            if (Object.prototype.hasOwnProperty.call(this.glyphStates, name)) {
+                return true;
             }
-        });
-        if (!this.beforeStateUpdate(stateAttrs, previousStates, states, hasAnimation, false)) {
-            return;
         }
-        this.currentStates = states;
-        this.applyStateAttrs(stateAttrs, states, hasAnimation);
+        return false;
     }
-    clearStates(hasAnimation) {
-        this.stopStateAnimates();
-        const previousStates = this.currentStates ? this.currentStates.slice() : [];
-        if (this.hasState() && this.normalAttrs) {
-            if (!this.beforeStateUpdate(this.normalAttrs, previousStates, [], hasAnimation, true)) {
-                return;
-            }
-            this.currentStates = [];
-            this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, true);
+    syncSharedStateScopeBindingFromTree(markDirty = true, inheritedSharedStateScope) {
+        return this.hasLegacyStateDefinitions()
+            ? this.syncSharedStateScopeBinding(undefined, markDirty)
+            : super.syncSharedStateScopeBindingFromTree(markDirty, inheritedSharedStateScope);
+    }
+    resolveEffectiveCompiledDefinitions(stateNames = []) {
+        var _a, _b;
+        if (!this.hasLegacyStateDefinitions()) {
+            this.legacyDefinitions = undefined;
+            this.legacyCompiledDefinitions = undefined;
+            return super.resolveEffectiveCompiledDefinitions(stateNames);
         }
-        else {
-            this.currentStates = [];
+        this.syncSharedStateScopeBindingFromTree(false);
+        let changed = false;
+        if (!this.legacyDefinitions ||
+            this.legacyDefinitionsSource !== this.glyphStates ||
+            this.legacyProxySource !== this.glyphStateProxy) {
+            this.legacyDefinitionsSource = this.glyphStates;
+            this.legacyProxySource = this.glyphStateProxy;
+            this.legacyDefinitions = {};
+            for (const name of Object.keys((_a = this.glyphStates) !== null && _a !== void 0 ? _a : {})) {
+                this.legacyDefinitions[name] = this.createLegacyStateDefinition(name);
+            }
+            changed = true;
+        }
+        if (this.glyphStateProxy) {
+            const addDefinition = (name) => {
+                if (!Object.prototype.hasOwnProperty.call(this.legacyDefinitions, name)) {
+                    this.legacyDefinitions[name] = this.createLegacyStateDefinition(name);
+                    changed = true;
+                }
+            };
+            (_b = this.currentStates) === null || _b === void 0 ? void 0 : _b.forEach(addDefinition);
+            stateNames.forEach(addDefinition);
+        }
+        if (changed) {
+            this.legacyCompiledDefinitions = new StateDefinitionCompiler().compile(this.legacyDefinitions);
         }
+        return { compiledDefinitions: this.legacyCompiledDefinitions, stateOrder: 'input' };
+    }
+    createLegacyStateDefinition(name) {
+        return this.glyphStateProxy
+            ? {
+                name,
+                resolver: ({ graphic, activeStates }) => { var _a; return (_a = graphic.glyphStateProxy(name, activeStates)) === null || _a === void 0 ? void 0 : _a.attributes; }
+            }
+            : { name, patch: this.glyphStates[name].attributes };
     }
     clone() {
         const glyph = new Glyph(Object.assign({}, this.attribute));
         glyph.setSubGraphic(this.subGraphic.map(g => g.clone()));
         return glyph;
     }
+    release() {
+        super.release();
+        this.subGraphicEncoder = undefined;
+        this._onUpdate = undefined;
+        this.legacyDefinitions = undefined;
+        this.legacyCompiledDefinitions = undefined;
+        this.legacyDefinitionsSource = undefined;
+        this.legacyProxySource = undefined;
+        this.detachSubGraphic();
+        this.subGraphic.forEach(child => child.release());
+        this.subGraphic = [];
+    }
     getNoWorkAnimateAttr() {
         return Glyph.NOWORK_ANIMATE_ATTR;
     }

package/es/graphic/glyph.d.ts

@@ -1,6 +1,9 @@
-import type { AABBBounds, IAABBBounds, IPointLike } from '@visactor/vutils';
+import type { AABBBounds, IAABBBounds } from '@visactor/vutils';
 import { Graphic } from './graphic';
 import type { GraphicType, IGraphic, IGlyph, IGlyphGraphicAttribute, IGraphicAttribute, ISetAttributeContext } from '../interface';
+import type { CompiledStateDefinition } from './state/state-definition';
+import type { SharedStateScope } from './state/shared-state-scope';
+import { UpdateCategory } from './state/attribute-update-classifier';
 export declare class Glyph extends Graphic<IGlyphGraphicAttribute> implements IGlyph {
     type: GraphicType;
     _onInit: (g: IGlyph) => void;
@@ -14,6 +17,11 @@ export declare class Glyph extends Graphic<IGlyphGraphicAttribute> implements IG
         subAttributes: Partial<IGraphicAttribute>[];
     };
     protected subGraphic: IGraphic[];
+    private subGraphicEncoder?;
+    private legacyDefinitionsSource?;
+    private legacyProxySource?;
+    private legacyDefinitions?;
+    private legacyCompiledDefinitions?;
     static NOWORK_ANIMATE_ATTR: {
         strokeSeg: number;
         boundsPadding: number;
@@ -51,22 +59,26 @@ export declare class Glyph extends Graphic<IGlyphGraphicAttribute> implements IG
     onInit(cb: (g: this) => void): void;
     onUpdate(cb: (g: this) => void): void;
     isValid(): boolean;
-    setAttribute(key: string, value: any, forceUpdateTag?: boolean, context?: ISetAttributeContext): void;
-    setAttributes(params: Partial<IGlyphGraphicAttribute>, forceUpdateTag?: boolean, context?: ISetAttributeContext): void;
-    translate(x: number, y: number): this;
-    translateTo(x: number, y: number): this;
-    scale(scaleX: number, scaleY: number, scaleCenter?: IPointLike): this;
-    scaleTo(scaleX: number, scaleY: number): this;
-    rotate(angle: number): this;
-    rotateTo(angle: number): this;
+    setSubGraphicEncoder(encoder?: (g: IGlyph, context?: ISetAttributeContext) => void): void;
+    commitSubGraphicAttributes(subGraphic: IGraphic, patch: Record<string, any>, removedKeys?: readonly string[], context?: ISetAttributeContext): void;
+    onAttributeUpdate(context?: ISetAttributeContext): void;
+    protected submitUpdateByCategory(category: UpdateCategory, forceUpdateTag?: boolean): void;
+    protected commitBaseAttributesByTouchedKeys(params: Partial<IGlyphGraphicAttribute>, forceUpdateTag?: boolean, context?: ISetAttributeContext): void;
+    protected commitBaseAttributeBySingleKey(key: string, value: any, forceUpdateTag?: boolean, context?: ISetAttributeContext): void;
     getGraphicTheme(): Required<IGlyphGraphicAttribute>;
     protected updateAABBBounds(attribute: IGlyphGraphicAttribute, theme: Required<IGlyphGraphicAttribute>, aabbBounds: IAABBBounds): import("@visactor/vutils").IBounds;
     protected doUpdateAABBBounds(): AABBBounds;
     protected needUpdateTags(keys: string[]): boolean;
     protected needUpdateTag(key: string): boolean;
-    useStates(states: string[], hasAnimation?: boolean): void;
-    clearStates(hasAnimation?: boolean): void;
+    protected hasLegacyStateDefinitions(): boolean;
+    protected syncSharedStateScopeBindingFromTree(markDirty?: boolean, inheritedSharedStateScope?: SharedStateScope<Record<string, any>> | null): boolean;
+    protected resolveEffectiveCompiledDefinitions(stateNames?: readonly string[]): {
+        compiledDefinitions?: Map<string, CompiledStateDefinition<IGlyphGraphicAttribute>>;
+        stateOrder?: "input";
+    };
+    private createLegacyStateDefinition;
     clone(): IGraphic<Partial<IGlyphGraphicAttribute>>;
+    release(): void;
     getNoWorkAnimateAttr(): Record<string, number>;
 }
 export declare function createGlyph(attributes: IGlyphGraphicAttribute): IGlyph;