@sequent-org/moodboard 1.4.49 → 1.4.52

package/src/ui/HtmlHandlesLayer.js

@@ -27,6 +27,7 @@ export class HtmlHandlesLayer {
         this.handles = {};
         this._drag = null;
       this._handlesSuppressed = false; // скрывать ручки во время перетаскивания/трансформаций
+      this._cropMode = false; // полное подавление во время crop (ни рамка, ни ручки)
         this._groupRotationPreview = null;
 
       // Ссылки на обработчики, чтобы корректно отписаться при destroy()
@@ -96,6 +97,7 @@ export class HtmlHandlesLayer {
     }
 
     update() {
+      if (this._cropMode) return;
       // Дополнительная защита: если слой или core уже уничтожены,
       // выходим, чтобы не получить ошибок при resize/смене DPR
       if (!this.core || !this.core.pixi || !this.core.pixi.app || !this.layer) return;

package/src/ui/ImagePropertiesPanel.js

@@ -2,6 +2,7 @@ import * as PIXI from 'pixi.js';
 import { Events } from '../core/events/Events.js';
 import { EditFileNameCommand } from '../core/commands/EditFileNameCommand.js';
 import { applyRoundedMask } from '../utils/applyRoundedMask.js';
+import { CropController } from '../services/CropController.js';
 
 const ICONS = {
     download: `<svg width="24" height="24" fill="none" viewBox="0 0 24 24" type="download"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 14.75V16.25C4.75 17.9069 6.09315 19.25 7.75 19.25H16.25C17.9069 19.25 19.25 17.9069 19.25 16.25V14.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 14.25L12 4.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.75 10.75L12 14.25L15.25 10.75"></path></svg>`,
@@ -38,6 +39,9 @@ export class ImagePropertiesPanel {
         this.currentId = null;
         this._handlers = null;
 
+        this._cropController = new CropController({ core, eventBus, container });
+        this._cropController._onActivate = (active) => this._onCropActivate(active);
+
         this._attachEvents();
         this._createPanel();
     }
@@ -125,6 +129,9 @@ export class ImagePropertiesPanel {
     }
 
     showFor(objectId) {
+        if (this.currentId !== objectId) {
+            this._cropController?.cancel();
+        }
         this.currentId = objectId;
         if (this.panel) {
             this.panel.style.display = 'flex';
@@ -148,13 +155,12 @@ export class ImagePropertiesPanel {
     }
 
     _toggleLocked() {
-        const obj = this._getCurrentObject();
-        if (!obj) return;
-        if (!obj.properties) obj.properties = {};
-        obj.properties.locked = !obj.properties.locked;
-        if (typeof this.core?.state?.markDirty === 'function') {
-            this.core.state.markDirty();
-        }
+        if (!this.currentId) return;
+        const newLocked = !this._isLocked();
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: { properties: { locked: newLocked } },
+        });
         this._updateLockUI();
         this.reposition();
     }
@@ -163,7 +169,7 @@ export class ImagePropertiesPanel {
         if (!this._btn_lock) return;
         const locked = this._isLocked();
 
-        this._btn_lock.innerHTML = locked ? ICONS.unlock : ICONS.lock;
+        this._btn_lock.innerHTML = locked ? ICONS.lock : ICONS.unlock;
         this._btn_lock.title = locked ? 'Разблокировать' : 'Заблокировать';
 
         if (Array.isArray(this._lockableEls)) {
@@ -178,6 +184,7 @@ export class ImagePropertiesPanel {
     }
 
     hide() {
+        this._cropController?.cancel();
         this.currentId = null;
         if (this.panel) {
             this.panel.style.display = 'none';
@@ -185,6 +192,36 @@ export class ImagePropertiesPanel {
         this._closeBorderRadiusPopover();
     }
 
+    /**
+     * Вызывается CropController при входе/выходе из режима crop.
+     * Прячет тулбар и ручки выделения на время crop; восстанавливает по завершении.
+     */
+    _onCropActivate(active) {
+        if (!this.panel) return;
+
+        const handlesLayer = typeof window !== 'undefined' ? window.moodboardHtmlHandlesLayer : null;
+        const anchorsLayer = typeof window !== 'undefined' ? window.moodboardConnectionAnchorsLayer : null;
+
+        if (active) {
+            this.panel.style.display = 'none';
+            if (handlesLayer) {
+                handlesLayer._cropMode = true;
+                handlesLayer.hide();
+            }
+            anchorsLayer?.update();
+        } else {
+            // Восстанавливаем тулбар только если объект ещё выделен
+            if (this.currentId) {
+                this.panel.style.display = 'flex';
+            }
+            if (handlesLayer) {
+                handlesLayer._cropMode = false;
+                handlesLayer.update();
+            }
+            anchorsLayer?.update();
+        }
+    }
+
     _closeBorderRadiusPopover() {
         if (this._borderRadiusPopover) {
             this._borderRadiusPopover.classList.remove('is-open');
@@ -316,12 +353,6 @@ export class ImagePropertiesPanel {
         mainBtn.className = 'ipp-btn-split-main';
         mainBtn.title = 'Обрезать';
         mainBtn.innerHTML = ICONS.crop;
-        mainBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            // Логика применения текущего кропа
-        });
-
         const expandBtn = document.createElement('button');
         expandBtn.className = 'ipp-btn-split-expand';
         expandBtn.title = 'Выбрать пропорции';
@@ -330,15 +361,36 @@ export class ImagePropertiesPanel {
         const dropdown = document.createElement('div');
         dropdown.className = 'ipp-crop-dropdown';
 
+        const toggleCropDropdown = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const isOpen = dropdown.classList.contains('is-open');
+            
+            document.querySelectorAll('.ipp-crop-dropdown.is-open, .ipp-more-dropdown.is-open, .ipp-border-radius-popover.is-open, .ipp-border-style-popover.is-open').forEach(el => {
+                el.classList.remove('is-open');
+            });
+            document.querySelectorAll('.ipp-btn-split-expand.is-expanded, .ipp-btn.is-active').forEach(el => {
+                el.classList.remove('is-expanded', 'is-active');
+            });
+
+            if (!isOpen) {
+                dropdown.classList.add('is-open');
+                expandBtn.classList.add('is-expanded');
+            }
+        };
+
+        mainBtn.addEventListener('click', toggleCropDropdown);
+        expandBtn.addEventListener('click', toggleCropDropdown);
+
         const items = [
-            { id: 'custom', label: 'Custom', icon: ICONS.ddCustom },
-            { id: 'original', label: 'Original', icon: ICONS.ddOriginal },
+            { id: 'custom', label: 'Произвольный', icon: ICONS.ddCustom },
+            { id: 'original', label: 'Оригинал', icon: ICONS.ddOriginal },
             { divider: true },
-            { id: 'circle', label: 'Circle', icon: ICONS.ddCircle },
-            { id: 'square', label: 'Square', icon: ICONS.ddSquare },
-            { id: 'portrait', label: 'Portrait', icon: ICONS.ddPortrait, ratio: '3:4' },
-            { id: 'landscape', label: 'Landscape', icon: ICONS.ddLandscape, ratio: '4:3' },
-            { id: 'wide', label: 'Wide', icon: ICONS.ddWide, ratio: '16:9' },
+            { id: 'circle', label: 'Круг', icon: ICONS.ddCircle },
+            { id: 'square', label: 'Квадрат', icon: ICONS.ddSquare },
+            { id: 'portrait', label: 'Портрет', icon: ICONS.ddPortrait, ratio: '3:4' },
+            { id: 'landscape', label: 'Пейзаж', icon: ICONS.ddLandscape, ratio: '4:3' },
+            { id: 'wide', label: 'Широкий', icon: ICONS.ddWide, ratio: '16:9' },
         ];
 
         items.forEach(item => {
@@ -372,33 +424,16 @@ export class ImagePropertiesPanel {
             btn.addEventListener('click', (e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                // Логика выбора пропорции
                 dropdown.classList.remove('is-open');
                 expandBtn.classList.remove('is-expanded');
+                if (this.currentId) {
+                    this._cropController.start(this.currentId, item.id);
+                }
             });
 
             dropdown.appendChild(btn);
         });
 
-        expandBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            const isOpen = dropdown.classList.contains('is-open');
-            
-            // Закрываем все другие дропдауны, если есть (на будущее)
-            document.querySelectorAll('.ipp-crop-dropdown.is-open, .ipp-more-dropdown.is-open').forEach(el => {
-                el.classList.remove('is-open');
-            });
-            document.querySelectorAll('.ipp-btn-split-expand.is-expanded, .ipp-btn.is-active').forEach(el => {
-                el.classList.remove('is-expanded', 'is-active');
-            });
-
-            if (!isOpen) {
-                dropdown.classList.add('is-open');
-                expandBtn.classList.add('is-expanded');
-            }
-        });
-
         wrapper.appendChild(mainBtn);
         wrapper.appendChild(expandBtn);
         wrapper.appendChild(dropdown);
@@ -1015,6 +1050,14 @@ export class ImagePropertiesPanel {
                 
                 if (item.id === 'copy') {
                     this.eventBus.emit(Events.Keyboard.Copy);
+                } else if (item.id === 'bring-front') {
+                    if (this.currentId) this.eventBus.emit(Events.UI.LayerBringToFront, { objectId: this.currentId });
+                } else if (item.id === 'bring-forward') {
+                    if (this.currentId) this.eventBus.emit(Events.UI.LayerBringForward, { objectId: this.currentId });
+                } else if (item.id === 'send-backward') {
+                    if (this.currentId) this.eventBus.emit(Events.UI.LayerSendBackward, { objectId: this.currentId });
+                } else if (item.id === 'send-back') {
+                    if (this.currentId) this.eventBus.emit(Events.UI.LayerSendToBack, { objectId: this.currentId });
                 } else if (item.id === 'duplicate') {
                     this._duplicateImage();
                 } else if (item.id === 'lock') {
@@ -1442,6 +1485,7 @@ export class ImagePropertiesPanel {
     }
 
     destroy() {
+        this._cropController?.destroy();
         if (!this.eventBus || !this._handlers) return;
 
         this.eventBus.off(Events.Tool.SelectionAdd, this._handlers.onSelectionAdd);

package/src/ui/connectors/ConnectionAnchorsLayer.js

@@ -144,6 +144,10 @@ export class ConnectionAnchorsLayer {
     update() {
         if (!this.layer) return;
         if (this._commentPopoverOpen) return;
+        if (typeof window !== 'undefined' && window.moodboardHtmlHandlesLayer?._cropMode) {
+            this.layer.innerHTML = '';
+            return;
+        }
         this.layer.innerHTML = '';
         
         const selection = Array.from(this.core?.selectTool?.selectedObjects || []);

package/src/ui/handles/HandlesDomRenderer.js

@@ -1157,6 +1157,7 @@ export class HandlesDomRenderer {
         let isFrameTarget = false;
         let isMindmapTarget = false;
         let isMindmapOnlyGroupTarget = false;
+        let isLockedTarget = false;
         let isRevitScreenshotTarget = false;
         let revitViewPayload = null;
         let isModel3dScreenshotTarget = false;
@@ -1167,11 +1168,12 @@ export class HandlesDomRenderer {
         const hiddenIncomingSide = { value: null };
         if (id !== '__group__') {
             const req = { objectId: id, pixiObject: null };
-            this.host.eventBus.emit(Events.Tool.GetObjectPixi, req);
+            this.host.eventBus.emit('tool:get:object:pixi', req);
             const mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
             isFileTarget = mbType === 'file';
             isFrameTarget = mbType === 'frame';
             isMindmapTarget = mbType === 'mindmap';
+            isLockedTarget = !!req.pixiObject?._mb?.properties?.locked;
             isRevitScreenshotTarget = mbType === 'revit-screenshot-img';
             revitViewPayload = req.pixiObject?._mb?.properties?.view || null;
             isModel3dScreenshotTarget = mbType === 'model3d-screenshot-img';
@@ -1199,9 +1201,14 @@ export class HandlesDomRenderer {
             if (selectionIds.length > 0) {
                 const byId = new Map((this.host.core?.state?.state?.objects || []).map((obj) => [obj?.id, obj]));
                 isMindmapOnlyGroupTarget = selectionIds.every((selectedId) => byId.get(selectedId)?.type === 'mindmap');
+                isLockedTarget = selectionIds.some(selId => {
+                    const req = { objectId: selId, pixiObject: null };
+                    this.host.eventBus.emit('tool:get:object:pixi', req);
+                    return !!req.pixiObject?._mb?.properties?.locked;
+                });
             }
         }
-        const isNonResizableTarget = isFileTarget || isMindmapTarget || isMindmapOnlyGroupTarget;
+        const isNonResizableTarget = isFileTarget || isMindmapTarget || isMindmapOnlyGroupTarget || isLockedTarget;
 
         const left = Math.round(cssRect.left);
         const top = Math.round(cssRect.top);

package/src/ui/handles/HandlesEventBridge.js

@@ -114,6 +114,7 @@ export class HandlesEventBridge {
             [Events.UI.ZoomPercent, () => this.host.update()],
             [Events.Tool.PanUpdate, () => this.host.update()],
             [Events.Viewport.Changed, () => this.host.update()],
+            [Events.Object.TransformUpdated, () => this.host.update()],
             [Events.History.Changed, (data) => {
                 if (data?.lastUndone || data?.lastRedone) {
                     this.host._endGroupRotationPreview();