@sequent-org/moodboard 1.2.42 → 1.2.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.2.42",
+  "version": "1.2.44",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/tools/object-tools/SelectTool.js

@@ -473,6 +473,10 @@ export class SelectTool extends BaseTool {
                     type: 'text', 
                     position: posData.position,
                     properties: { content: textContent },
+                    caretClick: {
+                        clientX: event?.originalEvent?.clientX,
+                        clientY: event?.originalEvent?.clientY
+                    },
                     create: false 
                 });
                 return;
@@ -1990,7 +1994,7 @@ export class SelectTool extends BaseTool {
             ];
         } else {
             // Для обычного текста используем стандартное позиционирование
-            // Динамически компенсируем внутренние отступы textarea, чтобы каретка оказалась ровно в точке клика
+            // Динамически компенсируем внутренние отступы textarea для точного совпадения со статичным текстом
             let padTop = 0;
             let padLeft = 0;
             let lineHeightPx = 0;
@@ -2011,8 +2015,27 @@ export class SelectTool extends BaseTool {
                     if (r && isFinite(r.height)) lineHeightPx = r.height;
                 } catch (_) {}
             }
-            const leftPx = create ? Math.round(screenPos.x - padLeft) : Math.round(screenPos.x);
-            const topPx = create ? Math.round(screenPos.y - padTop - (lineHeightPx / 2)) : Math.round(screenPos.y);
+
+            // Базовая точка позиционирования: для редактирования берём точные координаты статичного HTML-текста,
+            // для создания — используем рассчитанные screenPos
+            let baseLeftPx = screenPos.x;
+            let baseTopPx = screenPos.y;
+            try {
+                if (!create && objectId && typeof window !== 'undefined' && window.moodboardHtmlTextLayer) {
+                    const el = window.moodboardHtmlTextLayer.idToEl.get(objectId);
+                    if (el) {
+                        const cssLeft = parseFloat(el.style.left || 'NaN');
+                        const cssTop = parseFloat(el.style.top || 'NaN');
+                        if (isFinite(cssLeft)) baseLeftPx = cssLeft;
+                        if (isFinite(cssTop)) baseTopPx = cssTop;
+                    }
+                }
+            } catch (_) {}
+
+            const leftPx = Math.round(baseLeftPx - padLeft);
+            const topPx = create
+                ? Math.round(baseTopPx - padTop - (lineHeightPx / 2)) // по клику совмещаем центр строки с точкой клика
+                : Math.round(baseTopPx - padTop); // при редактировании совмещаем верх контента
             wrapper.style.left = `${leftPx}px`;
             wrapper.style.top = `${topPx}px`;
             // Сохраняем CSS-позицию редактора для точной синхронизации при закрытии
@@ -2023,6 +2046,7 @@ export class SelectTool extends BaseTool {
                 console.log('🧭 Text input', {
                     input: { left: leftPx, top: topPx },
                     screenPos,
+                    baseFromStatic: (!create && objectId) ? { left: baseLeftPx, top: baseTopPx } : null,
                     padding: { top: padTop, left: padLeft },
                     lineHeightPx,
                     caretCenterY: create ? (topPx + padTop + (lineHeightPx / 2)) : topPx,
@@ -2160,6 +2184,59 @@ export class SelectTool extends BaseTool {
         document.head.appendChild(styleEl);
         this.textEditor = { active: true, objectId, textarea, wrapper, world: this.textEditor.world, position, properties: { fontSize }, objectType, _phStyle: styleEl };
 
+        // Если переходим в редактирование существующего текста по двойному клику,
+        // устанавливаем каретку по координате клика между буквами
+        try {
+            const click = (object && object.caretClick) ? object.caretClick : null;
+            if (!create && objectId && click && typeof window !== 'undefined') {
+                setTimeout(() => {
+                    try {
+                        const el = window.moodboardHtmlTextLayer ? window.moodboardHtmlTextLayer.idToEl.get(objectId) : null;
+                        const fullText = (typeof textarea.value === 'string') ? textarea.value : '';
+                        if (!el || !fullText || !el.firstChild) return;
+                        const textNode = el.firstChild;
+                        const len = textNode.textContent.length;
+                        if (len === 0) {
+                            textarea.selectionStart = textarea.selectionEnd = 0;
+                            return;
+                        }
+                        const doc = el.ownerDocument || document;
+                        let bestIdx = 0;
+                        let bestDist = Infinity;
+                        for (let i = 0; i <= len; i++) {
+                            const range = doc.createRange();
+                            range.setStart(textNode, i);
+                            range.setEnd(textNode, i);
+                            const rects = range.getClientRects();
+                            const rect = rects && rects.length > 0 ? rects[0] : range.getBoundingClientRect();
+                            if (rect && isFinite(rect.left) && isFinite(rect.top)) {
+                                if (click.clientX >= rect.left && click.clientX <= rect.right &&
+                                    click.clientY >= rect.top && click.clientY <= rect.bottom) {
+                                    bestIdx = i;
+                                    bestDist = 0;
+                                    break;
+                                }
+                                const cx = Math.max(rect.left, Math.min(click.clientX, rect.right));
+                                const cy = Math.max(rect.top, Math.min(click.clientY, rect.bottom));
+                                const dx = click.clientX - cx;
+                                const dy = click.clientY - cy;
+                                const d2 = dx * dx + dy * dy;
+                                if (d2 < bestDist) {
+                                    bestDist = d2;
+                                    bestIdx = i;
+                                }
+                            }
+                        }
+                        const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+                        const caret = clamp(bestIdx, 0, fullText.length);
+                        textarea.selectionStart = textarea.selectionEnd = caret;
+                        if (typeof textarea.scrollTop === 'number') textarea.scrollTop = 0;
+                        console.log('🧭 Text caret set', { objectId, caret, len: fullText.length });
+                    } catch (_) {}
+                }, 0);
+            }
+        } catch (_) {}
+
         // Если редактируем записку — скрываем PIXI-текст записки (чтобы не было дублирования)
         if (objectType === 'note' && objectId) {
             try {