mirror of
https://gitee.com/antv/g6.git
synced 2024-11-29 18:28:19 +08:00
docs: combo demos
This commit is contained in:
yvonneyx
parent
7923b49bc2
commit
6e97b699ac
@ -1,124 +0,0 @@
|
||||
import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';
|
||||
|
||||
const Graph = extend(BaseGraph, {
|
||||
behaviors: {
|
||||
'hover-activate': Extensions.HoverActivate,
|
||||
},
|
||||
});
|
||||
|
||||
const container = document.getElementById('container');
|
||||
const width = container.scrollWidth;
|
||||
const height = container.scrollHeight || 500;
|
||||
|
||||
const graph = new Graph({
|
||||
container: 'container',
|
||||
width,
|
||||
height,
|
||||
stackCfg: {
|
||||
ignoreStateChange: true,
|
||||
},
|
||||
plugins: [
|
||||
{
|
||||
// lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following
|
||||
type: 'lod-controller',
|
||||
disableLod: true,
|
||||
},
|
||||
],
|
||||
node: {
|
||||
labelShape: {
|
||||
position: 'center',
|
||||
text: {
|
||||
fields: ['id'],
|
||||
formatter: (model) => model.id,
|
||||
},
|
||||
},
|
||||
animates: {
|
||||
update: [
|
||||
{
|
||||
fields: ['opacity'],
|
||||
shapeId: 'haloShape',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
combo: (model) => {
|
||||
return {
|
||||
id: model.id,
|
||||
data: {
|
||||
type: 'circle-combo',
|
||||
...model.data,
|
||||
keyShape: {
|
||||
padding: [10, 20, 30, 40],
|
||||
r: 50,
|
||||
},
|
||||
labelShape: {
|
||||
text: model.id,
|
||||
},
|
||||
|
||||
animates: {
|
||||
buildIn: [
|
||||
{
|
||||
fields: ['opacity'],
|
||||
duration: 500,
|
||||
delay: 500 + Math.random() * 500,
|
||||
},
|
||||
],
|
||||
buildOut: [
|
||||
{
|
||||
fields: ['opacity'],
|
||||
duration: 200,
|
||||
},
|
||||
],
|
||||
update: [
|
||||
{
|
||||
fields: ['lineWidth', 'r'],
|
||||
shapeId: 'keyShape',
|
||||
},
|
||||
{
|
||||
fields: ['opacity'],
|
||||
shapeId: 'haloShape',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
data: {
|
||||
nodes: [
|
||||
{ id: 'node1', data: { x: 250, y: 150, parentId: 'combo1' } },
|
||||
{ id: 'node2', data: { x: 350, y: 150, parentId: 'combo1' } },
|
||||
{ id: 'node3', data: { x: 250, y: 300, parentId: 'combo2' } },
|
||||
],
|
||||
edges: [],
|
||||
combos: [
|
||||
{ id: 'combo1', data: { parentId: 'combo2' } }, // collapsed: true
|
||||
{ id: 'combo2', data: {} },
|
||||
],
|
||||
},
|
||||
modes: {
|
||||
default: [
|
||||
'collapse-expand-combo',
|
||||
{
|
||||
type: 'drag-node',
|
||||
enableTransient: false,
|
||||
updateComboStructure: false,
|
||||
},
|
||||
'drag-canvas',
|
||||
{
|
||||
type: 'click-select',
|
||||
itemTypes: ['node', 'edge', 'combo'],
|
||||
},
|
||||
{
|
||||
type: 'hover-activate',
|
||||
itemTypes: ['node', 'edge', 'combo'],
|
||||
},
|
||||
{
|
||||
type: 'drag-combo',
|
||||
enableTransient: true,
|
||||
updateComboStructure: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
window.graph = graph;
|
||||
32
packages/site/examples/item/defaultCombos/demo/circle.ts
Normal file
32
packages/site/examples/item/defaultCombos/demo/circle.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import { Graph } from '@antv/g6';
|
||||
|
||||
const data = {
|
||||
nodes: [
|
||||
{ id: 'node1', style: { x: 250, y: 150, parentId: 'combo1' } },
|
||||
{ id: 'node2', style: { x: 350, y: 150, parentId: 'combo1' } },
|
||||
{ id: 'node3', style: { x: 250, y: 300, parentId: 'combo2' } },
|
||||
],
|
||||
edges: [],
|
||||
combos: [
|
||||
{ id: 'combo1', style: { parentId: 'combo2' } }, // collapsed: true
|
||||
{ id: 'combo2', style: {} },
|
||||
],
|
||||
};
|
||||
|
||||
const graph = new Graph({
|
||||
container: 'container',
|
||||
node: {
|
||||
style: {
|
||||
labelText: (d) => d.id,
|
||||
},
|
||||
},
|
||||
combo: {
|
||||
style: {
|
||||
type: 'circle', // 👈🏻 Combo shape type.
|
||||
},
|
||||
},
|
||||
data,
|
||||
behaviors: ['drag-element', 'collapse-expand'],
|
||||
});
|
||||
|
||||
graph.render();
|
||||
@ -5,12 +5,12 @@
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "circle.js",
|
||||
"filename": "circle.ts",
|
||||
"title": "圆形",
|
||||
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Kbk1S5pzSY0AAAAAAAAAAAAADmJ7AQ/original"
|
||||
},
|
||||
{
|
||||
"filename": "rect.js",
|
||||
"filename": "rect.ts",
|
||||
"title": "矩形",
|
||||
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PKtgSZzmb3YAAAAAAAAAAAAADmJ7AQ/original"
|
||||
}
|
||||
|
||||
@ -1,124 +0,0 @@
|
||||
import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';
|
||||
|
||||
const Graph = extend(BaseGraph, {
|
||||
behaviors: {
|
||||
'hover-activate': Extensions.HoverActivate,
|
||||
},
|
||||
});
|
||||
|
||||
const container = document.getElementById('container');
|
||||
const width = container.scrollWidth;
|
||||
const height = container.scrollHeight || 500;
|
||||
|
||||
const graph = new Graph({
|
||||
container: 'container',
|
||||
width,
|
||||
height,
|
||||
stackCfg: {
|
||||
ignoreStateChange: true,
|
||||
},
|
||||
plugins: [
|
||||
{
|
||||
// lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following
|
||||
type: 'lod-controller',
|
||||
disableLod: true,
|
||||
},
|
||||
],
|
||||
node: {
|
||||
labelShape: {
|
||||
position: 'center',
|
||||
text: {
|
||||
fields: ['id'],
|
||||
formatter: (model) => model.id,
|
||||
},
|
||||
},
|
||||
animates: {
|
||||
update: [
|
||||
{
|
||||
fields: ['opacity'],
|
||||
shapeId: 'haloShape',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
combo: (model) => {
|
||||
return {
|
||||
id: model.id,
|
||||
data: {
|
||||
type: 'rect-combo',
|
||||
...model.data,
|
||||
keyShape: {
|
||||
padding: [10, 20, 30, 40],
|
||||
r: 50,
|
||||
},
|
||||
labelShape: {
|
||||
text: model.id,
|
||||
},
|
||||
|
||||
animates: {
|
||||
buildIn: [
|
||||
{
|
||||
fields: ['opacity'],
|
||||
duration: 500,
|
||||
delay: 500 + Math.random() * 500,
|
||||
},
|
||||
],
|
||||
buildOut: [
|
||||
{
|
||||
fields: ['opacity'],
|
||||
duration: 200,
|
||||
},
|
||||
],
|
||||
update: [
|
||||
{
|
||||
fields: ['lineWidth', 'r'],
|
||||
shapeId: 'keyShape',
|
||||
},
|
||||
{
|
||||
fields: ['opacity'],
|
||||
shapeId: 'haloShape',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
data: {
|
||||
nodes: [
|
||||
{ id: 'node1', data: { x: 250, y: 150, parentId: 'combo1' } },
|
||||
{ id: 'node2', data: { x: 350, y: 150, parentId: 'combo1' } },
|
||||
{ id: 'node3', data: { x: 250, y: 300, parentId: 'combo2' } },
|
||||
],
|
||||
edges: [],
|
||||
combos: [
|
||||
{ id: 'combo1', data: { parentId: 'combo2' } },
|
||||
{ id: 'combo2', data: {} },
|
||||
],
|
||||
},
|
||||
modes: {
|
||||
default: [
|
||||
'collapse-expand-combo',
|
||||
{
|
||||
type: 'drag-node',
|
||||
enableTransient: false,
|
||||
updateComboStructure: false,
|
||||
},
|
||||
'drag-canvas',
|
||||
{
|
||||
type: 'click-select',
|
||||
itemTypes: ['node', 'edge', 'combo'],
|
||||
},
|
||||
{
|
||||
type: 'hover-activate',
|
||||
itemTypes: ['node', 'edge', 'combo'],
|
||||
},
|
||||
{
|
||||
type: 'drag-combo',
|
||||
enableTransient: true,
|
||||
updateComboStructure: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
window.graph = graph;
|
||||
33
packages/site/examples/item/defaultCombos/demo/rect.ts
Normal file
33
packages/site/examples/item/defaultCombos/demo/rect.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { Graph } from '@antv/g6';
|
||||
|
||||
const data = {
|
||||
nodes: [
|
||||
{ id: 'node1', style: { x: 250, y: 150, parentId: 'combo1' } },
|
||||
{ id: 'node2', style: { x: 350, y: 150, parentId: 'combo1' } },
|
||||
{ id: 'node3', style: { x: 250, y: 300, parentId: 'combo2' } },
|
||||
],
|
||||
edges: [],
|
||||
combos: [
|
||||
{ id: 'combo1', style: { parentId: 'combo2' } }, // collapsed: true
|
||||
{ id: 'combo2', style: {} },
|
||||
],
|
||||
};
|
||||
|
||||
const graph = new Graph({
|
||||
container: 'container',
|
||||
node: {
|
||||
style: {
|
||||
labelText: (d) => d.id,
|
||||
},
|
||||
},
|
||||
combo: {
|
||||
style: {
|
||||
type: 'rect', // 👈🏻 Combo shape type.
|
||||
padding: 20,
|
||||
},
|
||||
},
|
||||
data,
|
||||
behaviors: ['drag-element', 'collapse-expand'],
|
||||
});
|
||||
|
||||
graph.render();
|
||||
Loading…
Reference in New Issue
Block a user