@sequent-org/moodboard 1.0.0

package/src/objects/DrawingObject.js

@@ -0,0 +1,114 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * Класс объекта «Рисунок» (карандаш/маркер)
+ * Хранит точки и настраивает отрисовку с учётом режима, толщины, цвета.
+ */
+export class DrawingObject {
+    /**
+     * @param {Object} objectData
+     *  - properties.mode: 'pencil' | 'marker'
+     *  - properties.strokeColor: number
+     *  - properties.strokeWidth: number
+     *  - properties.points: Array<{x:number,y:number}>
+     *  - width/height: габариты для первичного масштаба (base)
+     */
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+        this.mode = objectData.properties?.mode || 'pencil';
+        this.color = objectData.properties?.strokeColor ?? 0x111827;
+        this.strokeWidth = objectData.properties?.strokeWidth ?? 2;
+        this.points = Array.isArray(objectData.properties?.points) ? objectData.properties.points : [];
+
+        // Базовые размеры для последующего масштабирования
+        this.baseWidth = objectData.properties?.baseWidth || objectData.width || 1;
+        this.baseHeight = objectData.properties?.baseHeight || objectData.height || 1;
+
+        this.graphics = new PIXI.Graphics();
+        this._draw(this.points, this.color, this.strokeWidth, this.mode);
+
+        // Сохраняем мета для hit-test/resize
+        this.graphics._mb = {
+            ...(this.graphics._mb || {}),
+            type: 'drawing',
+            properties: {
+                mode: this.mode,
+                strokeColor: this.color,
+                strokeWidth: this.strokeWidth,
+                points: this.points,
+                baseWidth: this.baseWidth,
+                baseHeight: this.baseHeight
+            }
+        };
+    }
+
+    getPixi() {
+        return this.graphics;
+    }
+
+    /** Обновить визуал без изменения точек */
+    setStyle({ mode, strokeColor, strokeWidth } = {}) {
+        if (mode) this.mode = mode;
+        if (typeof strokeColor === 'number') this.color = strokeColor;
+        if (typeof strokeWidth === 'number') this.strokeWidth = strokeWidth;
+        this._redrawPreserveTransform(this.points);
+    }
+
+    /** Обновить точки (после дорисовки) */
+    setPoints(points) {
+        this.points = Array.isArray(points) ? points : [];
+        this._redrawPreserveTransform(this.points);
+    }
+
+    /** Изменение габаритов — масштабируем визуал относительно базовых размеров */
+    updateSize(size) {
+        if (!size) return;
+        const w = Math.max(1, size.width || 1);
+        const h = Math.max(1, size.height || 1);
+        const scaleX = w / (this.baseWidth || 1);
+        const scaleY = h / (this.baseHeight || 1);
+        const scaled = this.points.map(p => ({ x: p.x * scaleX, y: p.y * scaleY }));
+        this._redrawPreserveTransform(scaled);
+    }
+
+    _redrawPreserveTransform(points) {
+        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(points, this.color, this.strokeWidth, this.mode);
+        g.pivot.set(pivotX, pivotY);
+        g.x = x;
+        g.y = y;
+        g.rotation = rot;
+    }
+
+    _draw(points, color, strokeWidth, mode) {
+        const g = this.graphics;
+        g.clear();
+        const isMarker = mode === 'marker';
+        const lineWidth = isMarker ? strokeWidth * 2 : strokeWidth;
+        const alpha = isMarker ? 0.6 : 1;
+        g.lineStyle({ width: lineWidth, color, alpha, cap: 'round', join: 'round', miterLimit: 2, alignment: 0.5 });
+        g.blendMode = isMarker ? PIXI.BLEND_MODES.LIGHTEN : PIXI.BLEND_MODES.NORMAL;
+        if (!points || points.length === 0) return;
+        if (points.length < 3) {
+            g.moveTo(points[0].x, points[0].y);
+            for (let i = 1; i < points.length; i++) g.lineTo(points[i].x, points[i].y);
+        } else {
+            g.moveTo(points[0].x, points[0].y);
+            for (let i = 1; i < points.length - 1; i++) {
+                const cx = points[i].x, cy = points[i].y;
+                const nx = points[i + 1].x, ny = points[i + 1].y;
+                const mx = (cx + nx) / 2, my = (cy + ny) / 2;
+                g.quadraticCurveTo(cx, cy, mx, my);
+            }
+            const pen = points[points.length - 2];
+            const last = points[points.length - 1];
+            g.quadraticCurveTo(pen.x, pen.y, last.x, last.y);
+        }
+    }
+}
+

package/src/objects/EmojiObject.js

@@ -0,0 +1,98 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * Класс объекта «Эмоджи»
+ * Текстовый смайл с корректным масштабированием под заданные размеры
+ */
+export class EmojiObject {
+    /**
+     * @param {Object} objectData
+     *  - properties.content: строка-эмоджи
+     *  - properties.fontSize: базовый размер шрифта
+     *  - width/height: целевые размеры (при создании/ресайзе)
+     */
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+        this.content = objectData.properties?.content || '🙂';
+        this.baseFontSize = objectData.properties?.fontSize || 48;
+
+        const style = new PIXI.TextStyle({
+            fontFamily: 'Segoe UI Emoji, Apple Color Emoji, Noto Color Emoji, Arial',
+            fontSize: this.baseFontSize
+        });
+
+        this.text = new PIXI.Text(this.content, style);
+        // Важный момент: якорь в левом верхнем углу, чтобы позиция соответствовала state.position
+        if (typeof this.text.anchor?.set === 'function') {
+            this.text.anchor.set(0, 0);
+        }
+
+        // Базовые размеры исходного глифа для дальнейшего масштабирования
+        const bounds = this.text.getLocalBounds();
+        this.baseW = Math.max(1, bounds.width || 1);
+        this.baseH = Math.max(1, bounds.height || 1);
+
+        // Если заданы целевые габариты — приводим к ним равномерным масштабом
+        const targetW = objectData.width || this.baseW;
+        const targetH = objectData.height || this.baseH;
+        this._applyUniformScaleToFit(targetW, targetH);
+
+        // Метаданные для движка
+        this.text._mb = {
+            ...(this.text._mb || {}),
+            type: 'emoji',
+            properties: {
+                content: this.content,
+                fontSize: this.baseFontSize,
+                baseW: this.baseW,
+                baseH: this.baseH
+            }
+        };
+    }
+
+    getPixi() {
+        return this.text;
+    }
+
+    setContent(content) {
+        this.content = content;
+        this.text.text = content;
+        const b = this.text.getLocalBounds();
+        this.baseW = Math.max(1, b.width || 1);
+        this.baseH = Math.max(1, b.height || 1);
+    }
+
+    setFontSize(fontSize) {
+        this.baseFontSize = fontSize;
+        this.text.style = new PIXI.TextStyle({
+            fontFamily: 'Segoe UI Emoji, Apple Color Emoji, Noto Color Emoji, Arial',
+            fontSize: this.baseFontSize
+        });
+        const b = this.text.getLocalBounds();
+        this.baseW = Math.max(1, b.width || 1);
+        this.baseH = Math.max(1, b.height || 1);
+    }
+
+    /** Масштабирование под указанные габариты без сдвига позиции */
+    updateSize(size) {
+        if (!size) return;
+        const t = this.text;
+        const prev = { x: t.x, y: t.y, rot: t.rotation, px: t.pivot?.x || 0, py: t.pivot?.y || 0 };
+        const w = Math.max(1, size.width || 1);
+        const h = Math.max(1, size.height || 1);
+        this._applyUniformScaleToFit(w, h);
+        t.pivot.set(prev.px, prev.py);
+        t.x = prev.x;
+        t.y = prev.y;
+        t.rotation = prev.rot;
+    }
+
+    _applyUniformScaleToFit(targetW, targetH) {
+        const sx = targetW / (this.baseW || 1);
+        const sy = targetH / (this.baseH || 1);
+        const s = Math.min(sx, sy);
+        this.text.scale.set(s, s);
+    }
+}
+
+

package/src/objects/FileObject.js

@@ -0,0 +1,318 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * FileObject — объект файла, отображает иконку с названием и расширением
+ * Свойства (properties):
+ * - fileName: string — имя файла с расширением
+ * - fileSize: number — размер файла в байтах (опционально)
+ * - mimeType: string — MIME тип файла (опционально)
+ * - content: ArrayBuffer | Blob — содержимое файла (опционально)
+ */
+export class FileObject {
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+        
+        // Размеры объекта файла
+        this.width = objectData.width || objectData.properties?.width || 120;
+        this.height = objectData.height || objectData.properties?.height || 140;
+        
+        // Свойства файла
+        const props = objectData.properties || {};
+        this.fileName = props.fileName || 'Untitled';
+        this.fileSize = props.fileSize || 0;
+        this.mimeType = props.mimeType || 'application/octet-stream';
+        this.content = props.content || null;
+        this.isDeleted = props.isDeleted || false; // Флаг удаленного файла
+        
+        // Создаем контейнер для файла
+        this.container = new PIXI.Container();
+        
+        // Включаем интерактивность для контейнера
+        this.container.eventMode = 'static';
+        this.container.interactiveChildren = true;
+        
+        // Графика фона и иконки
+        this.graphics = new PIXI.Graphics();
+        this.container.addChild(this.graphics);
+        
+        // Текст имени файла
+        this.fileNameText = new PIXI.Text(this.fileName, {
+            fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif',
+            fontSize: 12,
+            fill: 0x333333,
+            align: 'center',
+            wordWrap: true,
+            wordWrapWidth: this.width - 8,
+            lineHeight: 14,
+            resolution: (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1
+        });
+        
+        // Текст размера файла (если есть)
+        this.fileSizeText = null;
+        if (this.fileSize > 0) {
+            this.fileSizeText = new PIXI.Text(this._formatFileSize(this.fileSize), {
+                fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif',
+                fontSize: 10,
+                fill: 0x666666,
+                align: 'center',
+                resolution: (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1
+            });
+        }
+        
+        this._redraw();
+        this.container.addChild(this.fileNameText);
+        if (this.fileSizeText) {
+            this.container.addChild(this.fileSizeText);
+        }
+        this._updateTextPosition();
+        
+        // Метаданные
+        this.container._mb = {
+            ...(this.container._mb || {}),
+            type: 'file',
+            instance: this,
+            properties: { 
+                fileName: this.fileName,
+                fileSize: this.fileSize,
+                mimeType: this.mimeType,
+                content: this.content,
+                ...objectData.properties 
+            }
+        };
+    }
+
+    getPixi() {
+        return this.container;
+    }
+
+    updateSize(size) {
+        if (!size) return;
+        this.width = Math.max(80, size.width || this.width);
+        this.height = Math.max(100, size.height || this.height);
+        
+        this._redraw();
+        this._updateTextPosition();
+        
+        // Обновляем hit area
+        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;
+        };
+    }
+
+    setFileName(fileName) {
+        this.fileName = fileName || 'Untitled';
+        this.fileNameText.text = this.fileName;
+        this._updateTextPosition();
+        if (this.container && this.container._mb) {
+            this.container._mb.properties = {
+                ...(this.container._mb.properties || {}),
+                fileName: this.fileName
+            };
+        }
+        this._redraw();
+    }
+
+    /**
+     * Скрывает текст названия файла (используется во время редактирования)
+     */
+    hideText() {
+        if (this.fileNameText) {
+            this.fileNameText.visible = false;
+        }
+    }
+
+    /**
+     * Показывает текст названия файла (используется после завершения редактирования)
+     */
+    showText() {
+        if (this.fileNameText) {
+            this.fileNameText.visible = true;
+        }
+    }
+
+    /**
+     * Получает текущее название файла
+     */
+    getFileName() {
+        return this.fileName;
+    }
+
+    _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, 8);
+        g.endFill();
+        
+        // Основной фон (блеклый для удаленных файлов)
+        const bgColor = this.isDeleted ? 0xF1F3F4 : 0xF8F9FA;
+        const borderColor = this.isDeleted ? 0xDADCE0 : 0xDEE2E6;
+        g.beginFill(bgColor, 1);
+        g.lineStyle(2, borderColor, 1);
+        g.drawRoundedRect(0, 0, w, h, 8);
+        g.endFill();
+        
+        // Иконка файла в верхней части
+        const iconSize = Math.min(48, w * 0.4);
+        const iconX = (w - iconSize) / 2;
+        const iconY = 16;
+        
+        // Определяем цвет иконки по расширению файла
+        const extension = this._getFileExtension();
+        const iconColor = this.isDeleted ? 0x6B7280 : this._getIconColor(extension); // Серый цвет для удаленных файлов
+        
+        // Рисуем иконку файла
+        this._drawFileIcon(g, iconX, iconY, iconSize, iconColor, extension);
+        
+        // Устанавливаем hit area
+        this.container.hitArea = new PIXI.Rectangle(0, 0, w, h);
+        
+        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;
+        };
+    }
+
+    _drawFileIcon(graphics, x, y, size, color, extension) {
+        const g = graphics;
+        
+        // Основная часть файла
+        g.beginFill(color, 1);
+        g.lineStyle(1, color, 1);
+        g.drawRoundedRect(x, y, size * 0.8, size, 4);
+        g.endFill();
+        
+        // Загнутый уголок
+        const cornerSize = size * 0.25;
+        g.beginFill(0xFFFFFF, 0.8);
+        g.moveTo(x + size * 0.8 - cornerSize, y);
+        g.lineTo(x + size * 0.8, y);
+        g.lineTo(x + size * 0.8, y + cornerSize);
+        g.lineTo(x + size * 0.8 - cornerSize, y);
+        g.endFill();
+        
+        // Текст расширения на иконке
+        if (extension && extension.length <= 4) {
+            const extensionText = new PIXI.Text(extension.toUpperCase(), {
+                fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif',
+                fontSize: Math.max(8, size * 0.2),
+                fill: 0xFFFFFF,
+                align: 'center',
+                fontWeight: 'bold'
+            });
+            extensionText.anchor.set(0.5, 0.5);
+            extensionText.x = x + size * 0.4;
+            extensionText.y = y + size * 0.7;
+            this.container.addChild(extensionText);
+        }
+    }
+
+    _updateTextPosition() {
+        if (!this.fileNameText) return;
+        
+        // Обновляем стиль текста
+        this.fileNameText.style.wordWrapWidth = this.width - 8;
+        this.fileNameText.updateText();
+        
+        // Позиционируем название файла
+        this.fileNameText.anchor.set(0.5, 0);
+        this.fileNameText.x = this.width / 2;
+        this.fileNameText.y = this.height - 40;
+        
+        // Позиционируем размер файла
+        if (this.fileSizeText) {
+            this.fileSizeText.anchor.set(0.5, 0);
+            this.fileSizeText.x = this.width / 2;
+            this.fileSizeText.y = this.height - 20;
+        }
+    }
+
+    _getFileExtension() {
+        const parts = this.fileName.split('.');
+        return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : '';
+    }
+
+    _getIconColor(extension) {
+        const colorMap = {
+            // Документы
+            'pdf': 0xDC2626,
+            'doc': 0x2563EB,
+            'docx': 0x2563EB,
+            'txt': 0x6B7280,
+            'rtf': 0x6B7280,
+            
+            // Изображения
+            'jpg': 0x10B981,
+            'jpeg': 0x10B981,
+            'png': 0x10B981,
+            'gif': 0x10B981,
+            'svg': 0x8B5CF6,
+            'bmp': 0x10B981,
+            'webp': 0x10B981,
+            
+            // Архивы
+            'zip': 0xF59E0B,
+            'rar': 0xF59E0B,
+            '7z': 0xF59E0B,
+            'tar': 0xF59E0B,
+            'gz': 0xF59E0B,
+            
+            // Видео
+            'mp4': 0xEF4444,
+            'avi': 0xEF4444,
+            'mov': 0xEF4444,
+            'wmv': 0xEF4444,
+            'flv': 0xEF4444,
+            
+            // Аудио
+            'mp3': 0x8B5CF6,
+            'wav': 0x8B5CF6,
+            'flac': 0x8B5CF6,
+            'aac': 0x8B5CF6,
+            
+            // Код
+            'js': 0xF7DF1E,
+            'html': 0xE34F26,
+            'css': 0x1572B6,
+            'json': 0x000000,
+            'xml': 0xFF6600,
+            'php': 0x777BB4,
+            'py': 0x3776AB,
+            'java': 0xED8B00,
+            'cpp': 0x00599C,
+            'c': 0x00599C,
+            
+            // Таблицы
+            'xls': 0x217346,
+            'xlsx': 0x217346,
+            'csv': 0x217346,
+            
+            // Презентации
+            'ppt': 0xD24726,
+            'pptx': 0xD24726
+        };
+        
+        return colorMap[extension] || 0x6B7280; // Серый по умолчанию
+    }
+
+    _formatFileSize(bytes) {
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    }
+}

package/src/objects/FrameObject.js

@@ -0,0 +1,127 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * Класс объекта «Фрейм» (контейнерная прямоугольная область)
+ * Отвечает за создание PIXI-графики, изменение размеров и изменение заливки.
+ */
+export class FrameObject {
+    /**
+     * @param {Object} objectData Полные данные объекта из состояния
+     */
+    constructor(objectData) {
+        this.objectData = objectData || {};
+        this.width = this.objectData.width || 100;
+        this.height = this.objectData.height || 100;
+        this.borderWidth = 2;
+        // Используем backgroundColor из данных объекта, если есть, иначе белый
+        this.fillColor = this.objectData.backgroundColor || this.objectData.properties?.backgroundColor || 0xFFFFFF;
+        this.strokeColor = this.objectData.borderColor || 0x333333;
+        this.title = this.objectData.title || this.objectData.properties?.title || 'Новый';
+
+        // Создаем контейнер для фрейма и заголовка
+        this.container = new PIXI.Container();
+        
+        // Графика для прямоугольника фрейма
+        this.graphics = new PIXI.Graphics();
+        this.container.addChild(this.graphics);
+        
+        // Текст заголовка
+        this.titleText = new PIXI.Text(this.title, {
+            fontFamily: 'Arial, sans-serif',
+            fontSize: 14,
+            fill: 0x333333,
+            fontWeight: 'bold'
+        });
+        this.titleText.anchor.set(0, 1); // Левый нижний угол текста
+        this.titleText.y = -5; // Немного выше фрейма
+        this.container.addChild(this.titleText);
+        
+        this._draw(this.width, this.height, this.fillColor);
+    }
+
+    /**
+     * Возвращает PIXI-объект
+     */
+    getPixi() {
+        return this.container;
+    }
+
+    /**
+     * Установить цвет заливки фрейма (без изменения размеров)
+     * @param {number} color Цвет заливки (hex)
+     */
+    setFill(color) {
+        if (typeof color === 'number') {
+            this.fillColor = color;
+        }
+        this._redrawPreserveTransform(this.width, this.height, this.fillColor);
+    }
+
+    /**
+     * Установить заголовок фрейма
+     * @param {string} title Новый заголовок
+     */
+    setTitle(title) {
+        this.title = title || 'Новый';
+        if (this.titleText) {
+            this.titleText.text = this.title;
+        }
+    }
+
+    /**
+     * Установить цвет фона фрейма
+     * @param {number} backgroundColor Цвет фона (hex)
+     */
+    setBackgroundColor(backgroundColor) {
+        if (typeof backgroundColor === 'number') {
+            this.fillColor = backgroundColor;
+            this._redrawPreserveTransform(this.width, this.height, this.fillColor);
+        }
+    }
+
+    /**
+     * Обновить размер фрейма
+     * @param {{width:number,height:number}} size
+     */
+    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);
+    }
+
+    /**
+     * Перерисовать с сохранением трансформаций (позиция, pivot, rotation)
+     */
+    _redrawPreserveTransform(width, height, color) {
+        const container = this.container;
+        const x = container.x;
+        const y = container.y;
+        const rot = container.rotation || 0;
+        const pivotX = container.pivot?.x || 0;
+        const pivotY = container.pivot?.y || 0;
+
+        this._draw(width, height, color);
+
+        container.pivot.set(pivotX, pivotY);
+        container.x = x;
+        container.y = y;
+        container.rotation = rot;
+    }
+
+    /**
+     * Базовая отрисовка
+     */
+    _draw(width, height, color) {
+        const g = this.graphics;
+        g.clear();
+        g.lineStyle(this.borderWidth, this.strokeColor, 1);
+        g.beginFill(typeof color === 'number' ? color : 0xFFFFFF, 1);
+        const halfBorder = this.borderWidth / 2;
+        g.drawRect(halfBorder, halfBorder, Math.max(0, width - this.borderWidth), Math.max(0, height - this.borderWidth));
+        g.endFill();
+    }
+}
+