@sequent-org/moodboard 1.4.30 → 1.4.31

package/src/tools/object-tools/connector/connectorGesture.js

@@ -0,0 +1,108 @@
+import * as PIXI from 'pixi.js';
+import { Events } from '../../../core/events/Events.js';
+
+/**
+ * Переиспользуемые хелперы жеста коннектора.
+ * Все функции принимают eventBus и данные явными аргументами — без this.
+ */
+
+/**
+ * Возвращает world-точку терминала.
+ * Свободный терминал: terminal.point напрямую.
+ * Привязанный: top-left объекта + anchor * size (CONNECTORS.md раздел 3).
+ */
+export function terminalWorldPoint(eventBus, terminal) {
+    if (!terminal) return { x: 0, y: 0 };
+    if (terminal.point) return terminal.point;
+
+    const posData  = { objectId: terminal.boundId, position: null };
+    const sizeData = { objectId: terminal.boundId, size: null };
+    eventBus.emit(Events.Tool.GetObjectPosition, posData);
+    eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+
+    const pos  = posData.position;
+    const size = sizeData.size;
+    if (pos && size) {
+        return {
+            x: pos.x + (terminal.anchor?.x ?? 0.5) * (size.width  || 0),
+            y: pos.y + (terminal.anchor?.y ?? 0.5) * (size.height || 0),
+        };
+    }
+    return { x: 0, y: 0 };
+}
+
+/**
+ * Нормализованный якорь по позиции клика внутри bbox объекта.
+ * Если объект не найден — возвращает центр { x:0.5, y:0.5 }.
+ */
+export function computeAnchor(eventBus, objectId, worldPt) {
+    const posData  = { objectId, position: null };
+    const sizeData = { objectId, size: null };
+    eventBus.emit(Events.Tool.GetObjectPosition, posData);
+    eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+
+    const pos  = posData.position;
+    const size = sizeData.size;
+    if (pos && size && size.width > 0 && size.height > 0) {
+        return {
+            x: Math.max(0, Math.min(1, (worldPt.x - pos.x) / size.width)),
+            y: Math.max(0, Math.min(1, (worldPt.y - pos.y) / size.height)),
+        };
+    }
+    return { x: 0.5, y: 0.5 };
+}
+
+/**
+ * Рисует превью линии со стрелкой в PIXI-графику (PIXI 7 API).
+ * graphics — PIXI.Graphics, уже добавленный в worldLayer.
+ */
+export function drawPreview(graphics, fromWorldPt, toWorldPt) {
+    graphics.clear();
+
+    graphics.lineStyle({ width: 2, color: 0x2563EB, alpha: 0.7, cap: 'round' });
+    graphics.moveTo(fromWorldPt.x, fromWorldPt.y);
+    graphics.lineTo(toWorldPt.x, toWorldPt.y);
+
+    const dx = toWorldPt.x - fromWorldPt.x;
+    const dy = toWorldPt.y - fromWorldPt.y;
+    const len = Math.hypot(dx, dy);
+    if (len > 10) {
+        const ux = dx / len;
+        const uy = dy / len;
+        const aLen = 10;
+        const aAng = 0.4;
+        graphics.beginFill(0x2563EB, 0.7);
+        graphics.drawPolygon([
+            toWorldPt.x, toWorldPt.y,
+            toWorldPt.x - aLen * (ux * Math.cos(aAng)  - uy * Math.sin(aAng)),
+            toWorldPt.y - aLen * (uy * Math.cos(aAng)  + ux * Math.sin(aAng)),
+            toWorldPt.x - aLen * (ux * Math.cos(-aAng) - uy * Math.sin(-aAng)),
+            toWorldPt.y - aLen * (uy * Math.cos(-aAng) + ux * Math.sin(-aAng)),
+        ]);
+        graphics.endFill();
+    }
+}
+
+/**
+ * Создаёт объект коннектора через core.createObject с дефолтным стилем.
+ * position — top-left от min(startPt, endPt).
+ */
+export function createConnectorFromTerminals(core, eventBus, sourceTerminal, endTerminal) {
+    const startPt = terminalWorldPoint(eventBus, sourceTerminal);
+    const endPt   = terminalWorldPoint(eventBus, endTerminal);
+    const position = {
+        x: Math.min(startPt.x, endPt.x),
+        y: Math.min(startPt.y, endPt.y),
+    };
+    core.createObject('connector', position, {
+        start: sourceTerminal,
+        end: endTerminal,
+        style: {
+            stroke: 0x2563EB,
+            width: 2,
+            dash: false,
+            head: { start: false, end: true },
+            route: 'straight',
+        },
+    });
+}

package/src/tools/object-tools/placement/GhostController.js

@@ -431,7 +431,7 @@ export class GhostController {
         const kind = host.pending.properties?.kind || 'square';
         const width = 100;
         const height = 100;
-        const fillColor = 0x3b82f6;
+        const fillColor = 0xffffff;
         const cornerRadius = host.pending.properties?.cornerRadius || 10;
 
         const shapeGraphics = new PIXI.Graphics();
@@ -523,9 +523,9 @@ export class GhostController {
         const fillAlpha = (typeof host.pending.properties?.fillAlpha === 'number')
             ? host.pending.properties.fillAlpha
             : 0.25;
-        const strokeWidth = (typeof host.pending.properties?.strokeWidth === 'number')
-            ? host.pending.properties.strokeWidth
-            : 1;
+        // Толщина обводки согласована с MindmapObject и ветками: 3 экранных пикселя.
+        const worldScale = Math.max(0.01, host.world?.scale?.x || 1);
+        const strokeWidth = 3 / worldScale;
         const fontSize = Math.max(1, Math.round(host.pending.properties?.fontSize || MINDMAP_LAYOUT.fontSize));
         const fontFamily = host.pending.properties?.fontFamily || 'Roboto, Arial, sans-serif';
         const textColor = host.pending.properties?.textColor || 0x212121;

package/src/tools/object-tools/placement/PlacementEventsBridge.js

@@ -37,7 +37,7 @@ export class PlacementEventsBridge {
                 }
                 if (this.host.pending.placeOnMouseUp && this.host.app && this.host.app.view) {
                     const onUp = (ev) => {
-                        this.host.app.view.removeEventListener('mouseup', onUp);
+                        this.host.app.view.removeEventListener('pointerup', onUp);
                         if (!this.host.pending) return;
                         const worldPoint = this.host._toWorld(ev.x, ev.y);
                         const position = {
@@ -50,7 +50,7 @@ export class PlacementEventsBridge {
                         this.host.hideGhost();
                         this.host.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
                     };
-                    this.host.app.view.addEventListener('mouseup', onUp, { once: true });
+                    this.host.app.view.addEventListener('pointerup', onUp, { once: true });
                 }
             }
         });

package/src/tools/object-tools/placement/PlacementInputRouter.js

@@ -61,7 +61,7 @@ export class PlacementInputRouter {
         host.pending = null;
         host.hideGhost();
         if (host.app && host.app.view) {
-            host.app.view.removeEventListener('mousemove', host._onFrameDrawMoveBound);
+            host.app.view.removeEventListener('pointermove', host._onFrameDrawMoveBound);
             host.app.view.style.cursor = '';
         }
         host.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
@@ -84,7 +84,7 @@ export class PlacementInputRouter {
         if (!host.pending) return;
         if (host.pending.placeOnMouseUp) {
             const onUp = (ev) => {
-                host.app.view.removeEventListener('mouseup', onUp);
+                host.app.view.removeEventListener('pointerup', onUp);
                 const worldPoint = host._toWorld(ev.x, ev.y);
                 const position = {
                     x: Math.round(worldPoint.x - (host.pending.size?.width ?? 100) / 2),
@@ -96,7 +96,7 @@ export class PlacementInputRouter {
                 host.hideGhost();
                 host.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
             };
-            host.app.view.addEventListener('mouseup', onUp, { once: true });
+            host.app.view.addEventListener('pointerup', onUp, { once: true });
             return;
         }
         if (host.pending.type === 'frame-draw') {
@@ -110,8 +110,8 @@ export class PlacementInputRouter {
             }
             host._onFrameDrawMoveBound = (ev) => host._onFrameDrawMove(ev);
             host._onFrameDrawUpBound = (ev) => host._onFrameDrawUp(ev);
-            host.app.view.addEventListener('mousemove', host._onFrameDrawMoveBound);
-            host.app.view.addEventListener('mouseup', host._onFrameDrawUpBound, { once: true });
+            host.app.view.addEventListener('pointermove', host._onFrameDrawMoveBound);
+            host.app.view.addEventListener('pointerup', host._onFrameDrawUpBound, { once: true });
             return;
         }
 

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

@@ -13,7 +13,7 @@ import {
     showStaticTextAfterEditing,
     updateGlobalTextEditorHandlesLayer,
 } from './TextEditorLifecycleRegistry.js';
-import { MINDMAP_LAYOUT } from '../../../ui/mindmap/MindmapLayoutConfig.js';
+import { MINDMAP_LAYOUT, MINDMAP_AUTOFIT } from '../../../ui/mindmap/MindmapLayoutConfig.js';
 
 function applyMindmapCaretFromClick({ create, objectId, object, textarea }) {
     try {
@@ -417,9 +417,18 @@ export function openMindmapEditor(object, create = false) {
         const placeholderWidth = measureMindmapTextWidthPx(textarea, measureEl, textarea.placeholder || '');
         const baseCssWidth = Math.max(1, Math.round(stableBaseWorldWidth * getWorldToCssScale()));
         const placeholderCssWidth = Math.max(1, Math.ceil(placeholderWidth + padding.left + padding.right));
-        const nextCssWidth = hasText
+        const rawNextCssWidth = hasText
             ? Math.max(1, Math.ceil(textWidth + padding.left + padding.right))
             : Math.max(baseCssWidth, placeholderCssWidth);
+        const level = properties?.mindmap?.level ?? 0;
+        const isRoot = level === 0;
+        const minCssW = Math.max(1, Math.round(
+            (isRoot ? MINDMAP_AUTOFIT.ROOT_MIN_WIDTH : MINDMAP_AUTOFIT.CHILD_MIN_WIDTH) * getWorldToCssScale()
+        ));
+        const maxCssW = Math.max(1, Math.round(
+            (isRoot ? MINDMAP_AUTOFIT.ROOT_MAX_WIDTH : MINDMAP_AUTOFIT.CHILD_MAX_WIDTH) * getWorldToCssScale()
+        ));
+        const nextCssWidth = Math.max(minCssW, Math.min(maxCssW, rawNextCssWidth));
         const lineCount = getEditorLineCount();
         const lineHeightPx = getEditorLineHeightPx();
         const baseCssHeight = Math.max(1, Math.round(stableBaseWorldHeight * getWorldToCssScale()));

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

@@ -1,5 +1,7 @@
 import { Events } from '../../../core/events/Events.js';
 
+const DRAG_START_THRESHOLD_PX = 4;
+
 export function onMouseDown(event) {
     // Если активен текстовый редактор, закрываем его при клике вне
     if (this.textEditor.active) {
@@ -20,6 +22,7 @@ export function onMouseDown(event) {
         return; // Прерываем выполнение, чтобы не обрабатывать клик дальше
     }
 
+    this._pendingDrag = null;
     this.isMultiSelect = event.originalEvent.ctrlKey || event.originalEvent.metaKey || event.originalEvent.shiftKey;
 
     // Проверяем, что под курсором
@@ -34,8 +37,8 @@ export function onMouseDown(event) {
         const gb = this.computeGroupBounds();
         const insideGroup = this.isPointInBounds({ x: event.x, y: event.y }, { x: gb.x, y: gb.y, width: gb.width, height: gb.height });
         if (insideGroup) {
-            // Если клик внутри группы (по объекту или пустому месту), сохраняем выделение и начинаем перетаскивание группы
-            this.startGroupDrag(event);
+            // Если клик внутри группы — откладываем до превышения порога смещения
+            this._pendingDrag = { isGroup: true, objectId: null, downX: event.x, downY: event.y, event };
             return;
         }
         // Вне группы — обычная логика
@@ -116,8 +119,8 @@ export function onMouseDown(event) {
                         }
                     }
                 }
-                // Старт перетаскивания как если бы кликнули по объекту
-                this.startDrag(selId, event);
+                // Откладываем drag до превышения порога смещения
+                this._pendingDrag = { isGroup: false, objectId: selId, downX: event.x, downY: event.y, event };
                 return;
             }
         }
@@ -140,6 +143,19 @@ export function onMouseMove(event) {
         this.updateResize(event);
     } else if (this.isRotating || this.isGroupRotating) {
         this.updateRotate(event);
+    } else if (this._pendingDrag) {
+        const dx = event.x - this._pendingDrag.downX;
+        const dy = event.y - this._pendingDrag.downY;
+        if (Math.hypot(dx, dy) > DRAG_START_THRESHOLD_PX) {
+            const pending = this._pendingDrag;
+            this._pendingDrag = null;
+            if (pending.isGroup) {
+                this.startGroupDrag(pending.event);
+            } else {
+                this.startDrag(pending.objectId, pending.event);
+            }
+            this.updateDrag(event);
+        }
     } else if (this.isDragging || this.isGroupDragging) {
         this.updateDrag(event);
     } else if (this.isBoxSelect) {
@@ -147,10 +163,23 @@ export function onMouseMove(event) {
     } else {
         // Обновляем курсор в зависимости от того, что под мышью
         this.updateCursor(event);
+        
+        // Эмитим событие наведения на объект
+        const hitData = { x: event.x, y: event.y, result: null };
+        this.emit(Events.Tool.HitTest, hitData);
+        const hoveredObjectId = hitData.result?.object || null;
+        if (this.lastHoveredObjectId !== hoveredObjectId) {
+            this.lastHoveredObjectId = hoveredObjectId;
+            this.emit(Events.Object.Hover, { objectId: hoveredObjectId });
+        }
     }
 }
 
 export function onMouseUp(event) {
+    if (this._pendingDrag) {
+        this._pendingDrag = null;
+        return;
+    }
     if (this.isResizing || this.isGroupResizing) {
         this.endResize();
     } else if (this.isRotating || this.isGroupRotating) {

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

@@ -93,6 +93,12 @@ export function deactivateSelectTool(superDeactivate) {
     if (this.app && this.app.view) {
         this.app.view.style.cursor = '';
     }
+
+    // Эмитим Hover с null при выходе из инструмента
+    if (this.lastHoveredObjectId !== null) {
+        this.lastHoveredObjectId = null;
+        this.emit(Events.Object.Hover, { objectId: null });
+    }
 }
 
 export function destroySelectTool(superDestroy) {
@@ -105,6 +111,12 @@ export function destroySelectTool(superDestroy) {
     unregisterSelectToolCoreSubscriptions(this);
     this.clearSelection();
 
+    // Эмитим Hover с null при уничтожении инструмента
+    if (this.lastHoveredObjectId !== null) {
+        this.lastHoveredObjectId = null;
+        this.emit(Events.Object.Hover, { objectId: null });
+    }
+
     // Уничтожаем ручки изменения размера
     if (this.resizeHandles) {
         this.resizeHandles.destroy();

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

@@ -48,6 +48,9 @@ export function initializeSelectToolState(instance) {
     instance.currentX = 0;
     instance.currentY = 0;
 
+    // Последний наведённый объект (для избежания спама Hover событий)
+    instance.lastHoveredObjectId = null;
+
     // Состояние поворота
     instance.isRotating = false;
     instance.rotateCenter = null;

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

@@ -31,8 +31,7 @@ export function applyInitialTextEditorTextareaStyles(textarea, { effectiveFontPx
     textarea.style.height = `${initialHeightPx}px`;
     textarea.setAttribute('rows', '1');
     textarea.style.overflowY = 'hidden';
-    textarea.style.whiteSpace = 'pre-wrap';
-    textarea.style.wordBreak = 'break-word';
+    textarea.style.whiteSpace = 'pre';
     textarea.style.letterSpacing = '0px';
     textarea.style.fontKerning = 'normal';
 }

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

@@ -8,14 +8,14 @@ export function createRegularTextAutoSize({
     minHBound,
     onSizeChange,
 }) {
-    const MAX_AUTO_WIDTH = 360;
-
     return () => {
         textarea.style.width = 'auto';
         textarea.style.height = 'auto';
 
-        const naturalW = Math.max(1, Math.ceil(textarea.scrollWidth + 1));
-        const targetW = Math.round(Math.min(MAX_AUTO_WIDTH, Math.max(minWBound, naturalW)));
+        const fontPx = parseFloat(textarea.style.fontSize) || 16;
+        const rightPad = Math.ceil(fontPx * 0.7) + 6;
+        const naturalW = Math.max(1, Math.ceil(textarea.scrollWidth + rightPad));
+        const targetW = Math.round(Math.max(minWBound, naturalW));
         textarea.style.width = `${targetW}px`;
         wrapper.style.width = `${targetW}px`;
 

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

@@ -101,6 +101,14 @@ export function openTextEditor(object, create = false) {
     }
     // Прячем глобальные HTML-ручки на время редактирования, чтобы не было второй рамки
     hideGlobalTextEditorHandlesLayer();
+    // Подавляем пересоздание ручек при паразитных ResizeUpdate (тач double-tap):
+    // host.update() внутри HandlesEventBridge вызывается при каждом ResizeUpdate,
+    // _handlesSuppressed=true гарантирует что showBounds не создаст ручки поверх textarea.
+    try {
+        if (typeof window !== 'undefined' && window.moodboardHtmlHandlesLayer) {
+            window.moodboardHtmlHandlesLayer._handlesSuppressed = true;
+        }
+    } catch (_) {}
 
     const app = this.app;
     const world = app?.stage?.getChildByName && app.stage.getChildByName('worldLayer');
@@ -144,7 +152,7 @@ export function openTextEditor(object, create = false) {
 
     const textarea = createTextEditorTextarea(content || '');
     // Без доступного статичного HTML-элемента (часто при create) не оставляем Caveat как fallback.
-    textarea.style.fontFamily = isNote ? 'Caveat, Arial, cursive' : 'Roboto, Arial, sans-serif';
+    textarea.style.fontFamily = 'Caveat, Arial, cursive';
 
     // Вычисляем межстрочный интервал; подгоняем к реальным значениям HTML-отображения
     let lhInitial = computeTextEditorLineHeightPx(effectiveFontPx);
@@ -370,7 +378,9 @@ export function openTextEditor(object, create = false) {
 
     // Если создаём новый текст — длина поля ровно как placeholder
     if (create && !isNote) {
-        const startWidth = Math.max(1, measureTextEditorPlaceholderWidth(textarea, 'Напишите что-нибудь'));
+        // +25% — запас на Caveat vs Arial: при незагруженном Caveat span рендерится в Arial,
+        // а Caveat (рукописный шрифт) заметно шире для кириллицы.
+        const startWidth = Math.max(1, Math.ceil(measureTextEditorPlaceholderWidth(textarea, 'Напишите что-нибудь') * 1.25));
         const startHeight = Math.max(1, lhInitial - BASELINE_FIX + 10); // +5px сверху и +5px снизу
         textarea.style.width = `${startWidth}px`;
         textarea.style.height = `${startHeight}px`;
@@ -397,7 +407,7 @@ export function openTextEditor(object, create = false) {
         ? ({ widthPx, heightPx }) => {
             try {
                 const scaleX = (worldLayerRef?.scale?.x) || 1;
-                const widthWorld = Math.max(1, Math.round(widthPx * viewRes / scaleX));
+                const widthWorld = Math.max(1, Math.ceil(widthPx * viewRes / scaleX));
                 const heightWorld = Math.max(1, Math.round(heightPx * viewRes / scaleX));
                 const posReq = { objectId, position: null };
                 this.eventBus.emit(Events.Tool.GetObjectPosition, posReq);
@@ -485,5 +495,13 @@ export function openTextEditor(object, create = false) {
 }
 
 export function closeTextEditor(commit) {
+    // Снимаем подавление ручек до вызова closeTextEditorFromState,
+    // т.к. тот в конце вызывает updateGlobalTextEditorHandlesLayer() → update() → showBounds,
+    // и ручки должны пересоздаться нормально.
+    try {
+        if (typeof window !== 'undefined' && window.moodboardHtmlHandlesLayer) {
+            window.moodboardHtmlHandlesLayer._handlesSuppressed = false;
+        }
+    } catch (_) {}
     return closeTextEditorFromState(this, commit);
 }

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

@@ -10,18 +10,16 @@ export function handleObjectSelect(objectId, event) {
         if (this.isMultiSelect) {
             this.removeFromSelection(objectId);
         } else if (this.selection.size() > 1) {
-            // Перетаскивание группы
-            this.startGroupDrag(event);
+            this._pendingDrag = { isGroup: true, objectId: null, downX: event.x, downY: event.y, event };
         } else {
-            // Начинаем перетаскивание
-            this.startDrag(objectId, event);
+            this._pendingDrag = { isGroup: false, objectId, downX: event.x, downY: event.y, event };
         }
     } else {
         this.addToSelection(objectId);
         if (this.selection.size() > 1) {
-            this.startGroupDrag(event);
+            this._pendingDrag = { isGroup: true, objectId: null, downX: event.x, downY: event.y, event };
         } else {
-            this.startDrag(objectId, event);
+            this._pendingDrag = { isGroup: false, objectId, downX: event.x, downY: event.y, event };
         }
     }
 }