@sequent-org/moodboard 1.1.0 → 1.2.0

package/src/core/index.js

@@ -551,7 +551,8 @@ export class CoreMoodBoard {
 
         // События перетаскивания
         this.eventBus.on(Events.Tool.DragStart, (data) => {
-            // Сохраняем начальную позицию как левый-верх, переводя центр PIXI в state-координаты
+            // Сохраняем начальную позицию как левый-верх 
+            // Все объекты используют pivot по центру, поэтому логика одинакова
             const pixiObject = this.pixi.objects.get(data.object);
             if (pixiObject) {
                 const halfW = (pixiObject.width || 0) / 2;
@@ -688,7 +689,8 @@ export class CoreMoodBoard {
                 }
             }
             if (moves.length > 0) {
-                const cmd = new GroupMoveCommand(this, moves);
+                // Обычное групповое перемещение - координаты центров PIXI
+                const cmd = new GroupMoveCommand(this, moves, false);
                 cmd.setEventBus(this.eventBus);
                 this.history.executeCommand(cmd);
             }
@@ -713,7 +715,9 @@ export class CoreMoodBoard {
             if (this.dragStartPosition) {
                 const pixiObject = this.pixi.objects.get(data.object);
                 if (pixiObject) {
-                    const finalPosition = { x: pixiObject.x - (pixiObject.width||0)/2, y: pixiObject.y - (pixiObject.height||0)/2 };
+                    // Берем финальную позицию из state, который обновлялся во время drag:update
+                    const objState = this.state.state.objects.find(o => o.id === data.object);
+                    const finalPosition = objState && objState.position ? { x: objState.position.x, y: objState.position.y } : { x: 0, y: 0 };
                     
                     // Создаем команду только если позиция действительно изменилась
                     if (this.dragStartPosition.x !== finalPosition.x || 
@@ -737,7 +741,8 @@ export class CoreMoodBoard {
                                 const to = { x: child.position.x, y: child.position.y };
                                 moves.push({ id: childId, from, to });
                             }
-                            const cmd = new GroupMoveCommand(this, moves);
+                            // Frame перемещение - координаты уже левый-верх
+                            const cmd = new GroupMoveCommand(this, moves, true);
                             cmd.setEventBus(this.eventBus);
                             this.history.executeCommand(cmd);
                         } else {
@@ -1063,33 +1068,54 @@ export class CoreMoodBoard {
             const objectType = object ? object.type : null;
 
             // Сохраняем пропорции для фреймов, кроме произвольных (lockedAspect=false)
-            if (objectType === 'frame' && data.size) {
+            if ((objectType === 'frame' || (objectType === 'image' && object?.properties?.isEmojiIcon)) && data.size) {
                 const lockedAspect = !!(object?.properties && (object.properties.lockedAspect === true));
-                if (!lockedAspect) {
+                const isEmoji = (objectType === 'image' && object?.properties?.isEmojiIcon);
+                if (!lockedAspect && !isEmoji) {
                     // произвольные фреймы — без ограничений
                 } else {
                 const start = this._activeResize?.startSize || { width: object.width, height: object.height };
-                const aspect = (start.width > 0 && start.height > 0) ? (start.width / start.height) : (object.width / Math.max(1, object.height));
+                const aspect = isEmoji ? 1 : ((start.width > 0 && start.height > 0) ? (start.width / start.height) : (object.width / Math.max(1, object.height)));
                 let w = Math.max(1, data.size.width);
                 let h = Math.max(1, data.size.height);
-                // Приводим к ближайшему по изменяемой стороне
-                // Определим, какая сторона изменилась сильнее
-                const dw = Math.abs(w - start.width);
-                const dh = Math.abs(h - start.height);
-                if (dw >= dh) {
-                    h = Math.round(w / aspect);
+                const hndl = (this._activeResize?.handle || '').toLowerCase();
+                if (isEmoji) {
+                    // Делаем квадрат, фиксируя противоположную сторону к старту
+                    const s = Math.max(w, h);
+                    // Вычислим позицию сразу, чтобы не было дрейфа правой/нижней границы
+                    if (!data.position && this._activeResize && this._activeResize.objectId === data.object) {
+                        const startPos = this._activeResize.startPosition;
+                        const sw = this._activeResize.startSize.width;
+                        const sh = this._activeResize.startSize.height;
+                        let x = startPos.x;
+                        let y = startPos.y;
+                        if (hndl.includes('w')) { x = startPos.x + (sw - s); }
+                        if (hndl.includes('n')) { y = startPos.y + (sh - s); }
+                        const isEdge = ['n','s','e','w'].includes(hndl);
+                        if (isEdge) {
+                            if (hndl === 'n' || hndl === 's') x = startPos.x + Math.round((sw - s) / 2);
+                            if (hndl === 'e' || hndl === 'w') y = startPos.y + Math.round((sh - s) / 2);
+                        }
+                        data.position = { x: Math.round(x), y: Math.round(y) };
+                    }
+                    w = s; h = s;
                 } else {
-                    w = Math.round(h * aspect);
-                }
-                // Минимальная площадь фрейма ~1800px²
-                const minArea = 1800;
-                const area = Math.max(1, w * h);
-                if (area < minArea) {
-                    const scale = Math.sqrt(minArea / area);
-                    w = Math.round(w * scale);
-                    h = Math.round(h * scale);
+                    // Обычная поддержка аспекта для фреймов
+                    const dw = Math.abs(w - start.width);
+                    const dh = Math.abs(h - start.height);
+                    if (dw >= dh) { h = Math.round(w / aspect); } else { w = Math.round(h * aspect); }
                 }
-                data.size = { width: w, height: h };
+                 // Минимальная площадь — только для фреймов
+                 if (!isEmoji) {
+                     const minArea = 1800;
+                     const area = Math.max(1, w * h);
+                     if (area < minArea) {
+                         const scale = Math.sqrt(minArea / area);
+                         w = Math.round(w * scale);
+                         h = Math.round(h * scale);
+                     }
+                 }
+                 data.size = { width: w, height: h };
 
                 // Если позиция известна (фиксированная противоположная сторона) — откорректируем её
                 if (!data.position && this._activeResize && this._activeResize.objectId === data.object) {
@@ -1374,9 +1400,9 @@ export class CoreMoodBoard {
 
         // Обновляем ручки когда объект изменяется через команды (Undo/Redo)
         this.eventBus.on(Events.Object.TransformUpdated, (data) => {
-            console.log(`🔄 Объект ${data.objectId} был изменен через команду, обновляем ручки`);
             // Обновляем ручки если объект выделен
-            if (this.selectTool && this.selectTool.selectedObjects.has(data.objectId)) {
+            if (this.selectTool && this.selectTool.selection && this.selectTool.selection.has(data.objectId)) {
+                console.log(`🔄 Core: Объект ${data.objectId} изменен через команду, обновляем ручки SelectTool`);
                 this.selectTool.updateResizeHandles();
             }
         });
@@ -1388,27 +1414,21 @@ export class CoreMoodBoard {
         });
 
         // Получение позиции объекта (левый-верх логических координат)
+        // Используем размеры PIXI для согласованности с updateObjectPositionDirect
         this.eventBus.on(Events.Tool.GetObjectPosition, (data) => {
             const pixiObject = this.pixi.objects.get(data.objectId);
-            if (pixiObject) {
-                const halfW = (pixiObject.width || 0) / 2;
-                const halfH = (pixiObject.height || 0) / 2;
-                data.position = { x: pixiObject.x - halfW, y: pixiObject.y - halfH };
-            }
+            if (!pixiObject) return;
+            
+            // Всегда используем размеры из PIXI для согласованности
+            const halfW = (pixiObject.width || 0) / 2;
+            const halfH = (pixiObject.height || 0) / 2;
+            data.position = { x: pixiObject.x - halfW, y: pixiObject.y - halfH };
         });
 
         // Получение PIXI объекта
         this.eventBus.on(Events.Tool.GetObjectPixi, (data) => {
-            console.log(`🔍 Запрос PIXI объекта для ${data.objectId}`);
-            console.log('📋 Доступные PIXI объекты:', Array.from(this.pixi.objects.keys()));
-            
             const pixiObject = this.pixi.objects.get(data.objectId);
-            if (pixiObject) {
-                console.log(`✅ PIXI объект найден для ${data.objectId}`);
-                data.pixiObject = pixiObject;
-            } else {
-                console.log(`❌ PIXI объект НЕ найден для ${data.objectId}`);
-            }
+            data.pixiObject = pixiObject || null;
         });
 
         // Получение списка всех объектов (с их PIXI и логическими границами)
@@ -1533,6 +1553,9 @@ export class CoreMoodBoard {
                                 if (updates.properties.fontSize !== undefined) {
                                     styleUpdates.fontSize = updates.properties.fontSize;
                                 }
+                                if (updates.properties.fontFamily !== undefined) {
+                                    styleUpdates.fontFamily = updates.properties.fontFamily;
+                                }
                                 
                                 if (Object.keys(styleUpdates).length > 0) {
                                     instance.setStyle(styleUpdates);
@@ -1872,7 +1895,8 @@ export class CoreMoodBoard {
      * Используется во время перетаскивания для плавного движения
      */
     updateObjectPositionDirect(objectId, position) {
-        // position — левый верх (state); приводим к центру в PIXI
+        // position — левый верх (state); приводим к центру в PIXI, используя размеры PIXI объекта
+        // Все объекты используют pivot по центру, поэтому логика одинакова для всех
         const pixiObject = this.pixi.objects.get(objectId);
         if (pixiObject) {
             const halfW = (pixiObject.width || 0) / 2;
@@ -1957,6 +1981,14 @@ export class CoreMoodBoard {
         };
         const initialWidth = (properties && typeof properties.width === 'number') ? properties.width : 100;
         const initialHeight = (properties && typeof properties.height === 'number') ? properties.height : 100;
+        // Зафиксировать пропорции для эмоджи-иконок (квадрат)
+        if (type === 'image' && properties && properties.isEmojiIcon) {
+            const s = Math.max(1, Math.round((initialWidth + initialHeight) / 2));
+            properties.lockedAspect = true;
+            properties.aspect = 1; // квадрат
+            properties.width = s;
+            properties.height = s;
+        }
 
         // Если создаём НЕ фрейм — проверим, попадает ли центр нового объекта внутрь какого-либо фрейма.
         // Если да, сразу прикрепляем объект к этому фрейму (properties.frameId)

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

@@ -81,11 +81,11 @@ export class DrawingObject {
         // Перерисовываем геометрию
         this._draw(points, this.color, this.strokeWidth, this.mode);
 
-        // После перерисовки выставляем pivot по центру новой геометрии,
-        // чтобы ядро корректно сопоставляло левый-верх и центр при ресайзе
-        const b = g.getBounds();
-        const pX = Math.max(0, b.width / 2);
-        const pY = Math.max(0, b.height / 2);
+        // После перерисовки выставляем 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);
 
         // Восстанавливаем центр и поворот

package/src/objects/FrameObject.js

@@ -51,6 +51,7 @@ export class FrameObject {
         
         this._draw(this.width, this.height, this.fillColor);
         // Центрируем pivot контейнера, чтобы совпадали рамка и ручки
+        // pivot по центру, чтобы позиция (x,y) контейнера соответствовала центру видимой области фрейма
         this.container.pivot.set(this.width / 2, this.height / 2);
     }
 

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;