@sequent-org/moodboard 1.0.24 → 1.2.0

package/src/grid/GridFactory.js

@@ -67,9 +67,9 @@ export class GridFactory {
         const defaults = {
             line: {
                 enabled: true,
-                size: 20,
-                color: 0xE0E0E0,
-                opacity: 0.5,
+                size: 32,
+                color: 0x6a6aff,
+                opacity: 0.4,
                 lineWidth: 1,
                 showSubGrid: false,
                 subGridDivisions: 4

package/src/grid/LineGrid.js

@@ -11,15 +11,26 @@ export class LineGrid extends BaseGrid {
         // Дополнительные настройки для линейной сетки
         this.showSubGrid = options.showSubGrid ?? false;
         this.subGridDivisions = options.subGridDivisions || 4;
-        this.subGridColor = options.subGridColor || 0xF0F0F0;
-        this.subGridOpacity = options.subGridOpacity || 0.3;
+        this.subGridColor = options.subGridColor || 0xE3E3E3;
+        this.subGridOpacity = options.subGridOpacity || 0.45;
+        // Более тонкие основные линии и более контрастные
+        this.lineWidth = Math.max(0.5, (options.lineWidth || this.lineWidth) / 2);
+        this.color = options.color || 0xB0B0B0;
+        this.opacity = options.opacity || 0.9;
     }
     
     /**
      * Создает визуальное представление линейной сетки
      */
     createVisual() {
-        this.graphics.lineStyle(this.lineWidth, this.color, 1);
+        // Применяем непрозрачность на графику (умножится на alpha линий)
+        this.graphics.alpha = this.opacity;
+        try {
+            // В новых версиях можно указать alignment для большей чёткости
+            this.graphics.lineStyle({ width: this.lineWidth, color: this.color, alpha: 1, alignment: 0.5 });
+        } catch (_) {
+            this.graphics.lineStyle(this.lineWidth, this.color, 1);
+        }
         
         // Основные линии сетки
         this.drawMainGrid();
@@ -34,16 +45,23 @@ export class LineGrid extends BaseGrid {
      * Рисует основную сетку
      */
     drawMainGrid() {
+        const w = this.width;
+        const h = this.height;
+        const step = this.size;
+        const half = this.lineWidth / 2;
+        // Выравниваем к половине пикселя для чётких линий на любых DPI
         // Вертикальные линии
-        for (let x = 0; x <= this.width; x += this.size) {
-            this.graphics.moveTo(x, 0);
-            this.graphics.lineTo(x, this.height);
+        for (let x = 0; x <= w; x += step) {
+            const px = Math.round(x) + (Number.isFinite(half) ? 0.5 : 0);
+            this.graphics.moveTo(px, 0);
+            this.graphics.lineTo(px, h);
         }
         
         // Горизонтальные линии
-        for (let y = 0; y <= this.height; y += this.size) {
-            this.graphics.moveTo(0, y);
-            this.graphics.lineTo(this.width, y);
+        for (let y = 0; y <= h; y += step) {
+            const py = Math.round(y) + (Number.isFinite(half) ? 0.5 : 0);
+            this.graphics.moveTo(0, py);
+            this.graphics.lineTo(w, py);
         }
     }
     
@@ -52,24 +70,28 @@ export class LineGrid extends BaseGrid {
      */
     drawSubGrid() {
         const subSize = this.size / this.subGridDivisions;
-        
-        this.graphics.lineStyle(1, this.subGridColor, this.subGridOpacity);
-        
+        try {
+            this.graphics.lineStyle({ width: 0.5, color: this.subGridColor, alpha: this.subGridOpacity, alignment: 0.5 });
+        } catch (_) {
+            this.graphics.lineStyle(0.5, this.subGridColor, this.subGridOpacity);
+        }
+        const w = this.width;
+        const h = this.height;
         // Вертикальные подлинии
-        for (let x = subSize; x < this.width; x += subSize) {
-            // Пропускаем основные линии
+        for (let x = subSize; x < w; x += subSize) {
             if (x % this.size !== 0) {
-                this.graphics.moveTo(x, 0);
-                this.graphics.lineTo(x, this.height);
+                const px = Math.round(x) + 0.5;
+                this.graphics.moveTo(px, 0);
+                this.graphics.lineTo(px, h);
             }
         }
         
         // Горизонтальные подлинии
-        for (let y = subSize; y < this.height; y += subSize) {
-            // Пропускаем основные линии
+        for (let y = subSize; y < h; y += subSize) {
             if (y % this.size !== 0) {
-                this.graphics.moveTo(0, y);
-                this.graphics.lineTo(this.width, y);
+                const py = Math.round(y) + 0.5;
+                this.graphics.moveTo(0, py);
+                this.graphics.lineTo(w, py);
             }
         }
     }

package/src/moodboard/MoodBoard.js

@@ -186,6 +186,17 @@ export class MoodBoard {
             this.options.theme
         );
 
+        // Инициализация цвета кнопки "краска" по текущему фону канваса
+        try {
+            const app = this.coreMoodboard?.pixi?.app;
+            const colorInt = (app?.renderer?.background && app.renderer.background.color) || app?.renderer?.backgroundColor;
+            if (typeof colorInt === 'number') {
+                const boardHex = `#${colorInt.toString(16).padStart(6, '0')}`;
+                const btnHex = this.topbar.mapBoardToBtnHex(boardHex);
+                this.topbar.setPaintButtonHex(btnHex || '#B3E5FC');
+            }
+        } catch (_) {}
+
         // Смена фона доски по выбору цвета в топбаре
         this.coreMoodboard.eventBus.on(Events.UI.PaintPick, ({ color }) => {
             if (!color) return;

package/src/objects/DrawingObject.js

@@ -73,15 +73,24 @@ export class DrawingObject {
 
     _redrawPreserveTransform(points) {
         const g = this.graphics;
-        const x = g.x;
-        const y = g.y;
+        // Сохраняем текущий центр и поворот
+        const centerX = g.x;
+        const centerY = 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;
+
+        // После перерисовки выставляем pivot по ЦЕНТРУ ЛОКАЛЬНЫХ границ,
+        // чтобы поворот происходил вокруг геометрического центра без диагонального смещения
+        const lb = g.getLocalBounds();
+        const pX = (lb.x || 0) + Math.max(0, lb.width / 2);
+        const pY = (lb.y || 0) + Math.max(0, lb.height / 2);
+        g.pivot.set(pX, pY);
+
+        // Восстанавливаем центр и поворот
+        g.x = centerX;
+        g.y = centerY;
         g.rotation = rot;
     }
 

package/src/objects/FileObject.js

@@ -31,6 +31,13 @@ export class FileObject {
         this.container.eventMode = 'static';
         this.container.interactiveChildren = true;
         
+        // Размытая тень (подложка)
+        this.shadow = new PIXI.Graphics();
+        try {
+            this.shadow.filters = [new PIXI.filters.BlurFilter(6)];
+        } catch (e) {}
+        this.container.addChild(this.shadow);
+
         // Графика фона и иконки
         this.graphics = new PIXI.Graphics();
         this.container.addChild(this.graphics);
@@ -147,19 +154,23 @@ export class FileObject {
         const w = this.width;
         const h = this.height;
         
-        g.clear();
+        // Обновляем тень (прямоугольная, размытая)
+        if (this.shadow) {
+            const s = this.shadow;
+            s.clear();
+            s.beginFill(0x000000, 1);
+            s.drawRect(0, 0, w, h);
+            s.endFill();
+            s.x = 2;
+            s.y = 3;
+            s.alpha = 0.18;
+        }
         
-        // Тень
-        g.beginFill(0x000000, 0.1);
-        g.drawRoundedRect(2, 2, w, h, 8);
-        g.endFill();
+        g.clear();
         
-        // Основной фон (блеклый для удаленных файлов)
-        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.beginFill(0xFFFFFF, 1);
+        g.drawRect(0, 0, w, h);
         g.endFill();
         
         // Иконка файла в верхней части
@@ -184,6 +195,9 @@ export class FileObject {
                    point.y >= bounds.y && 
                    point.y <= bounds.y + bounds.height;
         };
+
+        // Важное выравнивание: pivot контейнера по центру, чтобы рамка совпадала
+        this.container.pivot.set(w / 2, h / 2);
     }
 
     _drawFileIcon(graphics, x, y, size, color, extension) {

package/src/objects/FrameObject.js

@@ -12,10 +12,21 @@ export class FrameObject {
         this.objectData = objectData || {};
         this.width = this.objectData.width || 100;
         this.height = this.objectData.height || 100;
-        this.borderWidth = 2;
+        // Берем стили рамки из CSS-переменных, с дефолтом
+        const rootStyles = (typeof window !== 'undefined') ? getComputedStyle(document.documentElement) : null;
+        const cssBorderWidth = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-border-width') || '4') : 4;
+        const cssCornerRadius = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-corner-radius') || '6') : 6;
+        const cssBorderColor = rootStyles ? rootStyles.getPropertyValue('--frame-border-color').trim() : '';
+        this.borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 4;
         // Используем backgroundColor из данных объекта, если есть, иначе белый
         this.fillColor = this.objectData.backgroundColor || this.objectData.properties?.backgroundColor || 0xFFFFFF;
-        this.strokeColor = this.objectData.borderColor || 0x333333;
+        // Парсим цвет из CSS переменной, если задан
+        if (cssBorderColor && cssBorderColor.startsWith('#')) {
+            this.strokeColor = parseInt(cssBorderColor.slice(1), 16);
+        } else {
+            this.strokeColor = (typeof this.objectData.borderColor === 'number') ? this.objectData.borderColor : 0xE0E0E0;
+        }
+        this.cornerRadius = Number.isFinite(cssCornerRadius) ? cssCornerRadius : 6;
         this.title = this.objectData.title || this.objectData.properties?.title || 'Новый';
 
         // Создаем контейнер для фрейма и заголовка
@@ -32,11 +43,16 @@ export class FrameObject {
             fill: 0x333333,
             fontWeight: 'bold'
         });
-        this.titleText.anchor.set(0, 1); // Левый нижний угол текста
-        this.titleText.y = -5; // Немного выше фрейма
+        // Размещаем заголовок внутри верхней части фрейма, чтобы не влиять на внешние границы
+        this.titleText.anchor.set(0, 0);
+        this.titleText.x = 8;
+        this.titleText.y = 4;
         this.container.addChild(this.titleText);
         
         this._draw(this.width, this.height, this.fillColor);
+        // Центрируем pivot контейнера, чтобы совпадали рамка и ручки
+        // pivot по центру, чтобы позиция (x,y) контейнера соответствовала центру видимой области фрейма
+        this.container.pivot.set(this.width / 2, this.height / 2);
     }
 
     /**
@@ -100,8 +116,8 @@ export class FrameObject {
         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;
+        const pivotX = width / 2;
+        const pivotY = height / 2;
 
         this._draw(width, height, color);
 
@@ -117,11 +133,24 @@ export class FrameObject {
     _draw(width, height, color) {
         const g = this.graphics;
         g.clear();
-        g.lineStyle(this.borderWidth, this.strokeColor, 1);
+        // Рисуем с выравниванием обводки внутрь, чтобы внешний контур был ровно width x height
+        try {
+            g.lineStyle({ width: this.borderWidth, color: this.strokeColor, alpha: 1, alignment: 1 });
+        } catch (e) {
+            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.drawRoundedRect(0, 0, Math.max(0, width), Math.max(0, height), this.cornerRadius);
         g.endFill();
+        // Обновляем hitArea и корректный hit testing
+        this.container.hitArea = new PIXI.Rectangle(0, 0, width, 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;
+        };
     }
 }
 

package/src/objects/ImageObject.js

@@ -7,15 +7,19 @@ export class ImageObject {
     constructor(objectData = {}) {
         this.objectData = objectData;
         let src = objectData.properties?.src || objectData.src;
+        const isEmojiIcon = !!objectData.properties?.isEmojiIcon;
         // Не используем устаревшие 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.width = Math.max(1, Math.round(objectData.width || objectData.properties?.width || 200));
+        this.height = Math.max(1, Math.round(objectData.height || objectData.properties?.height || 150));
+        const texture = src ? PIXI.Texture.from(src, { resourceOptions: { resolution: (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1 } }) : PIXI.Texture.WHITE;
         this.sprite = new PIXI.Sprite(texture);
         this.sprite.anchor.set(0.5, 0.5); // центр для совместимости с позиционированием по центру
+        if (isEmojiIcon) {
+            this.sprite.roundPixels = true; // без nearest, чтобы не форсить увеличение
+        }
         if (!src) {
             this.sprite.tint = 0xcccccc;
         }
@@ -45,6 +49,15 @@ export class ImageObject {
             this.sprite.texture.baseTexture.once('error', onError);
         }
 
+        if (this.sprite.texture.baseTexture) {
+            // Ставим ту же resolution, что у renderer, чтобы минимизировать блюр
+            try {
+                const dpr = (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1;
+                this.sprite.texture.baseTexture.setResolution(dpr);
+            } catch (_) {}
+            // оставляем стандартную фильтрацию, чтобы не усиливать пиксельную лесенку при уменьшении
+        }
+
         if (this.sprite.texture.baseTexture?.valid) {
             fitToSize();
         } else if (this.sprite.texture.baseTexture) {
@@ -58,8 +71,14 @@ export class ImageObject {
 
     updateSize(size) {
         if (!size) return;
-        const w = Math.max(1, size.width || 1);
-        const h = Math.max(1, size.height || 1);
+        let w = Math.max(1, size.width || 1);
+        let h = Math.max(1, size.height || 1);
+        // Если объект помечен как emoji icon — сохраняем квадратные пропорции
+        const isEmojiIcon = !!(this.objectData?.properties?.isEmojiIcon);
+        if (isEmojiIcon) {
+            const s = Math.max(w, h);
+            w = s; h = s;
+        }
         const apply = () => {
             const texW = this.sprite.texture.width || 1;
             const texH = this.sprite.texture.height || 1;