diff --git a/public/air.bmp b/public/air.bmp new file mode 100644 index 0000000..0c52e44 Binary files /dev/null and b/public/air.bmp differ diff --git a/src/assets/css/graph.css b/src/assets/css/graph.css index c592358..dd1ea8b 100644 --- a/src/assets/css/graph.css +++ b/src/assets/css/graph.css @@ -28,6 +28,10 @@ html { height: 100%; } +a { + text-decoration: none; +} + .wrapper { display: flex; flex: 1; @@ -529,3 +533,22 @@ p { opacity: 1; } } + +.fade-left-enter-active { + animation: fade-left 0.5s; +} + +.fade-left-leave-active { + animation: fade-left 0.5s reverse; +} + +@keyframes fade-left { + from { + transform: translateX(40px); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} diff --git a/src/components/Graph.vue b/src/components/Graph.vue index 1c9b537..2ee0525 100644 --- a/src/components/Graph.vue +++ b/src/components/Graph.vue @@ -103,31 +103,33 @@ export default { // Watchers watch( () => props.currentStep, - (stepId) => { - if (loop === null) return; - - // Invalidate all - deactivateAll(); - - // Select passed - for (let i = 0; i < stepId; i++) { - const pass = loop[i]; - const pass_id = findLink(pass); - - links.value[pass_id].selected = 2; - wasActivatedNodes([pass.source, pass.target]); - } - - // Select current - const current = loop[stepId]; - const current_id = findLink(current); - - links.value[current_id].selected = 1; - activateNodes([current.source, current.target]); - } + (stepId) => highlight(stepId) ); - // Methods + // Methodsc + const highlight = (stepId) => { + if (loop === null) return; + + // Invalidate all + deactivateAll(); + + // Select passed + for (let i = 0; i < stepId; i++) { + const pass = loop[i]; + const pass_id = findLink(pass); + + links.value[pass_id].selected = 2; + wasActivatedNodes([pass.source, pass.target]); + } + + // Select current + const current = loop[stepId]; + const current_id = findLink(current); + + links.value[current_id].selected = 1; + activateNodes([current.source, current.target]); + }; + const loopPosition = (coords) => { const node = nodes.value[coords]; @@ -151,6 +153,7 @@ export default { if (links.value.length > 0 && euler.check()) { loop = euler.find(); + highlight(0); } else { loop = null; } diff --git a/src/components/Guide.vue b/src/components/Guide.vue index 5f8a5dd..05e092d 100644 --- a/src/components/Guide.vue +++ b/src/components/Guide.vue @@ -11,7 +11,7 @@ {{ currentStep + 1 }} / {{ steps.length }} @@ -29,16 +29,29 @@ export default { // Const const steps = [ { - name: "Создание вершин", + name: "Создание графа", content: - "Для создания новой вершины необходимо дважды нажать левую кнопку мыши", - video: "/video/create.mp4", + "Для создания нового графа, необходимо добавить вершины на рабочую область. Для этого необходимо дважды кликнуть левой кнопкой мыши по рабочей области.", }, { name: "Связывание вершин", content: - "Чтобы связать вершины, необходимо кликнуть левой кнопкой мыши по вершине, которую необходимо связать. Далее выбираются вершины, с которыми необходимо связать", - video: "/video/linking.mp4", + "После создания вершин, их необходимо связать между собой. Для этого один раз кликните по необходимой вершине, после чего она поменяет цвет. Теперь необходимо выбрать вершины, с которыми необходимо связать. Если вершина успешно привязана, то появится ребро. Чтобы снять выделение, кликните в пустое место рабочей области.", + }, + { + name: "Удаление вершин и ребер", + content: + "В случае, когда необходимо удалить вершину или ребро, то достаточно один раз кликнуть правой кнопкой мыши по элементу.", + }, + { + name: "Нахождение эйлерова цикла", + content: + "После любых действий над вершинами или ребрами, программа проверяет наличие эйлерова цикла. Если эйлеров цикл будет найден, то: