@sequent-org/moodboard 1.4.42 → 1.4.44

package/package.json

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

package/src/services/ai/AiClient.js

@@ -28,7 +28,10 @@ export class AiClient {
 
     /**
      * Список доступных провайдеров.
-     * @returns {Promise<Array<{id: string, label: string, enabled: boolean}>>}
+     *
+     * @returns {Promise<Array<{id: string, label: string, enabled: boolean, supportedRatios: string[]|null}>>}
+     *   supportedRatios — массив id форматов из FORMAT_OPTIONS (например ['1:1','3:2','2:3']),
+     *   либо null, если провайдер не ограничивает доступные соотношения сторон.
      */
     async listProviders() {
         const res = await this._fetch(`${this._baseUrl}/providers`, {

package/src/ui/chat/ChatWindow.js

@@ -26,7 +26,7 @@ const CONTENT_TYPE_OPTIONS = [
     }
 ];
 
-/** Порядок: портрет (строка 1), авто + альбом (строка 2) — соответствует грид-меню */
+/** Порядок: портрет (строка 1), альбом (строка 2), авто — крайнее правое */
 const FORMAT_OPTIONS = [
     { id: '1:1',   label: '1:1',   icon: RATIO_ICONS['1:1']   },
     { id: '4:5',   label: '4:5',   icon: RATIO_ICONS['4:5']   },
@@ -35,13 +35,13 @@ const FORMAT_OPTIONS = [
     { id: '2:3',   label: '2:3',   icon: RATIO_ICONS['2:3']   },
     { id: '9:16',  label: '9:16',  icon: RATIO_ICONS['9:16']  },
     { id: '1:2',   label: '1:2',   icon: RATIO_ICONS['1:2']   },
-    { id: 'auto',  label: 'Auto',  icon: RATIO_ICONS['auto']  },
     { id: '5:4',   label: '5:4',   icon: RATIO_ICONS['5:4']   },
     { id: '4:3',   label: '4:3',   icon: RATIO_ICONS['4:3']   },
     { id: '14:10', label: '14:10', icon: RATIO_ICONS['14:10'] },
     { id: '3:2',   label: '3:2',   icon: RATIO_ICONS['3:2']   },
     { id: '16:9',  label: '16:9',  icon: RATIO_ICONS['16:9']  },
     { id: '2:1',   label: '2:1',   icon: RATIO_ICONS['2:1']   },
+    { id: 'auto',  label: 'Auto',  icon: RATIO_ICONS['auto']  },
 ];
 
 const COUNT_OPTIONS = [
@@ -61,6 +61,10 @@ const BOARD_IMAGE_REARRANGE_MS = 520;
 const BOARD_IMAGE_PENDING_ENTER_FACTOR = 1.6;
 // Каскад между блоками одного батча (мс): пользователь видит, что они приезжают друг за другом.
 const BOARD_IMAGE_PENDING_STAGGER_MS = 90;
+// Референсная высота ряда AI-картинок: центры выравниваются по одной оси независимо от формата.
+const BOARD_IMAGE_LANE_REFERENCE_RATIO = [2, 3];
+const BOARD_IMAGE_LANE_CENTER_OFFSET = 250;
+const BOARD_IMAGE_LANE_UI_GAP = 16;
 
 const MODEL_OPTIONS = [
     {
@@ -135,6 +139,7 @@ export class ChatWindow {
         this._modelMenu = null;
         this._formatId = 'auto';
         this._formatMenu = null;
+        this._providers = [];
         this._countId = 'auto';
         this._countMenu = null;
         this._unsubscribe = null;
@@ -151,6 +156,7 @@ export class ChatWindow {
         this._aiImageLaneHandlers = null;
         this._selectionHandlers = null;
         this._viewportHandlers = null;
+        this._boardObjectHandlers = null;
         // Окно от BoxSelectStart до BoxSelectCommit: в это время SelectionAdd
         // приходит на каждый mousemove и не должен пушить превью в чат —
         // финальный набор картинок мы получим из BoxSelectCommit по strict-contains.
@@ -185,6 +191,7 @@ export class ChatWindow {
         this._attachSelectionEvents();
         this._attachViewportSync();
         this._attachAiImageLaneEvents();
+        this._attachBoardObjectEvents();
 
         this._extendedPromptModal = new ChatExtendedPromptModal(
             this._container,
@@ -219,6 +226,7 @@ export class ChatWindow {
                 onSelect: (id) => {
                     this._modelId = id;
                     this._modelMenu.refresh();
+                    this._clampFormatToModel();
                 }
             }
         );
@@ -227,7 +235,7 @@ export class ChatWindow {
         this._formatMenu = new ChatPillMenu(
             { trigger: this._refs.formatPill, menu: this._refs.formatMenu, label: this._refs.formatLabel },
             {
-                getOptions: () => FORMAT_OPTIONS,
+                getOptions: () => this._getSupportedFormatOptions(),
                 getActiveId: () => this._formatId,
                 onSelect: (id) => {
                     this._formatId = id;
@@ -272,6 +280,7 @@ export class ChatWindow {
         this._detachSelectionEvents();
         this._detachViewportSync();
         this._detachAiImageLaneEvents();
+        this._detachBoardObjectEvents();
         this._shiftedForImageBatchKeys.clear();
         this._boardImageShiftHistory.clear();
         this._pendingBatchOffsets.clear();
@@ -332,13 +341,65 @@ export class ChatWindow {
     async _loadProviders() {
         try {
             const list = await this._aiClient.listProviders();
+            this._providers = Array.isArray(list) ? list : [];
             this._session.setAvailableProviders(list);
+            this._clampFormatToModel();
         } catch (err) {
             console.warn('[ChatWindow] cannot load providers:', err.message);
+            this._providers = [];
             this._session.setAvailableProviders([]);
         }
     }
 
+    /**
+     * Возвращает id провайдера изображений для текущей модели.
+     * Дублирует логику из _getImageRequestOptions, чтобы не привязываться к payload-контексту.
+     *
+     * @param {string} modelId
+     * @returns {string}
+     */
+    _imageProviderForModel(modelId) {
+        return modelId === 'gpt' ? 'openai-image' : 'yandex-art';
+    }
+
+    /**
+     * Возвращает подмножество FORMAT_OPTIONS, поддерживаемое текущим провайдером.
+     * Если провайдер не ограничивает форматы (supportedRatios === null) — возвращает все.
+     * Формат 'auto' присутствует всегда.
+     *
+     * @returns {Array}
+     */
+    _getSupportedFormatOptions() {
+        const providerId = this._imageProviderForModel(this._modelId);
+        const provider = this._providers.find((p) => p.id === providerId);
+        const ratios = provider?.supportedRatios;
+
+        if (!Array.isArray(ratios) || ratios.length === 0) {
+            return FORMAT_OPTIONS;
+        }
+
+        return FORMAT_OPTIONS.filter((opt) => opt.id === 'auto' || ratios.includes(opt.id));
+    }
+
+    /**
+     * При смене модели проверяет, что текущий формат входит в список поддерживаемых.
+     * Если нет — сбрасывает на 'auto'.
+     */
+    _clampFormatToModel() {
+        const supported = this._getSupportedFormatOptions();
+        const stillValid = supported.some((opt) => opt.id === this._formatId);
+        if (!stillValid) {
+            this._formatId = 'auto';
+        }
+        // refresh обновляет лейбл из option.label ('Auto'), поэтому _updateFormatPillLabel
+        // вызывается после — она выставляет человекочитаемый текст 'Соотношение сторон'.
+        this._formatMenu?.refresh();
+        if (!stillValid) {
+            this._updateFormatPillIcon();
+            this._updateFormatPillLabel();
+        }
+    }
+
     _render(state) {
         if (!this._attached && !this._refs) return;
         this._syncGeneratedImagesToBoard(state.messages);
@@ -494,6 +555,68 @@ export class ChatWindow {
                 this._scheduleAnimationFrame(trigger);
             }
         });
+
+        // Детерминированная гарантия отсутствия наложения: считается в чистом world-space,
+        // поэтому не зависит ни от зума, ни от порядка/тайминга батчей. Срабатывает только
+        // когда после всех остальных сдвигов изображение всё ещё заходит на слот заглушки
+        // (idempotent: при overflow <= 0 — no-op, не трогает «подтягивание вправо» и drag).
+        this._ensureExistingImagesClearOfPending();
+    }
+
+    _ensureExistingImagesClearOfPending() {
+        if (this._pendingOverlays.size === 0) {
+            return;
+        }
+
+        let minPlaceholderLeft = Infinity;
+        for (const record of this._pendingOverlays.values()) {
+            if (Number.isFinite(record.worldX)) {
+                minPlaceholderLeft = Math.min(minPlaceholderLeft, record.worldX - BOARD_IMAGE_WIDTH / 2);
+            }
+        }
+        if (!Number.isFinite(minPlaceholderLeft)) {
+            return;
+        }
+
+        const boundary = minPlaceholderLeft - BOARD_IMAGE_GAP;
+        const objects = this._getBoardAiImageObjects()
+            .filter((obj) => obj?.position && !this._draggingAiImageIds.has(obj.id));
+        if (objects.length === 0) {
+            return;
+        }
+
+        let maxRight = -Infinity;
+        for (const obj of objects) {
+            const slot = this._getAiImageLaneSlotForObject(obj);
+            const left = slot?.x ?? obj.position.x;
+            const width = slot?.width ?? getBoardObjectWidth(obj);
+            maxRight = Math.max(maxRight, left + width);
+        }
+
+        const overflow = Math.ceil(maxRight - boundary);
+        if (overflow <= 0) {
+            return;
+        }
+
+        for (const obj of objects) {
+            const key = getAiImageLaneKeyForObject(obj);
+            const slot = this._getAiImageLaneSlotForObject(obj);
+            const targetX = Math.round((slot?.x ?? obj.position.x) - overflow);
+            const targetY = slot?.y ?? obj.position.y;
+            if (key) {
+                this._aiImageLaneSlots.set(key, {
+                    x: targetX,
+                    y: targetY,
+                    width: slot?.width ?? getBoardObjectWidth(obj),
+                    height: slot?.height ?? getBoardObjectHeight(obj)
+                });
+            }
+            this._animateBoardImageToPosition(
+                obj.id,
+                { x: obj.position.x, y: obj.position.y },
+                { x: targetX, y: targetY }
+            );
+        }
     }
 
     _cancelPendingOverlayTimer(id) {
@@ -553,8 +676,11 @@ export class ChatWindow {
     _shiftPendingOverlaysForNewBatch(batchId, count, scale) {
         if (!batchId || this._pendingBatchOffsets.has(batchId)) return;
 
-        const step = Math.round(BOARD_IMAGE_STEP * scale);
-        const shiftAmount = count * step;
+        // Offset храним в world-units, чтобы расстояние между батчами оставалось
+        // стабильным при изменении zoom между промптами. Если хранить в screen-px,
+        // накопленные смещения «протухают» при следующем масштабе и батчи едут друг
+        // на друга.
+        const shiftAmount = count * BOARD_IMAGE_STEP;
 
         for (const [existingId, offset] of this._pendingBatchOffsets) {
             this._pendingBatchOffsets.set(existingId, offset - shiftAmount);
@@ -578,7 +704,8 @@ export class ChatWindow {
         // правее заглушек и перекроются ими.
         if (!existingOverlaysShifted) return;
 
-        const worldShift = shiftAmount / scale;
+        // shiftAmount уже в world-units (см. инициализацию выше).
+        const worldShift = shiftAmount;
         for (const obj of this._getBoardAiImageObjects()) {
             if (obj?.position) {
                 const key = getAiImageLaneKeyForObject(obj);
@@ -710,6 +837,9 @@ export class ChatWindow {
         };
         const onViewportChange = () => {
             this._syncPendingOverlaysToViewport({ disableTransition: true, recomputeWorld: false });
+            // Зум меняет проекцию композера в мир: после него существующее изображение может
+            // оказаться под заглушкой. Перепроверяем инвариант сразу, не дожидаясь рендера сессии.
+            this._ensureExistingImagesClearOfPending();
         };
 
         this._viewportHandlers = { onPanUpdate, onViewportChange };
@@ -729,6 +859,59 @@ export class ChatWindow {
         this._viewportHandlers = null;
     }
 
+    _attachBoardObjectEvents() {
+        const eventBus = this._boardCore?.eventBus;
+        if (!eventBus || typeof eventBus.on !== 'function' || this._boardObjectHandlers) return;
+
+        // Если в момент рендера активных pending-заглушек state.objects ещё пустой
+        // (быстрый промпт сразу после refresh страницы, асинхронная загрузка доски с сервера),
+        // `_shiftExistingImagesForBatch` выходит без выставления флага в расчёте на повтор
+        // на следующем рендере. Но повтор не гарантирован: session-стейт может больше не меняться,
+        // пока генерация не завершится, и `_render` не вызовется. Поэтому материализацию объектов
+        // ловим напрямую и сами повторяем shift + safety-net.
+        const onBoardObjectChange = () => {
+            this._recheckPendingShifts();
+        };
+
+        this._boardObjectHandlers = { onBoardObjectChange };
+        eventBus.on(Events.Object.Created, onBoardObjectChange);
+        eventBus.on(Events.Board.Loaded, onBoardObjectChange);
+    }
+
+    _detachBoardObjectEvents() {
+        const eventBus = this._boardCore?.eventBus;
+        const handlers = this._boardObjectHandlers;
+        if (!eventBus || typeof eventBus.off !== 'function' || !handlers) return;
+
+        eventBus.off(Events.Object.Created, handlers.onBoardObjectChange);
+        eventBus.off(Events.Board.Loaded, handlers.onBoardObjectChange);
+        this._boardObjectHandlers = null;
+    }
+
+    _recheckPendingShifts() {
+        if (this._pendingOverlays.size === 0) return;
+
+        const messages = this._session?.getState?.()?.messages || [];
+        const pending = messages.filter((m) => m?.pending && m?.kind === 'image');
+        if (pending.length === 0) {
+            this._ensureExistingImagesClearOfPending();
+            return;
+        }
+
+        const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
+        const s = world?.scale?.x || 1;
+
+        const shiftedBids = new Set();
+        for (const m of pending) {
+            const bid = m.batchId || m.id;
+            if (shiftedBids.has(bid)) continue;
+            shiftedBids.add(bid);
+            this._shiftExistingImagesForBatch(messages, m.id, s);
+        }
+
+        this._ensureExistingImagesClearOfPending();
+    }
+
     _attachAiImageLaneEvents() {
         const eventBus = this._boardCore?.eventBus;
         if (!eventBus || typeof eventBus.on !== 'function' || this._aiImageLaneHandlers) return;
@@ -885,8 +1068,12 @@ export class ChatWindow {
         const step = Math.round(BOARD_IMAGE_STEP * scale);
         const count = Math.max(batch.count, 1);
         const index = Math.min(Math.max(batch.index, 0), count - 1);
-        const batchOffset = batch.batchId ? (this._pendingBatchOffsets.get(batch.batchId) ?? 0) : 0;
-        const leftmostCenter = anchor.x - ((count - 1) * step) / 2 + batchOffset;
+        // _pendingBatchOffsets хранятся в world-units и переводятся в screen
+        // под текущий scale: устаревшие при изменении zoom между батчами screen-смещения
+        // больше не «протухают».
+        const batchOffsetWorld = batch.batchId ? (this._pendingBatchOffsets.get(batch.batchId) ?? 0) : 0;
+        const batchOffsetScreen = Math.round(batchOffsetWorld * scale);
+        const leftmostCenter = anchor.x - ((count - 1) * step) / 2 + batchOffsetScreen;
 
         return {
             x: Math.round(leftmostCenter + index * step),
@@ -894,23 +1081,77 @@ export class ChatWindow {
         };
     }
 
-    _getImageGroupAnchor() {
-        const composerRect = this._refs?.composer?.getBoundingClientRect?.();
-        if (composerRect) {
-            let y = composerRect.top - 250;
-            
-            const errorBlock = this._refs?.errorBlock;
-            if (errorBlock && errorBlock.classList.contains('is-visible')) {
-                const errorRect = errorBlock.getBoundingClientRect();
-                // Низ картинок примерно y + 150.
-                // Хотим чтобы errorRect.top был хотя бы y + 150 + 16 (gap)
-                // То есть y + 166 <= errorRect.top
-                const minY = errorRect.top - 166;
+    _getAiImageLaneCenterScreenY(scale = null) {
+        const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
+        // scale по умолчанию null, иначе truthy-единица перекрывала бы реальный
+        // world.scale.x: экранная Y считалась бы при масштабе 1, и на зуме (0.1)
+        // обратная конвертация в мир завышала Y в 10 раз — ряд уезжал вниз.
+        const s = scale || world?.scale?.x || 1;
+        const worldOffsetY = world?.y || 0;
+
+        for (const record of this._pendingOverlays.values()) {
+            if (Number.isFinite(record.worldY)) {
+                return Math.round(record.worldY * s + worldOffsetY);
+            }
+        }
+
+        for (const object of this._getBoardAiImageObjects()) {
+            if (!object?.position) continue;
+
+            const height = getBoardObjectHeight(object);
+            return Math.round((object.position.y + height / 2) * s + worldOffsetY);
+        }
+
+        for (const slot of this._aiImageLaneSlots.values()) {
+            if (slot && Number.isFinite(slot.y) && Number.isFinite(slot.height)) {
+                return Math.round((slot.y + slot.height / 2) * s + worldOffsetY);
+            }
+        }
+
+        return null;
+    }
+
+    _clampImageGroupAnchorY(y, referenceHeight) {
+        const clearance = Math.round(referenceHeight / 2) + BOARD_IMAGE_LANE_UI_GAP;
+
+        const errorBlock = this._refs?.errorBlock;
+        if (errorBlock && errorBlock.classList.contains('is-visible')) {
+            const errorRect = errorBlock.getBoundingClientRect();
+            if (errorRect.height > 0) {
+                const minY = errorRect.top - clearance;
+                if (y > minY) {
+                    y = minY;
+                }
+            }
+        }
+
+        const statusBar = this._refs?.statusBar;
+        if (statusBar && statusBar.classList.contains('is-visible')) {
+            const statusRect = statusBar.getBoundingClientRect();
+            // jsdom отдаёт нулевой rect — без реальной геометрии не сдвигаем ряд.
+            if (statusRect.height > 0 && statusRect.top > 0) {
+                const minY = statusRect.top - clearance;
                 if (y > minY) {
                     y = minY;
                 }
             }
-            
+        }
+
+        return y;
+    }
+
+    _getImageGroupAnchor() {
+        const composerRect = this._refs?.composer?.getBoundingClientRect?.();
+        if (composerRect) {
+            const existingCenterY = this._getAiImageLaneCenterScreenY();
+            const [wr, hr] = parseFormatRatio(this._formatId);
+            const actualHeight = Math.round(BOARD_IMAGE_WIDTH / (wr / hr));
+            let y = existingCenterY ?? (composerRect.top - Math.round(actualHeight / 2) - BOARD_IMAGE_LANE_UI_GAP);
+
+            if (existingCenterY == null) {
+                y = this._clampImageGroupAnchorY(y, actualHeight);
+            }
+
             return {
                 x: Math.round(composerRect.left + composerRect.width / 2),
                 y: Math.round(y)
@@ -933,6 +1174,11 @@ export class ChatWindow {
         const batchKey = getImageGenerationBatchKey(batch);
         if (this._shiftedForImageBatchKeys.has(batchKey)) return;
 
+        // Объект готового изображения создаётся асинхронно (img.onload в ClipboardFlow).
+        // Пока его нет в state.objects — не фиксируем флаг: следующий рендер повторит попытку,
+        // когда объект уже появится, и сдвиг отработает корректно.
+        if (this._getBoardAiImageObjects().length === 0) return;
+
         this._shiftedForImageBatchKeys.add(batchKey);
         this._shiftBoardAiImagesLeft(this._getImageBatchWorldBounds(messages, messageId, scale), batchKey);
     }
@@ -960,8 +1206,12 @@ export class ChatWindow {
 
         const existingRight = this._getAiImageLaneRightBoundary(aiObjects);
         if (!Number.isFinite(existingRight)) return;
+        // shift > 0 — ряд истории уезжает влево, освобождая место под новый батч.
+        // shift < 0 — новый батч приземлился правее ряда (после зума «к точке»
+        // мировая проекция композера уехала далеко от уже стоящих картинок),
+        // поэтому ряд нужно подтянуть вправо к батчу, иначе картинки расползаются.
         const shift = Math.ceil(existingRight + BOARD_IMAGE_GAP - nextBatchBounds.left);
-        if (shift <= 0) return;
+        if (shift === 0) return;
 
         const ids = new Set(aiObjects.map((object) => object.id));
         const objects = this._boardCore?.state?.state?.objects;
@@ -1311,12 +1561,11 @@ export class ChatWindow {
             const key = getAiImageLaneKeyForObject(object);
             if (key === excludeKey) continue;
 
-            const slot = {
-                x: Math.round(object.position.x),
-                y: Math.round(object.position.y),
-                width: getBoardObjectWidth(object),
-                height: getBoardObjectHeight(object)
-            };
+            // Используем слот из кэша — он отражает целевую позицию после анимации сдвига.
+            // object.position содержит текущую (промежуточную) позицию, которая ещё не достигла цели,
+            // что приводит к ложным «нет пересечения» и последующему наезду.
+            const slot = this._getAiImageLaneSlotForObject(object);
+            if (!slot) continue;
 
             if (rectsOverlap(candidate, slot)) {
                 return true;
@@ -1386,6 +1635,11 @@ export class ChatWindow {
     }
 }
 
+function getBoardImageReferenceHeight() {
+    const [widthRatio, heightRatio] = BOARD_IMAGE_LANE_REFERENCE_RATIO;
+    return Math.round(BOARD_IMAGE_WIDTH / (widthRatio / heightRatio));
+}
+
 function parseFormatRatio(formatId) {
     if (!formatId || formatId === 'auto') {
         return [1, 1];