@sequent-org/moodboard 1.4.56 → 1.4.58

package/src/ui/TextPropertiesPanel.js

@@ -3,6 +3,7 @@ import {
     bindTextPropertiesPanelControls,
     unbindTextPropertiesPanelControls,
 } from './text-properties/TextPropertiesPanelBindings.js';
+import { updateLinkButtonState } from './text-properties/TextLinkControl.js';
 import {
     attachTextPropertiesPanelEventBridge,
     detachTextPropertiesPanelEventBridge,
@@ -26,10 +27,13 @@ import {
     createTextPropertiesPanelRenderer,
     hideBgColorDropdown,
     hideColorDropdown,
+    hideHighlightDropdown,
     toggleBgColorDropdown,
     toggleColorDropdown,
+    toggleHighlightDropdown,
     updateCurrentBgColorButton,
     updateCurrentColorButton,
+    updateCurrentHighlightButton,
 } from './text-properties/TextPropertiesPanelRenderer.js';
 import {
     clearTextPropertiesPanelState,
@@ -57,7 +61,7 @@ export class TextPropertiesPanel {
             position: 'absolute',
             inset: '0',
             pointerEvents: 'none',
-            zIndex: 20,
+            zIndex: 10050,
         });
         this.container.appendChild(this.layer);
 
@@ -107,8 +111,9 @@ export class TextPropertiesPanel {
         }
 
         this.panel.style.display = 'flex';
-        this.reposition();
         this._updateControlsFromObject();
+        this._updateLockUI();
+        this.reposition();
     }
 
     hide() {
@@ -116,9 +121,12 @@ export class TextPropertiesPanel {
 
         if (this.panel) {
             this.panel.style.display = 'none';
+            this.panel.querySelectorAll('.tpp-more-dropdown.is-open').forEach((el) => el.classList.remove('is-open'));
+            this.panel.querySelectorAll('.ipp-btn.is-active').forEach((el) => el.classList.remove('is-active'));
         }
 
         this._hideColorDropdown();
+        this._hideHighlightDropdown();
         this._hideBgColorDropdown();
         if (this._docMouseDownAttached) {
             document.removeEventListener('mousedown', this._onDocMouseDown, true);
@@ -144,6 +152,24 @@ export class TextPropertiesPanel {
         updateCurrentColorButton(this, color);
     }
 
+    _toggleHighlightDropdown() {
+        toggleHighlightDropdown(this);
+    }
+
+    _hideHighlightDropdown() {
+        hideHighlightDropdown(this);
+    }
+
+    _selectHighlightColor(color) {
+        this._changeHighlightColor(color);
+        this._updateCurrentHighlightButton(color);
+        this._hideHighlightDropdown();
+    }
+
+    _updateCurrentHighlightButton(color) {
+        updateCurrentHighlightButton(this, color);
+    }
+
     _toggleBgColorDropdown() {
         toggleBgColorDropdown(this);
     }
@@ -188,11 +214,78 @@ export class TextPropertiesPanel {
         this._updateTextAppearance(this.currentId, { fontSize });
     }
 
+    _applyFormatToSelection(formatType, value) {
+        const activeEditor = document.querySelector('.moodboard-text-input');
+        if (!activeEditor || activeEditor.selectionStart === activeEditor.selectionEnd) {
+            return false;
+        }
+
+        const start = activeEditor.selectionStart;
+        const end = activeEditor.selectionEnd;
+        const text = activeEditor.value;
+        const selected = text.substring(start, end);
+        const before = text.substring(0, start);
+        const after = text.substring(end);
+        
+        let newSelected = selected;
+        
+        const toggleWrap = (str, prefix, suffix = prefix) => {
+            if (str.startsWith(prefix) && str.endsWith(suffix)) {
+                return str.substring(prefix.length, str.length - suffix.length);
+            }
+            return `${prefix}${str}${suffix}`;
+        };
+        
+        switch (formatType) {
+            case 'color': {
+                const cleanSelected = selected.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, '');
+                newSelected = `<span style="color: ${value}">${cleanSelected}</span>`;
+                break;
+            }
+            case 'bold':
+                newSelected = toggleWrap(selected, '**');
+                break;
+            case 'italic':
+                newSelected = toggleWrap(selected, '*');
+                break;
+            case 'underline':
+                newSelected = toggleWrap(selected, '<u>', '</u>');
+                break;
+            case 'strikethrough':
+                newSelected = toggleWrap(selected, '~~');
+                break;
+        }
+        
+        activeEditor.value = before + newSelected + after;
+        
+        // Restore selection
+        activeEditor.selectionStart = start;
+        activeEditor.selectionEnd = start + newSelected.length;
+        
+        // Force markdown mode so HTML/MD tags are rendered
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: buildMarkdownUpdate(true),
+        });
+        
+        // Update the object's content
+        this.eventBus.emit(Events.Tool.UpdateObjectContent, {
+            objectId: this.currentId,
+            content: activeEditor.value
+        });
+        
+        return true;
+    }
+
     _changeTextColor(color) {
         if (!this.currentId) {
             return;
         }
 
+        if (this._applyFormatToSelection('color', color)) {
+            return;
+        }
+
         this.eventBus.emit(Events.Object.StateChanged, {
             objectId: this.currentId,
             updates: buildTextColorUpdate(color),
@@ -214,11 +307,55 @@ export class TextPropertiesPanel {
         this._updateTextAppearance(this.currentId, { backgroundColor });
     }
 
+    _changeHighlightColor(highlightColor) {
+        if (!this.currentId) {
+            return;
+        }
+
+        const props = getObjectProperties(this.eventBus, this.currentId);
+        
+        // Получаем актуальный контент (из живого редактора, если он есть)
+        let contentLength = 0;
+        const editor = document.querySelector('.moodboard-text-input');
+        if (editor) {
+            contentLength = editor.value.length;
+        } else {
+            contentLength = (props?.content ?? '').length;
+        }
+
+        const sel = this._savedTextSelection;
+        // С выделением — диапазон выделения; без выделения — весь текст (как у ссылок),
+        // box-фон всего поля не используется.
+        const start = (sel && sel.end > sel.start) ? sel.start : 0;
+        const end = (sel && sel.end > sel.start) ? sel.end : contentLength;
+
+        this._addHighlight(highlightColor, start, end, this.currentId);
+        this._savedTextSelection = null;
+    }
+
+    /**
+     * Снимок выделения активного текстового редактора. Вызывается на mousedown по
+     * UI подсветки ДО того, как фокус уйдёт из textarea (особенно перед нативным
+     * color-input, который гарантированно сбрасывает выделение).
+     */
+    _snapshotTextSelection() {
+        const editor = document.querySelector('.moodboard-text-input');
+        if (editor && typeof editor.selectionStart === 'number' && typeof editor.selectionEnd === 'number') {
+            this._savedTextSelection = { start: editor.selectionStart, end: editor.selectionEnd };
+        } else {
+            this._savedTextSelection = null;
+        }
+    }
+
     _toggleFormat(prop) {
         if (!this.currentId) {
             return;
         }
 
+        if (this._applyFormatToSelection(prop, null)) {
+            return;
+        }
+
         const properties = getObjectProperties(this.eventBus, this.currentId);
         const newValue = !(properties ? Boolean(properties[prop]) : false);
 
@@ -288,6 +425,88 @@ export class TextPropertiesPanel {
         this._updateTextAppearance(this.currentId, { markdown });
     }
 
+    /**
+     * Добавляет web-ссылку к диапазону текста (plain-режим).
+     * При включённом MD-режиме ничего не делает (кнопка должна быть disabled).
+     * @param {string} url — нормализованный URL
+     * @param {number} start — индекс начала диапазона (включительно)
+     * @param {number} end — индекс конца диапазона (не включительно)
+     * @param {string} [objectId] — id объекта; если не задан, используется this.currentId.
+     *   Нужен потому, что во время ввода URL фокус уходит в input и выделение объекта
+     *   может сброситься (this.currentId → null).
+     */
+    _addLink(url, start, end, objectId) {
+        const targetId = objectId || this.currentId;
+        if (!targetId || !url) return;
+        const props = getObjectProperties(this.eventBus, targetId);
+        if (props?.markdown === true) return;
+
+        const content = props?.content ?? '';
+        const safeEnd = Math.min(end, content.length);
+        const safeStart = Math.min(start, safeEnd);
+        if (safeStart >= safeEnd) return;
+
+        const oldLinks = Array.isArray(props?.links) ? props.links : [];
+        // Удаляем ссылки, пересекающиеся с новым диапазоном
+        const filtered = oldLinks.filter(l => l.end <= safeStart || l.start >= safeEnd);
+        const newLinks = [...filtered, { start: safeStart, end: safeEnd, url }]
+            .sort((a, b) => a.start - b.start);
+
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: targetId,
+            updates: { properties: { links: newLinks } },
+        });
+        this._updateTextAppearance(targetId, { links: newLinks });
+    }
+
+    /**
+     * Добавляет/убирает цветовой диапазон подсветки в properties.highlights.
+     * Не вставляет теги в текст — textarea остаётся чистой.
+     * @param {string} color — CSS-цвет или 'transparent' (удалить подсветку в диапазоне)
+     * @param {number} start — начало диапазона (selectionStart)
+     * @param {number} end — конец диапазона (selectionEnd)
+     * @param {string} [objectId] — если не задан, используется this.currentId
+     */
+    _addHighlight(color, start, end, objectId) {
+        const targetId = objectId || this.currentId;
+        if (!targetId) return;
+        const props = getObjectProperties(this.eventBus, targetId);
+
+        let contentLength = 0;
+        const editor = document.querySelector('.moodboard-text-input');
+        if (editor) {
+            contentLength = editor.value.length;
+        } else {
+            contentLength = (props?.content ?? '').length;
+        }
+
+        const safeEnd = Math.min(end, contentLength);
+        const safeStart = Math.min(start, safeEnd);
+        if (safeStart >= safeEnd) return;
+
+        const oldHighlights = Array.isArray(props?.highlights) ? props.highlights : [];
+        const filtered = oldHighlights.filter(h => h.end <= safeStart || h.start >= safeEnd);
+        const newHighlights = color === 'transparent'
+            ? filtered
+            : [...filtered, { start: safeStart, end: safeEnd, color }]
+                .sort((a, b) => a.start - b.start);
+
+        // Если редактор открыт, синхронизируем его текущее значение в state вместе с
+        // подсветкой. Иначе при коммите UpdateContentCommand._applyContent вычисляет
+        // _adjustHighlights(oldText = stale initialContent, newText = editor.value) и
+        // сдвигает/удаляет только что добавленные диапазоны.
+        const propertiesUpdate = { highlights: newHighlights };
+        if (editor) {
+            propertiesUpdate.content = editor.value;
+        }
+
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: targetId,
+            updates: { properties: propertiesUpdate },
+        });
+        this._updateTextAppearance(targetId, { highlights: newHighlights });
+    }
+
     _updateTextAppearance(objectId, properties) {
         applyTextAppearanceToDom(objectId, properties);
         syncPixiTextProperties(this.eventBus, objectId, properties);
@@ -310,9 +529,11 @@ export class TextPropertiesPanel {
         this.fontSelect.value = values.fontFamily;
         this.fontSizeSelect.value = values.fontSize;
         this._updateCurrentColorButton(values.color);
+        this._updateCurrentHighlightButton(values.highlightColor);
         this._updateCurrentBgColorButton(values.backgroundColor);
         if (this.markdownToggle) {
             this.markdownToggle.checked = values.markdown;
+            updateLinkButtonState(this, values.markdown);
         }
 
         if (this.boldBtn) this.boldBtn.classList.toggle('is-active', values.bold);
@@ -383,4 +604,86 @@ export class TextPropertiesPanel {
         this.container.getBoundingClientRect();
         this.hide();
     }
+
+    _isLocked() {
+        if (!this.currentId) return false;
+        const objects = this.core?.state?.getObjects ? this.core.state.getObjects() : [];
+        const obj = objects.find((o) => o.id === this.currentId);
+        return !!(obj?.properties?.locked);
+    }
+
+    _toggleLocked() {
+        if (!this.currentId) return;
+        const newLocked = !this._isLocked();
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: { properties: { locked: newLocked } },
+        });
+        this._updateLockUI();
+        this.reposition();
+    }
+
+    _updateLockUI() {
+        if (!this._tppBtnLock) return;
+        const locked = this._isLocked();
+
+        this._tppBtnLock.innerHTML = locked ? this._tppLockIcon : this._tppUnlockIcon;
+        this._tppBtnLock.title = locked ? 'Разблокировать' : 'Заблокировать';
+
+        if (Array.isArray(this._lockableEls)) {
+            this._lockableEls.forEach((el) => {
+                if (el) el.style.display = locked ? 'none' : '';
+            });
+        }
+
+        if (this._moreLockLabel) {
+            this._moreLockLabel.textContent = locked ? 'Разблокировать' : 'Заблокировать';
+        }
+
+        if (this.panel) {
+            this.panel.classList.toggle('is-locked', locked);
+        }
+    }
+
+    _duplicateText() {
+        if (!this.currentId) return;
+
+        const posData = { objectId: this.currentId, position: null };
+        const sizeData = { objectId: this.currentId, size: null };
+        this.eventBus.emit(Events.Tool.GetObjectPosition, posData);
+        this.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+
+        if (!posData.position || !sizeData.size) return;
+
+        let w = sizeData.size.width;
+        if (typeof w !== 'number' || isNaN(w)) {
+            const pixiObj = this.core?.pixi?.objects?.get(this.currentId);
+            w = pixiObj ? pixiObj.width : 160;
+        }
+
+        const originalId = this.currentId;
+        const newPos = {
+            x: posData.position.x + (w || 160) + 14,
+            y: posData.position.y,
+        };
+
+        const onReady = (data) => {
+            if (!data || data.originalId !== originalId) return;
+            this.eventBus.off(Events.Tool.DuplicateReady, onReady);
+            this._selectObject(data.newId);
+        };
+        this.eventBus.on(Events.Tool.DuplicateReady, onReady);
+
+        this.eventBus.emit(Events.Tool.DuplicateRequest, { originalId, position: newPos });
+    }
+
+    _selectObject(objectId) {
+        if (!objectId) return;
+        const selectTool = this.core?.selectTool;
+        if (!selectTool || typeof selectTool.setSelection !== 'function') return;
+        selectTool.setSelection([objectId]);
+        if (typeof selectTool.updateResizeHandles === 'function') {
+            selectTool.updateResizeHandles();
+        }
+    }
 }

package/src/ui/handles/HandlesDomRenderer.js

@@ -1218,6 +1218,8 @@ export class HandlesDomRenderer {
         this.host.layer.innerHTML = '';
         const box = document.createElement('div');
         box.className = 'mb-handles-box';
+        box.id = `mb-handles-box-${id}`;
+        box.dataset.objectId = id;
 
         let rotation = options.rotation ?? 0;
         if (id !== '__group__') {

package/src/ui/handles/HandlesInteractionController.js

@@ -500,7 +500,17 @@ export class HandlesInteractionController {
             isNoteTarget = (mbType === 'note');
         }
 
+        let _edgeHasMoved = false;
+        const EDGE_DRAG_THRESHOLD = 4;
+
         const onMove = (ev) => {
+            if (!_edgeHasMoved) {
+                const dx = ev.clientX - startMouse.x;
+                const dy = ev.clientY - startMouse.y;
+                if (Math.hypot(dx, dy) > EDGE_DRAG_THRESHOLD) {
+                    _edgeHasMoved = true;
+                }
+            }
             const maintainAspectRatio = !!ev.shiftKey;
             if (isGroup && maintainAspectRatio !== previousMaintainAspectRatio) {
                 startCSS = this._readBoxCss(box);
@@ -657,6 +667,36 @@ export class HandlesInteractionController {
         const onUp = () => {
             document.removeEventListener('pointermove', onMove);
             document.removeEventListener('pointerup', onUp);
+
+            // Клик по рамке без перетаскивания на текстовом объекте → редактирование
+            if (!_edgeHasMoved && isTextTarget && !isGroup) {
+                const posData = { objectId: id, position: null };
+                this.host.eventBus.emit(Events.Tool.GetObjectPosition, posData);
+                const _pixiReq = { objectId: id, pixiObject: null };
+                this.host.eventBus.emit(Events.Tool.GetObjectPixi, _pixiReq);
+                const _textProps = _pixiReq.pixiObject?._mb?.properties || {};
+                this.host.eventBus.emit(Events.Tool.ObjectEdit, {
+                    id,
+                    type: 'text',
+                    position: posData.position,
+                    properties: {
+                        ..._textProps,
+                        content: _textProps.content || '',
+                    },
+                    caretClick: { clientX: e.clientX, clientY: e.clientY },
+                    create: false,
+                });
+                // Сбрасываем состояние resize без создания команды в истории
+                this.host.eventBus.emit(Events.Tool.ResizeEnd, {
+                    object: id,
+                    oldSize: { width: startWorld.width, height: startWorld.height },
+                    newSize: { width: startWorld.width, height: startWorld.height },
+                    oldPosition: { x: startWorld.x, y: startWorld.y },
+                    newPosition: { x: startWorld.x, y: startWorld.y },
+                });
+                return;
+            }
+
             const endCSS = {
                 left: parseFloat(box.style.left),
                 top: parseFloat(box.style.top),