@sequent-org/moodboard 1.4.30 → 1.4.32

package/src/ui/mindmap/MindmapHtmlTextLayer.js

@@ -1,11 +1,21 @@
 import { Events } from '../../core/events/Events.js';
+import gsap from 'gsap';
 import * as PIXI from 'pixi.js';
 import { MindmapTextOverlayAdapter } from './MindmapTextOverlayAdapter.js';
-import { MINDMAP_LAYOUT } from './MindmapLayoutConfig.js';
+import { MINDMAP_LAYOUT, MINDMAP_AUTOFIT } from './MindmapLayoutConfig.js';
 
 const MINDMAP_PLACEHOLDER = 'Напишите что-нибудь';
 const MINDMAP_MAX_LINE_CHARS = MINDMAP_LAYOUT.maxLineChars;
 
+// Hover-lift канон «маленькие» — идентичен HtmlTextLayer.js
+const MM_HOVER_TY  = -2;
+const MM_HOVER_SC  = 1.06;
+const MM_HOVER_DUR = 0.22;
+const MM_BACK_DUR  = 0.18;
+const mmPrefersReducedMotion =
+    typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
 function normalizeMindmapLineLength(value, maxLineChars = MINDMAP_MAX_LINE_CHARS) {
     const text = (typeof value === 'string')
         ? value.replace(/\r/g, '').replace(/\n/g, '')
@@ -32,6 +42,12 @@ export class MindmapHtmlTextLayer {
         this.idToCleanup = new Map();
         this.idToContentEl = new Map();
         this.overlayAdapter = new MindmapTextOverlayAdapter();
+        // hover-lift state: objectId → { ty: 0, sc: 1 }
+        this._hoverStates = new Map();
+        this._hoveredId = null;
+        this._selectedIds = new Set();
+        this._pixiHoverHandlers = new Map();
+        this._transformActive = false;
     }
 
     attach() {
@@ -50,6 +66,7 @@ export class MindmapHtmlTextLayer {
             if (!this.overlayAdapter.supportsObject(objectData)) return;
             this._ensureTextEl(objectId, objectData);
             this.updateOne(objectId);
+            this._scheduleAutoFit(objectId);
         });
 
         this.eventBus.on(Events.Object.Deleted, ({ objectId }) => {
@@ -74,6 +91,7 @@ export class MindmapHtmlTextLayer {
             const containerEl = this.idToEl.get(objectId);
             if (contentEl && containerEl && typeof content === 'string') {
                 this._applyContentValue(containerEl, contentEl, content);
+                this._autoFitNodeWidth(objectId);
             }
         });
 
@@ -91,10 +109,14 @@ export class MindmapHtmlTextLayer {
                 el.style.color = updates.color || updates.properties?.textColor;
             }
             this.updateOne(objectId);
+            this._autoFitNodeWidth(objectId);
         });
 
         this.eventBus.on(Events.UI.ZoomPercent, () => this.updateAll());
         this.eventBus.on(Events.Tool.PanUpdate, () => this.updateAll());
+        this.eventBus.on(Events.UI.TextEditEnd, ({ objectId }) => {
+            if (objectId && this.idToEl.has(objectId)) this._scheduleAutoFit(objectId);
+        });
         this.eventBus.on(Events.Tool.DragUpdate, ({ object }) => this.updateOne(object));
         this.eventBus.on(Events.Tool.ResizeUpdate, ({ object }) => this.updateOne(object));
         this.eventBus.on(Events.Tool.RotateUpdate, ({ object }) => this.updateOne(object));
@@ -108,11 +130,61 @@ export class MindmapHtmlTextLayer {
             (Array.isArray(objects) ? objects : []).forEach((id) => this.updateOne(id));
         });
 
+        // Блокировка hover во время drag/resize/rotate (канон HtmlTextLayer)
+        this._onTransformStart = () => {
+            this._transformActive = true;
+            if (this._hoveredId) {
+                const id = this._hoveredId;
+                this._hoveredId = null;
+                this._animHoverOut(id);
+            }
+        };
+        this._onTransformEnd = () => { this._transformActive = false; };
+        this.eventBus.on(Events.Tool.DragStart,        this._onTransformStart);
+        this.eventBus.on(Events.Tool.GroupDragStart,   this._onTransformStart);
+        this.eventBus.on(Events.Tool.DragEnd,          this._onTransformEnd);
+        this.eventBus.on(Events.Tool.GroupDragEnd,     this._onTransformEnd);
+        this.eventBus.on(Events.Tool.ResizeStart,      this._onTransformStart);
+        this.eventBus.on(Events.Tool.GroupResizeStart, this._onTransformStart);
+        this.eventBus.on(Events.Tool.ResizeEnd,        this._onTransformEnd);
+        this.eventBus.on(Events.Tool.GroupResizeEnd,   this._onTransformEnd);
+        this.eventBus.on(Events.Tool.RotateStart,      this._onTransformStart);
+        this.eventBus.on(Events.Tool.GroupRotateStart, this._onTransformStart);
+        this.eventBus.on(Events.Tool.RotateEnd,        this._onTransformEnd);
+        this.eventBus.on(Events.Tool.GroupRotateEnd,   this._onTransformEnd);
+
+        // Выделение: не показываем hover у выделенных узлов
+        this._onSelectionAdd = (data) => {
+            const id = data?.object ?? data?.objectId ?? data?.id ?? data;
+            if (id) {
+                this._selectedIds.add(String(id));
+                if (this._hoveredId === String(id)) {
+                    this._hoveredId = null;
+                    this._animHoverOut(String(id));
+                }
+            }
+        };
+        this._onSelectionRemove = (data) => {
+            const id = data?.object ?? data?.objectId ?? data?.id ?? data;
+            if (id) this._selectedIds.delete(String(id));
+        };
+        this._onSelectionClear = () => { this._selectedIds.clear(); };
+        this.eventBus.on(Events.Tool.SelectionAdd,    this._onSelectionAdd);
+        this.eventBus.on(Events.Tool.SelectionRemove, this._onSelectionRemove);
+        this.eventBus.on(Events.Tool.SelectionClear,  this._onSelectionClear);
+
         this.rebuildFromState();
         this.updateAll();
     }
 
     destroy() {
+        for (const [id, state] of this._hoverStates) {
+            gsap.killTweensOf(state);
+            this._detachPixiHover(id);
+        }
+        this._hoverStates.clear();
+        this._pixiHoverHandlers.clear();
+        this._selectedIds.clear();
         if (this.layer) this.layer.remove();
         this.layer = null;
         this.idToEl.clear();
@@ -128,6 +200,7 @@ export class MindmapHtmlTextLayer {
             this._ensureTextEl(objectData.id, objectData);
         });
         this.updateAll();
+        this._scheduleAutoFitAll();
     }
 
     _ensureTextEl(objectId, objectData) {
@@ -183,6 +256,7 @@ export class MindmapHtmlTextLayer {
         });
         this.idToCleanup.set(objectId, cleanup);
 
+        this._hoverStates.set(objectId, { ty: 0, sc: 1 });
         el.appendChild(contentEl);
         this.layer.appendChild(el);
         this.idToEl.set(objectId, el);
@@ -194,6 +268,10 @@ export class MindmapHtmlTextLayer {
         const cleanup = this.idToCleanup.get(objectId);
         if (typeof cleanup === 'function') cleanup();
         if (el) el.remove();
+        this._detachPixiHover(objectId);
+        const state = this._hoverStates.get(objectId);
+        if (state) gsap.killTweensOf(state);
+        this._hoverStates.delete(objectId);
         this.idToEl.delete(objectId);
         this.idToCleanup.delete(objectId);
         this.idToContentEl.delete(objectId);
@@ -268,7 +346,78 @@ export class MindmapHtmlTextLayer {
         }
 
         el.style.transformOrigin = 'center center';
-        el.style.transform = angle ? `rotate(${angle}deg)` : '';
+        const hover = this._hoverStates.get(objectId);
+        const hoverTy = hover?.ty ?? 0;
+        const hoverSc = hover?.sc ?? 1;
+        const hoverPart = (Math.abs(hoverTy) > 0.001 || Math.abs(hoverSc - 1) > 0.001)
+            ? `translate3d(0, ${hoverTy}px, 0) scale(${hoverSc})`
+            : '';
+        const rotatePart = angle ? `rotate(${angle}deg)` : '';
+        el.style.transform = [hoverPart, rotatePart].filter(Boolean).join(' ');
+        this._ensurePixiHover(objectId);
+    }
+
+    /** Лениво вешает pointerover/pointerout на PIXI-капсулу узла */
+    _ensurePixiHover(objectId) {
+        if (this._pixiHoverHandlers.has(objectId)) return;
+        const cap = this.core?.pixi?.objects?.get ? this.core.pixi.objects.get(objectId) : null;
+        if (!cap || typeof cap.on !== 'function') return;
+        const onOver = () => this._onPointerOver(objectId);
+        const onOut  = () => this._onPointerOut(objectId);
+        cap.on('pointerover', onOver);
+        cap.on('pointerout',  onOut);
+        this._pixiHoverHandlers.set(objectId, { cap, onOver, onOut });
+    }
+
+    _detachPixiHover(objectId) {
+        const h = this._pixiHoverHandlers.get(objectId);
+        if (!h) return;
+        try { h.cap.off('pointerover', h.onOver); } catch (_) {}
+        try { h.cap.off('pointerout',  h.onOut);  } catch (_) {}
+        this._pixiHoverHandlers.delete(objectId);
+    }
+
+    _onPointerOver(objectId) {
+        if (mmPrefersReducedMotion) return;
+        if (this._transformActive) return;
+        if (this._selectedIds.has(objectId) || this._selectedIds.has(String(objectId))) return;
+        if (this._hoveredId === objectId) return;
+        this._hoveredId = objectId;
+        this._animHoverIn(objectId);
+    }
+
+    _onPointerOut(objectId) {
+        if (this._hoveredId === objectId) this._hoveredId = null;
+        this._animHoverOut(objectId);
+    }
+
+    _animHoverIn(objectId) {
+        if (mmPrefersReducedMotion) return;
+        const state = this._hoverStates.get(objectId);
+        if (!state) return;
+        gsap.killTweensOf(state);
+        gsap.to(state, {
+            ty: MM_HOVER_TY,
+            sc: MM_HOVER_SC,
+            duration: MM_HOVER_DUR,
+            ease: 'hoverLiftSpring',
+            onUpdate:  () => this.updateOne(objectId),
+            onComplete: () => this.updateOne(objectId),
+        });
+    }
+
+    _animHoverOut(objectId) {
+        const state = this._hoverStates.get(objectId);
+        if (!state) return;
+        gsap.killTweensOf(state);
+        gsap.to(state, {
+            ty: 0,
+            sc: 1,
+            duration: MM_BACK_DUR,
+            ease: 'power2.out',
+            onUpdate:  () => this.updateOne(objectId),
+            onComplete: () => this.updateOne(objectId),
+        });
     }
 
     _applyContentValue(containerEl, contentEl, rawContent) {
@@ -282,4 +431,76 @@ export class MindmapHtmlTextLayer {
         contentEl.textContent = isPlaceholder ? MINDMAP_PLACEHOLDER : actual;
         contentEl.classList.toggle('is-placeholder', isPlaceholder);
     }
+
+    _scheduleAutoFit(objectId) {
+        const doFit = () => this._autoFitNodeWidth(objectId);
+        if (typeof document !== 'undefined' && document.fonts?.ready) {
+            document.fonts.ready.then(doFit);
+        } else {
+            doFit();
+        }
+    }
+
+    _scheduleAutoFitAll() {
+        const doFit = () => { for (const id of this.idToEl.keys()) this._autoFitNodeWidth(id); };
+        if (typeof document !== 'undefined' && document.fonts?.ready) {
+            document.fonts.ready.then(doFit);
+        } else {
+            doFit();
+        }
+    }
+
+    _autoFitNodeWidth(objectId) {
+        const el = this.idToEl.get(objectId);
+        const contentEl = this.idToContentEl.get(objectId);
+        if (!el || !contentEl || !this.core) return;
+        // Skip while the static element is hidden during inline editing.
+        if (el.style.visibility === 'hidden') return;
+        try {
+            const objectData = (this.core.state.state.objects || []).find(o => o.id === objectId);
+            if (!objectData || !objectData.position) return;
+
+            const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
+            const res = (this.core?.pixi?.app?.renderer?.resolution) || 1;
+            const worldScale = world?.scale?.x || 1;
+
+            // Measure rendered text width via scrollWidth of the <span> (forces layout reflow).
+            const scrollWidthCss = contentEl.scrollWidth;
+            if (scrollWidthCss <= 0) return;
+
+            const paddingX = Math.max(0, Math.round(
+                objectData.properties?.paddingX ?? MINDMAP_LAYOUT.paddingX
+            ));
+            // css → world: same formula as _autoFitTextHeight in HtmlTextLayer.js
+            const contentWorldW = (scrollWidthCss * res) / worldScale;
+            const rawWorldW = contentWorldW + 2 * paddingX;
+
+            const level = objectData.properties?.mindmap?.level ?? 0;
+            const isRoot = level === 0;
+            const minW = isRoot ? MINDMAP_AUTOFIT.ROOT_MIN_WIDTH : MINDMAP_AUTOFIT.CHILD_MIN_WIDTH;
+            const maxW = isRoot ? MINDMAP_AUTOFIT.ROOT_MAX_WIDTH : MINDMAP_AUTOFIT.CHILD_MAX_WIDTH;
+            const newWorldW = Math.max(minW, Math.min(maxW, Math.round(rawWorldW)));
+
+            // Measure natural height at the fitted width to handle multi-line wrapping.
+            const cssFitW = Math.max(1, Math.round(newWorldW * worldScale / res));
+            const prevW = el.style.width;
+            const prevH = el.style.height;
+            el.style.width = `${cssFitW}px`;
+            el.style.height = 'auto';
+            const scrollHeightCss = Math.max(1, Math.round(el.scrollHeight));
+            el.style.width = prevW;
+            el.style.height = prevH;
+            const newWorldH = Math.max(1, Math.round((scrollHeightCss * res) / worldScale));
+
+            const currentW = Math.round(objectData.width || objectData.properties?.width || MINDMAP_LAYOUT.width);
+            const currentH = Math.round(objectData.height || objectData.properties?.height || MINDMAP_LAYOUT.height);
+            if (newWorldW === currentW && newWorldH === currentH) return;
+
+            this.core.eventBus.emit(Events.Tool.ResizeUpdate, {
+                object: objectId,
+                size: { width: newWorldW, height: newWorldH },
+                position: objectData.position,
+            });
+        } catch (_) {}
+    }
 }

package/src/ui/mindmap/MindmapLayoutConfig.js

@@ -27,3 +27,15 @@ export const MINDMAP_LAYOUT = Object.freeze({
     maxLineChars: MINDMAP_BASE_LAYOUT.maxLineChars,
 });
 
+// Auto-fit width bounds (world units).
+// ROOT: current fixed width ~179 → min 100 keeps pill shape for short words;
+//        max 440 ≈ 50-char line in Roboto 14px (~375px) + 40px padding.
+// CHILD: slightly narrower pill baseline; same maxLineChars as root but
+//        typically smaller padding, so max is a bit tighter.
+export const MINDMAP_AUTOFIT = Object.freeze({
+    ROOT_MIN_WIDTH: 100,
+    ROOT_MAX_WIDTH: 440,
+    CHILD_MIN_WIDTH: 80,
+    CHILD_MAX_WIDTH: 360,
+});
+

package/src/ui/styles/chat.css

@@ -289,14 +289,6 @@
     color: #374151;
 }
 
-.moodboard-chat__input-icon-btn--enhance-prompt[data-empty="true"] {
-    color: lab(5.0601 0 0 / 0.3216);
-}
-
-.moodboard-chat__input-icon-btn--enhance-prompt[data-empty="true"]:hover {
-    color: lab(5.0601 0 0 / 0.3216);
-}
-
 .moodboard-chat__actions-row {
     display: flex;
     align-items: center;
@@ -424,7 +416,7 @@
 }
 
 .moodboard-chat__send[data-state="streaming"] {
-    background: #EF4444;
+    background: #111827;
     color: #ffffff;
 }
 
@@ -724,6 +716,7 @@
     background-size: 200% 100%;
     animation: moodboard-pending-shimmer 5.76s linear infinite;
     border-radius: 12px;
+    box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.12);
     overflow: hidden;
     pointer-events: none;
     z-index: 10;
@@ -983,31 +976,3 @@
 .moodboard-chat__extended-clear:hover {
     color: #374151;
 }
-
-.moodboard-chat__extended-enhance {
-    background: transparent;
-    border: none;
-    color: #6B7280;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    padding: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    transition: color 120ms ease;
-}
-
-.moodboard-chat__extended-enhance:hover {
-    color: #374151;
-}
-
-.moodboard-chat__extended-enhance-icon {
-    display: inline-flex;
-    color: inherit;
-}
-
-.moodboard-chat__extended-enhance-icon svg {
-    width: 16px;
-    height: 16px;
-}

package/src/ui/styles/toolbar.css

@@ -78,3 +78,9 @@
 /* Divider inside toolbar */
 .moodboard-toolbar__divider { width: 100%; height: 1px; background: #e0e0e0; margin: 6px 0; }
 
+@media (pointer: coarse) {
+    .moodboard-toolbar__button {
+        width: 44px;
+        height: 44px;
+    }
+}

package/src/ui/styles/workspace.css

@@ -307,8 +307,8 @@
 .mb-text--mindmap {
     display: flex;
     align-items: center;
-    justify-content: flex-start;
-    text-align: left;
+    justify-content: center;
+    text-align: center;
     pointer-events: none;
     cursor: default;
     color: #212121;
@@ -340,6 +340,7 @@
     position: absolute;
     inset: 0;
     pointer-events: none;
+    touch-action: none;
     z-index: 12;
 }
 
@@ -357,23 +358,18 @@
     position: absolute;
     width: 12px;
     height: 12px;
-    background: #80D8FF;
+    background: #ffffff;
     border: 2px solid #80D8FF;
     border-radius: 50%;
     box-sizing: border-box;
     pointer-events: auto;
     z-index: 10;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
+    transition: background-color 120ms ease, border-color 120ms ease;
 }
 
 .mb-handle-inner {
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    width: 6px;
-    height: 6px;
-    background: #fff;
-    border-radius: 50%;
-    pointer-events: none;
+    display: none;
 }
 
 .mb-edge {
@@ -576,6 +572,10 @@
     display: block;
     width: 100%;
     height: 100%;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .moodboard-workspace {
@@ -741,6 +741,7 @@
     position: absolute;
     inset: 0;
     overflow: hidden;
+    touch-action: none;
 }
 
 /* Toolbar Styles */
@@ -777,9 +778,9 @@
 /* Frame popup (grid 2x2 + header row) */
 .moodboard-root, :root {
     /* CSS variables for frame style */
-    --frame-border-color: #EEEEEE;
-    --frame-border-width: 2; /* px */
-    --frame-corner-radius: 3; /* px */
+    --frame-border-color: #C7CDD6;
+    --frame-border-width: 1; /* px */
+    --frame-corner-radius: 6; /* px */
 }
 .frame-popup {
     display: grid;
@@ -1002,27 +1003,27 @@
 /* Иконки фигур — рисуем CSSом */
 .moodboard-shapes__icon { display: inline-block; }
 .shape-square {
-    width: 15px; height: 15px; background: #1d4ed8; border-radius: 2px;
+    width: 15px; height: 15px; background: #ffffff; border-radius: 2px; border: 1.5px solid #94a3b8;
 }
 .shape-rounded-square {
-    width: 15px; height: 15px; background: #1d4ed8; border-radius: 4px;
+    width: 15px; height: 15px; background: #ffffff; border-radius: 4px; border: 1.5px solid #94a3b8;
 }
 .shape-circle {
-    width: 15px; height: 15px; background: #1d4ed8; border-radius: 50%;
+    width: 15px; height: 15px; background: #ffffff; border-radius: 50%; border: 1.5px solid #94a3b8;
 }
 .shape-triangle {
     width: 0; height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
-    border-bottom: 14px solid #1d4ed8;
+    border-bottom: 14px solid #94a3b8;
 }
 .shape-diamond {
-    width: 11px; height: 11px; background: #1d4ed8; transform: rotate(45deg);
+    width: 11px; height: 11px; background: #ffffff; border: 1.5px solid #94a3b8; transform: rotate(45deg);
 }
 .shape-parallelogram {
-    width: 17px; height: 11px; background: #1d4ed8; transform: skewX(-20deg);
+    width: 17px; height: 11px; background: #ffffff; border: 1.5px solid #94a3b8; transform: skewX(-20deg);
 }
-.shape-arrow { font-size: 16px; color: #1d4ed8; line-height: 1; }
+.shape-arrow { font-size: 16px; color: #94a3b8; line-height: 1; }
 
 
 
@@ -1300,4 +1301,65 @@
     line-height: inherit;
 }
 
+@media (pointer: coarse) {
+    .mb-handle::before,
+    .mb-edge::before {
+        content: '';
+        position: absolute;
+        inset: -16px;
+        pointer-events: auto;
+    }
+
+    .mb-rotate-handle::before {
+        content: '';
+        position: absolute;
+        inset: -12px;
+        pointer-events: auto;
+    }
+
+    .mb-rotate-handle {
+        transform: translate(-16px, 16px) !important;
+    }
+
+    .mb-edge[data-edge="top"], .mb-edge[data-edge="bottom"] {
+        left: 50% !important;
+        transform: translateX(-50%) !important;
+        width: max(32px, calc(var(--box-w) - 44px)) !important;
+        z-index: 11 !important;
+    }
+    .mb-edge[data-edge="left"], .mb-edge[data-edge="right"] {
+        top: 50% !important;
+        transform: translateY(-50%) !important;
+        height: max(32px, calc(var(--box-h) - 44px)) !important;
+        z-index: 11 !important;
+    }
+
+    .mb-handle[data-dir="nw"]::before, .mb-handle[data-dir="sw"]::before {
+        right: max(-16px, calc(22px - var(--box-w) / 2));
+    }
+    .mb-handle[data-dir="ne"]::before, .mb-handle[data-dir="se"]::before {
+        left: max(-16px, calc(22px - var(--box-w) / 2));
+    }
+    .mb-handle[data-dir="nw"]::before, .mb-handle[data-dir="ne"]::before {
+        bottom: max(-16px, calc(22px - var(--box-h) / 2));
+    }
+    .mb-handle[data-dir="sw"]::before, .mb-handle[data-dir="se"]::before {
+        top: max(-16px, calc(22px - var(--box-h) / 2));
+    }
+
+    .moodboard-zoombar__button {
+        width: 44px;
+        height: 44px;
+    }
+
+    .moodboard-mapbar__button {
+        width: 44px;
+        height: 44px;
+    }
+
+    .mb-mindmap-side-btn {
+        width: 44px;
+        height: 44px;
+    }
+}
 

package/src/ui/toolbar/ToolbarPopupsController.js

@@ -138,7 +138,7 @@ export class ToolbarPopupsController {
             } else {
                 icon.className = `moodboard-shapes__icon shape-${s.id}`;
                 if (s.id === 'arrow') {
-                    icon.innerHTML = '<svg width="18" height="12" viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect x="0" y="5" width="12" height="2" rx="1" fill="#1d4ed8"/><path d="M12 0 L18 6 L12 12 Z" fill="#1d4ed8"/></svg>';
+                    icon.innerHTML = '<svg width="18" height="12" viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect x="0" y="5" width="12" height="2" rx="1" fill="#94a3b8"/><path d="M12 0 L18 6 L12 12 Z" fill="#94a3b8"/></svg>';
                 }
             }
             btn.appendChild(icon);