@sequent-org/moodboard 1.0.24 → 1.1.0

package/src/ui/FramePropertiesPanel.js

@@ -28,8 +28,12 @@ export class FramePropertiesPanel {
         });
 
         // Обновляем позицию при любых изменениях (как в TextPropertiesPanel)
+        this.eventBus.on(Events.Tool.DragStart, () => this.hide());
         this.eventBus.on(Events.Tool.DragUpdate, () => this.reposition());
+        this.eventBus.on(Events.Tool.DragEnd, () => this.updateFromSelection());
         this.eventBus.on(Events.Tool.GroupDragUpdate, () => this.reposition());
+        this.eventBus.on(Events.Tool.GroupDragStart, () => this.hide());
+        this.eventBus.on(Events.Tool.GroupDragEnd, () => this.updateFromSelection());
         this.eventBus.on(Events.Tool.ResizeUpdate, () => this.reposition());
         this.eventBus.on(Events.Tool.RotateUpdate, () => this.reposition());
 
@@ -88,6 +92,7 @@ export class FramePropertiesPanel {
         
         // Обновляем контролы в соответствии с текущими свойствами объекта
         this._updateControlsFromObject();
+        this._syncTypeFromObject();
     }
 
     hide() {
@@ -104,16 +109,16 @@ export class FramePropertiesPanel {
             position: 'absolute',
             display: 'none',
             alignItems: 'center',
-            gap: '8px',
-            padding: '8px 12px',
+            gap: '4px',
+            padding: '4px 6px',
             backgroundColor: 'white',
-            border: '1px solid #e0e0e0',
-            borderRadius: '8px',
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-            fontSize: '14px',
+            border: '1px solid #e5e7eb',
+            borderRadius: '6px',
+            boxShadow: '0 2px 6px rgba(0, 0, 0, 0.12)',
+            fontSize: '12px',
             fontFamily: 'Arial, sans-serif',
-            minWidth: '280px',
-            height: '60px',
+            minWidth: '160px',
+            height: 'auto',
             zIndex: '10000'
         });
 
@@ -158,25 +163,25 @@ export class FramePropertiesPanel {
         const { x, y } = posData.position;
         const { width, height } = sizeData.size;
 
-        // Позиционируем панель НАД фреймом, но ниже ручек ресайза
-        const panelWidth = this.panel.offsetWidth || 200;
-        const panelHeight = this.panel.offsetHeight || 44;
-        
-        const panelX = x + panelWidth/2.5; // по центру фрейма
-        
-        // Пытаемся разместить панель над фреймом
-        let  panelY = y ;
-        
-        // Если панель уходит за верхнюю границу экрана, размещаем её ниже фрейма
-        // 10px ниже фрейма
+        // Позиционируем панель над фреймом, по центру
+        const panelRect = this.panel.getBoundingClientRect();
+        const panelW = Math.max(1, panelRect.width || 280);
+        const panelH = Math.max(1, panelRect.height || 60);
+        let panelX = x + (width / 2) - (panelW / 2);
+        let panelY = y - panelH - 40; // отступ 40px над фреймом
+
+        // Если панель уходит за верх, переносим ниже фрейма
+        if (panelY < 0) {
+            panelY = y + height + 40;
+        }
 
-        console.log('🖼️ FramePropertiesPanel: Positioning above frame:', { 
+        console.log('🖼️ FramePropertiesPanel: Positioning above frame:', {
             frameX: x, frameY: y, frameWidth: width, frameHeight: height,
             panelX, panelY
         });
 
-        this.panel.style.left = `${panelX}px`;
-        this.panel.style.top = `${panelY}px`;
+        this.panel.style.left = `${Math.round(panelX)}px`;
+        this.panel.style.top = `${Math.round(panelY)}px`;
         
         console.log('🖼️ FramePropertiesPanel: Panel CSS applied:', {
             left: this.panel.style.left,
@@ -190,16 +195,17 @@ export class FramePropertiesPanel {
         Object.assign(titleContainer.style, {
             display: 'flex',
             alignItems: 'center',
-            gap: '8px',
-            padding: '8px 12px'
+            gap: '4px',
+            padding: '4px 6px'
         });
 
         // Лейбл
         const titleLabel = document.createElement('span');
         titleLabel.textContent = 'Название:';
-        titleLabel.style.fontSize = '12px';
+        titleLabel.style.fontSize = '11px';
         titleLabel.style.color = '#666';
-        titleLabel.style.minWidth = '60px';
+        titleLabel.style.width = '56px';
+        titleLabel.style.textAlign = 'right';
 
         // Поле ввода для названия
         const titleInput = document.createElement('input');
@@ -207,11 +213,12 @@ export class FramePropertiesPanel {
         titleInput.placeholder = 'Название фрейма';
         Object.assign(titleInput.style, {
             flex: '1',
-            padding: '4px 8px',
+            padding: '2px 4px',
             border: '1px solid #ddd',
             borderRadius: '4px',
             fontSize: '12px',
-            outline: 'none'
+            outline: 'none',
+            height: '22px'
         });
 
         // Обработчик изменения названия
@@ -221,6 +228,14 @@ export class FramePropertiesPanel {
             }
         });
 
+        // Блокируем Delete/Backspace от всплытия, чтобы не удалялся весь фрейм при фокусе в поле
+        titleInput.addEventListener('keydown', (e) => {
+            const key = e.key;
+            if (key === 'Backspace' || key === 'Delete') {
+                e.stopPropagation();
+            }
+        });
+
         // Обработчик Enter для подтверждения
         titleInput.addEventListener('keypress', (e) => {
             if (e.key === 'Enter') {
@@ -239,22 +254,23 @@ export class FramePropertiesPanel {
         Object.assign(colorContainer.style, {
             display: 'flex',
             alignItems: 'center',
-            gap: '8px',
-            padding: '8px 12px'
+            gap: '4px',
+            padding: '4px 6px'
         });
 
         // Лейбл для цвета
         const colorLabel = document.createElement('span');
         colorLabel.textContent = 'Фон:';
-        colorLabel.style.fontSize = '12px';
+        colorLabel.style.fontSize = '11px';
         colorLabel.style.color = '#666';
-        colorLabel.style.minWidth = '60px';
+        colorLabel.style.width = '56px';
+        colorLabel.style.textAlign = 'right';
 
         // Кнопка выбора цвета
         const colorButton = document.createElement('button');
         Object.assign(colorButton.style, {
-            width: '32px',
-            height: '24px',
+            width: '20px',
+            height: '20px',
             border: '1px solid #ccc',
             borderRadius: '4px',
             cursor: 'pointer',
@@ -274,8 +290,60 @@ export class FramePropertiesPanel {
         colorContainer.appendChild(colorLabel);
         colorContainer.appendChild(colorButton);
 
+        // Контейнер для типа фрейма
+        const typeContainer = document.createElement('div');
+        Object.assign(typeContainer.style, {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            padding: '4px 6px'
+        });
+
+        const typeLabel = document.createElement('span');
+        typeLabel.textContent = 'Тип:';
+        typeLabel.style.fontSize = '11px';
+        typeLabel.style.color = '#666';
+        typeLabel.style.width = '56px';
+        typeLabel.style.textAlign = 'right';
+
+        const typeSelect = document.createElement('select');
+        Object.assign(typeSelect.style, {
+            flex: '1',
+            padding: '2px 4px',
+            border: '1px solid #ddd',
+            borderRadius: '4px',
+            fontSize: '12px',
+            outline: 'none',
+            height: '22px',
+            maxWidth: '100%'
+        });
+        const options = [
+            { value: 'custom', label: 'Произвольный' },
+            { value: 'a4', label: 'A4' },
+            { value: '1x1', label: '1:1' },
+            { value: '4x3', label: '4:3' },
+            { value: '16x9', label: '16:9' }
+        ];
+        options.forEach(opt => {
+            const o = document.createElement('option');
+            o.value = opt.value;
+            o.textContent = opt.label;
+            typeSelect.appendChild(o);
+        });
+        this.frameTypeSelect = typeSelect;
+
+        typeSelect.addEventListener('change', () => {
+            if (!this.currentId) return;
+            const v = typeSelect.value;
+            this._applyFrameType(v);
+        });
+
+        typeContainer.appendChild(typeLabel);
+        typeContainer.appendChild(typeSelect);
+
         panel.appendChild(titleContainer);
         panel.appendChild(colorContainer);
+        panel.appendChild(typeContainer);
 
         // Создаем палитру цветов (скрытую)
         this._createColorPalette(panel);
@@ -446,6 +514,81 @@ export class FramePropertiesPanel {
         this.colorButton.title = `Цвет фона: ${hexColor}`;
     }
 
+    _syncTypeFromObject() {
+        if (!this.frameTypeSelect || !this.currentId) return;
+        const objectData = this.core.getObjectData(this.currentId);
+        const t = (objectData && objectData.properties && objectData.properties.type) || 'custom';
+        this.frameTypeSelect.value = t;
+    }
+
+    _applyFrameType(typeValue) {
+        if (!this.currentId) return;
+
+        // 1) Обновляем тип и временно отключаем фиксацию пропорций на время программного ресайза
+        const willLockAfter = typeValue !== 'custom';
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: { properties: { type: typeValue, lockedAspect: false } }
+        });
+
+        // 2) Для пресетов меняем размеры под аспект, сохраняя центр
+        if (!willLockAfter) return; // Произвольный: без изменения размеров
+
+        // Аспект по типу
+        const aspectMap = {
+            'a4': 210 / 297,
+            '1x1': 1,
+            '4x3': 4 / 3,
+            '16x9': 16 / 9
+        };
+        const aspect = aspectMap[typeValue] || 1;
+
+        // Текущие позиция и размер
+        const posData = { objectId: this.currentId, position: null };
+        const sizeData = { objectId: this.currentId, size: null };
+        this.eventBus.emit(Events.Tool.GetObjectPosition, posData);
+        this.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+        if (!posData.position || !sizeData.size) return;
+
+        const oldX = posData.position.x;
+        const oldY = posData.position.y;
+        const oldW = Math.max(1, sizeData.size.width);
+        const oldH = Math.max(1, sizeData.size.height);
+        const cx = oldX + oldW / 2;
+        const cy = oldY + oldH / 2;
+
+        // Сохраняем визуальный масштаб: подбираем размеры с тем же приблизительным "площадью"
+        const area = oldW * oldH;
+        let newW = Math.max(1, Math.round(Math.sqrt(area * aspect)));
+        let newH = Math.max(1, Math.round(newW / aspect));
+
+        const newX = Math.round(cx - newW / 2);
+        const newY = Math.round(cy - newH / 2);
+
+        // Применяем через события resize для согласованности с историей/ядром
+        this.eventBus.emit(Events.Tool.ResizeUpdate, {
+            object: this.currentId,
+            size: { width: newW, height: newH },
+            position: { x: newX, y: newY }
+        });
+        this.eventBus.emit(Events.Tool.ResizeEnd, {
+            object: this.currentId,
+            oldSize: { width: oldW, height: oldH },
+            newSize: { width: newW, height: newH },
+            oldPosition: { x: oldX, y: oldY },
+            newPosition: { x: newX, y: newY }
+        });
+
+        // Обновим UI сразу
+        this._syncTypeFromObject();
+
+        // 3) Включаем обратно фиксацию пропорций (для пресетов)
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: { properties: { lockedAspect: true } }
+        });
+    }
+
     destroy() {
         // Удаляем обработчик клика по документу
         document.removeEventListener('click', this._documentClickHandler.bind(this));