холст конструктор

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

@@ -95,17 +95,14 @@ export const ElementsCreation: FC = () => {
 
   // Настройки отображения по умолчанию
   const defaultLayoutSettings: FormLayoutSettings = {
-    columns: 2,
-    grouping: 'none',
-    elementSpacing: 'normal',
-    showLabels: true,
-    enableDragDrop: true,
+    gridSize: 20,
+    showGrid: true,
   };
 
   if (selectedTemplate) {
     return (
-      <div className="h-full bg-gray-50">
-        <div className="bg-white border-b border-gray-200 p-4">
+      <div className="h-full">
+        <div className="bg-white border-b border-gray-200 p-4 sticky top-0 z-50">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4">
               <Button variant="ghost" onClick={handleBack}>
@@ -116,7 +113,7 @@ export const ElementsCreation: FC = () => {
                   Конструктор элементов: {selectedTemplate.name}
                 </h1>
                 <p className="text-sm text-gray-600 mt-1">
-                  Создайте элементы формы для связи с ячейками шаблона. Используйте drag & drop для изменения порядка.
+                  Создайте элементы формы и разместите их на холсте перетаскиванием
                 </p>
               </div>
             </div>
@@ -131,7 +128,7 @@ export const ElementsCreation: FC = () => {
           </div>
         </div>
         
-        <div className="flex-1">
+        <div className="h-[calc(100vh-104px)]">
           <ElementConstructor
             elements={selectedTemplate.elements}
             layoutSettings={selectedTemplate.layoutSettings || defaultLayoutSettings}
@@ -192,17 +189,6 @@ export const ElementsCreation: FC = () => {
                     <Wrench className="h-4 w-4" />
                     <span>{template.elements.length} элементов создано</span>
                   </div>
-                  {template.layoutSettings && (
-                    <div className="flex items-center gap-2">
-                      <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
-                        {template.layoutSettings.columns} столбца
-                      </span>
-                      <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
-                        {template.layoutSettings.grouping === 'none' ? 'Без группировки' : 
-                         template.layoutSettings.grouping === 'by-type' ? 'По типу' : 'По категориям'}
-                      </span>
-                    </div>
-                  )}
                   <div className="text-xs text-gray-500 mt-2">
                     Обновлен: {template.updatedAt.toLocaleDateString('ru-RU')}
                   </div>