test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-02 19:58:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix: path node anchor shapes and badge shapes

Browse Source
This commit is contained in:
Yanyan-Wang 2023-09-06 11:04:46 +08:00
parent bf12667b3e
commit ddbdb320b0
16 changed files with 496 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/g6/src/stdlib/item/node/base.ts
View File

@ -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,

2
packages/g6/src/stdlib/item/node/diamond.ts
View File

@ -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,
},

4
packages/g6/src/stdlib/item/node/ellipse.ts
View File

@ -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,
},

8
packages/g6/src/stdlib/item/node/hexagon.ts
View File

@ -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;
}
}

8
packages/g6/src/stdlib/item/node/image.ts
View File

@ -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,

68
packages/g6/src/stdlib/theme/dark.ts
View File

@ -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,
},
},
},
],

8
packages/g6/src/stdlib/theme/light.ts
View File

@ -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,

40
packages/site/examples/item/defaultNodes/demo/circle.js
View File

@ -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 = {

163
packages/site/examples/item/defaultNodes/demo/diamond.js
View File

@ -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')

40
packages/site/examples/item/defaultNodes/demo/ellipse.js
View File

@ -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 = {

167
packages/site/examples/item/defaultNodes/demo/hexagon.js
View File

@ -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')

3
packages/site/examples/item/defaultNodes/demo/image.js
View File

@ -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 = {

46
packages/site/examples/item/defaultNodes/demo/meta.json
View File

@ -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": {

42
packages/site/examples/item/defaultNodes/demo/radiusRect.js
View File

@ -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',

40
packages/site/examples/item/defaultNodes/demo/rect.js
View File

@ -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 = {

162
packages/site/examples/item/defaultNodes/demo/star.js
View File

@ -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')