@sequent-org/moodboard 1.4.32 → 1.4.33

package/src/ui/chat/ChatWindow.js

@@ -60,7 +60,6 @@ const BOARD_IMAGE_REARRANGE_MS = 520;
 const BOARD_IMAGE_PENDING_ENTER_FACTOR = 1.6;
 // Каскад между блоками одного батча (мс): пользователь видит, что они приезжают друг за другом.
 const BOARD_IMAGE_PENDING_STAGGER_MS = 90;
-const REFERENCE_DRAG_PREVIEW_SIZE = 96;
 
 const MODEL_OPTIONS = [
     {
@@ -145,12 +144,12 @@ export class ChatWindow {
         this._pendingOverlays = new Map();
         this._pendingOverlayTimers = new Map();
         this._boardImageShiftAnimations = new Map();
-        this._boardCursor = null;
-        this._draggedReferenceObject = null;
-        this._draggedReferenceStartPosition = null;
-        this._referenceDragPreview = null;
-        this._referenceDragHandlers = null;
         this._clearSelectionOnSendClick = null;
+        this._selectionHandlers = null;
+        // Окно от BoxSelectStart до BoxSelectCommit: в это время SelectionAdd
+        // приходит на каждый mousemove и не должен пушить превью в чат —
+        // финальный набор картинок мы получим из BoxSelectCommit по strict-contains.
+        this._boxSelectActive = false;
     }
 
     attach() {
@@ -180,7 +179,7 @@ export class ChatWindow {
         this._clearSelectionOnSendClick = () => this._clearBoardSelection();
         this._refs.send.addEventListener('click', this._clearSelectionOnSendClick);
         this._composer.attach();
-        this._attachReferenceDragEvents();
+        this._attachSelectionEvents();
 
         this._extendedPromptModal = new ChatExtendedPromptModal(
             this._container,
@@ -263,13 +262,12 @@ export class ChatWindow {
         if (!this._attached) return;
         this._clearPendingOverlays();
         this._cancelBoardImageShiftAnimations();
-        this._clearReferenceDragState();
         if (this._unsubscribe) { this._unsubscribe(); this._unsubscribe = null; }
         if (this._clearSelectionOnSendClick && this._refs?.send) {
             this._refs.send.removeEventListener('click', this._clearSelectionOnSendClick);
             this._clearSelectionOnSendClick = null;
         }
-        this._detachReferenceDragEvents();
+        this._detachSelectionEvents();
         this._shiftedForImageBatchKeys.clear();
         this._boardImageShiftHistory.clear();
         this._composer?.destroy();
@@ -465,175 +463,94 @@ export class ChatWindow {
         };
     }
 
-    _attachReferenceDragEvents() {
+    _attachSelectionEvents() {
         const eventBus = this._boardCore?.eventBus;
-        if (!eventBus || typeof eventBus.on !== 'function' || this._referenceDragHandlers) return;
+        if (!eventBus || typeof eventBus.on !== 'function' || this._selectionHandlers) return;
 
-        const onCursorMove = ({ x, y } = {}) => {
-            if (Number.isFinite(x) && Number.isFinite(y)) {
-                this._boardCursor = { x, y };
-                this._updateReferenceDragPreview();
-            }
+        const onSelectionAdd = (data) => {
+            void this._handleSelectionAdd(data);
         };
-        const onDragStart = (data) => {
-            this._handleReferenceDragStart(data);
+        const onSelectionRemove = (data) => {
+            const objectId = data?.object;
+            if (objectId) this._composer?.removeAttachmentForObject?.(objectId);
         };
-        const onDragEnd = (data) => {
-            void this._handleReferenceDragEnd(data);
+        const onSelectionClear = () => {
+            this._composer?.removeAllBoardAttachments?.();
         };
-        const onSelectionAdd = (data) => {
-            void this._handleSelectionAdd(data);
+        const onBoxSelectStart = () => {
+            this._boxSelectActive = true;
+        };
+        const onBoxSelectCommit = (data) => {
+            void this._handleBoxSelectCommit(data);
         };
 
-        this._referenceDragHandlers = { onCursorMove, onDragStart, onDragEnd, onSelectionAdd };
-        eventBus.on(Events.UI.CursorMove, onCursorMove);
-        eventBus.on(Events.Tool.DragStart, onDragStart);
-        eventBus.on(Events.Tool.DragEnd, onDragEnd);
+        this._selectionHandlers = {
+            onSelectionAdd,
+            onSelectionRemove,
+            onSelectionClear,
+            onBoxSelectStart,
+            onBoxSelectCommit
+        };
         eventBus.on(Events.Tool.SelectionAdd, onSelectionAdd);
+        eventBus.on(Events.Tool.SelectionRemove, onSelectionRemove);
+        eventBus.on(Events.Tool.SelectionClear, onSelectionClear);
+        eventBus.on(Events.Tool.BoxSelectStart, onBoxSelectStart);
+        eventBus.on(Events.Tool.BoxSelectCommit, onBoxSelectCommit);
     }
 
-    _detachReferenceDragEvents() {
+    _detachSelectionEvents() {
         const eventBus = this._boardCore?.eventBus;
-        const handlers = this._referenceDragHandlers;
+        const handlers = this._selectionHandlers;
         if (!eventBus || typeof eventBus.off !== 'function' || !handlers) return;
 
-        eventBus.off(Events.UI.CursorMove, handlers.onCursorMove);
-        eventBus.off(Events.Tool.DragStart, handlers.onDragStart);
-        eventBus.off(Events.Tool.DragEnd, handlers.onDragEnd);
         eventBus.off(Events.Tool.SelectionAdd, handlers.onSelectionAdd);
-        this._referenceDragHandlers = null;
+        eventBus.off(Events.Tool.SelectionRemove, handlers.onSelectionRemove);
+        eventBus.off(Events.Tool.SelectionClear, handlers.onSelectionClear);
+        eventBus.off(Events.Tool.BoxSelectStart, handlers.onBoxSelectStart);
+        eventBus.off(Events.Tool.BoxSelectCommit, handlers.onBoxSelectCommit);
+        this._selectionHandlers = null;
+        this._boxSelectActive = false;
     }
 
     async _handleSelectionAdd(data = {}) {
-        const objectId = data?.object;
-        const object = this._boardCore?.state?.state?.objects?.find((item) => item?.id === objectId);
-        
-        if (!isReferenceImageObject(object)) return;
-
-        await this._addImageObjectAsReference(object);
-    }
+        // Во время box-select каждый mousemove перевыставляет selection и снова
+        // эмитит SelectionAdd для тех же id. Финальный набор reference-картинок
+        // мы получим из BoxSelectCommit по strict-contains, поэтому здесь молчим.
+        if (this._boxSelectActive) return;
 
-    _handleReferenceDragStart(data = {}) {
         const objectId = data?.object;
         const object = this._boardCore?.state?.state?.objects?.find((item) => item?.id === objectId);
-        this._draggedReferenceObject = isReferenceImageObject(object) ? object : null;
-        this._draggedReferenceStartPosition = this._draggedReferenceObject?.position
-            ? { ...this._draggedReferenceObject.position }
-            : null;
-        this._updateReferenceDragPreview();
-    }
 
-    async _handleReferenceDragEnd(data = {}) {
-        const isDropTarget = this._isBoardCursorOverInput();
-        const objectId = data?.object;
-        const object = this._boardCore?.state?.state?.objects?.find((item) => item?.id === objectId);
-        const startPosition = this._draggedReferenceStartPosition;
-        this._clearReferenceDragState();
-        if (!isDropTarget || !isReferenceImageObject(object)) return null;
+        if (!isReferenceImageObject(object)) return;
 
-        this._restoreReferenceObjectPosition(objectId, startPosition);
         await this._addImageObjectAsReference(object);
     }
 
-    _restoreReferenceObjectPosition(objectId, position) {
-        if (!objectId || !position) return;
-
-        const updatePosition = this._boardCore?.updateObjectPositionDirect;
-        if (typeof updatePosition === 'function') {
-            updatePosition.call(this._boardCore, objectId, position, { snap: false });
-            return;
-        }
-
-        const object = this._boardCore?.state?.state?.objects?.find((item) => item?.id === objectId);
-        if (object?.position) {
-            object.position = { ...position };
-        }
-    }
+    async _handleBoxSelectCommit(data = {}) {
+        this._boxSelectActive = false;
+        const ids = Array.isArray(data?.selected) ? data.selected : (Array.isArray(data?.objects) ? data.objects : []);
+        if (!ids.length || !this._composer) return;
 
-    _updateReferenceDragPreview() {
-        const object = this._draggedReferenceObject;
-        if (!object || !this._isBoardCursorOverInput()) {
-            this._hideReferenceDragPreview();
-            return;
-        }
-
-        const src = getImageObjectSource(object);
-        if (!src) {
-            this._hideReferenceDragPreview();
-            return;
-        }
-
-        const preview = this._ensureReferenceDragPreview(object, src);
-        const { clientX, clientY } = this._getBoardCursorClientPosition();
-        preview.style.left = `${Math.round(clientX)}px`;
-        preview.style.top = `${Math.round(clientY)}px`;
-        this._refs?.textarea?.closest?.('.moodboard-chat__input-row')?.classList.add('is-reference-drop-target');
-    }
-
-    _ensureReferenceDragPreview(object, src) {
-        if (!this._referenceDragPreview) {
-            const preview = document.createElement('img');
-            preview.className = 'moodboard-chat__reference-drag-preview';
-            preview.alt = getImageObjectFileName(object, src);
-            preview.width = REFERENCE_DRAG_PREVIEW_SIZE;
-            preview.height = REFERENCE_DRAG_PREVIEW_SIZE;
-            document.body.appendChild(preview);
-            this._referenceDragPreview = preview;
-        }
-
-        if (this._referenceDragPreview.src !== src) {
-            this._referenceDragPreview.src = src;
+        const all = this._boardCore?.state?.state?.objects ?? [];
+        const byId = new Map(all.map((item) => [item?.id, item]));
+        const seen = new Set();
+        for (const id of ids) {
+            if (!id || seen.has(id)) continue;
+            seen.add(id);
+            const obj = byId.get(id);
+            if (!obj || !isReferenceImageObject(obj)) continue;
+            await this._addImageObjectAsReference(obj);
         }
-        this._referenceDragPreview.alt = getImageObjectFileName(object, src);
-
-        return this._referenceDragPreview;
-    }
-
-    _hideReferenceDragPreview() {
-        this._referenceDragPreview?.remove();
-        this._referenceDragPreview = null;
-        this._refs?.textarea?.closest?.('.moodboard-chat__input-row')?.classList.remove('is-reference-drop-target');
-    }
-
-    _clearReferenceDragState() {
-        this._draggedReferenceObject = null;
-        this._draggedReferenceStartPosition = null;
-        this._boardCursor = null;
-        this._hideReferenceDragPreview();
-    }
-
-    _isBoardCursorOverInput() {
-        const cursor = this._boardCursor;
-        const inputRow = this._refs?.textarea?.closest?.('.moodboard-chat__input-row');
-        if (!cursor || !inputRow) return false;
-
-        const containerRect = this._container.getBoundingClientRect?.();
-        const rect = inputRow.getBoundingClientRect();
-        const { clientX, clientY } = this._getBoardCursorClientPosition(containerRect);
-
-        return clientX >= rect.left
-            && clientX <= rect.right
-            && clientY >= rect.top
-            && clientY <= rect.bottom;
-    }
-
-    _getBoardCursorClientPosition(containerRect = null) {
-        const rect = containerRect || this._container.getBoundingClientRect?.();
-        const cursor = this._boardCursor || { x: 0, y: 0 };
-
-        return {
-            clientX: (rect?.left || 0) + cursor.x,
-            clientY: (rect?.top || 0) + cursor.y
-        };
     }
 
     async _addImageObjectAsReference(object) {
         if (!object || !this._composer) return;
+        if (this._composer.hasAttachmentForObject?.(object.id)) return;
 
         try {
             const file = await createFileFromImageObject(object);
             if (!file) return;
-            this._composer.addAttachment(file);
+            this._composer.addAttachment(file, { sourceObjectId: object.id });
             this._composer.focus();
         } catch (err) {
             console.warn('[ChatWindow] cannot add selected image reference:', err);

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);
+    }
+}