From 7cded67631bea6b99cd06f87a3da223f5d02ce4e Mon Sep 17 00:00:00 2001
From: austnv <lesin2798@mail.ru>
Date: Wed, 27 May 2026 22:18:30 +0300
Subject: [PATCH] add ScreenshotButton to development needs

---
 src/components/ScreenshotButton.vue | 411 ++++++++++++++++++++++++++++
 1 file changed, 411 insertions(+)
 create mode 100644 src/components/ScreenshotButton.vue

diff --git a/src/components/ScreenshotButton.vue b/src/components/ScreenshotButton.vue
new file mode 100644
index 0000000..71a6db0
--- /dev/null
+++ b/src/components/ScreenshotButton.vue
@@ -0,0 +1,411 @@
+<template>
+  <div class="screenshot-controls">
+    <!-- Основная кнопка скриншота -->
+    <button 
+      @click="takeScreenshot"
+      :disabled="isTakingScreenshot || !isModelReady"
+      class="screenshot-btn"
+      :class="{ 'screenshot-btn-loading': isTakingScreenshot }"
+    >
+      <Camera v-if="!isTakingScreenshot" class="w-5 h-5" />
+      <Loader2 v-else class="w-5 h-5 animate-spin" />
+      {{ buttonText }}
+    </button>
+
+    <!-- Уведомление -->
+    <Transition name="notification">
+      <div v-if="showNotification" class="screenshot-notification" :class="notificationType">
+        <CheckCircle v-if="notificationType === 'success'" class="w-4 h-4" />
+        <AlertCircle v-else-if="notificationType === 'error'" class="w-4 h-4" />
+        <Download v-else-if="notificationType === 'downloading'" class="w-4 h-4 animate-bounce" />
+        {{ notificationMessage }}
+      </div>
+    </Transition>
+
+    <!-- Меню настроек (опционально) -->
+    <div v-if="showSettings" class="screenshot-settings">
+      <button @click="toggleSettings" class="settings-btn">
+        <Settings class="w-4 h-4" />
+      </button>
+      
+      <div v-if="settingsOpen" class="settings-dropdown">
+        <label>
+          <input type="checkbox" v-model="settings.keepAutoRotate" />
+          Сохранять авто-вращение
+        </label>
+        <label>
+          <select v-model="settings.format">
+            <option value="image/png">PNG</option>
+            <option value="image/jpeg">JPEG</option>
+            <option value="image/webp">WebP</option>
+          </select>
+        </label>
+        <label>
+          Качество:
+          <input type="range" v-model.number="settings.quality" min="0.1" max="1.0" step="0.1" />
+          {{ Math.round(settings.quality * 100) }}%
+        </label>
+        <label>
+          <input type="checkbox" v-model="settings.transparentBg" />
+          Прозрачный фон
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onUnmounted } from 'vue'
+import { Camera, Loader2, CheckCircle, AlertCircle, Download, Settings } from '@lucide/vue'
+
+// Пропсы для конфигурации
+const props = defineProps({
+  // Ссылка на Three.js рендерер
+  renderer: {
+    type: Object,
+    required: true
+  },
+  // Ссылка на OrbitControls (для управления авто-вращением)
+  controls: {
+    type: Object,
+    default: null
+  },
+  // Флаг готовности модели
+  isModelReady: {
+    type: Boolean,
+    default: false
+  },
+  // Имя файла по умолчанию
+  filename: {
+    type: String,
+    default: 'screenshot'
+  },
+  // Показывать ли настройки
+  showSettings: {
+    type: Boolean,
+    default: false
+  },
+  // Текст на кнопке
+  buttonText: {
+    type: String,
+    default: 'Сделать скриншот'
+  },
+  // Автоматическое уведомление
+  autoNotify: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Состояния
+const isTakingScreenshot = ref(false)
+const showNotification = ref(false)
+const notificationMessage = ref('')
+const notificationType = ref('success')
+const settingsOpen = ref(false)
+
+// Настройки по умолчанию
+const settings = ref({
+  keepAutoRotate: true,
+  format: 'image/png',
+  quality: 1.0,
+  transparentBg: false
+})
+
+// Таймер для уведомлений
+let notificationTimeout = null
+
+// Показать уведомление
+const showNotificationMessage = (message, type = 'success', duration = 3000) => {
+  if (!props.autoNotify) return
+  
+  if (notificationTimeout) clearTimeout(notificationTimeout)
+  
+  notificationMessage.value = message
+  notificationType.value = type
+  showNotification.value = true
+  
+  notificationTimeout = setTimeout(() => {
+    showNotification.value = false
+  }, duration)
+}
+
+// Переключение настроек
+const toggleSettings = () => {
+  settingsOpen.value = !settingsOpen.value
+}
+
+// Основной метод скриншота
+const takeScreenshot = async () => {
+  if (!props.renderer || !props.isModelReady) {
+    showNotificationMessage('Модель еще не загружена', 'error', 2000)
+    return
+  }
+
+  isTakingScreenshot.value = true
+  
+  // Сохраняем состояние авто-вращения
+  let wasAutoRotating = false
+  if (props.controls && !settings.value.keepAutoRotate) {
+    wasAutoRotating = props.controls.autoRotate
+    if (wasAutoRotating) {
+      props.controls.autoRotate = false
+      props.controls.update()
+    }
+  }
+
+  try {
+    // Небольшая задержка для стабилизации кадра
+    await new Promise(resolve => setTimeout(resolve, 50))
+    
+    const canvas = props.renderer.domElement
+    
+    // Если нужен прозрачный фон
+    if (settings.value.transparentBg) {
+      const originalClearColor = props.renderer.getClearColor()
+      const originalAlpha = props.renderer.getClearAlpha()
+      props.renderer.setClearColor(0x000000, 0)
+      
+      // Делаем скриншот после изменения прозрачности
+      await new Promise(resolve => setTimeout(resolve, 10))
+      
+      const blob = await new Promise((resolve) => {
+        canvas.toBlob(resolve, settings.value.format, settings.value.quality)
+      })
+      
+      // Восстанавливаем оригинальный цвет фона
+      props.renderer.setClearColor(originalClearColor, originalAlpha)
+      
+      if (blob) {
+        downloadBlob(blob)
+      }
+    } else {
+      // Обычный скриншот
+      const blob = await new Promise((resolve) => {
+        canvas.toBlob(resolve, settings.value.format, settings.value.quality)
+      })
+      
+      if (blob) {
+        downloadBlob(blob)
+      }
+    }
+    
+    showNotificationMessage('Скриншот сохранен!', 'success', 2000)
+    
+  } catch (error) {
+    console.error('Ошибка при создании скриншота:', error)
+    showNotificationMessage('Ошибка при сохранении скриншота', 'error', 3000)
+  } finally {
+    // Восстанавливаем авто-вращение
+    if (props.controls && !settings.value.keepAutoRotate && wasAutoRotating) {
+      props.controls.autoRotate = wasAutoRotating
+      props.controls.update()
+    }
+    
+    isTakingScreenshot.value = false
+  }
+}
+
+// Скачивание blob
+const downloadBlob = (blob) => {
+  // Показываем уведомление о начале скачивания
+  showNotificationMessage('Подготовка файла...', 'downloading', 1000)
+  
+  const link = document.createElement('a')
+  const url = URL.createObjectURL(blob)
+  const extension = settings.value.format.split('/')[1]
+  const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-')
+  
+  link.href = url
+  link.download = `${props.filename}-${timestamp}.${extension}`
+  document.body.appendChild(link)
+  link.click()
+  
+  // Очищаем
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
+// Очистка при размонтировании
+onUnmounted(() => {
+  if (notificationTimeout) clearTimeout(notificationTimeout)
+})
+
+// Следим за изменениями прозрачности
+watch(() => settings.value.transparentBg, (newVal) => {
+  if (props.renderer) {
+    if (newVal) {
+      props.renderer.setClearColor(0x000000, 0)
+    } else {
+      props.renderer.setClearColor(0x000000, 1)
+    }
+  }
+})
+</script>
+
+<style scoped>
+.screenshot-controls {
+  position: relative;
+  display: inline-block;
+}
+
+.screenshot-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 0.75rem;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.screenshot-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-1px);
+}
+
+.screenshot-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.screenshot-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.screenshot-btn-loading {
+  cursor: wait;
+}
+
+.screenshot-notification {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.25rem;
+  background: white;
+  color: #1f2937;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.screenshot-notification.success {
+  background: #10b981;
+  color: white;
+}
+
+.screenshot-notification.error {
+  background: #ef4444;
+  color: white;
+}
+
+.screenshot-notification.downloading {
+  background: #3b82f6;
+  color: white;
+}
+
+.notification-enter-active,
+.notification-leave-active {
+  transition: all 0.3s ease;
+}
+
+.notification-enter-from {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.notification-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.screenshot-settings {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.5rem;
+}
+
+.settings-btn {
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 0.75rem;
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.settings-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.settings-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 0.75rem;
+  color: white;
+  min-width: 200px;
+  z-index: 100;
+}
+
+.settings-dropdown label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.settings-dropdown select,
+.settings-dropdown input[type="range"] {
+  margin-left: auto;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 0.25rem;
+  color: white;
+  padding: 0.25rem;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.animate-bounce {
+  animation: bounce 0.5s ease infinite;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-25%);
+  }
+}
+</style>
\ No newline at end of file