From ade67c02211d0f4f04e7a9e1132d81de9735cc87 Mon Sep 17 00:00:00 2001
From: AlexIves16 <ormix16@gmail.com>
Date: Fri, 24 Apr 2026 01:30:17 +0500
Subject: [PATCH] feat: add canvas import from .canvas file

---
 app/pages/canvases.vue | 42 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/app/pages/canvases.vue b/app/pages/canvases.vue
index 2646ed4..478929d 100644
--- a/app/pages/canvases.vue
+++ b/app/pages/canvases.vue
@@ -3,9 +3,15 @@
     <div class="max-w-7xl mx-auto p-6">
       <div class="flex items-center justify-between mb-6">
         <h1 class="text-2xl font-bold text-slate-100">Мои Карты</h1>
-        <button @click="showCreateModal = true" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition">
-          + Новая Карта
-        </button>
+        <div class="flex gap-2">
+          <button @click="triggerImport" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition">
+            Импорт .canvas
+          </button>
+          <input ref="importInput" type="file" accept=".canvas,.json" class="hidden" @change="handleImport" />
+          <button @click="showCreateModal = true" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition">
+            + Новая Карта
+          </button>
+        </div>
       </div>
 
       <!-- Tabs -->
@@ -121,6 +127,7 @@ const authFetch = (url, opts = {}) => $fetch(url, {
 const canvases = ref([])
 const userGroups = ref([])
 const showCreateModal = ref(false)
+const importInput = ref(null)
 const activeTab = ref('personal')
 
   const newCanvas = reactive({
@@ -203,6 +210,35 @@ const duplicateCanvas = async (id) => {
   }
 }
 
+const triggerImport = () => {
+  importInput.value?.click()
+}
+
+const handleImport = async (event) => {
+  const file = event.target.files?.[0]
+  if (!file) return
+
+  try {
+    const text = await file.text()
+    const data = JSON.parse(text)
+    const name = file.name.replace(/\.canvas$|\.json$/, '')
+    const payload = {
+      name,
+      nodes: data.nodes || [],
+      edges: data.edges || [],
+      isPublic: false
+    }
+    const result = await authFetch('/api/canvas', { method: 'POST', body: payload })
+    await loadData()
+    navigateTo(`/canvas/${result.canvas.id}`)
+  } catch (error) {
+    console.error('Failed to import canvas:', error)
+    alert('Ошибка импорта: проверьте формат файла')
+  } finally {
+    event.target.value = ''
+  }
+}
+
 const exportCanvas = async (id) => {
   try {
     const canvas = await authFetch(`/api/canvas/${id}`)