From ddbdb320b0dad9e204bcb932dd929c1fcce79053 Mon Sep 17 00:00:00 2001 From: Yanyan-Wang Date: Wed, 6 Sep 2023 11:04:46 +0800 Subject: [PATCH] fix: path node anchor shapes and badge shapes --- packages/g6/src/stdlib/item/node/base.ts | 10 +- packages/g6/src/stdlib/item/node/diamond.ts | 2 +- packages/g6/src/stdlib/item/node/ellipse.ts | 4 +- packages/g6/src/stdlib/item/node/hexagon.ts | 8 +- packages/g6/src/stdlib/item/node/image.ts | 8 +- packages/g6/src/stdlib/theme/dark.ts | 68 ++++++- packages/g6/src/stdlib/theme/light.ts | 8 +- .../examples/item/defaultNodes/demo/circle.js | 40 ++--- .../item/defaultNodes/demo/diamond.js | 163 +++++++++++------ .../item/defaultNodes/demo/ellipse.js | 40 ++--- .../item/defaultNodes/demo/hexagon.js | 167 ++++++++++++------ .../examples/item/defaultNodes/demo/image.js | 3 + .../examples/item/defaultNodes/demo/meta.json | 46 +++-- .../item/defaultNodes/demo/radiusRect.js | 42 ++--- .../examples/item/defaultNodes/demo/rect.js | 40 ++--- .../examples/item/defaultNodes/demo/star.js | 162 +++++++++++------ 16 files changed, 496 insertions(+), 315 deletions(-) diff --git a/packages/g6/src/stdlib/item/node/base.ts b/packages/g6/src/stdlib/item/node/base.ts index 1deb59b823..3a367cbb87 100644 --- a/packages/g6/src/stdlib/item/node/base.ts +++ b/packages/g6/src/stdlib/item/node/base.ts @@ -579,8 +579,8 @@ export abstract class BaseNode { const keyShapeWidth = keyShapeBBox.max[0] - keyShapeBBox.min[0]; const keyShapeHeight = keyShapeBBox.max[1] - keyShapeBBox.min[1]; const defaultPosition: [number, number] = [ - keyShapeBBox.max[0], - keyShapeBBox.min[1], + keyShapeBBox.max[0] - keyShapeBBox.center[0], + keyShapeBBox.min[1] - keyShapeBBox.center[1], ]; //topRight if (position instanceof Array) { return [ @@ -755,8 +755,6 @@ export abstract class BaseNode { (text as string).length <= 1 ? bgHeight : Math.max(bgHeight, bbox.max[0] - bbox.min[0]) + 8; - let bgX = isLeft ? pos.x - bgWidth : pos.x; - if (isCenter) bgX = pos.x - bgWidth / 2; shapes[bgShapeId] = this.upsertShape( 'rect', bgShapeId, @@ -767,8 +765,8 @@ export abstract class BaseNode { width: bgWidth, radius: bgHeight / 2, zIndex, - x: bgX, - y: pos.y, + x: bbox.center[0] - bgWidth / 2, + y: bbox.center[1] - bgHeight / 2, ...otherStyles, } as GShapeStyle, shapeMap, diff --git a/packages/g6/src/stdlib/item/node/diamond.ts b/packages/g6/src/stdlib/item/node/diamond.ts index 0967503d1c..f141701679 100644 --- a/packages/g6/src/stdlib/item/node/diamond.ts +++ b/packages/g6/src/stdlib/item/node/diamond.ts @@ -12,7 +12,7 @@ type PathArray = any; //TODO: cannot import type PathArray export class DiamondNode extends BaseNode { override defaultStyles = { keyShape: { - size: [50, 30], + size: [32, 32], x: 0, y: 0, }, diff --git a/packages/g6/src/stdlib/item/node/ellipse.ts b/packages/g6/src/stdlib/item/node/ellipse.ts index eceb265d23..ade80cfadc 100644 --- a/packages/g6/src/stdlib/item/node/ellipse.ts +++ b/packages/g6/src/stdlib/item/node/ellipse.ts @@ -11,8 +11,8 @@ import { BaseNode } from './base'; export class EllipseNode extends BaseNode { override defaultStyles = { keyShape: { - rx: 30, - ry: 20, + rx: 16, + ry: 12, x: 0, y: 0, }, diff --git a/packages/g6/src/stdlib/item/node/hexagon.ts b/packages/g6/src/stdlib/item/node/hexagon.ts index e7112b4e38..ef2a12a438 100644 --- a/packages/g6/src/stdlib/item/node/hexagon.ts +++ b/packages/g6/src/stdlib/item/node/hexagon.ts @@ -17,10 +17,10 @@ const offsetAngleMap = { export class HexagonNode extends BaseNode { override defaultStyles = { keyShape: { - r: 20, + r: 16, x: 0, y: 0, - direction: 'horizontal', + direction: 'vertical', }, }; mergedStyles: NodeShapeStyles; @@ -167,6 +167,10 @@ export class HexagonNode extends BaseNode { const vy = r * Math.sin(angle); anchorPositionMap[anchorPositionDirection[i]] = [vx, vy]; } + if (!anchorPositionMap.hasOwnProperty('default')) { + anchorPositionMap['default'] = + anchorPositionMap[anchorPositionDirection[0]]; + } return anchorPositionMap; } } diff --git a/packages/g6/src/stdlib/item/node/image.ts b/packages/g6/src/stdlib/item/node/image.ts index 30bb540e56..a8a460fc80 100644 --- a/packages/g6/src/stdlib/item/node/image.ts +++ b/packages/g6/src/stdlib/item/node/image.ts @@ -46,12 +46,8 @@ export class ImageNode extends BaseNode { 'keyShape', { ...this.mergedStyles.keyShape, - x: - (this.mergedStyles.keyShape!.x as number) - - (this.mergedStyles.keyShape!.width as number) / 2, - y: - (this.mergedStyles.keyShape!.y as number) - - (this.mergedStyles.keyShape!.height as number) / 2, + x: this.mergedStyles.keyShape!.x, + y: this.mergedStyles.keyShape!.y, anchor: '0.5 0.5', }, shapeMap, diff --git a/packages/g6/src/stdlib/theme/dark.ts b/packages/g6/src/stdlib/theme/dark.ts index 1e5e30da1b..676e84f799 100644 --- a/packages/g6/src/stdlib/theme/dark.ts +++ b/packages/g6/src/stdlib/theme/dark.ts @@ -7,6 +7,7 @@ const textColor = 'rgba(255,255,255,0.85)'; const nodeColor = 'rgb(34,126,255)'; const edgeColor = 'rgb(153, 173, 209)'; const comboFill = 'rgb(253, 253, 253)'; +const comboStroke = 'rgba(153,173,209,1)'; const disabledFill = '#D0E4FF'; const edgeMainStroke = '#637088'; @@ -105,7 +106,7 @@ export const DarkTheme = { }, haloShape: { opacity: 0.45, - lineWidth: 20, + lineWidth: 12, zIndex: -1, pointerEvents: 'none', visible: true, @@ -118,7 +119,7 @@ export const DarkTheme = { }, haloShape: { opacity: 0.25, - lineWidth: 20, + lineWidth: 12, zIndex: -1, pointerEvents: 'none', visible: true, @@ -301,6 +302,23 @@ export const DarkTheme = { height: 10, padding: [25, 20, 15, 20], }, + labelShape: { + ...DEFAULT_TEXT_STYLE, + fill: textColor, + opacity: 0.85, + position: 'bottom', + zIndex: 2, + lod: 0, + maxLines: 1, + }, + labelBackgroundShape: { + padding: [2, 4, 2, 4], + lineWidth: 0, + fill: '#000', + opacity: 0.75, + zIndex: 1, + lod: 0, + }, }, selected: { keyShape: { @@ -311,12 +329,30 @@ export const DarkTheme = { labelShape: { fontWeight: 700, }, + haloShape: { + opacity: 0.25, + lineWidth: 12, + pointerEvents: 'none', + zIndex: -1, + visible: true, + stroke: comboStroke, + droppable: false, + }, }, active: { keyShape: { stroke: nodeStroke, lineWidth: 1, }, + haloShape: { + opacity: 0.25, + lineWidth: 12, + pointerEvents: 'none', + zIndex: -1, + visible: true, + stroke: comboStroke, + droppable: false, + }, }, highlight: { keyShape: { @@ -334,6 +370,9 @@ export const DarkTheme = { fill: comboFill, lineWidth: 1, }, + labelShape: { + opacity: 0.65, + }, }, disable: { keyShape: { @@ -344,6 +383,31 @@ export const DarkTheme = { fill: disabledFill, opacity: 0.25, }, + labelShape: { + opacity: 0.25, + }, + }, + collapsed: { + keyShape: { + ...DEFAULT_SHAPE_STYLE, + fill: comboFill, + lineWidth: 1, + stroke: comboStroke, + // the collapsed size + r: 16, + width: 48, + height: 24, + padding: [25, 20, 15, 20], + }, + iconShape: { + ...DEFAULT_TEXT_STYLE, + fill: comboStroke, + fontSize: 12, + zIndex: 1, + lod: -1, + contentType: 'childCount', + visible: true, + }, }, }, ], diff --git a/packages/g6/src/stdlib/theme/light.ts b/packages/g6/src/stdlib/theme/light.ts index de38f0977c..b26f9eac75 100644 --- a/packages/g6/src/stdlib/theme/light.ts +++ b/packages/g6/src/stdlib/theme/light.ts @@ -108,7 +108,7 @@ export const LightTheme = { }, haloShape: { opacity: 0.25, - lineWidth: 20, + lineWidth: 12, pointerEvents: 'none', zIndex: -1, visible: true, @@ -121,7 +121,7 @@ export const LightTheme = { }, haloShape: { opacity: 0.25, - lineWidth: 20, + lineWidth: 12, pointerEvents: 'none', zIndex: -1, visible: true, @@ -328,7 +328,7 @@ export const LightTheme = { }, haloShape: { opacity: 0.25, - lineWidth: 20, + lineWidth: 12, pointerEvents: 'none', zIndex: -1, visible: true, @@ -343,7 +343,7 @@ export const LightTheme = { }, haloShape: { opacity: 0.25, - lineWidth: 20, + lineWidth: 12, pointerEvents: 'none', zIndex: -1, visible: true, diff --git a/packages/site/examples/item/defaultNodes/demo/circle.js b/packages/site/examples/item/defaultNodes/demo/circle.js index bcd7768301..fca44eabd5 100644 --- a/packages/site/examples/item/defaultNodes/demo/circle.js +++ b/packages/site/examples/item/defaultNodes/demo/circle.js @@ -3,54 +3,33 @@ import G6 from '@antv/g6'; const data = { nodes: [ { - id: 'node1', - data: { - x: 250, - y: 150, - }, + id: 'circle', + data: {}, }, { id: 'circle-active', - data: { - x: 250, - y: 300, - }, + data: {}, }, { id: 'circle-selected', - data: { - x: 250, - y: 450, - }, + data: {}, }, { id: 'circle-highlight', - data: { - x: 400, - y: 150, - }, + data: {}, }, { id: 'circle-inactive', - data: { - x: 400, - y: 300, - }, + data: {}, }, { id: 'circle-badges', - data: { - x: 400, - y: 450, - }, + data: {}, }, { id: 'circle-anchorShapes', - data: { - x: 550, - y: 150, - }, + data: {}, }, ], }; @@ -66,6 +45,9 @@ const graph = new G6.Graph({ default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], }, data, + layout: { + type: 'grid', + }, node: (model) => { const { id, data } = model; const config = { diff --git a/packages/site/examples/item/defaultNodes/demo/diamond.js b/packages/site/examples/item/defaultNodes/demo/diamond.js index 04a2491005..94be5925cb 100644 --- a/packages/site/examples/item/defaultNodes/demo/diamond.js +++ b/packages/site/examples/item/defaultNodes/demo/diamond.js @@ -1,13 +1,40 @@ import { Graph, Extensions, extend } from '@antv/g6'; +const ExtGraph = extend(Graph, { + nodes: { + 'diamond-node': Extensions.DiamondNode, + }, +}); const data = { nodes: [ { id: 'diamond', - data: { - x: 250, - y: 150, - }, + 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: {}, }, ], }; @@ -15,13 +42,6 @@ const data = { const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; - -const ExtGraph = extend(Graph, { - nodes: { - 'diamond-node': Extensions.DiamondNode, - }, -}); - const graph = new ExtGraph({ container: 'container', width, @@ -30,53 +50,82 @@ const graph = new ExtGraph({ default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], }, data, - node: { - type: 'diamond-node', - labelShape: { - text: { - fields: ['id'], - formatter: (model) => model.id, - }, - position: 'bottom', - }, - labelBackgroundShape: {}, - anchorShapes: [ - { - position: [0, 0.5], - }, - { - position: [0.5, 0], - }, - { - position: [0.5, 1], - }, - ], - iconShape: { - img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - width: 20, - height: 20, - }, - badgeShapes: [ - { - text: 'A', - position: 'rightTop', - }, - ], - animates: { - update: [ - { - fields: ['opacity'], - shapeId: 'haloShape', - states: ['selected', 'active'], - }, - { - fields: ['lineWidth'], - shapeId: 'keyShape', - states: ['selected', 'active'], - }, - ], - }, + 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); }); if (typeof window !== 'undefined') diff --git a/packages/site/examples/item/defaultNodes/demo/ellipse.js b/packages/site/examples/item/defaultNodes/demo/ellipse.js index b65fbfb4d5..98835143c2 100644 --- a/packages/site/examples/item/defaultNodes/demo/ellipse.js +++ b/packages/site/examples/item/defaultNodes/demo/ellipse.js @@ -9,54 +9,33 @@ const ExtGraph = extend(Graph, { const data = { nodes: [ { - id: 'node1', - data: { - x: 250, - y: 150, - }, + id: 'ellipse', + data: {}, }, { id: 'ellipse-active', - data: { - x: 250, - y: 300, - }, + data: {}, }, { id: 'ellipse-selected', - data: { - x: 250, - y: 450, - }, + data: {}, }, { id: 'ellipse-highlight', - data: { - x: 400, - y: 150, - }, + data: {}, }, { id: 'ellipse-inactive', - data: { - x: 400, - y: 300, - }, + data: {}, }, { id: 'ellipse-badges', - data: { - x: 400, - y: 450, - }, + data: {}, }, { id: 'ellipse-anchorShapes', - data: { - x: 550, - y: 150, - }, + data: {}, }, ], }; @@ -72,6 +51,9 @@ const graph = new ExtGraph({ default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], }, data, + layout: { + type: 'grid', + }, node: (model) => { const { id, data } = model; const config = { diff --git a/packages/site/examples/item/defaultNodes/demo/hexagon.js b/packages/site/examples/item/defaultNodes/demo/hexagon.js index 483ea4000d..c6067e57d4 100644 --- a/packages/site/examples/item/defaultNodes/demo/hexagon.js +++ b/packages/site/examples/item/defaultNodes/demo/hexagon.js @@ -1,27 +1,40 @@ import { Graph, Extensions, extend } from '@antv/g6'; +const ExtGraph = extend(Graph, { + nodes: { + 'hexagon-node': Extensions.HexagonNode, + }, +}); const data = { nodes: [ { id: 'hexagon', - data: { - x: 250, - y: 150, - type: 'hexagon-node', - keyShape: { - /** - * 六边形的半径，默认为 20 - * the radius of the hexagon, default is 20 - */ - r: 20, - /** - * 六边形方向，默认为 horizontal - * the direction of the hexagon, default is 'horizontal' - * supported value: 'horizontal' | 'vertical' - */ - direction: 'horizontal', - }, - }, + data: {}, + }, + { + id: 'hexagon-active', + data: {}, + }, + { + id: 'hexagon-selected', + data: {}, + }, + + { + id: 'hexagon-highlight', + data: {}, + }, + { + id: 'hexagon-inactive', + data: {}, + }, + { + id: 'hexagon-badges', + data: {}, + }, + { + id: 'hexagon-anchorShapes', + data: {}, }, ], }; @@ -29,13 +42,6 @@ const data = { const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; - -const ExtGraph = extend(Graph, { - nodes: { - 'hexagon-node': Extensions.HexagonNode, - }, -}); - const graph = new ExtGraph({ container: 'container', width, @@ -44,37 +50,88 @@ const graph = new ExtGraph({ default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], }, data, - node: { - labelShape: { - text: { - fields: ['id'], - formatter: (model) => model.id, - }, - position: 'bottom', - }, - labelBackgroundShape: { - fill: 'red', - }, - anchorShapes: [ - { - position: [0, 0.5], - r: 2, - fill: 'red', - }, - ], - iconShape: { - img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - width: 20, - height: 20, - }, - badgeShapes: [ - { - text: '1', - position: 'rightTop', - color: 'blue', - }, - ], + layout: { + type: 'grid', }, + node: (model) => { + const { id, data } = model; + const config = { + id, + data: { + ...data, + type: 'hexagon-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: 'top', + }, + { + position: 'rightTop', + }, + { + position: 'leftTop', + }, + { + position: 'rightBottom', + }, + { + position: 'leftBottom', + }, + { + position: 'bottom', + }, + ]; + } + return config; + }, +}); + +graph.on('afterrender', (e) => { + graph.setItemState('hexagon-active', 'active', true); + graph.setItemState('hexagon-selected', 'selected', true); + graph.setItemState('hexagon-highlight', 'highlight', true); + graph.setItemState('hexagon-inactive', 'inactive', true); }); if (typeof window !== 'undefined') diff --git a/packages/site/examples/item/defaultNodes/demo/image.js b/packages/site/examples/item/defaultNodes/demo/image.js index f6cf5a63d8..864ffbe8a2 100644 --- a/packages/site/examples/item/defaultNodes/demo/image.js +++ b/packages/site/examples/item/defaultNodes/demo/image.js @@ -66,6 +66,9 @@ const graph = new G6.Graph({ default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], }, data, + layout: { + type: 'grid', + }, node: (model) => { const { id, data } = model; const config = { diff --git a/packages/site/examples/item/defaultNodes/demo/meta.json b/packages/site/examples/item/defaultNodes/demo/meta.json index 2657b78cc0..b6eaac7ba7 100644 --- a/packages/site/examples/item/defaultNodes/demo/meta.json +++ b/packages/site/examples/item/defaultNodes/demo/meta.json @@ -10,7 +10,7 @@ "zh": "圆形", "en": "Circle" }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hdvGT4kEmOAAAAAAAAAAAAAADmJ7AQ/original" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*SuPdRLp1PQgAAAAAAAAAAAAADmJ7AQ/original" }, { "filename": "donut.js", @@ -20,21 +20,13 @@ }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*c5f5Q7XuOWoAAAAAAAAAAAAADmJ7AQ/original" }, - { - "filename": "ellipse.js", - "title": { - "zh": "椭圆", - "en": "Ellipse" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*S9gxRJiRMEkAAAAAAAAAAAAADmJ7AQ/original" - }, { "filename": "rect.js", "title": { "zh": "矩形", "en": "Rect" }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VGpITb2jm7IAAAAAAAAAAAAADmJ7AQ/original" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*etLSQYZnJAAAAAAAAAAAAAAADmJ7AQ/original" }, { "filename": "radiusRect.js", @@ -42,7 +34,23 @@ "zh": "圆角矩形", "en": "Radius Rect" }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*R45pQLK7pgYAAAAAAAAAAAAADmJ7AQ/original" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*r03cSIy59-UAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "diamond.js", + "title": { + "zh": "菱形", + "en": "Diamond" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*oUSlSZt6rCoAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "hexagon.js", + "title": { + "zh": "六边形", + "en": "Hexagon" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*muosSr4ft8QAAAAAAAAAAAAADmJ7AQ/original" }, { "filename": "image.js", @@ -52,6 +60,22 @@ }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NPG3SL_n-CYAAAAAAAAAAAAADmJ7AQ/original" }, + { + "filename": "ellipse.js", + "title": { + "zh": "椭圆", + "en": "Ellipse" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Vdq4Rb3ESOoAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "star.js", + "title": { + "zh": "星形", + "en": "Star" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*YSVjSLyYNwIAAAAAAAAAAAAADmJ7AQ/original" + }, { "filename": "modelRect.js", "title": { diff --git a/packages/site/examples/item/defaultNodes/demo/radiusRect.js b/packages/site/examples/item/defaultNodes/demo/radiusRect.js index ddc35c3dc2..cb863fd1bc 100644 --- a/packages/site/examples/item/defaultNodes/demo/radiusRect.js +++ b/packages/site/examples/item/defaultNodes/demo/radiusRect.js @@ -3,54 +3,33 @@ import G6 from '@antv/g6'; const data = { nodes: [ { - id: 'node1', - data: { - x: 250, - y: 150, - }, + id: 'rect', + data: {}, }, { id: 'rect-active', - data: { - x: 250, - y: 300, - }, + data: {}, }, { id: 'rect-selected', - data: { - x: 250, - y: 450, - }, + data: {}, }, { id: 'rect-highlight', - data: { - x: 400, - y: 150, - }, + data: {}, }, { id: 'rect-inactive', - data: { - x: 400, - y: 300, - }, + data: {}, }, { id: 'rect-badges', - data: { - x: 400, - y: 450, - }, + data: {}, }, { id: 'rect-anchorShapes', - data: { - x: 550, - y: 150, - }, + data: {}, }, ], }; @@ -66,6 +45,9 @@ const graph = new G6.Graph({ default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], }, data, + layout: { + type: 'grid', + }, node: (model) => { const { id, data } = model; const config = { @@ -74,7 +56,7 @@ const graph = new G6.Graph({ ...data, type: 'rect-node', keyShape: { - radius: 10, + radius: 4, }, labelShape: { text: 'label', diff --git a/packages/site/examples/item/defaultNodes/demo/rect.js b/packages/site/examples/item/defaultNodes/demo/rect.js index ebecabfe46..1307af00b8 100644 --- a/packages/site/examples/item/defaultNodes/demo/rect.js +++ b/packages/site/examples/item/defaultNodes/demo/rect.js @@ -3,54 +3,33 @@ import G6 from '@antv/g6'; const data = { nodes: [ { - id: 'node1', - data: { - x: 250, - y: 150, - }, + id: 'rect', + data: {}, }, { id: 'rect-active', - data: { - x: 250, - y: 300, - }, + data: {}, }, { id: 'rect-selected', - data: { - x: 250, - y: 450, - }, + data: {}, }, { id: 'rect-highlight', - data: { - x: 400, - y: 150, - }, + data: {}, }, { id: 'rect-inactive', - data: { - x: 400, - y: 300, - }, + data: {}, }, { id: 'rect-badges', - data: { - x: 400, - y: 450, - }, + data: {}, }, { id: 'rect-anchorShapes', - data: { - x: 550, - y: 150, - }, + data: {}, }, ], }; @@ -66,6 +45,9 @@ const graph = new G6.Graph({ default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], }, data, + layout: { + type: 'grid', + }, node: (model) => { const { id, data } = model; const config = { diff --git a/packages/site/examples/item/defaultNodes/demo/star.js b/packages/site/examples/item/defaultNodes/demo/star.js index b9ef91893c..27bef38d85 100644 --- a/packages/site/examples/item/defaultNodes/demo/star.js +++ b/packages/site/examples/item/defaultNodes/demo/star.js @@ -1,26 +1,40 @@ import { Graph, Extensions, extend } from '@antv/g6'; +const ExtGraph = extend(Graph, { + nodes: { + 'star-node': Extensions.StarNode, + }, +}); const data = { nodes: [ { - id: 'node1', - data: { - x: 250, - y: 150, - type: 'star-node', - keyShape: { - /** - * 星形的外部半径，默认为 20 - * outer radius of the star，默认为 20 - */ - // outerR: 20, - /** - * 星形的内部半径，默认为 7.5 - * inner radius of the star，默认为 7.5 - */ - // innerR: 7.5 - }, - }, + id: 'star', + data: {}, + }, + { + id: 'star-active', + data: {}, + }, + { + id: 'star-selected', + data: {}, + }, + + { + id: 'star-highlight', + data: {}, + }, + { + id: 'star-inactive', + data: {}, + }, + { + id: 'star-badges', + data: {}, + }, + { + id: 'star-anchorShapes', + data: {}, }, ], }; @@ -28,13 +42,6 @@ const data = { const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; - -const ExtGraph = extend(Graph, { - nodes: { - 'star-node': Extensions.StarNode, - }, -}); - const graph = new ExtGraph({ container: 'container', width, @@ -43,34 +50,85 @@ const graph = new ExtGraph({ default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], }, data, - node: { - labelShape: { - text: 'label', - position: 'bottom', - }, - labelBackgroundShape: { - fill: 'red', - }, - anchorShapes: [ - { - position: [0, 0.5], - r: 2, - fill: 'red', - }, - ], - iconShape: { - img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - width: 20, - height: 20, - }, - badgeShapes: [ - { - text: '1', - position: 'rightTop', - color: 'blue', - }, - ], + layout: { + type: 'grid', }, + node: (model) => { + const { id, data } = model; + const config = { + id, + data: { + ...data, + type: 'star-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: 'top', + }, + { + position: 'right', + }, + { + position: 'left', + }, + { + position: 'leftBottom', + }, + { + position: 'rightBottom', + }, + ]; + } + return config; + }, +}); + +graph.on('afterrender', (e) => { + graph.setItemState('star-active', 'active', true); + graph.setItemState('star-selected', 'selected', true); + graph.setItemState('star-highlight', 'highlight', true); + graph.setItemState('star-inactive', 'inactive', true); }); if (typeof window !== 'undefined')