@sequent-org/moodboard 1.4.32 → 1.4.34

package/src/ui/comments/CommentListPanel.js

@@ -0,0 +1,213 @@
+import { Events } from '../../core/events/Events.js';
+import { formatTime, pluralize, stripHtml } from './commentFormat.js';
+
+const CLOSE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
+const CHECKMARK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
+const TRASH_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M6 6l1 14a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-14"/></svg>`;
+
+/**
+ * Боковая панель со списком всех тредов доски.
+ * Открывается/закрывается по Events.Comment.ListOpened (toggle).
+ */
+export class CommentListPanel {
+    constructor(container, eventBus, core, commentService) {
+        this.container = container;
+        this.eventBus = eventBus;
+        this.core = core;
+        this.commentService = commentService;
+
+        this._panel = null;
+        this._body = null;
+        this._isOpen = false;
+
+        this._onListOpened = () => this.toggle();
+        this._onUpdate = () => { if (this._isOpen) this._renderList(); };
+    }
+
+    attach() {
+        this._panel = document.createElement('div');
+        this._panel.className = 'moodboard-comments-list';
+        this._panel.style.display = 'none';
+
+        const header = document.createElement('div');
+        header.className = 'moodboard-comments-list__header';
+
+        const closeBtn = document.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.className = 'moodboard-comments-list__close';
+        closeBtn.setAttribute('aria-label', 'Закрыть');
+        closeBtn.innerHTML = CLOSE_SVG;
+        closeBtn.addEventListener('click', () => this.hide());
+
+        const title = document.createElement('span');
+        title.className = 'moodboard-comments-list__title';
+        title.textContent = 'Комментарии';
+
+        header.appendChild(title);
+        header.appendChild(closeBtn);
+
+        this._body = document.createElement('div');
+        this._body.className = 'moodboard-comments-list__body';
+
+        this._panel.appendChild(header);
+        this._panel.appendChild(this._body);
+        this.container.appendChild(this._panel);
+
+        this.eventBus.on(Events.Comment.ListOpened, this._onListOpened);
+        this.eventBus.on(Events.Comment.RemoteUpdated, this._onUpdate);
+        this.eventBus.on(Events.Comment.MessageAdded, this._onUpdate);
+        this.eventBus.on(Events.Comment.Resolved, this._onUpdate);
+        this.eventBus.on(Events.Comment.ThreadDeleted, this._onUpdate);
+        this.eventBus.on(Events.Comment.PinCreated, this._onUpdate);
+        this.eventBus.on(Events.Comment.ColorChanged, this._onUpdate);
+    }
+
+    destroy() {
+        this.eventBus.off(Events.Comment.ListOpened, this._onListOpened);
+        this.eventBus.off(Events.Comment.RemoteUpdated, this._onUpdate);
+        this.eventBus.off(Events.Comment.MessageAdded, this._onUpdate);
+        this.eventBus.off(Events.Comment.Resolved, this._onUpdate);
+        this.eventBus.off(Events.Comment.ThreadDeleted, this._onUpdate);
+        this.eventBus.off(Events.Comment.PinCreated, this._onUpdate);
+        this.eventBus.off(Events.Comment.ColorChanged, this._onUpdate);
+        if (this._panel) {
+            this._panel.remove();
+            this._panel = null;
+        }
+        this._body = null;
+    }
+
+    toggle() {
+        if (this._isOpen) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    show() {
+        if (!this._panel) return;
+        this._isOpen = true;
+        this._panel.style.display = 'flex';
+        this._renderList();
+    }
+
+    hide() {
+        if (!this._panel) return;
+        this._isOpen = false;
+        this._panel.style.display = 'none';
+    }
+
+    _renderList() {
+        if (!this._body) return;
+        const threads = this.commentService.getAllThreads();
+        this._body.replaceChildren();
+
+        if (!threads || threads.length === 0) {
+            const empty = document.createElement('div');
+            empty.className = 'moodboard-comments-list__empty';
+            empty.textContent = 'Пока нет комментариев';
+            this._body.appendChild(empty);
+            return;
+        }
+
+        const fragment = document.createDocumentFragment();
+        for (const thread of threads) {
+            fragment.appendChild(this._buildCard(thread));
+        }
+        this._body.appendChild(fragment);
+    }
+
+    _buildCard(thread) {
+        const root = document.createElement('div');
+        root.className = 'moodboard-comments-list__card' +
+            (thread.resolved ? ' moodboard-comments-list__card--resolved' : '');
+        root.addEventListener('click', (e) => this._onCardClick(e, thread));
+
+        const firstMsg = thread.messages?.items?.[0];
+        const currentUser = this.commentService.currentUser;
+        const isSelf = currentUser?.id != null && thread.created_by != null &&
+            String(thread.created_by) === String(currentUser.id);
+        const authorName = firstMsg?.author_name || (isSelf ? 'Вы' : 'Участник');
+        const timeStr = firstMsg?.created_at ? formatTime(firstMsg.created_at) : '';
+        const content = stripHtml(firstMsg?.content || '');
+
+        const colorDot = document.createElement('span');
+        colorDot.className = 'moodboard-comments-list__card-dot';
+        if (thread.color) colorDot.style.background = thread.color;
+
+        const meta = document.createElement('div');
+        meta.className = 'moodboard-comments-list__card-meta';
+
+        const author = document.createElement('span');
+        author.className = 'moodboard-comments-list__card-author';
+        author.textContent = authorName;
+
+        const time = document.createElement('span');
+        time.className = 'moodboard-comments-list__card-time';
+        time.textContent = timeStr;
+
+        meta.appendChild(author);
+        meta.appendChild(time);
+
+        const top = document.createElement('div');
+        top.className = 'moodboard-comments-list__card-top';
+        top.appendChild(colorDot);
+        top.appendChild(meta);
+
+        const body = document.createElement('div');
+        body.className = 'moodboard-comments-list__card-body';
+        body.textContent = content;
+
+        const replyCount = (thread.messages?.items?.length || 0) - 1;
+        let repliesEl = null;
+        if (replyCount > 0) {
+            repliesEl = document.createElement('div');
+            repliesEl.className = 'moodboard-comments-list__card-replies';
+            repliesEl.textContent = `${replyCount} ${pluralize(replyCount, 'ответ', 'ответа', 'ответов')}`;
+        }
+
+        const actions = document.createElement('div');
+        actions.className = 'moodboard-comments-list__card-actions';
+
+        const resolveBtn = document.createElement('button');
+        resolveBtn.type = 'button';
+        resolveBtn.className = 'moodboard-comments-list__resolve-btn' +
+            (thread.resolved ? ' moodboard-comments-list__resolve-btn--resolved' : '');
+        resolveBtn.setAttribute('aria-label', thread.resolved ? 'Вернуть' : 'Решить');
+        resolveBtn.innerHTML = CHECKMARK_SVG + `<span>${thread.resolved ? 'Вернуть' : 'Решить'}</span>`;
+        resolveBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.commentService.resolveThread(thread.id, !thread.resolved).catch(console.error);
+        });
+
+        const deleteBtn = document.createElement('button');
+        deleteBtn.type = 'button';
+        deleteBtn.className = 'moodboard-comments-list__delete-btn';
+        deleteBtn.setAttribute('aria-label', 'Удалить');
+        deleteBtn.innerHTML = TRASH_SVG;
+        deleteBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.commentService.deleteThread(thread.id).catch(console.error);
+        });
+
+        actions.appendChild(resolveBtn);
+        actions.appendChild(deleteBtn);
+
+        root.appendChild(top);
+        root.appendChild(body);
+        if (repliesEl) root.appendChild(repliesEl);
+        root.appendChild(actions);
+
+        return root;
+    }
+
+    _onCardClick(e, thread) {
+        const pos = this.commentService.getThreadWorldPosition(thread, this.core);
+        if (pos) {
+            this.eventBus.emit(Events.UI.MinimapCenterOn, { worldX: pos.x, worldY: pos.y });
+            this.eventBus.emit(Events.Viewport.Changed);
+        }
+        this.commentService.openThread(thread.id);
+    }
+}

package/src/ui/comments/CommentPinLayer.js

@@ -0,0 +1,448 @@
+import * as PIXI from 'pixi.js';
+import { Events } from '../../core/events/Events.js';
+
+const PIN_SIZE = 28;
+
+/**
+ * HTML-оверлей пинов комментариев. Перепроекция world→screen через toGlobal.
+ *
+ * Структура DOM каждого пина:
+ *   <div.comment-pin-wrap>   ← positioned absolute, 28×28, pointer-events:none
+ *     <button.comment-pin>   ← overflow:hidden (clip avatar), pointer-events:auto
+ *       <img.comment-pin__avatar>  | или
+ *       <span.comment-pin__initials>
+ *     </button>
+ *     <span.comment-pin__badge>   ← sibling кнопки, не клипируется её overflow
+ *   </div>
+ *
+ * Такая структура позволяет добавить overflow:hidden на кнопку (для круглого аватара)
+ * без обрезания бейджа, который позиционируется за пределами кнопки.
+ */
+export class CommentPinLayer {
+    constructor(container, eventBus, core, commentService) {
+        this.container = container;
+        this.eventBus = eventBus;
+        this.core = core;
+        this.commentService = commentService;
+        this.layer = null;
+        /** @type {Map<number, HTMLElement>} кнопки пинов */
+        this.pinEls = new Map();
+        /** @type {Map<number, HTMLElement>} wrapper-divы (positioned), родители кнопки + бейджа */
+        this.pinWraps = new Map();
+        this._onReproject = () => this.reprojectAll();
+        this._onPinClick = this._onPinClick.bind(this);
+        this._onPinPointerDown = this._onPinPointerDown.bind(this);
+        this._onRemote = () => this.rebuild();
+        /** Показывать ли resolved-пины. По умолчанию true. Управляется CommentsBar. */
+        this.showResolved = true;
+        this._onResolvedFilterChanged = ({ showResolved }) => {
+            this.showResolved = !!showResolved;
+            this._applyResolvedFilter();
+        };
+        /** true — последний pointerup завершил drag; следующий click должен быть проигнорирован */
+        this._lastDragWasMoved = false;
+        /** Черновой пин (показывается до создания первого сообщения треда) */
+        this._draftWrap = null;
+        this._onDraftOpened = this._onDraftOpened.bind(this);
+        this._onDraftClosed = this._onDraftClosed.bind(this);
+        /** @type {{ threadId: number, startClientX: number, startClientY: number, startWorldX: number, startWorldY: number, moved: boolean } | null} */
+        this._activeDrag = null;
+        this._docMoveHandler = null;
+        this._docUpHandler = null;
+    }
+
+    attach() {
+        this.layer = document.createElement('div');
+        this.layer.className = 'comment-pin-layer';
+        Object.assign(this.layer.style, {
+            position: 'absolute',
+            inset: '0',
+            pointerEvents: 'none',
+            zIndex: 22,
+        });
+        this.container.appendChild(this.layer);
+
+        const ev = [
+            [Events.Comment.ResolvedFilterChanged, this._onResolvedFilterChanged],
+            [Events.Viewport.Changed, this._onReproject],
+            [Events.Tool.PanUpdate, this._onReproject],
+            [Events.UI.ZoomPercent, this._onReproject],
+            [Events.Object.TransformUpdated, this._onReproject],
+            [Events.Comment.RemoteUpdated, this._onRemote],
+            [Events.Comment.PinCreated, this._onRemote],
+            [Events.Comment.ThreadDeleted, this._onRemote],
+            [Events.Comment.Resolved, this._onRemote],
+            [Events.Comment.ColorChanged, this._onRemote],
+            [Events.Comment.DraftOpened, this._onDraftOpened],
+            [Events.Comment.DraftClosed, this._onDraftClosed],
+        ];
+        this._subs = ev;
+        for (const [name, fn] of ev) this.eventBus.on(name, fn);
+
+        if (typeof window !== 'undefined') {
+            this._onResize = () => this._onReproject();
+            window.addEventListener('resize', this._onResize);
+        }
+
+        this.rebuild();
+    }
+
+    destroy() {
+        this._removeDragListeners();
+        this._activeDrag = null;
+        if (this._subs) {
+            for (const [name, fn] of this._subs) this.eventBus.off(name, fn);
+        }
+        if (this._onResize) window.removeEventListener('resize', this._onResize);
+        this.pinEls.clear();
+        this.pinWraps.clear();
+        this._hideDraftPin();
+        if (this.layer) this.layer.remove();
+        this.layer = null;
+    }
+
+    rebuild() {
+        if (!this.layer) return;
+        const threads = this.commentService.getAllThreads();
+        const ids = new Set(threads.map((t) => Number(t.id)));
+        for (const id of [...this.pinWraps.keys()]) {
+            if (!ids.has(id)) {
+                this.pinWraps.get(id)?.remove();
+                this.pinWraps.delete(id);
+                this.pinEls.delete(id);
+            }
+        }
+        for (const thread of threads) {
+            this._ensurePinEl(thread);
+        }
+        this.reprojectAll();
+        this._applyResolvedFilter();
+    }
+
+    _applyResolvedFilter() {
+        for (const [id, wrap] of this.pinWraps) {
+            const thread = this.commentService.getThread(id);
+            if (!thread) continue;
+            wrap.style.display = (!this.showResolved && thread.resolved) ? 'none' : '';
+        }
+    }
+
+    reprojectAll() {
+        for (const thread of this.commentService.getAllThreads()) {
+            this._projectPin(thread);
+        }
+        this._projectDraftPin();
+    }
+
+    _ensurePinEl(thread) {
+        const id = Number(thread.id);
+        let wrap = this.pinWraps.get(id);
+        let el = this.pinEls.get(id);
+
+        if (!wrap) {
+            wrap = document.createElement('div');
+            wrap.className = 'comment-pin-wrap';
+            wrap.style.pointerEvents = 'none';
+
+            el = document.createElement('button');
+            el.type = 'button';
+            el.className = 'comment-pin';
+            el.dataset.threadId = String(id);
+            el.style.pointerEvents = 'auto';
+            el.addEventListener('click', this._onPinClick);
+            el.addEventListener('pointerdown', this._onPinPointerDown);
+
+            wrap.appendChild(el);
+            this.layer.appendChild(wrap);
+            this.pinEls.set(id, el);
+            this.pinWraps.set(id, wrap);
+        }
+
+        // Аватар автора: thread.author_avatar → currentUser.avatar (если автор текущий) → инициалы
+        const cu = this.commentService.currentUser;
+        const avatarUrl = thread.author_avatar ||
+            (thread.created_by != null && cu?.id != null &&
+             String(thread.created_by) === String(cu.id)
+                ? cu.avatar || null
+                : null);
+
+        let img = el.querySelector('.comment-pin__avatar');
+        let initials = el.querySelector('.comment-pin__initials');
+
+        if (avatarUrl) {
+            if (!img) {
+                img = document.createElement('img');
+                img.className = 'comment-pin__avatar';
+                img.alt = '';
+                el.insertBefore(img, el.firstChild);
+            }
+            img.src = avatarUrl;
+            img.style.display = '';
+            if (initials) initials.style.display = 'none';
+        } else {
+            if (img) img.style.display = 'none';
+            if (!initials) {
+                initials = document.createElement('span');
+                initials.className = 'comment-pin__initials';
+                el.insertBefore(initials, el.firstChild);
+            }
+            const name = thread.author_name || cu?.name || '';
+            initials.textContent = name.charAt(0).toUpperCase() || '?';
+            initials.style.display = '';
+        }
+
+        el.classList.toggle('comment-pin--resolved', !!thread.resolved);
+
+        // Обводка цвета треда через CSS-переменную --pin-color.
+        // Resolved-пин всегда зелёный (border-color задан классом comment-pin--resolved),
+        // поэтому переменная применяется только к нерешённым пинам.
+        if (thread.color && !thread.resolved) {
+            el.style.setProperty('--pin-color', thread.color);
+        } else {
+            el.style.removeProperty('--pin-color');
+        }
+
+        // Зелёный индикатор-галочка для решённых тредов
+        let resolvedBadge = wrap.querySelector('.comment-pin__resolved-badge');
+        if (thread.resolved) {
+            if (!resolvedBadge) {
+                resolvedBadge = document.createElement('span');
+                resolvedBadge.className = 'comment-pin__resolved-badge';
+                resolvedBadge.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
+                wrap.appendChild(resolvedBadge);
+            }
+            resolvedBadge.style.display = '';
+        } else if (resolvedBadge) {
+            resolvedBadge.style.display = 'none';
+        }
+
+        // Бейдж — sibling кнопки внутри wrap; не клипируется overflow:hidden кнопки
+        const unread = thread.unread_count || 0;
+        let badge = wrap.querySelector('.comment-pin__badge');
+        if (unread > 0 && !thread.resolved) {
+            if (!badge) {
+                badge = document.createElement('span');
+                badge.className = 'comment-pin__badge';
+                wrap.appendChild(badge);
+            }
+            badge.textContent = unread > 99 ? '99+' : String(unread);
+            badge.style.display = '';
+        } else if (badge) {
+            badge.style.display = 'none';
+        }
+
+        el.setAttribute('aria-label', thread.resolved ? 'Решённый комментарий' : 'Комментарий');
+
+        // Цвет пина через CSS-переменную; при null — дефолт из CSS
+        wrap.style.setProperty('--pin-color', thread.color || '');
+    }
+
+    _onDraftOpened({ x, y }) {
+        this._showDraftPin(x, y);
+    }
+
+    _onDraftClosed() {
+        this._hideDraftPin();
+    }
+
+    _showDraftPin(worldX, worldY) {
+        if (!this.layer) return;
+        this._hideDraftPin();
+
+        const wrap = document.createElement('div');
+        wrap.className = 'comment-pin-wrap comment-pin-wrap--draft';
+        wrap.style.pointerEvents = 'none';
+        wrap.style.position = 'absolute';
+
+        const btn = document.createElement('div');
+        btn.className = 'comment-pin comment-pin--draft';
+
+        const cu = this.commentService.currentUser;
+        const avatarUrl = cu?.avatar || null;
+
+        if (avatarUrl) {
+            const img = document.createElement('img');
+            img.className = 'comment-pin__avatar';
+            img.src = avatarUrl;
+            img.alt = '';
+            btn.appendChild(img);
+        } else {
+            const initials = document.createElement('span');
+            initials.className = 'comment-pin__initials';
+            const name = cu?.name || '';
+            initials.textContent = name.charAt(0).toUpperCase() || '?';
+            btn.appendChild(initials);
+        }
+
+        wrap.appendChild(btn);
+        this.layer.appendChild(wrap);
+        this._draftWrap = wrap;
+        this._draftWorld = { x: worldX, y: worldY };
+
+        this._projectDraftPin();
+    }
+
+    _hideDraftPin() {
+        if (this._draftWrap) {
+            this._draftWrap.remove();
+            this._draftWrap = null;
+        }
+        this._draftWorld = null;
+    }
+
+    _projectDraftPin() {
+        if (!this._draftWrap || !this._draftWorld) return;
+        const screen = this._worldPointToCss(this._draftWorld.x, this._draftWorld.y);
+        if (!screen) return;
+        const left = Math.round(screen.left - PIN_SIZE / 2);
+        const top = Math.round(screen.top - PIN_SIZE / 2);
+        this._draftWrap.style.left = `${left}px`;
+        this._draftWrap.style.top = `${top}px`;
+    }
+
+    _onPinClick(e) {
+        if (this._lastDragWasMoved) {
+            this._lastDragWasMoved = false;
+            return;
+        }
+        const id = Number(e.currentTarget?.dataset?.threadId);
+        if (!Number.isFinite(id)) return;
+        e.stopPropagation();
+        this.eventBus.emit(Events.Comment.ThreadOpened, { threadId: id, pinEl: e.currentTarget });
+    }
+
+    _onPinPointerDown(e) {
+        if (e.button !== 0) return;
+        e.stopPropagation();
+        const id = Number(e.currentTarget?.dataset?.threadId);
+        if (!Number.isFinite(id)) return;
+        const thread = this.commentService.getThread(id);
+        if (!thread) return;
+        const worldPos = this.commentService.getThreadWorldPosition(thread, this.core);
+        this._activeDrag = {
+            threadId: id,
+            startClientX: e.clientX,
+            startClientY: e.clientY,
+            startWorldX: worldPos?.x ?? thread.x,
+            startWorldY: worldPos?.y ?? thread.y,
+            moved: false,
+        };
+        this._docMoveHandler = (ev) => this._onDragMove(ev);
+        this._docUpHandler = (ev) => this._onDragUp(ev);
+        document.addEventListener('pointermove', this._docMoveHandler);
+        document.addEventListener('pointerup', this._docUpHandler);
+    }
+
+    _onDragMove(e) {
+        const drag = this._activeDrag;
+        if (!drag) return;
+        const dx = e.clientX - drag.startClientX;
+        const dy = e.clientY - drag.startClientY;
+        if (!drag.moved && Math.hypot(dx, dy) < 4) return;
+        drag.moved = true;
+
+        const containerRect = this.container.getBoundingClientRect();
+        const worldPos = this._cssPointToWorld(
+            e.clientX - containerRect.left,
+            e.clientY - containerRect.top,
+        );
+        if (!worldPos) return;
+
+        const thread = this.commentService.getThread(drag.threadId);
+        if (!thread) return;
+        // Мутируем напрямую (живой объект из Map) — только для визуального drag
+        thread.x = worldPos.x;
+        thread.y = worldPos.y;
+        this._projectPin(thread);
+
+        const el = this.pinEls.get(drag.threadId);
+        if (el) el.style.cursor = 'grabbing';
+    }
+
+    _onDragUp(e) {
+        const drag = this._activeDrag;
+        this._removeDragListeners();
+        this._activeDrag = null;
+        if (!drag) return;
+
+        const el = this.pinEls.get(drag.threadId);
+        if (el) el.style.cursor = '';
+
+        if (!drag.moved) return; // клик — click-событие обработает _onPinClick
+        this._lastDragWasMoved = true;
+
+        const thread = this.commentService.getThread(drag.threadId);
+        if (!thread) return;
+
+        let payload;
+        if (thread.anchor_object_id && !thread.detached) {
+            const pos = { objectId: thread.anchor_object_id, position: null };
+            this.eventBus.emit(Events.Tool.GetObjectPosition, pos);
+            if (pos.position) {
+                payload = {
+                    x: thread.x,
+                    y: thread.y,
+                    anchor_object_id: thread.anchor_object_id,
+                    anchor_dx: thread.x - pos.position.x,
+                    anchor_dy: thread.y - pos.position.y,
+                };
+            } else {
+                payload = { x: thread.x, y: thread.y };
+            }
+        } else {
+            payload = { x: thread.x, y: thread.y };
+        }
+
+        this.commentService.moveThread(drag.threadId, payload);
+    }
+
+    _removeDragListeners() {
+        if (this._docMoveHandler) {
+            document.removeEventListener('pointermove', this._docMoveHandler);
+            this._docMoveHandler = null;
+        }
+        if (this._docUpHandler) {
+            document.removeEventListener('pointerup', this._docUpHandler);
+            this._docUpHandler = null;
+        }
+    }
+
+    _projectPin(thread) {
+        const wrap = this.pinWraps.get(Number(thread.id));
+        if (!wrap) return;
+        const worldPos = this.commentService.getThreadWorldPosition(thread, this.core);
+        if (!worldPos) return;
+        const screen = this._worldPointToCss(worldPos.x, worldPos.y);
+        if (!screen) return;
+        const left = Math.round(screen.left - PIN_SIZE / 2);
+        const top = Math.round(screen.top - PIN_SIZE / 2);
+        wrap.style.left = `${left}px`;
+        wrap.style.top = `${top}px`;
+    }
+
+    _worldPointToCss(worldX, worldY) {
+        const worldLayer = this.core?.pixi?.worldLayer || this.core?.pixi?.app?.stage;
+        const view = this.core?.pixi?.app?.view;
+        if (!worldLayer || !view?.parentElement) return null;
+        const containerRect = this.container.getBoundingClientRect();
+        const viewRect = view.getBoundingClientRect();
+        const offsetLeft = viewRect.left - containerRect.left;
+        const offsetTop = viewRect.top - containerRect.top;
+        const g = worldLayer.toGlobal(new PIXI.Point(worldX, worldY));
+        return { left: offsetLeft + g.x, top: offsetTop + g.y };
+    }
+
+    /** Зеркало _worldPointToCss: CSS-координата (относительно container) → world. */
+    _cssPointToWorld(cssLeft, cssTop) {
+        const worldLayer = this.core?.pixi?.worldLayer || this.core?.pixi?.app?.stage;
+        const view = this.core?.pixi?.app?.view;
+        if (!worldLayer || !view?.parentElement) return null;
+        const containerRect = this.container.getBoundingClientRect();
+        const viewRect = view.getBoundingClientRect();
+        const offsetLeft = viewRect.left - containerRect.left;
+        const offsetTop = viewRect.top - containerRect.top;
+        const gx = cssLeft - offsetLeft;
+        const gy = cssTop - offsetTop;
+        return worldLayer.toLocal(new PIXI.Point(gx, gy));
+    }
+}