@sequent-org/moodboard 1.4.48 → 1.4.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.48",
+  "version": "1.4.51",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/core/commands/ApplyCropCommand.js

@@ -0,0 +1,90 @@
+import { BaseCommand } from './BaseCommand.js';
+import { Events } from '../events/Events.js';
+import { applyCropToSprite } from '../../utils/applyCrop.js';
+
+/**
+ * Команда применения / отмены кадрирования изображения.
+ *
+ * before / after = {
+ *   cropRect:         { x, y, w, h } | null  — нормализованные 0..1 от оригинала
+ *   cropShape:        'circle' | 'rect' | null
+ *   position:         { x, y }                — world top-left
+ *   size:             { width, height }        — world display size
+ *   originalPosition: { x, y } | null         — до первого кропа
+ *   originalSize:     { width, height } | null
+ *   borderRadius:     number
+ * }
+ */
+export class ApplyCropCommand extends BaseCommand {
+    constructor(core, objectId, before, after) {
+        super('apply_crop', 'Обрезать изображение');
+        this.core = core;
+        this.objectId = objectId;
+        this.before = before;
+        this.after = after;
+    }
+
+    async execute() {
+        this._apply(this.after);
+    }
+
+    async undo() {
+        this._apply(this.before);
+    }
+
+    _apply(state) {
+        const objects = this.core.state.getObjects();
+        const obj = objects.find(o => o.id === this.objectId);
+        if (!obj) return;
+
+        if (!obj.properties) obj.properties = {};
+
+        // Кроп-метаданные
+        if (state.cropRect) {
+            obj.properties.cropRect = { ...state.cropRect };
+        } else {
+            delete obj.properties.cropRect;
+        }
+        obj.properties.cropShape = state.cropShape || null;
+
+        // Хранение оригинальных размеров (для "Original")
+        if (state.originalPosition && state.originalSize) {
+            obj.properties.originalPosition = { ...state.originalPosition };
+            obj.properties.originalSize = { ...state.originalSize };
+        } else {
+            delete obj.properties.originalPosition;
+            delete obj.properties.originalSize;
+        }
+
+        // Позиция и размер объекта
+        if (state.position) {
+            obj.position = { ...state.position };
+        }
+        if (state.size) {
+            obj.width = state.size.width;
+            obj.height = state.size.height;
+            obj.properties.width = state.size.width;
+            obj.properties.height = state.size.height;
+        }
+
+        this.core.state.markDirty();
+
+        // PIXI-визуал
+        const sprite = this.core?.pixi?.objects?.get(this.objectId);
+        if (sprite) {
+            applyCropToSprite(
+                sprite,
+                state.cropRect || null,
+                state.cropShape || null,
+                state.size,
+                state.position,
+                state.borderRadius || 0
+            );
+        }
+
+        // Уведомить систему ручек об изменении трансформации
+        if (this.core?.eventBus) {
+            this.core.eventBus.emit(Events.Object.TransformUpdated, { objectId: this.objectId });
+        }
+    }
+}

package/src/core/commands/UpdateFramePropertiesCommand.js

@@ -1,6 +1,6 @@
 /**
- * Команда изменения свойств фрейма (название, фон, тип, lockedAspect) для системы Undo/Redo.
- * Поддерживает: title, backgroundColor, type, lockedAspect.
+ * Команда изменения свойств фрейма (название, фон, тип, lockedAspect, bgMode) для системы Undo/Redo.
+ * Поддерживает: title, backgroundColor, type, lockedAspect, bgMode, hidden.
  */
 import { BaseCommand } from './BaseCommand.js';
 import { Events } from '../events/Events.js';
@@ -10,6 +10,7 @@ const FRAME_PROP_LABELS = {
     backgroundColor: 'фон',
     type: 'тип',
     lockedAspect: 'фиксация пропорций',
+    bgMode: 'режим заливки',
 };
 
 export class UpdateFramePropertiesCommand extends BaseCommand {
@@ -78,6 +79,12 @@ export class UpdateFramePropertiesCommand extends BaseCommand {
             if (property === 'backgroundColor' && instance.setBackgroundColor) {
                 instance.setBackgroundColor(value);
             }
+            if (property === 'hidden' && instance.setHidden) {
+                instance.setHidden(value);
+            }
+            if (property === 'bgMode' && instance.setBgMode) {
+                instance.setBgMode(value);
+            }
         }
 
         let updates;

package/src/core/events/Events.js

@@ -173,8 +173,10 @@ export const Events = {
 		ThreadDeleted: 'comment:thread:deleted',
 		DraftOpened: 'comment:draft:opened',
 		DraftClosed: 'comment:draft:closed',
+		PopoverClosed: 'comment:popover:closed',
 		ResolvedFilterChanged: 'comment:resolved:filter:changed',
 		ListOpened: 'comment:list:opened',
+		OpenImageDraft: 'comment:open:image:draft',
 	},
 };
 

package/src/core/flows/ClipboardFlow.js

@@ -2,6 +2,16 @@ import { Events } from '../events/Events.js';
 import { PasteObjectCommand } from '../commands/index.js';
 import { RevitScreenshotMetadataService } from '../../services/RevitScreenshotMetadataService.js';
 
+// Дубликат AI-изображения — полноправный член ряда генераций, но ему нужен
+// собственный слот. Слот привязан к properties.aiMessageId, поэтому копия должна
+// получить уникальный aiMessageId, иначе все копии делят один слот и ряд
+// «расползается» при следующей генерации.
+function reassignClonedAiMessageId(clonedData) {
+    if (clonedData?.properties?.aiMessageId) {
+        clonedData.properties.aiMessageId = `dup_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+    }
+}
+
 export function setupClipboardFlow(core) {
     const revitMetadataService = new RevitScreenshotMetadataService(console);
 
@@ -391,6 +401,7 @@ export function setupClipboardFlow(core) {
                     const clonedChild = JSON.parse(JSON.stringify(child));
                     clonedChild.properties = clonedChild.properties || {};
                     clonedChild.properties.frameId = newFrameId;
+                    reassignClonedAiMessageId(clonedChild);
                     const targetPos = {
                         x: (child.position?.x || 0) + dx,
                         y: (child.position?.y || 0) + dy
@@ -431,6 +442,7 @@ export function setupClipboardFlow(core) {
             type: 'object',
             data: JSON.parse(JSON.stringify(original))
         };
+        reassignClonedAiMessageId(core.clipboard.data);
         try {
             if (original.type === 'frame') {
                 core._dupTitleMap = core._dupTitleMap || new Map();
@@ -487,6 +499,7 @@ export function setupClipboardFlow(core) {
             tempHandlers.set(originalId, handler);
             core.eventBus.on(Events.Object.Pasted, handler);
             core.clipboard = { type: 'object', data: JSON.parse(JSON.stringify(obj)) };
+            reassignClonedAiMessageId(core.clipboard.data);
             try {
                 if (obj.type === 'frame') {
                     core._dupTitleMap = core._dupTitleMap || new Map();

package/src/core/flows/ObjectLifecycleFlow.js

@@ -198,11 +198,11 @@ function tryCreateConnectorStyleCommand(core, object, objectId, updates) {
     return true;
 }
 
-const FRAME_PROP_KEYS = ['title'];
+const FRAME_PROP_KEYS = ['title', 'hidden', 'bgMode'];
 
 /**
  * Если updates содержит одно свойство фрейма — создаёт UpdateFramePropertiesCommand.
- * Поддерживает: title, backgroundColor, type, lockedAspect.
+ * Поддерживает: title, backgroundColor, type, lockedAspect, hidden.
  * @returns {boolean} true, если команда создана и применена
  */
 function tryCreateFramePropertiesCommand(core, object, objectId, updates) {
@@ -218,10 +218,16 @@ function tryCreateFramePropertiesCommand(core, object, objectId, updates) {
         oldValue = object.backgroundColor ?? 0xFFFFFF;
     } else if (updates.properties) {
         const propKeys = Object.keys(updates.properties);
-        if (propKeys.length === 1 && propKeys[0] === 'title') {
-            property = 'title';
-            newValue = updates.properties.title;
-            oldValue = object.properties?.title ?? '';
+        if (propKeys.length === 1 && FRAME_PROP_KEYS.includes(propKeys[0])) {
+            property = propKeys[0];
+            newValue = updates.properties[property];
+            if (property === 'hidden') {
+                oldValue = object.properties?.[property] ?? false;
+            } else if (property === 'bgMode') {
+                oldValue = object.properties?.[property] ?? 'solid';
+            } else {
+                oldValue = object.properties?.[property] ?? '';
+            }
         }
         // type и lockedAspect — только через UpdateFrameTypeCommand в панели (один шаг в истории)
     }
@@ -375,6 +381,13 @@ export function setupObjectLifecycleFlow(core) {
         Object.assign(object, topLevelUpdates);
 
         const pixiObject = core.pixi.objects.get(objectId);
+        if (pixiObject && pixiObject._mb) {
+            if (updates.properties) {
+                if (!pixiObject._mb.properties) pixiObject._mb.properties = {};
+                Object.assign(pixiObject._mb.properties, updates.properties);
+            }
+        }
+
         if (pixiObject && pixiObject._mb && pixiObject._mb.instance) {
             const instance = pixiObject._mb.instance;
 
@@ -390,6 +403,12 @@ export function setupObjectLifecycleFlow(core) {
                 }
             }
 
+            if (object.type === 'frame' && updates.properties?.bgMode !== undefined) {
+                if (instance.setBgMode) {
+                    instance.setBgMode(updates.properties.bgMode);
+                }
+            }
+
             if (object.type === 'note' && updates.properties) {
                 if (instance.setStyle) {
                     const styleUpdates = {};

package/src/moodboard/bootstrap/MoodBoardUiFactory.js

@@ -152,7 +152,7 @@ function initHtmlLayersAndPanels(board) {
     board.framePropertiesPanel = new FramePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
     board.notePropertiesPanel = new NotePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
     board.filePropertiesPanel = new FilePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
-    board.imagePropertiesPanel = new ImagePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
+    board.imagePropertiesPanel = new ImagePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard, board.options.currentUser || null);
     board.connectorPropertiesPanel = new ConnectorPropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
     board.shapePropertiesPanel = new ShapePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
     board.drawingPropertiesPanel = new DrawingPropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);

package/src/objects/FrameObject.js

@@ -23,6 +23,8 @@ export class FrameObject {
         this.borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 4;
         // Используем backgroundColor из данных объекта, если есть, иначе белый
         this.fillColor = this.objectData.backgroundColor || this.objectData.properties?.backgroundColor || 0xFFFFFF;
+        // Режим заливки: solid | solid-bordered | outline
+        this.bgMode = this.objectData.properties?.bgMode || this.objectData.bgMode || 'solid';
         // Парсим цвет из CSS переменной, если задан
         if (cssBorderColor && cssBorderColor.startsWith('#')) {
             this.strokeColor = parseInt(cssBorderColor.slice(1), 16);
@@ -119,6 +121,17 @@ export class FrameObject {
         this._redrawPreserveTransform(this.width, this.height, this.fillColor);
     }
 
+    /**
+     * Установить скрытость фрейма
+     * @param {boolean} hidden 
+     */
+    setHidden(hidden) {
+        if (!this.objectData) this.objectData = {};
+        if (!this.objectData.properties) this.objectData.properties = {};
+        this.objectData.properties.hidden = hidden;
+        this._redrawPreserveTransform(this.width, this.height, this.fillColor);
+    }
+
     /** Скрыть/показать серую рамку (при выделении скрываем, чтобы не накладывалась на синюю) */
     setBorderVisible(visible) {
         if (this._borderVisible === visible) return;
@@ -182,6 +195,17 @@ export class FrameObject {
         }
     }
 
+    /**
+     * Установить режим заливки фрейма
+     * @param {'solid'|'solid-bordered'|'outline'} mode
+     */
+    setBgMode(mode) {
+        this.bgMode = mode || 'solid';
+        if (!this.objectData.properties) { this.objectData.properties = {}; }
+        this.objectData.properties.bgMode = this.bgMode;
+        this._redrawPreserveTransform(this.width, this.height, this.fillColor);
+    }
+
     /**
      * Обновить размер фрейма
      * @param {{width:number,height:number}} size
@@ -224,16 +248,74 @@ export class FrameObject {
     _draw(width, height, color, showStroke = true) {
         const g = this.graphics;
         g.clear();
-        if (showStroke) {
-            try {
-                g.lineStyle({ width: this.borderWidth, color: this.strokeColor, alpha: 1, alignment: 1 });
-            } catch (e) {
-                g.lineStyle(this.borderWidth, this.strokeColor, 1);
+        const isHidden = !!(this.objectData?.properties?.hidden);
+
+        if (isHidden) {
+            // Закрашиваем фон фрейма в #f0f6fc при скрытии
+            g.beginFill(0xF0F6FC, 1);
+            g.drawRoundedRect(0, 0, Math.max(0, width), Math.max(0, height), this.cornerRadius);
+            g.endFill();
+
+            // Создаём иконку глаза, если её ещё нет
+            if (!this.eyeSprite) {
+                const eyeSvg = `<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M3 3l18 18"/><path d="M10.6 10.7a2 2 0 0 0 2.7 2.8"/><path d="M9.4 5.2A9.6 9.6 0 0 1 12 5c6.5 0 10 7 10 7a13 13 0 0 1-2.2 2.9M6.2 6.2A13 13 0 0 0 2 12s3.5 7 10 7a9.6 9.6 0 0 0 3.5-.6"/></svg>`;
+                const eyeTexture = PIXI.Texture.from(`data:image/svg+xml;utf8,${encodeURIComponent(eyeSvg)}`);
+                this.eyeSprite = new PIXI.Sprite(eyeTexture);
+                this.eyeSprite.anchor.set(0.5);
+                this.container.addChild(this.eyeSprite);
+            }
+            this.eyeSprite.visible = true;
+            this.eyeSprite.x = Math.max(0, width) / 2;
+            this.eyeSprite.y = Math.max(0, height) / 2;
+            
+            if (this.titleLayer) this.titleLayer.visible = false;
+        } else {
+            if (this.eyeSprite) this.eyeSprite.visible = false;
+
+            const bgMode = this.bgMode || 'solid';
+            const fillColor = typeof color === 'number' ? color : 0xFFFFFF;
+
+            if (bgMode === 'solid') {
+                // Сплошная заливка выбранным цветом, стандартная тонкая серая рамка
+                if (showStroke) {
+                    try {
+                        g.lineStyle({ width: this.borderWidth, color: this.strokeColor, alpha: 1, alignment: 1 });
+                    } catch (e) {
+                        g.lineStyle(this.borderWidth, this.strokeColor, 1);
+                    }
+                }
+                g.beginFill(fillColor, 1);
+                g.drawRoundedRect(0, 0, Math.max(0, width), Math.max(0, height), this.cornerRadius);
+                g.endFill();
+            } else if (bgMode === 'solid-bordered') {
+                // Контрастный белый/светлый фон + толстая цветная рамка
+                if (showStroke) {
+                    try {
+                        g.lineStyle({ width: this.borderWidth * 2, color: fillColor, alpha: 1, alignment: 1 });
+                    } catch (e) {
+                        g.lineStyle(this.borderWidth * 2, fillColor, 1);
+                    }
+                }
+                g.beginFill(0xFFFFFF, 0.92);
+                g.drawRoundedRect(0, 0, Math.max(0, width), Math.max(0, height), this.cornerRadius);
+                g.endFill();
+            } else {
+                // outline: прозрачный фон, рамка цвета выбранного цвета
+                if (showStroke) {
+                    try {
+                        g.lineStyle({ width: this.borderWidth, color: fillColor, alpha: 1, alignment: 1 });
+                    } catch (e) {
+                        g.lineStyle(this.borderWidth, fillColor, 1);
+                    }
+                }
+                g.beginFill(0x000000, 0);
+                g.drawRoundedRect(0, 0, Math.max(0, width), Math.max(0, height), this.cornerRadius);
+                g.endFill();
             }
+
+            if (this.titleLayer) this.titleLayer.visible = true;
         }
-        g.beginFill(typeof color === 'number' ? color : 0xFFFFFF, 1);
-        g.drawRoundedRect(0, 0, Math.max(0, width), Math.max(0, height), this.cornerRadius);
-        g.endFill();
+
         // Обновляем hitArea и корректный hit testing
         this.container.hitArea = new PIXI.Rectangle(0, 0, width, height);
         this.container.containsPoint = (point) => {

package/src/objects/ImageObject.js

@@ -1,4 +1,6 @@
 import * as PIXI from 'pixi.js';
+import { applyRoundedMask } from '../utils/applyRoundedMask.js';
+import { applyCropToSprite } from '../utils/applyCrop.js';
 
 /**
  * ImageObject — отображение загруженного изображения как спрайт
@@ -27,10 +29,7 @@ export class ImageObject {
         const fitToSize = () => {
             const texW = this.sprite.texture.width || 1;
             const texH = this.sprite.texture.height || 1;
-            const sx = this.width / texW;
-            const sy = this.height / texH;
-            this.sprite.scale.set(sx, sy);
-            // Обновим метаданные базовых размеров
+            // Обновим метаданные базовых размеров (до кропа)
             const prevMb = this.sprite._mb || {};
             this.sprite._mb = {
                 ...prevMb,
@@ -42,6 +41,28 @@ export class ImageObject {
                     baseH: texH
                 }
             };
+
+            const cropRect    = objectData.properties?.cropRect;
+            const cropShape   = objectData.properties?.cropShape || null;
+            const borderRadius = objectData.properties?.borderRadius || 0;
+
+            if (cropRect) {
+                // Восстановить кроп: позиция и размер уже в objectData (post-crop)
+                const pos = objectData.position || { x: 0, y: 0 };
+                applyCropToSprite(
+                    this.sprite,
+                    cropRect,
+                    cropShape,
+                    { width: this.width, height: this.height },
+                    pos,
+                    borderRadius
+                );
+            } else {
+                this.sprite.scale.set(this.width / texW, this.height / texH);
+                if (borderRadius > 0) {
+                    applyRoundedMask(this.sprite, borderRadius);
+                }
+            }
         };
 
         const onError = () => {

package/src/services/CropController.js

@@ -0,0 +1,242 @@
+import { Events } from '../core/events/Events.js';
+import { ApplyCropCommand } from '../core/commands/ApplyCropCommand.js';
+import { CropOverlay } from '../ui/CropOverlay.js';
+
+const ASPECT_RATIOS = {
+    custom:    null,
+    original:  null,
+    square:    1,
+    circle:    1,
+    portrait:  3 / 4,
+    landscape: 4 / 3,
+    wide:      16 / 9,
+};
+
+/**
+ * Оркестратор режима кадрирования изображения.
+ * Управляет жизненным циклом CropOverlay и применяет команду ApplyCropCommand.
+ */
+export class CropController {
+    constructor({ core, eventBus, container }) {
+        this.core = core;
+        this.eventBus = eventBus;
+        this.container = container;
+
+        this._overlay = null;
+        this._objectId = null;
+        this._currentImgBounds = null;
+        this._onEscapeHandler = null;
+        this._onViewportHandler = null;
+
+        // Колбэк вызывается при входе/выходе из режима crop (true = вошли, false = вышли).
+        // Устанавливается снаружи (ImagePropertiesPanel).
+        this._onActivate = null;
+        // Флаг: смена формата внутри активного crop — не нужно скрывать/показывать панель.
+        this._changingFormat = false;
+    }
+
+    /**
+     * Войти в режим кадрирования.
+     * @param {string} objectId
+     * @param {string} template - 'custom'|'original'|'circle'|'square'|'portrait'|'landscape'|'wide'
+     */
+    start(objectId, template) {
+        const wasActive = !!this._overlay;
+        this.cancel();
+
+        let imgBounds = this._getObjectBounds(objectId);
+        if (!imgBounds) return;
+
+        // Для 'original' разворачиваем до оригинальных границ, если они сохранены
+        if (template === 'original') {
+            const objects = this.core.state.getObjects();
+            const obj = objects.find(o => o.id === objectId);
+            if (obj?.properties?.originalPosition && obj?.properties?.originalSize) {
+                imgBounds = {
+                    x: obj.properties.originalPosition.x,
+                    y: obj.properties.originalPosition.y,
+                    w: obj.properties.originalSize.width,
+                    h: obj.properties.originalSize.height,
+                };
+            }
+        }
+
+        this._objectId = objectId;
+        this._currentImgBounds = imgBounds;
+
+        const aspectRatio = ASPECT_RATIOS[template] ?? null;
+        const initCrop = this._computeInitialCrop(imgBounds, aspectRatio);
+
+        this._overlay = new CropOverlay({
+            container: this.container,
+            core: this.core,
+            imgBounds,
+            initCrop,
+            template,
+            aspectRatio,
+            onFormatChange: (newTemplate) => {
+                this._changingFormat = true;
+                this.start(objectId, newTemplate);
+                this._changingFormat = false;
+            },
+            onCommit: (cropNorm) => this._commit(objectId, cropNorm, template),
+            onCancel: () => this.cancel(),
+        });
+
+        if (!this._changingFormat && !wasActive) {
+            this._onActivate?.(true);
+        }
+
+        this._onEscapeHandler = () => this.cancel();
+        this.eventBus.on(Events.Keyboard.Escape, this._onEscapeHandler);
+
+        this._onViewportHandler = () => {
+            if (this._overlay && this._currentImgBounds) {
+                this._overlay.reposition(this._currentImgBounds);
+            }
+        };
+        this.eventBus.on(Events.Viewport.Changed, this._onViewportHandler);
+        this.eventBus.on(Events.UI.ZoomPercent, this._onViewportHandler);
+        this.eventBus.on(Events.Tool.PanUpdate, this._onViewportHandler);
+    }
+
+    /** Отменить режим кадрирования без применения. */
+    cancel() {
+        const wasActive = !!this._overlay;
+        if (this._overlay) {
+            this._overlay.destroy();
+            this._overlay = null;
+        }
+        if (this._onEscapeHandler) {
+            this.eventBus.off(Events.Keyboard.Escape, this._onEscapeHandler);
+            this._onEscapeHandler = null;
+        }
+        if (this._onViewportHandler) {
+            this.eventBus.off(Events.Viewport.Changed, this._onViewportHandler);
+            this.eventBus.off(Events.UI.ZoomPercent, this._onViewportHandler);
+            this.eventBus.off(Events.Tool.PanUpdate, this._onViewportHandler);
+            this._onViewportHandler = null;
+        }
+        this._objectId = null;
+        this._currentImgBounds = null;
+
+        if (wasActive && !this._changingFormat) {
+            this._onActivate?.(false);
+        }
+    }
+
+    destroy() {
+        this.cancel();
+    }
+
+    // ─────────────────────────────────────────────────────────────────────
+    // Приватные
+    // ─────────────────────────────────────────────────────────────────────
+
+    _getObjectBounds(objectId) {
+        const posData  = { objectId, position: null };
+        const sizeData = { objectId, size: null };
+        this.eventBus.emit(Events.Tool.GetObjectPosition, posData);
+        this.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+        if (!posData.position || !sizeData.size) return null;
+        return {
+            x: posData.position.x,
+            y: posData.position.y,
+            w: sizeData.size.width,
+            h: sizeData.size.height,
+        };
+    }
+
+    _computeInitialCrop(imgBounds, aspectRatio) {
+        if (!aspectRatio) {
+            return { x: 0, y: 0, w: 1, h: 1 };
+        }
+        // Вписать прямоугольник с нужным AR в центр изображения
+        const imgAR = imgBounds.w / imgBounds.h;
+        let normW, normH;
+        if (imgAR > aspectRatio) {
+            normH = 1;
+            normW = aspectRatio / imgAR;
+        } else {
+            normW = 1;
+            normH = imgAR / aspectRatio;
+        }
+        return {
+            x: (1 - normW) / 2,
+            y: (1 - normH) / 2,
+            w: normW,
+            h: normH,
+        };
+    }
+
+    _commit(objectId, cropNorm, template) {
+        // Сначала снимаем оверлей
+        this.cancel();
+
+        const objects = this.core.state.getObjects();
+        const obj = objects.find(o => o.id === objectId);
+        if (!obj) return;
+
+        // Запоминаем оригинал (один раз при первом кропе)
+        const isFirstCrop = !obj.properties?.originalPosition;
+        const originalPosition = isFirstCrop
+            ? { ...obj.position }
+            : { ...obj.properties.originalPosition };
+        const originalSize = isFirstCrop
+            ? { width: obj.width, height: obj.height }
+            : { ...obj.properties.originalSize };
+
+        const existingCrop = obj.properties?.cropRect || null;
+        let newX, newY, newW, newH, finalCropRect;
+
+        if (template === 'original') {
+            // cropNorm задан относительно оригинальных границ
+            newX = originalPosition.x + cropNorm.x * originalSize.width;
+            newY = originalPosition.y + cropNorm.y * originalSize.height;
+            newW = cropNorm.w * originalSize.width;
+            newH = cropNorm.h * originalSize.height;
+            finalCropRect = { ...cropNorm };
+        } else {
+            // Новая позиция и размер (в мировых пикселях)
+            newX = obj.position.x + cropNorm.x * obj.width;
+            newY = obj.position.y + cropNorm.y * obj.height;
+            newW = cropNorm.w * obj.width;
+            newH = cropNorm.h * obj.height;
+
+            // Составной cropRect относительно ОРИГИНАЛЬНОЙ текстуры
+            if (existingCrop) {
+                finalCropRect = {
+                    x: existingCrop.x + cropNorm.x * existingCrop.w,
+                    y: existingCrop.y + cropNorm.y * existingCrop.h,
+                    w: cropNorm.w * existingCrop.w,
+                    h: cropNorm.h * existingCrop.h,
+                };
+            } else {
+                finalCropRect = { ...cropNorm };
+            }
+        }
+
+        const before = {
+            cropRect:         existingCrop ? { ...existingCrop } : null,
+            cropShape:        obj.properties?.cropShape || null,
+            position:         { ...obj.position },
+            size:             { width: obj.width, height: obj.height },
+            originalPosition: { ...originalPosition },
+            originalSize:     { ...originalSize },
+            borderRadius:     obj.properties?.borderRadius || 0,
+        };
+
+        const after = {
+            cropRect:         finalCropRect,
+            cropShape:        template === 'circle' ? 'circle' : 'rect',
+            position:         { x: newX, y: newY },
+            size:             { width: newW, height: newH },
+            originalPosition,
+            originalSize,
+            borderRadius:     obj.properties?.borderRadius || 0,
+        };
+
+        const cmd = new ApplyCropCommand(this.core, objectId, before, after);
+        this.core.history.executeCommand(cmd);
+    }
+}