test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-04 20:59:15 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

添加内置节点

Browse Source
This commit is contained in:
zhanning.bzn 2019-09-18 17:45:57 +08:00
parent 8ce96418a9
commit f25902510e
7 changed files with 453 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
demos/defaultNodes.html
View File

@ -23,7 +23,10 @@
}
});
G6.registerNode('circleIconSelf', {
/*
* 扩展circle
*/
G6.registerNode('circleIcon', {
getCustomConfig() {
return {
default: {
@ -31,6 +34,7 @@
stroke: '#87e8de',
r: 30,
icon: {
show: true,
width: 25,
height: 25
},
@ -40,12 +44,22 @@
},
offset: 15
},
linkPoints: {
top: true,
bottom: true,
// circle的大小
size: 5,
lineWidth: 1,
fill: '#fff',
stroke: '#72CC4A'
},
}
}
}
}, 'circleIcon')
}, 'circle')
G6.registerNode('shadowCircle', {
labelPosition: 'center',
getCustomConfig() {
return {
default: {
@ -54,13 +68,15 @@
shadowBlur: 10,
shadowColor: '#e6f7ff',
lineWidth: 5,
icon: {
show: false
labelCfg: {
style: {
fill: '#fff'
}
}
}
}
}
}, 'circleIcon')
}, 'circle')
G6.registerNode('stateCircle', {
getStateStyle(name, value, item) {
@ -70,15 +86,17 @@
lineWidth: 5
}
}
}, 'circleIcon')
}, 'circle')
/*
* 扩展rect
*/
G6.registerNode('rectAnchor1', {
getCustomConfig() {
return {
default: {
radius: 2,
width: 80,
height: 48,
width: 200,
radius: 15,
stroke: '#9254de',
labelCfg: {
style: {
@ -98,12 +116,13 @@
}
}
}
}, 'rectAnchor')
}, 'rect')
G6.registerNode('rectAnchor2', {
getCustomConfig() {
return {
default: {
width: 200,
stroke: '#ff85c0',
labelCfg: {
style: {
@ -123,12 +142,13 @@
}
}
}
}, 'rectAnchor')
}, 'rect')
G6.registerNode('rectAnchor3', {
getCustomConfig() {
return {
default: {
width: 200,
radius: 25,
stroke: '#ff7875',
labelCfg: {
@ -150,12 +170,13 @@
}
}
}
}, 'rectAnchor')
}, 'rect')
G6.registerNode('rectAnchor4', {
getCustomConfig() {
return {
default: {
width: 200,
radius: 25,
stroke: '#36cfc9',
labelCfg: {
@ -177,7 +198,7 @@
}
}
}
}, 'rectAnchor')
}, 'rect')
G6.registerNode('rectAnchor5', {
getCustomConfig() {
@ -204,7 +225,101 @@
}
}
}
}, 'rectAnchor')
}, 'rect')
/*
* 扩展rect
*/
G6.registerNode('ellipse1', {
labelPosition: 'center',
getCustomConfig() {
return {
default: {
rx: 60,
ry: 30,
fill: '#bae637',
stroke: '#eaff8f',
icon: {
show: false
},
labelCfg: {
style: {
fontSize: 16
}
},
linkPoints: {
top: true,
right: false,
bottom: true,
left: false,
// circle的大小
lineWidth: 2,
stroke: '#72CC4A'
}
}
}
}
}, 'ellipse');
G6.registerNode('ellipse2', {
labelPosition: 'center',
getCustomConfig() {
return {
default: {
rx: 30,
ry: 60,
fill: '#bae637',
stroke: '#eaff8f',
icon: {
show: false
},
labelCfg: {
style: {
fill: '#fff'
}
},
linkPoints: {
right: true,
left: true,
// circle的大小
size: 5,
lineWidth: 2,
fill: '#fff',
stroke: '#72CC4A'
},
}
}
}
}, 'ellipse');
G6.registerNode('ellipse3', {
labelPosition: 'center',
getCustomConfig() {
return {
default: {
rx: 60,
ry: 30,
fill: '#36cfc9',
stroke: '#87e8de',
icon: {
show: true
},
linkPoints: {
right: true,
left: true,
// circle的大小
size: 5,
lineWidth: 2,
fill: '#fff',
stroke: '#72CC4A'
}
}
}
}
}, 'ellipse');
const data = {
nodes: [
{
@ -212,14 +327,14 @@
label: 'node1',
x: 100,
y: 100,
shape: 'circleIcon'
shape: 'circle'
},
{
id: 'node2',
label: 'node2',
x: 200,
y: 100,
shape: 'circleIconSelf'
shape: 'circleIcon'
},
{
id: 'node3',
@ -233,7 +348,7 @@
label: 'node4',
x: 150,
y: 300,
shape: 'rectAnchor'
shape: 'rect'
},
{
id: 'node5',
@ -269,6 +384,33 @@
x: 610,
y: 400,
shape: 'rectAnchor5'
},
{
id: 'node10',
label: 'node10',
x: 150,
y: 500,
shape: 'ellipse'
},
{
id: 'node11',
label: 'node11',
x: 350,
y: 500,
shape: 'ellipse1'
},
{
id: 'node12',
label: 'node12',
x: 500,
y: 500,
shape: 'ellipse2'
},
{
id: 'node13',
x: 650,
y: 500,
shape: 'ellipse3'
}
]
}

96
src/shape/node.js
View File

@ -98,62 +98,62 @@ Shape.registerNode('single-shape', singleNodeDefinition);
/**
* 基本的圆，可以添加文本，默认文本居中
*/
Shape.registerNode('circle', {
shapeType: 'circle',
getShapeStyle(cfg) {
const size = this.getSize(cfg);
const color = cfg.color || Global.defaultNode.color;
const style = Util.mix({}, {
x: 0, // 节点的位置在上层确定，所以这里仅使用相对位置即可
y: 0,
r: size[0] / 2, // size 一般可以提供宽高信息
stroke: color
}, Global.defaultNode.style, cfg.style);
return style;
}
}, 'single-shape');
// Shape.registerNode('circle', {
// shapeType: 'circle',
// getShapeStyle(cfg) {
// const size = this.getSize(cfg);
// const color = cfg.color || Global.defaultNode.color;
// const style = Util.mix({}, {
// x: 0, // 节点的位置在上层确定，所以这里仅使用相对位置即可
// y: 0,
// r: size[0] / 2, // size 一般可以提供宽高信息
// stroke: color
// }, Global.defaultNode.style, cfg.style);
// return style;
// }
// }, 'single-shape');
/**
* 基本的椭圆，可以添加文本，默认文本居中
*/
Shape.registerNode('ellipse', {
shapeType: 'ellipse',
getShapeStyle(cfg) {
const size = this.getSize(cfg);
const rx = size[0] / 2;
const ry = size[1] / 2;
const color = cfg.color || Global.defaultNode.color;
const style = Util.mix({}, {
x: 0, // 节点的位置在上层确定，所以这里仅使用相对位置即可
y: 0,
rx, // size 一般可以提供宽高信息
ry,
stroke: color
}, Global.defaultNode.style, cfg.style);
return style;
}
}, 'single-shape');
// Shape.registerNode('ellipse', {
// shapeType: 'ellipse',
// getShapeStyle(cfg) {
// const size = this.getSize(cfg);
// const rx = size[0] / 2;
// const ry = size[1] / 2;
// const color = cfg.color || Global.defaultNode.color;
// const style = Util.mix({}, {
// x: 0, // 节点的位置在上层确定，所以这里仅使用相对位置即可
// y: 0,
// rx, // size 一般可以提供宽高信息
// ry,
// stroke: color
// }, Global.defaultNode.style, cfg.style);
// return style;
// }
// }, 'single-shape');
/**
* 基本的矩形，可以添加文本，默认文本居中
*/
Shape.registerNode('rect', {
shapeType: 'rect',
getShapeStyle(cfg) {
const size = this.getSize(cfg);
const width = size[0];
const height = size[1];
const color = cfg.color || Global.defaultNode.color;
const style = Util.mix({}, Global.defaultNode.style, {
x: 0 - width / 2, // 节点的位置在上层确定，所以这里仅使用相对位置即可
y: 0 - height / 2,
width,
height,
stroke: color
}, cfg.style);
return style;
}
}, 'single-shape');
// Shape.registerNode('rect', {
// shapeType: 'rect',
// getShapeStyle(cfg) {
// const size = this.getSize(cfg);
// const width = size[0];
// const height = size[1];
// const color = cfg.color || Global.defaultNode.color;
// const style = Util.mix({}, Global.defaultNode.style, {
// x: 0 - width / 2, // 节点的位置在上层确定，所以这里仅使用相对位置即可
// y: 0 - height / 2,
// width,
// height,
// stroke: color
// }, cfg.style);
// return style;
// }
// }, 'single-shape');
/**
* 基本的图片，可以添加文本，默认文本在图片的下面

79
src/shape/nodes/circleIcon.js → src/shape/nodes/circle.js
View File

@ -2,7 +2,7 @@ const Shape = require('../shape');
const deepMix = require('@antv/util/lib/deep-mix');
// 带有图标的圆，可用于拓扑图中
Shape.registerNode('circleIcon', {
Shape.registerNode('circle', {
// 自定义节点时的配置
options: {
// 默认配置
@ -19,10 +19,22 @@ Shape.registerNode('circleIcon', {
fill: '#595959'
}
},
// 节点上左右上下四个方向上的链接circle配置
linkPoints: {
top: false,
right: false,
bottom: false,
left: false,
// circle的大小
size: 3,
lineWidth: 1,
fill: '#72CC4A',
stroke: '#72CC4A'
},
// 节点中icon配置
icon: {
// 是否显示icon，值为 false 则不渲染icon
show: true,
show: false,
// icon的地址，可以是字符串或Image
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
width: 16,
@ -38,6 +50,7 @@ Shape.registerNode('circleIcon', {
lineWidth: 5
}
},
shapeType: 'circle',
// 文本位置
labelPosition: 'bottom',
drawLabel(cfg, group) {
@ -59,7 +72,7 @@ Shape.registerNode('circleIcon', {
attrs
});
const { icon } = attrs;
const { icon, linkPoints, r } = attrs;
const { width, height, show } = icon;
if (show) {
const image = group.addShape('image', {
@ -73,6 +86,64 @@ Shape.registerNode('circleIcon', {
image.set('capture', false);
}
const { top, left, right, bottom, size,
fill: anchorFill, stroke: anchorStroke, lineWidth: borderWidth } = linkPoints;
if (left) {
// left circle
group.addShape('circle', {
attrs: {
x: -r,
y: 0,
r: size,
fill: anchorFill,
stroke: anchorStroke,
lineWidth: borderWidth
}
});
}
if (right) {
// right circle
group.addShape('circle', {
attrs: {
x: r,
y: 0,
r: size,
fill: anchorFill,
stroke: anchorStroke,
lineWidth: borderWidth
}
});
}
if (top) {
// top circle
group.addShape('circle', {
attrs: {
x: 0,
y: -r,
r: size,
fill: anchorFill,
stroke: anchorStroke,
lineWidth: borderWidth
}
});
}
if (bottom) {
// bottom circle
group.addShape('circle', {
attrs: {
x: 0,
y: r,
r: size,
fill: anchorFill,
stroke: anchorStroke,
lineWidth: borderWidth
}
});
}
return keyShape;
}
}, 'circle');
}, 'single-shape');

161
src/shape/nodes/ellipse.js Normal file
View File

@ -0,0 +1,161 @@
const Shape = require('../shape');
const deepMix = require('@antv/util/lib/deep-mix');
/**
* 基本的椭圆，可以添加文本，默认文本居中
*/
Shape.registerNode('ellipse', {
// 自定义节点时的配置
options: {
// 默认配置
default: {
rx: 80,
ry: 40,
fill: '#40a9ff',
stroke: '#91d5ff',
lineWidth: 1,
x: 0,
y: 0,
// 文本样式配置
labelCfg: {
style: {
fill: '#595959'
},
offset: 25
},
// 节点中icon配置
icon: {
// 是否显示icon，值为 false 则不渲染icon
show: true,
// icon的地址，可以是字符串或Image
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
width: 36,
height: 36
},
// 节点上左右上下四个方向上的链接circle配置
linkPoints: {
top: false,
right: false,
bottom: false,
left: false,
// circle的大小
size: 3,
lineWidth: 1,
fill: '#72CC4A',
stroke: '#72CC4A'
},
// 连接点，默认为左右
anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]]
},
// 鼠标hover状态下的配置
hover: {
lineWidth: 3
},
// 选中节点状态下的配置
select: {
lineWidth: 5
}
},
shapeType: 'ellipse',
// 文本位置
labelPosition: 'bottom',
drawLabel(cfg, group) {
const customStyle = this.getCustomConfig(cfg) || {};
const defaultConfig = customStyle.default || {};
const labelCfg = deepMix({}, this.options.default.labelCfg, defaultConfig.labelCfg, cfg.labelCfg);
const labelStyle = this.getLabelStyle(cfg, labelCfg, group);
const label = group.addShape('text', {
attrs: labelStyle
});
return label;
},
drawShape(cfg, group) {
const customStyle = this.getCustomConfig(cfg) || {};
const defaultConfig = customStyle.default;
const style = deepMix({}, this.options.default, defaultConfig, cfg.style);
// 使用用户配置的size大小
const { rx, ry, linkPoints, icon } = style;
const keyShape = group.addShape('ellipse', {
attrs: {
rx,
ry,
...style
}
});
const { width, height, show } = icon;
if (show) {
const image = group.addShape('image', {
attrs: {
x: -width / 2,
y: -height / 2,
...icon
}
});
image.set('capture', false);
}
const { top, left, right, bottom, size,
fill: anchorFill, stroke: anchorStroke, lineWidth: borderWidth } = linkPoints;
if (left) {
// left circle
group.addShape('circle', {
attrs: {
x: -rx,
y: 0,
r: size,
fill: anchorFill,
stroke: anchorStroke,
lineWidth: borderWidth
}
});
}
if (right) {
// right circle
group.addShape('circle', {
attrs: {
x: rx,
y: 0,
r: size,
fill: anchorFill,
stroke: anchorStroke,
lineWidth: borderWidth
}
});
}
if (top) {
// top circle
group.addShape('circle', {
attrs: {
x: 0,
y: -ry,
r: size,
fill: anchorFill,
stroke: anchorStroke,
lineWidth: borderWidth
}
});
}
if (bottom) {
// bottom circle
group.addShape('circle', {
attrs: {
x: 0,
y: ry,
r: size,
fill: anchorFill,
stroke: anchorStroke,
lineWidth: borderWidth
}
});
}
return keyShape;
}
}, 'single-shape');

5
src/shape/nodes/index.js
View File

@ -1,2 +1,3 @@
require('./circleIcon');
require('./rectAnchor');
require('./circle');
require('./rect');
require('./ellipse');

10
src/shape/nodes/rectAnchor.js → src/shape/nodes/rect.js
View File

@ -1,14 +1,14 @@
const Shape = require('../shape');
const deepMix = require('@antv/util/lib/deep-mix');
Shape.registerNode('rectAnchor', {
Shape.registerNode('rect', {
// 自定义节点时的配置
options: {
// 默认配置
default: {
width: 200,
width: 100,
height: 30,
radius: 15,
// radius: 1,
stroke: '#69c0ff',
fill: '#e6f7ff',
lineWidth: 1,
@ -23,9 +23,9 @@ Shape.registerNode('rectAnchor', {
// 节点上左右上下四个方向上的链接circle配置
linkPoints: {
top: false,
right: true,
right: false,
bottom: false,
left: true,
left: false,
// circle的大小
size: 3,
lineWidth: 1,

4
test/bugs/issue-659-spec.js
View File

@ -200,6 +200,6 @@ describe('#659', () => {
expect(keyShape.attr('fill')).to.equal('#5394ef');
expect(keyShape.attr('stroke')).to.equal('#d9d9d9');
graph.emit('node:mouseleave', { item: node });
expect(keyShape.attr('fill')).to.equal('#fff');
expect(keyShape.attr('stroke')).to.equal('#333');
expect(keyShape.attr('fill')).to.equal('#40a9ff');
expect(keyShape.attr('stroke')).to.equal('#91d5ff');
});