@sequent-org/moodboard 1.0.0

package/src/objects/ImageObject.js

@@ -0,0 +1,72 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * ImageObject — отображение загруженного изображения как спрайт
+ */
+export class ImageObject {
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+        let src = objectData.properties?.src || objectData.src;
+        // Не используем устаревшие blob: URL — они недолговечны и приводят к ERR_FILE_NOT_FOUND
+        if (typeof src === 'string' && src.startsWith('blob:')) {
+            src = null;
+        }
+        this.width = objectData.width || objectData.properties?.width || 200;
+        this.height = objectData.height || objectData.properties?.height || 150;
+        const texture = src ? PIXI.Texture.from(src) : PIXI.Texture.WHITE;
+        this.sprite = new PIXI.Sprite(texture);
+        this.sprite.anchor.set(0.5, 0.5); // центр для совместимости с позиционированием по центру
+        if (!src) {
+            this.sprite.tint = 0xcccccc;
+        }
+
+        const fitToSize = () => {
+            const texW = this.sprite.texture.width || 1;
+            const texH = this.sprite.texture.height || 1;
+            const sx = this.width / texW;
+            const sy = this.height / texH;
+            this.sprite.scale.set(sx, sy);
+            // Обновим метаданные базовых размеров
+            this.sprite._mb = {
+                ...(this.sprite._mb || {}),
+                type: 'image',
+                properties: { src, baseW: texW, baseH: texH }
+            };
+        };
+
+        const onError = () => {
+            // Фолбек на плейсхолдер без спама ошибками
+            this.sprite.texture = PIXI.Texture.WHITE;
+            this.sprite.tint = 0xcccccc;
+            fitToSize();
+        };
+
+        if (this.sprite.texture.baseTexture) {
+            this.sprite.texture.baseTexture.once('error', onError);
+        }
+
+        if (this.sprite.texture.baseTexture?.valid) {
+            fitToSize();
+        } else if (this.sprite.texture.baseTexture) {
+            this.sprite.texture.baseTexture.once('loaded', fitToSize);
+        }
+    }
+
+    getPixi() {
+        return this.sprite;
+    }
+
+    updateSize(size) {
+        if (!size) return;
+        const w = Math.max(1, size.width || 1);
+        const h = Math.max(1, size.height || 1);
+        const apply = () => {
+            const texW = this.sprite.texture.width || 1;
+            const texH = this.sprite.texture.height || 1;
+            this.sprite.scale.set(w / texW, h / texH);
+        };
+        if (this.sprite.texture.baseTexture?.valid) apply(); else this.sprite.texture.baseTexture?.once('loaded', apply);
+    }
+}
+
+

package/src/objects/NoteObject.js

@@ -0,0 +1,227 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * NoteObject — объект записки, стилизованный как стикер
+ * Свойства (properties):
+ * - content: string — содержимое записки
+ * - fontSize: number — размер шрифта (по умолчанию 14)
+ * - backgroundColor: number — цвет фона записки (по умолчанию желтоватый)
+ * - borderColor: number — цвет границы (по умолчанию темнее фона)
+ * - textColor: number — цвет текста (по умолчанию темный)
+ */
+export class NoteObject {
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+        
+        // Размеры записки
+        this.width = objectData.width || objectData.properties?.width || 160;
+        this.height = objectData.height || objectData.properties?.height || 100;
+        
+        // Свойства записки
+        const props = objectData.properties || {};
+        this.content = props.content || '';
+        this.fontSize = props.fontSize || 16;
+        this.backgroundColor = (typeof props.backgroundColor === 'number') ? props.backgroundColor : 0xFFF9C4; // Светло-желтый
+        this.borderColor = (typeof props.borderColor === 'number') ? props.borderColor : 0xF9A825; // Золотистый
+        this.textColor = (typeof props.textColor === 'number') ? props.textColor : 0x1A1A1A; // Почти черный для лучшей контрастности
+
+        // Создаем контейнер для записки
+        this.container = new PIXI.Container();
+        
+        // Включаем интерактивность для контейнера (PixiJS v7.2.0+)
+        this.container.eventMode = 'static';
+        this.container.interactiveChildren = true;
+        
+        // Графика фона
+        this.graphics = new PIXI.Graphics();
+        this.container.addChild(this.graphics);
+        
+        // Текст записки
+        this.textField = new PIXI.Text(this.content, {
+            fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif',
+            fontSize: this.fontSize,
+            fill: this.textColor,
+            align: 'center',
+            wordWrap: true,
+            wordWrapWidth: this.width - 16, // Отступы по 8px с каждой стороны
+            lineHeight: this.fontSize * 1.2,
+            resolution: (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1
+        });
+        
+        this._redraw(); // Сначала рисуем фон
+        this.container.addChild(this.textField); // Затем добавляем текст поверх
+        this._updateTextPosition();
+        
+        // Отладочная информация
+        console.log('NoteObject created with content:', this.content);
+
+        // Метаданные
+        this.container._mb = {
+            ...(this.container._mb || {}),
+            type: 'note',
+            instance: this, // Ссылка на сам объект для вызова методов
+            properties: { 
+                content: this.content,
+                fontSize: this.fontSize,
+                backgroundColor: this.backgroundColor,
+                borderColor: this.borderColor,
+                textColor: this.textColor,
+                ...objectData.properties 
+            }
+        };
+
+        this._redraw();
+    }
+
+    getPixi() {
+        return this.container;
+    }
+
+    updateSize(size) {
+        if (!size) return;
+        this.width = Math.max(80, size.width || this.width);
+        this.height = Math.max(60, size.height || this.height);
+        
+        this._redraw();
+        this._updateTextPosition();
+        
+        // Обновляем hit area и containsPoint
+        this.container.hitArea = new PIXI.Rectangle(0, 0, this.width, this.height);
+        this.container.containsPoint = (point) => {
+            const bounds = this.container.getBounds();
+            return point.x >= bounds.x && 
+                   point.x <= bounds.x + bounds.width &&
+                   point.y >= bounds.y && 
+                   point.y <= bounds.y + bounds.height;
+        };
+    }
+
+    setContent(content) {
+        this.content = content || '';
+        this.textField.text = this.content;
+        this._updateTextPosition();
+        if (this.container && this.container._mb) {
+            this.container._mb.properties = {
+                ...(this.container._mb.properties || {}),
+                content: this.content
+            };
+        }
+        console.log('NoteObject setContent called:', this.content);
+        // Перерисовываем фон после обновления содержимого
+        console.log('NoteObject: calling _redraw() to restore background');
+        this._redraw();
+    }
+
+    // Alias для совместимости с TextObject
+    setText(content) {
+        this.setContent(content);
+    }
+
+    /**
+     * Скрывает текст записки (используется во время редактирования)
+     */
+    hideText() {
+        if (this.textField) {
+            this.textField.visible = false;
+        }
+    }
+
+    /**
+     * Показывает текст записки (используется после завершения редактирования)
+     */
+    showText() {
+        if (this.textField) {
+            this.textField.visible = true;
+        }
+    }
+
+    setStyle({ fontSize, backgroundColor, borderColor, textColor } = {}) {
+        if (typeof fontSize === 'number') {
+            this.fontSize = fontSize;
+            this.textField.style.fontSize = fontSize;
+            this.textField.style.lineHeight = fontSize * 1.2;
+        }
+        if (typeof backgroundColor === 'number') this.backgroundColor = backgroundColor;
+        if (typeof borderColor === 'number') this.borderColor = borderColor;
+        if (typeof textColor === 'number') {
+            this.textColor = textColor;
+            this.textField.style.fill = textColor;
+        }
+        
+        if (this.container && this.container._mb) {
+            this.container._mb.properties = {
+                ...(this.container._mb.properties || {}),
+                fontSize: this.fontSize,
+                backgroundColor: this.backgroundColor,
+                borderColor: this.borderColor,
+                textColor: this.textColor
+            };
+        }
+        
+        this._redraw();
+        this._updateTextPosition();
+    }
+
+    _redraw() {
+        const g = this.graphics;
+        const w = this.width;
+        const h = this.height;
+        
+        g.clear();
+        
+        // Тень записки (эффект приподнятости)
+        g.beginFill(0x000000, 0.1);
+        g.drawRoundedRect(2, 2, w, h, 4);
+        g.endFill();
+        
+        // Основной фон записки
+        g.beginFill(this.backgroundColor, 1);
+        g.lineStyle(1, this.borderColor, 1);
+        g.drawRoundedRect(0, 0, w, h, 4);
+        g.endFill();
+        
+        // Небольшая полоска сверху для эффекта стикера
+        g.beginFill(this.borderColor, 0.3);
+        g.drawRoundedRect(0, 0, w, 8, 4);
+        g.endFill();
+        
+        // Линии на записке (эффект бумаги)
+        g.lineStyle(0.5, this.borderColor, 0.2);
+        const lineSpacing = Math.max(16, this.fontSize + 4);
+        for (let y = 24; y < h - 8; y += lineSpacing) {
+            g.moveTo(8, y);
+            g.lineTo(w - 8, y);
+        }
+        
+        // Устанавливаем hit area для контейнера
+        this.container.hitArea = new PIXI.Rectangle(0, 0, w, h);
+        
+        // Переопределяем containsPoint для правильного hit testing
+        this.container.containsPoint = (point) => {
+            const bounds = this.container.getBounds();
+            return point.x >= bounds.x && 
+                   point.x <= bounds.x + bounds.width &&
+                   point.y >= bounds.y && 
+                   point.y <= bounds.y + bounds.height;
+        };
+    }
+
+    _updateTextPosition() {
+        if (!this.textField) return;
+        
+        // Обновляем стиль текста
+        this.textField.style.wordWrapWidth = this.width - 16;
+        
+        // Ждем, пока PIXI пересчитает размеры текста
+        this.textField.updateText();
+        
+        // Центрируем текст по горизонтали
+        const centerX = this.width / 2;
+        const topMargin = 20; // Отступ от верха (ниже полоски)
+        
+        // Используем anchor для центрирования
+        this.textField.anchor.set(0.5, 0);
+        this.textField.x = centerX;
+        this.textField.y = topMargin;
+    }
+}

package/src/objects/ObjectFactory.js

@@ -0,0 +1,61 @@
+import { FrameObject } from './FrameObject.js';
+import { ShapeObject } from './ShapeObject.js';
+import { DrawingObject } from './DrawingObject.js';
+import { TextObject } from './TextObject.js';
+import { EmojiObject } from './EmojiObject.js';
+import { ImageObject } from './ImageObject.js';
+import { CommentObject } from './CommentObject.js';
+import { NoteObject } from './NoteObject.js';
+import { FileObject } from './FileObject.js';
+
+/**
+ * Фабрика объектов холста
+ * Назначение: централизованно создавать инстансы по типу объекта
+ */
+export class ObjectFactory {
+    static registry = new Map([
+        ['frame', FrameObject],
+        ['shape', ShapeObject],
+        ['drawing', DrawingObject],
+        ['text', TextObject],
+        ['simple-text', TextObject],
+        ['emoji', EmojiObject],
+        ['image', ImageObject],
+        ['comment', CommentObject],
+        ['note', NoteObject],
+        ['file', FileObject]
+    ]);
+
+    /**
+     * Зарегистрировать новый тип объекта
+     * @param {string} type
+     * @param {class} clazz
+     */
+    static register(type, clazz) {
+        if (!type || !clazz) return;
+        this.registry.set(type, clazz);
+    }
+
+    /**
+     * Создать инстанс объекта по типу
+     * @param {string} type
+     * @param {Object} objectData
+     * @returns {any|null}
+     */
+    static create(type, objectData = {}) {
+        const Ctor = this.registry.get(type);
+        if (!Ctor) return null;
+        try {
+            return new Ctor(objectData);
+        } catch (e) {
+            console.error(`ObjectFactory: failed to create instance for type "${type}"`, e);
+            return null;
+        }
+    }
+
+    static has(type) {
+        return this.registry.has(type);
+    }
+}
+
+

package/src/objects/ShapeObject.js

@@ -0,0 +1,134 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * Класс объекта «Фигура»
+ * Отвечает за создание и перерисовку фигур разных типов с сохранением формы при ресайзе.
+ */
+export class ShapeObject {
+    /**
+     * @param {Object} objectData Полные данные объекта из состояния
+     *  - width, height
+     *  - color
+     *  - properties.kind: 'square' | 'rounded' | 'circle' | 'triangle' | 'diamond' | 'parallelogram' | 'arrow'
+     *  - properties.cornerRadius?: number (для rounded)
+     */
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+        this.width = objectData.width || 100;
+        this.height = objectData.height || 100;
+        this.fillColor = objectData.color ?? 0x3b82f6;
+        const props = objectData.properties || {};
+        this.kind = props.kind || 'square';
+        this.cornerRadius = props.cornerRadius || 10;
+
+        this.graphics = new PIXI.Graphics();
+        this._draw(this.width, this.height, this.fillColor, this.kind, this.cornerRadius);
+    }
+
+    /** Возвращает PIXI-объект */
+    getPixi() {
+        return this.graphics;
+    }
+
+    /** Установить цвет заливки */
+    setColor(color) {
+        if (typeof color === 'number') {
+            this.fillColor = color;
+            this._redrawPreserveTransform(this.width, this.height, this.fillColor, this.kind, this.cornerRadius);
+        }
+    }
+
+    /** Обновить свойства фигуры (тип, радиус скругления) */
+    setProperties({ kind, cornerRadius } = {}) {
+        if (kind) this.kind = kind;
+        if (typeof cornerRadius === 'number') this.cornerRadius = cornerRadius;
+        this._redrawPreserveTransform(this.width, this.height, this.fillColor, this.kind, this.cornerRadius);
+    }
+
+    /** Обновить размер фигуры */
+    updateSize(size) {
+        if (!size) return;
+        const w = Math.max(0, size.width || 0);
+        const h = Math.max(0, size.height || 0);
+        this.width = w;
+        this.height = h;
+        this._redrawPreserveTransform(w, h, this.fillColor, this.kind, this.cornerRadius);
+    }
+
+    /** Перерисовать с сохранением трансформаций */
+    _redrawPreserveTransform(width, height, color, kind, cornerRadius) {
+        const g = this.graphics;
+        const x = g.x;
+        const y = g.y;
+        const rot = g.rotation || 0;
+        const pivotX = g.pivot?.x || 0;
+        const pivotY = g.pivot?.y || 0;
+
+        this._draw(width, height, color, kind, cornerRadius);
+
+        g.pivot.set(pivotX, pivotY);
+        g.x = x;
+        g.y = y;
+        g.rotation = rot;
+    }
+
+    /** Непосредственная отрисовка фигуры */
+    _draw(w, h, color, kind, cornerRadius) {
+        const g = this.graphics;
+        g.clear();
+        g.beginFill(color, 1);
+        switch (kind) {
+            case 'circle': {
+                const r = Math.min(w, h) / 2;
+                g.drawCircle(w / 2, h / 2, r);
+                break;
+            }
+            case 'rounded': {
+                const r = cornerRadius || 10;
+                g.drawRoundedRect(0, 0, w, h, r);
+                break;
+            }
+            case 'triangle': {
+                g.moveTo(w / 2, 0);
+                g.lineTo(w, h);
+                g.lineTo(0, h);
+                g.lineTo(w / 2, 0);
+                break;
+            }
+            case 'diamond': {
+                g.moveTo(w / 2, 0);
+                g.lineTo(w, h / 2);
+                g.lineTo(w / 2, h);
+                g.lineTo(0, h / 2);
+                g.lineTo(w / 2, 0);
+                break;
+            }
+            case 'parallelogram': {
+                const skew = Math.min(w * 0.25, 20);
+                g.moveTo(skew, 0);
+                g.lineTo(w, 0);
+                g.lineTo(w - skew, h);
+                g.lineTo(0, h);
+                g.lineTo(skew, 0);
+                break;
+            }
+            case 'arrow': {
+                const shaftH = Math.max(6, h * 0.3);
+                const shaftY = (h - shaftH) / 2;
+                g.drawRect(0, shaftY, w * 0.6, shaftH);
+                g.moveTo(w * 0.6, 0);
+                g.lineTo(w, h / 2);
+                g.lineTo(w * 0.6, h);
+                g.lineTo(w * 0.6, 0);
+                break;
+            }
+            case 'square':
+            default: {
+                g.drawRect(0, 0, w, h);
+                break;
+            }
+        }
+        g.endFill();
+    }
+}
+

package/src/objects/TextObject.js

@@ -0,0 +1,123 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * Класс объекта «Текст» — PIXI-объект служит только для хит-тестов/манипуляций.
+ * Визуальный рендер текста выполняет HtmlTextLayer.
+ */
+export class TextObject {
+    /**
+     * @param {Object} objectData
+     *  - properties.content: string
+     *  - properties.fontSize: number
+     *  - width/height: габариты текстового блока
+     */
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+        this.content = objectData.content || objectData.properties?.content || '';
+        this.fontSize = objectData.fontSize || objectData.properties?.fontSize || 16;
+
+        // Создаем невидимый прямоугольник для хит-теста
+        const w = Math.max(1, objectData.width || 160);
+        const h = Math.max(1, objectData.height || 36);
+        this.rect = new PIXI.Graphics();
+        this._drawRect(w, h);
+
+        // Метаданные типа
+        this.rect._mb = {
+            ...(this.rect._mb || {}),
+            type: 'text',
+            instance: this, // Ссылка на сам объект для вызова методов
+            properties: {
+                content: this.content,
+                fontSize: this.fontSize,
+                baseW: w,
+                baseH: h
+            }
+        };
+    }
+
+    _drawRect(width, height) {
+        const g = this.rect;
+        g.clear();
+        // Едва заметная заливка для стабильного containsPoint (почти прозрачная)
+        g.beginFill(0x000000, 0.001);
+        g.drawRect(0, 0, width, height);
+        g.endFill();
+    }
+
+    getPixi() {
+        return this.rect;
+    }
+
+    setText(content) {
+        this.content = content;
+        if (this.rect && this.rect._mb) {
+            this.rect._mb.properties = {
+                ...(this.rect._mb.properties || {}),
+                content: content
+            };
+        }
+    }
+
+    setStyle({ fontSize } = {}) {
+        if (typeof fontSize === 'number') this.fontSize = fontSize;
+        if (this.rect && this.rect._mb) {
+            this.rect._mb.properties = {
+                ...(this.rect._mb.properties || {}),
+                fontSize: this.fontSize
+            };
+        }
+    }
+
+    /** Обновление габаритов хит-бокса */
+    updateSize(size) {
+        if (!size) return;
+        const w = Math.max(1, size.width || 1);
+        const h = Math.max(1, size.height || 1);
+        const t = this.rect;
+        const prevCenter = { x: t.x, y: t.y };
+        const prevRot = t.rotation || 0;
+        this._drawRect(w, h);
+        // Центрируем pivot по новым размерам и восстанавливаем центр в мире
+        t.pivot.set(w / 2, h / 2);
+        t.x = prevCenter.x;
+        t.y = prevCenter.y;
+        t.rotation = prevRot;
+        // Не обновляем baseW/baseH — они служат опорой для масштабирования шрифта в HtmlTextLayer
+    }
+
+    /**
+     * Скрывает текст (для совместимости с NoteObject)
+     * Для TextObject фактическая логика скрытия/показа обрабатывается в HtmlTextLayer
+     */
+    hideText() {
+        // Для TextObject визуализация происходит в HtmlTextLayer
+        // Эмитим событие для скрытия текста
+        if (this.rect && this.rect._mb && this.rect._mb.objectId) {
+            // Используем EventBus через core, если доступен
+            if (window.moodboard && window.moodboard.eventBus) {
+                window.moodboard.eventBus.emit('tool:hide:object:text', { 
+                    objectId: this.rect._mb.objectId 
+                });
+            }
+        }
+    }
+
+    /**
+     * Показывает текст (для совместимости с NoteObject)
+     * Для TextObject фактическая логика скрытия/показа обрабатывается в HtmlTextLayer
+     */
+    showText() {
+        // Для TextObject визуализация происходит в HtmlTextLayer
+        // Эмитим событие для показа текста
+        if (this.rect && this.rect._mb && this.rect._mb.objectId) {
+            // Используем EventBus через core, если доступен
+            if (window.moodboard && window.moodboard.eventBus) {
+                window.moodboard.eventBus.emit('tool:show:object:text', { 
+                    objectId: this.rect._mb.objectId 
+                });
+            }
+        }
+    }
+}
+