@sequent-org/moodboard 1.4.31 → 1.4.33

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

@@ -146,10 +146,11 @@ export function createTextEditorFinalize(controller, {
             });
         } else {
             if (isNewCreation) {
-                controller.eventBus.emit(Events.Tool.UpdateObjectContent, { objectId, content: value });
-                controller.eventBus.emit(Events.Object.StateChanged, {
+                const oldContent = typeof initialContent === 'string' ? initialContent : '';
+                controller.eventBus.emit(Events.Object.ContentChange, {
                     objectId,
-                    updates: { properties: { content: value } },
+                    oldContent,
+                    newContent: value,
                 });
             } else {
                 const oldContent = typeof initialContent === 'string' ? initialContent : '';
@@ -167,9 +168,11 @@ export function bindTextEditorInteractions(controller, {
     textarea,
     isNewCreation,
     isNote,
+    isShape,
     autoSize,
     updateNoteEditor,
     finalize,
+    listType,
 }) {
     const blurHandler = () => {
         const editorObjectId = controller?.textEditor?.objectId || null;
@@ -190,18 +193,48 @@ export function bindTextEditorInteractions(controller, {
     };
 
     const keydownHandler = (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            finalize(true);
+        const isList = listType && listType !== 'none';
+        if (e.key === 'Enter') {
+            if (isList && !e.shiftKey) {
+                e.preventDefault();
+                const start = textarea.selectionStart;
+                const end = textarea.selectionEnd;
+                const value = textarea.value;
+                const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+                const lineEnd = value.indexOf('\n', start);
+                const curLineEnd = lineEnd === -1 ? value.length : lineEnd;
+                const currentLine = value.slice(lineStart, curLineEnd);
+                if (currentLine.trim() === '' && start === end) {
+                    finalize(true);
+                } else {
+                    textarea.setRangeText('\n', start, end, 'end');
+                    textarea.dispatchEvent(new Event('input', { bubbles: true }));
+                }
+            } else if (isList && e.shiftKey) {
+                e.preventDefault();
+                finalize(true);
+            } else if (!e.shiftKey) {
+                e.preventDefault();
+                finalize(true);
+            }
+            // Shift+Enter в режиме без списка: нативный перевод строки
         } else if (e.key === 'Escape') {
             e.preventDefault();
             finalize(false);
         }
     };
 
-    const inputHandler = !isNote
-        ? autoSize
-        : () => { try { if (updateNoteEditor) updateNoteEditor(); } catch (_) {} };
+    // Записка и фигура имеют фиксированные границы — autoSize по вводу им не нужен.
+    // Для фигуры autoSize раздувал поле до minWBound (120px) и при textAlign:center
+    // уносил текст вправо от фигуры. Поэтому ввод в фигуре границы не меняет.
+    let inputHandler;
+    if (isNote) {
+        inputHandler = () => { try { if (updateNoteEditor) updateNoteEditor(); } catch (_) {} };
+    } else if (isShape) {
+        inputHandler = () => {};
+    } else {
+        inputHandler = autoSize;
+    }
 
     textarea.addEventListener('blur', blurHandler);
     textarea.addEventListener('keydown', keydownHandler);
@@ -292,10 +325,11 @@ export function closeTextEditorFromState(controller, commit) {
         });
     } else {
         if (isNewCreation) {
-            controller.eventBus.emit(Events.Tool.UpdateObjectContent, { objectId, content: value });
-            controller.eventBus.emit(Events.Object.StateChanged, {
+            const oldContent = typeof initialContent === 'string' ? initialContent : '';
+            controller.eventBus.emit(Events.Object.ContentChange, {
                 objectId,
-                updates: { properties: { content: value } },
+                oldContent,
+                newContent: value,
             });
         } else {
             controller.eventBus.emit(Events.Object.ContentChange, {

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

@@ -95,6 +95,7 @@ export function registerNoteEditorSync(controller, { objectId, updateNoteEditor
     const listeners = [
         [Events.UI.ZoomPercent, onZoom],
         [Events.Tool.PanUpdate, onPan],
+        [Events.Viewport.Changed, onPan],
         [Events.Tool.DragUpdate, onDrag],
         [Events.Tool.ResizeUpdate, onResize],
         [Events.Tool.RotateUpdate, onRotate],

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

@@ -51,6 +51,7 @@ export function openTextEditor(object, create = false) {
 
     // Определяем тип объекта
     const isNote = objectType === 'note';
+    const isShape = objectType === 'shape';
 
     // Проверяем, что position существует
     if (!position) {
@@ -156,6 +157,9 @@ export function openTextEditor(object, create = false) {
 
     // Вычисляем межстрочный интервал; подгоняем к реальным значениям HTML-отображения
     let lhInitial = computeTextEditorLineHeightPx(effectiveFontPx);
+    if (typeof properties.lineHeight === 'number') {
+        lhInitial = Math.round(effectiveFontPx * properties.lineHeight);
+    }
     try {
         if (objectId) {
             if (objectType === 'note') {
@@ -207,6 +211,15 @@ export function openTextEditor(object, create = false) {
         effectiveFontPx,
         lineHeightPx: lhInitial,
     });
+    if (properties.textAlign) {
+        textarea.style.textAlign = properties.textAlign;
+    }
+
+    // Shape: текст по центру, textarea покрывает весь bounds фигуры
+    if (isShape) {
+        textarea.style.textAlign = 'center';
+        textarea.placeholder = '';
+    }
 
     wrapper.appendChild(textarea);
     // Убрана зелёная рамка вокруг поля ввода по требованию
@@ -311,6 +324,49 @@ export function openTextEditor(object, create = false) {
             toScreen,
         });
         updateNoteEditor = noteSetup.updateNoteEditor;
+    } else if (isShape) {
+        // Shape: редактор занимает весь bounds фигуры, текст вертикально центрирован
+        const viewResShape = (this.app?.renderer?.resolution) ||
+            (view.width && view.clientWidth ? view.width / view.clientWidth : 1);
+        const worldLayerShape = this.textEditor.world || this.app?.stage;
+        const sShape = worldLayerShape?.scale?.x || 1;
+        const sCssShape = sShape / viewResShape;
+
+        let shapeW = 100, shapeH = 100;
+        if (initialSize) {
+            shapeW = initialSize.width;
+            shapeH = initialSize.height;
+        } else if (objectId) {
+            const sizeData = { objectId, size: null };
+            this.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+            if (sizeData.size) { shapeW = sizeData.size.width; shapeH = sizeData.size.height; }
+        }
+
+        const shapeCssW = Math.max(1, Math.round(shapeW * sCssShape));
+        const shapeCssH = Math.max(1, Math.round(shapeH * sCssShape));
+        // Центрируем каретку по вертикали: padding-top = (высота фигуры - высота одной строки) / 2
+        const oneLinePx = Math.max(1, Math.round(effectiveFontPx * 1.4));
+        const paddingTopShape = Math.max(0, Math.round((shapeCssH - oneLinePx) / 2));
+
+        wrapper.style.left = `${Math.round(screenPos.x)}px`;
+        wrapper.style.top = `${Math.round(screenPos.y)}px`;
+        wrapper.style.width = `${shapeCssW}px`;
+        wrapper.style.height = `${shapeCssH}px`;
+
+        textarea.style.width = `${shapeCssW}px`;
+        textarea.style.height = `${shapeCssH}px`;
+        textarea.style.boxSizing = 'border-box';
+        // display:block убирает baseline-смещение inline-block textarea внутри wrapper'а
+        // (wrapper наследует line-height ~24px от body, из-за чего на сильном отдалении
+        // textarea съезжает вниз от фигуры на фиксированные ~11px независимо от зума).
+        // padding-bottom:0 перебивает CSS .moodboard-text-input (5px), чтобы не раздувать
+        // высоту поля относительно крошечной фигуры.
+        textarea.style.display = 'block';
+        textarea.style.paddingTop = `${paddingTopShape}px`;
+        textarea.style.paddingBottom = '0px';
+
+        this.textEditor._cssLeftPx = Math.round(screenPos.x);
+        this.textEditor._cssTopPx = Math.round(screenPos.y);
     } else {
         const {
             leftPx,
@@ -377,7 +433,7 @@ export function openTextEditor(object, create = false) {
     }
 
     // Если создаём новый текст — длина поля ровно как placeholder
-    if (create && !isNote) {
+    if (create && !isNote && !isShape) {
         // +25% — запас на Caveat vs Arial: при незагруженном Caveat span рендерится в Arial,
         // а Caveat (рукописный шрифт) заметно шире для кириллицы.
         const startWidth = Math.max(1, Math.ceil(measureTextEditorPlaceholderWidth(textarea, 'Напишите что-нибудь') * 1.25));
@@ -391,8 +447,8 @@ export function openTextEditor(object, create = false) {
         minHBound = startHeight;
     }
 
-    // Для записок размеры уже установлены выше, пропускаем эту логику
-    if (!isNote && !create) {
+    // Для записок и фигур размеры уже установлены выше, пропускаем эту логику
+    if (!isNote && !isShape && !create) {
         if (initialWpx) {
             textarea.style.width = `${initialWpx}px`;
             wrapper.style.width = `${initialWpx}px`;
@@ -403,7 +459,7 @@ export function openTextEditor(object, create = false) {
         }
     }
     // Автоподгон
-    const syncRegularTextSizeToObject = !isNote && objectId
+    const syncRegularTextSizeToObject = !isNote && !isShape && objectId
         ? ({ widthPx, heightPx }) => {
             try {
                 const scaleX = (worldLayerRef?.scale?.x) || 1;
@@ -428,8 +484,8 @@ export function openTextEditor(object, create = false) {
         onSizeChange: syncRegularTextSizeToObject,
     });
 
-    // Вызываем autoSize только для обычного текста
-    if (!isNote) {
+    // autoSize только для обычного текста; shape имеет фиксированные bounds фигуры
+    if (!isNote && !isShape) {
         autoSize();
     }
     textarea.focus();
@@ -448,6 +504,7 @@ export function openTextEditor(object, create = false) {
         position,
         properties: { fontSize },
         objectType,
+        listType: properties.listType || 'none',
         _phStyle: styleEl,
         initialContent: content,
         isNewCreation: !!create,
@@ -488,9 +545,11 @@ export function openTextEditor(object, create = false) {
         textarea,
         isNewCreation,
         isNote,
+        isShape,
         autoSize,
         updateNoteEditor,
         finalize,
+        listType: properties.listType || 'none',
     });
 }
 

package/src/ui/CommentPopover.js

@@ -40,6 +40,8 @@ export class CommentPopover {
         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._onViewportChanged = () => this.reposition();
+        this.eventBus.on(Events.Viewport.Changed, this._onViewportChanged);
         this.eventBus.on(Events.Object.Deleted, ({ objectId }) => {
             if (this.currentId && objectId === this.currentId) this.hide();
             // По желанию можно очистить: this.commentsById.delete(objectId);
@@ -48,6 +50,10 @@ export class CommentPopover {
 
     destroy() {
         this.hide();
+        if (this._onViewportChanged && this.eventBus?.off) {
+            this.eventBus.off(Events.Viewport.Changed, this._onViewportChanged);
+            this._onViewportChanged = null;
+        }
         if (this.layer) this.layer.remove();
         this.layer = null;
     }

package/src/ui/CommentsBar.js

@@ -0,0 +1,91 @@
+import { Events } from '../core/events/Events.js';
+
+const ICONS = {
+    eye: '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',
+    eyeOff: '<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/>',
+    messages: '<path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2Z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/>',
+};
+
+function svg(paths) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+}
+
+/**
+ * Нижняя правая панель управления комментариями.
+ * Источник правды для UI-фильтра «показывать решённые»: эмитит
+ * Comment.ResolvedFilterChanged, CommentPinLayer применяет фильтр к пинам.
+ */
+export class CommentsBar {
+    constructor(container, eventBus) {
+        this.container = container;
+        this.eventBus = eventBus;
+        this.element = null;
+        this.filterBtn = null;
+        this.filterIcon = null;
+        this.filterLabel = null;
+        /** true — решённые комментарии видны (по умолчанию) */
+        this.showResolved = true;
+    }
+
+    attach() {
+        this.element = document.createElement('div');
+        this.element.className = 'moodboard-commentsbar';
+
+        this.filterBtn = document.createElement('button');
+        this.filterBtn.type = 'button';
+        this.filterBtn.className = 'moodboard-commentsbar__filter';
+        this.filterIcon = document.createElement('span');
+        this.filterIcon.className = 'moodboard-commentsbar__icon';
+        this.filterLabel = document.createElement('span');
+        this.filterLabel.className = 'moodboard-commentsbar__label';
+        this.filterBtn.appendChild(this.filterIcon);
+        this.filterBtn.appendChild(this.filterLabel);
+        this.filterBtn.addEventListener('click', () => this._toggleResolved());
+
+        const divider = document.createElement('span');
+        divider.className = 'moodboard-commentsbar__divider';
+
+        this.listBtn = document.createElement('button');
+        this.listBtn.type = 'button';
+        this.listBtn.className = 'moodboard-commentsbar__button';
+        this.listBtn.title = 'Все комментарии';
+        this.listBtn.setAttribute('aria-label', 'Все комментарии');
+        this.listBtn.innerHTML = svg(ICONS.messages);
+        this.listBtn.addEventListener('click', () => {
+            this.eventBus.emit(Events.Comment.ListOpened, {});
+        });
+
+        this.element.appendChild(this.filterBtn);
+        this.element.appendChild(divider);
+        this.element.appendChild(this.listBtn);
+        this.container.appendChild(this.element);
+
+        this._syncFilter();
+    }
+
+    _toggleResolved() {
+        this.showResolved = !this.showResolved;
+        this._syncFilter();
+        this.eventBus.emit(Events.Comment.ResolvedFilterChanged, {
+            showResolved: this.showResolved,
+        });
+    }
+
+    _syncFilter() {
+        if (!this.filterBtn) return;
+        const label = this.showResolved ? 'Скрыть решённые' : 'Показать все';
+        this.filterIcon.innerHTML = svg(this.showResolved ? ICONS.eyeOff : ICONS.eye);
+        this.filterLabel.textContent = label;
+        this.filterBtn.title = label;
+        this.filterBtn.setAttribute('aria-pressed', String(!this.showResolved));
+    }
+
+    destroy() {
+        if (this.element) this.element.remove();
+        this.element = null;
+        this.filterBtn = null;
+        this.filterIcon = null;
+        this.filterLabel = null;
+        this.listBtn = null;
+    }
+}

package/src/ui/ConnectorPropertiesPanel.js

@@ -0,0 +1,150 @@
+import { Events } from '../core/events/Events.js';
+import {
+    createConnectorPropertiesPanelState,
+    clearConnectorPropertiesPanelState,
+} from './connector-properties/ConnectorPropertiesPanelState.js';
+import { createConnectorPropertiesPanelDom, updateConnectorPanelControls, updateLabelRow } from './connector-properties/ConnectorPropertiesPanelRenderer.js';
+import { bindConnectorPropertiesPanelControls, unbindConnectorPropertiesPanelControls } from './connector-properties/ConnectorPropertiesPanelBindings.js';
+import { attachConnectorPropertiesPanelEventBridge, detachConnectorPropertiesPanelEventBridge } from './connector-properties/ConnectorPropertiesPanelEventBridge.js';
+import {
+    getSelectedConnectorId,
+    getConnectorData,
+    getConnectorMidpointScreen,
+    getConnectorStyle,
+    buildStyleUpdate,
+} from './connector-properties/ConnectorPropertiesPanelMapper.js';
+
+/**
+ * Панель свойств коннектора.
+ * Всплывает над серединой выделенной линии.
+ */
+export class ConnectorPropertiesPanel {
+    constructor(eventBus, container, core) {
+        Object.assign(this, createConnectorPropertiesPanelState());
+        this.eventBus  = eventBus;
+        this.container = container;
+        this.core      = core;
+
+        createConnectorPropertiesPanelDom(this);
+        container.appendChild(this.panel);
+
+        bindConnectorPropertiesPanelControls(this);
+        attachConnectorPropertiesPanelEventBridge(this);
+    }
+
+    // ── Публичное API ────────────────────────────────────────────────────────
+
+    updateFromSelection() {
+        const id = getSelectedConnectorId(this.core);
+        if (!id) { this.hide(); return; }
+
+        if (this.currentId === id && this.panel.style.display !== 'none') {
+            this.reposition();
+            return;
+        }
+
+        this.currentId = id;
+        this.panel.style.display = 'flex';
+        this._updateControlsFromObject();
+        this.reposition();
+    }
+
+    hide() {
+        this.currentId = null;
+        this.panel.style.display = 'none';
+        this._closeDropdowns();
+    }
+
+    reposition() {
+        if (!this.panel || !this.currentId || this.panel.style.display === 'none') return;
+
+        // Проверяем, что коннектор всё ещё выделен
+        const stillSelected = getSelectedConnectorId(this.core) === this.currentId;
+        if (!stillSelected) { this.hide(); return; }
+
+        const mid = getConnectorMidpointScreen(this.core, this.currentId);
+        if (!mid) return;
+
+        const panelW = this.panel.offsetWidth || 480;
+        const panelH = this.panel.offsetHeight || 40;
+        const GAP    = 18;
+
+        let px = mid.x - Math.round(panelW / 2);
+        let py = mid.y - panelH - GAP;
+
+        // Если уходит вверх за контейнер — переносим ниже середины
+        if (py < 0) py = mid.y + GAP;
+
+        // Clamp по ширине контейнера
+        const cw = this.container.offsetWidth || window.innerWidth;
+        px = Math.max(8, Math.min(px, cw - panelW - 8));
+        py = Math.max(8, py);
+
+        this.panel.style.left = `${Math.round(px)}px`;
+        this.panel.style.top  = `${Math.round(py)}px`;
+    }
+
+    destroy() {
+        detachConnectorPropertiesPanelEventBridge(this);
+        unbindConnectorPropertiesPanelControls(this);
+
+        if (this.panel?.parentNode) {
+            this.panel.parentNode.removeChild(this.panel);
+        }
+        clearConnectorPropertiesPanelState(this);
+        this.panel = null;
+        this.eventBus = null;
+        this.container = null;
+        this.core = null;
+    }
+
+    // ── Внутренние методы ────────────────────────────────────────────────────
+
+    _getConnector() {
+        return getConnectorData(this.core, this.currentId);
+    }
+
+    _updateControlsFromObject() {
+        if (!this.currentId) return;
+        const connector = this._getConnector();
+        if (!connector) return;
+        const style = getConnectorStyle(connector);
+        updateConnectorPanelControls(this, style);
+        updateLabelRow(this, connector);
+
+        // Синхронизируем кнопку замка
+        if (this._lockBtn) {
+            const locked = connector.properties?.locked ?? false;
+            this._lockBtn.textContent = locked ? '🔒' : '🔓';
+        }
+    }
+
+    /**
+     * Эмитит StateChanged с частичным style-обновлением.
+     * Вызывается из Bindings.
+     */
+    _emitStyle(partialStyle) {
+        if (!this.currentId) return;
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: buildStyleUpdate(partialStyle),
+        });
+    }
+
+    /**
+     * Эмитит StateChanged с полным объектом label (или null).
+     * Вызывается из Bindings при изменении цвета/размера метки.
+     */
+    _emitLabel(label) {
+        if (!this.currentId) return;
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates:  { properties: { style: { label } } },
+        });
+    }
+
+    _closeDropdowns() {
+        if (this.strokeColorDropdown) this.strokeColorDropdown.style.display = 'none';
+        if (this._labelColorDropdown) this._labelColorDropdown.style.display = 'none';
+    }
+}

package/src/ui/ContextMenu.js

@@ -13,6 +13,8 @@ export class ContextMenu {
         // Флаг состояния объекта
         this.destroyed = false;
 
+        this.enableComments = false;
+
         this.createElement();
         this.attachEvents();
     }
@@ -303,6 +305,25 @@ export class ContextMenu {
             });
             list.appendChild(itemImg);
 
+            // Добавить комментарий (только если фича включена)
+            if (this.enableComments) {
+                const commentItem = document.createElement('div');
+                commentItem.className = 'moodboard-contextmenu__item';
+                const commentIcon = document.createElement('span');
+                commentIcon.className = 'moodboard-contextmenu__item-icon';
+                commentIcon.textContent = '💬';
+                const commentLabel = document.createElement('span');
+                commentLabel.className = 'moodboard-contextmenu__label';
+                commentLabel.textContent = 'Добавить комментарий';
+                commentItem.appendChild(commentIcon);
+                commentItem.appendChild(commentLabel);
+                commentItem.addEventListener('click', () => {
+                    this.hide();
+                    this.eventBus.emit(Events.Comment.OpenDraftAt, { screenX: this.lastX, screenY: this.lastY });
+                });
+                list.appendChild(commentItem);
+            }
+
             // Разделитель
             const divider = document.createElement('div');
             divider.className = 'moodboard-contextmenu__divider';
@@ -342,6 +363,10 @@ export class ContextMenu {
         this.element.innerHTML = '<div style="padding:8px 12px; color:#888;">(пусто)</div>';
     }
 
+    setEnableComments(val) {
+        this.enableComments = !!val;
+    }
+
     /**
      * Уничтожение контекстного меню
      */