/
vibecoder123
/
GraphProcessorFork
Обзор
Документация
Войти
/
vibecoder123
/
GraphProcessorFork
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
GraphProcessorFrontend/src/components/graph_view/NetworkVisualisationCanvas.vue
52 строки
1 KB
vibecoderhex
added ddl script for future database scheme
14 апр 2026, 17:55
14 апр 2026, 17:55
5fa8862
Код
Авторство
О чём код?
<script setup lang="ts"> import { onMounted, onUnmounted, ref } from 'vue' import { NetworkCanvasProcessor } from "@/services/graphServices/networkCanvasService.ts"; import type { DataSet, Node, Edge, Network } from "vis-network/standalone" interface IProps { visNodes: DataSet<Node>, visEdges: DataSet<Edge> } const props = defineProps<IProps>() const networkContainer = ref<HTMLElement | null>(null) let network: Network | null = null onMounted(() => { if (networkContainer.value) { network = NetworkCanvasProcessor.DrawVis(networkContainer.value, props.visNodes, props.visEdges) network.setSize(networkContainer.value.offsetWidth.toString(), networkContainer.value.offsetHeight.toString()); network.fit(); } }) onUnmounted(() => { if (network) { network.destroy() network = null } }) </script> <template> <div id="network-container" ref="networkContainer"></div> </template> <style scoped> #network-container { width: 100%; height: 100%; min-height: 500px; border: 1px solid black; } @media(max-width: 640px) { #network-container { width: 100%; height: 100%; min-height: 500px; max-width: 640px; border: 1px solid black; } } </style>