feat(engine): all figures and transformations ready

src/pages/figure.vue

@@ -1,17 +1,30 @@
 <script setup lang="ts">
 const axes = ['x', 'y', 'z'];
 const projections = [
-  'Без проекции',
-  'Изометрическая',
-  'Диметрическая',
-  'Триметрическая',
-  'Одноточечная перспективная',
-  'Двухточечная перспективная',
+  { projection: Projections.NONE, title: 'Без проекции' },
+  { projection: Projections.ISOMETRIC, title: 'Изометрическая' },
+  { projection: Projections.DIMETRIC, title: 'Диметрическая' },
+  { projection: Projections.TRIMETRIC, title: 'Триметрическая' },
+  {
+    projection: Projections.ONE_POINT_PERSPECTIVE,
+    title: 'Одноточечная перспектива',
+  },
+  {
+    projection: Projections.TWO_POINT_PERSPECTIVE,
+    title: 'Двухточечная перспектива',
+  },
 ];
 
 const activeProjection = ref<number>(0);
 
 const transformations = useTransformations();
+
+onMounted(() => (activeProjection.value = transformations.projection.value));
+
+const setActiveProjection = (index: number) => {
+  activeProjection.value = index;
+  transformations.setProjection(projections[index].projection);
+};
 </script>
 
 <template>
@@ -20,9 +33,10 @@ const transformations = useTransformations();
       <FormRange
         v-for="(axis, i) in axes"
         :label="`${axis} =`"
-        :min="-100"
-        :max="100"
-        :step="1"
+        :min="-500"
+        :max="500"
+        :step="5"
+        :current-value="transformations.translation[i]"
         :defaultValue="0"
         @change="transformations.setTranslation(i, $event)"
       />
@@ -34,6 +48,7 @@ const transformations = useTransformations();
         :min="0"
         :max="359"
         :step="1"
+        :current-value="transformations.rotation[i]"
         :defaultValue="0"
         @change="transformations.setRotation(i, $event)"
       />
@@ -46,6 +61,7 @@ const transformations = useTransformations();
         :min="0.1"
         :max="5"
         :step="0.1"
+        :current-value="transformations.scale[i]"
         :defaultValue="1"
         @change="transformations.setScale(i, $event)"
       />
@@ -54,10 +70,10 @@ const transformations = useTransformations();
       <GridContainer>
         <GridElement
           v-for="(projection, i) in projections"
-          :key="projection"
+          :key="projection.title"
           :is-active="activeProjection === i"
-          :title="projection"
-          @click="activeProjection = i"
+          :title="projection.title"
+          @click="setActiveProjection(i)"
         />
       </GridContainer>
     </Accordion>

src/pages/index.vue

@@ -1,10 +1,34 @@
 <script setup lang="ts">
-const figures = ['Тетраэдр', 'Гексаэдр', 'Октаэдр', 'Додекаэдр', 'Икосаэдр'];
+const allFigures = [
+  { figure: Figures.CUBE, title: 'Куб' },
+  { figure: Figures.OCTAHEDRON, title: 'Октаэдр' },
+  { figure: Figures.TRIHEDRAL_PYRAMID, title: 'Трехгранная пирамида' },
+  { figure: Figures.SQUARE_PYRAMID, title: 'Четырехгранная пирамида' },
+  { figure: Figures.PENTAGONAL_PYRAMID, title: 'Пятигранная пирамиида' },
+];
+
+const activeFigure = ref<number>(0);
+
+const figure = useFigure();
+
+onMounted(() => (activeFigure.value = figure.currentFigure.value));
+
+const selectFigure = (index: number) => {
+  activeFigure.value = index;
+  figure.setFigure(allFigures[index].figure);
+  navigateTo('/figure');
+};
 </script>
 
 <template>
   <h1>Выберете фигуру</h1>
   <GridContainer>
-    <GridElement v-for="figure in figures" :key="figure" :title="figure" />
+    <GridElement
+      v-for="(figure, i) in allFigures"
+      :key="figure.title"
+      :title="figure.title"
+      :is-active="activeFigure === i"
+      @click="selectFigure(i)"
+    />
   </GridContainer>
 </template>