@sequent-org/moodboard 1.4.49 → 1.4.52

package/package.json

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

package/src/core/bootstrap/CoreInitializer.js

@@ -4,6 +4,7 @@ import { BoardService } from '../../services/BoardService.js';
 import { ZoomPanController } from '../../services/ZoomPanController.js';
 import { ZOrderManager } from '../../services/ZOrderManager.js';
 import { FrameService } from '../../services/FrameService.js';
+import { ImageAttachmentService } from '../../services/ImageAttachmentService.js';
 import { Events } from '../events/Events.js';
 
 export async function initializeCore(core) {
@@ -20,6 +21,8 @@ export async function initializeCore(core) {
         core.zOrder.attach();
         core.frameService = new FrameService(core.eventBus, core.pixi, core.state);
         core.frameService.attach();
+        core.imageAttachmentService = new ImageAttachmentService(core.eventBus, core.pixi, core.state);
+        core.imageAttachmentService.attach();
 
         setupViewportResize(core);
 

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/flows/ObjectLifecycleFlow.js

@@ -169,12 +169,14 @@ function tryCreateConnectorStyleCommand(core, object, objectId, updates) {
     const { style, start, end } = updates.properties;
 
     // Проверяем, что в updates.properties только style/start/end (и нет посторонних ключей)
-    const allowedKeys = new Set(['style', 'start', 'end', 'locked']);
+    const allowedKeys = new Set(['style', 'start', 'end', 'locked', 'lockMode', 'lockedByFrame']);
     const hasOtherKeys = Object.keys(updates.properties).some(k => !allowedKeys.has(k));
     if (hasOtherKeys) return false;
     // Должно быть хотя бы одно из: style, start, end
     if (!style && start === undefined && end === undefined
-        && updates.properties.locked === undefined) return false;
+        && updates.properties.locked === undefined
+        && updates.properties.lockMode === undefined
+        && updates.properties.lockedByFrame === undefined) return false;
 
     const commandUpdates = {};
     if (style !== undefined) commandUpdates.style = style;
@@ -198,11 +200,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 +220,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 +383,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 +405,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/objects/FrameObject.js

@@ -17,12 +17,14 @@ export class FrameObject {
         this.height = this.objectData.height || 100;
         // Берем стили рамки из CSS-переменных, с дефолтом
         const rootStyles = (typeof window !== 'undefined') ? getComputedStyle(document.documentElement) : null;
-        const cssBorderWidth = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-border-width') || '4') : 4;
+        const cssBorderWidth = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-border-width') || '5') : 5;
         const cssCornerRadius = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-corner-radius') || '6') : 6;
         const cssBorderColor = rootStyles ? rootStyles.getPropertyValue('--frame-border-color').trim() : '';
-        this.borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 4;
+        this.borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 5;
         // Используем 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);
@@ -48,6 +50,10 @@ export class FrameObject {
         // Под-контейнер: масштаб компенсирует зум, поэтому заголовок всегда одного размера на экране
         this.titleLayer = new PIXI.Container();
         this.titleLayer.eventMode = 'none'; // не перехватывать указатель
+        const _frameObjectId = this.objectData.id || '';
+        if (_frameObjectId) {
+            this.titleLayer.name = `mb-frame-title-${_frameObjectId}`;
+        }
 
         this.titleBg = new PIXI.Graphics();
         this.titleLayer.addChild(this.titleBg);
@@ -58,7 +64,7 @@ export class FrameObject {
             fill: 0x333333,
             fontWeight: '500'
         });
-        this.titleText.anchor.set(0, 0);
+        this.titleText.anchor.set(0, 0.5);
         this.titleLayer.addChild(this.titleText);
 
         this.container.addChild(this.titleLayer);
@@ -119,6 +125,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;
@@ -128,7 +145,10 @@ export class FrameObject {
 
     _onSelectionAdd(data) {
         const myId = this.objectData?.id ?? this.container?._mb?.objectId;
-        if (data?.object === myId) this.setBorderVisible(false);
+        if (data?.object !== myId) return;
+        // В outline цветная рамка — основной визуал фрейма, не дублирует синюю рамку выделения.
+        if (this.bgMode === 'outline') return;
+        this.setBorderVisible(false);
     }
 
     _onSelectionRemove(data) {
@@ -182,6 +202,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 +255,66 @@ 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') {
+                // Сплошная заливка без собственной рамки (рамка выделения — отдельно)
+                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') {
+                // Фон = выбранный цвет; рамка = S=100,V=50 от того же тона палитры
+                const borderColor = this._pickBorderColor(fillColor);
+                if (showStroke) {
+                    try {
+                        g.lineStyle({ width: this.borderWidth, color: borderColor, alpha: 1, alignment: 0 });
+                    } catch (e) {
+                        g.lineStyle(this.borderWidth, borderColor, 1);
+                    }
+                }
+                g.beginFill(fillColor, 1);
+                g.drawRoundedRect(0, 0, Math.max(0, width), Math.max(0, height), this.cornerRadius);
+                g.endFill();
+            } else {
+                // outline: прозрачный фон, рамка цвета выбранного цвета (всегда видна, в т.ч. при фокусе)
+                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) => {
@@ -270,7 +351,7 @@ export class FrameObject {
 
         // Высота подложки в базовых пикселях: baseFontSize + 4px сверху + 4px снизу
         const labelBaseH = this.baseFontSize + 8;
-        const gap = 4; // зазор между нижним краем подписи и верхней границей фрейма
+        const gap = 5; // зазор между нижним краем подписи и верхней границей фрейма
 
         // Позиционируем над фреймом (y=0 — верхний край фрейма в локальных координатах контейнера)
         this.titleLayer.x = 0;
@@ -290,6 +371,143 @@ export class FrameObject {
         this._redrawTitleBg();
     }
 
+    /**
+     * YIQ-контраст: возвращает 0x000000 или 0xFFFFFF — читаемый цвет на заданном фоне
+     * @param {number} hexInt Цвет фона (PIXI hex)
+     * @returns {number}
+     */
+    _pickContrastColor(hexInt) {
+        const r = (hexInt >> 16) & 0xFF;
+        const g = (hexInt >> 8) & 0xFF;
+        const b = hexInt & 0xFF;
+        const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+        const darkness = (1 - yiq / 255) * 100;
+        return darkness >= 35 ? 0xFFFFFF : 0x000000;
+    }
+
+    /**
+     * Цвет рамки в режиме solid-bordered.
+     * Крайне правый по горизонтали (S=100) и по середине вертикали (V=50)
+     * в палитре того же тона, что и фон.
+     * Белый фон: крайне левый по горизонтали (S=0), середина по вертикали (V=50) → нейтральный серый.
+     * Прочие ахроматические цвета (серый, чёрный — s=0): чёрный.
+     * @param {number} hexInt Цвет фона (PIXI hex)
+     * @returns {number}
+     */
+    _pickBorderColor(hexInt) {
+        const r = (hexInt >> 16) & 0xFF;
+        const g = (hexInt >> 8) & 0xFF;
+        const b = hexInt & 0xFF;
+        if (r === 255 && g === 255 && b === 255) {
+            return 0x808080;
+        }
+        const { h, s } = this._rgbToHsv(r, g, b);
+        if (s === 0) {
+            return 0x000000;
+        }
+        return this._hsvToHex(h, 100, 50);
+    }
+
+    /**
+     * Цвет текста заголовка фрейма.
+     * Для почти-белых тонированных фонов (яркость < 5 по шкале 0=белый…100=чёрный,
+     * но не чистый белый) берёт тон из той же палитры с макс. насыщенностью (S=100, V=50).
+     * Иначе — обычный YIQ-контраст (чёрный/белый).
+     * @param {number} hexInt Цвет фона (PIXI hex)
+     * @returns {number}
+     */
+    _pickTitleTextColor(hexInt) {
+        const r = (hexInt >> 16) & 0xFF;
+        const g = (hexInt >> 8) & 0xFF;
+        const b = hexInt & 0xFF;
+
+        // Чистый белый фон — исключение: чёрный текст
+        if (r === 255 && g === 255 && b === 255) {
+            return 0x000000;
+        }
+
+        // Яркость по шкале 0 (белый) → 100 (чёрный) через HSL-lightness
+        const darkness = 100 - ((Math.max(r, g, b) + Math.min(r, g, b)) / 2 / 255) * 100;
+        if (darkness >= 5) {
+            return this._pickContrastColor(hexInt);
+        }
+
+        // Почти-белый тонированный фон: та же палитра, правый край по центру (S=100, V=50)
+        const { h } = this._rgbToHsv(r, g, b);
+        return this._hsvToHex(h, 100, 50);
+    }
+
+    /**
+     * @param {number} r 0..255
+     * @param {number} g 0..255
+     * @param {number} b 0..255
+     * @returns {{ h: number, s: number, v: number }} h 0..360, s/v 0..100
+     */
+    _rgbToHsv(r, g, b) {
+        const rn = r / 255, gn = g / 255, bn = b / 255;
+        const max = Math.max(rn, gn, bn);
+        const min = Math.min(rn, gn, bn);
+        const d = max - min;
+        let h = 0;
+        if (d !== 0) {
+            if (max === rn) {
+                h = ((gn - bn) / d) % 6;
+            } else if (max === gn) {
+                h = (bn - rn) / d + 2;
+            } else {
+                h = (rn - gn) / d + 4;
+            }
+            h *= 60;
+            if (h < 0) {
+                h += 360;
+            }
+        }
+        const s = max === 0 ? 0 : (d / max) * 100;
+        return { h, s, v: max * 100 };
+    }
+
+    /**
+     * @param {number} h 0..360
+     * @param {number} s 0..100
+     * @param {number} v 0..100
+     * @returns {number} PIXI hex
+     */
+    _hsvToHex(h, s, v) {
+        const sn = s / 100, vn = v / 100;
+        const c = vn * sn;
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+        const m = vn - c;
+        let rp = 0, gp = 0, bp = 0;
+        if (h < 60) {
+            rp = c; gp = x;
+        } else if (h < 120) {
+            rp = x; gp = c;
+        } else if (h < 180) {
+            gp = c; bp = x;
+        } else if (h < 240) {
+            gp = x; bp = c;
+        } else if (h < 300) {
+            rp = x; bp = c;
+        } else {
+            rp = c; bp = x;
+        }
+        const r = Math.round((rp + m) * 255);
+        const g = Math.round((gp + m) * 255);
+        const b = Math.round((bp + m) * 255);
+        return (r << 16) | (g << 8) | b;
+    }
+
+    /**
+     * Возвращает цвета плашки заголовка в формате CSS-строк для HTML-инпута
+     * @returns {{ bgCss: string, textCss: string }}
+     */
+    getTitleColors() {
+        const bg = this.fillColor;
+        const text = this._pickTitleTextColor(bg);
+        const toHex = (n) => '#' + n.toString(16).padStart(6, '0');
+        return { bgCss: toHex(bg), textCss: toHex(text) };
+    }
+
     /**
      * Нарисовать скруглённую подложку под текущую ширину текста
      */
@@ -299,6 +517,13 @@ export class FrameObject {
         const padH = 8; // горизонтальный отступ с каждой стороны
         const padV = 4; // вертикальный отступ с каждой стороны
 
+        // Фон плашки = цвет фрейма (fill или border в зависимости от bgMode — всегда this.fillColor)
+        const bgColor = typeof this.fillColor === 'number' ? this.fillColor : 0xFFFFFF;
+        const textColor = this._pickTitleTextColor(bgColor);
+
+        // Обновляем цвет текста под контраст фона
+        this.titleText.style.fill = textColor;
+
         // Измеряем текст в базовых единицах
         const style = new PIXI.TextStyle({
             fontFamily: this.titleText.style.fontFamily,
@@ -312,18 +537,14 @@ export class FrameObject {
 
         const g = this.titleBg;
         g.clear();
-        try {
-            g.lineStyle({ width: 1, color: this.strokeColor, alpha: 1 });
-        } catch (_) {
-            g.lineStyle(1, this.strokeColor, 1);
-        }
-        g.beginFill(0xFFFFFF, 1);
+        g.lineStyle(0);
+        g.beginFill(bgColor, 1);
         g.drawRoundedRect(0, 0, bgW, bgH, 6);
         g.endFill();
 
-        // Текст внутри подложки
+        // Текст внутри подложки — по вертикали по центру (anchor.y = 0.5)
         this.titleText.x = padH;
-        this.titleText.y = padV;
+        this.titleText.y = Math.round(bgH / 2);
     }
 
     /**

package/src/objects/ImageObject.js

@@ -1,5 +1,6 @@
 import * as PIXI from 'pixi.js';
 import { applyRoundedMask } from '../utils/applyRoundedMask.js';
+import { applyCropToSprite } from '../utils/applyCrop.js';
 
 /**
  * ImageObject — отображение загруженного изображения как спрайт
@@ -28,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,
@@ -43,9 +41,27 @@ export class ImageObject {
                     baseH: texH
                 }
             };
-            const borderRadius = objectData.properties?.borderRadius;
-            if (borderRadius > 0) {
-                applyRoundedMask(this.sprite, borderRadius);
+
+            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);
+                }
             }
         };