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

fix: modelrect & jsx-node

Browse Source
This commit is contained in:
baizn 2020-09-24 10:34:31 +08:00
parent 3f88c73b19
commit fc463ba266
6 changed files with 169 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
examples/item/customNode/demo/jsxNode.js
View File

@ -6,51 +6,47 @@ import G6 from '@antv/g6';
*
*/
/**
* Register a JSX Node
*/
G6.registerNode('rect-jsx', (cfg) => `
<group>
<rect>
<rect style={{
width: 150,
height: 20,
fill: ${cfg.color},
radius: [6, 6, 0, 0],
cursor: 'move'，
stroke: ${cfg.color}
}} draggable="true">
<text style={{
marginTop: 2,
marginLeft: 75,
textAlign: 'center',
fontWeight: 'bold',
fill: '#fff' }}>{{label}}</text>
</rect>
<rect style={{
width: 150,
height: 55,
stroke: ${cfg.color},
fill: #ffffff,
radius: [0, 0, 6, 6],
}}>
<text style={{ marginTop: 5, marginLeft: 3, fill: '#333', marginLeft: 4 }}>描述: {{description}}</text>
<text style={{ marginTop: 10, marginLeft: 3, fill: '#333', marginLeft: 4 }}>创建者: {{meta.creatorName}}</text>
</rect>
</rect>
<circle style={{
stroke: ${cfg.color},
r: 10,
fill: '#fff',
marginLeft: 75,
cursor: 'pointer'
}} name="circle">
<image style={{ img: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', width: 12, height: 12, marginLeft: 70, marginTop: -5 }} />
</circle>
</group>
`)
G6.registerNode('rect-jsx',
(cfg) => `
<group>
<rect>
<rect style={{
width: 150,
height: 20,
fill: ${cfg.color},
radius: [6, 6, 0, 0],
cursor: 'move'，
stroke: ${cfg.color}
}} draggable="true">
<text style={{
marginTop: 2,
marginLeft: 75,
textAlign: 'center',
fontWeight: 'bold',
fill: '#fff' }}>{{label}}</text>
</rect>
<rect style={{
width: 150,
height: 55,
stroke: ${cfg.color},
fill: #ffffff,
radius: [0, 0, 6, 6],
}}>
<text style={{ marginTop: 5, marginLeft: 3, fill: '#333', marginLeft: 4 }}>描述: {{description}}</text>
<text style={{ marginTop: 10, marginLeft: 3, fill: '#333', marginLeft: 4 }}>创建者: {{meta.creatorName}}</text>
</rect>
</rect>
<circle style={{
stroke: ${cfg.color},
r: 10,
fill: '#fff',
marginLeft: 75,
cursor: 'pointer'
}} name="circle">
<image style={{ img: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', width: 12, height: 12, marginLeft: 70, marginTop: -5 }} />
</circle>
</group>`
)
const data = {
nodes: [{

89
examples/item/customNode/demo/jsxNodeWithAnimate.js
View File

@ -6,55 +6,50 @@ import G6 from '@antv/g6';
*
*/
/**
* Register a XML Node
*/
G6.registerNode('rect-xml', {
jsx: (cfg) => `
<group>
<rect style={{
width: 200,
height: 75,
}}>
<rect style={{
width: 150,
height: 20,
fill: ${cfg.color},
radius: [6, 6, 0, 0],
cursor: 'move'，
stroke: ${cfg.color}
}} draggable="true">
<text style={{
marginTop: 2,
marginLeft: 75,
textAlign: 'center',
fontWeight: 'bold',
fill: '#fff' }}>{{label}}</text>
</rect>
<rect style={{
width: 150,
height: 55,
stroke: ${cfg.color},
fill: #ffffff,
radius: [0, 0, 6, 6],
}}>
<text style={{ marginTop: 5, marginLeft: 3, fill: '#333', marginLeft: 4 }}>描述: {{description}}</text>
<text style={{ marginTop: 10, marginLeft: 3, fill: '#333', marginLeft: 4 }}>创建者: {{meta.creatorName}}</text>
</rect>
</rect>
<circle style={{
stroke: ${cfg.color},
r: 10,
fill: '#fff',
marginLeft: 75,
cursor: 'pointer'
}} name="circle">
<image name="img" style={{ img: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', width: 12, height: 12, marginLeft: 69, marginTop: -5 }} />
</circle>
</group>
`,
<group>
<rect style={{
width: 200,
height: 75,
}}>
<rect style={{
width: 150,
height: 20,
fill: ${cfg.color},
radius: [6, 6, 0, 0],
cursor: 'move'，
stroke: ${cfg.color}
}} draggable="true">
<text style={{
marginTop: 2,
marginLeft: 75,
textAlign: 'center',
fontWeight: 'bold',
fill: '#fff' }}>{{label}}</text>
</rect>
<rect style={{
width: 150,
height: 55,
stroke: ${cfg.color},
fill: #ffffff,
radius: [0, 0, 6, 6],
}}>
<text style={{ marginTop: 5, marginLeft: 3, fill: '#333', marginLeft: 4 }}>描述: {{description}}</text>
<text style={{ marginTop: 10, marginLeft: 3, fill: '#333', marginLeft: 4 }}>创建者: {{meta.creatorName}}</text>
</rect>
</rect>
<circle style={{
stroke: ${cfg.color},
r: 10,
fill: '#fff',
marginLeft: 75,
cursor: 'pointer'
}} name="circle">
<image name="img" style={{ img: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', width: 12, height: 12, marginLeft: 69, marginTop: -5 }} />
</circle>
</group>
`,
afterDraw: (cfg, group) => {
console.log(group)
const img = group.findAllByName('img');

2
examples/item/customNode/demo/meta.json
View File

@ -34,7 +34,7 @@
"zh": "使用 JSX 自定义节点(带动画)",
"en": "Custom Node with JSX and animation"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NcHWTKo3sEoAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XfMbSZSrlREAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "lineChartNode.js",

84
examples/item/customNode/demo/xmlNode.js
View File

@ -1,84 +0,0 @@
import G6 from '@antv/g6';
/**
* Custom a xml node
* by Dominic Ming
*
*/
/**
* Register a XML Node
*/
G6.registerNode('rect-xml', (cfg) => `
<group>
<rect style={{
width: 200,
height: 75,
}}>
<rect style={{
width: 150,
height: 20,
fill: ${cfg.color},
radius: [6, 6, 0, 0],
cursor: 'move'，
stroke: ${cfg.color}
}} draggable="true">
<text style={{
marginTop: 2,
marginLeft: 75,
textAlign: 'center',
fontWeight: 'bold',
fill: '#fff' }}>{{label}}</text>
</rect>
<rect style={{
width: 150,
height: 55,
stroke: ${cfg.color},
fill: #ffffff,
radius: [0, 0, 6, 6],
}}>
<text style={{ marginTop: 5, marginLeft: 3, fill: '#333', marginLeft: 4 }}>描述: {{description}}</text>
<text style={{ marginTop: 10, marginLeft: 3, fill: '#333', marginLeft: 4 }}>创建者: {{meta.creatorName}}</text>
</rect>
</rect>
<circle style={{
stroke: ${cfg.color},
r: 10,
fill: '#fff',
marginLeft: 75,
cursor: 'pointer'
}} name="circle">
<image style={{ img: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', width: 12, height: 12, marginLeft: 70, marginTop: -5 }} />
</circle>
</group>
`)
const data = {
nodes: [{
x: 150,
y: 150,
"description": "ant_type_name_...",
"label": "Type / ReferType",
"color": '#2196f3',
"meta": {
"creatorName": "a_creator"
},
"id": "test",
type: 'rect-xml'
}],
};
const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
container: 'container',
width,
height,
// translate the graph to align the canvas's center, support by v3.5.1
fitCenter: true,
});
graph.data(data);
graph.render();

5
src/shape/nodes/modelRect.ts
View File

@ -188,7 +188,6 @@ Shape.registerNode(
const size = (this as ShapeOptions).getSize!(cfg);
const width = size[0];
const height = size[1];
if (left) {
// left circle
group.addShape('circle', {
@ -250,7 +249,7 @@ Shape.registerNode(
}
},
drawLabel(cfg: NodeConfig, group: GGroup): IShape {
const { labelCfg, logoIcon, descriptionCfg } = this.getOptions(cfg) as NodeConfig;
const { labelCfg = {}, logoIcon = {}, descriptionCfg = {} } = this.getOptions(cfg) as NodeConfig;
const size = (this as ShapeOptions).getSize!(cfg);
const width = size[0];
@ -328,7 +327,7 @@ Shape.registerNode(
return styles;
},
update(cfg: NodeConfig, item: Item) {
const { style, labelCfg, descriptionCfg } = this.getOptions(cfg) as NodeConfig;
const { style = {}, labelCfg = {}, descriptionCfg = {} } = this.getOptions(cfg) as NodeConfig;
const size = (this as ShapeOptions).getSize!(cfg);
const width = size[0];
const height = size[1];

83
tests/unit/shape/nodes/modelRect-spec.ts
View File

@ -1,3 +1,4 @@
import G6 from '../../../../src';
import Graph from '../../../../src/graph/graph';
import '../../../../src/shape/node';
import '../../../../src/shape/nodes';
@ -398,6 +399,88 @@ describe('model rect test', () => {
expect(graph.destroyed).toBe(true);
});
it.only('extends modelRect', () => {
const nodeConfig = {
// 节点基本属性
size: [150, 35],
style: {
radius: 5,
stroke: '#1890FF',
fill: '#FFFFFF'
},
label: '审批节点',
labelCfg: {
style: {
fill: '#595959',
fontSize: 14
},
offset: 30
},
descriptionCfg1: {
style: {
fontSize: 12,
fill: '#bfbfbf'
},
paddingTop: 0
},
// 状态属性
stateStyles: {
hover: {
stroke: '#BAE7FF',
lineWidth: 8,
strokeOpacity: 0.6
}
},
// 左侧矩形边属性
preRect: {
show: true,
width: 4,
fill: '#1890FF',
radius: 2
},
// 图标属性
logoIcon: {
show: true,
// img: require('@/assets/nodeimg/audit.svg'),
width: 16,
height: 16,
offset: -5
},
// 状态属性
stateIcon: {
show: true,
// img: require('@/assets/nodeimg/audit.svg'),
width: 16,
height: 16,
offset: -5
}
}
G6.registerNode('extendsRect', {
options: nodeConfig
}, 'modelRect')
const data = {
nodes: [
{
id: 'node',
label: 'node',
type: 'extendsRect',
x: 100,
y: 100
}
]
}
graph.data(data)
graph.render()
})
const graph = new Graph({
container: div,
width: 500,
height: 500
})
describe('icon and linkPoint test', () => {
it('icon and linkPoints(top bottom)', () => {
const graph = new Graph({