update editor

src/components/EditorWindow.vue

@@ -7,19 +7,88 @@ import { getGraph } from './client';
 
 const network = ref<HTMLElement>()
 
+type GraphNode = {
+  id: number,
+  label: string,
+  name: string,
+  text: string,
+};
+
+type GraphEdge = {
+  from: number,
+  to: number,
+  arrows: string,
+};
+
+type Graph = {
+  nodes: Array<GraphNode>;
+  edges: Array<GraphEdge>;
+};
+
+const graph = ref<Graph>({
+  nodes: [],
+  edges: []
+})
+
+const selectedNode = ref<GraphNode>({
+  id: 0,
+  label: "",
+  name: "",
+  text: "",
+})
+
+let net = <Network>{}
+
 onMounted(async () => {
   if (!network.value) return
 
-  const graph = await getGraph()
+  graph.value = await getGraph()
 
   const data = {
-    nodes: graph.nodes,
-    edges: graph.edges
+    nodes: graph.value.nodes,
+    edges: graph.value.edges
   }
 
-  const options = {}
-  new Network(network.value, data, options)
+  const options = {
+    interaction: {
+      selectable: true,
+    },
+    nodes: {
+      color: {
+        border: '#2B7CE9',           // Normal border color
+        background: '#97C2FC',       // Normal background color
+        highlight: {                 // Selection state
+          border: '#960000',
+          background: '#ff9494'
+        },
+        hover: {                     // Hover state
+          border: '#2B7CE9',
+          background: '#D2E5FF'
+        }
+      }
+    },
+  }
+  net = new Network(network.value, data, options)
+  net.on("click", function (params) {
+    if (params.nodes.length > 0) {
+      console.log("Clicked node:", params.nodes[0]);
+      selectedNode.value = graph.value.nodes[params.nodes[0]]
+    } else if (params.edges.length > 0) {
+      console.log("Clicked edge:", params.edges[0]);
+    }
+  });
+
+  selectNode(graph.value.nodes[0])
 })
+
+function selectNode(node: GraphNode) {
+  selectedNode.value = node
+  net.selectNodes([selectedNode.value.id])
+}
+
+function nodeHeader(node: GraphNode): string {
+  return "[" + node.label + "] - " + node.name
+}
 </script>
 
 <template>
@@ -30,6 +99,25 @@ onMounted(async () => {
   </HeaderBlock>
 
   <div ref="network" class="graph-container"></div>
+
+  <div class="nodes-container">
+    <h2>Точки</h2>
+
+    <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) }}</div>
+    </div>
+  </div>
+
+  <div class="edit-node-container">
+    <h2>Редактирование точки</h2>
+    <div>
+      {{ nodeHeader(selectedNode) }}
+    </div>
+    <div>
+      {{ selectedNode.text }}
+    </div>
+  </div>
 </template>
 
 <style scoped>
@@ -39,4 +127,32 @@ onMounted(async () => {
   border: 1px solid #e0e0e0;
   border-radius: 8px;
 }
+
+.nodes-container {
+  position: fixed;
+  left: 5px;
+  top: 55px;
+  height: calc(100vh - 100px);
+  padding: 10px 20px;
+}
+
+.edit-node-container {
+  position: fixed;
+  right: 5px;
+  top: 55px;
+  height: calc(100vh - 100px);
+  padding: 10px 20px;
+  max-width: 300px;
+}
+
+.node-select-button:hover {
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.selected-node {
+  font-weight: bold;
+  color: #960000;
+  cursor: pointer;
+}
 </style>