docs: add diamond, image demo (#5501)

* docs: add diamond, image demo * chore: fix code review
antvis · Mar 7, 2024 · 5a3e6c9 · 5a3e6c9
1 parent 8633679
commit 5a3e6c9
Show file tree

Hide file tree

Showing 13 changed files with 94 additions and 334 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
@@ -1,4 +1,4 @@
-import { Graph } from '@antv/g6';
+import { Graph, GraphEvent } from '@antv/g6';
 
 const data = {
   nodes: [
@@ -39,8 +39,6 @@ const graph = new Graph({
               { text: 'Notice', position: 'right-bottom' },
             ]
           : [],
-      badgeFontSize: 8,
-      badgePadding: [1, 4],
     },
   },
   layout: {
@@ -50,7 +48,7 @@ const graph = new Graph({
 
 graph.render();
 
-graph.on('afterrender', () => {
+graph.on(GraphEvent.AFTER_RENDER, () => {
   graph.setElementState('circle-active', 'active');
   graph.setElementState('circle-selected', 'selected');
   graph.setElementState('circle-highlight', 'highlight');

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
@@ -1,4 +1,4 @@
-import { Graph } from '@antv/g6';
+import { Graph, GraphEvent } from '@antv/g6';
 
 const data = {
   nodes: [
@@ -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(GraphEvent.AFTER_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');
+});
diff --git a/packages/site/examples/item/defaultNodes/demo/ellipse.ts b/packages/site/examples/item/defaultNodes/demo/ellipse.ts
@@ -1,4 +1,4 @@
-import { Graph } from '@antv/g6';
+import { Graph, GraphEvent } from '@antv/g6';
 
 const data = {
   nodes: [
@@ -39,8 +39,6 @@ const graph = new Graph({
               { text: 'Notice', position: 'right-bottom' },
             ]
           : [],
-      badgeFontSize: 8,
-      badgePadding: [1, 4],
     },
   },
   layout: {
@@ -50,7 +48,7 @@ const graph = new Graph({
 
 graph.render();
 
-graph.on('afterrender', () => {
+graph.on(GraphEvent.AFTER_RENDER, () => {
   graph.setElementState('ellipse-active', 'active');
   graph.setElementState('ellipse-selected', 'selected');
   graph.setElementState('ellipse-highlight', 'highlight');