добавлен графический редактор

Author: RuSaG0

src/structures/list/examples/paint.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="canvas-container">
+    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
+    <div class="controls">
+      <button @click="undo" :disabled="!canUndo">Undo</button>
+      <button @click="redo" :disabled="!canRedo">Redo</button>
+      <button @click="clear">Clear</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+class Node<T> {
+  data: T;
+  next: Node<T> | null = null;
+  prev: Node<T> | null = null;
+
+  constructor(data: T) {
+    this.data = data;
+  }
+}
+
+class LinkedList<T> {
+  private head: Node<T> | null = null;
+  private current: Node<T> | null = null;
+
+  add(data: T): void {
+    const newNode = new Node(data);
+
+    if (!this.head) {
+      this.head = newNode;
+      this.current = this.head;
+    } else if (this.current) {
+      this.current.next = newNode;
+      newNode.prev = this.current;
+      this.current = newNode;
+    }
+  }
+
+  undo(): T | null {
+    if (this.current && this.current.prev) {
+      this.current = this.current.prev;
+      return this.current.data;
+    }
+    return null;
+  }
+
+  redo(): T | null {
+    if (this.current && this.current.next) {
+      this.current = this.current.next;
+      return this.current.data;
+    }
+    return null;
+  }
+
+  canUndo(): boolean {
+    return !!this.current && !!this.current.prev;
+  }
+
+  canRedo(): boolean {
+    return !!this.current && !!this.current.next;
+  }
+
+  getCurrentData(): T | null {
+    return this.current ? this.current.data : null;
+  }
+}
+
+const canvas = ref<HTMLCanvasElement | null>(null);
+let ctx: CanvasRenderingContext2D | null = null;
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+
+const stateList = new LinkedList<ImageData>();
+
+const canUndo = ref(false);
+const canRedo = ref(false);
+
+onMounted(() => {
+  if (canvas.value) {
+    ctx = canvas.value.getContext('2d');
+    if (ctx) {
+      ctx.strokeStyle = '#000000';
+      ctx.lineWidth = 2;
+      saveState();
+    }
+  }
+});
+
+const startDrawing = (e: MouseEvent) => {
+  isDrawing = true;
+  if (ctx && canvas.value) {
+    const rect = canvas.value.getBoundingClientRect();
+    lastX = e.clientX - rect.left;
+    lastY = e.clientY - rect.top;
+  }
+};
+
+const draw = (e: MouseEvent) => {
+  if (!isDrawing || !ctx || !canvas.value) return;
+  const rect = canvas.value.getBoundingClientRect();
+  const currentX = e.clientX - rect.left;
+  const currentY = e.clientY - rect.top;
+
+  ctx.beginPath();
+  ctx.moveTo(lastX, lastY);
+  ctx.lineTo(currentX, currentY);
+  ctx.stroke();
+
+  lastX = currentX;
+  lastY = currentY;
+};
+
+const stopDrawing = () => {
+  isDrawing = false;
+  saveState();
+};
+
+const saveState = () => {
+  if (ctx && canvas.value) {
+    const imageData = ctx.getImageData(0, 0, canvas.value.width, canvas.value.height);
+    stateList.add(imageData);
+    updateButtonStates();
+  }
+};
+
+const updateButtonStates = () => {
+  canUndo.value = stateList.canUndo();
+  canRedo.value = stateList.canRedo();
+};
+
+const undo = () => {
+  const prevState = stateList.undo();
+  if (prevState && ctx && canvas.value) {
+    ctx.putImageData(prevState, 0, 0);
+    updateButtonStates();
+  }
+};
+
+const redo = () => {
+  const nextState = stateList.redo();
+  if (nextState && ctx && canvas.value) {
+    ctx.putImageData(nextState, 0, 0);
+    updateButtonStates();
+  }
+};
+
+const clear = () => {
+  if (ctx && canvas.value) {
+    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
+    saveState();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.canvas-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  canvas {
+    border: 1px solid #000;
+    cursor: crosshair;
+  }
+
+  .controls {
+    margin-top: 10px;
+
+    button {
+      margin: 0 5px;
+      padding: 5px 10px;
+      cursor: pointer;
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+</style>

src/structures/list/view-list.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AppSection from '@/components/section/app-section.vue'
 import MusicPlayer from '@/structures/list/examples/music-player.vue'
+import Paint from '@/structures/list/examples/paint.vue'
 </script>
 
 <template>
@@ -18,6 +19,11 @@ import MusicPlayer from '@/structures/list/examples/music-player.vue'
       <music-player />
     </template>
 
+    <template #example2>
+      <p>Реализация графического редактора с функциональностью undo / redo</p>
+      <paint />
+    </template>
+
     <template #pros>
       Преимущество связного списка заключается в том, что удаление элемента выполняется за константное время O(1). В массиве для удаления элемента необходимо не только удалить сам элемент, но и сдвинуть все последующие элементы. В связном списке же достаточно изменить ссылки prev и next у соответствующей ноды.    </template>
 

src/structures/stack/examples/text-editor-case.vue

@@ -19,11 +19,5 @@ import TextEditorCase from '@/structures/stack/examples/text-editor-case.vue'
       <p>При этом у нас возникает следующая дилемма: мы хотим написать код, чтобы при нажатии на клавишу Esc модальное окно закрывалось, но при обычной реализации, если на обеих модальных окнах стоит обработчик закрытия по нажатию Esc, они закроются одновременно. Решение заключается в том, чтобы складывать модальные окна в Stack, тогда при нажатии на Esc удалится последний элемент из стека, в котором содержатся обе модалки.</p>
       <modal-flow-case />
     </template>
-
-<!--    <template #example2>-->
-<!--      <p>Описание примера</p>-->
-
-<!--      <text-editor-case />-->
-<!--    </template>-->
   </app-section>
 </template>