@sequent-org/moodboard 1.4.49 → 1.4.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.49",
+  "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/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/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,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);
+                }
             }
         };
 

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);
+    }
+}

package/src/services/FrameService.js

@@ -71,6 +71,24 @@ export class FrameService {
 		};
 		this.eventBus.on(Events.Object.Created, this._onObjectCreated);
 
+		this._onStateChanged = (data) => {
+			if (!data || !data.updates || !data.updates.properties) return;
+			if (data.updates.properties.hidden !== undefined) {
+				const obj = this.state.state.objects.find(o => o.id === data.objectId);
+				if (obj && obj.type === 'frame') {
+					const isHidden = data.updates.properties.hidden;
+					const children = this._getFrameChildren(obj.id);
+					for (const childId of children) {
+						const pixi = this.pixi.objects.get(childId);
+						if (pixi) {
+							pixi.visible = !isHidden;
+						}
+					}
+				}
+			}
+		};
+		this.eventBus.on(Events.Object.StateChanged, this._onStateChanged);
+
 		this._onDragStart = (data) => {
 			const moved = this.state.state.objects.find(o => o.id === data.object);
 			if (moved && moved.type === 'frame') {
@@ -256,6 +274,20 @@ export class FrameService {
 			this._forceFramesBelow();
 			this.eventBus.emit(Events.Object.Reordered, { reason: 'recompute_frame_attachment' });
 		}
+		
+		// Обновляем видимость в зависимости от скрытости фрейма
+		const pixi = this.pixi.objects.get(objectId);
+		if (pixi) {
+			let isHidden = false;
+			const targetFrameId = obj.properties?.frameId;
+			if (targetFrameId) {
+				const frameObj = this.state.state.objects.find(o => o.id === targetFrameId);
+				if (frameObj && frameObj.properties?.hidden) {
+					isHidden = true;
+				}
+			}
+			pixi.visible = !isHidden;
+		}
 	}
 }
 

package/src/tools/manager/ToolManagerLifecycle.js

@@ -29,6 +29,10 @@ export class ToolManagerLifecycle {
         manager._onContextMenu = (e) => {
             e.preventDefault();
             if (!manager.activeTool) return;
+            if (manager.activeTool.name === 'draw') {
+                manager.activateDefaultTool();
+                return;
+            }
             const rect = manager.container.getBoundingClientRect();
             const toolEvent = {
                 x: e.clientX - rect.left,

package/src/tools/object-tools/DrawingTool.js

@@ -98,6 +98,7 @@ export class DrawingTool extends BaseTool {
     }
 
     onMouseDown(event) {
+        if (event.button === 2) return;
         super.onMouseDown(event);
         if (!this.world) this.world = this._getWorldLayer();
         if (!this.world) return;