Este exemplo demonstra uma implementação do Diagrama Hierárquico.
$render = '';
$resposta = '';
dc.cw("Diagram", "widget_diagrama", {
id: "diagrama"
, connectionsDetachable: false
, maxConnections: -1
, endPoints: [{
uuid: 'ebf1fbbe-6a91-4d68-ab7b-b52d910192e4'
, element: 'diagrama-1ce8175b-57a6-40d4-9095-1bfd43181136'
, anchor: 'Bottom'
, paintStyle: {
fill: '#404a4e'
}
, hoverPaintStyle: {
fill: '#20282b'
}
, endpoint: ['Dot', {
radius: 10
}]
}, {
uuid: '96657732-0641-4b1d-8f02-f3669d038601'
, element: 'diagrama-bd4d621c-6617-4eaf-a6ad-f58ecc94aed1'
, anchor: 'Top'
, paintStyle: {
fill: '#404a4e'
}
, hoverPaintStyle: {
fill: '#20282b'
}
, endpoint: ['Dot', {
radius: 10
}]
}, {
uuid: '78d3a55e-6266-4406-8ee4-f0988166d203'
, element: 'diagrama-bd4d621c-6617-4eaf-a6ad-f58ecc94aed1'
, anchor: 'Bottom'
, paintStyle: {
fill: '#404a4e'
}
, hoverPaintStyle: {
fill: '#20282b'
}
, endpoint: ['Dot', {
radius: 10
}]
}, {
uuid: 'd7ee877e-ea4d-43bb-9f97-98676e4b7ad1'
, element: 'diagrama-9d2573ff-91e8-4624-a646-9c5b5e42bedf'
, anchor: 'Top'
, paintStyle: {
fill: '#404a4e'
}
, hoverPaintStyle: {
fill: '#20282b'
}
, endpoint: ['Dot', {
radius: 10
}]
}, {
uuid: 'f79a7d66-b841-4874-9542-a3628eb6d92a'
, element: 'diagrama-f0b22321-8799-408b-9997-fba1e05df5a6'
, anchor: 'Top'
, paintStyle: {
fill: '#404a4e'
}
, hoverPaintStyle: {
fill: '#20282b'
}
, endpoint: ['Dot', {
radius: 10
}]
}, {
uuid: '51153b14-aa77-4878-9443-f36b558b162e'
, element: 'diagrama-c7e29101-2d46-42d7-87c5-43dc7ec98b2a'
, anchor: 'Top'
, paintStyle: {
fill: '#404a4e'
}
, hoverPaintStyle: {
fill: '#20282b'
}
, endpoint: ['Dot', {
radius: 10
}]
}, {
uuid: '2b727f96-4104-4c5f-859a-e1de13ded6d1'
, element: 'diagrama-c7e29101-2d46-42d7-87c5-43dc7ec98b2a'
, anchor: 'Bottom'
, paintStyle: {
fill: '#404a4e'
}
, hoverPaintStyle: {
fill: '#20282b'
}
, endpoint: ['Dot', {
radius: 10
}]
}, {
uuid: '99360578-f2cb-43f8-a74f-68342db77a76'
, element: 'diagrama-4356ebbc-795c-40be-999a-03373eb76cef'
, anchor: 'Top'
, paintStyle: {
fill: '#404a4e'
}
, hoverPaintStyle: {
fill: '#20282b'
}
, endpoint: ['Dot', {
radius: 10
}]
}, {
uuid: 'b28f2322-9cb8-47e0-807e-ed9dbdcced25'
, element: 'diagrama-5c273949-f3aa-4612-b014-0d2b06941a44'
, anchor: 'Top'
, paintStyle: {
fill: '#404a4e'
}
, hoverPaintStyle: {
fill: '#20282b'
}
, endpoint: ['Dot', {
radius: 10
}]
}]
, connections: [{
uuids: ['ebf1fbbe-6a91-4d68-ab7b-b52d910192e4', '96657732-0641-4b1d-8f02-f3669d038601']
, connector: ['Straight', {
stub: 0
, gap: 0
}]
, paintStyle: {
stroke: '#404a4e'
, strokeWidth: 3
}
, hoverPaintStyle: {
stroke: '#20282b'
}
}, {
uuids: ['ebf1fbbe-6a91-4d68-ab7b-b52d910192e4', '51153b14-aa77-4878-9443-f36b558b162e']
, connector: ['Straight', {
stub: 0
, gap: 0
}]
, paintStyle: {
stroke: '#404a4e'
, strokeWidth: 3
}
, hoverPaintStyle: {
stroke: '#20282b'
}
}, {
uuids: ['78d3a55e-6266-4406-8ee4-f0988166d203', 'd7ee877e-ea4d-43bb-9f97-98676e4b7ad1']
, connector: ['Straight', {
stub: 0
, gap: 0
}]
, paintStyle: {
stroke: '#404a4e'
, strokeWidth: 3
}
, hoverPaintStyle: {
stroke: '#20282b'
}
}, {
uuids: ['78d3a55e-6266-4406-8ee4-f0988166d203', 'f79a7d66-b841-4874-9542-a3628eb6d92a']
, connector: ['Straight', {
stub: 0
, gap: 0
}]
, paintStyle: {
stroke: '#404a4e'
, strokeWidth: 3
}
, hoverPaintStyle: {
stroke: '#20282b'
}
}, {
uuids: ['2b727f96-4104-4c5f-859a-e1de13ded6d1', '99360578-f2cb-43f8-a74f-68342db77a76']
, connector: ['Straight', {
stub: 0
, gap: 0
}]
, paintStyle: {
stroke: '#404a4e'
, strokeWidth: 3
}
, hoverPaintStyle: {
stroke: '#20282b'
}
}, {
uuids: ['2b727f96-4104-4c5f-859a-e1de13ded6d1', 'b28f2322-9cb8-47e0-807e-ed9dbdcced25']
, connector: ['Straight', {
stub: 0
, gap: 0
}]
, paintStyle: {
stroke: '#404a4e'
, strokeWidth: 3
}
, hoverPaintStyle: {
stroke: '#20282b'
}
}]
});