update editor
This commit is contained in:
parent
a62683d9ac
commit
296ec5f222
@ -25,13 +25,36 @@ const selectedNode = ref<GraphNode>({
|
||||
let net = <Network>{}
|
||||
let data = <Data>{}
|
||||
|
||||
const displayEdges = ref(0)
|
||||
const allEdges = ref(0)
|
||||
const onApplicationEdges = ref(true)
|
||||
|
||||
async function loadGraph() {
|
||||
graph.value = await getGraph()
|
||||
allEdges.value = graph.value.edges.length
|
||||
if (onApplicationEdges.value) {
|
||||
graph.value.edges = graph.value.edges.filter(function (edge: GraphEdge) { return edge.type !== 'application' })
|
||||
}
|
||||
graph.value.edges.map(function (edge: GraphEdge) {
|
||||
if (edge.type == 'application') {
|
||||
edge.color = '#cccccc'
|
||||
}
|
||||
})
|
||||
displayEdges.value = graph.value.edges.length
|
||||
data = {
|
||||
nodes: graph.value.nodes,
|
||||
edges: graph.value.edges
|
||||
edges: graph.value.edges.sort(function (a: GraphEdge, b: GraphEdge) {
|
||||
if (a.type == 'application') {
|
||||
return 1
|
||||
}
|
||||
if (b.type == 'application') {
|
||||
return -1
|
||||
}
|
||||
return 0
|
||||
})
|
||||
}
|
||||
net.setData(data)
|
||||
console.log(graph.value.edges)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@ -107,13 +130,23 @@ function nodeHeader(node: GraphNode): string {
|
||||
<div class="nodes-container">
|
||||
<h2>Точки</h2>
|
||||
<div>Всего точек: {{ graph.nodes.length }}</div>
|
||||
<div>Всего связей: {{ graph.edges.length }}</div>
|
||||
<div>
|
||||
Всего связей: {{ allEdges }}, показано: {{ displayEdges }}
|
||||
<div>
|
||||
Показать все связи:
|
||||
<label class="checkbox-green">
|
||||
<input type="checkbox" v-on:click="onApplicationEdges = !onApplicationEdges, loadGraph()">
|
||||
<span class="checkbox-green-switch" data-label-on="Вкл" data-label-off="Выкл"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="hr">
|
||||
|
||||
<div v-bind:key="node.id" v-for="node in graph.nodes">
|
||||
<div :class="[node.id == selectedNode.id ? 'selected-node' : '']" class="node-select-button"
|
||||
v-on:click="selectNode(node)">
|
||||
{{ nodeHeader(node) }}
|
||||
<span v-if="node.applications.length > 0">({{ node.applications.length }})</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -128,8 +161,8 @@ function nodeHeader(node: GraphNode): string {
|
||||
</div>
|
||||
<div>
|
||||
<h3>Приложения: {{ selectedNode.applications.length }}</h3>
|
||||
<div v-bind:key="application.name" v-for="application in selectedNode.applications">
|
||||
- {{ application.name }}
|
||||
<div v-bind:key="index" v-for="(application, index) in selectedNode.applications">
|
||||
<textarea class="node-text-edit-field" rows="5" v-model="application.name"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@ -209,4 +242,96 @@ function nodeHeader(node: GraphNode): string {
|
||||
.hr {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.checkbox-green {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 28px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
}
|
||||
.checkbox-green .checkbox-green-switch {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 90px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
background: #848484;
|
||||
transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
|
||||
}
|
||||
.checkbox-green .checkbox-green-switch:before {
|
||||
content: attr(data-label-on);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 45px;
|
||||
padding: 0 8px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 45px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 10px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.checkbox-green .checkbox-green-switch:after {
|
||||
content: attr(data-label-off);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 44px;
|
||||
border-radius: 1px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
z-index: 5;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
background: white;
|
||||
line-height: 18px;
|
||||
font-size: 10px;
|
||||
color: #777;
|
||||
transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
|
||||
}
|
||||
.checkbox-green input[type="checkbox"] {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch {
|
||||
background-color: #848484;
|
||||
}
|
||||
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:before {
|
||||
content: attr(data-label-off);
|
||||
left: 0;
|
||||
}
|
||||
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:after {
|
||||
content: attr(data-label-on);
|
||||
color: #848484;
|
||||
transform: translate3d(44px, 0, 0);
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.checkbox-green input[type="checkbox"]:not(:disabled) + .checkbox-green-switch:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.checkbox-green input[type=checkbox]:disabled + .checkbox-green-switch {
|
||||
opacity: 0.6;
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.checkbox-green.focused .checkbox-green-switch:after {
|
||||
box-shadow: inset 0px 0px 4px #ff5623;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -40,6 +40,8 @@ export type GraphEdge = {
|
||||
from: number
|
||||
to: number
|
||||
arrows: string
|
||||
type: string
|
||||
color: string
|
||||
}
|
||||
|
||||
export type GraphApplication = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user