@sequent-org/moodboard 1.0.0

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

@@ -0,0 +1,90 @@
+/**
+ * GroupResizeController — изменение размера группы объектов
+ */
+export class GroupResizeController {
+    constructor({ emit, selection, getGroupBounds, ensureGroupGraphics, updateGroupGraphics }) {
+        this.emit = emit;
+        this.selection = selection;
+        this.getGroupBounds = getGroupBounds;
+        this.ensureGroupGraphics = ensureGroupGraphics;
+        this.updateGroupGraphics = updateGroupGraphics;
+
+        this.isActive = false;
+        this.handle = null;
+        this.groupStartBounds = null;
+        this.groupStartMouse = null;
+    }
+
+    start(handle, currentMouse) {
+        this.isActive = true;
+        this.handle = handle;
+        this.groupStartBounds = this.getGroupBounds();
+        this.groupStartMouse = { x: currentMouse.x, y: currentMouse.y };
+        const ids = this.selection.toArray();
+        this.emit('group:resize:start', { objects: ids, startBounds: this.groupStartBounds, handle });
+        this.ensureGroupGraphics(this.groupStartBounds);
+    }
+
+    update(event) {
+        if (!this.isActive || !this.groupStartBounds || !this.groupStartMouse) return;
+        const start = this.groupStartBounds;
+        const deltaX = event.x - this.groupStartMouse.x;
+        const deltaY = event.y - this.groupStartMouse.y;
+        const minW = 20, minH = 20;
+        let x = start.x, y = start.y, w = start.width, h = start.height;
+
+        const maintainAspectRatio = !!(event.originalEvent && event.originalEvent.shiftKey);
+        switch (this.handle) {
+            case 'e': w = start.width + deltaX; break;
+            case 'w': w = start.width - deltaX; x = start.x + deltaX; break;
+            case 's': h = start.height + deltaY; break;
+            case 'n': h = start.height - deltaY; y = start.y + deltaY; break;
+            case 'se': w = start.width + deltaX; h = start.height + deltaY; break;
+            case 'ne': w = start.width + deltaX; h = start.height - deltaY; y = start.y + deltaY; break;
+            case 'sw': w = start.width - deltaX; x = start.x + deltaX; h = start.height + deltaY; break;
+            case 'nw': w = start.width - deltaX; x = start.x + deltaX; h = start.height - deltaY; y = start.y + deltaY; break;
+        }
+
+        if (maintainAspectRatio && start.height !== 0) {
+            const ar = start.width / start.height;
+            if (['nw','ne','sw','se'].includes(this.handle)) {
+                const widthChange = Math.abs(w - start.width);
+                const heightChange = Math.abs(h - start.height);
+                if (widthChange > heightChange) {
+                    h = w / ar;
+                    if (['n','ne','nw'].includes(this.handle)) y = start.y + (start.height - h); else y = start.y;
+                } else {
+                    w = h * ar;
+                    if (['w','sw','nw'].includes(this.handle)) x = start.x + (start.width - w); else x = start.x;
+                }
+            } else if (['e','w'].includes(this.handle)) {
+                h = w / ar;
+                if (this.handle === 'w') x = start.x + (start.width - w);
+            } else if (['n','s'].includes(this.handle)) {
+                w = h * ar;
+                if (this.handle === 'n') y = start.y + (start.height - h);
+            }
+        }
+
+        if (w < minW) { if (['w','sw','nw'].includes(this.handle)) x += (w - minW); w = minW; }
+        if (h < minH) { if (['n','ne','nw'].includes(this.handle)) y += (h - minH); h = minH; }
+
+        const scale = { x: w / start.width, y: h / start.height };
+        const ids = this.selection.toArray();
+        const newBounds = { x, y, width: w, height: h };
+        this.emit('group:resize:update', { objects: ids, startBounds: start, newBounds, scale });
+        this.updateGroupGraphics(newBounds);
+    }
+
+    end() {
+        if (!this.isActive) return;
+        const ids = this.selection.toArray();
+        this.emit('group:resize:end', { objects: ids });
+        this.isActive = false;
+        this.handle = null;
+        this.groupStartBounds = null;
+        this.groupStartMouse = null;
+    }
+}
+
+

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

@@ -0,0 +1,61 @@
+/**
+ * GroupRotateController — вращение группы объектов
+ */
+export class GroupRotateController {
+    constructor({ emit, selection, getGroupBounds, ensureGroupGraphics, updateHandles }) {
+        this.emit = emit;
+        this.selection = selection;
+        this.getGroupBounds = getGroupBounds;
+        this.ensureGroupGraphics = ensureGroupGraphics;
+        this.updateHandles = updateHandles; // функция для обновления ResizeHandles
+
+        this.isActive = false;
+        this.center = null;
+        this.groupRotateBounds = null;
+        this.rotateStartMouseAngle = 0;
+        this.rotateCurrentAngle = 0;
+    }
+
+    start(currentMouse) {
+        this.isActive = true;
+        const gb = this.getGroupBounds();
+        this.groupRotateBounds = gb;
+        this.center = { x: gb.x + gb.width / 2, y: gb.y + gb.height / 2 };
+        this.rotateStartMouseAngle = Math.atan2(currentMouse.y - this.center.y, currentMouse.x - this.center.x);
+        // Настроим pivot и позицию group-bounds
+        this.ensureGroupGraphics(gb);
+        this.emit('group:rotate:start', { objects: this.selection.toArray(), center: this.center });
+    }
+
+    update(event) {
+        if (!this.isActive || !this.center) return;
+        const currentMouseAngle = Math.atan2(event.y - this.center.y, event.x - this.center.x);
+        let delta = currentMouseAngle - this.rotateStartMouseAngle;
+        while (delta > Math.PI) delta -= 2 * Math.PI;
+        while (delta < -Math.PI) delta += 2 * Math.PI;
+        let deltaDeg = delta * 180 / Math.PI;
+        if (event.originalEvent && event.originalEvent.shiftKey) {
+            deltaDeg = Math.round(deltaDeg / 15) * 15;
+        }
+        this.rotateCurrentAngle = deltaDeg;
+        this.emit('group:rotate:update', { objects: this.selection.toArray(), center: this.center, angle: this.rotateCurrentAngle });
+        // Вращение рамки группы вокруг центра — для согласованности ручек
+        const angleRad = this.rotateCurrentAngle * Math.PI / 180;
+        if (this.ensureGroupGraphics && this.groupRotateBounds) {
+            // обновление ручек через внешний колбек
+            if (typeof this.updateHandles === 'function') this.updateHandles();
+        }
+    }
+
+    end() {
+        if (!this.isActive) return;
+        this.emit('group:rotate:end', { objects: this.selection.toArray(), angle: this.rotateCurrentAngle });
+        this.isActive = false;
+        this.center = null;
+        this.groupRotateBounds = null;
+        this.rotateStartMouseAngle = 0;
+        this.rotateCurrentAngle = 0;
+    }
+}
+
+

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

@@ -0,0 +1,96 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * HandlesSync — отвечает за синхронизацию ResizeHandles и групповой рамки с текущим выделением
+ * Используется SelectTool, но не знает деталей SelectTool кроме предоставленного API
+ */
+export class HandlesSync {
+    constructor({ app, resizeHandles, selection, emit }) {
+        this.app = app;
+        this.resizeHandles = resizeHandles;
+        this.selection = selection; // SelectionModel
+        this.emit = emit; // функция для EventBus.emit
+        this.groupBoundsGraphics = null;
+        this.groupId = '__group__';
+    }
+
+    update() {
+        if (!this.resizeHandles) return;
+        const count = this.selection.size();
+        if (count === 0) {
+            this.resizeHandles.hideHandles();
+            this._removeGroupGraphics();
+            return;
+        }
+        if (count === 1) {
+            this._removeGroupGraphics();
+            const objectId = this.selection.toArray()[0];
+            const req = { objectId, pixiObject: null };
+            this.emit('get:object:pixi', req);
+            if (req.pixiObject) {
+                // Проверяем тип объекта - для записок не показываем ручки
+                const meta = req.pixiObject._mb || {};
+                if (meta.type === 'note') {
+                    console.log(`📝 Скрываем ручки для записки ${objectId} - записки не должны иметь ручек`);
+                    this.resizeHandles.hideHandles();
+                } else {
+                    this.resizeHandles.showHandles(req.pixiObject, objectId);
+                }
+            }
+            return;
+        }
+        // Группа: считаем границы и показываем ручки на невидимом прямоугольнике
+        const gb = this._computeGroupBounds();
+        if (!gb || gb.width <= 0 || gb.height <= 0) {
+            this.resizeHandles.hideHandles();
+            return;
+        }
+        this._ensureGroupGraphics(gb);
+        this.resizeHandles.showHandles(this.groupBoundsGraphics, this.groupId);
+        this._drawGroupOutline(gb);
+    }
+
+    _computeGroupBounds() {
+        const req = { objects: [] };
+        this.emit('get:all:objects', req);
+        const pixiMap = new Map(req.objects.map(o => [o.id, o.pixi]));
+        const b = this.selection.computeBounds((id) => pixiMap.get(id));
+        return b;
+    }
+
+    _ensureGroupGraphics(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._updateGroupGraphics(bounds);
+    }
+
+    _updateGroupGraphics(bounds) {
+        if (!this.groupBoundsGraphics) return;
+        this.groupBoundsGraphics.clear();
+        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);
+        if (this.resizeHandles) this.resizeHandles.updateHandles();
+    }
+
+    _drawGroupOutline(bounds) {
+        // Визуальная рамка (опционально) — можно реализовать тут, сейчас делегируем через update() SelectTool
+        // Оставлено как задел
+    }
+
+    _removeGroupGraphics() {
+        if (this.groupBoundsGraphics) {
+            this.groupBoundsGraphics.clear();
+            this.groupBoundsGraphics.rotation = 0;
+        }
+    }
+}
+
+

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

@@ -0,0 +1,68 @@
+/**
+ * ResizeController — изменение размера одного объекта (не группы)
+ */
+export class ResizeController {
+    constructor({ emit, getRotation }) {
+        this.emit = emit;
+        this.getRotation = getRotation;
+        this.isResizing = false;
+        this.resizeHandle = null;
+        this.dragTarget = null;
+        this.resizeStartBounds = null;
+        this.resizeStartMousePos = null;
+        this.resizeStartPosition = null;
+    }
+
+    start(handle, objectId, currentMouse) {
+        this.isResizing = true;
+        this.resizeHandle = handle;
+        this.dragTarget = objectId;
+        const sizeData = { objectId, size: null };
+        this.emit('get:object:size', sizeData);
+        const positionData = { objectId, position: null };
+        this.emit('get:object:position', positionData);
+        this.resizeStartBounds = sizeData.size || { width: 100, height: 100 };
+        this.resizeStartMousePos = { x: currentMouse.x, y: currentMouse.y };
+        this.resizeStartPosition = positionData.position || { x: 0, y: 0 };
+        this.emit('resize:start', { object: objectId, handle });
+    }
+
+    update(event, helpers) {
+        if (!this.isResizing || !this.resizeStartBounds || !this.resizeStartMousePos) return;
+        const { calculateNewSize, calculatePositionOffset } = helpers;
+        const deltaX = event.x - this.resizeStartMousePos.x;
+        const deltaY = event.y - this.resizeStartMousePos.y;
+        const maintainAspectRatio = !!(event.originalEvent && event.originalEvent.shiftKey);
+        const newSize = calculateNewSize(this.resizeHandle, this.resizeStartBounds, deltaX, deltaY, maintainAspectRatio);
+        newSize.width = Math.max(20, newSize.width);
+        newSize.height = Math.max(20, newSize.height);
+        const rotation = this.getRotation ? (this.getRotation(this.dragTarget) || 0) : 0;
+        const positionOffset = calculatePositionOffset(this.resizeHandle, this.resizeStartBounds, newSize, rotation);
+        const newPosition = { x: this.resizeStartPosition.x + positionOffset.x, y: this.resizeStartPosition.y + positionOffset.y };
+        this.emit('resize:update', { object: this.dragTarget, handle: this.resizeHandle, size: newSize, position: newPosition });
+    }
+
+    end() {
+        if (this.isResizing && this.dragTarget) {
+            const finalSizeData = { objectId: this.dragTarget, size: null };
+            this.emit('get:object:size', finalSizeData);
+            const finalPositionData = { objectId: this.dragTarget, position: null };
+            this.emit('get:object:position', finalPositionData);
+            this.emit('resize:end', {
+                object: this.dragTarget,
+                oldSize: this.resizeStartBounds,
+                newSize: finalSizeData.size || this.resizeStartBounds,
+                oldPosition: this.resizeStartPosition,
+                newPosition: finalPositionData.position || this.resizeStartPosition
+            });
+        }
+        this.isResizing = false;
+        this.resizeHandle = null;
+        this.dragTarget = null;
+        this.resizeStartBounds = null;
+        this.resizeStartMousePos = null;
+        this.resizeStartPosition = null;
+    }
+}
+
+

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

@@ -0,0 +1,58 @@
+/**
+ * RotateController — вращение одного объекта (не группы)
+ */
+export class RotateController {
+    constructor({ emit }) {
+        this.emit = emit;
+        this.isRotating = false;
+        this.dragTarget = null;
+        this.rotateCenter = null;
+        this.rotateStartAngle = 0; // начальный угол объекта
+        this.rotateStartMouseAngle = 0; // начальный угол мыши от центра
+        this.rotateCurrentAngle = 0;
+    }
+
+    start(objectId, currentMouse, center) {
+        this.isRotating = true;
+        this.dragTarget = objectId;
+        // Текущий угол объекта
+        const rotationData = { objectId, rotation: 0 };
+        this.emit('get:object:rotation', rotationData);
+        this.rotateStartAngle = rotationData.rotation || 0;
+        this.rotateCurrentAngle = this.rotateStartAngle;
+        // Центр вращения приходит снаружи (рассчитан по pos+size)
+        this.rotateCenter = center;
+        this.rotateStartMouseAngle = Math.atan2(currentMouse.y - center.y, currentMouse.x - center.x);
+        this.emit('rotate:start', { object: objectId });
+    }
+
+    update(event) {
+        if (!this.isRotating || !this.rotateCenter) return;
+        const currentMouseAngle = Math.atan2(event.y - this.rotateCenter.y, event.x - this.rotateCenter.x);
+        let delta = currentMouseAngle - this.rotateStartMouseAngle;
+        while (delta > Math.PI) delta -= 2 * Math.PI;
+        while (delta < -Math.PI) delta += 2 * Math.PI;
+        let deltaDeg = delta * 180 / Math.PI;
+        if (event.originalEvent && event.originalEvent.shiftKey) {
+            deltaDeg = Math.round(deltaDeg / 15) * 15;
+        }
+        this.rotateCurrentAngle = this.rotateStartAngle + deltaDeg;
+        while (this.rotateCurrentAngle < 0) this.rotateCurrentAngle += 360;
+        while (this.rotateCurrentAngle >= 360) this.rotateCurrentAngle -= 360;
+        this.emit('rotate:update', { object: this.dragTarget, angle: this.rotateCurrentAngle });
+    }
+
+    end() {
+        if (this.isRotating && this.dragTarget) {
+            this.emit('rotate:end', { object: this.dragTarget, oldAngle: this.rotateStartAngle, newAngle: this.rotateCurrentAngle });
+        }
+        this.isRotating = false;
+        this.dragTarget = null;
+        this.rotateCenter = null;
+        this.rotateStartAngle = 0;
+        this.rotateStartMouseAngle = 0;
+        this.rotateCurrentAngle = 0;
+    }
+}
+
+

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

@@ -0,0 +1,42 @@
+/**
+ * SelectionModel — хранит и управляет текущим набором выбранных объектов
+ */
+export class SelectionModel {
+    constructor() {
+        this._ids = new Set();
+    }
+
+    clear() { this._ids.clear(); }
+    add(id) { if (id) this._ids.add(id); }
+    addMany(ids = []) { ids.forEach((id) => this.add(id)); }
+    remove(id) { this._ids.delete(id); }
+    toggle(id) { if (this._ids.has(id)) this._ids.delete(id); else this._ids.add(id); }
+    has(id) { return this._ids.has(id); }
+    size() { return this._ids.size; }
+    toArray() { return Array.from(this._ids); }
+
+    /**
+     * Вычисляет групповые границы по getBounds() каждого PIXI-объекта
+     * @param {(id:string)=>PIXI.DisplayObject|null} getPixiById
+     * @returns {{x:number,y:number,width:number,height:number}|null}
+     */
+    computeBounds(getPixiById) {
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        let any = false;
+        for (const id of this._ids) {
+            const pixi = getPixiById ? getPixiById(id) : null;
+            if (!pixi || !pixi.getBounds) continue;
+            const b = pixi.getBounds();
+            if (!b) continue;
+            any = true;
+            if (b.x < minX) minX = b.x;
+            if (b.y < minY) minY = b.y;
+            if (b.x + b.width > maxX) maxX = b.x + b.width;
+            if (b.y + b.height > maxY) maxY = b.y + b.height;
+        }
+        if (!any) return null;
+        return { x: minX, y: minY, width: Math.max(0, maxX - minX), height: Math.max(0, maxY - minY) };
+    }
+}
+
+

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

@@ -0,0 +1,45 @@
+/**
+ * SimpleDragController — управляет перетаскиванием одного объекта
+ * Делегирует в ядро события drag:start/update/end
+ */
+export class SimpleDragController {
+    constructor({ emit }) {
+        this.emit = emit;
+        this.active = false;
+        this.dragTarget = null;
+        this.offset = { x: 0, y: 0 };
+    }
+
+    start(objectId, event) {
+        this.active = true;
+        this.dragTarget = objectId;
+        // Получаем текущую позицию объекта
+        const objectData = { objectId, position: null };
+        this.emit('get:object:position', objectData);
+        if (objectData.position) {
+            this.offset = { x: event.x - objectData.position.x, y: event.y - objectData.position.y };
+        } else {
+            this.offset = { x: 0, y: 0 };
+        }
+        // Позиция и координаты — уже в мировых координатах (SelectTool нормализует)
+        this.emit('drag:start', { object: objectId, position: { x: event.x, y: event.y } });
+    }
+
+    update(event) {
+        if (!this.active || !this.dragTarget) return;
+        const newX = event.x - this.offset.x;
+        const newY = event.y - this.offset.y;
+        this.emit('drag:update', { object: this.dragTarget, position: { x: newX, y: newY } });
+    }
+
+    end() {
+        if (!this.active) return;
+        if (this.dragTarget) {
+            this.emit('drag:end', { object: this.dragTarget });
+        }
+        this.active = false;
+        this.dragTarget = null;
+    }
+}
+
+

package/src/ui/CommentPopover.js

@@ -0,0 +1,187 @@
+import { Events } from '../core/events/Events.js';
+
+/**
+ * CommentPopover — всплывающее окно для объектов типа comment
+ */
+export class CommentPopover {
+    constructor(container, eventBus, core) {
+        this.container = container;
+        this.eventBus = eventBus;
+        this.core = core;
+        this.layer = null;
+        this.popover = null;
+        this.header = null;
+        this.body = null;
+        this.footer = null;
+        this.input = null;
+        this.button = null;
+        this.currentId = null;
+        // Память комментариев: { [objectId]: string[] }
+        this.commentsById = new Map();
+        this._onDocMouseDown = this._onDocMouseDown.bind(this);
+        this._onSubmit = this._onSubmit.bind(this);
+    }
+
+    attach() {
+        this.layer = document.createElement('div');
+        this.layer.className = 'comment-popover-layer';
+        Object.assign(this.layer.style, {
+            position: 'absolute', inset: '0', pointerEvents: 'none', zIndex: 25
+        });
+        this.container.appendChild(this.layer);
+
+        // Подписки
+        this.eventBus.on(Events.Tool.SelectionAdd, () => this.updateFromSelection());
+        this.eventBus.on(Events.Tool.SelectionRemove, () => this.updateFromSelection());
+        this.eventBus.on(Events.Tool.SelectionClear, () => this.hide());
+        this.eventBus.on(Events.Tool.DragUpdate, () => this.reposition());
+        this.eventBus.on(Events.Tool.GroupDragUpdate, () => this.reposition());
+        this.eventBus.on(Events.Tool.ResizeUpdate, () => this.reposition());
+        this.eventBus.on(Events.Tool.RotateUpdate, () => this.reposition());
+        this.eventBus.on(Events.UI.ZoomPercent, () => this.reposition());
+        this.eventBus.on(Events.Tool.PanUpdate, () => this.reposition());
+        this.eventBus.on(Events.Object.Deleted, ({ objectId }) => {
+            if (this.currentId && objectId === this.currentId) this.hide();
+            // По желанию можно очистить: this.commentsById.delete(objectId);
+        });
+    }
+
+    destroy() {
+        this.hide();
+        if (this.layer) this.layer.remove();
+        this.layer = null;
+    }
+
+    updateFromSelection() {
+        // Показываем только для одиночного выделения комментария
+        const ids = this.core?.selectTool ? Array.from(this.core.selectTool.selectedObjects || []) : [];
+        if (!ids || ids.length !== 1) { this.hide(); return; }
+        const id = ids[0];
+        const pixi = this.core?.pixi?.objects?.get ? this.core.pixi.objects.get(id) : null;
+        if (!pixi) { this.hide(); return; }
+        const mb = pixi._mb || {};
+        if (mb.type !== 'comment') { this.hide(); return; }
+        this.currentId = id;
+        this.showFor(id);
+        this._renderBodyFor(id);
+    }
+
+    showFor(id) {
+        if (!this.layer) return;
+        if (!this.popover) {
+            this.popover = this._createPopover();
+            this.layer.appendChild(this.popover);
+            document.addEventListener('mousedown', this._onDocMouseDown, true);
+        }
+        this.popover.style.display = 'flex';
+        this.reposition();
+        // автофокус в input
+        if (this.input) this.input.focus();
+    }
+
+    hide() {
+        this.currentId = null;
+        if (this.popover) this.popover.style.display = 'none';
+        document.removeEventListener('mousedown', this._onDocMouseDown, true);
+    }
+
+    _createPopover() {
+        const el = document.createElement('div');
+        el.className = 'comment-popover';
+        Object.assign(el.style, { position: 'absolute', pointerEvents: 'auto', display: 'flex', flexDirection: 'column' });
+        // Header
+        this.header = document.createElement('div');
+        this.header.className = 'comment-popover__header';
+        const title = document.createElement('div');
+        title.className = 'comment-popover__title';
+        title.textContent = 'Комментарий';
+        const close = document.createElement('button');
+        close.type = 'button';
+        close.className = 'comment-popover__close';
+        close.textContent = '✕';
+        close.addEventListener('click', () => this.hide());
+        this.header.appendChild(title);
+        this.header.appendChild(close);
+        // Body
+        this.body = document.createElement('div');
+        this.body.className = 'comment-popover__body';
+        Object.assign(this.body.style, { overflowY: 'auto', maxHeight: '240px' });
+        // Footer
+        this.footer = document.createElement('div');
+        this.footer.className = 'comment-popover__footer';
+        const form = document.createElement('form');
+        form.className = 'comment-popover__form';
+        form.addEventListener('submit', this._onSubmit);
+        this.input = document.createElement('input');
+        this.input.type = 'text';
+        this.input.placeholder = 'Напишите комментарий';
+        this.input.className = 'comment-popover__input';
+        this.button = document.createElement('button');
+        this.button.type = 'submit';
+        this.button.textContent = 'Добавить';
+        this.button.className = 'comment-popover__button';
+        form.appendChild(this.input);
+        form.appendChild(this.button);
+        this.footer.appendChild(form);
+
+        el.appendChild(this.header);
+        el.appendChild(this.body);
+        el.appendChild(this.footer);
+        return el;
+    }
+
+    _onDocMouseDown(e) {
+        if (!this.popover || this.popover.style.display === 'none') return;
+        if (this.popover.contains(e.target)) return; // клик внутри окна — не закрываем
+        this.hide();
+    }
+
+    _onSubmit(e) {
+        e.preventDefault();
+        if (!this.input || !this.currentId) return;
+        const text = this.input.value.trim();
+        if (!text) return;
+        // Записываем в список комментов текущего объекта
+        const list = this.commentsById.get(this.currentId) || [];
+        list.push(text);
+        this.commentsById.set(this.currentId, list);
+        // Перерисовываем body
+        this._renderBodyFor(this.currentId);
+        this.input.value = '';
+        this.input.focus();
+        // В дальнейшем можно сохранить в объекте/сервере
+    }
+
+    _renderBodyFor(id) {
+        if (!this.body) return;
+        this.body.innerHTML = '';
+        const list = this.commentsById.get(id) || [];
+        list.forEach((text) => {
+            const row = document.createElement('div');
+            row.className = 'comment-popover__row';
+            row.textContent = text;
+            this.body.appendChild(row);
+        });
+    }
+
+    reposition() {
+        if (!this.popover || !this.currentId) return;
+        const pixi = this.core?.pixi?.objects?.get ? this.core.pixi.objects.get(this.currentId) : null;
+        if (!pixi) { this.hide(); return; }
+
+        const b = pixi.getBounds(); // глобальные координаты PIXI
+        const res = (this.core.pixi.app.renderer?.resolution) || 1;
+        const view = this.core.pixi.app.view;
+        const containerRect = this.container.getBoundingClientRect();
+        const viewRect = view.getBoundingClientRect();
+        const offsetLeft = viewRect.left - containerRect.left;
+        const offsetTop = viewRect.top - containerRect.top;
+
+        const left = offsetLeft + (b.x + b.width) / res + 12; // справа от объекта + зазор
+        const top = offsetTop + b.y / res; // по верхнему краю
+
+        this.popover.style.left = `${Math.round(left)}px`;
+        this.popover.style.top = `${Math.round(top)}px`;
+        this.popover.style.minHeight = '180px';
+    }
+}