Commit 2bb6d782 authored by gj4210's avatar gj4210 👽 Committed by janis.streib
Browse files

ADD: Netdoc graph event handlings

parent 300a182c
......@@ -46,24 +46,15 @@
</b-col>
<b-col>
<b-card class="shadow-sm network-card" no-body>
<Network id="network" :nodes="[{id: 1, label: 'circle', shape: 'circle' },
{id: 2, label: 'ellipse', shape: 'ellipse'},
{id: 3, label: 'database',shape: 'database'},
{id: 4, label: 'box', shape: 'box' },
{id: 5, label: 'diamond', shape: 'diamond'},
{id: 6, label: 'dot', shape: 'dot'},
{id: 7, label: 'square', shape: 'square'},
{id: 8, label: 'triangle',shape: 'triangle'}]"
:edges=" [
{from: 1, to: 2},
{from: 2, to: 3},
{from: 2, to: 4},
{from: 2, to: 5},
{from: 5, to: 6},
{from: 5, to: 7},
{from: 6, to: 8}
]"
<Network id="network"
:nodes="network_nodes"
:edges="network_edges"
:options="network_options"
:events="['click', 'selectNode', 'hoverNode', 'dragStart']"
@select-node="onNodeSelected"
@hover-node="onNodeHovered"
@drag-start="onDragStarted"
@click="onClicked"
/>
</b-card>
</b-col>
......@@ -89,18 +80,21 @@ export default {
vlan2l2pports: {},
vlan2pports: {},
bcd_collapse_states: [],
network_nodes: [{ id: 0, label: 'Base', shape: 'circle' }],
network_edges: [],
network_options: {
nodes: {
borderWidth: 4
borderWidth: 4,
font: {
color: 'white',
face: 'arial'
}
},
edges: {
color: 'lightgray'
},
font: {
color: 'red',
face: 'arial'
}
}
},
interaction: { hover: true }
}
},
async created() {
......@@ -117,6 +111,31 @@ export default {
},
sort_bcds(a, b) {
return (a.vlan_count === b.vlan_count) ? 0 : a.vlan_count ? -1 : 1
},
onClicked(e) {
if (e.nodes.length === 0) return
const selectedId = e.nodes[0]
const newId = this.network_nodes.length
this.network_nodes.push({ id: newId, label: 'Base', shape: 'circle' })
this.network_edges.push({ from: selectedId, to: newId })
window.console.log(newId)
},
onNodeSelected(e) {
const selectedId = e.nodes[0]
const newId = this.network_nodes.length
this.network_nodes.push({ id: newId, label: 'Base', shape: 'circle' })
this.network_edges.push({ from: selectedId, to: newId })
window.console.log(newId)
},
onNodeHovered(e) {
const selectedId = e.node
const newId = this.network_nodes.length
this.network_nodes.push({ id: newId, label: 'Base', shape: 'circle' })
this.network_edges.push({ from: selectedId, to: newId })
window.console.log(newId)
},
onDragStarted(e) {
window.console.log(e)
}
}
}
......@@ -141,7 +160,7 @@ export default {
}
.network-card {
height: 100%;
height: 75vh;
}
#network {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment