@sequent-org/moodboard 1.4.49 → 1.4.52

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,11 +71,55 @@ export class FrameService {
 		};
 		this.eventBus.on(Events.Object.Created, this._onObjectCreated);
 
-		this._onDragStart = (data) => {
+		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;
+						}
+					}
+				}
+			}
+			const lockedChanged = data.updates.properties.locked !== undefined;
+			const lockModeChanged = data.updates.properties.lockMode !== undefined;
+			if (lockedChanged || lockModeChanged) {
+				const obj = this.state.state.objects.find(o => o.id === data.objectId);
+				if (obj && obj.type === 'frame') {
+					const newLocked = lockedChanged
+						? !!data.updates.properties.locked
+						: !!(obj.properties && obj.properties.locked);
+					const newLockMode = lockModeChanged
+						? data.updates.properties.lockMode
+						: (obj.properties && obj.properties.lockMode) || 'frame';
+					const children = this._getFrameChildren(obj.id);
+					for (const childId of children) {
+						const childObj = this.state.state.objects.find(o => o.id === childId);
+						if (!childObj) continue;
+						childObj.properties = childObj.properties || {};
+						if (newLocked && newLockMode === 'frame-and-content') {
+							childObj.properties.locked = true;
+							childObj.properties.lockedByFrame = true;
+						} else if (childObj.properties.lockedByFrame) {
+							childObj.properties.locked = false;
+							delete childObj.properties.lockedByFrame;
+						}
+					}
+					this.state.markDirty();
+				}
+			}
+		};
+		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') {
-				// Серый фон
-				this.pixi.setFrameFill(moved.id, moved.width, moved.height, 0xFAFAFA);
+				this._frameDragOriginalFill = moved.backgroundColor ?? moved.properties?.backgroundColor ?? 0xFFFFFF;
 				// Cнимок стартовых позиций по центру PIXI
 				const fp = this.pixi.objects.get(moved.id);
 				this._frameDragFrameStart = { x: fp?.x || 0, y: fp?.y || 0 };
@@ -139,18 +183,25 @@ export class FrameService {
 			const movedObj = this.state.state.objects.find(o => o.id === data.object);
 			if (!movedObj) return;
 			if (movedObj.type === 'frame') {
-				this.pixi.setFrameFill(movedObj.id, movedObj.width, movedObj.height, 0xFFFFFF);
+				const restoreFill = this._frameDragOriginalFill ?? movedObj.backgroundColor ?? movedObj.properties?.backgroundColor ?? 0xFFFFFF;
+				this.pixi.setFrameFill(movedObj.id, movedObj.width, movedObj.height, restoreFill);
 			}
 			this._recomputeFrameAttachment(movedObj.id);
 			this._forceFramesBelow();
 			this._frameDragFrameStart = null;
 			this._frameDragChildStart = null;
+			this._frameDragOriginalFill = null;
 			if (this._frameHoverId) {
 				const frames = (this.state.state.objects || []).filter(o => o.type === 'frame');
 				const prev = frames.find(fr => fr.id === this._frameHoverId);
-				if (prev) this.pixi.setFrameFill(prev.id, prev.width, prev.height, 0xFFFFFF);
-			this._frameHoverId = null;
-		}
+				if (prev) {
+					const hoverOriginal = this._frameHoverOriginalFill?.get(this._frameHoverId)
+						?? prev.backgroundColor ?? prev.properties?.backgroundColor ?? 0xFFFFFF;
+					this.pixi.setFrameFill(prev.id, prev.width, prev.height, hoverOriginal);
+				}
+				this._frameHoverId = null;
+				this._frameHoverOriginalFill = null;
+			}
 		};
 		this.eventBus.on(Events.Tool.DragEnd, this._onDragEnd);
 	}
@@ -174,7 +225,9 @@ export class FrameService {
 		this._onDragEnd = null;
 		this._frameDragFrameStart = null;
 		this._frameDragChildStart = null;
+		this._frameDragOriginalFill = null;
 		this._frameHoverId = null;
+		this._frameHoverOriginalFill = null;
 	}
 
 	_getFrameChildren(frameId) {
@@ -216,11 +269,22 @@ export class FrameService {
 			if (hoverId !== this._frameHoverId) {
 				if (this._frameHoverId) {
 					const prev = frames.find(fr => fr.id === this._frameHoverId);
-					if (prev) this.pixi.setFrameFill(prev.id, prev.width, prev.height, 0xFFFFFF);
+					if (prev) {
+						const origFill = this._frameHoverOriginalFill?.get(this._frameHoverId)
+							?? prev.backgroundColor ?? prev.properties?.backgroundColor ?? 0xFFFFFF;
+						this.pixi.setFrameFill(prev.id, prev.width, prev.height, origFill);
+					}
+					this._frameHoverOriginalFill?.delete(this._frameHoverId);
 				}
 				if (hoverId) {
 					const cur = frames.find(fr => fr.id === hoverId);
-					if (cur) this.pixi.setFrameFill(cur.id, cur.width, cur.height, 0xFAFAFA);
+					if (cur) {
+						if (!this._frameHoverOriginalFill) this._frameHoverOriginalFill = new Map();
+						if (!this._frameHoverOriginalFill.has(hoverId)) {
+							this._frameHoverOriginalFill.set(hoverId, cur.backgroundColor ?? cur.properties?.backgroundColor ?? 0xFFFFFF);
+						}
+						this.pixi.setFrameFill(cur.id, cur.width, cur.height, 0xFAFAFA);
+					}
 				}
 				this._frameHoverId = hoverId || null;
 			}
@@ -256,6 +320,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/services/ImageAttachmentService.js

@@ -0,0 +1,260 @@
+import { Events } from '../core/events/Events.js';
+
+const IMAGE_TYPES = new Set(['image', 'revit-screenshot-img', 'model3d-screenshot-img']);
+
+function isImageType(type) { return IMAGE_TYPES.has(type); }
+function isDrawingType(type) { return type === 'drawing'; }
+
+/**
+ * Проверяет, что прямоугольник inner целиком вмещается в outer.
+ * Координаты — мировые (top-left + size).
+ */
+function isFullyContained(inner, outer) {
+	return inner.x >= outer.x &&
+		inner.y >= outer.y &&
+		(inner.x + inner.w) <= (outer.x + outer.w) &&
+		(inner.y + inner.h) <= (outer.y + outer.h);
+}
+
+function getObjRect(obj) {
+	return {
+		x: obj.position?.x ?? 0,
+		y: obj.position?.y ?? 0,
+		w: obj.width ?? 0,
+		h: obj.height ?? 0,
+	};
+}
+
+/**
+ * Управляет привязкой drawing-объектов к изображениям.
+ *
+ * Правила:
+ * - Привязка происходит только если drawing целиком внутри изображения.
+ * - Фрейм первичен: если у drawing уже есть properties.frameId — imageId не ставим.
+ * - Привязанный drawing перемещается вместе с изображением при drag.
+ * - При resize изображения пересчитываем, какие drawing остаются внутри.
+ */
+export class ImageAttachmentService {
+	constructor(eventBus, pixi, state) {
+		this.eventBus = eventBus;
+		this.pixi = pixi;
+		this.state = state;
+	}
+
+	// ─── Вспомогательные ──────────────────────────────────────────────────────
+
+	/**
+	 * Находит id изображения, полностью вмещающего drawing.
+	 * Если несколько — берём с наибольшим zIndex PIXI (верхнее).
+	 * Если у drawing есть frameId — возвращает null (фрейм первичен).
+	 */
+	_findHostImage(drawingObj) {
+		if (drawingObj.properties?.frameId) return null;
+
+		const dr = getObjRect(drawingObj);
+		const images = (this.state.state.objects || []).filter(o => isImageType(o.type));
+		const candidates = images.filter(img => isFullyContained(dr, getObjRect(img)));
+		if (!candidates.length) return null;
+
+		candidates.sort((a, b) => {
+			const pa = this.pixi.objects.get(a.id);
+			const pb = this.pixi.objects.get(b.id);
+			return (pb?.zIndex ?? 0) - (pa?.zIndex ?? 0);
+		});
+		return candidates[0].id;
+	}
+
+	_getImageChildren(imageId) {
+		return (this.state.state.objects || [])
+			.filter(o => o.properties?.imageId === imageId)
+			.map(o => o.id);
+	}
+
+	// ─── Логика пересчёта ─────────────────────────────────────────────────────
+
+	/** Пересчитывает imageId для одного drawing по текущим bounds. */
+	_recomputeImageAttachment(objectId) {
+		const obj = (this.state.state.objects || []).find(o => o.id === objectId);
+		if (!obj || !isDrawingType(obj.type)) return;
+
+		const newImageId = this._findHostImage(obj);
+		const prevImageId = obj.properties?.imageId ?? null;
+		if (newImageId === prevImageId) return;
+
+		obj.properties = obj.properties || {};
+		if (newImageId) {
+			obj.properties.imageId = newImageId;
+		} else {
+			delete obj.properties.imageId;
+		}
+		this.state.markDirty();
+	}
+
+	/** При создании изображения прикрепляет все drawing, оказавшиеся внутри. */
+	_attachDrawingsToNewImage(imageId) {
+		const imageObj = (this.state.state.objects || []).find(o => o.id === imageId);
+		if (!imageObj) return;
+		const ir = getObjRect(imageObj);
+		let changed = false;
+
+		for (const obj of this.state.state.objects || []) {
+			if (!isDrawingType(obj.type)) continue;
+			if (obj.properties?.frameId) continue;
+			if (obj.properties?.imageId) continue;
+			if (isFullyContained(getObjRect(obj), ir)) {
+				obj.properties = obj.properties || {};
+				obj.properties.imageId = imageId;
+				changed = true;
+			}
+		}
+		if (changed) this.state.markDirty();
+	}
+
+	/**
+	 * Пересчитывает все drawing относительно конкретного изображения.
+	 * Вызывается после resize или drag изображения.
+	 */
+	_recomputeAllForImage(imageId) {
+		const imageObj = (this.state.state.objects || []).find(o => o.id === imageId);
+		if (!imageObj) return;
+		const ir = getObjRect(imageObj);
+		let changed = false;
+
+		for (const obj of this.state.state.objects || []) {
+			if (!isDrawingType(obj.type)) continue;
+			if (obj.properties?.frameId) continue;
+
+			const prevImageId = obj.properties?.imageId ?? null;
+			const inside = isFullyContained(getObjRect(obj), ir);
+			const attached = prevImageId === imageId;
+
+			if (inside && !attached && !prevImageId) {
+				obj.properties = obj.properties || {};
+				obj.properties.imageId = imageId;
+				changed = true;
+			} else if (!inside && attached) {
+				delete obj.properties.imageId;
+				changed = true;
+			}
+		}
+		if (changed) this.state.markDirty();
+	}
+
+	// ─── Lifecycle ────────────────────────────────────────────────────────────
+
+	attach() {
+		if (this._attached) return;
+		this._attached = true;
+
+		// Создан объект: изображение → прикрепляем вложенные drawing;
+		//               drawing → проверяем попадание внутрь изображения.
+		this._onObjectCreated = ({ objectId, objectData }) => {
+			try {
+				if (!objectData) return;
+				if (isImageType(objectData.type)) {
+					this._attachDrawingsToNewImage(objectId);
+				} else if (isDrawingType(objectData.type)) {
+					this._recomputeImageAttachment(objectId);
+				}
+			} catch (_) { /* no-op */ }
+		};
+		this.eventBus.on(Events.Object.Created, this._onObjectCreated);
+
+		// DragStart изображения — сохраняем начальные позиции (PIXI-центры) детей.
+		this._onDragStart = (data) => {
+			const moved = (this.state.state.objects || []).find(o => o.id === data.object);
+			if (!moved || !isImageType(moved.type)) return;
+
+			const p = this.pixi.objects.get(moved.id);
+			this._imgDragImgStart = { x: p?.x ?? 0, y: p?.y ?? 0 };
+			this._imgDragChildStart = new Map();
+			for (const childId of this._getImageChildren(moved.id)) {
+				const cp = this.pixi.objects.get(childId);
+				if (cp) this._imgDragChildStart.set(childId, { x: cp.x, y: cp.y });
+			}
+		};
+		this.eventBus.on(Events.Tool.DragStart, this._onDragStart);
+
+		// DragUpdate изображения — тащим привязанные drawing.
+		this._onDragUpdate = (data) => {
+			const moved = (this.state.state.objects || []).find(o => o.id === data.object);
+			if (!moved || !isImageType(moved.type)) return;
+
+			const p = this.pixi.objects.get(moved.id);
+			const start = this._imgDragImgStart ?? { x: p?.x ?? 0, y: p?.y ?? 0 };
+			const dx = (p?.x ?? 0) - start.x;
+			const dy = (p?.y ?? 0) - start.y;
+
+			for (const childId of this._getImageChildren(moved.id)) {
+				let startPos = this._imgDragChildStart?.get(childId);
+				const cp = this.pixi.objects.get(childId);
+				if (!startPos) {
+					if (cp) {
+						startPos = { x: cp.x - dx, y: cp.y - dy };
+						this._imgDragChildStart ??= new Map();
+						this._imgDragChildStart.set(childId, startPos);
+					} else {
+						continue;
+					}
+				}
+				const nx = startPos.x + dx;
+				const ny = startPos.y + dy;
+				if (cp) { cp.x = nx; cp.y = ny; }
+				const stObj = (this.state.state.objects || []).find(o => o.id === childId);
+				if (stObj) {
+					const hw = cp ? (cp.width ?? 0) / 2 : 0;
+					const hh = cp ? (cp.height ?? 0) / 2 : 0;
+					stObj.position.x = nx - hw;
+					stObj.position.y = ny - hh;
+					this.eventBus.emit(Events.Object.TransformUpdated, {
+						objectId: childId,
+						type: 'position',
+						position: { x: stObj.position.x, y: stObj.position.y },
+					});
+				}
+			}
+		};
+		this.eventBus.on(Events.Tool.DragUpdate, this._onDragUpdate);
+
+		// DragEnd: для drawing — пересчитываем imageId;
+		//          для изображения — финализируем drag-state и пересчитываем вложенных.
+		this._onDragEnd = (data) => {
+			const movedObj = (this.state.state.objects || []).find(o => o.id === data.object);
+			if (!movedObj) return;
+
+			if (isDrawingType(movedObj.type)) {
+				this._recomputeImageAttachment(movedObj.id);
+			} else if (isImageType(movedObj.type)) {
+				this._imgDragImgStart = null;
+				this._imgDragChildStart = null;
+				this._recomputeAllForImage(movedObj.id);
+			}
+		};
+		this.eventBus.on(Events.Tool.DragEnd, this._onDragEnd);
+
+		// ResizeEnd изображения — пересчитываем, какие drawing остаются внутри.
+		this._onResizeEnd = (data) => {
+			const obj = (this.state.state.objects || []).find(o => o.id === data.object);
+			if (!obj || !isImageType(obj.type)) return;
+			this._recomputeAllForImage(obj.id);
+		};
+		this.eventBus.on(Events.Tool.ResizeEnd, this._onResizeEnd);
+	}
+
+	detach() {
+		if (!this._attached) return;
+		this._attached = false;
+		if (this._onObjectCreated) this.eventBus.off(Events.Object.Created, this._onObjectCreated);
+		if (this._onDragStart) this.eventBus.off(Events.Tool.DragStart, this._onDragStart);
+		if (this._onDragUpdate) this.eventBus.off(Events.Tool.DragUpdate, this._onDragUpdate);
+		if (this._onDragEnd) this.eventBus.off(Events.Tool.DragEnd, this._onDragEnd);
+		if (this._onResizeEnd) this.eventBus.off(Events.Tool.ResizeEnd, this._onResizeEnd);
+		this._onObjectCreated = null;
+		this._onDragStart = null;
+		this._onDragUpdate = null;
+		this._onDragEnd = null;
+		this._onResizeEnd = null;
+		this._imgDragImgStart = null;
+		this._imgDragChildStart = null;
+	}
+}

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;

package/src/tools/object-tools/placement/GhostController.js

@@ -378,10 +378,10 @@ export class GhostController {
         const title = host.pending.properties?.title || 'Новый';
 
         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() : '';
-        const borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 4;
+        const borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 5;
         const cornerRadius = Number.isFinite(cssCornerRadius) ? cssCornerRadius : 6;
         let strokeColor;
         if (cssBorderColor && cssBorderColor.startsWith('#')) {