refactor(elements): move context from style to config (#6525)

Co-authored-by: antv <[email protected]>

Author: Aarebecca

packages/g6/__tests__/unit/utils/element.spec.ts

@@ -45,7 +45,7 @@ describe('element', () => {
     },
   };
 
-  const edge = new Polyline({ style: { sourceNode: 'node-1', targetNode: 'node-2', context } });
+  const edge = new Polyline({ style: { sourceNode: 'node-1', targetNode: 'node-2' }, context });
 
   it('isNode', () => {
     const rect = new Rect({ style: { width: 10, height: 10 } });

packages/g6/__tests__/unit/utils/event.spec.ts

@@ -20,7 +20,7 @@ describe('event', () => {
     },
   };
 
-  const edge = new Polyline({ style: { sourceNode: 'node-1', targetNode: 'node-2', context } });
+  const edge = new Polyline({ style: { sourceNode: 'node-1', targetNode: 'node-2' }, context });
 
   it('eventTargetOf', () => {
     expect(eventTargetOf(node1)?.type).toEqual('node');

packages/g6/src/elements/base-element.ts

@@ -1,11 +1,13 @@
 import type { IAnimation } from '@antv/g';
 import type { RuntimeContext } from '../runtime/types';
-import type { BaseElementStyleProps, Keyframe } from '../types';
+import type { Keyframe } from '../types';
+import type { BaseShapeStyleProps } from './shapes';
 import { BaseShape } from './shapes';
 
-export abstract class BaseElement<T extends BaseElementStyleProps> extends BaseShape<T> {
+export abstract class BaseElement<T extends BaseShapeStyleProps> extends BaseShape<T> {
   protected get context(): RuntimeContext {
-    return this.attributes.context!;
+    // @ts-expect-error skip type-check
+    return this.config.context;
   }
 
   protected get parsedAttributes() {

packages/g6/src/elements/combos/base-combo.ts

@@ -136,8 +136,8 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
   }
 
   protected getContentBBox(attributes: Required<S>): AABB {
-    const { context, childrenNode = [], padding } = attributes;
-    const children = childrenNode.map((id) => context!.element!.getElement(id)).filter(Boolean);
+    const { childrenNode = [], padding } = attributes;
+    const children = childrenNode.map((id) => this.context!.element!.getElement(id)).filter(Boolean);
     if (children.length === 0) {
       const bbox = new AABB();
       const { x = 0, y = 0, size } = attributes;
@@ -181,8 +181,8 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
   }
 
   protected getCollapsedMarkerText(type: CollapsedMarkerStyleProps['type'], attributes: Required<S>): string {
-    const { context, childrenData = [] } = attributes;
-    const { model } = context!;
+    const { childrenData = [] } = attributes;
+    const { model } = this.context;
 
     if (type === 'descendant-count') return model.getDescendantsData(this.id).length.toString();
     if (type === 'child-count') return childrenData.length.toString();
@@ -196,12 +196,12 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
   }
 
   public getComboPosition(attributes: Required<S>): Point {
-    const { x = 0, y = 0, collapsed, context, childrenData = [] } = attributes;
+    const { x = 0, y = 0, collapsed, childrenData = [] } = attributes;
 
     if (childrenData.length === 0) return [+x, +y, 0];
 
     if (collapsed) {
-      const { model } = context!;
+      const { model } = this.context;
       const descendants = model.getDescendantsData(this.id).filter((datum) => !model.isCombo(idOf(datum)));
 
       if (descendants.length > 0 && descendants.some(hasPosition)) {

packages/g6/src/elements/edges/base-edge.ts

@@ -3,7 +3,6 @@ import { Image, Path } from '@antv/g';
 import type { PathArray } from '@antv/util';
 import { isFunction, pick } from '@antv/util';
 import type {
-  BaseElementStyleProps,
   Edge,
   EdgeArrowStyleProps,
   EdgeBadgeStyleProps,
@@ -26,7 +25,7 @@ import * as Symbol from '../../utils/symbol';
 import { getWordWrapWidthByEnds } from '../../utils/text';
 import { BaseElement } from '../base-element';
 import { effect } from '../effect';
-import type { BadgeStyleProps, LabelStyleProps } from '../shapes';
+import type { BadgeStyleProps, BaseShapeStyleProps, LabelStyleProps } from '../shapes';
 import { Badge, Label } from '../shapes';
 
 /**
@@ -35,7 +34,7 @@ import { Badge, Label } from '../shapes';
  * <en/> Base style properties of the edge
  */
 export interface BaseEdgeStyleProps
-  extends BaseElementStyleProps,
+  extends BaseShapeStyleProps,
     Prefix<'label', EdgeLabelStyleProps>,
     Prefix<'halo', PathStyleProps>,
     Prefix<'badge', EdgeBadgeStyleProps>,
@@ -219,13 +218,13 @@ export abstract class BaseEdge extends BaseElement<BaseEdgeStyleProps> implement
   }
 
   protected get sourceNode() {
-    const { context, sourceNode: source } = this.parsedAttributes;
-    return context.element!.getElement<Node>(source)!;
+    const { sourceNode: source } = this.parsedAttributes;
+    return this.context.element!.getElement<Node>(source)!;
   }
 
   protected get targetNode() {
-    const { context, targetNode: target } = this.parsedAttributes;
-    return context.element!.getElement<Node>(target)!;
+    const { targetNode: target } = this.parsedAttributes;
+    return this.context.element!.getElement<Node>(target)!;
   }
 
   protected getKeyStyle(attributes: ParsedBaseEdgeStyleProps): PathStyleProps {

packages/g6/src/elements/nodes/base-node.ts

@@ -4,7 +4,6 @@ import type { CategoricalPalette } from '../../palettes/types';
 import type { RuntimeContext } from '../../runtime/types';
 import type { NodeData } from '../../spec';
 import type {
-  BaseElementStyleProps,
   ID,
   Node,
   NodeBadgeStyleProps,
@@ -28,7 +27,7 @@ import { getWordWrapWidthByBox } from '../../utils/text';
 import { setVisibility } from '../../utils/visibility';
 import { BaseElement } from '../base-element';
 import { effect } from '../effect';
-import type { BadgeStyleProps, IconStyleProps, LabelStyleProps } from '../shapes';
+import type { BadgeStyleProps, BaseShapeStyleProps, IconStyleProps, LabelStyleProps } from '../shapes';
 import { Badge, Icon, Label } from '../shapes';
 import { connectImage, dispatchPositionChange } from '../shapes/image';
 
@@ -38,7 +37,7 @@ import { connectImage, dispatchPositionChange } from '../shapes/image';
  * <en/> Base node style props
  */
 export interface BaseNodeStyleProps
-  extends BaseElementStyleProps,
+  extends BaseShapeStyleProps,
     Prefix<'label', NodeLabelStyleProps>,
     Prefix<'halo', BaseStyleProps>,
     Prefix<'icon', IconStyleProps>,

packages/g6/src/elements/shapes/base-shape.ts

@@ -160,10 +160,7 @@ export abstract class BaseShape<StyleProps extends BaseShapeStyleProps> extends
    */
   public getGraphicStyle<T extends Record<string, any>>(
     style: T,
-  ): Omit<
-    T,
-    'x' | 'y' | 'z' | 'transform' | 'transformOrigin' | 'className' | 'class' | 'context' | 'zIndex' | 'visibility'
-  > {
+  ): Omit<T, 'x' | 'y' | 'z' | 'transform' | 'transformOrigin' | 'className' | 'class' | 'zIndex' | 'visibility'> {
     return getSubShapeStyle(style);
   }
 

packages/g6/src/exports.ts

@@ -234,7 +234,6 @@ export type {
 } from './transforms';
 export type { DrawData } from './transforms/types';
 export type {
-  BaseElementStyleProps,
   CardinalPlacement,
   CollapsedMarkerStyleProps,
   Combo,

packages/g6/src/global.d.ts

@@ -1,4 +1,5 @@
 import '@antv/g';
+import type { RuntimeContext } from './runtime/types';
 
 declare module '@antv/g' {
   interface BaseStyleProps {
@@ -9,4 +10,8 @@ declare module '@antv/g' {
      */
     $layer?: string;
   }
+
+  interface DisplayObjectConfig {
+    context?: RuntimeContext;
+  }
 }

packages/g6/src/runtime/element.ts

@@ -387,16 +387,11 @@ export class ElementController {
 
     this.emit(new ElementLifeCycleEvent(GraphEvent.BEFORE_ELEMENT_CREATE, elementType, datum), context);
 
-    // if (context.stage === 'expand') {
-    //   // 如果是展开的元素，需要将其 zIndex 提升至目标元素的上层
-    //   const targetZIndex = this.getElementZIndex(context.target!);
-    //   if (!style.zIndex || style.zIndex < targetZIndex) style.zIndex = targetZIndex + (style.zIndex ?? 0);
-    // }
     const element = this.container.appendChild(
       new Ctor({
         id,
+        context: this.context,
         style: {
-          context: this.context,
           ...style,
         },
       }),