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

src/components/TemplateManager/ElementConstructor.tsx

@@ -1,58 +1,91 @@
-import { Calendar, LayoutGrid, Plus, Settings, Trash2 } from 'lucide-react';
+import { Calendar, LayoutGrid, Plus, Settings, Trash2 } from 'lucide-react'
-import React, { useState } from 'react';
+import React, { useState } from 'react'
-import { getAvailableElementTypes, getElementDefinition } from '../../lib/element-registry';
+import {
-import { autoArrangeElements, findFreePosition, generateDefaultLayout } from '../../lib/utils';
+  getAvailableElementTypes,
-import { CellTarget, ElementType, FormLayoutSettings, TemplateElement } from '../../types/template';
+  getElementDefinition,
-import { Button } from '../ui/button';
+} from '../../lib/element-registry'
-import { Checkbox } from '../ui/checkbox';
+import {
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
+  autoArrangeElements,
-import { Input } from '../ui/input';
+  findFreePosition,
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
+  generateDefaultLayout,
-import { Textarea } from '../ui/textarea';
+} from '../../lib/utils'
-import { VisualLayoutEditor } from './VisualLayoutEditor';
+import {
+  CellTarget,
+  ElementType,
+  FormLayoutSettings,
+  TemplateElement,
+} from '../../types/template'
+import { Button } from '../ui/button'
+import { Checkbox } from '../ui/checkbox'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../ui/dialog'
+import { Input } from '../ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
+import { Textarea } from '../ui/textarea'
+import { VisualLayoutEditor } from './VisualLayoutEditor'
 
 interface ElementFormProps {
-  formData: Partial<TemplateElement>;
+  formData: Partial<TemplateElement>
-  setFormData: React.Dispatch<React.SetStateAction<Partial<TemplateElement>>>;
+  setFormData: React.Dispatch<React.SetStateAction<Partial<TemplateElement>>>
 }
 
 const CellTargetEditor: React.FC<{
-  targets: CellTarget[];
+  targets: CellTarget[]
-  onChange: (targets: CellTarget[]) => void;
+  onChange: (targets: CellTarget[]) => void
 }> = ({ targets, onChange }) => {
   const handleAddTarget = () => {
-    onChange([...targets, { sheet: 'L', cell: '', displayName: '' }]);
+    onChange([...targets, { sheet: 'L', cell: '', displayName: '' }])
-  };
+  }
 
-  const handleUpdateTarget = (index: number, field: keyof CellTarget, value: string) => {
+  const handleUpdateTarget = (
+    index: number,
+    field: keyof CellTarget,
+    value: string,
+  ) => {
     const updatedTargets = targets.map((target, i) =>
-      i === index ? { ...target, [field]: value } : target
+      i === index ? { ...target, [field]: value } : target,
-    );
+    )
-    onChange(updatedTargets);
+    onChange(updatedTargets)
-  };
+  }
 
   const handleRemoveTarget = (index: number) => {
-    onChange(targets.filter((_, i) => i !== index));
+    onChange(targets.filter((_, i) => i !== index))
-  };
+  }
 
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between">
         <label className="text-sm font-medium">Целевые ячейки</label>
         <Button variant="outline" size="sm" onClick={handleAddTarget}>
-          <Plus className="h-4 w-4 mr-1" />
+          <Plus className="mr-1 h-4 w-4" />
           Добавить ячейку
         </Button>
       </div>
-      <div className="space-y-3 max-h-48 overflow-y-auto">
+      <div className="max-h-48 space-y-3 overflow-y-auto">
         {targets.map((target, index) => (
-          <div key={index} className="p-3 border rounded-lg bg-gray-50">
+          <div key={index} className="rounded-lg border bg-gray-50 p-3">
-            <div className="grid grid-cols-3 gap-2 mb-2">
+            <div className="mb-2 grid grid-cols-3 gap-2">
               <div className="space-y-1">
-                <label className="text-xs font-medium text-gray-600">Лист</label>
+                <label className="text-xs font-medium text-gray-600">
+                  Лист
+                </label>
                 <Select
                   value={target.sheet}
-                  onValueChange={(value) => handleUpdateTarget(index, 'sheet', value)}
+                  onValueChange={(value) =>
+                    handleUpdateTarget(index, 'sheet', value)
+                  }
                 >
                   <SelectTrigger className="h-8">
                     <SelectValue />
@@ -66,20 +99,28 @@ const CellTargetEditor: React.FC<{
                 </Select>
               </div>
               <div className="space-y-1">
-                <label className="text-xs font-medium text-gray-600">Ячейка</label>
+                <label className="text-xs font-medium text-gray-600">
+                  Ячейка
+                </label>
                 <Input
                   placeholder="A1, B5..."
                   value={target.cell}
-                  onChange={(e) => handleUpdateTarget(index, 'cell', e.target.value)}
+                  onChange={(e) =>
+                    handleUpdateTarget(index, 'cell', e.target.value)
+                  }
                   className="h-8"
                 />
               </div>
               <div className="space-y-1">
-                <label className="text-xs font-medium text-gray-600">Название</label>
+                <label className="text-xs font-medium text-gray-600">
+                  Название
+                </label>
                 <Input
                   placeholder="Описание"
                   value={target.displayName || ''}
-                  onChange={(e) => handleUpdateTarget(index, 'displayName', e.target.value)}
+                  onChange={(e) =>
+                    handleUpdateTarget(index, 'displayName', e.target.value)
+                  }
                   className="h-8"
                 />
               </div>
@@ -90,27 +131,31 @@ const CellTargetEditor: React.FC<{
               onClick={() => handleRemoveTarget(index)}
               className="h-6 text-xs text-red-600 hover:text-red-700"
             >
-              <Trash2 className="h-3 w-3 mr-1" />
+              <Trash2 className="mr-1 h-3 w-3" />
               Удалить
             </Button>
           </div>
         ))}
         {targets.length === 0 && (
-          <p className="text-sm text-gray-500 text-center py-4">
+          <p className="py-4 text-center text-sm text-gray-500">
             Добавьте ячейки для связи с элементом
           </p>
         )}
       </div>
     </div>
-  );
+  )
-};
+}
 
 // Live Preview компонент
-const ElementPreview: React.FC<{ element: Partial<TemplateElement> }> = ({ element }) => {
+const ElementPreview: React.FC<{ element: Partial<TemplateElement> }> = ({
-  const elementDefinition = element.type ? getElementDefinition(element.type) : null;
+  element,
+}) => {
+  const elementDefinition = element.type
+    ? getElementDefinition(element.type)
+    : null
 
   if (elementDefinition && elementDefinition.Preview) {
-    return <elementDefinition.Preview config={element as any} />;
+    return <elementDefinition.Preview config={element as any} />
   }
 
   // Fallback для старых элементов
@@ -123,7 +168,7 @@ const ElementPreview: React.FC<{ element: Partial<TemplateElement> }> = ({ eleme
             disabled
             className="w-full"
           />
-        );
+        )
 
       case 'textarea':
         return (
@@ -133,7 +178,7 @@ const ElementPreview: React.FC<{ element: Partial<TemplateElement> }> = ({ eleme
             rows={3}
             className="w-full resize-none"
           />
-        );
+        )
 
       case 'number':
         return (
@@ -143,16 +188,10 @@ const ElementPreview: React.FC<{ element: Partial<TemplateElement> }> = ({ eleme
             disabled
             className="w-full"
           />
-        );
+        )
 
       case 'date':
-        return (
+        return <Input type="date" disabled className="w-full" />
-          <Input
-            type="date"
-            disabled
-            className="w-full"
-          />
-        );
 
       case 'select':
         return (
@@ -163,39 +202,41 @@ const ElementPreview: React.FC<{ element: Partial<TemplateElement> }> = ({ eleme
               </span>
             </SelectTrigger>
           </Select>
-        );
+        )
 
       case 'radio':
         return (
           <div className="space-y-2">
-            {element.options?.length ? element.options.map((option, index) => (
+            {element.options?.length ? (
+              element.options.map((option, index) => (
                 <div key={index} className="flex items-center space-x-2">
-                <div className="w-4 h-4 border border-gray-300 rounded-full" />
+                  <div className="h-4 w-4 rounded-full border border-gray-300" />
                   <span className="text-sm">{option.label}</span>
                 </div>
-            )) : (
+              ))
+            ) : (
               <div className="flex items-center space-x-2">
-                <div className="w-4 h-4 border border-gray-300 rounded-full" />
+                <div className="h-4 w-4 rounded-full border border-gray-300" />
                 <span className="text-sm text-gray-500">Вариант 1</span>
               </div>
             )}
           </div>
-        );
+        )
 
       case 'checkbox':
         return (
           <div className="flex items-center space-x-2">
-            <div className="w-4 h-4 border border-gray-300 rounded" />
+            <div className="h-4 w-4 rounded border border-gray-300" />
             <span className="text-sm">
               {element.placeholder || element.label || 'Отметить'}
             </span>
           </div>
-        );
+        )
 
       case 'standards':
         return (
           <div className="space-y-2">
-            <div className="flex items-center justify-between p-3 border border-input rounded-md bg-background">
+            <div className="flex items-center justify-between rounded-md border border-input bg-background p-3">
               <span className="text-sm text-muted-foreground">
                 {element.placeholder || 'Выберите эталоны'}
               </span>
@@ -208,34 +249,34 @@ const ElementPreview: React.FC<{ element: Partial<TemplateElement> }> = ({ eleme
               Выбрано эталонов: 0
             </div>
           </div>
-        );
+        )
 
       default:
         return (
-          <div className="p-3 border border-gray-200 rounded bg-gray-50 text-center text-sm text-gray-500">
+          <div className="rounded border border-gray-200 bg-gray-50 p-3 text-center text-sm text-gray-500">
             Выберите тип элемента
           </div>
-        );
+        )
+    }
   }
-  };
 
   return (
     <div className="space-y-3">
       <div className="text-sm font-medium text-gray-700">Предпросмотр</div>
-      <div className="p-4 border border-gray-200 rounded-lg bg-white">
+      <div className="rounded-lg border border-gray-200 bg-white p-4">
         {element.label && (
-          <label className="block text-sm font-medium text-gray-700 mb-2">
+          <label className="mb-2 block text-sm font-medium text-gray-700">
             {element.label}
-            {element.required && <span className="text-red-500 ml-1">*</span>}
+            {element.required && <span className="ml-1 text-red-500">*</span>}
           </label>
         )}
         {renderPreviewInput()}
         {element.targetCells && element.targetCells.length > 0 && (
-          <div className="flex flex-wrap gap-1 mt-2">
+          <div className="mt-2 flex flex-wrap gap-1">
             {element.targetCells.map((target, index) => (
               <span
                 key={index}
-                className="inline-block px-1.5 py-0.5 bg-blue-100 text-blue-700 text-xs rounded"
+                className="inline-block rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700"
                 title={target.displayName}
               >
                 {target.sheet}!{target.cell}
@@ -245,34 +286,42 @@ const ElementPreview: React.FC<{ element: Partial<TemplateElement> }> = ({ eleme
         )}
       </div>
     </div>
-  );
+  )
-};
+}
 
 const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
-  const elementDefinition = formData.type ? getElementDefinition(formData.type) : null;
+  const elementDefinition = formData.type
+    ? getElementDefinition(formData.type)
+    : null
 
   const handleAddOption = () => {
-    setFormData(prev => ({
+    setFormData((prev) => ({
       ...prev,
       options: [...(prev.options || []), { value: '', label: '' }],
-    }));
+    }))
-  };
+  }
 
-  const handleUpdateOption = (index: number, field: 'value' | 'label', value: string) => {
+  const handleUpdateOption = (
-    setFormData(prev => ({
+    index: number,
+    field: 'value' | 'label',
+    value: string,
+  ) => {
+    setFormData((prev) => ({
       ...prev,
-      options: prev.options?.map((option, i) => (i === index ? { ...option, [field]: value } : option)),
+      options: prev.options?.map((option, i) =>
-    }));
+        i === index ? { ...option, [field]: value } : option,
-  };
+      ),
+    }))
+  }
 
   const handleRemoveOption = (index: number) => {
-    setFormData(prev => ({
+    setFormData((prev) => ({
       ...prev,
       options: prev.options?.filter((_, i) => i !== index),
-    }));
+    }))
-  };
+  }
 
-  const needsOptions = formData.type === 'select' || formData.type === 'radio';
+  const needsOptions = formData.type === 'select' || formData.type === 'radio'
 
   // Если есть определение элемента в реестре, используем его редактор
   if (elementDefinition && elementDefinition.Editor) {
@@ -284,31 +333,35 @@ const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
             <label className="text-sm font-medium">Тип элемента</label>
             <Select
               value={formData.type}
-              onValueChange={value => {
+              onValueChange={(value) => {
-                const newType = value as ElementType;
+                const newType = value as ElementType
-                console.log('Element type changed to:', newType);
+                console.log('Element type changed to:', newType)
 
-                setFormData(prev => {
+                setFormData((prev) => {
-                  const updates: Partial<TemplateElement> = { type: newType };
+                  const updates: Partial<TemplateElement> = { type: newType }
 
                   // Если выбран тип "standards", устанавливаем значения по умолчанию
                   if (newType === 'standards') {
-                    console.log('Standards type selected, getting element definition');
+                    console.log(
-                    const elementDefinition = getElementDefinition('standards');
+                      'Standards type selected, getting element definition',
-                    console.log('Element definition:', elementDefinition);
+                    )
+                    const elementDefinition = getElementDefinition('standards')
+                    console.log('Element definition:', elementDefinition)
 
                     if (elementDefinition && elementDefinition.defaultConfig) {
-                      const defaultConfig = elementDefinition.defaultConfig as any;
+                      const defaultConfig =
-                      console.log('Default config:', defaultConfig);
+                        elementDefinition.defaultConfig as any
-                      updates.targetCells = elementDefinition.mapToCells?.(defaultConfig) || [];
+                      console.log('Default config:', defaultConfig)
-                      console.log('Generated targetCells:', updates.targetCells);
+                      updates.targetCells =
+                        elementDefinition.mapToCells?.(defaultConfig) || []
+                      console.log('Generated targetCells:', updates.targetCells)
                     }
                   }
 
-                  const newFormData = { ...prev, ...updates };
+                  const newFormData = { ...prev, ...updates }
-                  console.log('New form data:', newFormData);
+                  console.log('New form data:', newFormData)
-                  return newFormData;
+                  return newFormData
-                });
+                })
               }}
             >
               <SelectTrigger>
@@ -333,7 +386,9 @@ const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
               <Input
                 placeholder="field_name"
                 value={formData.name}
-                onChange={e => setFormData(prev => ({ ...prev, name: e.target.value }))}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, name: e.target.value }))
+                }
               />
             </div>
 
@@ -342,20 +397,26 @@ const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
               <Input
                 placeholder="Название поля"
                 value={formData.label}
-                onChange={e => setFormData(prev => ({ ...prev, label: e.target.value }))}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, label: e.target.value }))
+                }
               />
             </div>
           </div>
 
           <CellTargetEditor
             targets={formData.targetCells || []}
-            onChange={(targets) => setFormData(prev => ({ ...prev, targetCells: targets }))}
+            onChange={(targets) =>
+              setFormData((prev) => ({ ...prev, targetCells: targets }))
+            }
           />
 
           {/* Специфичный редактор элемента */}
           <elementDefinition.Editor
             config={formData as any}
-            onChange={(newConfig) => setFormData(prev => ({ ...prev, ...newConfig }))}
+            onChange={(newConfig) =>
+              setFormData((prev) => ({ ...prev, ...newConfig }))
+            }
           />
         </div>
 
@@ -364,7 +425,7 @@ const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
           <ElementPreview element={formData} />
         </div>
       </div>
-    );
+    )
   }
 
   // Fallback для старых элементов
@@ -376,31 +437,40 @@ const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
           <label className="text-sm font-medium">Тип элемента</label>
           <Select
             value={formData.type}
-            onValueChange={value => {
+            onValueChange={(value) => {
-              const newType = value as ElementType;
+              const newType = value as ElementType
-              console.log('Element type changed to (fallback):', newType);
+              console.log('Element type changed to (fallback):', newType)
 
-              setFormData(prev => {
+              setFormData((prev) => {
-                const updates: Partial<TemplateElement> = { type: newType };
+                const updates: Partial<TemplateElement> = { type: newType }
 
                 // Если выбран тип "standards", устанавливаем значения по умолчанию
                 if (newType === 'standards') {
-                  console.log('Standards type selected (fallback), getting element definition');
+                  console.log(
-                  const elementDefinition = getElementDefinition('standards');
+                    'Standards type selected (fallback), getting element definition',
-                  console.log('Element definition (fallback):', elementDefinition);
+                  )
+                  const elementDefinition = getElementDefinition('standards')
+                  console.log(
+                    'Element definition (fallback):',
+                    elementDefinition,
+                  )
 
                   if (elementDefinition && elementDefinition.defaultConfig) {
-                    const defaultConfig = elementDefinition.defaultConfig as any;
+                    const defaultConfig = elementDefinition.defaultConfig as any
-                    console.log('Default config (fallback):', defaultConfig);
+                    console.log('Default config (fallback):', defaultConfig)
-                    updates.targetCells = elementDefinition.mapToCells?.(defaultConfig) || [];
+                    updates.targetCells =
-                    console.log('Generated targetCells (fallback):', updates.targetCells);
+                      elementDefinition.mapToCells?.(defaultConfig) || []
+                    console.log(
+                      'Generated targetCells (fallback):',
+                      updates.targetCells,
+                    )
                   }
                 }
 
-                const newFormData = { ...prev, ...updates };
+                const newFormData = { ...prev, ...updates }
-                console.log('New form data (fallback):', newFormData);
+                console.log('New form data (fallback):', newFormData)
-                return newFormData;
+                return newFormData
-              });
+              })
             }}
           >
             <SelectTrigger>
@@ -425,7 +495,9 @@ const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
             <Input
               placeholder="field_name"
               value={formData.name}
-              onChange={e => setFormData(prev => ({ ...prev, name: e.target.value }))}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, name: e.target.value }))
+              }
             />
           </div>
 
@@ -434,7 +506,9 @@ const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
             <Input
               placeholder="Название поля"
               value={formData.label}
-              onChange={e => setFormData(prev => ({ ...prev, label: e.target.value }))}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, label: e.target.value }))
+              }
             />
           </div>
         </div>
@@ -444,7 +518,9 @@ const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
           <Input
             placeholder="Введите значение..."
             value={formData.placeholder}
-            onChange={e => setFormData(prev => ({ ...prev, placeholder: e.target.value }))}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, placeholder: e.target.value }))
+            }
           />
         </div>
 
@@ -452,7 +528,9 @@ const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
           <Checkbox
             id="required"
             checked={formData.required}
-            onCheckedChange={checked => setFormData(prev => ({ ...prev, required: !!checked }))}
+            onCheckedChange={(checked) =>
+              setFormData((prev) => ({ ...prev, required: !!checked }))
+            }
           />
           <label htmlFor="required" className="text-sm font-medium">
             Обязательное поле
@@ -461,7 +539,9 @@ const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
 
         <CellTargetEditor
           targets={formData.targetCells || []}
-          onChange={(targets) => setFormData(prev => ({ ...prev, targetCells: targets }))}
+          onChange={(targets) =>
+            setFormData((prev) => ({ ...prev, targetCells: targets }))
+          }
         />
 
         {needsOptions && (
@@ -469,24 +549,32 @@ const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
             <div className="flex items-center justify-between">
               <label className="text-sm font-medium">Варианты</label>
               <Button variant="outline" size="sm" onClick={handleAddOption}>
-                <Plus className="h-4 w-4 mr-1" />
+                <Plus className="mr-1 h-4 w-4" />
                 Добавить
               </Button>
             </div>
-            <div className="space-y-2 max-h-32 overflow-y-auto">
+            <div className="max-h-32 space-y-2 overflow-y-auto">
               {formData.options?.map((option, index) => (
                 <div key={index} className="flex gap-2">
                   <Input
                     placeholder="Значение"
                     value={option.value}
-                    onChange={e => handleUpdateOption(index, 'value', e.target.value)}
+                    onChange={(e) =>
+                      handleUpdateOption(index, 'value', e.target.value)
+                    }
                   />
                   <Input
                     placeholder="Подпись"
                     value={option.label}
-                    onChange={e => handleUpdateOption(index, 'label', e.target.value)}
+                    onChange={(e) =>
+                      handleUpdateOption(index, 'label', e.target.value)
+                    }
                   />
-                  <Button variant="outline" size="icon" onClick={() => handleRemoveOption(index)}>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={() => handleRemoveOption(index)}
+                  >
                     <Trash2 className="h-4 w-4" />
                   </Button>
                 </div>
@@ -501,22 +589,27 @@ const ElementForm: React.FC<ElementFormProps> = ({ formData, setFormData }) => {
         <ElementPreview element={formData} />
       </div>
     </div>
-  );
+  )
-};
-
-interface CanvasSettingsProps {
-  settings: FormLayoutSettings;
-  onChange: (settings: FormLayoutSettings) => void;
 }
 
-const CanvasSettings: React.FC<CanvasSettingsProps> = ({ settings, onChange }) => {
+interface CanvasSettingsProps {
+  settings: FormLayoutSettings
+  onChange: (settings: FormLayoutSettings) => void
+}
+
+const CanvasSettings: React.FC<CanvasSettingsProps> = ({
+  settings,
+  onChange,
+}) => {
   return (
     <div className="space-y-4">
       <div className="space-y-2">
         <label className="text-sm font-medium">Размер сетки (px)</label>
         <Select
           value={settings.gridSize.toString()}
-          onValueChange={(value) => onChange({ ...settings, gridSize: parseInt(value) })}
+          onValueChange={(value) =>
+            onChange({ ...settings, gridSize: parseInt(value) })
+          }
         >
           <SelectTrigger>
             <SelectValue />
@@ -534,24 +627,29 @@ const CanvasSettings: React.FC<CanvasSettingsProps> = ({ settings, onChange }) =
         <Checkbox
           id="showGrid"
           checked={settings.showGrid}
-          onCheckedChange={(checked) => onChange({ ...settings, showGrid: !!checked })}
+          onCheckedChange={(checked) =>
+            onChange({ ...settings, showGrid: !!checked })
+          }
         />
         <label htmlFor="showGrid" className="text-sm font-medium">
           Показывать сетку
         </label>
       </div>
     </div>
-  );
+  )
-};
+}
 
 interface ElementConstructorProps {
-  elements: TemplateElement[];
+  elements: TemplateElement[]
-  layoutSettings: FormLayoutSettings;
+  layoutSettings: FormLayoutSettings
-  onElementAdd: (element: TemplateElement) => void;
+  onElementAdd: (element: TemplateElement) => void
-  onElementUpdate: (elementId: string, updates: Partial<TemplateElement>) => void;
+  onElementUpdate: (
-  onElementDelete: (elementId: string) => void;
+    elementId: string,
-  onElementsReorder: (elements: TemplateElement[]) => void;
+    updates: Partial<TemplateElement>,
-  onLayoutSettingsChange: (settings: FormLayoutSettings) => void;
+  ) => void
+  onElementDelete: (elementId: string) => void
+  onElementsReorder: (elements: TemplateElement[]) => void
+  onLayoutSettingsChange: (settings: FormLayoutSettings) => void
 }
 
 export const ElementConstructor: React.FC<ElementConstructorProps> = ({
@@ -563,9 +661,11 @@ export const ElementConstructor: React.FC<ElementConstructorProps> = ({
   // onElementsReorder,
   onLayoutSettingsChange,
 }) => {
-  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
-  const [editingElement, setEditingElement] = useState<TemplateElement | null>(null);
+  const [editingElement, setEditingElement] = useState<TemplateElement | null>(
+    null,
+  )
   const [formData, setFormData] = useState<Partial<TemplateElement>>({
     type: 'text',
     name: '',
@@ -574,7 +674,7 @@ export const ElementConstructor: React.FC<ElementConstructorProps> = ({
     placeholder: '',
     required: false,
     options: [],
-  });
+  })
 
   const resetForm = () => {
     setFormData({
@@ -585,42 +685,44 @@ export const ElementConstructor: React.FC<ElementConstructorProps> = ({
       placeholder: '',
       required: false,
       options: [],
-    });
+    })
-  };
+  }
 
   const handleAddElement = () => {
-    console.log('handleAddElement called with formData:', formData);
+    console.log('handleAddElement called with formData:', formData)
 
     if (!formData.name || !formData.label) {
-      console.log('Validation failed: missing name or label');
+      console.log('Validation failed: missing name or label')
-      return;
+      return
     }
 
     // Для элемента типа "standards" не требуем targetCells, так как они генерируются автоматически
     if (formData.type !== 'standards' && !formData.targetCells?.length) {
-      console.log('Validation failed: missing targetCells for non-standards element');
+      console.log(
-      return;
+        'Validation failed: missing targetCells for non-standards element',
+      )
+      return
     }
 
     // Генерируем layout для нового элемента
-    const existingLayouts = elements.map(e => e.layout).filter(Boolean);
+    const existingLayouts = elements.map((e) => e.layout).filter(Boolean)
-    const defaultLayout = generateDefaultLayout(elements.length);
+    const defaultLayout = generateDefaultLayout(elements.length)
 
     const layout = findFreePosition(
       defaultLayout,
       existingLayouts as any[],
-      layoutSettings.gridSize
+      layoutSettings.gridSize,
-    );
+    )
 
     // Специальная обработка для эталонов
-    let targetCells = formData.targetCells || [];
+    let targetCells = formData.targetCells || []
     if (formData.type === 'standards') {
       // Для эталонов генерируем targetCells автоматически, если их нет
       if (!targetCells.length) {
-        const elementDefinition = getElementDefinition('standards');
+        const elementDefinition = getElementDefinition('standards')
         if (elementDefinition && elementDefinition.defaultConfig) {
-          const defaultConfig = elementDefinition.defaultConfig as any;
+          const defaultConfig = elementDefinition.defaultConfig as any
-          targetCells = elementDefinition.mapToCells?.(defaultConfig) || [];
+          targetCells = elementDefinition.mapToCells?.(defaultConfig) || []
         }
       }
     }
@@ -636,75 +738,76 @@ export const ElementConstructor: React.FC<ElementConstructorProps> = ({
       options: formData.options,
       order: elements.length,
       layout,
-    };
+    }
 
-    onElementAdd(newElement);
+    onElementAdd(newElement)
-    resetForm();
+    resetForm()
-    setIsAddDialogOpen(false);
+    setIsAddDialogOpen(false)
-  };
+  }
 
   const handleEditElement = (element: TemplateElement) => {
-    setEditingElement(element);
+    setEditingElement(element)
-    setFormData(element);
+    setFormData(element)
-  };
+  }
 
   const handleUpdateElement = () => {
-    if (!editingElement || !formData.name || !formData.label) return;
+    if (!editingElement || !formData.name || !formData.label) return
 
     // Для элемента типа "standards" не требуем targetCells, так как они генерируются автоматически
-    if (formData.type !== 'standards' && !formData.targetCells?.length) return;
+    if (formData.type !== 'standards' && !formData.targetCells?.length) return
 
-    onElementUpdate(editingElement.id, formData);
+    onElementUpdate(editingElement.id, formData)
-    setEditingElement(null);
+    setEditingElement(null)
-    resetForm();
+    resetForm()
-  };
+  }
 
   const handleCancelEdit = () => {
-    setEditingElement(null);
+    setEditingElement(null)
-    resetForm();
+    resetForm()
-  };
+  }
 
   const handleAutoArrange = () => {
     const arrangedElements = autoArrangeElements(
       elements,
-      layoutSettings.gridSize
+      layoutSettings.gridSize,
-    );
+    )
 
     arrangedElements.forEach((element, index) => {
-      onElementUpdate(element.id, { layout: element.layout, order: index });
+      onElementUpdate(element.id, { layout: element.layout, order: index })
-    });
+    })
-  };
+  }
 
   const handleDeleteAndSelect = (elementId: string) => {
-    onElementDelete(elementId);
+    onElementDelete(elementId)
-    setEditingElement(null);
+    setEditingElement(null)
-    resetForm();
+    resetForm()
-  };
+  }
 
   // const reordered = (reorderedElements: TemplateElement[]) => {
   //   onElementsReorder(reorderedElements);
   //   onLayoutSettingsChange({ ...layoutSettings, showGrid: true });
   // };
 
-
   return (
     <div className="flex h-full w-full">
       {/* Main Content */}
-      <div className="flex-1 flex flex-col bg-gray-50">
+      <div className="flex flex-1 flex-col bg-gray-50">
-        <div className="flex items-center justify-between p-2 border-b bg-white">
+        <div className="flex items-center justify-between border-b bg-white p-2">
-            <div className='px-2'>
+          <div className="px-2">
             <h3 className="text-sm font-medium">Холст</h3>
-                <p className="text-xs text-gray-500">Перетаскивайте элементы для настройки их расположения</p>
+            <p className="text-xs text-gray-500">
+              Перетаскивайте элементы для настройки их расположения
+            </p>
           </div>
           <div className="flex items-center gap-2">
             <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
               <DialogTrigger asChild>
                 <Button variant="outline" size="sm">
-                      <Plus className="h-4 w-4 mr-2" />
+                  <Plus className="mr-2 h-4 w-4" />
                   Добавить элемент
                 </Button>
               </DialogTrigger>
-                  <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
+              <DialogContent className="max-h-[80vh] max-w-4xl overflow-y-auto">
                 <DialogHeader>
                   <DialogTitle>Добавить новый элемент</DialogTitle>
                   <DialogDescription>
@@ -713,14 +816,22 @@ export const ElementConstructor: React.FC<ElementConstructorProps> = ({
                 </DialogHeader>
                 <ElementForm formData={formData} setFormData={setFormData} />
                 <div className="flex justify-end gap-2 pt-4">
-                      <Button onClick={() => setIsAddDialogOpen(false)} variant="outline">
+                  <Button
+                    onClick={() => setIsAddDialogOpen(false)}
+                    variant="outline"
+                  >
                     Отмена
                   </Button>
                   <Button
                     onClick={handleAddElement}
-                        disabled={!formData.name || !formData.label || (formData.type !== 'standards' && !formData.targetCells?.length)}
+                    disabled={
+                      !formData.name ||
+                      !formData.label ||
+                      (formData.type !== 'standards' &&
+                        !formData.targetCells?.length)
+                    }
                   >
-                        <Plus className="h-4 w-4 mr-2" />
+                    <Plus className="mr-2 h-4 w-4" />
                     Добавить элемент
                   </Button>
                 </div>
@@ -728,8 +839,11 @@ export const ElementConstructor: React.FC<ElementConstructorProps> = ({
             </Dialog>
 
             {editingElement && (
-                  <Dialog open={!!editingElement} onOpenChange={() => handleCancelEdit()}>
+              <Dialog
-                    <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
+                open={!!editingElement}
+                onOpenChange={() => handleCancelEdit()}
+              >
+                <DialogContent className="max-h-[80vh] max-w-4xl overflow-y-auto">
                   <DialogHeader>
                     <DialogTitle>Редактировать элемент</DialogTitle>
                     <DialogDescription>
@@ -750,13 +864,13 @@ export const ElementConstructor: React.FC<ElementConstructorProps> = ({
             )}
 
             <Button onClick={handleAutoArrange} variant="outline" size="sm">
-                    <LayoutGrid className="h-4 w-4 mr-2" />
+              <LayoutGrid className="mr-2 h-4 w-4" />
               Расставить автоматически
             </Button>
             <Dialog open={isSettingsOpen} onOpenChange={setIsSettingsOpen}>
               <DialogTrigger asChild>
                 <Button variant="outline" size="sm">
-                            <Settings className="h-4 w-4 mr-2" />
+                  <Settings className="mr-2 h-4 w-4" />
                   Настройки холста
                 </Button>
               </DialogTrigger>
@@ -767,7 +881,10 @@ export const ElementConstructor: React.FC<ElementConstructorProps> = ({
                     Настройте отображение сетки и другие параметры.
                   </DialogDescription>
                 </DialogHeader>
-                        <CanvasSettings settings={layoutSettings} onChange={onLayoutSettingsChange} />
+                <CanvasSettings
+                  settings={layoutSettings}
+                  onChange={onLayoutSettingsChange}
+                />
               </DialogContent>
             </Dialog>
           </div>
@@ -784,5 +901,5 @@ export const ElementConstructor: React.FC<ElementConstructorProps> = ({
         </div>
       </div>
     </div>
-  );
+  )
-}; 
+}

src/components/TemplateManager/VisualLayoutEditor.tsx

@@ -289,7 +289,7 @@ export const VisualLayoutEditor: React.FC<VisualLayoutEditorProps> = ({
             <div
                 className="absolute inset-0 pointer-events-none"
                 style={{
-                    backgroundImage: `linear-gradient(to right, #e5e7eb 1px, transparent 1px), linear-gradient(to bottom, #e5e7eb 1px, transparent 1px)`,
+                    backgroundImage: `radial-gradient(circle, #e5e7eb 1px, transparent 1px)`,
                     backgroundSize: `${gridSize}px ${gridSize}px`,
                 }}
             />
@@ -301,6 +301,7 @@ export const VisualLayoutEditor: React.FC<VisualLayoutEditorProps> = ({
     }, [onElementUpdate]);
     
     const handleCanvasClick = useCallback((e: React.MouseEvent) => {
+        // Снимаем выделение при клике по пустому месту
         if (e.target === e.currentTarget) {
             setSelectedElementId(null);
         }
@@ -324,6 +325,7 @@ export const VisualLayoutEditor: React.FC<VisualLayoutEditorProps> = ({
                 <div
                     className="relative bg-white shadow-lg mx-auto my-8"
                     style={{ width: canvasSize.width, height: canvasSize.height }}
+                    onClick={handleCanvasClick}
                 >
                     {GridPattern}
                     {elements.map((element) => (

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

@@ -1,116 +1,131 @@
-import { Plus, Wrench } from 'lucide-react';
+import { Plus, Wrench } from 'lucide-react'
-import { FC, useState } from 'react';
+import { FC, useState } from 'react'
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom'
-import { ElementConstructor } from '../../../../components/TemplateManager/ElementConstructor';
+import { ElementConstructor } from '../../../../components/TemplateManager/ElementConstructor'
-import { Button } from '../../../../components/ui/button';
+import { Button } from '../../../../components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../../components/ui/card';
+import {
-import { useTemplateContext } from '../../../../contexts/TemplateContext';
+  Card,
-import { FormLayoutSettings, Template, TemplateElement } from '../../../../types/template';
+  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 navigate = useNavigate()
-  const { templates, updateTemplate } = useTemplateContext();
+  const { templates, updateTemplate } = useTemplateContext()
-  const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
+  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');
+      console.log('No selected template')
-      return;
+      return
     }
 
     const updatedTemplate = {
       ...selectedTemplate,
       elements: [...selectedTemplate.elements, element],
       updatedAt: new Date(),
-    };
+    }
 
-    console.log('Updated template:', updatedTemplate);
+    console.log('Updated template:', updatedTemplate)
-    console.log('Elements count:', updatedTemplate.elements.length);
+    console.log('Elements count:', updatedTemplate.elements.length)
 
-    updateTemplate(updatedTemplate);
+    updateTemplate(updatedTemplate)
-    setSelectedTemplate(updatedTemplate);
+    setSelectedTemplate(updatedTemplate)
-  };
+  }
 
-  const handleElementUpdate = (elementId: string, updates: Partial<TemplateElement>) => {
+  const handleElementUpdate = (
-    if (!selectedTemplate) return;
+    elementId: string,
+    updates: Partial<TemplateElement>,
+  ) => {
+    if (!selectedTemplate) return
 
     const updatedTemplate = {
       ...selectedTemplate,
-      elements: selectedTemplate.elements.map(el => 
+      elements: selectedTemplate.elements.map((el) =>
-        el.id === elementId ? { ...el, ...updates } : el
+        el.id === elementId ? { ...el, ...updates } : el,
       ),
       updatedAt: new Date(),
-    };
+    }
 
-    updateTemplate(updatedTemplate);
+    updateTemplate(updatedTemplate)
-    setSelectedTemplate(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);
+    updateTemplate(updatedTemplate)
-    setSelectedTemplate(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);
+    updateTemplate(updatedTemplate)
-    setSelectedTemplate(updatedTemplate);
+    setSelectedTemplate(updatedTemplate)
-  };
+  }
 
   const handleLayoutSettingsChange = (settings: FormLayoutSettings) => {
-    if (!selectedTemplate) return;
+    if (!selectedTemplate) return
 
     const updatedTemplate = {
       ...selectedTemplate,
       layoutSettings: settings,
       updatedAt: new Date(),
-    };
+    }
 
-    updateTemplate(updatedTemplate);
+    updateTemplate(updatedTemplate)
-    setSelectedTemplate(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,15 +158,19 @@ export const ElementsCreation: FC = () => {
           />
         </div>
       </div>
-    );
+    )
   }
 
   return (
-    <div className="p-6 max-w-7xl mx-auto">
+    <div className="mx-auto max-w-7xl p-6">
-      <div className="flex items-center justify-between mb-6">
+      <div className="mb-6 flex items-center justify-between">
         <div>
-          <h1 className="text-3xl font-bold text-gray-900">Создание элементов</h1>
+          <h1 className="text-3xl font-bold text-gray-900">
-          <p className="text-gray-600 mt-2">Выберите шаблон для создания элементов интерфейса</p>
+            Создание элементов
+          </h1>
+          <p className="mt-2 text-gray-600">
+            Выберите шаблон для создания элементов интерфейса
+          </p>
         </div>
 
         <Button
@@ -170,19 +184,26 @@ export const ElementsCreation: FC = () => {
       </div>
 
       {templates.length === 0 ? (
-        <div className="text-center py-12">
+        <div className="py-12 text-center">
-          <Wrench className="h-16 w-16 text-gray-400 mx-auto mb-4" />
+          <Wrench className="mx-auto mb-4 h-16 w-16 text-gray-400" />
-          <h3 className="text-lg font-medium text-gray-900 mb-2">Нет доступных шаблонов</h3>
+          <h3 className="mb-2 text-lg font-medium text-gray-900">
-          <p className="text-gray-600 mb-6">Создайте шаблон протокола для начала работы с элементами</p>
+            Нет доступных шаблонов
+          </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>
-  );
+  )
-}; 
+}

src/pages/ProtocolCreation/ui/Page/Page.tsx

@@ -387,7 +387,7 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
       {/* Полноэкранная форма */}
       <div className="flex-1 overflow-auto">
         <div
-          className="relative bg-white shadow-lg mx-auto my-8"
+          className="relative mx-auto my-8"
           style={{ width: canvasSize.width, height: canvasSize.height }}
         >
             {template.elements.map((element) => {