@sequent-org/moodboard 1.1.0 → 1.2.0

package/src/objects/NoteObject.js

@@ -14,13 +14,15 @@ export class NoteObject {
         this.objectData = objectData;
         
         // Размеры записки
-        this.width = objectData.width || objectData.properties?.width || 160;
-        this.height = objectData.height || objectData.properties?.height || 100;
+        const defaultSide = 250; // квадрат 250x250
+        this.width = objectData.width || objectData.properties?.width || defaultSide;
+        this.height = objectData.height || objectData.properties?.height || defaultSide;
         
         // Свойства записки
         const props = objectData.properties || {};
         this.content = props.content || '';
-        this.fontSize = props.fontSize || 16;
+        this.fontSize = props.fontSize || 32;
+        const fontFamily = props.fontFamily || 'Caveat, Arial, cursive';
         this.backgroundColor = (typeof props.backgroundColor === 'number') ? props.backgroundColor : 0xFFF9C4; // Светло-желтый
         this.borderColor = (typeof props.borderColor === 'number') ? props.borderColor : 0xF9A825; // Золотистый
         this.textColor = (typeof props.textColor === 'number') ? props.textColor : 0x1A1A1A; // Почти черный для лучшей контрастности
@@ -32,35 +34,74 @@ export class NoteObject {
         this.container.eventMode = 'static';
         this.container.interactiveChildren = true;
         
-        // Размытая тень (отдельный слой под фоном)
-        this.shadow = new PIXI.Graphics();
-        // Применяем блёр к тени (мягкая тень)
+        // Тени по бокам (как у .box::before / .box::after)
+        this.shadowLayer = new PIXI.Container();
+        this.shadowLeft = new PIXI.Graphics();
+        this.shadowRight = new PIXI.Graphics();
+        this.shadowLayer.addChild(this.shadowLeft);
+        this.shadowLayer.addChild(this.shadowRight);
         try {
-            this.shadow.filters = [new PIXI.filters.BlurFilter(6)];
-        } catch (e) {
-            // Если фильтры недоступны, тень останется без размытия
-        }
-        this.container.addChild(this.shadow);
+            // Мягкая тень (чуть сильнее)
+            this.shadowLayer.filters = [new PIXI.filters.BlurFilter(12)];
+        } catch (_) {}
+        this.container.addChild(this.shadowLayer);
 
         // Графика фона
         this.graphics = new PIXI.Graphics();
         this.container.addChild(this.graphics);
         
+        // Функция согласованной высоты строки (как в HtmlTextLayer)
+        this._computeLineHeightPx = (fs) => {
+            if (fs <= 12) return Math.round(fs * 1.40);
+            if (fs <= 18) return Math.round(fs * 1.34);
+            if (fs <= 36) return Math.round(fs * 1.26);
+            if (fs <= 48) return Math.round(fs * 1.24);
+            if (fs <= 72) return Math.round(fs * 1.22);
+            if (fs <= 96) return Math.round(fs * 1.20);
+            return Math.round(fs * 1.18);
+        };
+
         // Текст записки
         this.textField = new PIXI.Text(this.content, {
-            fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif',
+            fontFamily: fontFamily,
             fontSize: this.fontSize,
             fill: this.textColor,
             align: 'center',
+            letterSpacing: 0,
             wordWrap: true,
-            wordWrapWidth: this.width - 16, // Отступы по 8px с каждой стороны
-            lineHeight: this.fontSize * 1.2,
+            breakWords: true,
+            wordWrapWidth: Math.max(1, Math.min(360, (this.width - 32))),
+            lineHeight: this._computeLineHeightPx(this.fontSize),
+            padding: 3,
+            trim: false,
             resolution: (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1
         });
         
+        // Маска для обрезки текста по границам записки
+        this.textMask = new PIXI.Graphics();
+        this.container.addChild(this.textMask);
+        this.textField.mask = this.textMask;
+
         this._redraw(); // Сначала рисуем фон
+        // Прячем текст до загрузки шрифта Caveat, чтобы не показывать системный
+        this.textField.visible = false;
         this.container.addChild(this.textField); // Затем добавляем текст поверх
         this._updateTextPosition();
+        // Если шрифт уже загружен — показываем сразу, иначе подождём загрузки
+        if (this._isFontLoaded(fontFamily, this.fontSize)) {
+            this.textField.visible = true;
+        } else {
+            this._ensureWebFontApplied(fontFamily, this.fontSize);
+            // Фолбэк на случай отсутствия Font Loading API — короткая задержка
+            try {
+                if (!(typeof document !== 'undefined' && document.fonts && typeof document.fonts.load === 'function')) {
+                    setTimeout(() => { try { this.textField.visible = true; } catch (_) {} }, 300);
+                }
+            } catch (_) {}
+        }
+
+        // Гарантируем применение web-font (например, Caveat) при первом создании
+        this._ensureWebFontApplied(fontFamily, this.fontSize);
         
         // Отладочная информация
         console.log('NoteObject created with content:', this.content);
@@ -73,6 +114,7 @@ export class NoteObject {
             properties: { 
                 content: this.content,
                 fontSize: this.fontSize,
+                fontFamily: fontFamily,
                 backgroundColor: this.backgroundColor,
                 borderColor: this.borderColor,
                 textColor: this.textColor,
@@ -83,14 +125,71 @@ export class NoteObject {
         this._redraw();
     }
 
+    /**
+     * Возвращает видимую ширину текстового блока, согласованную с режимом редактирования
+     */
+    _getVisibleTextWidth() {
+        const horizontalPadding = 16;
+        const contentWidth = Math.max(1, this.width - (horizontalPadding * 2));
+        return Math.max(1, Math.min(360, contentWidth));
+    }
+
+    /** Проверяет, загружен ли указанный web-шрифт */
+    _isFontLoaded(fontFamily, fontSizePx) {
+        try {
+            if (typeof document === 'undefined' || !document.fonts || typeof document.fonts.check !== 'function') return false;
+            const primary = String(fontFamily || '').split(',')[0].trim().replace(/^['"]|['"]$/g, '') || 'Caveat';
+            const size = Math.max(1, Number(fontSizePx) || 32);
+            const spec = `normal ${size}px ${primary}`;
+            return document.fonts.check(spec);
+        } catch (_) {
+            return false;
+        }
+    }
+
+    /**
+     * Подгоняет размер шрифта так, чтобы текст умещался внутри записки
+     */
+    _fitTextToBounds() {
+        if (!this.textField) return;
+        const maxWidth = this._getVisibleTextWidth();
+        const verticalPadding = 16;
+        const maxHeight = Math.max(1, this.height - (verticalPadding * 2));
+
+        // Базовые установки стиля перед измерением
+        this.textField.style.wordWrap = true;
+        this.textField.style.breakWords = true;
+        this.textField.style.wordWrapWidth = maxWidth;
+
+        // Начинаем с желаемого размера шрифта
+        let displayFontSize = Math.max(1, Number(this.fontSize) || 32);
+        const minFontSize = 8;
+        let safety = 0;
+        const maxIterations = 64;
+
+        while (safety < maxIterations) {
+            this.textField.style.fontSize = displayFontSize;
+            this.textField.style.lineHeight = this._computeLineHeightPx(displayFontSize);
+            this.textField.updateText();
+            const needsShrink = this.textField.height > maxHeight;
+            if (!needsShrink || displayFontSize <= minFontSize) break;
+            displayFontSize = Math.max(minFontSize, displayFontSize - 1);
+            safety++;
+        }
+    }
+
     getPixi() {
         return this.container;
     }
 
     updateSize(size) {
         if (!size) return;
-        this.width = Math.max(80, size.width || this.width);
-        this.height = Math.max(60, size.height || this.height);
+        let w = Math.max(80, size.width || this.width);
+        let h = Math.max(60, size.height || this.height);
+        // Держим квадрат
+        const side = Math.max(w, h);
+        this.width = side;
+        this.height = side;
         
         this._redraw();
         this._updateTextPosition();
@@ -108,8 +207,10 @@ export class NoteObject {
 
     setContent(content) {
         this.content = content || '';
+        if (this.textField) this.textField.visible = false;
         this.textField.text = this.content;
         this._updateTextPosition();
+        if (this.textField) this.textField.visible = true;
         if (this.container && this.container._mb) {
             this.container._mb.properties = {
                 ...(this.container._mb.properties || {}),
@@ -149,7 +250,22 @@ export class NoteObject {
         if (typeof fontSize === 'number') {
             this.fontSize = fontSize;
             this.textField.style.fontSize = fontSize;
-            this.textField.style.lineHeight = fontSize * 1.2;
+            // Согласуем с HTML-слоем
+            this.textField.style.lineHeight = this._computeLineHeightPx(fontSize);
+            this.textField.style.padding = 3;
+            this.textField.style.trim = false;
+            this.textField.style.letterSpacing = 0;
+        }
+        if (typeof arguments[0]?.fontFamily === 'string') {
+            const ff = arguments[0].fontFamily;
+            this.textField.style.fontFamily = ff;
+            if (this.container && this.container._mb) {
+                this.container._mb.properties = {
+                    ...(this.container._mb.properties || {}),
+                    fontFamily: ff
+                };
+            }
+            this._ensureWebFontApplied(ff, this.fontSize);
         }
         if (typeof backgroundColor === 'number') this.backgroundColor = backgroundColor;
         if (typeof borderColor === 'number') this.borderColor = borderColor;
@@ -172,6 +288,27 @@ export class NoteObject {
         this._updateTextPosition();
     }
 
+    /**
+     * Дожидается загрузки веб-шрифта и обновляет PIXI.Text, чтобы применились корректные метрики
+     */
+    _ensureWebFontApplied(fontFamily, fontSizePx) {
+        try {
+            if (typeof document === 'undefined' || !document.fonts || !document.fonts.load) return;
+            const primary = String(fontFamily || '').split(',')[0].trim().replace(/^['"]|['"]$/g, '') || 'Caveat';
+            const size = Math.max(1, Number(fontSizePx) || 32);
+            const spec = `normal ${size}px ${primary}`;
+            document.fonts.load(spec).then(() => {
+                // Обновляем текст после загрузки шрифта и сразу подгоняем без мерцания
+                try {
+                    if (this.textField) this.textField.visible = false;
+                    this.textField.style.fontFamily = fontFamily;
+                    this._updateTextPosition();
+                    if (this.textField) this.textField.visible = true;
+                } catch (_) {}
+            }).catch(() => {});
+        } catch (_) {}
+    }
+
     _redraw() {
         const g = this.graphics;
         const w = this.width;
@@ -179,28 +316,44 @@ export class NoteObject {
         
         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; // прозрачность тени
-            // Если есть фильтр Blur, он уже применён в конструкторе
-        }
-        
-        // Основной фон записки (прямоугольный без скруглений, без рамки)
-        g.beginFill(this.backgroundColor, 1);
-        g.drawRect(0, 0, w, h);
-        g.endFill();
+        // Левая и правая тень (узкие полосы снизу)
+        const shH = Math.max(8, Math.round(h * 0.05)); // толще тень (~5% высоты)
+        const shW = Math.max(24, Math.round(w * 0.45)); // шире тень (~45% ширины)
+        const bottom = Math.max(8, Math.round(h * 0.03)) + 10; // отступ снизу ~10
+
+        const drawShadow = (g) => {
+            g.clear();
+            g.beginFill(0x000000, 1);
+            g.drawRoundedRect(0, 0, shW, shH, shH / 2);
+            g.endFill();
+        };
+        drawShadow(this.shadowLeft);
+        drawShadow(this.shadowRight);
+
+        // Обновляем маску текста под новые размеры
+        const pad = 16;
+        this.textMask.clear();
+        this.textMask.beginFill(0x000000, 1);
+        this.textMask.drawRect(pad, pad, Math.max(1, w - pad * 2), Math.max(1, h - pad * 2));
+        this.textMask.endFill();
+
+        // Базовые позиции как в CSS: left:15px и right:15px; bottom:10px
+        this.shadowLeft.x = 15;
+        this.shadowLeft.y = h - shH - 10;
+        this.shadowLeft.skew = new PIXI.ObservablePoint(() => {}, null, -5 * Math.PI / 180, 0);
+        this.shadowLeft.rotation = -5 * Math.PI / 180;
+
+        this.shadowRight.x = w - shW - 15;
+        this.shadowRight.y = h - shH - 10;
+        this.shadowRight.skew = new PIXI.ObservablePoint(() => {}, null, 5 * Math.PI / 180, 0);
+        this.shadowRight.rotation = 5 * Math.PI / 180;
+
+        this.shadowLayer.alpha = 0.7; // темнее
         
-        // Прямоугольная шапка сверху, тем же цветом что и рамка
-        g.beginFill(this.borderColor, 1);
-        g.drawRect(0, 0, w, 8);
+        // Основной фон записки — как .box: белый с небольшим радиусом
+        const boxBg = (typeof this.backgroundColor === 'number') ? this.backgroundColor : 0xFFFFFF;
+        g.beginFill(boxBg, 1);
+        g.drawRoundedRect(0, 0, w, h, 2);
         g.endFill();
         
         // Линии внутри записки убраны по требованию дизайна
@@ -219,24 +372,44 @@ export class NoteObject {
                    point.y >= bounds.y && 
                    point.y <= bounds.y + bounds.height;
         };
+
+        // Hover-эффект: ослабляем короб тени и сдвигаем ближе к центру (как в CSS)
+        this.container.eventMode = 'static';
+        this.container.on('pointerover', () => {
+            this.shadowLayer.alpha = 0.55;
+            this.shadowLeft.x = 5;
+            this.shadowRight.x = w - shW - 5;
+            this.shadowLeft.rotation = 0;
+            this.shadowRight.rotation = 0;
+        });
+        this.container.on('pointerout', () => {
+            this.shadowLayer.alpha = 0.7;
+            this.shadowLeft.x = 15;
+            this.shadowRight.x = w - shW - 15;
+            this.shadowLeft.rotation = -5 * Math.PI / 180;
+            this.shadowRight.rotation = 5 * Math.PI / 180;
+        });
     }
 
     _updateTextPosition() {
         if (!this.textField) return;
         
-        // Обновляем стиль текста
-        this.textField.style.wordWrapWidth = this.width - 16;
-        
-        // Ждем, пока PIXI пересчитает размеры текста
+        // Обновляем стиль текста согласно ограничениям редактора
+        this.textField.style.wordWrapWidth = this._getVisibleTextWidth();
+        this.textField.style.wordWrap = true;
+        this.textField.style.breakWords = true;
+
+        // Подгоняем размер шрифта под доступные границы
+        this._fitTextToBounds();
+
+        // Обновляем текст после подгонки
         this.textField.updateText();
         
-        // Центрируем текст по горизонтали
+        // Центрируем текст по центру заметки
         const centerX = this.width / 2;
-        const topMargin = 20; // Отступ от верха (ниже полоски)
-        
-        // Используем anchor для центрирования
-        this.textField.anchor.set(0.5, 0);
+        const centerY = this.height / 2;
+        this.textField.anchor.set(0.5, 0.5);
         this.textField.x = centerX;
-        this.textField.y = topMargin;
+        this.textField.y = centerY;
     }
 }

package/src/services/BoardService.js

@@ -15,11 +15,11 @@ export class BoardService {
 		const canvasSize = (this._getCanvasSize?.() || {});
 		this.grid = GridFactory.createGrid('line', {
 			enabled: true,
-			size: 20,
+			size: 32,
 			width: canvasSize.width || 800,
 			height: canvasSize.height || 600,
-			color: 0xE6E6E6,
-			opacity: 0.5
+			color: 0x6a6aff,
+			opacity: 0.4
 		});
 		this.grid.updateVisual();
 		this.pixi.setGrid(this.grid);

package/src/services/ZoomPanController.js

@@ -9,11 +9,22 @@ export class ZoomPanController {
 	attach() {
 		// Масштабирование колесом — глобально отрабатываем Ctrl+Wheel
 		this.eventBus.on(Events.Tool.WheelZoom, ({ x, y, delta }) => {
-			const factor = 1 + (-delta) * 0.0015;
+			// Дискретный шаг зума 10%
 			const world = this.pixi.worldLayer || this.pixi.app.stage;
 			const oldScale = world.scale.x || 1;
-			const newScale = Math.max(0.1, Math.min(5, oldScale * factor));
-			if (newScale === oldScale) return;
+			const oldPercent = Math.round(oldScale * 100);
+			let targetPercent;
+			if (delta < 0) {
+				// Zoom in: к ближайшему следующему кратному 10 плюс шаг
+				targetPercent = Math.min(500, Math.floor(oldPercent / 10) * 10 + 10);
+			} else if (delta > 0) {
+				// Zoom out: к ближайшему предыдущему кратному 10 минус шаг
+				targetPercent = Math.max(10, Math.ceil(oldPercent / 10) * 10 - 10);
+			} else {
+				return;
+			}
+			const newScale = Math.max(0.1, Math.min(5, targetPercent / 100));
+			if (Math.abs(newScale - oldScale) < 0.0001) return;
 			// Вычисляем мировые координаты точки под курсором до изменения скейла
 			const worldX = (x - world.x) / oldScale;
 			const worldY = (y - world.y) / oldScale;

package/src/tools/BaseTool.js

@@ -44,7 +44,12 @@ export class BaseTool {
      */
     setCursor() {
         if (typeof document !== 'undefined' && document.body) {
-            document.body.style.cursor = this.cursor;
+            // Для 'default' не ставим инлайн-стиль, чтобы сработал глобальный CSS-курсор
+            if (!this.cursor || this.cursor === 'default') {
+                document.body.style.cursor = '';
+            } else {
+                document.body.style.cursor = this.cursor;
+            }
         }
     }
     

package/src/tools/ToolManager.js

@@ -1,4 +1,17 @@
 import { Events } from '../core/events/Events.js';
+import cursorDefaultSvg from '../assets/icons/cursor-default.svg?raw';
+
+// Масштабируем курсор в 2 раза меньше
+const _scaledCursorSvg = (() => {
+    try {
+        return cursorDefaultSvg
+            .replace(/width="[^"]+"/i, 'width="25px"')
+            .replace(/height="[^"]+"/i, 'height="25px"');
+    } catch (_) {
+        return cursorDefaultSvg;
+    }
+})();
+const DEFAULT_CURSOR = '';
 
 /**
  * Менеджер инструментов - управляет активными инструментами и переключением между ними
@@ -22,6 +35,11 @@ export class ToolManager {
         this.lastMousePos = null;
         this.isMouseOverContainer = false;
         
+        // Устанавливаем курсор по умолчанию на контейнер, если инструмент ещё не активирован
+        if (this.container) {
+            this.container.style.cursor = DEFAULT_CURSOR; // пусто → берётся глобальный CSS-курсор
+        }
+
         this.initEventListeners();
     }
     
@@ -126,7 +144,12 @@ export class ToolManager {
         this.container.addEventListener('mousedown', (e) => this.handleMouseDown(e));
         this.container.addEventListener('mousemove', (e) => this.handleMouseMove(e));
         this.container.addEventListener('mouseup', (e) => this.handleMouseUp(e));
-        this.container.addEventListener('mouseenter', () => { this.isMouseOverContainer = true; });
+        this.container.addEventListener('mouseenter', () => { 
+            this.isMouseOverContainer = true; 
+            if (!this.activeTool) {
+                this.container.style.cursor = DEFAULT_CURSOR;
+            }
+        });
         this.container.addEventListener('mouseleave', () => { this.isMouseOverContainer = false; });
         // Убираем отдельные слушатели aux-pan на контейнере, чтобы не дублировать mousedown/mouseup
 

package/src/tools/object-tools/DrawingTool.js

@@ -52,7 +52,9 @@ export class DrawingTool extends BaseTool {
         this.world = this._getWorldLayer();
         // Кастомный курсор-карандаш (SVG)
         const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4 20 L20 4 L28 12 L12 28 L4 28 Z' fill='black'/></svg>`;
-        const url = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}") 0 16, crosshair`;
+        // Горячая точка ставим в реальный нижний левый угол фигуры (x=4, y=28),
+        // чтобы линия выходила прямо из карандаша без зазора.
+        const url = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}") 4 28, crosshair`;
         if (this.app && this.app.view) this.app.view.style.cursor = url;
     }