@sequent-org/moodboard 1.4.57 → 1.4.59

package/package.json

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

package/src/core/ApiClient.js

@@ -241,7 +241,30 @@ export class ApiClient {
                 }
                 return cleanedObj;
             }
-            
+
+            if (obj.type === 'video') {
+                const topSrcRaw = typeof obj.src === 'string' ? obj.src : '';
+                const propSrcRaw = typeof obj.properties?.src === 'string' ? obj.properties.src : '';
+                const normalizedSrc = topSrcRaw.trim() || propSrcRaw.trim();
+
+                if (!normalizedSrc) {
+                    throw new Error(`Video object "${obj.id || 'unknown'}" has no src. Save is blocked.`);
+                }
+                if (/^data:/i.test(normalizedSrc) || /^blob:/i.test(normalizedSrc)) {
+                    throw new Error(`Video object "${obj.id || 'unknown'}" contains forbidden data/blob src. Save is blocked.`);
+                }
+
+                const cleanedObj = {
+                    ...obj,
+                    src: normalizedSrc
+                };
+                if (cleanedObj.properties?.src) {
+                    cleanedObj.properties = { ...cleanedObj.properties };
+                    delete cleanedObj.properties.src;
+                }
+                return cleanedObj;
+            }
+
             return obj;
         });
 
@@ -296,7 +319,23 @@ export class ApiClient {
                     }
                     return restoredObj;
                 }
-                
+
+                if (obj.type === 'video') {
+                    const topSrc = typeof obj.src === 'string' ? obj.src.trim() : '';
+                    const propSrc = typeof obj.properties?.src === 'string' ? obj.properties.src.trim() : '';
+                    const normalizedSrc = topSrc || propSrc;
+                    if (!normalizedSrc) return obj;
+                    const restoredObj = {
+                        ...obj,
+                        src: normalizedSrc
+                    };
+                    if (restoredObj.properties?.src) {
+                        restoredObj.properties = { ...restoredObj.properties };
+                        delete restoredObj.properties.src;
+                    }
+                    return restoredObj;
+                }
+
                 return obj;
             })
         );

package/src/core/PixiEngine.js

@@ -248,7 +248,16 @@ export class PixiEngine {
         const pixiObject = this.objects.get(objectId);
         if (pixiObject) {
             console.log('🗑️ PixiEngine: удаляем объект из сцены:', objectId);
-            
+
+            // Видео: останавливаем HTMLVideoElement и снимаем listeners до уничтожения
+            // спрайта. Без этого видео продолжает играть и тикать текстуру — утечка.
+            // Хук сужен до 'video', чтобы не задеть destroy() фреймов/коннекторов,
+            // у которых контейнер уничтожается общим путём ниже (иначе двойной destroy).
+            const mbMeta = pixiObject._mb;
+            if (mbMeta?.type === 'video' && typeof mbMeta.instance?.destroy === 'function') {
+                try { mbMeta.instance.destroy(); } catch (_) {}
+            }
+
             // Удаляем из родительского контейнера
             if (this.worldLayer) {
                 this.worldLayer.removeChild(pixiObject);

package/src/core/commands/UpdateContentCommand.js

@@ -47,11 +47,19 @@ export class UpdateContentCommand extends BaseCommand {
             if (!object.properties) {
                 object.properties = {};
             }
-            // Пересчитываем диапазоны ссылок при изменении контента
+            // Пересчитываем диапазоны ссылок и подсветки при изменении контента
+            const oldContent = object.properties.content ?? '';
             if (Array.isArray(object.properties.links) && object.properties.links.length > 0) {
                 object.properties.links = _adjustLinks(
                     object.properties.links,
-                    object.properties.content ?? '',
+                    oldContent,
+                    content
+                );
+            }
+            if (Array.isArray(object.properties.highlights) && object.properties.highlights.length > 0) {
+                object.properties.highlights = _adjustHighlights(
+                    object.properties.highlights,
+                    oldContent,
                     content
                 );
             }
@@ -142,3 +150,41 @@ function _adjustLinks(links, oldText, newText) {
         return acc;
     }, []);
 }
+
+/**
+ * Пересчитывает диапазоны подсветки после изменения контента.
+ * Алгоритм идентичен _adjustLinks: общий префикс/суффикс, сдвиг или удаление.
+ * @param {Array<{start:number,end:number,color:string}>} highlights
+ * @param {string} oldText
+ * @param {string} newText
+ * @returns {Array<{start:number,end:number,color:string}>}
+ */
+function _adjustHighlights(highlights, oldText, newText) {
+    if (!highlights || highlights.length === 0) return highlights;
+
+    let prefixLen = 0;
+    const minLen = Math.min(oldText.length, newText.length);
+    while (prefixLen < minLen && oldText[prefixLen] === newText[prefixLen]) prefixLen++;
+
+    let oldSuffix = 0;
+    while (
+        oldSuffix < oldText.length - prefixLen &&
+        oldSuffix < newText.length - prefixLen &&
+        oldText[oldText.length - 1 - oldSuffix] === newText[newText.length - 1 - oldSuffix]
+    ) oldSuffix++;
+
+    const oldChangeEnd = oldText.length - oldSuffix;
+    const newChangeEnd = newText.length - oldSuffix;
+    const delta = newChangeEnd - oldChangeEnd;
+
+    return highlights.reduce((acc, hi) => {
+        const { start, end, color } = hi;
+        if (end <= prefixLen) {
+            acc.push({ start, end, color });
+        } else if (start >= oldChangeEnd) {
+            acc.push({ start: start + delta, end: end + delta, color });
+        }
+        // Подсветка перекрывает изменённый диапазон — удаляем
+        return acc;
+    }, []);
+}

package/src/core/events/Events.js

@@ -63,6 +63,7 @@ export const Events = {
 		PasteAt: 'ui:paste-at',
         PasteImage: 'ui:paste-image',
         PasteImageAt: 'ui:paste-image-at',
+        PasteVideoAt: 'ui:paste-video-at',
 		ZoomIn: 'ui:zoom:in',
 		ZoomOut: 'ui:zoom:out',
 		ZoomReset: 'ui:zoom:reset',

package/src/core/flows/ClipboardFlow.js

@@ -380,6 +380,54 @@ export function setupClipboardFlow(core) {
         }
     });
 
+    core.eventBus.on(Events.UI.PasteVideoAt, ({ x, y, src, mimeType, poster, aiMessageId, skipUpload = true }) => {
+        if (!src) return;
+        const world = core.pixi.worldLayer || core.pixi.app.stage;
+        const s = world?.scale?.x || 1;
+        const worldX = (x - (world?.x || 0)) / s;
+        const worldY = (y - (world?.y || 0)) / s;
+
+        const placeVideo = (natW, natH) => {
+            const ar = (natW > 0 && natH > 0) ? natW / natH : (16 / 9);
+            const w = 300;
+            const h = Math.max(1, Math.round(w / ar));
+            const created = core.createObject(
+                'video',
+                { x: Math.round(worldX - Math.round(w / 2)), y: Math.round(worldY - Math.round(h / 2)) },
+                {
+                    src,
+                    width: w,
+                    height: h,
+                    mimeType: mimeType || 'video/mp4',
+                    poster: poster || null,
+                    loop: true,
+                    muted: true,
+                    ...(aiMessageId ? { aiMessageId } : {})
+                }
+            );
+            // Видео не проходит через SaveManager до подтверждения — раскрываем сразу,
+            // как для AI-картинок и 3D-скринов.
+            if (skipUpload && created?.id) {
+                core._pendingPersistAckVisibilityIds?.delete(created.id);
+                core._setObjectVisibility?.(created.id, true);
+            }
+        };
+
+        // Узнаём натуральные пропорции из метаданных видео (для aspect-ratio).
+        try {
+            const probe = document.createElement('video');
+            probe.preload = 'metadata';
+            probe.muted = true;
+            probe.addEventListener('loadedmetadata', () => {
+                placeVideo(probe.videoWidth || 0, probe.videoHeight || 0);
+            }, { once: true });
+            probe.addEventListener('error', () => placeVideo(0, 0), { once: true });
+            probe.src = src;
+        } catch (_) {
+            placeVideo(0, 0);
+        }
+    });
+
     core.eventBus.on(Events.Tool.DuplicateRequest, (data) => {
         const { originalId, position } = data || {};
         if (!originalId) return;

package/src/objects/ObjectFactory.js

@@ -4,6 +4,7 @@ import { DrawingObject } from './DrawingObject.js';
 import { TextObject } from './TextObject.js';
 import { EmojiObject } from './EmojiObject.js';
 import { ImageObject } from './ImageObject.js';
+import { VideoObject } from './VideoObject.js';
 import { RevitScreenshotImageObject } from './RevitScreenshotImageObject.js';
 import { Model3dScreenshotImageObject } from './Model3dScreenshotImageObject.js';
 import { CommentObject } from './CommentObject.js';
@@ -25,6 +26,7 @@ export class ObjectFactory {
         ['simple-text', TextObject],
         ['emoji', EmojiObject],
         ['image', ImageObject],
+        ['video', VideoObject],
         ['revit-screenshot-img', RevitScreenshotImageObject],
         ['model3d-screenshot-img', Model3dScreenshotImageObject],
         ['comment', CommentObject],

package/src/objects/VideoObject.js

@@ -0,0 +1,171 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * VideoObject — отображение видео как спрайт с видео-текстурой.
+ *
+ * MVP: спрайт с muted-видео, клик по телу переключает play/pause.
+ * Трансформации (resize/rotate/move/z-order) переиспользуют конвейер ImageObject:
+ * единственный display-object — Sprite с anchor(0.5).
+ */
+export class VideoObject {
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+        let src = objectData.src || objectData.properties?.src;
+        // blob: недолговечны — не используем (ERR_FILE_NOT_FOUND после перезагрузки)
+        if (typeof src === 'string' && src.startsWith('blob:')) {
+            src = null;
+        }
+        this.src = src;
+        this.width = Math.max(1, Math.round(objectData.width || objectData.properties?.width || 300));
+        this.height = Math.max(1, Math.round(objectData.height || objectData.properties?.height || 169));
+
+        this.videoEl = null;
+        let texture = PIXI.Texture.WHITE;
+        if (src) {
+            const video = document.createElement('video');
+            video.src = src;
+            video.muted = true;
+            video.loop = objectData.properties?.loop ?? true;
+            video.playsInline = true;
+            video.crossOrigin = 'anonymous';
+            video.preload = 'auto';
+            this.videoEl = video;
+            // autoPlay:false — стартуем на паузе, первый кадр показываем после loadeddata
+            texture = PIXI.Texture.from(video, { resourceOptions: { autoPlay: false } });
+        }
+
+        this.sprite = new PIXI.Sprite(texture);
+        this.sprite.anchor.set(0.5, 0.5);
+        if (!src) {
+            this.sprite.tint = 0xcccccc;
+        }
+
+        this._fitToSize = () => {
+            const texW = this.sprite.texture.width || 1;
+            const texH = this.sprite.texture.height || 1;
+            this.sprite._mb = {
+                ...(this.sprite._mb || {}),
+                type: this.objectData?.type || 'video',
+                properties: {
+                    ...((this.sprite._mb || {}).properties || {}),
+                    src,
+                    baseW: texW,
+                    baseH: texH
+                }
+            };
+            this.sprite.scale.set(this.width / texW, this.height / texH);
+        };
+
+        const onError = () => {
+            this.sprite.texture = PIXI.Texture.WHITE;
+            this.sprite.tint = 0xcccccc;
+            this._fitToSize();
+        };
+
+        if (this.videoEl) {
+            // Показать первый кадр на паузе: после loadeddata толкнуть кадр в GPU
+            this.videoEl.addEventListener('loadeddata', () => {
+                try { this.sprite.texture.update(); } catch (_) {}
+                this._fitToSize();
+            }, { once: true });
+            this.videoEl.addEventListener('error', onError, { once: true });
+        }
+
+        if (this.sprite.texture.baseTexture?.valid) {
+            this._fitToSize();
+        } else if (this.sprite.texture.baseTexture) {
+            this.sprite.texture.baseTexture.once('loaded', this._fitToSize);
+        }
+
+        this._setupPlaybackToggle();
+    }
+
+    /**
+     * Клик по телу видео (без перетаскивания) переключает play/pause.
+     * Порог движения отсекает drag, чтобы перемещение не триггерило тоггл.
+     */
+    _setupPlaybackToggle() {
+        this.sprite.eventMode = 'static';
+        let down = null;
+        this._onDown = (e) => { down = { x: e.global.x, y: e.global.y }; };
+        this._onUp = (e) => {
+            if (!down) return;
+            const dx = e.global.x - down.x;
+            const dy = e.global.y - down.y;
+            down = null;
+            if (Math.hypot(dx, dy) < 5) {
+                this.toggle();
+            }
+        };
+        this.sprite.on('pointerdown', this._onDown);
+        this.sprite.on('pointerup', this._onUp);
+        this.sprite.on('pointerupoutside', () => { down = null; });
+    }
+
+    play() {
+        if (!this.videoEl) return;
+        const p = this.videoEl.play();
+        if (p && typeof p.catch === 'function') {
+            p.catch(() => {});
+        }
+    }
+
+    pause() {
+        if (this.videoEl) {
+            this.videoEl.pause();
+        }
+    }
+
+    toggle() {
+        if (!this.videoEl) return;
+        if (this.videoEl.paused) {
+            this.play();
+        } else {
+            this.pause();
+        }
+    }
+
+    getPixi() {
+        return this.sprite;
+    }
+
+    updateSize(size) {
+        if (!size) return;
+        this.width = Math.max(1, Math.round(size.width || 1));
+        this.height = Math.max(1, Math.round(size.height || 1));
+        const apply = () => {
+            const texW = this.sprite.texture.width || 1;
+            const texH = this.sprite.texture.height || 1;
+            this.sprite.scale.set(this.width / texW, this.height / texH);
+        };
+        if (this.sprite.texture.baseTexture?.valid) {
+            apply();
+        } else {
+            this.sprite.texture.baseTexture?.once('loaded', apply);
+        }
+    }
+
+    /**
+     * Остановить видео и освободить ресурсы (вызывается при удалении объекта).
+     * Без этого HTMLVideoElement продолжает жить и тикать текстуру — утечка.
+     */
+    destroy() {
+        if (this.videoEl) {
+            try {
+                this.videoEl.pause();
+                this.videoEl.removeAttribute('src');
+                this.videoEl.load();
+            } catch (_) {}
+            this.videoEl = null;
+        }
+        try {
+            this.sprite?.off('pointerdown', this._onDown);
+            this.sprite?.off('pointerup', this._onUp);
+        } catch (_) {}
+        try {
+            if (this.sprite?.texture && this.sprite.texture !== PIXI.Texture.WHITE) {
+                this.sprite.texture.destroy(true);
+            }
+        } catch (_) {}
+    }
+}

package/src/services/text/TextBoxMetrics.js

@@ -0,0 +1,133 @@
+/**
+ * Единый источник истины для геометрии текстового бокса.
+ *
+ * Один и тот же объект рисуется двумя независимыми механизмами: статический слой
+ * `HtmlTextLayer` (.mb-text) и inline-редактор (textarea + backdrop). Чтобы рамка
+ * выделения, межстрочный интервал и паддинги не расходились между режимами и не
+ * разъезжались после очередной правки, все метрики бокса считаются здесь.
+ */
+
+// Соотношение line-height по базовому (немасштабированному) размеру шрифта.
+// Берётся от базового размера, а не от отрисованного, поэтому пропорция строк
+// не зависит от зума и не страдает от округления.
+const LINE_HEIGHT_BREAKPOINTS = [
+    [12, 1.40],
+    [18, 1.34],
+    [36, 1.26],
+    [48, 1.24],
+    [72, 1.22],
+    [96, 1.20],
+];
+const LINE_HEIGHT_FALLBACK_RATIO = 1.18;
+
+// Нижний запас под хвосты глифов (например, «з», «у»), общий для обоих режимов.
+export const TEXT_BOX_BOTTOM_PAD_PX = 2;
+
+// Вертикальный паддинг inline-редактора (textarea/backdrop). Дублируется в CSS
+// (.moodboard-text-input / .moodboard-text-backdrop) и учитывается при сведении
+// высоты поля к мировой высоте объекта.
+export const TEXT_EDITOR_VERTICAL_PAD_PX = 1;
+
+/**
+ * @param {number} baseFontSizePx — базовый размер шрифта без учёта зума
+ * @param {object|undefined} properties — допускается явный properties.lineHeight
+ * @returns {number} коэффициент (не пиксели)
+ */
+export function resolveLineHeightRatio(baseFontSizePx, properties) {
+    if (properties && typeof properties.lineHeight === 'number') {
+        return properties.lineHeight;
+    }
+    const fs = baseFontSizePx;
+    for (const [maxFs, ratio] of LINE_HEIGHT_BREAKPOINTS) {
+        if (fs <= maxFs) {
+            return ratio;
+        }
+    }
+    return LINE_HEIGHT_FALLBACK_RATIO;
+}
+
+/**
+ * Межстрочный интервал в пикселях (для inline-редактора, где line-height задаётся в px).
+ * @param {number} fontSizePx
+ * @param {object|undefined} properties
+ * @returns {number}
+ */
+export function computeLineHeightPx(fontSizePx, properties) {
+    return Math.round(fontSizePx * resolveLineHeightRatio(fontSizePx, properties));
+}
+
+/**
+ * Правый запас, чтобы рамка не прилипала к тексту справа. Одинаков для статического
+ * слоя и для авторазмера редактора — иначе ширина рамки в режимах различается.
+ * @param {number} fontSizePx
+ * @returns {number}
+ */
+export function computeTextRightPadPx(fontSizePx) {
+    return Math.ceil(fontSizePx * 0.7) + 6;
+}
+
+/**
+ * Применяет ВСЕ текстовые параметры на DOM-элемент в одинаковом формате.
+ *
+ * Используется как для статического .mb-text, так и для textarea/backdrop
+ * в inline-редакторе, гарантируя идентичный рендеринг глифов в обоих режимах.
+ *
+ * Ключевое: `line-height` всегда задаётся как **безразмерный коэффициент** (e.g. `"1.34"`),
+ * а не в пикселях. Безразмерный коэффициент масштабируется браузером вместе с font-size
+ * и не страдает от округления — строки в редакторе и статике совпадают точно.
+ *
+ * Цвет (`color`) умышленно вынесен за пределы функции: textarea рендерит текст
+ * прозрачным (видимый текст рисует backdrop), backdrop и .mb-text — реальным цветом.
+ *
+ * @param {HTMLElement} el
+ * @param {{ fontSizePx: number, baseFontSizePx: number, fontFamily: string, properties?: object }} params
+ */
+export function applyTextStyles(el, { fontSizePx, baseFontSizePx, fontFamily, properties = {} }) {
+    const ratio = resolveLineHeightRatio(baseFontSizePx, properties);
+    el.style.fontSize = `${fontSizePx}px`;
+    el.style.lineHeight = `${ratio}`;
+    el.style.fontFamily = fontFamily || '';
+    el.style.fontWeight = properties.bold ? 'bold' : '';
+    el.style.fontStyle = properties.italic ? 'italic' : '';
+    const dec = [properties.underline && 'underline', properties.strikethrough && 'line-through']
+        .filter(Boolean).join(' ');
+    el.style.textDecoration = dec || '';
+    el.style.textAlign = properties.textAlign || '';
+    el.style.letterSpacing = '0px';
+    el.style.fontKerning = 'normal';
+    el.style.textRendering = 'optimizeLegibility';
+}
+
+/**
+ * Применяет параметры размера поля для inline-редактора (textarea/backdrop).
+ * Отдельно от applyTextStyles, чтобы не дублировать логику в статическом слое.
+ *
+ * @param {HTMLElement} el
+ * @param {number} lineHeightPx — вычисленный lineHeight в px (для initialHeight)
+ */
+export function applyEditorSizing(el, lineHeightPx) {
+    const initialHeightPx = Math.max(1, lineHeightPx);
+    el.style.minHeight = `${initialHeightPx}px`;
+    el.style.height = `${initialHeightPx}px`;
+    el.setAttribute('rows', '1');
+    el.style.overflowY = 'hidden';
+    el.style.whiteSpace = 'pre';
+}
+
+/**
+ * Inline-значение `padding` статического .mb-text по текущему режиму.
+ * Обычный текст → '0' (рамка плотно по глифам, как в редакторе);
+ * список/markdown → '' (берётся CSS `.mb-text { padding: 0.3em }`).
+ *
+ * Применяется детерминированно при каждом проходе: если возвращать паддинг только
+ * при смене режима, обычный текст после режима списка сохраняет CSS-отступ 0.3em
+ * сверху, и статическая рамка оказывается выше глифов, чем поле ввода.
+ * @param {{ isMarkdown?: boolean, useList?: boolean }} mode
+ * @returns {string}
+ */
+export function resolveStaticTextPadding({ isMarkdown = false, useList = false } = {}) {
+    if (useList || isMarkdown) {
+        return '';
+    }
+    return '0';
+}