docs: add diamond, image demo

antvis · Mar 7, 2024 · f9d6127 · f9d6127
1 parent 304dc3c
commit f9d6127
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 321 deletions.
diff --git a/packages/g6/src/themes/dark.ts b/packages/g6/src/themes/dark.ts
@@ -22,6 +22,8 @@ export const dark: Theme = {
     style: {
       badgeFill: BG_COLOR,
       badgePalette: ['#7E92B5', '#F86254', '#EDB74B'],
+      badgePadding: [1, 4],
+      badgeFontSize: 8,
       fill: NODE_COLOR,
       halo: false,
       haloLineWidth: 12,

diff --git a/packages/g6/src/themes/light.ts b/packages/g6/src/themes/light.ts
@@ -23,6 +23,8 @@ export const light: Theme = {
     style: {
       badgeFill: BG_COLOR,
       badgePalette: ['#7E92B5', '#F86254', '#EDB74B'],
+      badgePadding: [1, 4],
+      badgeFontSize: 8,
       fill: NODE_COLOR,
       halo: false,
       haloLineWidth: 12,

diff --git a/packages/site/examples/item/defaultNodes/demo/circle.ts b/packages/site/examples/item/defaultNodes/demo/circle.ts
@@ -39,8 +39,6 @@ const graph = new Graph({
               { text: 'Notice', position: 'right-bottom' },
             ]
           : [],
-      badgeFontSize: 8,
-      badgePadding: [1, 4],
     },
   },
   layout: {

diff --git a/packages/site/examples/item/defaultNodes/demo/diamond.js b/packages/site/examples/item/defaultNodes/demo/diamond.js
diff --git a/packages/site/examples/item/defaultNodes/demo/diamond.ts b/packages/site/examples/item/defaultNodes/demo/diamond.ts
@@ -20,37 +20,38 @@ const graph = new Graph({
   node: {
     style: {
       type: 'diamond',
-      width: 40,
-      height: 40,
+      size: 40,
       labelMaxWidth: 120,
-      labelText: (d: any) => d.id,
+      labelText: (d) => d.id,
       iconWidth: 20,
       iconHeight: 20,
       iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-      halo: (d: any) => d.id.includes('halo'),
-      ports: (d: any) =>
+      halo: (d) => d.id.includes('halo'),
+      ports: (d) =>
         d.id.includes('ports')
           ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
           : [],
-      badges: (d: any) =>
+      badges: (d) =>
         d.id.includes('badges')
           ? [
               { text: 'A', position: 'right-top' },
               { text: 'Important', position: 'right' },
               { text: 'Notice', position: 'right-bottom' },
             ]
           : [],
-      badgeFontSize: 8,
-      badgePadding: [1, 4],
     },
   },
   layout: {
     type: 'grid',
   },
 });
-await graph.render();
-graph.setElementState('diamond-active', 'active');
-graph.setElementState('diamond-selected', 'selected');
-graph.setElementState('diamond-highlight', 'highlight');
-graph.setElementState('diamond-inactive', 'inactive');
-graph.setElementState('diamond-disabled', 'disabled');
+
+graph.render();
+
+graph.on('afterrender', () => {
+  graph.setElementState('diamond-active', 'active');
+  graph.setElementState('diamond-selected', 'selected');
+  graph.setElementState('diamond-highlight', 'highlight');
+  graph.setElementState('diamond-inactive', 'inactive');
+  graph.setElementState('diamond-disabled', 'disabled');
+});
diff --git a/packages/site/examples/item/defaultNodes/demo/ellipse.ts b/packages/site/examples/item/defaultNodes/demo/ellipse.ts
@@ -39,8 +39,6 @@ const graph = new Graph({
               { text: 'Notice', position: 'right-bottom' },
             ]
           : [],
-      badgeFontSize: 8,
-      badgePadding: [1, 4],
     },
   },
   layout: {

diff --git a/packages/site/examples/item/defaultNodes/demo/image.js b/packages/site/examples/item/defaultNodes/demo/image.js