refactor: html node support dx, dy (#6237)

* refactor(elements): html node support dx, dy

* docs: add html demo

---------

Co-authored-by: antv <antv@antfin.com>

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

@@ -26,6 +26,20 @@ export interface HTMLStyleProps extends BaseNodeStyleProps {
    * <en/> HTML content, can be a string or `HTMLElement`
    */
   innerHTML: string | HTMLElement;
+  /**
+   * <zh/> 横行偏移量。HTML 容器默认以左上角为原点，通过 dx 来进行横向偏移
+   *
+   * <en/> Horizontal offset. The HTML container defaults to the upper left corner as the origin, and the horizontal offset is performed through dx
+   * @defaultValue 0
+   */
+  dx?: number;
+  /**
+   * <zh/> 纵向偏移量。HTML 容器默认以左上角为原点，通过 dy 来进行纵向偏移
+   *
+   * <en/> Vertical offset. The HTML container defaults to the upper left corner as the origin, and the vertical offset is performed through dy
+   * @defaultValue 0
+   */
+  dy?: number;
 }
 
 /**
@@ -69,9 +83,13 @@ export class HTML extends BaseNode<HTMLStyleProps> {
   }
 
   protected getKeyStyle(attributes: Required<HTMLStyleProps>): GHTMLStyleProps {
-    const style = pick(attributes, ['innerHTML', 'pointerEvents', 'cursor']) as unknown as HTMLStyleProps;
+    const {
+      dx = 0,
+      dy = 0,
+      ...style
+    } = pick(attributes, ['dx', 'dy', 'innerHTML', 'pointerEvents', 'cursor']) as unknown as HTMLStyleProps;
     const [width, height] = this.getSize(attributes);
-    return { ...style, width, height };
+    return { x: dx, y: dy, ...style, width, height };
   }
 
   protected drawKeyShape(attributes: Required<HTMLStyleProps>, container: Group) {

packages/site/examples/element/node/demo/html.js

@@ -0,0 +1,72 @@
+import { Graph } from '@antv/g6';
+
+const ICON_MAP = {
+  error: '❌',
+  overload: '⚡',
+  running: '✅',
+};
+
+const COLOR_MAP = {
+  error: '#f5222d',
+  overload: '#faad14',
+  running: '#52c41a',
+};
+
+const graph = new Graph({
+  container: 'container',
+  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' } },
+    ],
+  },
+  node: {
+    type: 'html',
+    style: {
+      size: [240, 80],
+      dx: -120,
+      dy: -40,
+      innerHTML: (d) => {
+        const {
+          data: { location, status, ip },
+        } = d;
+        const color = COLOR_MAP[status];
+
+        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]}
+    </div>
+  </div>
+  <div>
+    <span style="border: 1px solid white; padding: 2px;">
+      ${ip}
+    </span>
+  </div>
+</div>`;
+      },
+    },
+  },
+  layout: {
+    type: 'grid',
+  },
+  behaviors: ['drag-element', 'zoom-canvas'],
+});
+
+graph.render();

packages/site/examples/element/node/demo/meta.json

@@ -76,6 +76,14 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*YSVjSLyYNwIAAAAAAAAAAAAADmJ7AQ/original"
     },
+    {
+      "filename": "html.js",
+      "title": {
+        "zh": "HTML节点",
+        "en": "HTML节点"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TvSOSINFbBIAAAAAAAAAAAAADmJ7AQ/original"
+    },
     {
       "filename": "donut.js",
       "title": {

tests/g6/elements/node-element.spec.ts

@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('element node html', () => {
+  test('html', async ({ page }) => {
+    await page.goto('/?Demo=elementNodeHTML&Renderer=canvas&GridLine=true&Theme=light&Animation=false');
+
+    await page.waitForSelector('.key');
+
+    const clip = { x: 100, y: 100, width: 240, height: 180 };
+
+    await expect(page).toHaveScreenshot({ clip });
+  });
+});