add graph

src/components/EditorWindow.vue

@@ -1,5 +1,55 @@
 <script setup lang="ts">
-  import HeaderBlock from './HeaderBlock.vue';
+
+import { ref, onMounted } from 'vue'
+import HeaderBlock from './HeaderBlock.vue';
+import { Data, Network } from 'vis-network'
+import { getGraph } from './client';
+
+const network = ref<HTMLElement>()
+
+interface GraphNode {
+  id: number
+  label: string
+  color?: string
+}
+
+interface GraphEdge {
+  from: number
+  to: number
+  arrows: string
+}
+
+const nodes = ref<GraphNode[]>([
+  { id: 1, label: 'Начало' },
+  { id: 2, label: 'Шаг 1' },
+  { id: 3, label: 'Шаг 2' },
+  { id: 4, label: 'Шаг 3' },
+  { id: 5, label: 'Конец' },
+  { id: 6, label: 'Параллельный процесс' },
+])
+
+const edges = ref<GraphEdge[]>([
+  { from: 1, to: 2, arrows: 'to' },
+  { from: 2, to: 3, arrows: 'to' },
+  { from: 3, to: 4, arrows: 'to' },
+  { from: 4, to: 5, arrows: 'to' },
+  { from: 2, to: 6, arrows: 'to' },
+  { from: 6, to: 4, arrows: 'to' },
+])
+
+onMounted(async () => {
+  if (!network.value) return
+
+  const graph = await getGraph()
+
+  const data = {
+    nodes: graph.nodes,
+    edges: graph.edges
+  }
+
+  const options = {}
+  new Network(network.value, data, options)
+})
 </script>
 
 <template>
@@ -9,24 +59,14 @@
     </div>
   </HeaderBlock>
 
-  <div class="three-columns">
-    <div class="column left">Левая (узкая)</div>
-    <div class="column center">Центральная (широкая)</div>
-    <div class="column right">Правая (узкая)</div>
-  </div>
+  <div ref="network" class="graph-container"></div>
 </template>
 
 <style scoped>
-  .three-columns {
-    display: grid;
-    grid-template-columns: 1fr 2fr 1fr; /* Соотношение 1:2:1 */
-    gap: 20px;
-    height: 100%;
-  }
-
-  .column {
-    border: 1px solid #e0e0e0;
-    padding: 20px;
-    margin: 5px;
-  }
+.graph-container {
+  width: 100%;
+  height: 700px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
 </style>