From 5a3e6c9e6001c82e5880d8e5c4b7808f79c01652 Mon Sep 17 00:00:00 2001 From: hustcc Date: Thu, 7 Mar 2024 17:01:11 +0800 Subject: [PATCH] docs: add diamond, image demo (#5501) * docs: add diamond, image demo * chore: fix code review --- packages/g6/src/themes/dark.ts | 2 + packages/g6/src/themes/light.ts | 2 + .../examples/item/defaultNodes/demo/circle.ts | 6 +- .../item/defaultNodes/demo/diamond.js | 138 ---------------- .../item/defaultNodes/demo/diamond.ts | 31 ++-- .../item/defaultNodes/demo/ellipse.ts | 6 +- .../examples/item/defaultNodes/demo/image.js | 155 ------------------ .../examples/item/defaultNodes/demo/image.ts | 60 +++++++ .../examples/item/defaultNodes/demo/meta.json | 4 +- .../item/defaultNodes/demo/radiusRect.ts | 6 +- .../examples/item/defaultNodes/demo/rect.ts | 6 +- .../examples/item/defaultNodes/demo/star.ts | 6 +- .../item/defaultNodes/demo/triangle.ts | 6 +- 13 files changed, 94 insertions(+), 334 deletions(-) delete mode 100644 packages/site/examples/item/defaultNodes/demo/diamond.js delete mode 100644 packages/site/examples/item/defaultNodes/demo/image.js create mode 100644 packages/site/examples/item/defaultNodes/demo/image.ts diff --git a/packages/g6/src/themes/dark.ts b/packages/g6/src/themes/dark.ts index 78596495f67..daa73d58a47 100644 --- 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 index 4d728bc2d2e..b1529f32bb5 100644 --- 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 index 10541f3d76c..a8a1261d21e 100644 --- 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 deleted file mode 100644 index 4f1374039b8..00000000000 --- a/packages/site/examples/item/defaultNodes/demo/diamond.js +++ /dev/null @@ -1,138 +0,0 @@ -import { Graph, Extensions, extend } from '@antv/g6'; -const ExtGraph = extend(Graph, { - nodes: { - 'diamond-node': Extensions.DiamondNode, - }, -}); - -const data = { - nodes: [ - { - id: 'diamond', - data: {}, - }, - { - id: 'diamond-active', - data: {}, - }, - { - id: 'diamond-selected', - data: {}, - }, - - { - id: 'diamond-highlight', - data: {}, - }, - { - id: 'diamond-inactive', - data: {}, - }, - { - id: 'diamond-badges', - data: {}, - }, - { - id: 'diamond-anchorShapes', - data: {}, - }, - ], -}; - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; -const graph = new ExtGraph({ - 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, - layout: { - type: 'grid', - }, - node: (model) => { - const { id, data } = model; - const config = { - id, - data: { - ...data, - type: 'diamond-node', - labelShape: { - text: id, - position: 'bottom', - maxWidth: '500%', - }, - labelBackgroundShape: {}, - iconShape: { - img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - }, - animates: { - update: [ - { - fields: ['opacity'], - shapeId: 'haloShape', - states: ['selected', 'active'], - }, - { - fields: ['lineWidth'], - shapeId: 'keyShape', - states: ['selected', 'active'], - }, - ], - }, - }, - }; - if (id.includes('badges')) { - config.data.badgeShapes = [ - { - text: 'A', - position: 'rightTop', - }, - { - text: 'Important', - position: 'right', - }, - { - text: 'Notice', - position: 'rightBottom', - }, - ]; - } - if (id.includes('anchorShapes')) { - config.data.anchorShapes = [ - { - position: [0, 0.5], - }, - { - position: [0.5, 0], - }, - { - position: [0.5, 1], - }, - { - position: [1, 0.5], - }, - ]; - } - return config; - }, -}); - -graph.on('afterrender', (e) => { - graph.setItemState('diamond-active', 'active', true); - graph.setItemState('diamond-selected', 'selected', true); - graph.setItemState('diamond-highlight', 'highlight', true); - graph.setItemState('diamond-inactive', 'inactive', true); -}); - -window.graph = graph; \ No newline at end of file diff --git a/packages/site/examples/item/defaultNodes/demo/diamond.ts b/packages/site/examples/item/defaultNodes/demo/diamond.ts index 8e4abfbc51a..aadade2df79 100644 --- 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,19 +20,18 @@ 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' }, @@ -40,17 +39,19 @@ const graph = new Graph({ { 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 index d657b6ca396..dfbe0710ab3 100644 --- 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'); diff --git a/packages/site/examples/item/defaultNodes/demo/image.js b/packages/site/examples/item/defaultNodes/demo/image.js deleted file mode 100644 index 28e9039fa3a..00000000000 --- a/packages/site/examples/item/defaultNodes/demo/image.js +++ /dev/null @@ -1,155 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: 'node1', - data: { - x: 250, - y: 150, - }, - }, - { - id: 'image-active', - data: { - x: 250, - y: 300, - }, - }, - { - id: 'image-selected', - data: { - x: 250, - y: 450, - }, - }, - - { - id: 'image-highlight', - data: { - x: 400, - y: 150, - }, - }, - { - id: 'image-inactive', - data: { - x: 400, - y: 300, - }, - }, - { - id: 'image-badges', - data: { - x: 400, - y: 450, - }, - }, - { - id: 'image-anchorShapes', - data: { - x: 550, - y: 150, - }, - }, - ], -}; - -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, - layout: { - type: 'grid', - }, - node: (model) => { - const { id, data } = model; - const config = { - id, - data: { - ...data, - type: 'image-node', - keyShape: { - src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ', - }, - labelShape: { - text: id, - position: 'bottom', - maxWidth: '500%', - }, - labelBackgroundShape: {}, - haloShape: {}, - animates: { - update: [ - { - fields: ['opacity'], - shapeId: 'haloShape', - states: ['selected', 'active'], - }, - { - fields: ['lineWidth'], - shapeId: 'keyShape', - states: ['selected', 'active'], - }, - ], - }, - }, - }; - if (id.includes('badges')) { - config.data.badgeShapes = [ - { - text: 'A', - position: 'rightTop', - }, - { - text: 'Important', - position: 'right', - }, - { - text: 'Notice', - position: 'rightBottom', - }, - ]; - } - if (id.includes('anchorShapes')) { - config.data.anchorShapes = [ - { - position: [0, 0.5], - }, - { - position: [0.5, 0], - }, - { - position: [0.5, 1], - }, - { - position: [1, 0.5], - }, - ]; - } - return config; - }, -}); - -graph.on('afterrender', (e) => { - graph.setItemState('image-active', 'active', true); - graph.setItemState('image-selected', 'selected', true); - graph.setItemState('image-highlight', 'highlight', true); - graph.setItemState('image-inactive', 'inactive', true); -}); - -window.graph = graph; diff --git a/packages/site/examples/item/defaultNodes/demo/image.ts b/packages/site/examples/item/defaultNodes/demo/image.ts new file mode 100644 index 00000000000..87c89989c33 --- /dev/null +++ b/packages/site/examples/item/defaultNodes/demo/image.ts @@ -0,0 +1,60 @@ +import { Graph, GraphEvent } from '@antv/g6'; + +const data = { + nodes: [ + { id: 'image' }, + { id: 'image-halo' }, + { id: 'image-badges' }, + { id: 'image-ports' }, + { id: 'image-active' }, + { id: 'image-selected' }, + { id: 'image-highlight' }, + { id: 'image-inactive' }, + { id: 'image-disabled' }, + ], +}; + +const graph = new Graph({ + container: 'container', + data, + node: { + style: { + type: 'image', + src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ', + size: 40, + labelMaxWidth: 120, + labelText: (d) => d.id, + halo: (d) => d.id.includes('halo'), + ports: (d) => + d.id.includes('ports') + ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }] + : [], + badges: (d) => + d.id.includes('badges') + ? [ + { text: 'A', position: 'right-top' }, + { text: 'Important', position: 'right' }, + { text: 'Notice', position: 'right-bottom' }, + ] + : [], + }, + state: { + disabled: { + opacity: 0.25, + }, + }, + }, + layout: { + type: 'grid', + }, +}); + +graph.render(); + +graph.on(GraphEvent.AFTER_RENDER, () => { + graph.setElementState('image-active', 'active'); + graph.setElementState('image-selected', 'selected'); + graph.setElementState('image-highlight', 'highlight'); + graph.setElementState('image-inactive', 'inactive'); + graph.setElementState('image-disabled', 'disabled'); +}); diff --git a/packages/site/examples/item/defaultNodes/demo/meta.json b/packages/site/examples/item/defaultNodes/demo/meta.json index 1b9d58f0c76..aee9554eab6 100644 --- a/packages/site/examples/item/defaultNodes/demo/meta.json +++ b/packages/site/examples/item/defaultNodes/demo/meta.json @@ -29,7 +29,7 @@ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*r03cSIy59-UAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "diamond.js", + "filename": "diamond.ts", "title": { "zh": "菱形", "en": "Diamond" @@ -53,7 +53,7 @@ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BW_sSbWVQowAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "image.js", + "filename": "image.ts", "title": { "zh": "图片", "en": "Image" diff --git a/packages/site/examples/item/defaultNodes/demo/radiusRect.ts b/packages/site/examples/item/defaultNodes/demo/radiusRect.ts index aba597457fd..a526b44993a 100644 --- a/packages/site/examples/item/defaultNodes/demo/radiusRect.ts +++ b/packages/site/examples/item/defaultNodes/demo/radiusRect.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('rect-active', 'active'); graph.setElementState('rect-selected', 'selected'); graph.setElementState('rect-highlight', 'highlight'); diff --git a/packages/site/examples/item/defaultNodes/demo/rect.ts b/packages/site/examples/item/defaultNodes/demo/rect.ts index 6bd6f5d6d83..e7fd2074098 100644 --- a/packages/site/examples/item/defaultNodes/demo/rect.ts +++ b/packages/site/examples/item/defaultNodes/demo/rect.ts @@ -1,4 +1,4 @@ -import { Graph } from '@antv/g6'; +import { Graph, GraphEvent } from '@antv/g6'; const data = { nodes: [ @@ -38,8 +38,6 @@ const graph = new Graph({ { text: 'Notice', position: 'right-bottom' }, ] : [], - badgeFontSize: 8, - badgePadding: [1, 4], }, }, layout: { @@ -49,7 +47,7 @@ const graph = new Graph({ graph.render(); -graph.on('afterrender', () => { +graph.on(GraphEvent.AFTER_RENDER, () => { graph.setElementState('rect-active', 'active'); graph.setElementState('rect-selected', 'selected'); graph.setElementState('rect-highlight', 'highlight'); diff --git a/packages/site/examples/item/defaultNodes/demo/star.ts b/packages/site/examples/item/defaultNodes/demo/star.ts index 597d987b5cc..3f45b7e8bd9 100644 --- a/packages/site/examples/item/defaultNodes/demo/star.ts +++ b/packages/site/examples/item/defaultNodes/demo/star.ts @@ -1,4 +1,4 @@ -import { Graph } from '@antv/g6'; +import { Graph, GraphEvent } from '@antv/g6'; const data = { nodes: [ @@ -36,8 +36,6 @@ const graph = new Graph({ { text: 'Notice', position: 'right-bottom' }, ] : [], - badgeFontSize: 8, - badgePadding: [1, 4], }, }, layout: { @@ -47,7 +45,7 @@ const graph = new Graph({ graph.render(); -graph.on('afterrender', () => { +graph.on(GraphEvent.AFTER_RENDER, () => { graph.setElementState('star-active', 'active'); graph.setElementState('star-selected', 'selected'); graph.setElementState('star-highlight', 'highlight'); diff --git a/packages/site/examples/item/defaultNodes/demo/triangle.ts b/packages/site/examples/item/defaultNodes/demo/triangle.ts index 8bfca311d1c..5fea84a1b6d 100644 --- a/packages/site/examples/item/defaultNodes/demo/triangle.ts +++ b/packages/site/examples/item/defaultNodes/demo/triangle.ts @@ -1,4 +1,4 @@ -import { Graph } from '@antv/g6'; +import { Graph, GraphEvent } from '@antv/g6'; const data = { nodes: [ @@ -34,8 +34,6 @@ const graph = new Graph({ { text: 'Notice', position: 'right-bottom' }, ] : [], - badgeFontSize: 8, - badgePadding: [1, 4], }, }, layout: { @@ -45,7 +43,7 @@ const graph = new Graph({ graph.render(); -graph.on('afterrender', () => { +graph.on(GraphEvent.AFTER_RENDER, () => { graph.setElementState('triangle-active', 'active'); graph.setElementState('triangle-selected', 'selected'); graph.setElementState('triangle-highlight', 'highlight');