сетка точками и выделение

src/pages/ElementsCreation/ui/Page/Page.tsx

@@ -1,116 +1,131 @@
-import { Plus, Wrench } from 'lucide-react';
-import { FC, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { ElementConstructor } from '../../../../components/TemplateManager/ElementConstructor';
-import { Button } from '../../../../components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { useTemplateContext } from '../../../../contexts/TemplateContext';
-import { FormLayoutSettings, Template, TemplateElement } from '../../../../types/template';
+import { Plus, Wrench } from 'lucide-react'
+import { FC, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ElementConstructor } from '../../../../components/TemplateManager/ElementConstructor'
+import { Button } from '../../../../components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../../../components/ui/card'
+import { useTemplateContext } from '../../../../contexts/TemplateContext'
+import {
+  FormLayoutSettings,
+  Template,
+  TemplateElement,
+} from '../../../../types/template'
 
 export const ElementsCreation: FC = () => {
-  const navigate = useNavigate();
-  const { templates, updateTemplate } = useTemplateContext();
-  const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
+  const navigate = useNavigate()
+  const { templates, updateTemplate } = useTemplateContext()
+  const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(
+    null,
+  )
 
   const handleTemplateSelect = (template: Template) => {
-    setSelectedTemplate(template);
-  };
+    setSelectedTemplate(template)
+  }
 
   const handleElementAdd = (element: TemplateElement) => {
-    console.log('handleElementAdd called with element:', element);
-    
+    console.log('handleElementAdd called with element:', element)
+
     if (!selectedTemplate) {
-      console.log('No selected template');
-      return;
+      console.log('No selected template')
+      return
     }
-    
+
     const updatedTemplate = {
       ...selectedTemplate,
       elements: [...selectedTemplate.elements, element],
       updatedAt: new Date(),
-    };
-    
-    console.log('Updated template:', updatedTemplate);
-    console.log('Elements count:', updatedTemplate.elements.length);
-    
-    updateTemplate(updatedTemplate);
-    setSelectedTemplate(updatedTemplate);
-  };
+    }
+
+    console.log('Updated template:', updatedTemplate)
+    console.log('Elements count:', updatedTemplate.elements.length)
+
+    updateTemplate(updatedTemplate)
+    setSelectedTemplate(updatedTemplate)
+  }
+
+  const handleElementUpdate = (
+    elementId: string,
+    updates: Partial<TemplateElement>,
+  ) => {
+    if (!selectedTemplate) return
 
-  const handleElementUpdate = (elementId: string, updates: Partial<TemplateElement>) => {
-    if (!selectedTemplate) return;
-    
     const updatedTemplate = {
       ...selectedTemplate,
-      elements: selectedTemplate.elements.map(el => 
-        el.id === elementId ? { ...el, ...updates } : el
+      elements: selectedTemplate.elements.map((el) =>
+        el.id === elementId ? { ...el, ...updates } : el,
       ),
       updatedAt: new Date(),
-    };
-    
-    updateTemplate(updatedTemplate);
-    setSelectedTemplate(updatedTemplate);
-  };
+    }
+
+    updateTemplate(updatedTemplate)
+    setSelectedTemplate(updatedTemplate)
+  }
 
   const handleElementDelete = (elementId: string) => {
-    if (!selectedTemplate) return;
-    
+    if (!selectedTemplate) return
+
     const updatedTemplate = {
       ...selectedTemplate,
-      elements: selectedTemplate.elements.filter(el => el.id !== elementId),
+      elements: selectedTemplate.elements.filter((el) => el.id !== elementId),
       updatedAt: new Date(),
-    };
-    
-    updateTemplate(updatedTemplate);
-    setSelectedTemplate(updatedTemplate);
-  };
+    }
+
+    updateTemplate(updatedTemplate)
+    setSelectedTemplate(updatedTemplate)
+  }
 
   const handleElementsReorder = (reorderedElements: TemplateElement[]) => {
-    if (!selectedTemplate) return;
-    
+    if (!selectedTemplate) return
+
     // Обновляем порядок элементов
     const elementsWithOrder = reorderedElements.map((element, index) => ({
       ...element,
       order: index,
-    }));
-    
+    }))
+
     const updatedTemplate = {
       ...selectedTemplate,
       elements: elementsWithOrder,
       updatedAt: new Date(),
-    };
-    
-    updateTemplate(updatedTemplate);
-    setSelectedTemplate(updatedTemplate);
-  };
+    }
+
+    updateTemplate(updatedTemplate)
+    setSelectedTemplate(updatedTemplate)
+  }
 
   const handleLayoutSettingsChange = (settings: FormLayoutSettings) => {
-    if (!selectedTemplate) return;
-    
+    if (!selectedTemplate) return
+
     const updatedTemplate = {
       ...selectedTemplate,
       layoutSettings: settings,
       updatedAt: new Date(),
-    };
-    
-    updateTemplate(updatedTemplate);
-    setSelectedTemplate(updatedTemplate);
-  };
+    }
+
+    updateTemplate(updatedTemplate)
+    setSelectedTemplate(updatedTemplate)
+  }
 
   const handleBack = () => {
-    setSelectedTemplate(null);
-  };
+    setSelectedTemplate(null)
+  }
 
   // Настройки отображения по умолчанию
   const defaultLayoutSettings: FormLayoutSettings = {
     gridSize: 20,
     showGrid: true,
-  };
+  }
 
   if (selectedTemplate) {
     return (
       <div className="h-full">
-        <div className="bg-white border-b border-gray-200 p-4 sticky top-0 z-50">
+        <div className="sticky top-0 z-50 border-b border-gray-200 bg-white p-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4">
               <Button variant="ghost" onClick={handleBack}>
@@ -120,26 +135,21 @@ export const ElementsCreation: FC = () => {
                 <h1 className="text-xl font-semibold text-gray-800">
                   Конструктор элементов: {selectedTemplate.name}
                 </h1>
-                <p className="text-sm text-gray-600 mt-1">
-                  Создайте элементы формы и разместите их на холсте перетаскиванием
+                <p className="mt-1 text-sm text-gray-600">
+                  Создайте элементы формы и разместите их на холсте
+                  перетаскиванием
                 </p>
               </div>
             </div>
-            <div className="flex gap-2">
-              <Button onClick={() => navigate('/create-protocol')} variant="outline">
-                Предпросмотр формы
-              </Button>
-              <Button onClick={() => navigate('/templates')} variant="outline">
-                К шаблонам
-              </Button>
-            </div>
           </div>
         </div>
-        
+
         <div className="h-[calc(100vh-104px)]">
           <ElementConstructor
             elements={selectedTemplate.elements}
-            layoutSettings={selectedTemplate.layoutSettings || defaultLayoutSettings}
+            layoutSettings={
+              selectedTemplate.layoutSettings || defaultLayoutSettings
+            }
             onElementAdd={handleElementAdd}
             onElementUpdate={handleElementUpdate}
             onElementDelete={handleElementDelete}
@@ -148,19 +158,23 @@ export const ElementsCreation: FC = () => {
           />
         </div>
       </div>
-    );
+    )
   }
 
   return (
-    <div className="p-6 max-w-7xl mx-auto">
-      <div className="flex items-center justify-between mb-6">
+    <div className="mx-auto max-w-7xl p-6">
+      <div className="mb-6 flex items-center justify-between">
         <div>
-          <h1 className="text-3xl font-bold text-gray-900">Создание элементов</h1>
-          <p className="text-gray-600 mt-2">Выберите шаблон для создания элементов интерфейса</p>
+          <h1 className="text-3xl font-bold text-gray-900">
+            Создание элементов
+          </h1>
+          <p className="mt-2 text-gray-600">
+            Выберите шаблон для создания элементов интерфейса
+          </p>
         </div>
-        
-        <Button 
-          variant="outline" 
+
+        <Button
+          variant="outline"
           onClick={() => navigate('/templates')}
           className="flex items-center gap-2"
         >
@@ -170,19 +184,26 @@ export const ElementsCreation: FC = () => {
       </div>
 
       {templates.length === 0 ? (
-        <div className="text-center py-12">
-          <Wrench className="h-16 w-16 text-gray-400 mx-auto mb-4" />
-          <h3 className="text-lg font-medium text-gray-900 mb-2">Нет доступных шаблонов</h3>
-          <p className="text-gray-600 mb-6">Создайте шаблон протокола для начала работы с элементами</p>
+        <div className="py-12 text-center">
+          <Wrench className="mx-auto mb-4 h-16 w-16 text-gray-400" />
+          <h3 className="mb-2 text-lg font-medium text-gray-900">
+            Нет доступных шаблонов
+          </h3>
+          <p className="mb-6 text-gray-600">
+            Создайте шаблон протокола для начала работы с элементами
+          </p>
           <Button onClick={() => navigate('/templates')}>
-            <Plus className="h-4 w-4 mr-2" />
+            <Plus className="mr-2 h-4 w-4" />
             Создать шаблон
           </Button>
         </div>
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
           {templates.map((template) => (
-            <Card key={template.id} className="hover:shadow-lg transition-shadow cursor-pointer">
+            <Card
+              key={template.id}
+              className="cursor-pointer transition-shadow hover:shadow-lg"
+            >
               <CardHeader>
                 <CardTitle className="text-lg">{template.name}</CardTitle>
                 {template.description && (
@@ -197,7 +218,7 @@ export const ElementsCreation: FC = () => {
                     <Wrench className="h-4 w-4" />
                     <span>{template.elements.length} элементов создано</span>
                   </div>
-                  <div className="text-xs text-gray-500 mt-2">
+                  <div className="mt-2 text-xs text-gray-500">
                     Обновлен: {template.updatedAt.toLocaleDateString('ru-RU')}
                   </div>
                 </div>
@@ -215,5 +236,5 @@ export const ElementsCreation: FC = () => {
         </div>
       )}
     </div>
-  );
-}; 
+  )
+}