@sequent-org/moodboard 1.2.119 → 1.3.0

package/src/tools/object-tools/selection/SelectInputRouter.js

@@ -0,0 +1,267 @@
+import { Events } from '../../../core/events/Events.js';
+
+export function onMouseDown(event) {
+    // Если активен текстовый редактор, закрываем его при клике вне
+    if (this.textEditor.active) {
+        if (this.textEditor.objectType === 'file') {
+            this._closeFileNameEditor(true);
+        } else {
+            this._closeTextEditor(true);
+        }
+        return; // Прерываем выполнение, чтобы не обрабатывать клик дальше
+    }
+
+    this.isMultiSelect = event.originalEvent.ctrlKey || event.originalEvent.metaKey || event.originalEvent.shiftKey;
+
+    // Проверяем, что под курсором
+    const hitResult = this.hitTest(event.x, event.y);
+
+    if (hitResult.type === 'resize-handle') {
+        this.startResize(hitResult.handle, hitResult.object);
+    } else if (hitResult.type === 'rotate-handle') {
+        this.startRotate(hitResult.object);
+    } else if (this.selection.size() > 1) {
+        // Особая логика для группового выделения: клики внутри общей рамки не снимают выделение
+        const gb = this.computeGroupBounds();
+        const insideGroup = this.isPointInBounds({ x: event.x, y: event.y }, { x: gb.x, y: gb.y, width: gb.width, height: gb.height });
+        if (insideGroup) {
+            // Если клик внутри группы (по объекту или пустому месту), сохраняем выделение и начинаем перетаскивание группы
+            this.startGroupDrag(event);
+            return;
+        }
+        // Вне группы — обычная логика
+        if (hitResult.type === 'object') {
+            this.handleObjectSelect(hitResult.object, event);
+        } else {
+            this.startBoxSelect(event);
+        }
+    } else if (hitResult.type === 'object') {
+        // Особая логика для фреймов: если у фрейма есть дети и клик внутри внутренней области (без 20px рамки),
+        // то не начинаем drag фрейма, а запускаем box-select для выбора объектов внутри
+        const req = { objectId: hitResult.object, pixiObject: null };
+        this.emit(Events.Tool.GetObjectPixi, req);
+        const mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
+        if (mbType === 'frame') {
+            // Получаем данные фрейма и его экранные границы
+            const objects = this.core?.state?.getObjects ? this.core.state.getObjects() : [];
+            const frameObj = objects.find(o => o.id === hitResult.object);
+            const hasChildren = !!(objects && objects.some(o => o.properties && o.properties.frameId === hitResult.object));
+            if (req.pixiObject && hasChildren && frameObj) {
+                const bounds = req.pixiObject.getBounds(); // экранные координаты
+                const inner = { x: bounds.x + 20, y: bounds.y + 20, width: Math.max(0, bounds.width - 40), height: Math.max(0, bounds.height - 40) };
+                const insideInner = this.isPointInBounds({ x: event.x, y: event.y }, inner);
+                // Если клик внутри внутренней области — запускаем box-select и выходим
+                if (insideInner) {
+                    // Запускаем рамку выделения вместо drag фрейма
+                    this.startBoxSelect(event);
+                    return;
+                }
+                // Если клик на 20px рамке — позволяем перетягивать фрейм. Но запрещаем box-select от рамки.
+                // Здесь ничего не делаем: ниже пойдёт обычная логика handleObjectSelect
+            }
+        }
+        // Обычная логика: начинаем drag выбранного объекта
+        this.handleObjectSelect(hitResult.object, event);
+    } else {
+        // Клик по пустому месту — если есть одиночное выделение, разрешаем drag за пределами объекта в пределах рамки
+        if (this.selection.size() === 1) {
+            const selId = this.selection.toArray()[0];
+            // Если выбран фрейм с детьми и клик внутри внутренней области — не начинаем drag, а box-select
+            const req = { objectId: selId, pixiObject: null };
+            this.emit(Events.Tool.GetObjectPixi, req);
+            const isFrame = !!(req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type === 'frame');
+            if (isFrame) {
+                const objects = this.core?.state?.getObjects ? this.core.state.getObjects() : [];
+                const frameObj = objects.find(o => o.id === selId);
+                const hasChildren = !!(objects && objects.some(o => o.properties && o.properties.frameId === selId));
+                if (frameObj && hasChildren) {
+                    const b = { x: frameObj.position.x, y: frameObj.position.y, width: frameObj.width || 0, height: frameObj.height || 0 };
+                    const inner = { x: b.x + 20, y: b.y + 20, width: Math.max(0, b.width - 40), height: Math.max(0, b.height - 40) };
+                    const insideInner = this.isPointInBounds({ x: event.x, y: event.y }, inner);
+                    if (insideInner) {
+                        this.startBoxSelect(event);
+                        return;
+                    }
+                }
+            }
+            // Обычная логика: если клик внутри рамки выбранного — начинаем drag
+            const boundsReq = { objects: [] };
+            this.emit(Events.Tool.GetAllObjects, boundsReq);
+            const map = new Map(boundsReq.objects.map(o => [o.id, o.bounds]));
+            const b = map.get(selId);
+            if (b && this.isPointInBounds({ x: event.x, y: event.y }, b)) {
+                // Для фрейма c детьми: отфильтруем клики внутри внутренней области (box-select)
+                const req2 = { objectId: selId, pixiObject: null };
+                this.emit(Events.Tool.GetObjectPixi, req2);
+                const isFrame2 = !!(req2.pixiObject && req2.pixiObject._mb && req2.pixiObject._mb.type === 'frame');
+                if (isFrame2) {
+                    const os = this.core?.state?.getObjects ? this.core.state.getObjects() : [];
+                    const fr = os.find(o => o.id === selId);
+                    const hasChildren2 = !!(os && os.some(o => o.properties && o.properties.frameId === selId));
+                    if (req2.pixiObject && fr && hasChildren2) {
+                        const bounds2 = req2.pixiObject.getBounds();
+                        const inner2 = { x: bounds2.x + 20, y: bounds2.y + 20, width: Math.max(0, bounds2.width - 40), height: Math.max(0, bounds2.height - 40) };
+                        if (this.isPointInBounds({ x: event.x, y: event.y }, inner2)) {
+                            this.startBoxSelect(event);
+                            return;
+                        }
+                    }
+                }
+                // Старт перетаскивания как если бы кликнули по объекту
+                this.startDrag(selId, event);
+                return;
+            }
+        }
+        // Иначе — начинаем рамку выделения
+        this.startBoxSelect(event);
+    }
+}
+
+export function onMouseMove(event) {
+    // Проверяем, что инструмент не уничтожен
+    if (this.destroyed) {
+        return;
+    }
+
+    // Обновляем текущие координаты мыши
+    this.currentX = event.x;
+    this.currentY = event.y;
+
+    if (this.isResizing || this.isGroupResizing) {
+        this.updateResize(event);
+    } else if (this.isRotating || this.isGroupRotating) {
+        this.updateRotate(event);
+    } else if (this.isDragging || this.isGroupDragging) {
+        this.updateDrag(event);
+    } else if (this.isBoxSelect) {
+        this.updateBoxSelect(event);
+    } else {
+        // Обновляем курсор в зависимости от того, что под мышью
+        this.updateCursor(event);
+    }
+}
+
+export function onMouseUp(event) {
+    if (this.isResizing || this.isGroupResizing) {
+        this.endResize();
+    } else if (this.isRotating || this.isGroupRotating) {
+        this.endRotate();
+    } else if (this.isDragging || this.isGroupDragging) {
+        this.endDrag();
+    } else if (this.isBoxSelect) {
+        this.endBoxSelect();
+    }
+}
+
+export function onDoubleClick(event) {
+    const hitResult = this.hitTest(event.x, event.y);
+
+    if (hitResult.type === 'object') {
+        // если это текст или записка — войдём в режим редактирования через ObjectEdit
+        const req = { objectId: hitResult.object, pixiObject: null };
+        this.emit(Events.Tool.GetObjectPixi, req);
+        const pix = req.pixiObject;
+
+        const isText = !!(pix && pix._mb && pix._mb.type === 'text');
+        const isNote = !!(pix && pix._mb && pix._mb.type === 'note');
+        const isFile = !!(pix && pix._mb && pix._mb.type === 'file');
+
+        if (isText) {
+            // Получаем позицию объекта для редактирования
+            const posData = { objectId: hitResult.object, position: null };
+            this.emit(Events.Tool.GetObjectPosition, posData);
+
+            // Получаем содержимое из properties объекта
+            const textContent = pix._mb?.properties?.content || '';
+
+            this.emit(Events.Tool.ObjectEdit, {
+                id: hitResult.object,
+                type: 'text',
+                position: posData.position,
+                properties: { content: textContent },
+                caretClick: {
+                    clientX: event?.originalEvent?.clientX,
+                    clientY: event?.originalEvent?.clientY
+                },
+                create: false
+            });
+            return;
+        }
+        if (isNote) {
+            const noteProps = pix._mb.properties || {};
+            // Получаем позицию объекта для редактирования
+            const posData = { objectId: hitResult.object, position: null };
+            this.emit(Events.Tool.GetObjectPosition, posData);
+
+            this.emit(Events.Tool.ObjectEdit, {
+                id: hitResult.object,
+                type: 'note',
+                position: posData.position,
+                properties: { content: noteProps.content || '' },
+                create: false
+            });
+            return;
+        }
+
+        if (isFile) {
+            const fileProps = pix._mb.properties || {};
+            // Получаем позицию объекта для редактирования
+            const posData = { objectId: hitResult.object, position: null };
+            this.emit(Events.Tool.GetObjectPosition, posData);
+
+            this.emit(Events.Tool.ObjectEdit, {
+                id: hitResult.object,
+                type: 'file',
+                position: posData.position,
+                properties: { fileName: fileProps.fileName || 'Untitled' },
+                create: false
+            });
+            return;
+        }
+        this.editObject(hitResult.object);
+    }
+}
+
+export function onContextMenu(event) {
+    // Определяем, что под курсором
+    const hit = this.hitTest(event.x, event.y);
+    let context = 'canvas';
+    let targetId = null;
+    if (hit && hit.type === 'object' && hit.object) {
+        targetId = hit.object;
+        if (this.selection.has(targetId) && this.selection.size() > 1) {
+            context = 'group';
+        } else {
+            context = 'object';
+        }
+    } else if (this.selection.size() > 1) {
+        context = 'group';
+    }
+    // Сообщаем ядру/UI, что нужно показать контекстное меню (пока без пунктов)
+    this.emit(Events.Tool.ContextMenuShow, { x: event.x, y: event.y, context, targetId });
+}
+
+export function onKeyDown(event) {
+    // Проверяем, не активен ли текстовый редактор (редактирование названия файла или текста)
+    if (this.textEditor && this.textEditor.active) {
+        return; // Не обрабатываем клавиши во время редактирования
+    }
+
+    switch (event.key) {
+        case 'Delete':
+        case 'Backspace':
+            this.deleteSelectedObjects();
+            break;
+
+        case 'a':
+            if (event.ctrlKey) {
+                this.selectAll();
+                event.originalEvent.preventDefault();
+            }
+            break;
+
+        case 'Escape':
+            this.clearSelection();
+            break;
+    }
+}

package/src/tools/object-tools/selection/SelectToolLifecycleController.js

@@ -0,0 +1,128 @@
+import { Events } from '../../../core/events/Events.js';
+import { unregisterSelectToolCoreSubscriptions } from './SelectToolSetup.js';
+import { ResizeHandles } from '../../ResizeHandles.js';
+import { SimpleDragController } from './SimpleDragController.js';
+import { ResizeController } from './ResizeController.js';
+import { RotateController } from './RotateController.js';
+import { GroupResizeController } from './GroupResizeController.js';
+import { GroupRotateController } from './GroupRotateController.js';
+import { GroupDragController } from './GroupDragController.js';
+import { BoxSelectController } from './BoxSelectController.js';
+
+export function activateSelectTool(app, defaultCursor, superActivate) {
+    superActivate();
+    // Сохраняем ссылку на PIXI app для оверлеев (рамка выделения)
+    this.app = app;
+
+    // Устанавливаем стандартный курсор для select инструмента
+    if (this.app && this.app.view) {
+        this.app.view.style.cursor = defaultCursor; // пусто → наследует глобальный CSS
+    }
+
+    // Инициализируем систему ручек изменения размера
+    if (!this.resizeHandles && app) {
+        this.resizeHandles = new ResizeHandles(app);
+        // Полностью отключаем синхронизацию старых PIXI-ручек
+        if (this.resizeHandles && typeof this.resizeHandles.hideHandles === 'function') {
+            this.resizeHandles.hideHandles();
+        }
+        this._dragCtrl = new SimpleDragController({
+            emit: (event, payload) => this.emit(event, payload)
+        });
+        this._resizeCtrl = new ResizeController({
+            emit: (event, payload) => this.emit(event, payload),
+            getRotation: (objectId) => {
+                const d = { objectId, rotation: 0 };
+                this.emit(Events.Tool.GetObjectRotation, d);
+                return d.rotation || 0;
+            }
+        });
+        this._rotateCtrl = new RotateController({
+            emit: (event, payload) => this.emit(event, payload)
+        });
+        this._groupResizeCtrl = new GroupResizeController({
+            emit: (event, payload) => this.emit(event, payload),
+            selection: this.selection,
+            getGroupBounds: () => this.computeGroupBounds(),
+            ensureGroupGraphics: (b) => this.ensureGroupBoundsGraphics(b),
+            updateGroupGraphics: (b) => this.updateGroupBoundsGraphics(b)
+        });
+        this._groupRotateCtrl = new GroupRotateController({
+            emit: (event, payload) => this.emit(event, payload),
+            selection: this.selection,
+            getGroupBounds: () => this.computeGroupBounds(),
+            ensureGroupGraphics: (b) => this.ensureGroupBoundsGraphics(b),
+            updateHandles: () => { if (this.resizeHandles) this.resizeHandles.updateHandles(); }
+        });
+        this._groupDragCtrl = new GroupDragController({
+            emit: (event, payload) => this.emit(event, payload),
+            selection: this.selection,
+            updateGroupBoundsByTopLeft: (pos) => this.updateGroupBoundsGraphicsByTopLeft(pos)
+        });
+        this._boxSelect = new BoxSelectController({
+            app,
+            selection: this.selection,
+            emit: (event, payload) => this.emit(event, payload),
+            setSelection: (ids) => this.setSelection(ids),
+            clearSelection: () => this.clearSelection(),
+            rectIntersectsRect: (a, b) => this.rectIntersectsRect(a, b)
+        });
+    } else if (!app) {
+        console.log('❌ PIXI app не передан в activate');
+    } else {
+    }
+}
+
+export function deactivateSelectTool(superDeactivate) {
+    superDeactivate();
+
+    // Закрываем текстовый/файловый редактор если открыт
+    if (this.textEditor.active) {
+        if (this.textEditor.objectType === 'file') {
+            this._closeFileNameEditor(true);
+        } else {
+            this._closeTextEditor(true);
+        }
+    }
+
+    // Очищаем выделение и ручки
+    this.clearSelection();
+    // Скрываем любые старые PIXI-ручки: используем только HTML-ручки
+
+    // Сбрасываем курсор на стандартный
+    if (this.app && this.app.view) {
+        this.app.view.style.cursor = '';
+    }
+}
+
+export function destroySelectTool(superDestroy) {
+    if (this.destroyed) {
+        return;
+    }
+
+    this.destroyed = true;
+
+    unregisterSelectToolCoreSubscriptions(this);
+    this.clearSelection();
+
+    // Уничтожаем ручки изменения размера
+    if (this.resizeHandles) {
+        this.resizeHandles.destroy();
+        this.resizeHandles = null;
+    }
+
+    // Очищаем контроллеры
+    this.dragController = null;
+    this.resizeController = null;
+    this.rotateController = null;
+    this.groupDragController = null;
+    this.groupResizeController = null;
+    this.groupRotateController = null;
+    this.boxSelectController = null;
+
+    // Очищаем модель выделения
+    this.selection = null;
+
+    // Вызываем destroy родительского класса
+    superDestroy();
+}

package/src/tools/object-tools/selection/SelectToolSetup.js

@@ -0,0 +1,134 @@
+import { Events } from '../../../core/events/Events.js';
+
+export function initializeSelectToolState(instance) {
+    // Флаг состояния объекта
+    instance.destroyed = false;
+
+    // Состояние выделения перенесено в модель
+    instance.isMultiSelect = false;
+
+    // Режим Alt-клонирования при перетаскивании
+    // Если Alt зажат при начале drag, создаем копию и перетаскиваем именно её
+    instance.isAltCloneMode = false; // активен ли режим Alt-клона
+    instance.clonePending = false;   // ожидаем подтверждение создания копии
+    instance.cloneRequested = false; // запрос на создание копии уже отправлен
+    instance.cloneSourceId = null;   // исходный объект для копии
+    // Групповой Alt-клон
+    instance.isAltGroupCloneMode = false;
+    instance.groupClonePending = false;
+    instance.groupCloneOriginalIds = [];
+    instance.groupCloneMap = null; // { originalId: newId }
+
+    // Состояние перетаскивания
+    instance.isDragging = false;
+    instance.dragOffset = { x: 0, y: 0 };
+    instance.dragTarget = null;
+
+    // Состояние изменения размера
+    instance.isResizing = false;
+    instance.resizeHandle = null;
+    instance.resizeStartBounds = null;
+    instance.resizeStartMousePos = null;
+    instance.resizeStartPosition = null;
+
+    // Система ручек изменения размера
+    instance.resizeHandles = null;
+    instance.groupSelectionGraphics = null; // визуализация рамок при множественном выделении
+    instance.groupBoundsGraphics = null; // невидимая геометрия для ручек группы
+    instance.groupId = '__group__';
+    instance.isGroupDragging = false;
+    instance.isGroupResizing = false;
+    instance.isGroupRotating = false;
+    instance.groupStartBounds = null;
+    instance.groupStartMouse = null;
+    instance.groupDragOffset = null;
+    instance.groupObjectsInitial = null; // Map id -> { position, size, rotation }
+
+    // Текущие координаты мыши
+    instance.currentX = 0;
+    instance.currentY = 0;
+
+    // Состояние поворота
+    instance.isRotating = false;
+    instance.rotateCenter = null;
+    instance.rotateStartAngle = 0;
+    instance.rotateCurrentAngle = 0;
+    instance.rotateStartMouseAngle = 0;
+
+    // Состояние рамки выделения
+    instance.isBoxSelect = false;
+    instance.selectionBox = null;
+    instance.selectionGraphics = null; // PIXI.Graphics для визуализации рамки
+    instance.initialSelectionBeforeBox = null; // снимок выделения перед началом box-select
+
+    instance.textEditor = {
+        active: false,
+        objectId: null,
+        textarea: null,
+        wrapper: null,
+        world: null,
+        position: null, // world top-left
+        properties: null, // { fontSize }
+        objectType: 'text', // 'text' or 'note'
+        isResizing: false,
+    };
+}
+
+export function registerSelectToolCoreSubscriptions(instance) {
+    if (!instance.eventBus) return;
+
+    const onDuplicateReady = (data) => {
+        if (!instance.isAltCloneMode || !instance.clonePending) return;
+        if (!data || data.originalId !== instance.cloneSourceId) return;
+        instance.onDuplicateReady(data.newId);
+    };
+
+    const onGroupDuplicateReady = (data) => {
+        if (!instance.isAltGroupCloneMode || !instance.groupClonePending) return;
+        if (!data || !data.map) return;
+        instance.onGroupDuplicateReady(data.map);
+    };
+
+    const onObjectEdit = (object) => {
+        const objectType = object.type || (object.object && object.object.type) || 'text';
+        if (objectType === 'file') {
+            instance._openFileNameEditor(object, object.create || false);
+        } else {
+            if (object.create) {
+                instance._openTextEditor(object, true);
+            } else {
+                instance._openTextEditor(object, false);
+            }
+        }
+    };
+
+    const onObjectDeleted = (data) => {
+        const objectId = data?.objectId || data;
+        if (!objectId) return;
+        if (instance.selection?.has(objectId)) {
+            instance.removeFromSelection(objectId);
+            if (instance.selection.size() === 0) {
+                instance.emit(Events.Tool.SelectionClear);
+                instance.updateResizeHandles();
+            }
+        } else {
+            instance.updateResizeHandles();
+        }
+    };
+
+    instance._coreHandlers = { onDuplicateReady, onGroupDuplicateReady, onObjectEdit, onObjectDeleted };
+    instance.eventBus.on(Events.Tool.DuplicateReady, onDuplicateReady);
+    instance.eventBus.on(Events.Tool.GroupDuplicateReady, onGroupDuplicateReady);
+    instance.eventBus.on(Events.Tool.ObjectEdit, onObjectEdit);
+    instance.eventBus.on(Events.Object.Deleted, onObjectDeleted);
+}
+
+export function unregisterSelectToolCoreSubscriptions(instance) {
+    if (!instance.eventBus || !instance._coreHandlers) return;
+    const { onDuplicateReady, onGroupDuplicateReady, onObjectEdit, onObjectDeleted } = instance._coreHandlers;
+    instance.eventBus.off(Events.Tool.DuplicateReady, onDuplicateReady);
+    instance.eventBus.off(Events.Tool.GroupDuplicateReady, onGroupDuplicateReady);
+    instance.eventBus.off(Events.Tool.ObjectEdit, onObjectEdit);
+    instance.eventBus.off(Events.Object.Deleted, onObjectDeleted);
+    instance._coreHandlers = null;
+}

package/src/tools/object-tools/selection/SelectionOverlayService.js

@@ -0,0 +1,81 @@
+import * as PIXI from 'pixi.js';
+import { Events } from '../../../core/events/Events.js';
+
+export function drawGroupSelectionGraphics() {
+    if (!this.app || !this.app.stage) return;
+    const selectedIds = this.selection.toArray();
+    if (selectedIds.length <= 1) {
+        this.removeGroupSelectionGraphics();
+        return;
+    }
+    // Получаем bounds всех объектов и отрисовываем контур на groupBoundsGraphics (одна рамка с ручками)
+    const request = { objects: [] };
+    this.emit(Events.Tool.GetAllObjects, request);
+    const idToBounds = new Map(request.objects.map(o => [o.id, o.bounds]));
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const id of selectedIds) {
+        const b = idToBounds.get(id);
+        if (!b) continue;
+        minX = Math.min(minX, b.x);
+        minY = Math.min(minY, b.y);
+        maxX = Math.max(maxX, b.x + b.width);
+        maxY = Math.max(maxY, b.y + b.height);
+    }
+    if (isFinite(minX) && isFinite(minY) && isFinite(maxX) && isFinite(maxY)) {
+        const gb = { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+        this.ensureGroupBoundsGraphics(gb);
+        this.updateGroupBoundsGraphics(gb);
+    }
+}
+
+export function removeGroupSelectionGraphics() {
+    if (this.groupBoundsGraphics) {
+        this.groupBoundsGraphics.clear();
+        this.groupBoundsGraphics.rotation = 0;
+    }
+}
+
+export function computeGroupBounds() {
+    const request = { objects: [] };
+    this.emit(Events.Tool.GetAllObjects, request);
+    const pixiMap = new Map(request.objects.map(o => [o.id, o.pixi]));
+    const b = this.selection.computeBounds((id) => pixiMap.get(id));
+    if (!b) return { x: 0, y: 0, width: 0, height: 0 };
+    return b;
+}
+
+export function ensureGroupBoundsGraphics(bounds) {
+    if (!this.app || !this.app.stage) return;
+    if (!this.groupBoundsGraphics) {
+        this.groupBoundsGraphics = new PIXI.Graphics();
+        this.groupBoundsGraphics.name = 'group-bounds';
+        this.groupBoundsGraphics.zIndex = 1400;
+        this.app.stage.addChild(this.groupBoundsGraphics);
+        this.app.stage.sortableChildren = true;
+    }
+    this.updateGroupBoundsGraphics(bounds);
+}
+
+export function updateGroupBoundsGraphics(bounds) {
+    if (!this.groupBoundsGraphics) return;
+    this.groupBoundsGraphics.clear();
+    // Прозрачная заливка (alpha ~0), чтобы getBounds() давал корректные размеры и не было артефактов
+    this.groupBoundsGraphics.beginFill(0x000000, 0.001);
+    this.groupBoundsGraphics.drawRect(0, 0, Math.max(1, bounds.width), Math.max(1, bounds.height));
+    this.groupBoundsGraphics.endFill();
+    // Размещаем графику в левом-верхнем углу группы
+    this.groupBoundsGraphics.position.set(bounds.x, bounds.y);
+    // Обновляем ручки, если показаны
+    // HTML-ручки обновляются слоем HtmlHandlesLayer
+}
+
+export function updateGroupBoundsGraphicsByTopLeft(topLeft) {
+    if (!this.groupBoundsGraphics || !this.groupStartBounds) return;
+    this.updateGroupBoundsGraphics({ x: topLeft.x, y: topLeft.y, width: this.groupStartBounds.width, height: this.groupStartBounds.height });
+    // Рисуем визуальную общую рамку одновременно
+    if (this.groupSelectionGraphics) {
+        this.groupSelectionGraphics.clear();
+        this.groupSelectionGraphics.lineStyle(1, 0x3B82F6, 0.9);
+        this.groupSelectionGraphics.drawRect(topLeft.x, topLeft.y, this.groupStartBounds.width, this.groupStartBounds.height);
+    }
+}