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

docs: update combo interaction demos with state styles.

Browse Source
This commit is contained in:
Yanyan-Wang 2020-06-02 17:35:28 +08:00
parent 0889669158
commit 88500183c1
4 changed files with 98 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
examples/interaction/combo/demo/cCircle.js
View File

@ -117,6 +117,12 @@ const graph = new G6.Graph({
}
// ... Other global configurations for combos
},
comboStateStyles: {
dragenter: {
lineWidth: 4,
stroke: '#FE9797'
}
},
modes: {
default: [
'drag-combo',
@ -137,3 +143,22 @@ graph.on('combo:click', e => {
else graph.refreshPositions();
}
});
graph.on('combo:dragend', e => {
graph.getCombos().forEach(combo => {
graph.setItemState(combo, 'dragenter', false);
})
});
graph.on('node:dragend', e => {
graph.getCombos().forEach(combo => {
graph.setItemState(combo, 'dragenter', false);
})
});
graph.on('combo:dragenter', e => {
graph.setItemState(e.item, 'dragenter', true);
});
graph.on('combo:dragleave', e => {
graph.setItemState(e.item, 'dragenter', false);
});

24
examples/interaction/combo/demo/cRect.js
View File

@ -115,6 +115,12 @@ const graph = new G6.Graph({
type: 'cRect',
// ... Other global configurations for combos
},
comboStateStyles: {
dragenter: {
lineWidth: 4,
stroke: '#FE9797'
}
},
modes: {
default: [
'drag-combo',
@ -135,3 +141,21 @@ graph.on('combo:click', e => {
else graph.refreshPositions();
}
});
graph.on('combo:dragend', e => {
graph.getCombos().forEach(combo => {
graph.setItemState(combo, 'dragenter', false);
})
});
graph.on('node:dragend', e => {
graph.getCombos().forEach(combo => {
graph.setItemState(combo, 'dragenter', false);
})
});
graph.on('combo:dragenter', e => {
graph.setItemState(e.item, 'dragenter', true);
});
graph.on('combo:dragleave', e => {
graph.setItemState(e.item, 'dragenter', false);
});

24
examples/interaction/combo/demo/circle.js
View File

@ -43,6 +43,12 @@ const graph = new G6.Graph({
position: 'bottom',
}
},
comboStateStyles: {
dragenter: {
lineWidth: 4,
stroke: '#FE9797'
}
},
modes: {
default: ['drag-canvas', 'drag-node', 'drag-combo', 'collapse-expand-combo'],
},
@ -50,3 +56,21 @@ const graph = new G6.Graph({
graph.data(data);
graph.render();
graph.on('combo:dragend', e => {
graph.getCombos().forEach(combo => {
graph.setItemState(combo, 'dragenter', false);
})
});
graph.on('node:dragend', e => {
graph.getCombos().forEach(combo => {
graph.setItemState(combo, 'dragenter', false);
})
});
graph.on('combo:dragenter', e => {
graph.setItemState(e.item, 'dragenter', true);
});
graph.on('combo:dragleave', e => {
graph.setItemState(e.item, 'dragenter', false);
});

25
examples/interaction/combo/demo/rect.js
View File

@ -46,6 +46,12 @@ const graph = new G6.Graph({
position: 'top',
}
},
comboStateStyles: {
dragenter: {
lineWidth: 4,
stroke: '#FE9797'
}
},
modes: {
default: ['drag-canvas', 'drag-node', 'drag-combo', 'collapse-expand-combo'],
},
@ -53,3 +59,22 @@ const graph = new G6.Graph({
graph.data(data);
graph.render();
graph.on('combo:dragend', e => {
graph.getCombos().forEach(combo => {
graph.setItemState(combo, 'dragenter', false);
})
});
graph.on('node:dragend', e => {
graph.getCombos().forEach(combo => {
graph.setItemState(combo, 'dragenter', false);
})
});
graph.on('combo:dragenter', e => {
graph.setItemState(e.item, 'dragenter', true);
});
graph.on('combo:dragleave', e => {
graph.setItemState(e.item, 'dragenter', false);
});