@sequent-org/moodboard 1.2.119 → 1.3.0

package/src/ui/FramePropertiesPanel.js

@@ -1,4 +1,5 @@
 import { Events } from '../core/events/Events.js';
+import { UpdateFrameTypeCommand } from '../core/commands/UpdateFrameTypeCommand.js';
 
 /**
  * Панель свойств фрейма
@@ -17,41 +18,67 @@ export class FramePropertiesPanel {
     }
 
     _attachEvents() {
-        // Показываем панель при изменении выделения
-        this.eventBus.on(Events.Tool.SelectionAdd, () => this.updateFromSelection());
-        this.eventBus.on(Events.Tool.SelectionRemove, () => this.updateFromSelection());
-        this.eventBus.on(Events.Tool.SelectionClear, () => this.hide());
-
-        // Скрываем панель при удалении объекта
-        this.eventBus.on(Events.Object.Deleted, (objectId) => {
+        this._handlers = {};
+        this._handlers.onSelectionAdd = () => this.updateFromSelection();
+        this._handlers.onSelectionRemove = () => this.updateFromSelection();
+        this._handlers.onSelectionClear = () => this.hide();
+        this._handlers.onDeleted = (objectId) => {
             if (this.currentId && objectId === this.currentId) this.hide();
-        });
-
-        // Обновляем позицию при любых изменениях (как в 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());
-
-        // Обновляем позицию при зуме/пане
-        this.eventBus.on(Events.UI.ZoomPercent, () => {
-            if (this.currentId) this.reposition();
-        });
-
-        this.eventBus.on(Events.Tool.PanUpdate, () => {
-            if (this.currentId) this.reposition();
-        });
-
-        // Скрываем панель при активации других инструментов
-        this.eventBus.on(Events.Tool.Activated, ({ tool }) => {
-            if (tool !== 'select') {
-                this.hide();
+        };
+        this._handlers.onDragStart = () => this.hide();
+        this._handlers.onDragUpdate = () => this._repositionThrottled();
+        this._handlers.onDragEnd = () => this.updateFromSelection();
+        this._handlers.onGroupDragUpdate = () => this._repositionThrottled();
+        this._handlers.onGroupDragStart = () => this.hide();
+        this._handlers.onGroupDragEnd = () => this.updateFromSelection();
+        this._handlers.onResizeUpdate = () => this._repositionThrottled();
+        this._handlers.onRotateUpdate = () => this._repositionThrottled();
+        this._handlers.onZoomPercent = () => {
+            if (this.currentId) this._repositionThrottled();
+        };
+        this._handlers.onPanUpdate = () => {
+            if (this.currentId) this._repositionThrottled();
+        };
+        this._handlers.onActivated = ({ tool }) => {
+            if (tool !== 'select') this.hide();
+        };
+        this._handlers.onStateChanged = (data) => {
+            const { objectId } = data;
+            if (this.currentId && objectId === this.currentId && this.panel && this.panel.style.display !== 'none') {
+                this._updateControlsFromObject();
+                this._syncTypeFromObject();
             }
-        });
+        };
+        this._handlers.onHistoryChanged = () => {
+            if (this.currentId && this.panel && this.panel.style.display !== 'none') {
+                this._updateControlsFromObject();
+                this._syncTypeFromObject();
+            }
+        };
+        this._handlers.onTransformUpdated = (data) => {
+            if (this.currentId && data.objectId === this.currentId && this.panel && this.panel.style.display !== 'none') {
+                this._repositionThrottled();
+            }
+        };
+
+        this.eventBus.on(Events.Tool.SelectionAdd, this._handlers.onSelectionAdd);
+        this.eventBus.on(Events.Tool.SelectionRemove, this._handlers.onSelectionRemove);
+        this.eventBus.on(Events.Tool.SelectionClear, this._handlers.onSelectionClear);
+        this.eventBus.on(Events.Object.Deleted, this._handlers.onDeleted);
+        this.eventBus.on(Events.Tool.DragStart, this._handlers.onDragStart);
+        this.eventBus.on(Events.Tool.DragUpdate, this._handlers.onDragUpdate);
+        this.eventBus.on(Events.Tool.DragEnd, this._handlers.onDragEnd);
+        this.eventBus.on(Events.Tool.GroupDragUpdate, this._handlers.onGroupDragUpdate);
+        this.eventBus.on(Events.Tool.GroupDragStart, this._handlers.onGroupDragStart);
+        this.eventBus.on(Events.Tool.GroupDragEnd, this._handlers.onGroupDragEnd);
+        this.eventBus.on(Events.Tool.ResizeUpdate, this._handlers.onResizeUpdate);
+        this.eventBus.on(Events.Tool.RotateUpdate, this._handlers.onRotateUpdate);
+        this.eventBus.on(Events.UI.ZoomPercent, this._handlers.onZoomPercent);
+        this.eventBus.on(Events.Tool.PanUpdate, this._handlers.onPanUpdate);
+        this.eventBus.on(Events.Tool.Activated, this._handlers.onActivated);
+        this.eventBus.on(Events.Object.StateChanged, this._handlers.onStateChanged);
+        this.eventBus.on(Events.History.Changed, this._handlers.onHistoryChanged);
+        this.eventBus.on(Events.Object.TransformUpdated, this._handlers.onTransformUpdated);
     }
 
     updateFromSelection() {
@@ -117,6 +144,7 @@ export class FramePropertiesPanel {
 
         this.panel = panel;
         this.container.appendChild(panel);
+        this._boundDocumentClickHandler = this._documentClickHandler.bind(this);
     }
 
     _updateControlsFromObject() {
@@ -124,6 +152,18 @@ export class FramePropertiesPanel {
         // Здесь будет логика синхронизации контролов с объектом
     }
 
+    _repositionThrottled() {
+        if (this._repositionScheduled) return;
+        this._repositionScheduled = true;
+        const rafId = requestAnimationFrame(() => {
+            this._repositionScheduled = false;
+            this._repositionRafId = null;
+            if (!this.panel) return;
+            this.reposition();
+        });
+        this._repositionRafId = rafId;
+    }
+
     reposition() {
         if (!this.panel || !this.currentId || this.panel.style.display === 'none') {
             return;
@@ -200,11 +240,16 @@ export class FramePropertiesPanel {
             outline: 'none'
         });
 
-        // Обработчик изменения названия
+        // Обработчик изменения названия (debounce 200ms)
+        this._titleDebounceTimer = null;
         titleInput.addEventListener('input', () => {
-            if (this.currentId) {
-                this._changeFrameTitle(titleInput.value);
-            }
+            if (!this.currentId) return;
+            if (this._titleDebounceTimer) clearTimeout(this._titleDebounceTimer);
+            const value = titleInput.value;
+            this._titleDebounceTimer = setTimeout(() => {
+                this._titleDebounceTimer = null;
+                this._changeFrameTitle(value);
+            }, 200);
         });
 
         // Блокируем Delete/Backspace от всплытия, чтобы не удалялся весь фрейм при фокусе в поле
@@ -434,7 +479,7 @@ export class FramePropertiesPanel {
 
         // Добавляем обработчик клика по документу для закрытия палитры
         setTimeout(() => {
-            document.addEventListener('click', this._documentClickHandler.bind(this));
+            document.addEventListener('click', this._boundDocumentClickHandler);
         }, 0);
     }
 
@@ -442,7 +487,9 @@ export class FramePropertiesPanel {
         if (this.colorPalette) {
             this.colorPalette.style.display = 'none';
         }
-        document.removeEventListener('click', this._documentClickHandler.bind(this));
+        if (this._boundDocumentClickHandler) {
+            document.removeEventListener('click', this._boundDocumentClickHandler);
+        }
     }
 
     _documentClickHandler(e) {
@@ -527,77 +574,105 @@ export class FramePropertiesPanel {
     }
 
     _applyFrameType(typeValue) {
-        if (!this.currentId) return;
+        if (!this.currentId || !this.core?.history) return;
 
-        // 1) Обновляем тип и временно отключаем фиксацию пропорций на время программного ресайза
-        const willLockAfter = typeValue !== 'custom';
-        this.eventBus.emit(Events.Object.StateChanged, {
-            objectId: this.currentId,
-            updates: { properties: { type: typeValue, lockedAspect: false } }
-        });
+        const objectData = this.core.getObjectData(this.currentId);
+        const oldType = (objectData?.properties?.type) || 'custom';
 
-        // 2) Для пресетов меняем размеры под аспект, сохраняя центр
-        if (!willLockAfter) return; // Произвольный: без изменения размеров
+        if (oldType === typeValue) return;
 
-        // Аспект по типу
-        const aspectMap = {
-            'a4': 210 / 297,
-            '1x1': 1,
-            '4x3': 4 / 3,
-            '16x9': 16 / 9
-        };
-        const aspect = aspectMap[typeValue] || 1;
+        const willLockAfter = typeValue !== 'custom';
 
-        // Текущие позиция и размер
-        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 }
-        });
+        if (!willLockAfter) {
+            // Произвольный — только тип, без изменения размера
+            const command = new UpdateFrameTypeCommand(
+                this.core,
+                this.currentId,
+                oldType,
+                typeValue,
+                null,
+                null,
+                null,
+                null
+            );
+            command.setEventBus(this.core.eventBus);
+            this.core.history.executeCommand(command);
+        } else {
+            // Пресет — тип + resize
+            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);
+
+            const command = new UpdateFrameTypeCommand(
+                this.core,
+                this.currentId,
+                oldType,
+                typeValue,
+                { width: oldW, height: oldH },
+                { width: newW, height: newH },
+                { x: oldX, y: oldY },
+                { x: newX, y: newY }
+            );
+            command.setEventBus(this.core.eventBus);
+            this.core.history.executeCommand(command);
+        }
 
-        // Обновим 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));
-        
+        this._hideColorPalette();
+        if (this._repositionRafId != null) {
+            cancelAnimationFrame(this._repositionRafId);
+            this._repositionRafId = null;
+        }
+        if (this._handlers && this.eventBus?.off) {
+            this.eventBus.off(Events.Tool.SelectionAdd, this._handlers.onSelectionAdd);
+            this.eventBus.off(Events.Tool.SelectionRemove, this._handlers.onSelectionRemove);
+            this.eventBus.off(Events.Tool.SelectionClear, this._handlers.onSelectionClear);
+            this.eventBus.off(Events.Object.Deleted, this._handlers.onDeleted);
+            this.eventBus.off(Events.Tool.DragStart, this._handlers.onDragStart);
+            this.eventBus.off(Events.Tool.DragUpdate, this._handlers.onDragUpdate);
+            this.eventBus.off(Events.Tool.DragEnd, this._handlers.onDragEnd);
+            this.eventBus.off(Events.Tool.GroupDragUpdate, this._handlers.onGroupDragUpdate);
+            this.eventBus.off(Events.Tool.GroupDragStart, this._handlers.onGroupDragStart);
+            this.eventBus.off(Events.Tool.GroupDragEnd, this._handlers.onGroupDragEnd);
+            this.eventBus.off(Events.Tool.ResizeUpdate, this._handlers.onResizeUpdate);
+            this.eventBus.off(Events.Tool.RotateUpdate, this._handlers.onRotateUpdate);
+            this.eventBus.off(Events.UI.ZoomPercent, this._handlers.onZoomPercent);
+            this.eventBus.off(Events.Tool.PanUpdate, this._handlers.onPanUpdate);
+            this.eventBus.off(Events.Tool.Activated, this._handlers.onActivated);
+            this.eventBus.off(Events.Object.StateChanged, this._handlers.onStateChanged);
+            this.eventBus.off(Events.History.Changed, this._handlers.onHistoryChanged);
+            this.eventBus.off(Events.Object.TransformUpdated, this._handlers.onTransformUpdated);
+            this._handlers = null;
+        }
+        if (this._boundDocumentClickHandler) {
+            document.removeEventListener('click', this._boundDocumentClickHandler);
+            this._boundDocumentClickHandler = null;
+        }
+        if (this._titleDebounceTimer) {
+            clearTimeout(this._titleDebounceTimer);
+            this._titleDebounceTimer = null;
+        }
         if (this.panel && this.panel.parentNode) {
             this.panel.parentNode.removeChild(this.panel);
         }