From 596b1030e21445164b3137d1b901acb181f354e9 Mon Sep 17 00:00:00 2001
From: hustcc <i@hust.cc>
Date: Fri, 8 Mar 2024 12:25:25 +0800
Subject: [PATCH] docs: add element label background (#5506)

* docs: add element label background

* test: fix ci

* test: make layout test can work

* chore: fix cr
---
 packages/g6/__tests__/demo/static/common.ts   |   1 +
 .../demo/static/element-label-background.ts   |  76 ++++
 .../static/element-label-background.svg       | 342 ++++++++++++++++++
 .../site/examples/item/labelBg/demo/edgeBg.js |  71 ----
 .../item/labelBg/demo/label-background.ts     |  75 ++++
 .../site/examples/item/labelBg/demo/meta.json |  12 +-
 .../site/examples/item/labelBg/demo/nodeBg.js |  71 ----
 7 files changed, 496 insertions(+), 152 deletions(-)
 create mode 100644 packages/g6/__tests__/demo/static/element-label-background.ts
 create mode 100644 packages/g6/__tests__/integration/snapshots/static/element-label-background.svg
 delete mode 100644 packages/site/examples/item/labelBg/demo/edgeBg.js
 create mode 100644 packages/site/examples/item/labelBg/demo/label-background.ts
 delete mode 100644 packages/site/examples/item/labelBg/demo/nodeBg.js

diff --git a/packages/g6/__tests__/demo/static/common.ts b/packages/g6/__tests__/demo/static/common.ts
index 05b289dcd80..b6ce894dd5b 100644
--- a/packages/g6/__tests__/demo/static/common.ts
+++ b/packages/g6/__tests__/demo/static/common.ts
@@ -29,6 +29,7 @@ export * from './edge-loop';
 export * from './edge-polyline';
 export * from './edge-port';
 export * from './edge-quadratic';
+export * from './element-label-background';
 export * from './element-label-oversized';
 export * from './graph-element';
 export * from './layered-canvas';
diff --git a/packages/g6/__tests__/demo/static/element-label-background.ts b/packages/g6/__tests__/demo/static/element-label-background.ts
new file mode 100644
index 00000000000..598757b4d1b
--- /dev/null
+++ b/packages/g6/__tests__/demo/static/element-label-background.ts
@@ -0,0 +1,76 @@
+import { Graph } from '@/src';
+import type { StaticTestCase } from '../types';
+
+export const elementLabelBackground: StaticTestCase = async (context) => {
+  const { container, animation, theme } = context;
+
+  const data = {
+    nodes: [
+      {
+        id: 'node1',
+        style: { x: 250, y: 100 },
+      },
+      {
+        id: 'node2',
+        style: { x: 150, y: 300 },
+      },
+      {
+        id: 'node3',
+        style: { x: 400, y: 300 },
+      },
+    ],
+    edges: [
+      {
+        id: 'edge1',
+        source: 'node1',
+        target: 'node2',
+      },
+      {
+        id: 'edge2',
+        source: 'node1',
+        target: 'node3',
+      },
+      {
+        id: 'edge3',
+        source: 'node2',
+        target: 'node3',
+      },
+    ],
+  };
+
+  const graph = new Graph({
+    container,
+    data,
+    node: {
+      style: {
+        labelText: (d: any) => d.id,
+        labelPosition: 'bottom',
+        labelFill: '#e66465',
+        labelFontSize: 12,
+        labelFontStyle: 'italic',
+        labelBackgroundFill: '#eee',
+        labelBackgroundStroke: '#9ec9ff',
+        labelBackgroundRadius: 2,
+      },
+    },
+    edge: {
+      style: {
+        labelText: (d: any) => d.id,
+        labelPosition: 'center',
+        labelTextBaseline: 'top',
+        labelDy: 5,
+        labelFontSize: 12,
+        labelFontWeight: 'bold',
+        labelFill: '#1890ff',
+        labelBackgroundFill: '#eee',
+        labelBackgroundStroke: '#9ec9ff',
+        labelBackgroundRadius: 2,
+      },
+    },
+    behaviors: ['drag-canvas', 'drag-node'],
+    animation,
+    theme,
+  });
+
+  await graph.render();
+};
diff --git a/packages/g6/__tests__/integration/snapshots/static/element-label-background.svg b/packages/g6/__tests__/integration/snapshots/static/element-label-background.svg
new file mode 100644
index 00000000000..31f41fbf918
--- /dev/null
+++ b/packages/g6/__tests__/integration/snapshots/static/element-label-background.svg
@@ -0,0 +1,342 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="500"
+  height="500"
+  style="background: transparent; position: absolute; outline: none;"
+  color-interpolation-filters="sRGB"
+  tabindex="1"
+>
+  <defs />
+  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+      <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="edge1"
+          fill="none"
+          marker-start="false"
+          marker-end="false"
+          transform="matrix(1,0,0,1,0,0)"
+        >
+          <g
+            id="edge1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
+          <g transform="matrix(1,0,0,1,157.155411,114.310837)">
+            <path
+              id="key"
+              fill="none"
+              d="M 85.68916494400133,0 L 0,171.37832988800267"
+              stroke-width="1"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 85.68916494400133,0 L 0,171.37832988800267"
+              stroke-width="3"
+              stroke="transparent"
+            />
+          </g>
+          <g
+            id="label"
+            fill="none"
+            transform="matrix(0.447220,-0.894424,0.894424,0.447220,198.211121,203.577698)"
+          >
+            <g transform="matrix(1,0,0,1,-17.340000,5)">
+              <path
+                id="background"
+                fill="rgba(238,238,238,1)"
+                d="M 2,0 l 31.68,0 a 2,2,0,0,1,2,2 l 0,19 a 2,2,0,0,1,-2,2 l -31.68,0 a 2,2,0,0,1,-2,-2 l 0,-19 a 2,2,0,0,1,2,-2 z"
+                opacity="0.75"
+                stroke-width="0"
+                stroke="rgba(158,201,255,1)"
+                width="35.68"
+                height="23"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,0,0)">
+              <text
+                id="text"
+                fill="rgba(24,144,255,1)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                style="transform:translate(0px, 5px);"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+                font-weight="bold"
+              >
+                edge1
+              </text>
+            </g>
+          </g>
+        </g>
+        <g
+          id="edge2"
+          fill="none"
+          marker-start="false"
+          marker-end="false"
+          transform="matrix(1,0,0,1,0,0)"
+        >
+          <g
+            id="edge2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
+          <g transform="matrix(1,0,0,1,259.600006,112.800003)">
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 130.79999999999995,174.39999999999998"
+              stroke-width="1"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 130.79999999999995,174.39999999999998"
+              stroke-width="3"
+              stroke="transparent"
+            />
+          </g>
+          <g
+            id="label"
+            fill="none"
+            transform="matrix(0.600003,0.799997,-0.799997,0.600003,327.400024,203.199997)"
+          >
+            <g transform="matrix(1,0,0,1,-18.180000,5)">
+              <path
+                id="background"
+                fill="rgba(238,238,238,1)"
+                d="M 2,0 l 33.36,0 a 2,2,0,0,1,2,2 l 0,19 a 2,2,0,0,1,-2,2 l -33.36,0 a 2,2,0,0,1,-2,-2 l 0,-19 a 2,2,0,0,1,2,-2 z"
+                opacity="0.75"
+                stroke-width="0"
+                stroke="rgba(158,201,255,1)"
+                width="37.36"
+                height="23"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,0,0)">
+              <text
+                id="text"
+                fill="rgba(24,144,255,1)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                style="transform:translate(0px, 5px);"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+                font-weight="bold"
+              >
+                edge2
+              </text>
+            </g>
+          </g>
+        </g>
+        <g
+          id="edge3"
+          fill="none"
+          marker-start="false"
+          marker-end="false"
+          transform="matrix(1,0,0,1,0,0)"
+        >
+          <g
+            id="edge3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
+          <g transform="matrix(1,0,0,1,166,300)">
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 218,0"
+              stroke-width="1"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 218,0"
+              stroke-width="3"
+              stroke="transparent"
+            />
+          </g>
+          <g id="label" fill="none" transform="matrix(1,0,0,1,279,300)">
+            <g transform="matrix(1,0,0,1,-18.299999,5)">
+              <path
+                id="background"
+                fill="rgba(238,238,238,1)"
+                d="M 2,0 l 33.6,0 a 2,2,0,0,1,2,2 l 0,19 a 2,2,0,0,1,-2,2 l -33.6,0 a 2,2,0,0,1,-2,-2 l 0,-19 a 2,2,0,0,1,2,-2 z"
+                opacity="0.75"
+                stroke-width="0"
+                stroke="rgba(158,201,255,1)"
+                width="37.6"
+                height="23"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,0,0)">
+              <text
+                id="text"
+                fill="rgba(24,144,255,1)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                style="transform:translate(0px, 5px);"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+                font-weight="bold"
+              >
+                edge3
+              </text>
+            </g>
+          </g>
+        </g>
+      </g>
+      <g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="node1" fill="none" transform="matrix(1,0,0,1,250,100)">
+          <g transform="matrix(1,0,0,1,0,0)">
+            <circle
+              id="key"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-16,-16)"
+              cx="16"
+              cy="16"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
+              r="16"
+            />
+          </g>
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,16)">
+            <g transform="matrix(1,0,0,1,-17.340000,0)">
+              <path
+                id="background"
+                fill="rgba(238,238,238,1)"
+                d="M 2,0 l 31.68,0 a 2,2,0,0,1,2,2 l 0,19 a 2,2,0,0,1,-2,2 l -31.68,0 a 2,2,0,0,1,-2,-2 l 0,-19 a 2,2,0,0,1,2,-2 z"
+                opacity="0.5"
+                stroke-width="0"
+                stroke="rgba(158,201,255,1)"
+                width="35.68"
+                height="23"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,0,0)">
+              <text
+                id="text"
+                fill="rgba(230,100,101,1)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+                font-style="italic"
+              >
+                node1
+              </text>
+            </g>
+          </g>
+        </g>
+        <g id="node2" fill="none" transform="matrix(1,0,0,1,150,300)">
+          <g transform="matrix(1,0,0,1,0,0)">
+            <circle
+              id="key"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-16,-16)"
+              cx="16"
+              cy="16"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
+              r="16"
+            />
+          </g>
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,16)">
+            <g transform="matrix(1,0,0,1,-18.180000,0)">
+              <path
+                id="background"
+                fill="rgba(238,238,238,1)"
+                d="M 2,0 l 33.36,0 a 2,2,0,0,1,2,2 l 0,19 a 2,2,0,0,1,-2,2 l -33.36,0 a 2,2,0,0,1,-2,-2 l 0,-19 a 2,2,0,0,1,2,-2 z"
+                opacity="0.5"
+                stroke-width="0"
+                stroke="rgba(158,201,255,1)"
+                width="37.36"
+                height="23"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,0,0)">
+              <text
+                id="text"
+                fill="rgba(230,100,101,1)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+                font-style="italic"
+              >
+                node2
+              </text>
+            </g>
+          </g>
+        </g>
+        <g id="node3" fill="none" transform="matrix(1,0,0,1,400,300)">
+          <g transform="matrix(1,0,0,1,0,0)">
+            <circle
+              id="key"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-16,-16)"
+              cx="16"
+              cy="16"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
+              r="16"
+            />
+          </g>
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,16)">
+            <g transform="matrix(1,0,0,1,-18.299999,0)">
+              <path
+                id="background"
+                fill="rgba(238,238,238,1)"
+                d="M 2,0 l 33.6,0 a 2,2,0,0,1,2,2 l 0,19 a 2,2,0,0,1,-2,2 l -33.6,0 a 2,2,0,0,1,-2,-2 l 0,-19 a 2,2,0,0,1,2,-2 z"
+                opacity="0.5"
+                stroke-width="0"
+                stroke="rgba(158,201,255,1)"
+                width="37.6"
+                height="23"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,0,0)">
+              <text
+                id="text"
+                fill="rgba(230,100,101,1)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+                font-style="italic"
+              >
+                node3
+              </text>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/site/examples/item/labelBg/demo/edgeBg.js b/packages/site/examples/item/labelBg/demo/edgeBg.js
deleted file mode 100644
index cee4ba0dfe3..00000000000
--- a/packages/site/examples/item/labelBg/demo/edgeBg.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Graph } from '@antv/g6';
-
-const container = document.getElementById('container');
-const width = container.scrollWidth;
-const height = container.scrollHeight || 500;
-
-const graph = new Graph({
-  container: 'container',
-  width,
-  height,
-  modes: {
-    default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
-  },
-  plugins: [
-    {
-      // lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following
-      type: 'lod-controller',
-      disableLod: true,
-    },
-  ],
-  data: {
-    nodes: [
-      {
-        id: 'node1',
-        data: {
-          x: 150,
-          y: 100,
-        },
-      },
-      {
-        id: 'node2',
-        data: { x: 250, y: 200 },
-      },
-      {
-        id: 'node3',
-        data: { x: 450, y: 200 },
-      },
-    ],
-    edges: [
-      {
-        id: 'edge1',
-        source: 'node1',
-        target: 'node2',
-      },
-      {
-        id: 'edge2',
-        source: 'node1',
-        target: 'node3',
-      },
-      {
-        id: 'edge3',
-        source: 'node2',
-        target: 'node3',
-      },
-    ],
-  },
-  edge: {
-    labelShape: {
-      text: {
-        fields: ['id'],
-        formatter: (model) => model.id,
-      },
-      position: 'bottom',
-    },
-    labelBackgroundShape: {
-      fill: 'linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',
-    },
-  },
-});
-
-window.graph = graph;
\ No newline at end of file
diff --git a/packages/site/examples/item/labelBg/demo/label-background.ts b/packages/site/examples/item/labelBg/demo/label-background.ts
new file mode 100644
index 00000000000..0e4276f321f
--- /dev/null
+++ b/packages/site/examples/item/labelBg/demo/label-background.ts
@@ -0,0 +1,75 @@
+import { Graph } from '@antv/g6';
+
+const data = {
+  nodes: [
+    {
+      id: 'node1',
+      data: {
+        x: 150,
+        y: 100,
+      },
+    },
+    {
+      id: 'node2',
+      data: { x: 250, y: 200 },
+    },
+    {
+      id: 'node3',
+      data: { x: 450, y: 200 },
+    },
+  ],
+  edges: [
+    {
+      id: 'edge1',
+      source: 'node1',
+      target: 'node2',
+    },
+    {
+      id: 'edge2',
+      source: 'node1',
+      target: 'node3',
+    },
+    {
+      id: 'edge3',
+      source: 'node2',
+      target: 'node3',
+    },
+  ],
+};
+
+const graph = new Graph({
+  container: 'container',
+  data,
+  node: {
+    style: {
+      labelText: (d) => d.id,
+      labelPosition: 'bottom',
+      labelFill: '#e66465',
+      labelFontSize: 12,
+      labelFontStyle: 'italic',
+      labelBackgroundFill: '#eee',
+      labelBackgroundStroke: '#9ec9ff',
+      labelBackgroundRadius: 2,
+    },
+  },
+  edge: {
+    style: {
+      labelText: (d) => d.id,
+      labelPosition: 'center',
+      labelTextBaseline: 'top',
+      labelDy: 5,
+      labelFontSize: 12,
+      labelFontWeight: 'bold',
+      labelFill: '#1890ff',
+      labelBackgroundFill: '#eee',
+      labelBackgroundStroke: '#9ec9ff',
+      labelBackgroundRadius: 2,
+    },
+  },
+  layout: {
+    type: 'force',
+  },
+  behaviors: ['drag-canvas', 'drag-node'],
+});
+
+graph.render();
diff --git a/packages/site/examples/item/labelBg/demo/meta.json b/packages/site/examples/item/labelBg/demo/meta.json
index e5d24b1d097..9343fb8b561 100644
--- a/packages/site/examples/item/labelBg/demo/meta.json
+++ b/packages/site/examples/item/labelBg/demo/meta.json
@@ -5,20 +5,12 @@
   },
   "demos": [
     {
-      "filename": "nodeBg.js",
+      "filename": "label-background.ts",
       "title": {
-        "zh": "设置节点文本背景",
+        "zh": "设置元素的文本背景",
         "en": "Set Node Label Background"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*m5ABT5ra4w4AAAAAAAAAAABkARQnAQ"
-    },
-    {
-      "filename": "edgeBg.js",
-      "title": {
-        "zh": "设置边上文本背景",
-        "en": "Set Edge label Background"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*w_bNSZTlPXUAAAAAAAAAAABkARQnAQ"
     }
   ]
 }
diff --git a/packages/site/examples/item/labelBg/demo/nodeBg.js b/packages/site/examples/item/labelBg/demo/nodeBg.js
deleted file mode 100644
index 5ea9b13ae21..00000000000
--- a/packages/site/examples/item/labelBg/demo/nodeBg.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Graph } from '@antv/g6';
-
-const container = document.getElementById('container');
-const width = container.scrollWidth;
-const height = container.scrollHeight || 500;
-
-const graph = new Graph({
-  container: 'container',
-  width,
-  height,
-  modes: {
-    default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
-  },
-  plugins: [
-    {
-      // lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following
-      type: 'lod-controller',
-      disableLod: true,
-    },
-  ],
-  data: {
-    nodes: [
-      {
-        id: 'node1',
-        data: {
-          x: 150,
-          y: 100,
-        },
-      },
-      {
-        id: 'node2',
-        data: { x: 250, y: 200 },
-      },
-      {
-        id: 'node3',
-        data: { x: 450, y: 200 },
-      },
-    ],
-    edges: [
-      {
-        id: 'edge1',
-        source: 'node1',
-        target: 'node2',
-      },
-      {
-        id: 'edge2',
-        source: 'node1',
-        target: 'node3',
-      },
-      {
-        id: 'edge3',
-        source: 'node2',
-        target: 'node3',
-      },
-    ],
-  },
-  node: {
-    labelShape: {
-      text: {
-        fields: ['id'],
-        formatter: (model) => model.id,
-      },
-      position: 'bottom',
-    },
-    labelBackgroundShape: {
-      fill: 'linear-gradient(#e66465, #9198e5)',
-    },
-  },
-});
-
-window.graph = graph;
\ No newline at end of file