@sequent-org/moodboard 1.0.0

package/src/core/rendering/ObjectRenderer.js

@@ -0,0 +1,363 @@
+import * as PIXI from 'pixi.js';
+import { ObjectFactory } from '../../objects/ObjectFactory.js';
+import { GeometryUtils } from './GeometryUtils.js';
+
+/**
+ * Рендерер объектов
+ * Отвечает за создание, обновление и удаление PIXI объектов
+ */
+export class ObjectRenderer {
+    constructor(objectsMap) {
+        this.objects = objectsMap; // Map<id, pixiObject> из PixiEngine
+    }
+
+    /**
+     * Создать объект на холсте
+     * @param {Object} objectData - Данные объекта
+     * @returns {PIXI.DisplayObject|null} Созданный PIXI объект или null
+     */
+    createObject(objectData) {
+        let pixiObject;
+
+        // Создаем объект через фабрику
+        const instance = ObjectFactory.create(objectData.type, objectData);
+        if (instance) {
+            pixiObject = instance.getPixi();
+            this._setupObjectMetadata(pixiObject, objectData, instance);
+        } else {
+            console.warn(`Unknown object type: ${objectData.type}`);
+            pixiObject = this._createDefaultObject(objectData);
+        }
+
+        if (pixiObject) {
+            this._setupObjectProperties(pixiObject, objectData);
+            this._setupObjectTransform(pixiObject, objectData);
+            // Объект добавляется в слой через PixiEngine, здесь только сохраняем в Map
+            this.objects.set(objectData.id, pixiObject);
+        }
+
+        return pixiObject;
+    }
+
+    /**
+     * Настройка метаданных объекта
+     * @param {PIXI.DisplayObject} pixiObject - PIXI объект
+     * @param {Object} objectData - Данные объекта
+     * @param {Object} instance - Экземпляр объекта
+     * @private
+     */
+    _setupObjectMetadata(pixiObject, objectData, instance) {
+        const prevMb = pixiObject._mb || {};
+        pixiObject._mb = {
+            ...prevMb,
+            objectId: objectData.id,
+            type: objectData.type,
+            properties: objectData.properties || {},
+            instance
+        };
+    }
+
+    /**
+     * Настройка базовых свойств объекта
+     * @param {PIXI.DisplayObject} pixiObject - PIXI объект
+     * @param {Object} objectData - Данные объекта
+     * @private
+     */
+    _setupObjectProperties(pixiObject, objectData) {
+        pixiObject.x = objectData.position.x;
+        pixiObject.y = objectData.position.y;
+        pixiObject.eventMode = 'static';
+        pixiObject.cursor = 'pointer';
+    }
+
+    /**
+     * Настройка трансформации объекта
+     * @param {PIXI.DisplayObject} pixiObject - PIXI объект
+     * @param {Object} objectData - Данные объекта
+     * @private
+     */
+    _setupObjectTransform(pixiObject, objectData) {
+        // Устанавливаем центр вращения
+        if (pixiObject.anchor !== undefined) {
+            pixiObject.anchor.set(0.5, 0.5);
+        } else if (pixiObject instanceof PIXI.Graphics) {
+            const bounds = pixiObject.getBounds();
+            const pivotX = bounds.width / 2;
+            const pivotY = bounds.height / 2;
+            pixiObject.pivot.set(pivotX, pivotY);
+            
+            // Компенсируем смещение pivot
+            const needsCompensation = !objectData.transform || !objectData.transform.pivotCompensated;
+            if (needsCompensation) {
+                pixiObject.x += pivotX;
+                pixiObject.y += pivotY;
+            }
+        }
+        
+        // Применяем поворот
+        if (objectData.transform && objectData.transform.rotation !== undefined) {
+            const angleRadians = GeometryUtils.degreesToRadians(objectData.transform.rotation);
+            pixiObject.rotation = angleRadians;
+        }
+    }
+
+
+
+    /**
+     * Создать объект по умолчанию для неизвестных типов
+     * @param {Object} objectData - Данные объекта
+     * @returns {PIXI.Graphics} PIXI Graphics объект
+     * @private
+     */
+    _createDefaultObject(objectData) {
+        const graphics = new PIXI.Graphics();
+        graphics.beginFill(0xFF0000, 0.5);
+        graphics.drawRect(0, 0, objectData.width || 100, objectData.height || 100);
+        graphics.endFill();
+        return graphics;
+    }
+
+    /**
+     * Удалить объект с холста
+     * @param {string} objectId - ID объекта
+     */
+    removeObject(objectId) {
+        const pixiObject = this.objects.get(objectId);
+        if (pixiObject) {
+            // Объект удаляется из слоя через PixiEngine, здесь только удаляем из Map
+            this.objects.delete(objectId);
+        }
+    }
+
+    /**
+     * Обновить размер объекта
+     * @param {string} objectId - ID объекта
+     * @param {Object} size - Новый размер {width, height}
+     * @param {string} objectType - Тип объекта
+     */
+    updateObjectSize(objectId, size, objectType = null) {
+        const pixiObject = this.objects.get(objectId);
+        if (!pixiObject) return;
+
+        console.log(`🎨 Обновляем размер объекта ${objectId}, тип: ${objectType}`);
+        
+        // Делегируем изменение размера объекту
+        const meta = pixiObject._mb || {};
+        if (meta.instance && typeof meta.instance.updateSize === 'function') {
+            meta.instance.updateSize(size);
+        } else if (pixiObject instanceof PIXI.Graphics) {
+            this._recreateGraphicsObject(pixiObject, size, objectType);
+        }
+    }
+
+    /**
+     * Пересоздать Graphics объект с новым размером
+     * @param {PIXI.Graphics} pixiObject - PIXI Graphics объект
+     * @param {Object} size - Новый размер
+     * @param {string} objectType - Тип объекта
+     * @private
+     */
+    _recreateGraphicsObject(pixiObject, size, objectType = null) {
+        pixiObject.clear();
+        
+        console.log(`🔄 Пересоздаем Graphics объект, тип: ${objectType}`);
+        
+        if (objectType === 'drawing') {
+            this._redrawDrawingObject(pixiObject, size);
+        } else {
+            this._redrawDefaultObject(pixiObject, size);
+        }
+        
+        // Устанавливаем pivot в центр
+        const pivotX = size.width / 2;
+        const pivotY = size.height / 2;
+        pixiObject.pivot.set(pivotX, pivotY);
+    }
+
+    /**
+     * Перерисовать drawing объект
+     * @param {PIXI.Graphics} pixiObject - PIXI Graphics объект
+     * @param {Object} size - Размер
+     * @private
+     */
+    _redrawDrawingObject(pixiObject, size) {
+        const meta = pixiObject._mb || {};
+        const props = meta.properties || {};
+        const color = props.strokeColor ?? 0x111827;
+        const widthPx = props.strokeWidth ?? 2;
+        const alpha = props.mode === 'marker' ? 0.6 : 1;
+        const points = Array.isArray(props.points) ? props.points : [];
+        const baseW = props.baseWidth || size.width || 1;
+        const baseH = props.baseHeight || size.height || 1;
+        const scaleX = baseW ? (size.width / baseW) : 1;
+        const scaleY = baseH ? (size.height / baseH) : 1;
+        const lineWidth = props.mode === 'marker' ? widthPx * 2 : widthPx;
+        
+        pixiObject.lineStyle({ 
+            width: lineWidth, 
+            color, 
+            alpha, 
+            cap: 'round', 
+            join: 'round', 
+            miterLimit: 2, 
+            alignment: 0.5 
+        });
+        
+        pixiObject.blendMode = props.mode === 'marker' ? PIXI.BLEND_MODES.LIGHTEN : PIXI.BLEND_MODES.NORMAL;
+        
+        if (points.length > 0) {
+            this._drawPoints(pixiObject, points, scaleX, scaleY);
+        }
+    }
+
+    /**
+     * Нарисовать точки для drawing объекта
+     * @param {PIXI.Graphics} pixiObject - PIXI Graphics объект
+     * @param {Array} points - Массив точек
+     * @param {number} scaleX - Масштаб по X
+     * @param {number} scaleY - Масштаб по Y
+     * @private
+     */
+    _drawPoints(pixiObject, points, scaleX, scaleY) {
+        if (points.length < 3) {
+            pixiObject.moveTo(points[0].x * scaleX, points[0].y * scaleY);
+            for (let i = 1; i < points.length; i++) {
+                pixiObject.lineTo(points[i].x * scaleX, points[i].y * scaleY);
+            }
+        } else {
+            pixiObject.moveTo(points[0].x * scaleX, points[0].y * scaleY);
+            for (let i = 1; i < points.length - 1; i++) {
+                const cx = points[i].x * scaleX, cy = points[i].y * scaleY;
+                const nx = points[i + 1].x * scaleX, ny = points[i + 1].y * scaleY;
+                const mx = (cx + nx) / 2, my = (cy + ny) / 2;
+                pixiObject.quadraticCurveTo(cx, cy, mx, my);
+            }
+            const pen = points[points.length - 2];
+            const last = points[points.length - 1];
+            pixiObject.quadraticCurveTo(pen.x * scaleX, pen.y * scaleY, last.x * scaleX, last.y * scaleY);
+        }
+    }
+
+    /**
+     * Перерисовать объект по умолчанию
+     * @param {PIXI.Graphics} pixiObject - PIXI Graphics объект
+     * @param {Object} size - Размер
+     * @private
+     */
+    _redrawDefaultObject(pixiObject, size) {
+        const borderWidth = 2;
+        pixiObject.lineStyle(borderWidth, 0x333333, 1);
+        pixiObject.beginFill(0xFFFFFF, 0.1);
+        
+        const halfBorder = borderWidth / 2;
+        pixiObject.drawRect(halfBorder, halfBorder, size.width - borderWidth, size.height - borderWidth);
+        pixiObject.endFill();
+    }
+
+    /**
+     * Обновить содержимое объекта
+     * @param {string} objectId - ID объекта
+     * @param {string} content - Новое содержимое
+     */
+    updateObjectContent(objectId, content) {
+        const pixiObject = this.objects.get(objectId);
+        if (!pixiObject) return;
+
+        console.log(`🎨 Обновляем содержимое объекта ${objectId}:`, content);
+        
+        // Делегируем изменение содержимого объекту
+        const meta = pixiObject._mb || {};
+        if (meta.instance) {
+            if (typeof meta.instance.setContent === 'function') {
+                meta.instance.setContent(content);
+            } else if (typeof meta.instance.setText === 'function') {
+                meta.instance.setText(content);
+            }
+        }
+    }
+
+    /**
+     * Скрыть текст объекта (используется во время редактирования)
+     * @param {string} objectId - ID объекта
+     */
+    hideObjectText(objectId) {
+        const pixiObject = this.objects.get(objectId);
+        if (!pixiObject) return;
+
+        const meta = pixiObject._mb || {};
+        if (meta.instance && typeof meta.instance.hideText === 'function') {
+            meta.instance.hideText();
+        }
+    }
+
+    /**
+     * Показать текст объекта (используется после завершения редактирования)
+     * @param {string} objectId - ID объекта
+     */
+    showObjectText(objectId) {
+        const pixiObject = this.objects.get(objectId);
+        if (!pixiObject) return;
+
+        const meta = pixiObject._mb || {};
+        if (meta.instance && typeof meta.instance.showText === 'function') {
+            meta.instance.showText();
+        }
+    }
+
+    /**
+     * Обновить угол поворота объекта
+     * @param {string} objectId - ID объекта
+     * @param {number} angleDegrees - Угол в градусах
+     */
+    updateObjectRotation(objectId, angleDegrees) {
+        const pixiObject = this.objects.get(objectId);
+        if (!pixiObject) return;
+
+        const angleRadians = GeometryUtils.degreesToRadians(angleDegrees);
+        pixiObject.rotation = angleRadians;
+    }
+
+    /**
+     * Установить цвет заливки для фрейма
+     * @param {string} objectId - ID объекта
+     * @param {number} width - Ширина
+     * @param {number} height - Высота
+     * @param {number} fillColor - Цвет заливки
+     */
+    setFrameFill(objectId, width, height, fillColor = 0xFFFFFF) {
+        const pixiObject = this.objects.get(objectId);
+        if (!pixiObject || !(pixiObject instanceof PIXI.Graphics)) return;
+        
+        const meta = pixiObject._mb || {};
+        if (meta.type !== 'frame') return;
+        
+        if (meta.instance) {
+            meta.instance.setFill(fillColor);
+        }
+    }
+
+    /**
+     * Получить объект по ID
+     * @param {string} objectId - ID объекта
+     * @returns {PIXI.DisplayObject|null} PIXI объект или null
+     */
+    getObject(objectId) {
+        return this.objects.get(objectId) || null;
+    }
+
+    /**
+     * Получить все объекты
+     * @returns {Map} Map всех объектов
+     */
+    getAllObjects() {
+        return this.objects;
+    }
+
+    /**
+     * Очистить все объекты
+     */
+    clearAllObjects() {
+        // Слой очищается через PixiEngine, здесь только очищаем Map
+        this.objects.clear();
+    }
+}

package/src/core/rendering/PixiRenderer.js

@@ -0,0 +1,140 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * Основной рендерер PIXI приложения
+ * Отвечает за инициализацию PIXI и базовую настройку
+ */
+export class PixiRenderer {
+    constructor(container, options) {
+        this.container = container;
+        this.options = options;
+        this.app = null;
+    }
+
+    /**
+     * Инициализировать PIXI приложение
+     * @returns {Promise<void>}
+     */
+    async init() {
+        this.app = new PIXI.Application({
+            width: this.options.width,
+            height: this.options.height,
+            backgroundColor: this.options.backgroundColor,
+            antialias: true
+        });
+
+        this.container.appendChild(this.app.view);
+    }
+
+    /**
+     * Получить PIXI приложение
+     * @returns {PIXI.Application} PIXI приложение
+     */
+    getApp() {
+        return this.app;
+    }
+
+    /**
+     * Получить главную сцену
+     * @returns {PIXI.Container} Главная сцена
+     */
+    getStage() {
+        return this.app ? this.app.stage : null;
+    }
+
+    /**
+     * Получить view (canvas элемент)
+     * @returns {HTMLCanvasElement} Canvas элемент
+     */
+    getView() {
+        return this.app ? this.app.view : null;
+    }
+
+    /**
+     * Изменить размер приложения
+     * @param {number} width - Новая ширина
+     * @param {number} height - Новая высота
+     */
+    resize(width, height) {
+        if (this.app) {
+            this.app.renderer.resize(width, height);
+        }
+    }
+
+    /**
+     * Получить текущий размер
+     * @returns {{width: number, height: number}} Размер приложения
+     */
+    getSize() {
+        if (this.app) {
+            return {
+                width: this.app.renderer.width,
+                height: this.app.renderer.height
+            };
+        }
+        return { width: 0, height: 0 };
+    }
+
+    /**
+     * Установить цвет фона
+     * @param {number} color - Цвет фона
+     */
+    setBackgroundColor(color) {
+        if (this.app) {
+            this.app.renderer.backgroundColor = color;
+        }
+    }
+
+    /**
+     * Получить цвет фона
+     * @returns {number} Цвет фона
+     */
+    getBackgroundColor() {
+        return this.app ? this.app.renderer.backgroundColor : 0x000000;
+    }
+
+    /**
+     * Включить/выключить сглаживание
+     * @param {boolean} enabled - Включить сглаживание
+     */
+    setAntialias(enabled) {
+        if (this.app) {
+            this.app.renderer.antialias = enabled;
+        }
+    }
+
+    /**
+     * Получить состояние сглаживания
+     * @returns {boolean} Включено ли сглаживание
+     */
+    getAntialias() {
+        return this.app ? this.app.renderer.antialias : false;
+    }
+
+    /**
+     * Очистить сцену
+     */
+    clearStage() {
+        if (this.app && this.app.stage) {
+            this.app.stage.removeChildren();
+        }
+    }
+
+    /**
+     * Уничтожить приложение
+     */
+    destroy() {
+        if (this.app) {
+            this.app.destroy(true);
+            this.app = null;
+        }
+    }
+
+    /**
+     * Проверить, инициализировано ли приложение
+     * @returns {boolean} true если приложение инициализировано
+     */
+    isInitialized() {
+        return this.app !== null;
+    }
+}

package/src/core/rendering/index.js

@@ -0,0 +1,9 @@
+/**
+ * Экспорт всех классов рендеринга
+ */
+
+export { PixiRenderer } from './PixiRenderer.js';
+export { LayerManager } from './LayerManager.js';
+export { ObjectRenderer } from './ObjectRenderer.js';
+export { HitTestManager } from './HitTestManager.js';
+export { GeometryUtils } from './GeometryUtils.js';

package/src/grid/BaseGrid.js

@@ -0,0 +1,164 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * Базовый класс для всех типов сеток
+ */
+export class BaseGrid {
+    constructor(options = {}) {
+        this.type = 'base';
+        this.enabled = options.enabled ?? false;
+        this.size = options.size || 20;
+        this.color = options.color || 0xE0E0E0;
+        this.opacity = options.opacity || 0.5;
+        this.lineWidth = options.lineWidth || 1;
+        
+        // Размеры области отрисовки
+        this.width = options.width || 1920;
+        this.height = options.height || 1080;
+        
+        // PIXI графика
+        this.graphics = new PIXI.Graphics();
+        this.graphics.alpha = this.opacity;
+        
+        // Настройки привязки
+        this.snapEnabled = options.snapEnabled ?? true;
+        this.snapTolerance = options.snapTolerance || 10;
+    }
+    
+    /**
+     * Создает визуальное представление сетки
+     * Должен быть переопределен в дочерних классах
+     */
+    createVisual() {
+        throw new Error('createVisual() должен быть реализован в дочернем классе');
+    }
+    
+    /**
+     * Обновляет визуальное представление
+     */
+    updateVisual() {
+        this.graphics.clear();
+        if (this.enabled) {
+            this.createVisual();
+        }
+    }
+    
+    /**
+     * Привязывает точку к сетке
+     * @param {number} x - координата X
+     * @param {number} y - координата Y
+     * @returns {Object} - новые координаты {x, y}
+     */
+    snapToGrid(x, y) {
+        if (!this.snapEnabled) {
+            return { x, y };
+        }
+        
+        return this.calculateSnapPoint(x, y);
+    }
+    
+    /**
+     * Вычисляет точку привязки к сетке
+     * Должен быть переопределен в дочерних классах
+     */
+    calculateSnapPoint(x, y) {
+        return { x, y };
+    }
+    
+    /**
+     * Находит ближайшие линии сетки
+     * @param {number} x - координата X
+     * @param {number} y - координата Y
+     * @returns {Object} - информация о ближайших линиях
+     */
+    findNearestGridLines(x, y) {
+        return {
+            vertical: Math.round(x / this.size) * this.size,
+            horizontal: Math.round(y / this.size) * this.size,
+            distance: {
+                x: Math.abs(x % this.size),
+                y: Math.abs(y % this.size)
+            }
+        };
+    }
+    
+    /**
+     * Проверяет, находится ли точка в зоне привязки
+     */
+    isInSnapZone(x, y) {
+        const nearest = this.findNearestGridLines(x, y);
+        return nearest.distance.x <= this.snapTolerance || 
+               nearest.distance.y <= this.snapTolerance;
+    }
+    
+    /**
+     * Включает/выключает сетку
+     */
+    setEnabled(enabled) {
+        this.enabled = enabled;
+        this.updateVisual();
+    }
+    
+    /**
+     * Устанавливает размер сетки
+     */
+    setSize(size) {
+        this.size = Math.max(1, size);
+        this.updateVisual();
+    }
+    
+    /**
+     * Устанавливает цвет сетки
+     */
+    setColor(color) {
+        this.color = color;
+        this.updateVisual();
+    }
+    
+    /**
+     * Устанавливает прозрачность
+     */
+    setOpacity(opacity) {
+        this.opacity = Math.max(0, Math.min(1, opacity));
+        this.graphics.alpha = this.opacity;
+    }
+    
+    /**
+     * Изменяет размеры области отрисовки
+     */
+    resize(width, height) {
+        this.width = width;
+        this.height = height;
+        this.updateVisual();
+    }
+    
+    /**
+     * Возвращает PIXI объект для рендеринга
+     */
+    getPixiObject() {
+        return this.graphics;
+    }
+    
+    /**
+     * Сериализует настройки сетки
+     */
+    serialize() {
+        return {
+            type: this.type,
+            enabled: this.enabled,
+            size: this.size,
+            color: this.color,
+            opacity: this.opacity,
+            lineWidth: this.lineWidth,
+            snapEnabled: this.snapEnabled,
+            snapTolerance: this.snapTolerance
+        };
+    }
+    
+    /**
+     * Очищает ресурсы
+     */
+    destroy() {
+        this.graphics.destroy();
+    }
+}