perf: batch update attributes (#2001)

* perf: batch update attributes

* perf: batch update attributes

* 0.0.1-0

* chore: add changeset

* chore: revert change

---------

Co-authored-by: yunchen.wy <yunchen.wy@antgroup.com>
Co-authored-by: wang1212 <mrwang1212@126.com>

Author: 3 people

.changeset/modern-queens-knock.md

@@ -0,0 +1,5 @@
+---
+'@antv/g-lite': minor
+---
+
+feat: add experimental api `setAttributes`

packages/g-lite/src/css/interfaces.ts

@@ -131,6 +131,10 @@ export interface PropertyParseOptions {
   forceUpdateGeometry: boolean;
   usedAttributes: string[];
   memoize: boolean;
+  /**
+   * @experimental
+   */
+  skipDispatchAttrModifiedEvent?: boolean;
 }
 
 export interface StyleValueRegistry {

packages/g-lite/src/display-objects/DisplayObject.ts

@@ -275,6 +275,43 @@ export class DisplayObject<
     }
   }
 
+  /**
+   * batch update attributes without attributeChangedCallback, for performance
+   * use with caution
+   * @param attributes
+   * @param parseOptions
+   * @experimental
+   */
+  setAttributes(
+    attributes: Partial<StyleProps>,
+    parseOptions: Partial<PropertyParseOptions> = {},
+  ) {
+    const { skipDispatchAttrModifiedEvent = false } = parseOptions;
+    let oldAttributes;
+    let oldParsedValues;
+    if (!skipDispatchAttrModifiedEvent) {
+      oldAttributes = { ...this.attributes };
+      oldParsedValues = { ...this.parsedStyle };
+    }
+    runtime.styleValueRegistry.processProperties(
+      this as unknown as DisplayObject,
+      attributes,
+      parseOptions,
+    );
+    // redraw at next frame
+    this.dirty();
+    if (!skipDispatchAttrModifiedEvent) {
+      for (const key in attributes) {
+        this.dispatchAttrModifiedEvent(
+          key,
+          oldAttributes[key],
+          attributes[key],
+          oldParsedValues[key as string],
+        );
+      }
+    }
+  }
+
   /**
    * called when attributes get changed or initialized
    */
@@ -297,6 +334,17 @@ export class DisplayObject<
     // redraw at next frame
     this.dirty();
 
+    // return;
+
+    this.dispatchAttrModifiedEvent(name, oldValue, value, oldParsedValue);
+  }
+
+  private dispatchAttrModifiedEvent<Key extends keyof StyleProps>(
+    name: Key,
+    oldValue: StyleProps[Key],
+    value: StyleProps[Key],
+    oldParsedValue: ParsedStyleProps[keyof ParsedStyleProps],
+  ) {
     const newParsedValue = this.parsedStyle[name as string];
     if (this.isConnected) {
       attrModifiedEvent.relatedNode = this as IElement;