@sequent-org/moodboard 1.0.23 → 1.1.0

package/src/core/index.js

@@ -213,19 +213,115 @@ export class CoreMoodBoard {
             if (this.clipboard.type === 'object') {
                 this.pasteObject({ x, y });
             } else if (this.clipboard.type === 'group') {
-                // Вставляем группу с сохранением относительных позиций относительно клика
                 const group = this.clipboard;
                 const data = Array.isArray(group.data) ? group.data : [];
                 if (data.length === 0) return;
-                // Вычисляем топ-левт группы для относительного смещения клик-точки
-                let minX = Infinity, minY = Infinity;
-                data.forEach(o => {
-                    if (!o || !o.position) return;
-                    minX = Math.min(minX, o.position.x);
-                    minY = Math.min(minY, o.position.y);
-                });
-                if (!isFinite(minX) || !isFinite(minY)) return;
-                const baseX = minX, baseY = minY;
+
+                // Особая логика: если это бандл фрейма (фрейм + дети)
+                if (group.meta && group.meta.frameBundle) {
+                    // Вычисляем топ-левт группы для относительного смещения клик-точки
+                    let minX = Infinity, minY = Infinity;
+                    data.forEach(o => {
+                        if (!o || !o.position) return;
+                        minX = Math.min(minX, o.position.x);
+                        minY = Math.min(minY, o.position.y);
+                    });
+                    if (!isFinite(minX) || !isFinite(minY)) return;
+                    const baseX = minX, baseY = minY;
+
+                    // Ищем фрейм в бандле
+                    const frames = data.filter(o => o && o.type === 'frame');
+                    if (frames.length !== 1) {
+                        // fallback к обычной вставке группы
+                        const newIds = [];
+                        let pending = data.length;
+                        const onPasted = (payload) => {
+                            if (!payload || !payload.newId) return;
+                            newIds.push(payload.newId);
+                            pending -= 1;
+                            if (pending === 0) {
+                                this.eventBus.off(Events.Object.Pasted, onPasted);
+                                requestAnimationFrame(() => {
+                                    if (this.selectTool && newIds.length > 0) {
+                                        this.selectTool.setSelection(newIds);
+                                        this.selectTool.updateResizeHandles();
+                                    }
+                                });
+                            }
+                        };
+                        this.eventBus.on(Events.Object.Pasted, onPasted);
+                        data.forEach(orig => {
+                            const cloned = JSON.parse(JSON.stringify(orig));
+                            const targetPos = {
+                                x: x + (cloned.position.x - baseX),
+                                y: y + (cloned.position.y - baseY)
+                            };
+                            this.clipboard = { type: 'object', data: cloned };
+                            const cmd = new PasteObjectCommand(this, targetPos);
+                            cmd.setEventBus(this.eventBus);
+                            this.history.executeCommand(cmd);
+                        });
+                        this.clipboard = group;
+                        return;
+                    }
+
+                    const frameOriginal = frames[0];
+                    const children = data.filter(o => o && o.id !== frameOriginal.id);
+                    const totalToPaste = 1 + children.length;
+                    const newIds = [];
+                    let pastedCount = 0;
+                    let newFrameId = null;
+
+                    const onPasted = (payload) => {
+                        if (!payload || !payload.newId) return;
+                        newIds.push(payload.newId);
+                        pastedCount += 1;
+                        // Как только вставили фрейм — вставляем детей с новым frameId
+                        if (!newFrameId && payload.originalId === frameOriginal.id) {
+                            newFrameId = payload.newId;
+                            for (const child of children) {
+                                const clonedChild = JSON.parse(JSON.stringify(child));
+                                clonedChild.properties = clonedChild.properties || {};
+                                clonedChild.properties.frameId = newFrameId;
+                                const targetPos = {
+                                    x: x + (clonedChild.position.x - baseX),
+                                    y: y + (clonedChild.position.y - baseY)
+                                };
+                                this.clipboard = { type: 'object', data: clonedChild };
+                                const cmdChild = new PasteObjectCommand(this, targetPos);
+                                cmdChild.setEventBus(this.eventBus);
+                                this.history.executeCommand(cmdChild);
+                            }
+                        }
+                        if (pastedCount === totalToPaste) {
+                            this.eventBus.off(Events.Object.Pasted, onPasted);
+                            requestAnimationFrame(() => {
+                                if (this.selectTool && newIds.length > 0) {
+                                    this.selectTool.setSelection(newIds);
+                                    this.selectTool.updateResizeHandles();
+                                }
+                            });
+                        }
+                    };
+                    this.eventBus.on(Events.Object.Pasted, onPasted);
+
+                    // Вставляем фрейм первым
+                    const frameClone = JSON.parse(JSON.stringify(frameOriginal));
+                    this.clipboard = { type: 'object', data: frameClone };
+                    const targetPosFrame = {
+                        x: x + (frameClone.position.x - baseX),
+                        y: y + (frameClone.position.y - baseY)
+                    };
+                    const cmdFrame = new PasteObjectCommand(this, targetPosFrame);
+                    cmdFrame.setEventBus(this.eventBus);
+                    this.history.executeCommand(cmdFrame);
+
+                    // Возвращаем clipboard к группе для повторных вставок
+                    this.clipboard = group;
+                    return;
+                }
+
+                // Обычная вставка группы (не фрейм-бандл)
                 const newIds = [];
                 let pending = data.length;
                 const onPasted = (payload) => {
@@ -246,15 +342,14 @@ export class CoreMoodBoard {
                 data.forEach(orig => {
                     const cloned = JSON.parse(JSON.stringify(orig));
                     const targetPos = {
-                        x: x + (cloned.position.x - baseX),
-                        y: y + (cloned.position.y - baseY)
+                        x: x + (cloned.position.x - minX),
+                        y: y + (cloned.position.y - minY)
                     };
                     this.clipboard = { type: 'object', data: cloned };
                     const cmd = new PasteObjectCommand(this, targetPos);
                     cmd.setEventBus(this.eventBus);
                     this.history.executeCommand(cmd);
                 });
-                // Возвращаем clipboard к группе для повторных вставок
                 this.clipboard = group;
             }
         });
@@ -673,13 +768,95 @@ export class CoreMoodBoard {
             const original = objects.find(obj => obj.id === originalId);
             if (!original) return;
 
-            // Сохраняем копию в буфер обмена, чтобы переиспользовать PasteObjectCommand
+            // Если дублируем фрейм — копируем вместе с его содержимым
+            if (original.type === 'frame') {
+                const frame = JSON.parse(JSON.stringify(original));
+                const dx = (position?.x ?? frame.position.x) - frame.position.x;
+                const dy = (position?.y ?? frame.position.y) - frame.position.y;
+
+                // Дети фрейма
+                const children = (this.state.state.objects || []).filter(o => o && o.properties && o.properties.frameId === originalId);
+
+                // После вставки фрейма вставим детей, перепривязав к новому frameId
+                const onFramePasted = (payload) => {
+                    if (!payload || payload.originalId !== originalId) return;
+                    const newFrameId = payload.newId;
+                    this.eventBus.off(Events.Object.Pasted, onFramePasted);
+                    for (const child of children) {
+                        const clonedChild = JSON.parse(JSON.stringify(child));
+                        clonedChild.properties = clonedChild.properties || {};
+                        clonedChild.properties.frameId = newFrameId;
+                        const targetPos = {
+                            x: (child.position?.x || 0) + dx,
+                            y: (child.position?.y || 0) + dy
+                        };
+                        this.clipboard = { type: 'object', data: clonedChild };
+                        const cmdChild = new PasteObjectCommand(this, targetPos);
+                        cmdChild.setEventBus(this.eventBus);
+                        this.history.executeCommand(cmdChild);
+                    }
+                };
+                this.eventBus.on(Events.Object.Pasted, onFramePasted);
+
+                // Подготовим буфер для фрейма (с новым названием)
+                const frameClone = JSON.parse(JSON.stringify(frame));
+                try {
+                    const arr = this.state.state.objects || [];
+                    let maxNum = 0;
+                    for (const o of arr) {
+                        if (!o || o.type !== 'frame') continue;
+                        const t = o?.properties?.title || '';
+                        const m = t.match(/^\s*Фрейм\s+(\d+)\s*$/i);
+                        if (m) {
+                            const n = parseInt(m[1], 10);
+                            if (Number.isFinite(n)) maxNum = Math.max(maxNum, n);
+                        }
+                    }
+                    const next = maxNum + 1;
+                    frameClone.properties = frameClone.properties || {};
+                    frameClone.properties.title = `Фрейм ${next}`;
+                } catch (_) {}
+                this.clipboard = { type: 'object', data: frameClone };
+                const cmdFrame = new PasteObjectCommand(this, { x: frame.position.x + dx, y: frame.position.y + dy });
+                cmdFrame.setEventBus(this.eventBus);
+                this.history.executeCommand(cmdFrame);
+                return;
+            }
+
+            // Обычная логика для остальных типов
             this.clipboard = {
                 type: 'object',
                 data: JSON.parse(JSON.stringify(original))
             };
+            // Запоминаем исходное название фрейма, чтобы не менять его
+            try {
+                if (original.type === 'frame') {
+                    this._dupTitleMap = this._dupTitleMap || new Map();
+                    const prevTitle = (original.properties && typeof original.properties.title !== 'undefined') ? original.properties.title : undefined;
+                    this._dupTitleMap.set(originalId, prevTitle);
+                }
+            } catch (_) {}
+            // Если фрейм — проставим будущий заголовок в буфер
+            try {
+                if (this.clipboard.data && this.clipboard.data.type === 'frame') {
+                    const arr = this.state.state.objects || [];
+                    let maxNum = 0;
+                    for (const o of arr) {
+                        if (!o || o.type !== 'frame') continue;
+                        const t = o?.properties?.title || '';
+                        const m = t.match(/^\s*Фрейм\s+(\d+)\s*$/i);
+                        if (m) {
+                            const n = parseInt(m[1], 10);
+                            if (Number.isFinite(n)) maxNum = Math.max(maxNum, n);
+                        }
+                    }
+                    const next = maxNum + 1;
+                    this.clipboard.data.properties = this.clipboard.data.properties || {};
+                    this.clipboard.data.properties.title = `Фрейм ${next}`;
+                }
+            } catch (_) {}
 
-            // Вызываем вставку с конкретной позицией (там рассчитается ID и пр.)
+            // Вызываем вставку по указанной позиции (под курсором)
             this.pasteObject(position);
         });
 
@@ -715,14 +892,77 @@ export class CoreMoodBoard {
                 this.eventBus.on(Events.Object.Pasted, handler);
                 // Кладем в clipboard объект, затем вызываем PasteObjectCommand с текущей позицией
                 this.clipboard = { type: 'object', data: JSON.parse(JSON.stringify(obj)) };
+                // Запомним оригинальные названия фреймов
+                try {
+                    if (obj.type === 'frame') {
+                        this._dupTitleMap = this._dupTitleMap || new Map();
+                        const prevTitle = (obj.properties && typeof obj.properties.title !== 'undefined') ? obj.properties.title : undefined;
+                        this._dupTitleMap.set(obj.id, prevTitle);
+                    }
+                } catch (_) { /* no-op */ }
+                // Если фрейм — сразу проставим новый заголовок в буфер
+                try {
+                    if (this.clipboard.data && this.clipboard.data.type === 'frame') {
+                        const arr = this.state.state.objects || [];
+                        let maxNum = 0;
+                        for (const o2 of arr) {
+                            if (!o2 || o2.type !== 'frame') continue;
+                            const t2 = o2?.properties?.title || '';
+                            const m2 = t2.match(/^\s*Фрейм\s+(\d+)\s*$/i);
+                            if (m2) {
+                                const n2 = parseInt(m2[1], 10);
+                                if (Number.isFinite(n2)) maxNum = Math.max(maxNum, n2);
+                            }
+                        }
+                        const next2 = maxNum + 1;
+                        this.clipboard.data.properties = this.clipboard.data.properties || {};
+                        this.clipboard.data.properties.title = `Фрейм ${next2}`;
+                    }
+                } catch (_) { /* no-op */ }
                 const cmd = new PasteObjectCommand(this, { x: obj.position.x, y: obj.position.y });
                 cmd.setEventBus(this.eventBus);
                 this.history.executeCommand(cmd);
             }
         });
 
-        // Когда объект вставлен (из PasteObjectCommand) — сообщаем SelectTool
+        // Когда объект вставлен (из PasteObjectCommand)
         this.eventBus.on(Events.Object.Pasted, ({ originalId, newId }) => {
+            try {
+                const arr = this.state.state.objects || [];
+                const newObj = arr.find(o => o.id === newId);
+                const origObj = arr.find(o => o.id === originalId);
+                if (newObj && newObj.type === 'frame') {
+                    // Рассчитываем следующий номер среди уже существующих (кроме только что вставленного)
+                    let maxNum = 0;
+                    for (const o of arr) {
+                        if (!o || o.id === newId || o.type !== 'frame') continue;
+                        const t = o?.properties?.title || '';
+                        const m = t.match(/^\s*Фрейм\s+(\d+)\s*$/i);
+                        if (m) {
+                            const n = parseInt(m[1], 10);
+                            if (Number.isFinite(n)) maxNum = Math.max(maxNum, n);
+                        }
+                    }
+                    const next = maxNum + 1;
+                    // Присваиваем новое имя только НОВОМУ
+                    newObj.properties = newObj.properties || {};
+                    newObj.properties.title = `Фрейм ${next}`;
+                    const pixNew = this.pixi.objects.get(newId);
+                    if (pixNew && pixNew._mb?.instance?.setTitle) pixNew._mb.instance.setTitle(newObj.properties.title);
+                    // Восстанавливаем исходное имя оригинала, если оно было записано
+                    if (this._dupTitleMap && this._dupTitleMap.has(originalId) && origObj && origObj.type === 'frame') {
+                        const prev = this._dupTitleMap.get(originalId);
+                        origObj.properties = origObj.properties || {};
+                        // Если prev undefined, очистим title
+                        origObj.properties.title = prev;
+                        const pixOrig = this.pixi.objects.get(originalId);
+                        if (pixOrig && pixOrig._mb?.instance?.setTitle) pixOrig._mb.instance.setTitle(prev);
+                        this._dupTitleMap.delete(originalId);
+                    }
+                    this.state.markDirty();
+                }
+            } catch (_) { /* no-op */ }
+            // Сообщаем SelectTool id нового объекта для переключения drag
             this.eventBus.emit(Events.Tool.DuplicateReady, { originalId, newId });
         });
 
@@ -733,6 +973,13 @@ export class CoreMoodBoard {
             const object = objects.find(obj => obj.id === data.object);
             if (object) {
                 this.resizeStartSize = { width: object.width, height: object.height };
+                // Сохраняем контекст активного ресайза для расчёта позиции, если она не будет передана
+                this._activeResize = {
+                    objectId: data.object,
+                    handle: data.handle,
+                    startSize: { width: object.width, height: object.height },
+                    startPosition: { x: object.position.x, y: object.position.y }
+                };
             }
         });
 
@@ -814,13 +1061,166 @@ export class CoreMoodBoard {
             const objects = this.state.getObjects();
             const object = objects.find(obj => obj.id === data.object);
             const objectType = object ? object.type : null;
-            
-            this.updateObjectSizeAndPositionDirect(data.object, data.size, data.position, objectType);
+
+            // Сохраняем пропорции для фреймов, кроме произвольных (lockedAspect=false)
+            if (objectType === 'frame' && data.size) {
+                const lockedAspect = !!(object?.properties && (object.properties.lockedAspect === true));
+                if (!lockedAspect) {
+                    // произвольные фреймы — без ограничений
+                } else {
+                const start = this._activeResize?.startSize || { width: object.width, height: object.height };
+                const aspect = (start.width > 0 && start.height > 0) ? (start.width / start.height) : (object.width / Math.max(1, object.height));
+                let w = Math.max(1, data.size.width);
+                let h = Math.max(1, data.size.height);
+                // Приводим к ближайшему по изменяемой стороне
+                // Определим, какая сторона изменилась сильнее
+                const dw = Math.abs(w - start.width);
+                const dh = Math.abs(h - start.height);
+                if (dw >= dh) {
+                    h = Math.round(w / aspect);
+                } else {
+                    w = Math.round(h * aspect);
+                }
+                // Минимальная площадь фрейма ~1800px²
+                const minArea = 1800;
+                const area = Math.max(1, w * h);
+                if (area < minArea) {
+                    const scale = Math.sqrt(minArea / area);
+                    w = Math.round(w * scale);
+                    h = Math.round(h * scale);
+                }
+                data.size = { width: w, height: h };
+
+                // Если позиция известна (фиксированная противоположная сторона) — откорректируем её
+                if (!data.position && this._activeResize && this._activeResize.objectId === data.object) {
+                    const hndl = (this._activeResize.handle || '').toLowerCase();
+                    const startPos = this._activeResize.startPosition;
+                    const sw = this._activeResize.startSize.width;
+                    const sh = this._activeResize.startSize.height;
+                    let x = startPos.x;
+                    let y = startPos.y;
+                    // Базовая привязка противоположной стороны
+                    if (hndl.includes('w')) { x = startPos.x + (sw - w); }
+                    if (hndl.includes('n')) { y = startPos.y + (sh - h); }
+                    // Симметрическая компенсация по перпендикулярной оси для edge-хэндлов
+                    const isEdge = ['n','s','e','w'].includes(hndl);
+                    if (isEdge) {
+                        if (hndl === 'n' || hndl === 's') {
+                            // Вверх/вниз: верх или низ фиксируется, ширина меняется симметрично относительно центра
+                            x = startPos.x + Math.round((sw - w) / 2);
+                        } else if (hndl === 'e' || hndl === 'w') {
+                            // Вправо/влево: левая или правая фиксируется, высота меняется симметрично относительно центра
+                            y = startPos.y + Math.round((sh - h) / 2);
+                        }
+                    }
+                    data.position = { x: Math.round(x), y: Math.round(y) };
+                }
+                }
+            }
+
+            // Если позиция не пришла из UI, вычислим её из контекста активной ручки
+            let position = data.position;
+            if (!position && this._activeResize && this._activeResize.objectId === data.object) {
+                const h = (this._activeResize.handle || '').toLowerCase();
+                const start = this._activeResize.startPosition;
+                const startSize = this._activeResize.startSize;
+                const dw = (data.size?.width || startSize.width) - startSize.width;
+                const dh = (data.size?.height || startSize.height) - startSize.height;
+                let nx = start.x;
+                let ny = start.y;
+                // Для левых/верхних ручек смещаем топ-лев на полную величину изменения
+                if (h.includes('w')) nx = start.x + dw;
+                if (h.includes('n')) ny = start.y + dh;
+                // Для правых/нижних ручек топ-лев остаётся стартовым (nx, ny уже равны start)
+                position = { x: nx, y: ny };
+            }
+
+            // Для фреймов с произвольным аспектом также обеспечим минимальную площадь
+            if (objectType === 'frame' && data.size) {
+                const minArea = 1800;
+                const w0 = Math.max(1, data.size.width);
+                const h0 = Math.max(1, data.size.height);
+                const area0 = w0 * h0;
+                if (area0 < minArea) {
+                    const scale = Math.sqrt(minArea / Math.max(1, area0));
+                    const w = Math.round(w0 * scale);
+                    const h = Math.round(h0 * scale);
+                    data.size = { width: w, height: h };
+                    // позиция будет скорректирована ниже общей логикой (уже рассчитана выше при необходимости)
+                }
+            }
+
+            this.updateObjectSizeAndPositionDirect(data.object, data.size, position, objectType);
         });
 
         this.eventBus.on(Events.Tool.ResizeEnd, (data) => {
             // В конце создаем одну команду изменения размера
             if (this.resizeStartSize && data.oldSize && data.newSize) {
+                // Принудительно сохраняем пропорции для фреймов (если lockedAspect=true)
+                const objects = this.state.getObjects();
+                const object = objects.find(obj => obj.id === data.object);
+                const objectType = object ? object.type : null;
+                if (objectType === 'frame' && !!(object?.properties && object.properties.lockedAspect === true)) {
+                    const start = this._activeResize?.startSize || { width: object.width, height: object.height };
+                    const aspect = (start.width > 0 && start.height > 0) ? (start.width / start.height) : (object.width / Math.max(1, object.height));
+                    let w = Math.max(1, data.newSize.width);
+                    let h = Math.max(1, data.newSize.height);
+                    const dw = Math.abs(w - start.width);
+                    const dh = Math.abs(h - start.height);
+                    if (dw >= dh) { h = Math.round(w / aspect); } else { w = Math.round(h * aspect); }
+                    // Минимальная площадь фрейма ~1800px²
+                    const minArea = 1800;
+                    const area = Math.max(1, w * h);
+                    if (area < minArea) {
+                        const scale = Math.sqrt(minArea / area);
+                        w = Math.round(w * scale);
+                        h = Math.round(h * scale);
+                    }
+                    data.newSize = { width: w, height: h };
+                    if (!data.newPosition && this._activeResize && this._activeResize.objectId === data.object) {
+                        const hndl = (this._activeResize.handle || '').toLowerCase();
+                        const startPos = this._activeResize.startPosition;
+                        const sw = this._activeResize.startSize.width;
+                        const sh = this._activeResize.startSize.height;
+                        let x = startPos.x;
+                        let y = startPos.y;
+                        if (hndl.includes('w')) { x = startPos.x + (sw - w); }
+                        if (hndl.includes('n')) { y = startPos.y + (sh - h); }
+                        const isEdge = ['n','s','e','w'].includes(hnl = hndl);
+                        if (isEdge) {
+                            if (hnl === 'n' || hnl === 's') {
+                                x = startPos.x + Math.round((sw - w) / 2);
+                            } else if (hnl === 'e' || hnl === 'w') {
+                                y = startPos.y + Math.round((sh - h) / 2);
+                            }
+                        }
+                        data.newPosition = { x: Math.round(x), y: Math.round(y) };
+                    }
+                }
+                // Для произвольных фреймов также обеспечим минимальную площадь
+                if (objectType === 'frame' && data.newSize && !(object?.properties && object.properties.lockedAspect === true)) {
+                    const minArea = 1800;
+                    const w0 = Math.max(1, data.newSize.width);
+                    const h0 = Math.max(1, data.newSize.height);
+                    const area0 = w0 * h0;
+                    if (area0 < minArea) {
+                        const scale = Math.sqrt(minArea / Math.max(1, area0));
+                        const w = Math.round(w0 * scale);
+                        const h = Math.round(h0 * scale);
+                        data.newSize = { width: w, height: h };
+                        if (!data.newPosition && this._activeResize && this._activeResize.objectId === data.object) {
+                            const hndl2 = (this._activeResize.handle || '').toLowerCase();
+                            const startPos2 = this._activeResize.startPosition;
+                            const sw2 = this._activeResize.startSize.width;
+                            const sh2 = this._activeResize.startSize.height;
+                            let x2 = startPos2.x;
+                            let y2 = startPos2.y;
+                            if (hndl2.includes('w')) { x2 = startPos2.x + (sw2 - w); }
+                            if (hndl2.includes('n')) { y2 = startPos2.y + (sh2 - h); }
+                            data.newPosition = { x: Math.round(x2), y: Math.round(y2) };
+                        }
+                    }
+                }
                 // Создаем команду только если размер действительно изменился
                 if (data.oldSize.width !== data.newSize.width || 
                     data.oldSize.height !== data.newSize.height) {
@@ -833,19 +1233,33 @@ export class CoreMoodBoard {
                         newPosition: data.newPosition
                     });
                     
+                    // Гарантируем согласованность позиции: если UI не передал, вычислим
+                    let oldPos = data.oldPosition;
+                    let newPos = data.newPosition;
+                    if ((!oldPos || !newPos) && this._activeResize && this._activeResize.objectId === data.object) {
+                        const h = (this._activeResize.handle || '').toLowerCase();
+                        const start = this._activeResize.startPosition;
+                        const startSize = this._activeResize.startSize;
+                        const dw = (data.newSize?.width || startSize.width) - startSize.width;
+                        const dh = (data.newSize?.height || startSize.height) - startSize.height;
+                        const calcNew = { x: start.x + (h.includes('w') ? dw : 0), y: start.y + (h.includes('n') ? dh : 0) };
+                        if (!oldPos) oldPos = { x: start.x, y: start.y };
+                        if (!newPos) newPos = calcNew;
+                    }
                     const command = new ResizeObjectCommand(
                         this, 
                         data.object, 
                         data.oldSize, 
                         data.newSize,
-                        data.oldPosition,
-                        data.newPosition
+                        oldPos,
+                        newPos
                     );
                     command.setEventBus(this.eventBus);
                     this.history.executeCommand(command);
                 }
             }
             this.resizeStartSize = null;
+            this._activeResize = null;
         });
 
         // === ОБРАБОТЧИКИ СОБЫТИЙ ВРАЩЕНИЯ ===
@@ -1293,7 +1707,61 @@ export class CoreMoodBoard {
                 group.meta.pasteCount = (group.meta.pasteCount || 0) + 1;
                 const dx = offsetStep * group.meta.pasteCount;
                 const dy = offsetStep * group.meta.pasteCount;
-                // Подготовим сбор новых id через единый временный слушатель
+
+                // Особая логика: фрейм-бандл (фрейм + дети)
+                if (group.meta && group.meta.frameBundle) {
+                    const frames = data.filter(o => o && o.type === 'frame');
+                    if (frames.length === 1) {
+                        const frameOriginal = frames[0];
+                        const children = data.filter(o => o && o.id !== frameOriginal.id);
+                        const totalToPaste = 1 + children.length;
+                        let pastedCount = 0;
+                        const newIds = [];
+                        let newFrameId = null;
+
+                        const onPasted = (payload) => {
+                            if (!payload || !payload.newId) return;
+                            newIds.push(payload.newId);
+                            pastedCount += 1;
+                            if (!newFrameId && payload.originalId === frameOriginal.id) {
+                                newFrameId = payload.newId;
+                                for (const child of children) {
+                                    const clonedChild = JSON.parse(JSON.stringify(child));
+                                    clonedChild.properties = clonedChild.properties || {};
+                                    clonedChild.properties.frameId = newFrameId;
+                                    const targetPos = {
+                                        x: (clonedChild.position?.x || 0) + dx,
+                                        y: (clonedChild.position?.y || 0) + dy
+                                    };
+                                    this.clipboard = { type: 'object', data: clonedChild };
+                                    const cmdChild = new PasteObjectCommand(this, targetPos);
+                                    cmdChild.setEventBus(this.eventBus);
+                                    this.history.executeCommand(cmdChild);
+                                }
+                            }
+                            if (pastedCount === totalToPaste) {
+                                this.eventBus.off(Events.Object.Pasted, onPasted);
+                                if (this.selectTool && newIds.length > 0) {
+                                    requestAnimationFrame(() => {
+                                        this.selectTool.setSelection(newIds);
+                                        this.selectTool.updateResizeHandles();
+                                    });
+                                }
+                            }
+                        };
+                        this.eventBus.on(Events.Object.Pasted, onPasted);
+
+                        const frameClone = JSON.parse(JSON.stringify(frameOriginal));
+                        this.clipboard = { type: 'object', data: frameClone };
+                        const cmdFrame = new PasteObjectCommand(this, { x: (frameClone.position?.x || 0) + dx, y: (frameClone.position?.y || 0) + dy });
+                        cmdFrame.setEventBus(this.eventBus);
+                        this.history.executeCommand(cmdFrame);
+                        this.clipboard = group;
+                        return;
+                    }
+                }
+
+                // Обычная вставка группы
                 let pending = data.length;
                 const newIds = [];
                 const onPasted = (payload) => {
@@ -1302,7 +1770,6 @@ export class CoreMoodBoard {
                     pending -= 1;
                     if (pending === 0) {
                         this.eventBus.off(Events.Object.Pasted, onPasted);
-                        // Выделяем новую группу и показываем рамку с ручками
                         if (this.selectTool && newIds.length > 0) {
                             requestAnimationFrame(() => {
                                 this.selectTool.setSelection(newIds);
@@ -1313,22 +1780,18 @@ export class CoreMoodBoard {
                 };
                 this.eventBus.on(Events.Object.Pasted, onPasted);
 
-                // Вставляем каждый объект группы, сохраняя относительное расположение + общее смещение
                 for (const original of data) {
                     const cloned = JSON.parse(JSON.stringify(original));
                     const targetPos = {
                         x: (cloned.position?.x || 0) + dx,
                         y: (cloned.position?.y || 0) + dy
                     };
-                    // Используем существующую логику PasteObjectCommand поверх clipboard типа object
                     this.clipboard = { type: 'object', data: cloned };
                     const cmd = new PasteObjectCommand(this, targetPos);
                     cmd.setEventBus(this.eventBus);
                     this.history.executeCommand(cmd);
                 }
-                // После вставки возвращаем clipboard к группе, чтобы можно было ещё раз вставлять с новым смещением
                 this.clipboard = group;
-                // Рамка появится по завершении обработки всех событий object:pasted
             }
         });
 
@@ -1494,6 +1957,39 @@ export class CoreMoodBoard {
         };
         const initialWidth = (properties && typeof properties.width === 'number') ? properties.width : 100;
         const initialHeight = (properties && typeof properties.height === 'number') ? properties.height : 100;
+
+        // Если создаём НЕ фрейм — проверим, попадает ли центр нового объекта внутрь какого-либо фрейма.
+        // Если да, сразу прикрепляем объект к этому фрейму (properties.frameId)
+        if (type !== 'frame' && position && this.pixi && typeof this.pixi.findObjectByPosition === 'function') {
+            const center = {
+                x: position.x + initialWidth / 2,
+                y: position.y + initialHeight / 2
+            };
+            try {
+                const hostFrame = this.pixi.findObjectByPosition(center, 'frame');
+                if (hostFrame && hostFrame.id) {
+                    properties = { ...(properties || {}), frameId: hostFrame.id };
+                }
+            } catch (e) {
+                // fail-safe: не мешаем созданию при ошибке поиска
+            }
+        }
+
+        // Именование фреймов: "Фрейм N", где N = количество уже пронумерованных фреймов + 1
+        if (type === 'frame') {
+            try {
+                const objects = this.state?.state?.objects || [];
+                const numberedCount = objects.filter(o => o && o.type === 'frame').reduce((acc, o) => {
+                    const t = o?.properties?.title || '';
+                    // Считаем только пронумерованные: "Фрейм <число>"
+                    return (/^\s*Фрейм\s+\d+\s*$/i.test(t)) ? acc + 1 : acc;
+                }, 0);
+                const nextIndex = numberedCount + 1;
+                properties = { ...(properties || {}), title: `Фрейм ${nextIndex}` };
+            } catch (_) {
+                properties = { ...(properties || {}), title: 'Фрейм 1' };
+            }
+        }
         const objectData = {
             id: generateObjectId(exists),
             type,