@sequent-org/moodboard 1.4.44 → 1.4.47

package/src/ui/chat/Model3dBoardSkeleton.js

@@ -0,0 +1,93 @@
+/**
+ * DOM-скелетон 3D-модели на полотне доски.
+ *
+ * Одна ответственность: показывать анимированную заглушку в том месте,
+ * где появится сгенерированная 3D-модель. Не знает про сессию и вьюпорт —
+ * экранный прямоугольник ему задаёт ChatWindow (он же держит мировые координаты
+ * и пересчитывает позицию при pan/zoom).
+ *
+ * Lifecycle: attach(container) → setRect(rect)* → enter() → detach() → destroy()
+ * attach/detach идемпотентны.
+ */
+export class Model3dBoardSkeleton {
+    /**
+     * @param {object} [opts]
+     * @param {string} [opts.iconSvg] HTML-строка иконки (например ICONS.cube)
+     */
+    constructor({ iconSvg = '' } = {}) {
+        this._el = null;
+        this._iconSvg = iconSvg;
+    }
+
+    /**
+     * @param {HTMLElement} container
+     */
+    attach(container) {
+        if (this._el) return;
+
+        const el = document.createElement('div');
+        el.className = 'moodboard-chat__3d-skeleton moodboard-chat__3d-skeleton--enter';
+
+        if (this._iconSvg) {
+            const icon = document.createElement('span');
+            icon.className = 'moodboard-chat__3d-skeleton-icon';
+            icon.innerHTML = this._iconSvg;
+            el.appendChild(icon);
+        }
+
+        this._el = el;
+        (container ?? document.body).appendChild(el);
+
+        // Принудительный reflow фиксирует стартовое состояние (--enter) до enter(),
+        // иначе браузер смерджит кадры и transition не запустится.
+        void el.offsetWidth;
+    }
+
+    /**
+     * Задаёт экранный прямоугольник (CSS-пиксели вьюпорта, position: fixed).
+     * @param {{ left:number, top:number, width:number, height:number, radius?:number }} rect
+     * @param {{ animate?: boolean }} [opts]
+     */
+    setRect({ left, top, width, height, radius }, { animate = false } = {}) {
+        if (!this._el) return;
+        const el = this._el;
+
+        if (!animate) el.style.transition = 'none';
+
+        el.style.left = `${Math.round(left)}px`;
+        el.style.top = `${Math.round(top)}px`;
+        el.style.width = `${Math.round(width)}px`;
+        el.style.height = `${Math.round(height)}px`;
+        if (typeof radius === 'number') {
+            el.style.borderRadius = `${Math.max(2, Math.round(radius))}px`;
+        }
+
+        if (!animate) {
+            void el.offsetWidth;
+            el.style.removeProperty('transition');
+        }
+    }
+
+    /** Запускает анимацию появления. */
+    enter() {
+        if (!this._el) return;
+        this._el.classList.remove('moodboard-chat__3d-skeleton--enter');
+        this._el.classList.add('moodboard-chat__3d-skeleton--entered');
+    }
+
+    /** @returns {boolean} */
+    isAttached() {
+        return !!this._el;
+    }
+
+    detach() {
+        if (this._el && this._el.parentNode) {
+            this._el.parentNode.removeChild(this._el);
+        }
+        this._el = null;
+    }
+
+    destroy() {
+        this.detach();
+    }
+}

package/src/ui/chat/Model3dProgressOverlay.js

@@ -0,0 +1,114 @@
+/**
+ * DOM-заглушка прогресса генерации 3D-модели.
+ *
+ * Одна ответственность: показывать стадии (геометрия / текстура) и прогресс-бар
+ * поверх composer-контейнера. Не знает ни про сессию, ни про доску.
+ *
+ * Lifecycle: attach(container) → update(state)* → detach() → destroy()
+ * attach/detach идемпотентны. Listeners не дублируются.
+ */
+export class Model3dProgressOverlay {
+    constructor() {
+        this._el = null;
+        this._barFill = null;
+        this._stageLabel = null;
+        this._percentLabel = null;
+        this._container = null;
+    }
+
+    /**
+     * Добавляет оверлей в container.
+     * @param {HTMLElement} container
+     */
+    attach(container) {
+        if (this._el) return;
+        this._container = container;
+
+        const el = document.createElement('div');
+        el.className = 'moodboard-chat__3d-overlay';
+
+        const inner = document.createElement('div');
+        inner.className = 'moodboard-chat__3d-overlay-inner';
+
+        const stageLabel = document.createElement('span');
+        stageLabel.className = 'moodboard-chat__3d-overlay-stage';
+        stageLabel.textContent = 'Генерация геометрии…';
+
+        const barWrap = document.createElement('div');
+        barWrap.className = 'moodboard-chat__3d-overlay-bar-wrap';
+
+        const barFill = document.createElement('div');
+        barFill.className = 'moodboard-chat__3d-overlay-bar-fill';
+        barFill.style.width = '0%';
+
+        const percentLabel = document.createElement('span');
+        percentLabel.className = 'moodboard-chat__3d-overlay-percent';
+        percentLabel.textContent = '0%';
+
+        barWrap.appendChild(barFill);
+        inner.appendChild(stageLabel);
+        inner.appendChild(barWrap);
+        inner.appendChild(percentLabel);
+        el.appendChild(inner);
+
+        this._el = el;
+        this._barFill = barFill;
+        this._stageLabel = stageLabel;
+        this._percentLabel = percentLabel;
+
+        container.appendChild(el);
+    }
+
+    /**
+     * Обновляет отображение по состоянию Model3dSessionController.
+     * @param {{ status: string, progress: number, stage: string|null, error: string|null }} state
+     */
+    update(state) {
+        if (!this._el) return;
+
+        const { status, progress, stage, error } = state;
+
+        if (status === 'error') {
+            this._el.classList.add('is-error');
+            this._stageLabel.textContent = error ? `Ошибка: ${error}` : 'Ошибка генерации';
+            return;
+        }
+
+        this._el.classList.remove('is-error');
+
+        const pct = Math.round(Math.min(100, Math.max(0, progress ?? 0)));
+
+        // Пока прогресс равен нулю и API ещё не вернул данные (submitting / начало polling),
+        // показываем indeterminate-полоску — пользователь видит активную работу, а не «0% = завис».
+        const isIndeterminate = pct === 0;
+        this._barFill.classList.toggle('is-indeterminate', isIndeterminate);
+        if (!isIndeterminate) {
+            this._barFill.style.width = `${pct}%`;
+        }
+        this._percentLabel.textContent = `${pct}%`;
+
+        if (stage === 'texture') {
+            this._stageLabel.textContent = 'Генерация текстуры…';
+        } else if (status === 'submitting') {
+            this._stageLabel.textContent = 'Отправка запроса…';
+        } else {
+            this._stageLabel.textContent = 'Генерация геометрии…';
+        }
+    }
+
+    /** Убирает DOM-элемент из контейнера, не разрушая объект. */
+    detach() {
+        if (this._el && this._el.parentNode) {
+            this._el.parentNode.removeChild(this._el);
+        }
+        this._el = null;
+        this._barFill = null;
+        this._stageLabel = null;
+        this._percentLabel = null;
+        this._container = null;
+    }
+
+    destroy() {
+        this.detach();
+    }
+}

package/src/ui/chat/icons.js

@@ -59,6 +59,7 @@ const MODEL_BOT_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="36" heigh
 
 export const ICONS = {
     bot: svg('<path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>'),
+    cube: svg('<path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>'),
     modelBot: MODEL_BOT_ICON,
     image: IMAGE_ICON,
     video: VIDEO_ICON,

package/src/ui/handles/HandlesDomRenderer.js

@@ -10,6 +10,7 @@ import { MindmapStatePatchCommand } from '../../core/commands/MindmapStatePatchC
 
 const HANDLES_ACCENT_COLOR = '#80D8FF';
 const REVIT_SHOW_IN_MODEL_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true" focusable="false"><path d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z"/></svg>';
+const MODEL3D_SHOW_IN_VIEWER_ICON_SVG = REVIT_SHOW_IN_MODEL_ICON_SVG;
 const MINDMAP_CHILD_WIDTH_FACTOR = 0.9;
 const MINDMAP_CHILD_HEIGHT_FACTOR = 0.8;
 const MINDMAP_CHILD_PADDING_FACTOR = 0.5;
@@ -1158,6 +1159,9 @@ export class HandlesDomRenderer {
         let isMindmapOnlyGroupTarget = false;
         let isRevitScreenshotTarget = false;
         let revitViewPayload = null;
+        let isModel3dScreenshotTarget = false;
+        let model3dModelUrl = null;
+        let model3dFormat = null;
         let sourceMindmapProperties = null;
         const occupiedOutgoingSides = new Set();
         const hiddenIncomingSide = { value: null };
@@ -1170,6 +1174,9 @@ export class HandlesDomRenderer {
             isMindmapTarget = mbType === 'mindmap';
             isRevitScreenshotTarget = mbType === 'revit-screenshot-img';
             revitViewPayload = req.pixiObject?._mb?.properties?.view || null;
+            isModel3dScreenshotTarget = mbType === 'model3d-screenshot-img';
+            model3dModelUrl = req.pixiObject?._mb?.properties?.modelUrl || null;
+            model3dFormat = req.pixiObject?._mb?.properties?.format || null;
             if (isMindmapTarget) {
                 sourceMindmapProperties = req.pixiObject?._mb?.properties || null;
                 const allObjects = this.host.core?.state?.state?.objects || [];
@@ -1667,6 +1674,29 @@ export class HandlesDomRenderer {
             }
         }
 
+        if (isModel3dScreenshotTarget && typeof model3dModelUrl === 'string' && model3dModelUrl.length > 0) {
+            const showInViewerButton = document.createElement('button');
+            showInViewerButton.type = 'button';
+            showInViewerButton.className = 'mb-revit-show-in-model';
+            showInViewerButton.innerHTML = `${MODEL3D_SHOW_IN_VIEWER_ICON_SVG}<span>Показать в модели</span>`;
+            showInViewerButton.style.left = `${Math.round(left + width / 2)}px`;
+            showInViewerButton.style.top = `${Math.round(top - 34)}px`;
+            showInViewerButton.addEventListener('pointerdown', (evt) => {
+                evt.preventDefault();
+                evt.stopPropagation();
+            });
+            showInViewerButton.addEventListener('click', (evt) => {
+                evt.preventDefault();
+                evt.stopPropagation();
+                this.host.eventBus.emit(Events.UI.Model3dShowInViewer, {
+                    objectId: id,
+                    modelUrl: model3dModelUrl,
+                    format: model3dFormat,
+                });
+            });
+            this.host.layer.appendChild(showInViewerButton);
+        }
+
         if (isRevitScreenshotTarget && typeof revitViewPayload === 'string' && revitViewPayload.length > 0) {
             const showInModelButton = document.createElement('button');
             showInModelButton.type = 'button';

package/src/ui/styles/chat.css

@@ -734,13 +734,188 @@
 
 .moodboard-chat__pending-image-label {
     position: absolute;
-    bottom: 10px;
-    left: 12px;
+    bottom: var(--moodboard-chat-pending-label-bottom, 10px);
+    left: var(--moodboard-chat-pending-label-left, 12px);
     font-family: 'GeistSans', 'GeistSans Fallback', 'Roboto', Arial, sans-serif;
-    font-size: 20px;
+    font-size: var(--moodboard-chat-pending-label-font-size, 20px);
     font-weight: 400;
     color: #ffffff;
     pointer-events: none;
+    white-space: nowrap;
+    text-align: left;
+}
+
+/* ── Прогресс генерации 3D-модели в композере ───────────────────────── */
+.moodboard-chat__3d-overlay {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 2px 6px 4px 10px;
+}
+
+.moodboard-chat__3d-overlay-inner {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.moodboard-chat__3d-overlay-stage {
+    flex: 0 0 auto;
+    font-family: 'GeistSans', 'GeistSans Fallback', 'Roboto', Arial, sans-serif;
+    font-size: 12px;
+    line-height: 1;
+    white-space: nowrap;
+    /* «Живой» переливающийся текст, как у статус-бара генерации изображений */
+    background: linear-gradient(
+        90deg,
+        #9CA3AF 0%,
+        #9CA3AF 20%,
+        #4B5563 40%,
+        #4B5563 60%,
+        #9CA3AF 80%,
+        #9CA3AF 100%
+    );
+    background-size: 200% 100%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    animation: moodboard-chat-shimmer 1.8s linear infinite;
+}
+
+.moodboard-chat__3d-overlay-bar-wrap {
+    position: relative;
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 6px;
+    border-radius: 999px;
+    background: rgba(17, 24, 39, 0.08);
+    overflow: hidden;
+}
+
+.moodboard-chat__3d-overlay-bar-fill {
+    height: 100%;
+    width: 0;
+    border-radius: inherit;
+    /* Двухцветная гамма мудборда: тёмный → светло-серый → тёмный, мягкое переливание */
+    background-image: linear-gradient(90deg, #111827 0%, #9CA3AF 50%, #111827 100%);
+    background-size: 300% 100%;
+    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
+    animation: moodboard-chat-bar-shimmer 2.5s linear infinite;
+}
+
+/* Indeterminate: прогресс ещё не пришёл — скользящая полоса вместо застывшего 0% */
+.moodboard-chat__3d-overlay-bar-fill.is-indeterminate {
+    width: 35% !important;
+    transition: none;
+    animation: moodboard-chat-bar-indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes moodboard-chat-bar-shimmer {
+    from { background-position: 100% 0; }
+    to   { background-position: 0% 0; }
+}
+
+@keyframes moodboard-chat-bar-indeterminate {
+    0%   { transform: translateX(-160%); }
+    100% { transform: translateX(450%); }
+}
+
+.moodboard-chat__3d-overlay-percent {
+    flex: 0 0 auto;
+    min-width: 30px;
+    text-align: right;
+    font-family: 'GeistSans', 'GeistSans Fallback', 'Roboto', Arial, sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
+    color: #111827;
+    font-variant-numeric: tabular-nums;
+}
+
+/* Состояние ошибки: красный текст, полоса и проценты скрыты */
+.moodboard-chat__3d-overlay.is-error .moodboard-chat__3d-overlay-stage {
+    background: none;
+    -webkit-text-fill-color: #B91C1C;
+    color: #B91C1C;
+    animation: none;
+}
+
+.moodboard-chat__3d-overlay.is-error .moodboard-chat__3d-overlay-bar-wrap,
+.moodboard-chat__3d-overlay.is-error .moodboard-chat__3d-overlay-percent {
+    display: none;
+}
+
+/* ── Скелетон 3D-модели на доске ─────────────────────────────────────── */
+.moodboard-chat__3d-skeleton {
+    position: fixed;
+    box-sizing: border-box;
+    background: #ffffff;
+    border-radius: 12px;
+    box-shadow:
+        0 0 0 1px rgba(17, 24, 39, 0.08),
+        0 8px 24px rgba(15, 23, 42, 0.10);
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+        left var(--moodboard-chat-board-animation-ms, 520ms) cubic-bezier(0.22, 1, 0.36, 1),
+        top var(--moodboard-chat-board-animation-ms, 520ms) cubic-bezier(0.22, 1, 0.36, 1),
+        opacity 360ms ease,
+        transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
+    will-change: transform, opacity;
+}
+
+/* Бегущий блик по поверхности скелетона */
+.moodboard-chat__3d-skeleton::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+        100deg,
+        transparent 30%,
+        rgba(17, 24, 39, 0.07) 50%,
+        transparent 70%
+    );
+    background-size: 220% 100%;
+    animation: moodboard-chat-skeleton-sweep 1.6s linear infinite;
+}
+
+.moodboard-chat__3d-skeleton-icon {
+    position: relative;
+    z-index: 1;
+    width: 34%;
+    max-width: 72px;
+    color: #9CA3AF;
+    animation: moodboard-chat-skeleton-pulse 1.8s ease-in-out infinite;
+}
+
+.moodboard-chat__3d-skeleton-icon svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.moodboard-chat__3d-skeleton--enter {
+    opacity: 0;
+    transform: scale(0.92);
+}
+
+.moodboard-chat__3d-skeleton--entered {
+    opacity: 1;
+    transform: scale(1);
+}
+
+@keyframes moodboard-chat-skeleton-sweep {
+    from { background-position: 160% 0; }
+    to   { background-position: -60% 0; }
+}
+
+@keyframes moodboard-chat-skeleton-pulse {
+    0%, 100% { opacity: 0.4; transform: translateY(0) scale(1); }
+    50%      { opacity: 0.85; transform: translateY(-2px) scale(1.05); }
 }
 
 /* Блок ошибки сервера */