@sequent-org/moodboard 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/initNoBundler.js

@@ -31,6 +31,7 @@ export async function initMoodBoardNoBundler(container, options = {}, basePath =
         ...options,
         emojiLoader: emojiLoader,
         emojiGroups: emojiGroups,
+        emojiBasePath: basePath ? `${basePath}src/assets/emodji/` : null,
         noBundler: true
     };
     
@@ -138,7 +139,8 @@ export function quickInitMoodBoard(container, options = {}, basePath = '') {
     const moodboard = new MoodBoard(container, {
         ...options,
         noBundler: true,
-        skipEmojiLoader: true // Пропускаем автозагрузку эмоджи
+        skipEmojiLoader: true, // Пропускаем автозагрузку эмоджи
+        emojiBasePath: basePath ? `${basePath}src/assets/emodji/` : null
     });
     
     return moodboard;

package/src/moodboard/MoodBoard.js

@@ -159,7 +159,10 @@ export class MoodBoard {
         this.toolbar = new Toolbar(
             this.toolbarContainer, 
             this.coreMoodboard.eventBus,
-            this.options.theme
+            this.options.theme,
+            {
+                emojiBasePath: this.options.emojiBasePath || null
+            }
         );
         
         // Добавляем функцию для отладки иконок в window

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

@@ -103,9 +103,16 @@ export class PlacementTool extends BaseTool {
 
             // Обработка выбора файла
             this.eventBus.on(Events.Place.FileSelected, (fileData) => {
+                console.log('📁 PlacementTool: получен FileSelected:', fileData);
                 this.selectedFile = fileData;
                 this.selectedImage = null;
-                this.showFileGhost();
+                
+                // Если PlacementTool уже активен - показываем призрак сразу
+                if (this.world) {
+                    this.showFileGhost();
+                } else {
+                    console.log('📁 PlacementTool: world не готов, призрак будет показан при активации');
+                }
             });
 
             // Обработка отмены выбора файла
@@ -547,7 +554,16 @@ export class PlacementTool extends BaseTool {
      * Показать "призрак" файла
      */
     showFileGhost() {
-        if (!this.selectedFile || !this.world) return;
+        console.log('📁 PlacementTool.showFileGhost:', {
+            hasSelectedFile: !!this.selectedFile,
+            hasWorld: !!this.world,
+            selectedFileData: this.selectedFile
+        });
+        
+        if (!this.selectedFile || !this.world) {
+            console.warn('⚠️ Не можем показать призрак файла - нет selectedFile или world');
+            return;
+        }
         
         this.hideGhost(); // Сначала убираем старый призрак
         
@@ -562,9 +578,10 @@ export class PlacementTool extends BaseTool {
             const worldPoint = this._toWorld(cursorX, cursorY);
             this.updateGhostPosition(worldPoint.x, worldPoint.y);
         }
-        // Попробуем дождаться загрузки веб-шрифта Caveat до отрисовки
-        const pendingFont = (this.pending.properties?.fontFamily) || 'Caveat, Arial, cursive';
-        const primaryFont = String(pendingFont).split(',')[0].trim().replace(/^['"]|['"]$/g, '') || 'Caveat';
+        // Попробуем дождаться загрузки веб-шрифта Caveat до отрисовки  
+        // Для файлов используем selectedFile, а не pending
+        const fileFont = (this.selectedFile.properties?.fontFamily) || 'Caveat, Arial, cursive';
+        const primaryFont = String(fileFont).split(',')[0].trim().replace(/^['"]|['"]$/g, '') || 'Caveat';
         
         // Размеры
         const width = this.selectedFile.properties.width || 120;
@@ -622,6 +639,13 @@ export class PlacementTool extends BaseTool {
         this.ghostContainer.pivot.y = height / 2;
         
         this.world.addChild(this.ghostContainer);
+        
+        console.log('📁 Призрак файла создан и добавлен в world:', {
+            ghostContainerSize: { w: width, h: height },
+            ghostContainerAlpha: this.ghostContainer.alpha,
+            worldHasContainer: this.world.children.includes(this.ghostContainer),
+            ghostContainerChildren: this.ghostContainer.children.length
+        });
     }
 
     /**
@@ -722,9 +746,10 @@ export class PlacementTool extends BaseTool {
         this.ghostContainer = new PIXI.Container();
         this.ghostContainer.alpha = 0.6; // Полупрозрачность
         
-        // Размеры призрака
-        const maxWidth = this.selectedImage.properties.width || 300;
-        const maxHeight = this.selectedImage.properties.height || 200;
+        // Размеры призрака - используем размеры из pending/selected, если есть
+        const isEmojiIcon = this.selectedImage.properties?.isEmojiIcon;
+        const maxWidth = this.selectedImage.properties.width || (isEmojiIcon ? 64 : 300);
+        const maxHeight = this.selectedImage.properties.height || (isEmojiIcon ? 64 : 200);
         
         try {
             // Создаем превью изображения
@@ -816,8 +841,10 @@ export class PlacementTool extends BaseTool {
         this.ghostContainer = new PIXI.Container();
         this.ghostContainer.alpha = 0.6;
 
-        const maxWidth = this.pending.size?.width || this.pending.properties?.width || 56;
-        const maxHeight = this.pending.size?.height || this.pending.properties?.height || 56;
+        // Для эмоджи используем точные размеры из pending для согласованности
+        const isEmojiIcon = this.pending.properties?.isEmojiIcon;
+        const maxWidth = this.pending.size?.width || this.pending.properties?.width || (isEmojiIcon ? 64 : 56);
+        const maxHeight = this.pending.size?.height || this.pending.properties?.height || (isEmojiIcon ? 64 : 56);
 
         try {
             const texture = await PIXI.Texture.fromURL(src);
@@ -853,15 +880,23 @@ export class PlacementTool extends BaseTool {
 
         this.world.addChild(this.ghostContainer);
 
-        // Кастомный курсор: мини-превью иконки рядом с курсором
-        try {
-            if (this.app && this.app.view && src) {
-                const cursorSize = 24;
-                const url = encodeURI(src);
-                // Используем CSS cursor с изображением, если поддерживается
-                this.app.view.style.cursor = `url(${url}) ${Math.floor(cursorSize/2)} ${Math.floor(cursorSize/2)}, default`;
+        // Для эмоджи не используем кастомный курсор, чтобы избежать дублирования призраков
+        if (!isEmojiIcon) {
+            // Кастомный курсор только для обычных изображений
+            try {
+                if (this.app && this.app.view && src) {
+                    const cursorSize = 24;
+                    const url = encodeURI(src);
+                    // Используем CSS cursor с изображением, если поддерживается
+                    this.app.view.style.cursor = `url(${url}) ${Math.floor(cursorSize/2)} ${Math.floor(cursorSize/2)}, default`;
+                }
+            } catch (_) {}
+        } else {
+            // Для эмоджи используем стандартный курсор
+            if (this.app && this.app.view) {
+                this.app.view.style.cursor = 'crosshair';
             }
-        } catch (_) {}
+        }
     }
 
     /**

package/src/ui/Toolbar.js

@@ -5,11 +5,14 @@ import { Events } from '../core/events/Events.js';
 import { IconLoader } from '../utils/iconLoader.js';
 
 export class Toolbar {
-    constructor(container, eventBus, theme = 'light') {
+    constructor(container, eventBus, theme = 'light', options = {}) {
         this.container = container;
         this.eventBus = eventBus;
         this.theme = theme;
         
+        // Базовый путь для ассетов (эмоджи и другие ресурсы)
+        this.emojiBasePath = options.emojiBasePath || null;
+        
         // Инициализируем IconLoader
         this.iconLoader = new IconLoader();
         
@@ -966,9 +969,13 @@ export class Toolbar {
 
                 // Перетаскивание: начинаем только если был реальный drag (движение > 4px)
                 btn.addEventListener('mousedown', (e) => {
+                    // Блокируем одновременную обработку
+                    if (btn.__clickProcessing || btn.__dragActive) return;
+                    
                     const startX = e.clientX;
                     const startY = e.clientY;
                     let startedDrag = false;
+                    
                     const onMove = (ev) => {
                         if (startedDrag) return;
                         const dx = Math.abs(ev.clientX - startX);
@@ -976,6 +983,10 @@ export class Toolbar {
                         if (dx > 4 || dy > 4) {
                             startedDrag = true;
                             btn.__dragActive = true;
+                            
+                            // Блокируем click handler
+                            btn.__clickProcessing = true;
+                            
                             const target = 64;
                             const targetW = target;
                             const targetH = target;
@@ -994,8 +1005,11 @@ export class Toolbar {
                     };
                     const onUp = () => {
                         cleanup();
-                        // Снимем флаг сразу после клика, чтобы click мог отфильтроваться
-                        setTimeout(() => { btn.__dragActive = false; }, 0);
+                        // Снимаем флаги с задержкой
+                        setTimeout(() => { 
+                            btn.__dragActive = false;
+                            btn.__clickProcessing = false;
+                        }, 50);
                     };
                     const cleanup = () => {
                         document.removeEventListener('mousemove', onMove);
@@ -1005,8 +1019,13 @@ export class Toolbar {
                     document.addEventListener('mouseup', onUp, { once: true });
                 });
 
-                btn.addEventListener('click', () => {
-                    if (btn.__dragActive) return; // не обрабатываем клик после drag
+                btn.addEventListener('click', (e) => {
+                    // Блокируем обработку клика если был drag или если уже обрабатывается
+                    if (btn.__dragActive || btn.__clickProcessing) return;
+                    
+                    btn.__clickProcessing = true;
+                    setTimeout(() => { btn.__clickProcessing = false; }, 100);
+                    
                     this.animateButton(btn);
                     const target = 64; // кратно 128 для лучшей четкости при даунскейле
                     const targetW = target;
@@ -1079,22 +1098,43 @@ export class Toolbar {
      * Определяет базовый путь для эмоджи в зависимости от режима
      */
     getEmojiBasePath() {
-        // Проверяем, есть ли глобальная настройка базового пути
+        // 1. Приоритет: опция basePath из конструктора
+        if (this.emojiBasePath) {
+            return this.emojiBasePath.endsWith('/') ? this.emojiBasePath : this.emojiBasePath + '/';
+        }
+
+        // 2. Глобальная настройка (абсолютный URL)
         if (window.MOODBOARD_BASE_PATH) {
-            return `${window.MOODBOARD_BASE_PATH}src/assets/emodji/`;
+            const basePath = window.MOODBOARD_BASE_PATH.endsWith('/') ? window.MOODBOARD_BASE_PATH : window.MOODBOARD_BASE_PATH + '/';
+            return `${basePath}src/assets/emodji/`;
         }
         
-        // Попытка определить автоматически
-        const scripts = document.querySelectorAll('script[src]');
-        for (const script of scripts) {
-            if (script.src.includes('moodboard') || script.src.includes('node_modules')) {
-                const baseUrl = new URL(script.src).origin;
-                return `${baseUrl}/node_modules/moodboard-futurello/src/assets/emodji/`;
+        // 3. Вычисление от URL текущего модуля (import.meta.url)
+        try {
+            // Используем import.meta.url для получения абсолютного пути к ассетам
+            const currentModuleUrl = import.meta.url;
+            // От текущего модуля (ui/Toolbar.js) поднимаемся к корню пакета и идем к assets
+            const emojiUrl = new URL('../assets/emodji/', currentModuleUrl).href;
+            return emojiUrl;
+        } catch (error) {
+            console.warn('⚠️ Не удалось определить путь через import.meta.url:', error);
+        }
+        
+        // 4. Fallback: поиск script тега для определения базового URL
+        try {
+            const currentScript = document.currentScript;
+            if (currentScript && currentScript.src) {
+                // Пытаемся определить от текущего скрипта
+                const scriptUrl = new URL(currentScript.src);
+                const baseUrl = new URL('../assets/emodji/', scriptUrl).href;
+                return baseUrl;
             }
+        } catch (error) {
+            console.warn('⚠️ Не удалось определить путь через currentScript:', error);
         }
         
-        // Fallback: относительный путь
-        return './src/assets/emodji/';
+        // 5. Последний fallback: абсолютный путь от корня домена
+        return '/src/assets/emodji/';
     }
 
     toggleEmojiPopup(anchorButton) {
@@ -1202,7 +1242,7 @@ export class Toolbar {
                 }
 
                 // Файл выбран - запускаем режим "призрака"
-                this.eventBus.emit(Events.Place.FileSelected, {
+                const fileSelectedData = {
                     file: file,
                     fileName: file.name,
                     fileSize: file.size,
@@ -1211,7 +1251,10 @@ export class Toolbar {
                         width: 120,
                         height: 140
                     }
-                });
+                };
+                
+                console.log('📁 Toolbar: эмитируем FileSelected:', fileSelectedData);
+                this.eventBus.emit(Events.Place.FileSelected, fileSelectedData);
 
                 // Активируем инструмент размещения
                 this.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'place' });

package/src/utils/emojiResolver.js

@@ -67,13 +67,19 @@ export function emojiToLocalUrl(emoji) {
     }
 }
 
-// Карта локальных изображений (SVG и PNG) из src/assets/emodji (собирается Vite'ом)
-// Ключи вида '../assets/emodji/1f600.svg' / '../assets/emodji/1f600.png' → URL
-const _localEmojiModules = import.meta && typeof import.meta.glob === 'function'
-  ? {
-      ...import.meta.glob('../assets/emodji/**/*.{svg,SVG,png,PNG}', { eager: true, query: '?url', import: 'default' })
+// Карта локальных изображений (SVG и PNG) из src/assets/emodji
+// В режиме с bundler используем import.meta.glob, иначе fallback
+const _localEmojiModules = (() => {
+  if (typeof import.meta !== 'undefined' && import.meta.glob) {
+    try {
+      return import.meta.glob('../assets/emodji/**/*.{svg,SVG,png,PNG}', { eager: true, query: '?url', import: 'default' });
+    } catch (error) {
+      console.warn('⚠️ import.meta.glob failed, using fallback for emoji resolution');
+      return {};
     }
-  : {};
+  }
+  return {};
+})();
 
 // Индекс по имени файла (без пути)
 const _localEmojiIndex = (() => {
@@ -119,3 +125,44 @@ export function buildLocalPaths(emoji) {
     }
 }
 
+/**
+ * Возвращает абсолютный URL для эмоджи с учетом базового пути
+ * @param {string} emoji - эмоджи символ
+ * @param {string} basePath - базовый путь к ассетам
+ * @returns {string|null} абсолютный URL или null
+ */
+export function resolveEmojiAbsoluteUrl(emoji, basePath = null) {
+    try {
+        const base = emojiFilenameBase(emoji);
+        if (!base) return null;
+        
+        // Определяем базовый путь
+        let resolvedBasePath = basePath;
+        
+        if (!resolvedBasePath) {
+            // Пытаемся определить от import.meta.url
+            try {
+                resolvedBasePath = new URL('../assets/emodji/', import.meta.url).href;
+            } catch (error) {
+                // Fallback на глобальную настройку
+                if (window.MOODBOARD_BASE_PATH) {
+                    const globalPath = window.MOODBOARD_BASE_PATH.endsWith('/') ? window.MOODBOARD_BASE_PATH : window.MOODBOARD_BASE_PATH + '/';
+                    resolvedBasePath = `${globalPath}src/assets/emodji/`;
+                } else {
+                    resolvedBasePath = '/src/assets/emodji/';
+                }
+            }
+        }
+        
+        // Формируем URL (приоритет PNG, потом SVG)
+        if (!resolvedBasePath.endsWith('/')) resolvedBasePath += '/';
+        
+        // Возвращаем URL в формате готовом для использования
+        return `${resolvedBasePath}Смайлики/${base}.png`; // Большинство эмоджи в папке Смайлики
+        
+    } catch (error) {
+        console.warn('⚠️ Ошибка resolveEmojiAbsoluteUrl:', error);
+        return null;
+    }
+}
+