mirror of
https://github.com/robonen/eulerian-cycle.git
synced 2026-03-20 02:44:47 +00:00
GitHub
@@ -31,6 +31,7 @@ body {
|
||||
height: 100%;
|
||||
background-color: var(--body-color);
|
||||
color: var(--text-color);
|
||||
padding: 0 64px;
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -50,7 +51,7 @@ html {
|
||||
max-width: 100%;
|
||||
width: max-content;
|
||||
display: flex;
|
||||
margin: 44px 0 56px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.matrix {
|
||||
@@ -158,6 +159,7 @@ html {
|
||||
text-align: center;
|
||||
font-family: "Formular";
|
||||
}
|
||||
|
||||
.number input[type="number"]::-webkit-outer-spin-button,
|
||||
.number input[type="number"]::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
:root {
|
||||
--main-color: rgb(97 196 189);
|
||||
--complement-color: rgb(46 105 120);
|
||||
@@ -31,6 +29,7 @@ html {
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
padding-right: 32px;
|
||||
padding-left: 32px;
|
||||
flex-direction: column;
|
||||
@@ -43,6 +42,7 @@ html {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-cont,
|
||||
@@ -52,16 +52,17 @@ html {
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
padding: 48px 0;
|
||||
height: 60px;
|
||||
margin: 48px 0 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-step-cont {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: 48px;
|
||||
}
|
||||
|
||||
.header-step-description {
|
||||
@@ -80,33 +81,35 @@ header {
|
||||
width: 48px;
|
||||
height: 20px;
|
||||
margin: 0 12px;
|
||||
background-image: url("~@/assets/icons/vector.svg");
|
||||
background-image: url(~@/assets/icons/vector.svg);
|
||||
}
|
||||
|
||||
.control-cont {
|
||||
padding: 48px 0;
|
||||
padding: 36px 0 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-cont {
|
||||
padding: 48px 64px;
|
||||
.addition-cont {
|
||||
padding: 48px 0;
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
width: 34px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-cont__left {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.menu-cont__right {
|
||||
padding-left: 0;
|
||||
.menu {
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.step-cont,
|
||||
.btn-cont {
|
||||
.btn-cont,
|
||||
.menu-cont {
|
||||
height: -webkit-max-content;
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
margin: auto;
|
||||
}
|
||||
@@ -130,15 +133,6 @@ header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.header-close-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
opacity: 0.4;
|
||||
background-image: url("~@/assets/icons/close.svg");
|
||||
}
|
||||
|
||||
.step::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -168,15 +162,29 @@ header {
|
||||
}
|
||||
|
||||
.dynamic-active-step::after {
|
||||
-webkit-animation-name: next;
|
||||
animation-name: next;
|
||||
-webkit-animation-duration: 4s;
|
||||
animation-duration: 4s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes next {
|
||||
from {
|
||||
background: #c1c1c1;
|
||||
}
|
||||
|
||||
to {
|
||||
background: #ff5c8e;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes next {
|
||||
from {
|
||||
background: #c1c1c1;
|
||||
}
|
||||
|
||||
to {
|
||||
background: #ff5c8e;
|
||||
}
|
||||
@@ -194,6 +202,7 @@ header {
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
opacity: 0.6;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-control-button {
|
||||
@@ -202,19 +211,19 @@ header {
|
||||
}
|
||||
|
||||
#previous-step {
|
||||
background-image: url("~@/assets/icons/previous-step.svg");
|
||||
background-image: url(~@/assets/icons/previous-step.svg);
|
||||
}
|
||||
|
||||
#next-step {
|
||||
background-image: url("~@/assets/icons/next-step.svg");
|
||||
background-image: url(~@/assets/icons/next-step.svg);
|
||||
}
|
||||
|
||||
#play {
|
||||
background-image: url("~@/assets/icons/play.svg");
|
||||
background-image: url(~@/assets/icons/play.svg);
|
||||
}
|
||||
|
||||
#pause {
|
||||
background-image: url("~@/assets/icons/pause.svg");
|
||||
background-image: url(~@/assets/icons/pause.svg);
|
||||
}
|
||||
|
||||
.control-button:hover {
|
||||
@@ -225,3 +234,274 @@ header {
|
||||
opacity: 0.1;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.empty-graph-cont {
|
||||
position: absolute;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.render-area {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.inaccessible {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.adjacency_matrix-cont {
|
||||
position: absolute;
|
||||
background-color: #f3f3f3;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adjacency_matrix {
|
||||
padding: 48px 64px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: -webkit-max-content;
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.matrix-icon {
|
||||
background-image: url(~@/assets/icons/matrix.svg);
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
background-image: url(~@/assets/icons/info.svg);
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
background-image: url(~@/assets/icons/help.svg);
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
background-image: url(~@/assets/icons/close.svg);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.6;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
.menu-icon:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.adjacency_matrix-menu {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 52px;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-right: 36px;
|
||||
}
|
||||
|
||||
.header-matrix {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.popup-cont {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
padding: 48px 64px;
|
||||
background: rgb(0 0 0 / 60%);
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.version {
|
||||
color: gray;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.popup {
|
||||
margin: auto;
|
||||
padding: 32px 28px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
height: -webkit-max-content;
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.popup-text {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.popup-el {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.popup-el:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: #b8b8b8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-prompt, .prompt {
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
visibility: hidden;
|
||||
height: 12px;
|
||||
/* margin-top: -2px; */
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
color: rgb(255 255 255);
|
||||
font-weight: 500;
|
||||
background: rgb(56 58 63);
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
box-shadow: 0px 1px 5px 1px 0px 1px 5px 1px rgb(56 58 63 / 35%);
|
||||
transition: .2s;
|
||||
display: block;
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.menu-prompt {
|
||||
margin-left: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.menu-prompt::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: -14px;
|
||||
top: 7px;
|
||||
border: 8px solid;
|
||||
border-color: transparent rgb(56 58 63) transparent transparent;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
transform: translate(-50%, 0);
|
||||
left: 50%;
|
||||
top: -100%;
|
||||
margin: -6px auto;
|
||||
}
|
||||
|
||||
.prompt::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
border: 8px solid;
|
||||
border-color: rgb(56 58 63) transparent transparent transparent;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.menu-icon:hover .menu-prompt, .control-button:hover .prompt {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition-delay: .5s;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: rgb(255, 58, 58);
|
||||
color: white;
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
width: max-content;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
box-shadow: 0px 1px 5px 1px rgb(56 58 63 / 15%);
|
||||
}
|
||||
|
||||
.popup-el.popup-button-cont {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.popup-button {
|
||||
padding: 6px 12px;
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-popup-button {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid;
|
||||
border-radius: 28px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hints {
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
color: gray;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -1 +1 @@
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-miterlimit:10;stroke-width:10px;}</style></defs><line class="cls-1" x1="21" y1="21" x2="79" y2="79"/><line class="cls-1" x1="21" y1="79" x2="79" y2="21"/></svg>
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-miterlimit:10;stroke-width:6px;}</style></defs><line class="cls-1" x1="21" y1="21" x2="79" y2="79"/><line class="cls-1" x1="21" y1="79" x2="79" y2="21"/></svg>
|
||||
|
Before Width: | Height: | Size: 313 B After Width: | Height: | Size: 312 B |
1
src/assets/icons/help.svg
Normal file
1
src/assets/icons/help.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-linecap:round;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M76.49,35a26.5,26.5,0,0,0-53-1.62c-.28,4.84,2.62,11.15,5.12,15.62a26.89,26.89,0,0,1,3.46,13.13v.19a4.18,4.18,0,0,0,4.18,4.18H63.68a4.18,4.18,0,0,0,4.18-4.18h0A26.47,26.47,0,0,1,71.43,49C73.8,44.91,76.49,39.32,76.49,35Z"/><path class="cls-1" d="M37.41,76.5H61.56A4.43,4.43,0,0,1,66,80.93v2.76a7.81,7.81,0,0,1-7.81,7.81H40.8A7.81,7.81,0,0,1,33,83.69V80.93A4.43,4.43,0,0,1,37.41,76.5Z"/></svg>
|
||||
|
After Width: | Height: | Size: 634 B |
1
src/assets/icons/info.svg
Normal file
1
src/assets/icons/info.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-linecap:round;stroke-miterlimit:10;stroke-width:6px;}.cls-2{fill:#330522;}</style></defs><circle class="cls-1" cx="50" cy="50" r="40"/><path class="cls-2" d="M47.63,68.22a4.84,4.84,0,0,1-3.37-1.13,3.81,3.81,0,0,1-1.26-3,7,7,0,0,1,.15-1.29L47.48,41.2h7.2L50.41,62.41h3l-1.13,5.81Zm4.12-30a4.48,4.48,0,0,1-2.81-.72,2.38,2.38,0,0,1-.9-2,5.75,5.75,0,0,1,.11-1c.07-.38.13-.72.2-1a7.4,7.4,0,0,1,.47-1.34A3.55,3.55,0,0,1,49.69,31a4.57,4.57,0,0,1,1.44-.85,6.21,6.21,0,0,1,2.16-.33,4.48,4.48,0,0,1,2.81.72,2.37,2.37,0,0,1,.9,2,5.67,5.67,0,0,1-.1,1c-.07.38-.14.72-.21,1a7.09,7.09,0,0,1-.46,1.34A3.61,3.61,0,0,1,55.35,37a4.29,4.29,0,0,1-1.44.85A5.9,5.9,0,0,1,51.75,38.22Z"/></svg>
|
||||
|
After Width: | Height: | Size: 822 B |
1
src/assets/icons/matrix.svg
Normal file
1
src/assets/icons/matrix.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-linecap:round;stroke-miterlimit:10;stroke-width:6px;}</style></defs><rect class="cls-1" x="9.99" y="10" width="33.7" height="33.7" rx="3.43"/><rect class="cls-1" x="56.31" y="10" width="33.7" height="33.7" rx="3.43"/><rect class="cls-1" x="9.99" y="56.3" width="33.7" height="33.7" rx="3.43"/><rect class="cls-1" x="56.31" y="56.3" width="33.7" height="33.7" rx="3.43"/></svg>
|
||||
|
After Width: | Height: | Size: 529 B |
@@ -1 +1 @@
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:8px;}</style></defs><path class="cls-1" d="M19.12,16.64V83.36a1.51,1.51,0,0,0,2.26,1.3L78.89,51.3a1.51,1.51,0,0,0,0-2.6L21.38,15.34A1.51,1.51,0,0,0,19.12,16.64Z"/><rect class="cls-1" x="77.88" y="25" width="3" height="50" rx="1.5" transform="translate(158.75 100) rotate(180)"/></svg>
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M19.12,16.64V83.36a1.51,1.51,0,0,0,2.26,1.3L78.89,51.3a1.51,1.51,0,0,0,0-2.6L21.38,15.34A1.51,1.51,0,0,0,19.12,16.64Z"/><rect class="cls-1" x="77.88" y="25" width="3" height="50" rx="1.5" transform="translate(158.75 100) rotate(180)"/></svg>
|
||||
|
Before Width: | Height: | Size: 464 B After Width: | Height: | Size: 464 B |
@@ -1 +1 @@
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:8px;}</style></defs><rect class="cls-1" x="15" y="8" width="21" height="84" rx="1.5"/><rect class="cls-1" x="64" y="8" width="21" height="84" rx="1.5"/></svg>
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><rect class="cls-1" x="15" y="8" width="21" height="84" rx="1.5"/><rect class="cls-1" x="64" y="8" width="21" height="84" rx="1.5"/></svg>
|
||||
|
Before Width: | Height: | Size: 338 B After Width: | Height: | Size: 338 B |
@@ -1 +1 @@
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:8px;}</style></defs><path class="cls-1" d="M22.06,9.81V90.19a1.8,1.8,0,0,0,2.71,1.56L94.05,51.56a1.8,1.8,0,0,0,0-3.12L24.77,8.25A1.8,1.8,0,0,0,22.06,9.81Z"/></svg>
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M22.06,9.81V90.19a1.8,1.8,0,0,0,2.71,1.56L94.05,51.56a1.8,1.8,0,0,0,0-3.12L24.77,8.25A1.8,1.8,0,0,0,22.06,9.81Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 343 B After Width: | Height: | Size: 343 B |
@@ -1 +1 @@
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:8px;}</style></defs><path class="cls-1" d="M80.88,83.36V16.64a1.51,1.51,0,0,0-2.26-1.3L21.11,48.7a1.51,1.51,0,0,0,0,2.6L78.62,84.66A1.51,1.51,0,0,0,80.88,83.36Z"/><rect class="cls-1" x="19.12" y="25" width="3" height="50" rx="1.5"/></svg>
|
||||
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M80.88,83.36V16.64a1.51,1.51,0,0,0-2.26-1.3L21.11,48.7a1.51,1.51,0,0,0,0,2.6L78.62,84.66A1.51,1.51,0,0,0,80.88,83.36Z"/><rect class="cls-1" x="19.12" y="25" width="3" height="50" rx="1.5"/></svg>
|
||||
|
Before Width: | Height: | Size: 418 B After Width: | Height: | Size: 418 B |
@@ -1,5 +1,129 @@
|
||||
<template>
|
||||
<!--<div class="adjacency_matrix-cont">
|
||||
<div class="adjacency_matrix">
|
||||
<div class="adjacency_matrix-menu">
|
||||
<div class="header header-matrix">Матрица смежности</div>
|
||||
<div class="menu-icon close-icon"></div>
|
||||
</div>
|
||||
<div class="matrix-cont">
|
||||
<div class="value-rows-matrix-cont">
|
||||
<div class="value-row-matrix">0</div>
|
||||
<div class="value-row-matrix">1</div>
|
||||
<div class="value-row-matrix">2</div>
|
||||
</div>
|
||||
<div class="body-matrix">
|
||||
<div class="matrix">
|
||||
<div class="matrix-column">
|
||||
<div class="value-matrix-column">0</div>
|
||||
<div class="auto-matrix-cell"></div>
|
||||
<div class="auto-matrix-cell"></div>
|
||||
<div class="auto-matrix-cell"></div>
|
||||
</div>
|
||||
<div class="matrix-column">
|
||||
<div class="value-matrix-column">1</div>
|
||||
<div class="auto-matrix-cell"></div>
|
||||
<div class="auto-matrix-cell"></div>
|
||||
<div class="auto-matrix-cell"></div>
|
||||
</div>
|
||||
<div class="matrix-column">
|
||||
<div class="value-matrix-column">2</div>
|
||||
<div class="auto-matrix-cell"></div>
|
||||
<div class="auto-matrix-cell"></div>
|
||||
<div class="auto-matrix-cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<!--<div class="popup-cont">
|
||||
<div class="popup">
|
||||
<div class="popup-el popup-header">
|
||||
<div class="header">Эйлеров граф <span class="version">v0.1</span></div>
|
||||
<div class="menu-icon close-icon"></div>
|
||||
</div>
|
||||
<div class="popup-el popup-text">
|
||||
<p>
|
||||
Граф как математический объект есть совокупность двух множеств —
|
||||
множества самих объектов, называемого множеством вершин, и множества
|
||||
их парных связей, называемого множеством рёбер.
|
||||
</p>
|
||||
<p>Элемент множества рёбер есть пара элементов множества вершин.</p>
|
||||
</div>
|
||||
<div class="popup-el popup-text gray">by Robonen</div>
|
||||
<div class="popup-el popup-button-cont">
|
||||
<div class="popup-button">Уволиться</div>
|
||||
<div class="main-popup-button">Поставить 10 баллов</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="addition-cont menu">
|
||||
<div class="menu-cont">
|
||||
<div class="menu-icon matrix-icon">
|
||||
<div class="menu-prompt">Матрица смежности</div>
|
||||
</div>
|
||||
<div class="menu-icon help-icon">
|
||||
<div class="menu-prompt">Обучение управлению</div>
|
||||
</div>
|
||||
<div class="menu-icon info-icon">
|
||||
<div class="menu-prompt">О программе</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<!--<div class="error">Эйлерова цикла в этом графе нет</div>-->
|
||||
<div class="header-step-cont inaccessible">
|
||||
<div class="header-step-text">
|
||||
<div class="header-vertex">
|
||||
{{ stepExists ? steps[currentStep].source : "-" }}
|
||||
</div>
|
||||
<div class="header-arrow"></div>
|
||||
<div class="header-vertex">
|
||||
{{ stepExists ? steps[currentStep].target : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-step-description">
|
||||
шаг {{ stepExists ? currentStep + 1 : "-" }} /
|
||||
{{ stepExists ? stepsCount : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="graph-cont">
|
||||
<div class="empty-graph-cont">
|
||||
Нажмите ЛКМ дважды, чтобы добавить вершину
|
||||
</div>
|
||||
<graph @isEuler="getSteps" :stepData="currentStepData"></graph>
|
||||
<div class="hints">Чтобы удалить вершину, нажмите ПКМ по ней</div>
|
||||
</div>
|
||||
<div class="control-cont">
|
||||
<div class="control-button" id="previous-step" @click="prevStep">
|
||||
<div class="prompt">Предыдущий шаг</div>
|
||||
</div>
|
||||
<div
|
||||
class="main-control-button control-button"
|
||||
id="pause"
|
||||
v-if="played"
|
||||
@click="stop"
|
||||
>
|
||||
<div class="prompt">Остановить</div>
|
||||
</div>
|
||||
<div
|
||||
class="main-control-button control-button"
|
||||
id="play"
|
||||
v-else
|
||||
:class="{ 'boundary-step': !stepExists }"
|
||||
@click="play"
|
||||
>
|
||||
<div class="prompt">Продолжить</div>
|
||||
</div>
|
||||
|
||||
<div class="control-button" id="next-step" @click="nextStep">
|
||||
<div class="prompt">Следующий шаг</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="addition-cont">
|
||||
<div class="step-cont">
|
||||
<div
|
||||
class="step"
|
||||
@@ -15,56 +139,12 @@
|
||||
<div class="step">4</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<div></div>
|
||||
<div class="header-step-cont">
|
||||
<div class="header-step-text">
|
||||
<div class="header-vertex">
|
||||
{{ stepExists ? steps[currentStep].source : "-" }}
|
||||
</div>
|
||||
<div class="header-arrow"></div>
|
||||
<div class="header-vertex">
|
||||
{{ stepExists ? steps[currentStep].target : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-step-description">
|
||||
шаг {{ stepExists ? currentStep + 1 : "-" }} /
|
||||
{{ stepExists ? stepsCount : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<router-link to="/">
|
||||
<div class="header-close-button"></div>
|
||||
</router-link>
|
||||
</header>
|
||||
<div class="graph-cont">
|
||||
<graph @isEuler="getSteps" :stepData="currentStepData"></graph>
|
||||
</div>
|
||||
<div class="control-cont">
|
||||
<div class="control-button" id="previous-step" @click="prevStep"></div>
|
||||
<div
|
||||
class="main-control-button control-button"
|
||||
id="pause"
|
||||
v-if="played"
|
||||
@click="stop"
|
||||
></div>
|
||||
<div
|
||||
class="main-control-button control-button"
|
||||
id="play"
|
||||
v-else
|
||||
:class="{ 'boundary-step': !stepExists }"
|
||||
@click="play"
|
||||
></div>
|
||||
|
||||
<div class="control-button" id="next-step" @click="nextStep"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed, ref } from "vue";
|
||||
import Graph from "../components/Graph.vue";
|
||||
|
||||
// Frontend не выдержит ещё одних правок. Тут и так сейчас много говна
|
||||
export default {
|
||||
name: "View",
|
||||
components: {
|
||||
|
||||
Reference in New Issue
Block a user