feat: add updateStates in vgrammar element

VisActor · May 28, 2024 · d8c730c · d8c730c
1 parent ab2dbe3
commit d8c730c
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 26 deletions.
diff --git a/packages/vgrammar-core/src/graph/element.ts b/packages/vgrammar-core/src/graph/element.ts
@@ -10,7 +10,8 @@ import {
   isArray,
   get,
   isEmpty,
-  isEqual as isObjEqual
+  isEqual as isObjEqual,
+  isObject
 } from '@visactor/vutils';
 import { isEqual } from '@visactor/vgrammar-util';
 import type { IBaseCoordinate } from '@visactor/vgrammar-coordinate';
@@ -333,6 +334,65 @@ export class Element implements IElement {
     return this.states && state && this.states.includes(state);
   }
 
+  updateStates(states: Record<string, boolean | BaseSingleEncodeSpec>) {
+    if (!this.graphicItem) {
+      return false;
+    }
+    let nextStates = this.states.slice();
+    const encode = (this.mark.getSpec() as MarkSpec).encode;
+    let forceClearState = false;
+    let hasUpdate = false;
+
+    Object.keys(states).forEach(stateKey => {
+      if (!stateKey) {
+        return;
+      }
+
+      const stateValue = states[stateKey];
+      const isRuntimeStateUpdate =
+        isObject(stateValue) && !isObjEqual(stateValue, this.runtimeStatesEncoder?.[stateKey]);
+
+      if (isRuntimeStateUpdate) {
+        if (nextStates.includes(stateKey)) {
+          forceClearState = true;
+        } else {
+          nextStates.push(stateKey);
+        }
+        this._updateRuntimeStates(stateKey, stateValue);
+        hasUpdate = true;
+      } else if (stateValue) {
+        if (!nextStates.includes(stateKey) && encode?.[stateKey]) {
+          nextStates.push(stateKey);
+          hasUpdate = true;
+        }
+      } else {
+        if (nextStates.length) {
+          const newNextStates = nextStates.filter(state => state !== stateKey);
+
+          if (newNextStates.length !== nextStates.length) {
+            hasUpdate = true;
+            nextStates = newNextStates;
+          }
+
+          if (this.runtimeStatesEncoder && this.runtimeStatesEncoder[stateKey]) {
+            this.runtimeStatesEncoder[stateKey] = null;
+          }
+        }
+      }
+    });
+
+    if (forceClearState) {
+      this.graphicItem.clearStates();
+    }
+
+    if (hasUpdate) {
+      this.useStates(nextStates);
+      return true;
+    }
+
+    return false;
+  }
+
   addState(state: string | string[], attrs?: BaseSingleEncodeSpec) {
     if (!this.graphicItem) {
       return false;

diff --git a/packages/vgrammar-core/src/interactions/brush-highlight.ts b/packages/vgrammar-core/src/interactions/brush-highlight.ts
@@ -46,11 +46,15 @@ export class BrushHighlight extends BrushBase<BrushHighlightOptions> {
 
           if (isHighlight) {
             elements.push(el);
-            el.removeState(this.options.blurState);
-            el.addState(this.options.highlightState);
+            el.updateStates({
+              [this.options.blurState]: false,
+              [this.options.highlightState]: true
+            });
           } else {
-            el.removeState(this.options.highlightState);
-            el.addState(this.options.blurState);
+            el.updateStates({
+              [this.options.blurState]: true,
+              [this.options.highlightState]: false
+            });
           }
         });
       });

diff --git a/packages/vgrammar-core/src/interactions/element-highlight-by-group.ts b/packages/vgrammar-core/src/interactions/element-highlight-by-group.ts
@@ -59,11 +59,15 @@ export class ElementHighlightByGroup extends BaseInteraction<ElementHighlightOpt
           const isHighlight = el.groupKey === highlightKey;
 
           if (isHighlight) {
-            el.removeState(this.options.blurState);
-            el.addState(this.options.highlightState);
+            el.updateStates({
+              [this.options.blurState]: false,
+              [this.options.highlightState]: true
+            });
           } else {
-            el.removeState(this.options.highlightState);
-            el.addState(this.options.blurState);
+            el.updateStates({
+              [this.options.blurState]: true,
+              [this.options.highlightState]: false
+            });
           }
         });
       });

diff --git a/packages/vgrammar-core/src/interactions/element-highlight-by-key.ts b/packages/vgrammar-core/src/interactions/element-highlight-by-key.ts
@@ -59,11 +59,15 @@ export class ElementHighlightByKey extends BaseInteraction<ElementHighlightOptio
           const isHighlight = el.key === highlightKey;
 
           if (isHighlight) {
-            el.removeState(this.options.blurState);
-            el.addState(this.options.highlightState);
+            el.updateStates({
+              [this.options.blurState]: false,
+              [this.options.highlightState]: true
+            });
           } else {
-            el.removeState(this.options.highlightState);
-            el.addState(this.options.blurState);
+            el.updateStates({
+              [this.options.blurState]: true,
+              [this.options.highlightState]: false
+            });
           }
         });
       });
@@ -82,11 +86,15 @@ export class ElementHighlightByKey extends BaseInteraction<ElementHighlightOptio
           const isHighlight = el.key === highlightKey;
 
           if (isHighlight) {
-            el.removeState(this.options.blurState);
-            el.addState(this.options.highlightState);
+            el.updateStates({
+              [this.options.blurState]: false,
+              [this.options.highlightState]: true
+            });
           } else {
-            el.removeState(this.options.highlightState);
-            el.addState(this.options.blurState);
+            el.updateStates({
+              [this.options.blurState]: true,
+              [this.options.highlightState]: false
+            });
           }
         });
       });

diff --git a/packages/vgrammar-core/src/interactions/element-highlight-by-legend.ts b/packages/vgrammar-core/src/interactions/element-highlight-by-legend.ts
@@ -56,11 +56,15 @@ export class ElementHighlightByLegend extends BaseInteraction<ElementHighlightBy
         const isHighlight = filterValue(el) === itemKey;
 
         if (isHighlight) {
-          el.removeState(this.options.blurState);
-          el.addState(this.options.highlightState);
+          el.updateStates({
+            [this.options.blurState]: false,
+            [this.options.highlightState]: true
+          });
         } else {
-          el.removeState(this.options.highlightState);
-          el.addState(this.options.blurState);
+          el.updateStates({
+            [this.options.blurState]: true,
+            [this.options.highlightState]: false
+          });
         }
       });
     });

diff --git a/packages/vgrammar-core/src/interactions/element-highlight-by-name.ts b/packages/vgrammar-core/src/interactions/element-highlight-by-name.ts
@@ -63,11 +63,15 @@ export class ElementHighlightByName extends BaseInteraction<ElementHighlightByNa
       mark.elements.forEach(el => {
         const isHighlight = filterValue(el) === itemKey;
         if (isHighlight) {
-          el.removeState(this.options.blurState);
-          el.addState(this.options.highlightState);
+          el.updateStates({
+            [this.options.blurState]: false,
+            [this.options.highlightState]: true
+          });
         } else {
-          el.removeState(this.options.highlightState);
-          el.addState(this.options.blurState);
+          el.updateStates({
+            [this.options.blurState]: true,
+            [this.options.highlightState]: false
+          });
         }
       });
     });

diff --git a/packages/vgrammar-core/src/types/element.ts b/packages/vgrammar-core/src/types/element.ts
@@ -19,7 +19,14 @@ import type {
 } from '@visactor/vrender-core';
 import type { DiffState } from '../graph/enums';
 import type { IMark, IGlyphMark } from './grammar';
-import type { BaseEncodeSpec, IMarkConfig, MarkFunctionType, MarkKeySpec, MarkType } from './mark';
+import type {
+  BaseEncodeSpec,
+  BaseSingleEncodeSpec,
+  IMarkConfig,
+  MarkFunctionType,
+  MarkKeySpec,
+  MarkType
+} from './mark';
 
 export interface ElementGraphicMap {
   circle: ICircle;
@@ -154,6 +161,7 @@ export interface IElement {
   addState: (state: string | string[], attrs?: any) => boolean;
   removeState: (state: string | string[]) => boolean;
   useStates: (states: string[], noAnimation?: boolean) => boolean;
+  updateStates: (states: Record<string, boolean | BaseSingleEncodeSpec>) => any;
 }
 
 export interface IGlyphElement<P = any> extends IElement {