@sequent-org/moodboard 1.0.24 → 1.1.0

package/src/ui/HtmlHandlesLayer.js

@@ -1,4 +1,5 @@
 import { Events } from '../core/events/Events.js';
+import rotateIconSvg from '../assets/icons/rotate-icon.svg?raw';
 
 /**
  * HtmlHandlesLayer — HTML-ручки и рамка для выделенных объектов.
@@ -20,6 +21,7 @@ export class HtmlHandlesLayer {
         this.target = { type: 'none', id: null, bounds: null };
         this.handles = {};
         this._drag = null;
+        this._handlesSuppressed = false; // скрывать ручки во время перетаскивания/трансформаций
     }
 
     attach() {
@@ -35,11 +37,23 @@ export class HtmlHandlesLayer {
         this.eventBus.on(Events.Tool.SelectionRemove, () => this.update());
         this.eventBus.on(Events.Tool.SelectionClear, () => this.hide());
         this.eventBus.on(Events.Tool.DragUpdate, () => this.update());
+        this.eventBus.on(Events.Tool.DragStart, () => { this._handlesSuppressed = true; this._setHandlesVisibility(false); });
+        this.eventBus.on(Events.Tool.DragEnd, () => { this._handlesSuppressed = false; this._setHandlesVisibility(true); });
         this.eventBus.on(Events.Tool.ResizeUpdate, () => this.update());
+        this.eventBus.on(Events.Tool.ResizeStart, () => { this._handlesSuppressed = true; this._setHandlesVisibility(false); });
+        this.eventBus.on(Events.Tool.ResizeEnd, () => { this._handlesSuppressed = false; this._setHandlesVisibility(true); });
         this.eventBus.on(Events.Tool.RotateUpdate, () => this.update());
+        this.eventBus.on(Events.Tool.RotateStart, () => { this._handlesSuppressed = true; this._setHandlesVisibility(false); });
+        this.eventBus.on(Events.Tool.RotateEnd, () => { this._handlesSuppressed = false; this._setHandlesVisibility(true); });
         this.eventBus.on(Events.Tool.GroupDragUpdate, () => this.update());
+        this.eventBus.on(Events.Tool.GroupDragStart, () => { this._handlesSuppressed = true; this._setHandlesVisibility(false); });
+        this.eventBus.on(Events.Tool.GroupDragEnd, () => { this._handlesSuppressed = false; this._setHandlesVisibility(true); });
         this.eventBus.on(Events.Tool.GroupResizeUpdate, () => this.update());
+        this.eventBus.on(Events.Tool.GroupResizeStart, () => { this._handlesSuppressed = true; this._setHandlesVisibility(false); });
+        this.eventBus.on(Events.Tool.GroupResizeEnd, () => { this._handlesSuppressed = false; this._setHandlesVisibility(true); });
         this.eventBus.on(Events.Tool.GroupRotateUpdate, () => this.update());
+        this.eventBus.on(Events.Tool.GroupRotateStart, () => { this._handlesSuppressed = true; this._setHandlesVisibility(false); });
+        this.eventBus.on(Events.Tool.GroupRotateEnd, () => { this._handlesSuppressed = false; this._setHandlesVisibility(true); });
         this.eventBus.on(Events.UI.ZoomPercent, () => this.update());
         this.eventBus.on(Events.Tool.PanUpdate, () => this.update());
 
@@ -106,6 +120,27 @@ export class HtmlHandlesLayer {
         this.visible = false;
     }
 
+    _setHandlesVisibility(show) {
+        if (!this.layer) return;
+        const box = this.layer.querySelector('.mb-handles-box');
+        if (!box) return;
+        // Уголки
+        box.querySelectorAll('[data-dir]').forEach(el => {
+            el.style.display = show ? '' : 'none';
+        });
+        // Рёбра
+        box.querySelectorAll('[data-edge]').forEach(el => {
+            el.style.display = show ? '' : 'none';
+        });
+        // Ручка вращения
+        const rot = box.querySelector('[data-handle="rotate"]');
+        if (rot) rot.style.display = show ? '' : 'none';
+        // Если нужно показать, но ручек нет (мы их не создавали в suppressed-режиме) — перерисуем
+        if (show && !box.querySelector('[data-dir]')) {
+            this.update();
+        }
+    }
+
     _showBounds(worldBounds, id) {
         if (!this.layer) return;
         // Преобразуем world координаты в CSS-пиксели
@@ -122,16 +157,27 @@ export class HtmlHandlesLayer {
         const worldX = world?.x || 0;
         const worldY = world?.y || 0;
         
-        // Вычисляем позицию и размер в CSS координатах
+        // Узнаём тип объекта (нужно, чтобы для file/frame отключать определённые элементы)
+        let isFileTarget = false;
+        let isFrameTarget = false;
+        if (id !== '__group__') {
+            const req = { objectId: id, pixiObject: null };
+            this.eventBus.emit(Events.Tool.GetObjectPixi, req);
+            const mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
+            isFileTarget = mbType === 'file';
+            isFrameTarget = mbType === 'frame';
+        }
+
+        // Вычисляем позицию и размер в CSS координатах, округляем до целых px
         const cssX = offsetLeft + (worldX + worldBounds.x * worldScale) / res;
         const cssY = offsetTop + (worldY + worldBounds.y * worldScale) / res;
         const cssWidth = Math.max(1, (worldBounds.width * worldScale) / res);
         const cssHeight = Math.max(1, (worldBounds.height * worldScale) / res);
-        
-        const left = cssX;
-        const top = cssY;
-        const width = cssWidth;
-        const height = cssHeight;
+
+        const left = Math.round(cssX);
+        const top = Math.round(cssY);
+        const width = Math.round(cssWidth);
+        const height = Math.round(cssHeight);
 
         this.layer.innerHTML = '';
         const box = document.createElement('div');
@@ -148,11 +194,16 @@ export class HtmlHandlesLayer {
         Object.assign(box.style, {
             position: 'absolute', left: `${left}px`, top: `${top}px`,
             width: `${width}px`, height: `${height}px`,
-            border: '1px solid #1DE9B6', boxSizing: 'border-box', pointerEvents: 'none',
+            border: '1px solid #1DE9B6', borderRadius: '3px', boxSizing: 'content-box', pointerEvents: 'none',
             transformOrigin: 'center center', // Поворот вокруг центра
             transform: `rotate(${rotation}deg)` // Применяем поворот
         });
         this.layer.appendChild(box);
+        // Если сейчас подавление ручек активно — не создавать ручки вовсе, оставляем только рамку
+        if (this._handlesSuppressed) {
+            this.visible = true;
+            return;
+        }
 
         // Угловые ручки для ресайза - круглые с мятно-зелёным цветом и белой серединой
         const mkCorner = (dir, x, y, cursor) => {
@@ -164,12 +215,14 @@ export class HtmlHandlesLayer {
                 border: '2px solid #1DE9B6', 
                 borderRadius: '50%', // Делаем круглыми
                 boxSizing: 'border-box',
-                pointerEvents: 'auto', 
+                pointerEvents: isFileTarget ? 'none' : 'auto', 
                 zIndex: 10, // Увеличиваем z-index
                 cursor: cursor
             });
             h.style.left = `${x - 6}px`;
             h.style.top = `${y - 6}px`;
+            // Для файла скрываем ручки, для остальных показываем
+            h.style.display = isFileTarget ? 'none' : 'block';
             
             // Создаем внутренний белый круг
             const inner = document.createElement('div');
@@ -195,12 +248,14 @@ export class HtmlHandlesLayer {
                 h.style.borderColor = '#1DE9B6';
             });
             
-            h.addEventListener('mousedown', (e) => this._onHandleDown(e, box));
+            if (!isFileTarget) {
+                h.addEventListener('mousedown', (e) => this._onHandleDown(e, box));
+            }
             
             box.appendChild(h);
         };
 
-        const x0 = 0, y0 = 0, x1 = width, y1 = height, cx = width / 2, cy = height / 2;
+        const x0 = 0, y0 = 0, x1 = width, y1 = height, cx = Math.round(width / 2), cy = Math.round(height / 2);
         mkCorner('nw', x0, y0, 'nwse-resize');
         mkCorner('ne', x1, y0, 'nesw-resize');
         mkCorner('se', x1, y1, 'nwse-resize');
@@ -219,12 +274,15 @@ export class HtmlHandlesLayer {
             const e = document.createElement('div');
             e.dataset.edge = name; e.dataset.id = id;
             Object.assign(e.style, style, {
-                position: 'absolute', pointerEvents: 'auto', cursor, 
+                position: 'absolute', pointerEvents: isFileTarget ? 'none' : 'auto', cursor, 
                 zIndex: 5, // Меньше чем у ручек (10)
-                background: 'transparent' // невидимые области
+                background: 'transparent', // невидимые области
+                display: isFileTarget ? 'none' : 'block'
                 
             });
-            e.addEventListener('mousedown', (evt) => this._onEdgeResizeDown(evt));
+            if (!isFileTarget) {
+                e.addEventListener('mousedown', (evt) => this._onEdgeResizeDown(evt));
+            }
             box.appendChild(e);
         };
         
@@ -263,48 +321,40 @@ export class HtmlHandlesLayer {
             height: `${Math.max(0, height - 2 * cornerGap)}px` 
         }, 'ew-resize');
 
-        // Ручка вращения - зеленый круг с символом ↻ возле левого нижнего угла
+        // Ручка вращения: SVG-иконка, показываем для всех, кроме файла
         const rotateHandle = document.createElement('div');
         rotateHandle.dataset.handle = 'rotate'; 
         rotateHandle.dataset.id = id;
-        Object.assign(rotateHandle.style, {
-            position: 'absolute',
-            width: '20px', height: '20px',
-            background: '#28A745',
-            border: '2px solid #fff',
-            borderRadius: '50%',
-            boxSizing: 'border-box',
-            pointerEvents: 'auto',
-            cursor: 'grab',
-            zIndex: 15, // Выше ручек ресайза
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: '12px',
-            color: '#fff',
-            fontWeight: 'bold',
-            userSelect: 'none'
-        });
-        
-        // Позиционируем возле левого нижнего угла с отступом
-        rotateHandle.style.left = `${0 - 10}px`; // центрируем относительно угла
-        rotateHandle.style.top = `${height + 25 - 10}px`; // отступ 25px от нижней грани
-        
-        // Добавляем символ вращения
-        rotateHandle.innerHTML = '↻';
-        
-        // Эффекты при наведении
-        rotateHandle.addEventListener('mouseenter', () => {
-            rotateHandle.style.background = '#34CE57';
-            rotateHandle.style.cursor = 'grab';
-        });
-        rotateHandle.addEventListener('mouseleave', () => {
-            rotateHandle.style.background = '#28A745';
-        });
-        
-        // Обработчик вращения
-        rotateHandle.addEventListener('mousedown', (e) => this._onRotateHandleDown(e, box));
-        
+        if (isFileTarget || isFrameTarget) {
+            Object.assign(rotateHandle.style, { display: 'none', pointerEvents: 'none' });
+        } else {
+            Object.assign(rotateHandle.style, {
+                position: 'absolute',
+                width: '20px', height: '20px',
+                background: 'transparent',
+                border: 'none',
+                borderRadius: '50%',
+                pointerEvents: 'auto',
+                cursor: 'grab',
+                zIndex: 15,
+                display: 'flex', alignItems: 'center', justifyContent: 'center'
+            });
+            // Фиксированная дистанция 20px по диагонали (top-right → bottom-left) от угла (0, h)
+            const d = 38;
+            const L = Math.max(1, Math.hypot(width, height));
+            const centerX = -(width / L) * d; // влево от левого нижнего угла
+            const centerY = height + (height / L) * d; // ниже нижней грани
+            rotateHandle.style.left = `${Math.round(centerX - 0)}px`;
+            rotateHandle.style.top = `${Math.round(centerY - 10)}px`;
+            rotateHandle.innerHTML = rotateIconSvg;
+            const svgEl = rotateHandle.querySelector('svg');
+            if (svgEl) {
+                svgEl.style.width = '100%';
+                svgEl.style.height = '100%';
+                svgEl.style.display = 'block';
+            }
+            rotateHandle.addEventListener('mousedown', (e) => this._onRotateHandleDown(e, box));
+        }
         box.appendChild(rotateHandle);
 
         this.visible = true;
@@ -388,11 +438,11 @@ export class HtmlHandlesLayer {
                 newTop = startCSS.top + dy; 
             }
 
-            // Обновим визуально
-            box.style.left = `${newLeft}px`;
-            box.style.top = `${newTop}px`;
-            box.style.width = `${newW}px`;
-            box.style.height = `${newH}px`;
+            // Обновим визуально (округление до целых для избежания дрожания)
+            box.style.left = `${Math.round(newLeft)}px`;
+            box.style.top = `${Math.round(newTop)}px`;
+            box.style.width = `${Math.round(newW)}px`;
+            box.style.height = `${Math.round(newH)}px`;
             // Переставим ручки без перестроения слоя
             this._repositionBoxChildren(box);
 
@@ -416,16 +466,22 @@ export class HtmlHandlesLayer {
                     newBounds: { x: worldX, y: worldY, width: worldW, height: worldH }
                 });
             } else {
+                // Определяем тип объекта: для фреймов (locked aspect) позволяем ядру вычислить позицию (симметрия)
+                let isFrameTarget = false;
+                {
+                    const req = { objectId: id, pixiObject: null };
+                    this.eventBus.emit(Events.Tool.GetObjectPixi, req);
+                    const mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
+                    isFrameTarget = mbType === 'frame';
+                }
+                // Для правой/нижней ручки — фиксируем стартовую позицию; для левой/верхней — новую (не для frame)
+                const isLeftOrTop = dir.includes('w') || dir.includes('n');
                 const resizeData = {
                     object: id,
-                    size: { width: worldW, height: worldH }
+                    size: { width: worldW, height: worldH },
+                    position: isFrameTarget ? null : (isLeftOrTop ? { x: worldX, y: worldY } : { x: startWorld.x, y: startWorld.y })
                 };
-                
-                // Отправляем позицию только если она действительно изменилась
-                if (positionChanged) {
-                    resizeData.position = { x: worldX, y: worldY };
-                }
-                
+
                 this.eventBus.emit(Events.Tool.ResizeUpdate, resizeData);
             }
         };
@@ -454,18 +510,22 @@ export class HtmlHandlesLayer {
                 // Определяем, изменилась ли позиция
                 const finalPositionChanged = (endCSS.left !== startCSS.left) || (endCSS.top !== startCSS.top);
                 
+                const isEdgeLeftOrTop = dir.includes('w') || dir.includes('n');
+                let isFrameTarget = false;
+                {
+                    const req = { objectId: id, pixiObject: null };
+                    this.eventBus.emit(Events.Tool.GetObjectPixi, req);
+                    const mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
+                    isFrameTarget = mbType === 'frame';
+                }
                 const resizeEndData = {
                     object: id,
                     oldSize: { width: startWorld.width, height: startWorld.height },
-                    newSize: { width: worldW, height: worldH }
+                    newSize: { width: worldW, height: worldH },
+                    oldPosition: { x: startWorld.x, y: startWorld.y },
+                    newPosition: isFrameTarget ? null : (isEdgeLeftOrTop ? { x: worldX, y: worldY } : { x: startWorld.x, y: startWorld.y })
                 };
-                
-                // Добавляем информацию о позиции только если она действительно изменилась
-                if (finalPositionChanged) {
-                    resizeEndData.oldPosition = { x: startWorld.x, y: startWorld.y };
-                    resizeEndData.newPosition = { x: worldX, y: worldY };
-                }
-                
+
                 this.eventBus.emit(Events.Tool.ResizeEnd, resizeEndData);
             }
         };
@@ -569,14 +629,10 @@ export class HtmlHandlesLayer {
             } else {
                 const edgeResizeData = {
                     object: id,
-                    size: { width: worldW, height: worldH }
+                    size: { width: worldW, height: worldH },
+                    position: edgePositionChanged ? { x: worldX, y: worldY } : { x: startWorld.x, y: startWorld.y }
                 };
-                
-                // Отправляем позицию только если она действительно изменилась
-                if (edgePositionChanged) {
-                    edgeResizeData.position = { x: worldX, y: worldY };
-                }
-                
+
                 this.eventBus.emit(Events.Tool.ResizeUpdate, edgeResizeData);
             }
         };
@@ -607,15 +663,11 @@ export class HtmlHandlesLayer {
                 const edgeResizeEndData = {
                     object: id,
                     oldSize: { width: startWorld.width, height: startWorld.height },
-                    newSize: { width: worldW, height: worldH }
+                    newSize: { width: worldW, height: worldH },
+                    oldPosition: { x: startWorld.x, y: startWorld.y },
+                    newPosition: edgeFinalPositionChanged ? { x: worldX, y: worldY } : { x: startWorld.x, y: startWorld.y }
                 };
-                
-                // Добавляем информацию о позиции только если она действительно изменилась
-                if (edgeFinalPositionChanged) {
-                    edgeResizeEndData.oldPosition = { x: startWorld.x, y: startWorld.y };
-                    edgeResizeEndData.newPosition = { x: worldX, y: worldY };
-                }
-                
+
                 this.eventBus.emit(Events.Tool.ResizeEnd, edgeResizeEndData);
             }
         };
@@ -770,8 +822,12 @@ export class HtmlHandlesLayer {
         // Позиционируем ручку вращения
         const rotateHandle = box.querySelector('[data-handle="rotate"]');
         if (rotateHandle) {
-            rotateHandle.style.left = `${0 - 10}px`; // центрируем относительно левого нижнего угла
-            rotateHandle.style.top = `${height + 25 - 10}px`; // отступ 25px от нижней грани
+            const d = 20;
+            const L = Math.max(1, Math.hypot(width, height));
+            const centerX = -(width / L) * d;
+            const centerY = height + (height / L) * d;
+            rotateHandle.style.left = `${Math.round(centerX - 10)}px`;
+            rotateHandle.style.top = `${Math.round(centerY - 10)}px`;
         }
     }
 }

package/src/ui/HtmlTextLayer.js

@@ -180,6 +180,8 @@ export class HtmlTextLayer {
             transformOrigin: 'top left',
             color: color,
             whiteSpace: 'pre-wrap',
+            overflowWrap: 'anywhere',
+            wordBreak: 'break-word',
             pointerEvents: 'none', // всё взаимодействие остаётся на PIXI
             userSelect: 'none',
             fontFamily: fontFamily,
@@ -236,10 +238,16 @@ export class HtmlTextLayer {
         const baseH = parseFloat(el.dataset.baseH || '36') || 36;
         const scaleX = w && baseW ? (w / baseW) : 1;
         const scaleY = h && baseH ? (h / baseH) : 1;
-        const sObj = Math.min(scaleX, scaleY);
+        // Для текстовых объектов не масштабируем шрифт от изменения размеров блока,
+        // чтобы сохранять вид как при редактировании (как в Miro)
+        const sObj = (obj?.type === 'text' || obj?.type === 'simple-text')
+            ? 1
+            : Math.min(scaleX, scaleY);
         const sCss = s / res;
         const fontSizePx = Math.max(1, baseFS * sObj * sCss);
         el.style.fontSize = `${fontSizePx}px`;
+        // Синхронизируем межстрочный интервал с режимом редактирования
+        el.style.lineHeight = `${fontSizePx}px`;
 
         // Позиция и габариты в экранных координатах
         const left = (tx + s * x) / res;

package/src/ui/NotePropertiesPanel.js

@@ -27,9 +27,13 @@ export class NotePropertiesPanel {
             if (this.currentId && objectId === this.currentId) this.hide();
         });
 
-        // Обновляем позицию при любых изменениях
+        // Обновляем позицию / скрываем во время перетаскивания
+        this.eventBus.on(Events.Tool.DragStart, () => this.hide());
         this.eventBus.on(Events.Tool.DragUpdate, () => this.reposition());
+        this.eventBus.on(Events.Tool.DragEnd, () => this.updateFromSelection());
         this.eventBus.on(Events.Tool.GroupDragUpdate, () => this.reposition());
+        this.eventBus.on(Events.Tool.GroupDragStart, () => this.hide());
+        this.eventBus.on(Events.Tool.GroupDragEnd, () => this.updateFromSelection());
         this.eventBus.on(Events.Tool.ResizeUpdate, () => this.reposition());
         this.eventBus.on(Events.Tool.RotateUpdate, () => this.reposition());
 
@@ -158,17 +162,20 @@ export class NotePropertiesPanel {
         const { x, y } = posData.position;
         const { width, height } = sizeData.size;
 
-        // Позиционируем панель справа от записки
-        const panelX = x + width + 10;
-        const panelY = y;
+        // Позиционируем панель над запиской, по центру
+        const panelRect = this.panel.getBoundingClientRect();
+        const panelW = Math.max(1, panelRect.width || 320);
+        const panelH = Math.max(1, panelRect.height || 40);
+        const panelX = x + (width / 2) - (panelW / 2);
+        const panelY = Math.max(0, y - panelH - 40); // отступ 40px над запиской
         
         console.log('📝 NotePropertiesPanel: Positioning next to note:', { 
             noteX: x, noteY: y, noteWidth: width, noteHeight: height,
             panelX, panelY
         });
 
-        this.panel.style.left = `${panelX}px`;
-        this.panel.style.top = `${panelY}px`;
+        this.panel.style.left = `${Math.round(panelX)}px`;
+        this.panel.style.top = `${Math.round(panelY)}px`;
     }
 
     _createNoteControls(panel) {

package/src/ui/Toolbar.js

@@ -60,7 +60,7 @@ export class Toolbar {
 
         // Существующие элементы ниже новых
         const existingTools = [
-            // { id: 'frame', iconName: 'frame', title: 'Добавить фрейм', type: 'frame' }, // Временно скрыто
+            { id: 'frame', iconName: 'frame', title: 'Добавить фрейм', type: 'frame' },
             { id: 'divider', type: 'divider' },
             { id: 'clear', iconName: 'clear', title: 'Очистить холст', type: 'clear' },
             { id: 'divider', type: 'divider' },
@@ -85,6 +85,7 @@ export class Toolbar {
         this.createShapesPopup();
         this.createDrawPopup();
         this.createEmojiPopup();
+        this.createFramePopup();
 
         // Подсветка активной кнопки на тулбаре по активному инструменту
         this.eventBus.on(Events.Tool.Activated, ({ tool }) => {
@@ -94,6 +95,115 @@ export class Toolbar {
         // Текущее состояние попапа рисования
         this.currentDrawTool = 'pencil';
     }
+
+    createFramePopup() {
+        this.framePopupEl = document.createElement('div');
+        this.framePopupEl.className = 'moodboard-toolbar__popup frame-popup';
+        this.framePopupEl.style.display = 'none';
+
+        const makeBtn = (label, id, enabled, aspect, options = {}) => {
+            const btn = document.createElement('button');
+            btn.className = 'frame-popup__btn' + (enabled ? '' : ' is-disabled') + (options.header ? ' frame-popup__btn--header' : '');
+            if (options.header) {
+                // handled by CSS class
+            }
+            btn.dataset.id = id;
+            // Внутри кнопки — превью (слева) и подпись (справа/ниже)
+            const holder = document.createElement('div');
+            holder.className = 'frame-popup__holder';
+            let preview = document.createElement('div');
+            if (options.header) {
+                // Для «Произвольный» — горизонтальный пунктирный прямоугольник
+                preview.className = 'frame-popup__preview frame-popup__preview--custom';
+            } else {
+                // Для пресетов — мини-превью с нужными пропорциями, слева от текста
+                preview.className = 'frame-popup__preview';
+                preview.style.aspectRatio = aspect || '1 / 1';
+            }
+            const caption = document.createElement('div');
+            caption.textContent = label;
+            caption.className = 'frame-popup__caption';
+            holder.appendChild(preview);
+            holder.appendChild(caption);
+            btn.appendChild(holder);
+            if (enabled) {
+                btn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    // Активируем place, устанавливаем pending для frame (А4)
+                    this.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'place' });
+                    this.placeSelectedButtonId = 'frame';
+                    this.setActiveToolbarButton('place');
+                    if (id === 'custom') {
+                        // Рисовать фрейм вручную прямоугольником
+                        this.eventBus.emit(Events.Place.Set, { type: 'frame-draw', properties: {} });
+                    } else {
+                        // Подбираем размеры по пресету и увеличиваем площадь в 2 раза (масштаб по корню из 2)
+                        let width = 210, height = 297, titleText = 'A4';
+                        if (id === '1x1') { width = 300; height = 300; titleText = '1:1'; }
+                        else if (id === '4x3') { width = 320; height = 240; titleText = '4:3'; }
+                        else if (id === '16x9') { width = 320; height = 180; titleText = '16:9'; }
+                        const scale = 2; // х2 по сторонам = х4 по площади
+                        width = Math.round(width * scale);
+                        height = Math.round(height * scale);
+                        // Устанавливаем pending для размещения фрейма указанного размера
+                        this.eventBus.emit(Events.Place.Set, {
+                            type: 'frame',
+                            properties: {
+                                width,
+                                height,
+                                borderColor: 0x333333,
+                                fillColor: 0xFFFFFF,
+                                title: titleText,
+                                lockedAspect: true,
+                                type: id
+                            }
+                        });
+                    }
+                    this.closeFramePopup();
+                });
+            }
+            this.framePopupEl.appendChild(btn);
+        };
+
+        // Верхний ряд: одна кнопка «Произвольный» (включаем рисование фрейма)
+        makeBtn('Произвольный', 'custom', true, 'none', { header: true });
+
+        makeBtn('A4', 'a4', true, '210 / 297');
+        makeBtn('1:1', '1x1', true, '1 / 1');
+        makeBtn('4:3', '4x3', true, '4 / 3');
+        makeBtn('16:9', '16x9', true, '16 / 9');
+
+        this.container.appendChild(this.framePopupEl);
+    }
+
+    toggleFramePopup(anchorBtn) {
+        if (!this.framePopupEl) return;
+        const visible = this.framePopupEl.style.display !== 'none';
+        if (visible) {
+            this.closeFramePopup();
+            return;
+        }
+        const buttonRect = anchorBtn.getBoundingClientRect();
+        const toolbarRect = this.container.getBoundingClientRect();
+        // Сначала показываем невидимо, чтобы измерить размеры
+        this.framePopupEl.style.display = 'grid';
+        this.framePopupEl.style.visibility = 'hidden';
+        const panelW = this.framePopupEl.offsetWidth || 120;
+        const panelH = this.framePopupEl.offsetHeight || 120;
+        // Горизонтально: как у панели фигур — от правого края тулбара + 8px
+        const targetLeft = this.element.offsetWidth + 8;
+        // Вертикально: центр панели на уровне центра кнопки, с тем же лёгким смещением -4px как у фигур
+        const btnCenterY = buttonRect.top + buttonRect.height / 2;
+        const targetTop = Math.max(0, Math.round(btnCenterY - toolbarRect.top - panelH / 2 - 4));
+        this.framePopupEl.style.left = `${Math.round(targetLeft)}px`;
+        this.framePopupEl.style.top = `${targetTop}px`;
+        // Делаем видимой
+        this.framePopupEl.style.visibility = '';
+    }
+
+    closeFramePopup() {
+        if (this.framePopupEl) this.framePopupEl.style.display = 'none';
+    }
     
     /**
      * Создает кнопку инструмента
@@ -316,27 +426,17 @@ export class Toolbar {
                 return;
             }
 
-            // Добавление фрейма: включаем placement и ждём клика для выбора позиции
+            // Фрейм: показываем всплывающую панель с пресетами
             if (toolType === 'frame') {
                 this.animateButton(button);
+                this.toggleFramePopup(button);
                 this.closeShapesPopup();
                 this.closeDrawPopup();
                 this.closeEmojiPopup();
-                // Активируем place, устанавливаем pending для frame
+                // Активируем place и подсвечиваем кнопку Frame
                 this.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'place' });
                 this.placeSelectedButtonId = 'frame';
                 this.setActiveToolbarButton('place');
-                // Устанавливаем свойства фрейма по умолчанию
-                this.eventBus.emit(Events.Place.Set, { 
-                    type: 'frame', 
-                    properties: { 
-                        width: 200,
-                        height: 300,
-                        borderColor: 0x333333,
-                        fillColor: 0xFFFFFF,
-                        title: 'Новый' // Название по умолчанию
-                    }
-                });
                 return;
             }
 
@@ -447,13 +547,16 @@ export class Toolbar {
             const isInsideShapesPopup = this.shapesPopupEl && this.shapesPopupEl.contains(e.target);
             const isInsideDrawPopup = this.drawPopupEl && this.drawPopupEl.contains(e.target);
             const isInsideEmojiPopup = this.emojiPopupEl && this.emojiPopupEl.contains(e.target);
+            const isInsideFramePopup = this.framePopupEl && this.framePopupEl.contains(e.target);
             const isShapesButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--shapes');
             const isDrawButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--pencil');
             const isEmojiButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--emoji');
-            if (!isInsideToolbar && !isInsideShapesPopup && !isShapesButton && !isInsideDrawPopup && !isDrawButton && !isInsideEmojiPopup && !isEmojiButton) {
+            const isFrameButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--frame');
+            if (!isInsideToolbar && !isInsideShapesPopup && !isShapesButton && !isInsideDrawPopup && !isDrawButton && !isInsideEmojiPopup && !isEmojiButton && !isInsideFramePopup && !isFrameButton) {
                 this.closeShapesPopup();
                 this.closeDrawPopup();
                 this.closeEmojiPopup();
+                this.closeFramePopup();
             }
         });
     }