From 5418db7066a6bce77fca3b1e46ed6df11134c30e Mon Sep 17 00:00:00 2001 From: antv Date: Mon, 26 Aug 2024 21:00:44 +0800 Subject: [PATCH 1/2] refactor(elements): html node support dx, dy --- packages/g6/src/elements/nodes/html.ts | 22 ++++++++++++++++-- tests/g6/elements/node-element.spec.ts | 13 +++++++++++ ...ement-node-html-html-1-chromium-darwin.png | Bin 0 -> 3766 bytes 3 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 tests/g6/elements/node-element.spec.ts create mode 100644 tests/g6/elements/node-element.spec.ts-snapshots/element-node-html-html-1-chromium-darwin.png diff --git a/packages/g6/src/elements/nodes/html.ts b/packages/g6/src/elements/nodes/html.ts index 20f009c6090..1b0b85fb3da 100644 --- a/packages/g6/src/elements/nodes/html.ts +++ b/packages/g6/src/elements/nodes/html.ts @@ -26,6 +26,20 @@ export interface HTMLStyleProps extends BaseNodeStyleProps { * HTML content, can be a string or `HTMLElement` */ innerHTML: string | HTMLElement; + /** + * 横行偏移量。HTML 容器默认以左上角为原点，通过 dx 来进行横向偏移 + * + * 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; + /** + * 纵向偏移量。HTML 容器默认以左上角为原点，通过 dy 来进行纵向偏移 + * + * 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 { } protected getKeyStyle(attributes: Required): 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, container: Group) { diff --git a/tests/g6/elements/node-element.spec.ts b/tests/g6/elements/node-element.spec.ts new file mode 100644 index 00000000000..f5f3e9b8e9b --- /dev/null +++ b/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 }); + }); +}); diff --git a/tests/g6/elements/node-element.spec.ts-snapshots/element-node-html-html-1-chromium-darwin.png b/tests/g6/elements/node-element.spec.ts-snapshots/element-node-html-html-1-chromium-darwin.png new file mode 100644 index 0000000000000000000000000000000000000000..530e26a585be9e3e24957ec9ed0f849377802486 GIT binary patch literal 3766 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 literal 0 HcmV?d00001 From adf3bf30eaed1c4f1934f79e77fc59f37de9d9eb Mon Sep 17 00:00:00 2001 From: antv Date: Mon, 26 Aug 2024 21:01:08 +0800 Subject: [PATCH 2/2] docs: add html demo --- .../site/examples/element/node/demo/html.js | 72 +++++++++++++++++++ .../site/examples/element/node/demo/meta.json | 8 +++ 2 files changed, 80 insertions(+) create mode 100644 packages/site/examples/element/node/demo/html.js diff --git a/packages/site/examples/element/node/demo/html.js b/packages/site/examples/element/node/demo/html.js new file mode 100644 index 00000000000..28e28da628c --- /dev/null +++ b/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 ` +
+
+
+ ${location} Node +
+
+ status: ${status} ${ICON_MAP[status]} +
+
+
+ + ${ip} + +
+
`; + }, + }, + }, + layout: { + type: 'grid', + }, + behaviors: ['drag-element', 'zoom-canvas'], +}); + +graph.render(); diff --git a/packages/site/examples/element/node/demo/meta.json b/packages/site/examples/element/node/demo/meta.json index 92895492113..b60413cecc2 100644 --- a/packages/site/examples/element/node/demo/meta.json +++ b/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": {