fix: html node only render key shape (#6544)

* fix: html node only render key shape

* refactor: html node draw ports additional

* chore: commit changeset

* chore: fix workflow

---------

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

.changeset/healthy-penguins-study.md

@@ -0,0 +1,5 @@
+---
+'@antv/g6': patch
+---
+
+fix: html node only render key and ports shapes

.github/workflows/ci.yml

@@ -23,6 +23,10 @@ jobs:
           brew update
           brew install python3 || : # python doesn't need to be linked
           brew install pkg-config cairo pango libpng jpeg giflib librsvg
+
+          brew unlink pkg-config
+          brew link --overwrite pkgconf
+
           pip install setuptools
 
       - uses: pnpm/action-setup@v4

packages/g6/__tests__/demos/element-node-html-2.ts

@@ -0,0 +1,75 @@
+import { Graph } from '@antv/g6';
+
+export const elementNodeHTML2: TestCase = async (context) => {
+  const ICON_MAP = {
+    error: '❌',
+    overload: '⚡',
+    running: '✅',
+  };
+
+  const COLOR_MAP = {
+    error: '#f5222d',
+    overload: '#faad14',
+    running: '#52c41a',
+  } as const;
+
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [
+        { id: 'node-1', data: { location: 'East', status: 'error', ip: '192.168.1.2' } },
+        { id: 'node-2', data: { location: 'West', status: 'overload', ip: '192.168.1.3' } },
+        { id: 'node-3', data: { location: 'South', status: 'running', ip: '192.168.1.4' }, states: ['active'] },
+      ],
+    },
+    node: {
+      type: 'html',
+      style: {
+        size: [160, 60],
+        dx: -80,
+        dy: -30,
+        innerHTML: (d: any) => {
+          const {
+            data: { location, status, ip },
+          } = d;
+          const color = COLOR_MAP[status as keyof typeof COLOR_MAP];
+          return `
+  <div 
+    style="
+      width:100%; 
+      height: 100%; 
+      background: ${color}bb; 
+      border: 1px solid ${color};
+      color: #fff;
+      user-select: none;
+      display: flex; 
+      padding: 10px;
+      "
+  >
+    <div style="display: flex;flex-direction: column;flex: 1;">
+      <div style="font-weight: bold;">
+        ${location} Node
+      </div>
+      <div>
+        status: ${status} ${ICON_MAP[status as keyof typeof ICON_MAP]}
+      </div>
+    </div>
+    <div>
+      <span style="border: 1px solid white; padding: 2px;">
+        ${ip}
+      </span>
+    </div>
+  </div>`;
+        },
+      },
+    },
+    layout: {
+      type: 'grid',
+    },
+    behaviors: ['drag-element', 'zoom-canvas'],
+  });
+
+  await graph.render();
+
+  return graph;
+};

packages/g6/__tests__/demos/index.ts

@@ -63,6 +63,7 @@ export { elementNodeDonut } from './element-node-donut';
 export { elementNodeEllipse } from './element-node-ellipse';
 export { elementNodeHexagon } from './element-node-hexagon';
 export { elementNodeHTML } from './element-node-html';
+export { elementNodeHTML2 } from './element-node-html-2';
 export { elementNodeImage } from './element-node-image';
 export { elementNodeRect } from './element-node-rect';
 export { elementNodeStar } from './element-node-star';

packages/g6/src/elements/nodes/html.ts

@@ -83,6 +83,15 @@ export class HTML extends BaseNode<HTMLStyleProps> {
     return this.getShape<GHTML>('key').getDomElement();
   }
 
+  /**
+   * @override
+   */
+  public render(attributes: Required<HTMLStyleProps> = this.parsedAttributes, container: Group = this): void {
+    this.drawKeyShape(attributes, container);
+
+    this.drawPortShapes(attributes, container);
+  }
+
   protected getKeyStyle(attributes: Required<HTMLStyleProps>): GHTMLStyleProps {
     const {
       dx = 0,