@sequent-org/moodboard 1.0.24 → 1.2.0

package/src/objects/NoteObject.js

@@ -14,13 +14,15 @@ export class NoteObject {
         this.objectData = objectData;
         
         // Размеры записки
-        this.width = objectData.width || objectData.properties?.width || 160;
-        this.height = objectData.height || objectData.properties?.height || 100;
+        const defaultSide = 250; // квадрат 250x250
+        this.width = objectData.width || objectData.properties?.width || defaultSide;
+        this.height = objectData.height || objectData.properties?.height || defaultSide;
         
         // Свойства записки
         const props = objectData.properties || {};
         this.content = props.content || '';
-        this.fontSize = props.fontSize || 16;
+        this.fontSize = props.fontSize || 32;
+        const fontFamily = props.fontFamily || 'Caveat, Arial, cursive';
         this.backgroundColor = (typeof props.backgroundColor === 'number') ? props.backgroundColor : 0xFFF9C4; // Светло-желтый
         this.borderColor = (typeof props.borderColor === 'number') ? props.borderColor : 0xF9A825; // Золотистый
         this.textColor = (typeof props.textColor === 'number') ? props.textColor : 0x1A1A1A; // Почти черный для лучшей контрастности
@@ -32,25 +34,74 @@ export class NoteObject {
         this.container.eventMode = 'static';
         this.container.interactiveChildren = true;
         
+        // Тени по бокам (как у .box::before / .box::after)
+        this.shadowLayer = new PIXI.Container();
+        this.shadowLeft = new PIXI.Graphics();
+        this.shadowRight = new PIXI.Graphics();
+        this.shadowLayer.addChild(this.shadowLeft);
+        this.shadowLayer.addChild(this.shadowRight);
+        try {
+            // Мягкая тень (чуть сильнее)
+            this.shadowLayer.filters = [new PIXI.filters.BlurFilter(12)];
+        } catch (_) {}
+        this.container.addChild(this.shadowLayer);
+
         // Графика фона
         this.graphics = new PIXI.Graphics();
         this.container.addChild(this.graphics);
         
+        // Функция согласованной высоты строки (как в HtmlTextLayer)
+        this._computeLineHeightPx = (fs) => {
+            if (fs <= 12) return Math.round(fs * 1.40);
+            if (fs <= 18) return Math.round(fs * 1.34);
+            if (fs <= 36) return Math.round(fs * 1.26);
+            if (fs <= 48) return Math.round(fs * 1.24);
+            if (fs <= 72) return Math.round(fs * 1.22);
+            if (fs <= 96) return Math.round(fs * 1.20);
+            return Math.round(fs * 1.18);
+        };
+
         // Текст записки
         this.textField = new PIXI.Text(this.content, {
-            fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif',
+            fontFamily: fontFamily,
             fontSize: this.fontSize,
             fill: this.textColor,
             align: 'center',
+            letterSpacing: 0,
             wordWrap: true,
-            wordWrapWidth: this.width - 16, // Отступы по 8px с каждой стороны
-            lineHeight: this.fontSize * 1.2,
+            breakWords: true,
+            wordWrapWidth: Math.max(1, Math.min(360, (this.width - 32))),
+            lineHeight: this._computeLineHeightPx(this.fontSize),
+            padding: 3,
+            trim: false,
             resolution: (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1
         });
         
+        // Маска для обрезки текста по границам записки
+        this.textMask = new PIXI.Graphics();
+        this.container.addChild(this.textMask);
+        this.textField.mask = this.textMask;
+
         this._redraw(); // Сначала рисуем фон
+        // Прячем текст до загрузки шрифта Caveat, чтобы не показывать системный
+        this.textField.visible = false;
         this.container.addChild(this.textField); // Затем добавляем текст поверх
         this._updateTextPosition();
+        // Если шрифт уже загружен — показываем сразу, иначе подождём загрузки
+        if (this._isFontLoaded(fontFamily, this.fontSize)) {
+            this.textField.visible = true;
+        } else {
+            this._ensureWebFontApplied(fontFamily, this.fontSize);
+            // Фолбэк на случай отсутствия Font Loading API — короткая задержка
+            try {
+                if (!(typeof document !== 'undefined' && document.fonts && typeof document.fonts.load === 'function')) {
+                    setTimeout(() => { try { this.textField.visible = true; } catch (_) {} }, 300);
+                }
+            } catch (_) {}
+        }
+
+        // Гарантируем применение web-font (например, Caveat) при первом создании
+        this._ensureWebFontApplied(fontFamily, this.fontSize);
         
         // Отладочная информация
         console.log('NoteObject created with content:', this.content);
@@ -63,6 +114,7 @@ export class NoteObject {
             properties: { 
                 content: this.content,
                 fontSize: this.fontSize,
+                fontFamily: fontFamily,
                 backgroundColor: this.backgroundColor,
                 borderColor: this.borderColor,
                 textColor: this.textColor,
@@ -73,14 +125,71 @@ export class NoteObject {
         this._redraw();
     }
 
+    /**
+     * Возвращает видимую ширину текстового блока, согласованную с режимом редактирования
+     */
+    _getVisibleTextWidth() {
+        const horizontalPadding = 16;
+        const contentWidth = Math.max(1, this.width - (horizontalPadding * 2));
+        return Math.max(1, Math.min(360, contentWidth));
+    }
+
+    /** Проверяет, загружен ли указанный web-шрифт */
+    _isFontLoaded(fontFamily, fontSizePx) {
+        try {
+            if (typeof document === 'undefined' || !document.fonts || typeof document.fonts.check !== 'function') return false;
+            const primary = String(fontFamily || '').split(',')[0].trim().replace(/^['"]|['"]$/g, '') || 'Caveat';
+            const size = Math.max(1, Number(fontSizePx) || 32);
+            const spec = `normal ${size}px ${primary}`;
+            return document.fonts.check(spec);
+        } catch (_) {
+            return false;
+        }
+    }
+
+    /**
+     * Подгоняет размер шрифта так, чтобы текст умещался внутри записки
+     */
+    _fitTextToBounds() {
+        if (!this.textField) return;
+        const maxWidth = this._getVisibleTextWidth();
+        const verticalPadding = 16;
+        const maxHeight = Math.max(1, this.height - (verticalPadding * 2));
+
+        // Базовые установки стиля перед измерением
+        this.textField.style.wordWrap = true;
+        this.textField.style.breakWords = true;
+        this.textField.style.wordWrapWidth = maxWidth;
+
+        // Начинаем с желаемого размера шрифта
+        let displayFontSize = Math.max(1, Number(this.fontSize) || 32);
+        const minFontSize = 8;
+        let safety = 0;
+        const maxIterations = 64;
+
+        while (safety < maxIterations) {
+            this.textField.style.fontSize = displayFontSize;
+            this.textField.style.lineHeight = this._computeLineHeightPx(displayFontSize);
+            this.textField.updateText();
+            const needsShrink = this.textField.height > maxHeight;
+            if (!needsShrink || displayFontSize <= minFontSize) break;
+            displayFontSize = Math.max(minFontSize, displayFontSize - 1);
+            safety++;
+        }
+    }
+
     getPixi() {
         return this.container;
     }
 
     updateSize(size) {
         if (!size) return;
-        this.width = Math.max(80, size.width || this.width);
-        this.height = Math.max(60, size.height || this.height);
+        let w = Math.max(80, size.width || this.width);
+        let h = Math.max(60, size.height || this.height);
+        // Держим квадрат
+        const side = Math.max(w, h);
+        this.width = side;
+        this.height = side;
         
         this._redraw();
         this._updateTextPosition();
@@ -98,8 +207,10 @@ export class NoteObject {
 
     setContent(content) {
         this.content = content || '';
+        if (this.textField) this.textField.visible = false;
         this.textField.text = this.content;
         this._updateTextPosition();
+        if (this.textField) this.textField.visible = true;
         if (this.container && this.container._mb) {
             this.container._mb.properties = {
                 ...(this.container._mb.properties || {}),
@@ -139,7 +250,22 @@ export class NoteObject {
         if (typeof fontSize === 'number') {
             this.fontSize = fontSize;
             this.textField.style.fontSize = fontSize;
-            this.textField.style.lineHeight = fontSize * 1.2;
+            // Согласуем с HTML-слоем
+            this.textField.style.lineHeight = this._computeLineHeightPx(fontSize);
+            this.textField.style.padding = 3;
+            this.textField.style.trim = false;
+            this.textField.style.letterSpacing = 0;
+        }
+        if (typeof arguments[0]?.fontFamily === 'string') {
+            const ff = arguments[0].fontFamily;
+            this.textField.style.fontFamily = ff;
+            if (this.container && this.container._mb) {
+                this.container._mb.properties = {
+                    ...(this.container._mb.properties || {}),
+                    fontFamily: ff
+                };
+            }
+            this._ensureWebFontApplied(ff, this.fontSize);
         }
         if (typeof backgroundColor === 'number') this.backgroundColor = backgroundColor;
         if (typeof borderColor === 'number') this.borderColor = borderColor;
@@ -162,6 +288,27 @@ export class NoteObject {
         this._updateTextPosition();
     }
 
+    /**
+     * Дожидается загрузки веб-шрифта и обновляет PIXI.Text, чтобы применились корректные метрики
+     */
+    _ensureWebFontApplied(fontFamily, fontSizePx) {
+        try {
+            if (typeof document === 'undefined' || !document.fonts || !document.fonts.load) return;
+            const primary = String(fontFamily || '').split(',')[0].trim().replace(/^['"]|['"]$/g, '') || 'Caveat';
+            const size = Math.max(1, Number(fontSizePx) || 32);
+            const spec = `normal ${size}px ${primary}`;
+            document.fonts.load(spec).then(() => {
+                // Обновляем текст после загрузки шрифта и сразу подгоняем без мерцания
+                try {
+                    if (this.textField) this.textField.visible = false;
+                    this.textField.style.fontFamily = fontFamily;
+                    this._updateTextPosition();
+                    if (this.textField) this.textField.visible = true;
+                } catch (_) {}
+            }).catch(() => {});
+        } catch (_) {}
+    }
+
     _redraw() {
         const g = this.graphics;
         const w = this.width;
@@ -169,29 +316,50 @@ export class NoteObject {
         
         g.clear();
         
-        // Тень записки (эффект приподнятости)
-        g.beginFill(0x000000, 0.1);
-        g.drawRoundedRect(2, 2, w, h, 4);
-        g.endFill();
-        
-        // Основной фон записки
-        g.beginFill(this.backgroundColor, 1);
-        g.lineStyle(1, this.borderColor, 1);
-        g.drawRoundedRect(0, 0, w, h, 4);
-        g.endFill();
+        // Левая и правая тень (узкие полосы снизу)
+        const shH = Math.max(8, Math.round(h * 0.05)); // толще тень (~5% высоты)
+        const shW = Math.max(24, Math.round(w * 0.45)); // шире тень (~45% ширины)
+        const bottom = Math.max(8, Math.round(h * 0.03)) + 10; // отступ снизу ~10
+
+        const drawShadow = (g) => {
+            g.clear();
+            g.beginFill(0x000000, 1);
+            g.drawRoundedRect(0, 0, shW, shH, shH / 2);
+            g.endFill();
+        };
+        drawShadow(this.shadowLeft);
+        drawShadow(this.shadowRight);
+
+        // Обновляем маску текста под новые размеры
+        const pad = 16;
+        this.textMask.clear();
+        this.textMask.beginFill(0x000000, 1);
+        this.textMask.drawRect(pad, pad, Math.max(1, w - pad * 2), Math.max(1, h - pad * 2));
+        this.textMask.endFill();
+
+        // Базовые позиции как в CSS: left:15px и right:15px; bottom:10px
+        this.shadowLeft.x = 15;
+        this.shadowLeft.y = h - shH - 10;
+        this.shadowLeft.skew = new PIXI.ObservablePoint(() => {}, null, -5 * Math.PI / 180, 0);
+        this.shadowLeft.rotation = -5 * Math.PI / 180;
+
+        this.shadowRight.x = w - shW - 15;
+        this.shadowRight.y = h - shH - 10;
+        this.shadowRight.skew = new PIXI.ObservablePoint(() => {}, null, 5 * Math.PI / 180, 0);
+        this.shadowRight.rotation = 5 * Math.PI / 180;
+
+        this.shadowLayer.alpha = 0.7; // темнее
         
-        // Небольшая полоска сверху для эффекта стикера
-        g.beginFill(this.borderColor, 0.3);
-        g.drawRoundedRect(0, 0, w, 8, 4);
+        // Основной фон записки — как .box: белый с небольшим радиусом
+        const boxBg = (typeof this.backgroundColor === 'number') ? this.backgroundColor : 0xFFFFFF;
+        g.beginFill(boxBg, 1);
+        g.drawRoundedRect(0, 0, w, h, 2);
         g.endFill();
         
-        // Линии на записке (эффект бумаги)
-        g.lineStyle(0.5, this.borderColor, 0.2);
-        const lineSpacing = Math.max(16, this.fontSize + 4);
-        for (let y = 24; y < h - 8; y += lineSpacing) {
-            g.moveTo(8, y);
-            g.lineTo(w - 8, y);
-        }
+        // Линии внутри записки убраны по требованию дизайна
+
+        // pivot контейнера строго по центру, чтобы ядро корректно вычисляло левый-верх
+        this.container.pivot.set(w / 2, h / 2);
         
         // Устанавливаем hit area для контейнера
         this.container.hitArea = new PIXI.Rectangle(0, 0, w, h);
@@ -204,24 +372,44 @@ export class NoteObject {
                    point.y >= bounds.y && 
                    point.y <= bounds.y + bounds.height;
         };
+
+        // Hover-эффект: ослабляем короб тени и сдвигаем ближе к центру (как в CSS)
+        this.container.eventMode = 'static';
+        this.container.on('pointerover', () => {
+            this.shadowLayer.alpha = 0.55;
+            this.shadowLeft.x = 5;
+            this.shadowRight.x = w - shW - 5;
+            this.shadowLeft.rotation = 0;
+            this.shadowRight.rotation = 0;
+        });
+        this.container.on('pointerout', () => {
+            this.shadowLayer.alpha = 0.7;
+            this.shadowLeft.x = 15;
+            this.shadowRight.x = w - shW - 15;
+            this.shadowLeft.rotation = -5 * Math.PI / 180;
+            this.shadowRight.rotation = 5 * Math.PI / 180;
+        });
     }
 
     _updateTextPosition() {
         if (!this.textField) return;
         
-        // Обновляем стиль текста
-        this.textField.style.wordWrapWidth = this.width - 16;
-        
-        // Ждем, пока PIXI пересчитает размеры текста
+        // Обновляем стиль текста согласно ограничениям редактора
+        this.textField.style.wordWrapWidth = this._getVisibleTextWidth();
+        this.textField.style.wordWrap = true;
+        this.textField.style.breakWords = true;
+
+        // Подгоняем размер шрифта под доступные границы
+        this._fitTextToBounds();
+
+        // Обновляем текст после подгонки
         this.textField.updateText();
         
-        // Центрируем текст по горизонтали
+        // Центрируем текст по центру заметки
         const centerX = this.width / 2;
-        const topMargin = 20; // Отступ от верха (ниже полоски)
-        
-        // Используем anchor для центрирования
-        this.textField.anchor.set(0.5, 0);
+        const centerY = this.height / 2;
+        this.textField.anchor.set(0.5, 0.5);
         this.textField.x = centerX;
-        this.textField.y = topMargin;
+        this.textField.y = centerY;
     }
 }

package/src/objects/ShapeObject.js

@@ -58,17 +58,18 @@ export class ShapeObject {
     /** Перерисовать с сохранением трансформаций */
     _redrawPreserveTransform(width, height, color, kind, cornerRadius) {
         const g = this.graphics;
-        const x = g.x;
-        const y = g.y;
+        // Сохраняем текущий центр и поворот
+        const centerX = g.x;
+        const centerY = g.y;
         const rot = g.rotation || 0;
-        const pivotX = g.pivot?.x || 0;
-        const pivotY = g.pivot?.y || 0;
 
         this._draw(width, height, color, kind, cornerRadius);
-
-        g.pivot.set(pivotX, pivotY);
-        g.x = x;
-        g.y = y;
+        // ВАЖНО: для согласованности с ядром (позиция — левый-верх, PIXI — центр)
+        // pivot должен всегда быть в центре объекта (w/2, h/2)
+        g.pivot.set(width / 2, height / 2);
+        // Восстанавливаем центр
+        g.x = centerX;
+        g.y = centerY;
         g.rotation = rot;
     }
 

package/src/objects/TextObject.js

@@ -91,16 +91,7 @@ export class TextObject {
      * Для TextObject фактическая логика скрытия/показа обрабатывается в HtmlTextLayer
      */
     hideText() {
-        // Для TextObject визуализация происходит в HtmlTextLayer
-        // Эмитим событие для скрытия текста
-        if (this.rect && this.rect._mb && this.rect._mb.objectId) {
-            // Используем EventBus через core, если доступен
-            if (typeof window !== 'undefined' && window.moodboardEventBus) {
-                window.moodboardEventBus.emit('tool:hide:object:text', { 
-                    objectId: this.rect._mb.objectId 
-                });
-            }
-        }
+        // Ничего не делаем: скрытие текста обрабатывается HtmlTextLayer по событию
     }
 
     /**
@@ -108,16 +99,7 @@ export class TextObject {
      * Для TextObject фактическая логика скрытия/показа обрабатывается в HtmlTextLayer
      */
     showText() {
-        // Для TextObject визуализация происходит в HtmlTextLayer
-        // Эмитим событие для показа текста
-        if (this.rect && this.rect._mb && this.rect._mb.objectId) {
-            // Используем EventBus через core, если доступен
-            if (typeof window !== 'undefined' && window.moodboardEventBus) {
-                window.moodboardEventBus.emit('tool:show:object:text', { 
-                    objectId: this.rect._mb.objectId 
-                });
-            }
-        }
+        // Ничего не делаем: показ текста обрабатывается HtmlTextLayer по событию
     }
 }
 

package/src/services/BoardService.js

@@ -15,11 +15,11 @@ export class BoardService {
 		const canvasSize = (this._getCanvasSize?.() || {});
 		this.grid = GridFactory.createGrid('line', {
 			enabled: true,
-			size: 20,
+			size: 32,
 			width: canvasSize.width || 800,
 			height: canvasSize.height || 600,
-			color: 0xE6E6E6,
-			opacity: 0.5
+			color: 0x6a6aff,
+			opacity: 0.4
 		});
 		this.grid.updateVisual();
 		this.pixi.setGrid(this.grid);

package/src/services/FrameService.js

@@ -7,15 +7,76 @@ export class FrameService {
 		this.state = state;
 	}
 
+	_forceFramesBelow() {
+		const world = this.pixi?.worldLayer || this.pixi?.app?.stage;
+		if (world) world.sortableChildren = true;
+		let z = 0;
+		for (const o of this.state.state.objects || []) {
+			const pix = this.pixi.objects.get(o.id);
+			if (!pix) continue;
+			if (o.type === 'frame') {
+				pix.zIndex = -100000;
+			} else {
+				pix.zIndex = z++;
+			}
+		}
+	}
+
+	_attachIntersectingObjectsToFrame(frameId) {
+		const framePixi = this.pixi.objects.get(frameId);
+		if (!framePixi || !framePixi.getBounds) return false;
+		const fb = framePixi.getBounds();
+		const frameRect = { x: fb.x, y: fb.y, w: fb.width, h: fb.height };
+		let changed = false;
+		for (const obj of this.state.state.objects || []) {
+			if (!obj || obj.id === frameId) continue;
+			if (obj.type === 'frame') continue;
+			const pix = this.pixi.objects.get(obj.id);
+			if (!pix || !pix.getBounds) continue;
+			const ob = pix.getBounds();
+			const objRect = { x: ob.x, y: ob.y, w: ob.width, h: ob.height };
+			// Пересечение прямоугольников (экраные координаты PIXI)
+			const intersects = !(objRect.x > frameRect.x + frameRect.w ||
+				(objRect.x + objRect.w) < frameRect.x ||
+				objRect.y > frameRect.y + frameRect.h ||
+				(objRect.y + objRect.h) < frameRect.y);
+			if (intersects) {
+				obj.properties = obj.properties || {};
+				obj.properties.frameId = frameId;
+				changed = true;
+			}
+		}
+		return changed;
+	}
+
 	attach() {
+		// Автоприкрепление объектов при создании произвольного фрейма
+		this.eventBus.on(Events.Object.Created, ({ objectId, objectData }) => {
+			try {
+				if (!objectData || objectData.type !== 'frame') return;
+				const isArbitrary = (objectData.properties && objectData.properties.lockedAspect === false)
+					|| (objectData.properties && objectData.properties.title === 'Произвольный')
+					|| (objectData.properties && objectData.properties.isArbitrary === true);
+				if (!isArbitrary) return;
+				// Используем фактические bounds PIXI для надёжной проверки попадания
+				const changed = this._attachIntersectingObjectsToFrame(objectId);
+				if (changed) this.state.markDirty();
+				// Принудительно держим фреймы под объектами
+				this._forceFramesBelow();
+				// И оповестим общий менеджер на всякий случай
+				this.eventBus.emit(Events.Object.Reordered, { reason: 'attach_arbitrary_frame_children' });
+			} catch (_) { /* no-op */ }
+		});
+
 		// Визуал подсветки при drag над фреймом и перенос детей на drag
 		this.eventBus.on(Events.Tool.DragStart, (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, 0xEEEEEE);
-				// Cнимок стартовых позиций
-				this._frameDragFrameStart = { x: this.pixi.objects.get(moved.id)?.x || 0, y: this.pixi.objects.get(moved.id)?.y || 0 };
+				// Cнимок стартовых позиций по центру PIXI
+				const fp = this.pixi.objects.get(moved.id);
+				this._frameDragFrameStart = { x: fp?.x || 0, y: fp?.y || 0 };
 				const attachments = this._getFrameChildren(moved.id);
 				this._frameDragChildStart = new Map();
 				for (const childId of attachments) {
@@ -30,17 +91,37 @@ export class FrameService {
 			if (!moved) return;
 			if (moved.type === 'frame') {
 				const attachments = this._getFrameChildren(moved.id);
-				const frameStart = this._frameDragFrameStart || { x: data.position.x, y: data.position.y };
-				const dx = data.position.x - frameStart.x;
-				const dy = data.position.y - frameStart.y;
+				// ВАЖНО: считаем сдвиг по центру PIXI, чтобы не смешивать центр и левый-верх
+				const p = this.pixi.objects.get(moved.id);
+				const start = this._frameDragFrameStart || { 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 attachments) {
-					const start = this._frameDragChildStart?.get(childId);
-					if (!start) continue;
-					const p = this.pixi.objects.get(childId);
-					if (p) { p.x = start.x + dx; p.y = start.y + dy; }
+					let startPos = this._frameDragChildStart?.get(childId);
+					const childPixi = this.pixi.objects.get(childId);
+					if (!startPos) {
+						// Ребёнок мог появиться после начала drag
+						if (childPixi) {
+							startPos = { x: childPixi.x - dx, y: childPixi.y - dy };
+							this._frameDragChildStart = this._frameDragChildStart || new Map();
+							this._frameDragChildStart.set(childId, startPos);
+						} else {
+							continue;
+						}
+					}
+					const newCenterX = startPos.x + dx;
+					const newCenterY = startPos.y + dy;
+					if (childPixi) { childPixi.x = newCenterX; childPixi.y = newCenterY; }
 					const stObj = this.state.state.objects.find(o => o.id === childId);
-					if (stObj) { stObj.position.x = start.x + dx; stObj.position.y = start.y + dy; }
+					if (stObj) {
+						const halfW = childPixi ? (childPixi.width || 0) / 2 : 0;
+						const halfH = childPixi ? (childPixi.height || 0) / 2 : 0;
+						stObj.position.x = newCenterX - halfW;
+						stObj.position.y = newCenterY - halfH;
+					}
 				}
+				// Во время перетаскивания тоже гарантируем порядок
+				this._forceFramesBelow();
 			} else {
 				// Hover-эффект: подсветка фрейма, если центр объекта внутри
 				const centerX = moved.position.x + (moved.width || 0) / 2;
@@ -59,12 +140,10 @@ 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 (hoverId) {
 						const cur = frames.find(fr => fr.id === hoverId);
 						if (cur) this.pixi.setFrameFill(cur.id, cur.width, cur.height, 0xEEEEEE);
@@ -77,14 +156,11 @@ export class FrameService {
 		this.eventBus.on(Events.Tool.DragEnd, (data) => {
 			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);
 			}
-
-			// Автопривязка/отвязка объекта к фрейму после перемещения
 			this._recomputeFrameAttachment(movedObj.id);
-			// Сброс временных структур и hover-подсветки
+			this._forceFramesBelow();
 			this._frameDragFrameStart = null;
 			this._frameDragChildStart = null;
 			if (this._frameHoverId) {
@@ -108,7 +184,7 @@ export class FrameService {
 	_recomputeFrameAttachment(objectId) {
 		const obj = (this.state.state.objects || []).find(o => o.id === objectId);
 		if (!obj) return;
-		if (obj.type === 'frame') return; // фрейм к фрейму не крепим
+		if (obj.type === 'frame') return;
 		const center = {
 			x: obj.position.x + (obj.width || 0) / 2,
 			y: obj.position.y + (obj.height || 0) / 2
@@ -131,6 +207,8 @@ export class FrameService {
 			obj.properties = obj.properties || {};
 			obj.properties.frameId = newFrameId || undefined;
 			this.state.markDirty();
+			this._forceFramesBelow();
+			this.eventBus.emit(Events.Object.Reordered, { reason: 'recompute_frame_attachment' });
 		}
 	}
 }

package/src/services/ZoomPanController.js

@@ -9,11 +9,22 @@ export class ZoomPanController {
 	attach() {
 		// Масштабирование колесом — глобально отрабатываем Ctrl+Wheel
 		this.eventBus.on(Events.Tool.WheelZoom, ({ x, y, delta }) => {
-			const factor = 1 + (-delta) * 0.0015;
+			// Дискретный шаг зума 10%
 			const world = this.pixi.worldLayer || this.pixi.app.stage;
 			const oldScale = world.scale.x || 1;
-			const newScale = Math.max(0.1, Math.min(5, oldScale * factor));
-			if (newScale === oldScale) return;
+			const oldPercent = Math.round(oldScale * 100);
+			let targetPercent;
+			if (delta < 0) {
+				// Zoom in: к ближайшему следующему кратному 10 плюс шаг
+				targetPercent = Math.min(500, Math.floor(oldPercent / 10) * 10 + 10);
+			} else if (delta > 0) {
+				// Zoom out: к ближайшему предыдущему кратному 10 минус шаг
+				targetPercent = Math.max(10, Math.ceil(oldPercent / 10) * 10 - 10);
+			} else {
+				return;
+			}
+			const newScale = Math.max(0.1, Math.min(5, targetPercent / 100));
+			if (Math.abs(newScale - oldScale) < 0.0001) return;
 			// Вычисляем мировые координаты точки под курсором до изменения скейла
 			const worldX = (x - world.x) / oldScale;
 			const worldY = (y - world.y) / oldScale;

package/src/tools/BaseTool.js

@@ -44,7 +44,12 @@ export class BaseTool {
      */
     setCursor() {
         if (typeof document !== 'undefined' && document.body) {
-            document.body.style.cursor = this.cursor;
+            // Для 'default' не ставим инлайн-стиль, чтобы сработал глобальный CSS-курсор
+            if (!this.cursor || this.cursor === 'default') {
+                document.body.style.cursor = '';
+            } else {
+                document.body.style.cursor = this.cursor;
+            }
         }
     }