@sequent-org/moodboard 1.0.0

package/src/core/rendering/GeometryUtils.js

@@ -0,0 +1,89 @@
+/**
+ * Утилиты для геометрических вычислений
+ * Вынесены из PixiEngine для упрощения основного класса
+ */
+export class GeometryUtils {
+    /**
+     * Вычисляет расстояние от точки до отрезка.
+     * Точка - то место куда кликнул пользователь.
+     * Отрезок - нарисованная линия.
+     * Возвращает - 0 или больше 0, если 0 то клик по линии.
+     *
+     * @param {number} px - X координата точки
+     * @param {number} py - Y координата точки  
+     * @param {number} ax - X координата начала отрезка
+     * @param {number} ay - Y координата начала отрезка
+     * @param {number} bx - X координата конца отрезка
+     * @param {number} by - Y координата конца отрезка
+     * @returns {number} Расстояние от точки до отрезка
+     */
+    static distancePointToSegment(px, py, ax, ay, bx, by) {
+        const vectorABx = bx - ax;
+        const vectorABy = by - ay;
+        const vectorAPx = px - ax;
+        const vectorAPy = py - ay;
+        const squaredLengthAB = vectorABx * vectorABx + vectorABy * vectorABy;
+        
+        if (squaredLengthAB === 0) {
+            return Math.hypot(px - ax, py - ay);
+        }
+        
+        let t = (vectorAPx * vectorABx + vectorAPy * vectorABy) / squaredLengthAB;
+        t = Math.max(0, Math.min(1, t));
+        
+        const closestX = ax + t * vectorABx;
+        const closestY = ay + t * vectorABy;
+        
+        return Math.hypot(px - closestX, py - closestY);
+    }
+
+    /**
+     * Проверяет, находится ли точка внутри прямоугольника
+     * Точка - то место куда кликнул пользователь.
+     *
+     * @param {number} x - X координата точки
+     * @param {number} y - Y координата точки
+     * @param {number} rectX - X координата левого верхнего угла прямоугольника
+     * @param {number} rectY - Y координата левого верхнего угла прямоугольника
+     * @param {number} rectWidth - Ширина прямоугольника
+     * @param {number} rectHeight - Высота прямоугольника
+     * @returns {boolean} true если точка внутри прямоугольника
+     */
+    static pointInRect(x, y, rectX, rectY, rectWidth, rectHeight) {
+        return x >= rectX && x <= rectX + rectWidth && 
+               y >= rectY && y <= rectY + rectHeight;
+    }
+
+    /**
+     * Вычисляет центр прямоугольника
+     * @param {number} x - X координата левого верхнего угла
+     * @param {number} y - Y координата левого верхнего угла
+     * @param {number} width - Ширина
+     * @param {number} height - Высота
+     * @returns {{x: number, y: number}} Координаты центра
+     */
+    static getRectCenter(x, y, width, height) {
+        return {
+            x: x + width / 2,
+            y: y + height / 2
+        };
+    }
+
+    /**
+     * Конвертирует градусы в радианы
+     * @param {number} degrees - Угол в градусах
+     * @returns {number} Угол в радианах
+     */
+    static degreesToRadians(degrees) {
+        return degrees * Math.PI / 180;
+    }
+
+    /**
+     * Конвертирует радианы в градусы
+     * @param {number} radians - Угол в радианах
+     * @returns {number} Угол в градусах
+     */
+    static radiansToDegrees(radians) {
+        return radians * 180 / Math.PI;
+    }
+}

package/src/core/rendering/HitTestManager.js

@@ -0,0 +1,186 @@
+import * as PIXI from 'pixi.js';
+import { GeometryUtils } from './GeometryUtils.js';
+
+/**
+ * Менеджер hit-testing объектов
+ * Отвечает за определение объектов под курсором
+ */
+export class HitTestManager {
+    constructor(layerManager, objectsMap) {
+        this.layerManager = layerManager;
+        this.objectsMap = objectsMap; // Map<id, pixiObject>
+    }
+
+    /**
+     * Поиск объекта в указанной позиции
+     * @param {number} x - X координата в экранных координатах
+     * @param {number} y - Y координата в экранных координатах
+     * @returns {{type: string, object?: string, pixiObject?: PIXI.DisplayObject}} Результат hit-test
+     */
+    hitTest(x, y) {
+        const point = new PIXI.Point(x, y);
+        const worldLayer = this.layerManager.getWorldLayer();
+        
+        if (!worldLayer) {
+            return { type: 'empty' };
+        }
+
+        // Проходим по объектам в worldLayer от верхних к нижним
+        for (let i = worldLayer.children.length - 1; i >= 0; i--) {
+            const child = worldLayer.children[i];
+            
+            if (this._testObjectHit(child, point)) {
+                return this._createHitResult(child);
+            }
+        }
+        
+        return { type: 'empty' };
+    }
+
+    /**
+     * Тестирует попадание в конкретный объект
+     * @param {PIXI.DisplayObject} pixiObject - PIXI объект для тестирования
+     * @param {PIXI.Point} point - Точка для тестирования
+     * @returns {boolean} true если точка попадает в объект
+     * @private
+     */
+    _testObjectHit(pixiObject, point) {
+        // Основной hit-test через PIXI
+        if (pixiObject.containsPoint && pixiObject.containsPoint(point)) {
+            return true;
+        }
+
+        // Дополнительный hit-test для нарисованных линий
+        return this._testDrawingHit(pixiObject, point);
+    }
+
+    /**
+     * Специальный hit-test для нарисованных линий
+     * @param {PIXI.DisplayObject} pixiObject - PIXI объект
+     * @param {PIXI.Point} point - Точка для тестирования
+     * @returns {boolean} true если точка попадает в линию
+     * @private
+     */
+    _testDrawingHit(pixiObject, point) {
+        const meta = pixiObject._mb;
+        
+        // Проверяем только drawing объекты
+        if (!meta || meta.type !== 'drawing' || !pixiObject.toLocal) {
+            return false;
+        }
+
+        // Переводим точку в локальные координаты объекта
+        const local = pixiObject.toLocal(point);
+        const props = meta.properties || {};
+        const points = Array.isArray(props.points) ? props.points : [];
+
+        if (points.length < 2) {
+            return false;
+        }
+
+        // Оценка текущего масштаба относительно базовых размеров
+        const baseW = props.baseWidth || 1;
+        const baseH = props.baseHeight || 1;
+        const bounds = pixiObject.getBounds();
+        const scaleX = baseW ? (bounds.width / baseW) : 1;
+        const scaleY = baseH ? (bounds.height / baseH) : 1;
+
+        // Толщина линии с учётом режима маркера
+        const baseWidth = props.strokeWidth || 2;
+        const lineWidth = (props.mode === 'marker' ? baseWidth * 2 : baseWidth);
+        const threshold = Math.max(4, lineWidth / 2 + 3);
+
+        // Проверяем расстояние до каждого сегмента
+        for (let j = 0; j < points.length - 1; j++) {
+            const ax = points[j].x * scaleX;
+            const ay = points[j].y * scaleY;
+            const bx = points[j + 1].x * scaleX;
+            const by = points[j + 1].y * scaleY;
+            
+            const dist = GeometryUtils.distancePointToSegment(
+                local.x, local.y, ax, ay, bx, by
+            );
+            
+            if (dist <= threshold) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Создает результат hit-test
+     * @param {PIXI.DisplayObject} pixiObject - PIXI объект
+     * @returns {{type: string, object: string, pixiObject: PIXI.DisplayObject}} Результат
+     * @private
+     */
+    _createHitResult(pixiObject) {
+        // Находим ID объекта
+        for (const [objectId, obj] of this.objectsMap.entries()) {
+            if (obj === pixiObject) {
+                return {
+                    type: 'object',
+                    object: objectId,
+                    pixiObject: pixiObject
+                };
+            }
+        }
+
+        // Если ID не найден, возвращаем объект без ID
+        return {
+            type: 'object',
+            object: null,
+            pixiObject: pixiObject
+        };
+    }
+
+    /**
+     * Получить все объекты в указанной области
+     * @param {number} x - X координата левого верхнего угла
+     * @param {number} y - Y координата левого верхнего угла
+     * @param {number} width - Ширина области
+     * @param {number} height - Высота области
+     * @returns {Array} Массив объектов в области
+     */
+    hitTestArea(x, y, width, height) {
+        const worldLayer = this.layerManager.getWorldLayer();
+        if (!worldLayer) return [];
+
+        const results = [];
+        const worldObjects = this.layerManager.getWorldObjects();
+
+        for (const pixiObject of worldObjects) {
+            if (this._testObjectInArea(pixiObject, x, y, width, height)) {
+                const result = this._createHitResult(pixiObject);
+                if (result.object) {
+                    results.push(result);
+                }
+            }
+        }
+
+        return results;
+    }
+
+    /**
+     * Проверяет, находится ли объект в указанной области
+     * @param {PIXI.DisplayObject} pixiObject - PIXI объект
+     * @param {number} areaX - X координата области
+     * @param {number} areaY - Y координата области
+     * @param {number} areaWidth - Ширина области
+     * @param {number} areaHeight - Высота области
+     * @returns {boolean} true если объект в области
+     * @private
+     */
+    _testObjectInArea(pixiObject, areaX, areaY, areaWidth, areaHeight) {
+        const bounds = pixiObject.getBounds();
+        
+        return GeometryUtils.pointInRect(
+            bounds.x, bounds.y,
+            areaX, areaY, areaWidth, areaHeight
+        ) || GeometryUtils.pointInRect(
+            bounds.x + bounds.width, bounds.y + bounds.height,
+            areaX, areaY, areaWidth, areaHeight
+        );
+    }
+}

package/src/core/rendering/LayerManager.js

@@ -0,0 +1,137 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * Менеджер слоев PIXI приложения
+ * Управляет созданием и организацией слоев
+ */
+export class LayerManager {
+    constructor(pixiApp) {
+        this.app = pixiApp;
+        this.layers = new Map();
+        this._createLayers();
+    }
+
+    /**
+     * Создает основные слои приложения
+     * @private
+     */
+    _createLayers() {
+        // Слой сетки (не двигается)
+        this.gridLayer = new PIXI.Container();
+        this.gridLayer.name = 'gridLayer';
+        this.gridLayer.zIndex = 0;
+        this.app.stage.addChild(this.gridLayer);
+
+        // Слой мира с объектами (двигается)
+        this.worldLayer = new PIXI.Container();
+        this.worldLayer.name = 'worldLayer';
+        this.worldLayer.zIndex = 1;
+        this.worldLayer.sortableChildren = true;
+        this.app.stage.addChild(this.worldLayer);
+
+        // Сохраняем ссылки на слои
+        this.layers.set('grid', this.gridLayer);
+        this.layers.set('world', this.worldLayer);
+    }
+
+    /**
+     * Получить слой по имени
+     * @param {string} layerName - Имя слоя
+     * @returns {PIXI.Container|null} Слой или null если не найден
+     */
+    getLayer(layerName) {
+        return this.layers.get(layerName) || null;
+    }
+
+    /**
+     * Получить слой сетки
+     * @returns {PIXI.Container} Слой сетки
+     */
+    getGridLayer() {
+        return this.gridLayer;
+    }
+
+    /**
+     * Получить слой мира
+     * @returns {PIXI.Container} Слой мира
+     */
+    getWorldLayer() {
+        return this.worldLayer;
+    }
+
+    /**
+     * Установить сетку в слой сетки
+     * @param {Object} gridInstance - Экземпляр сетки
+     */
+    setGrid(gridInstance) {
+        if (!this.gridLayer) return;
+        
+        // Очищаем слой сетки
+        this.gridLayer.removeChildren();
+        
+        if (gridInstance && gridInstance.getPixiObject) {
+            const gridObject = gridInstance.getPixiObject();
+            gridObject.zIndex = 0;
+            gridObject.x = 0;
+            gridObject.y = 0;
+            this.gridLayer.addChild(gridObject);
+        }
+    }
+
+    /**
+     * Добавить объект в слой мира
+     * @param {PIXI.DisplayObject} pixiObject - PIXI объект
+     */
+    addToWorldLayer(pixiObject) {
+        if (this.worldLayer) {
+            this.worldLayer.addChild(pixiObject);
+        }
+    }
+
+    /**
+     * Удалить объект из слоя мира
+     * @param {PIXI.DisplayObject} pixiObject - PIXI объект
+     */
+    removeFromWorldLayer(pixiObject) {
+        if (this.worldLayer && this.worldLayer.children.includes(pixiObject)) {
+            this.worldLayer.removeChild(pixiObject);
+        }
+    }
+
+    /**
+     * Получить все объекты в слое мира
+     * @returns {PIXI.DisplayObject[]} Массив объектов
+     */
+    getWorldObjects() {
+        return this.worldLayer ? this.worldLayer.children : [];
+    }
+
+    /**
+     * Очистить слой мира
+     */
+    clearWorldLayer() {
+        if (this.worldLayer) {
+            this.worldLayer.removeChildren();
+        }
+    }
+
+    /**
+     * Установить Z-индекс для объекта
+     * @param {PIXI.DisplayObject} pixiObject - PIXI объект
+     * @param {number} zIndex - Z-индекс
+     */
+    setObjectZIndex(pixiObject, zIndex) {
+        if (pixiObject) {
+            pixiObject.zIndex = zIndex;
+        }
+    }
+
+    /**
+     * Сортировать объекты в слое мира по Z-индексу
+     */
+    sortWorldLayer() {
+        if (this.worldLayer) {
+            this.worldLayer.sortChildren();
+        }
+    }
+}