docs: add oversized label demo (#5505)

* docs: add oversized label demo

* docs: add copy label demo

* docs: update label text wordWrap

* docs: use clipboard API

* test: add test for element label oversized

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-oversized';
 export * from './graph-element';
 export * from './layered-canvas';
 export * from './node-circle';

packages/g6/__tests__/demo/static/element-label-oversized.ts

@@ -0,0 +1,77 @@
+import { Graph } from '@/src';
+import type { StaticTestCase } from '../types';
+
+export const elementLabelOversized: StaticTestCase = async (context) => {
+  const { container, animation, theme } = context;
+  const data = {
+    nodes: [
+      {
+        id: 'node1',
+        data: {
+          x: 100,
+          y: 150,
+          label: `This label is too  long to be displayed`,
+          size: 100,
+        },
+      },
+      {
+        id: 'node2',
+        data: {
+          x: 400,
+          y: 150,
+          label: 'This label is too long to be displayed',
+          size: 150,
+        },
+      },
+    ],
+    edges: [
+      {
+        id: 'edge1',
+        source: 'node1',
+        target: 'node2',
+        data: {
+          label: 'This label is too long to be displayed',
+        },
+      },
+    ],
+  };
+
+  const graph = new Graph({
+    container: container,
+    theme,
+    data,
+    node: {
+      style: {
+        type: 'rect',
+        x: (d: any) => d.data.x,
+        y: (d: any) => d.data.y,
+        size: (d: any) => d.data.size,
+        labelPosition: 'bottom',
+        labelText: (d: any) => d.data.label,
+        labelMaxWidth: '90%',
+        labelBackgroundFill: '#eee',
+        labelBackgroundFillOpacity: 0.5,
+        labelBackgroundRadius: 4,
+        labelWordWrap: true,
+        labelMaxLines: 4,
+      },
+    },
+    edge: {
+      style: {
+        labelOffsetY: -4,
+        labelTextBaseline: 'bottom',
+        labelText: (d: any) => d.data.label,
+        labelMaxWidth: '80%',
+        labelBackgroundFill: 'red',
+        labelBackgroundFillOpacity: 0.5,
+        labelBackgroundRadius: 4,
+        labelWordWrap: true,
+        labelMaxLines: 4,
+      },
+    },
+    behaviors: ['drag-node'],
+    animation,
+  });
+
+  await graph.render();
+};