update editor

src/components/EditorWindow.vue

@@ -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">
+      <div v-bind:key="index" v-for="(application, index) in selectedNode.applications">
-        - {{ application.name }}
+        <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>

src/components/models.ts

@@ -40,6 +40,8 @@ export type GraphEdge = {
   from: number
   to: number
   arrows: string
+  type: string
+  color: string
 }
 
 export type GraphApplication = {