@sequent-org/moodboard 1.2.12 → 1.2.13

package/package.json

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

package/src/ui/Toolbar.js

@@ -3,6 +3,7 @@
  */
 import { Events } from '../core/events/Events.js';
 import { IconLoader } from '../utils/iconLoader.js';
+import { getAvailableInlineEmojis, getInlineEmojiUrl } from '../utils/inlineSvgEmojis.js';
 
 export class Toolbar {
     constructor(container, eventBus, theme = 'light', options = {}) {
@@ -905,9 +906,24 @@ export class Toolbar {
         this.emojiPopupEl.className = 'moodboard-toolbar__popup moodboard-toolbar__popup--emoji';
         this.emojiPopupEl.style.display = 'none';
 
-        // Определяем способ загрузки эмоджи
+        // ПРИОРИТЕТ 1: Добавляем встроенные SVG эмоджи
         let groups = new Map();
         
+        console.log('🎯 Создание EmojiPopup: добавляем встроенные SVG эмоджи...');
+        const inlineEmojis = getAvailableInlineEmojis();
+        
+        if (inlineEmojis.length > 0) {
+            // Добавляем встроенные эмоджи в категорию "Встроенные"
+            groups.set('Встроенные', inlineEmojis.map(emoji => ({
+                path: `inline:${emoji}`,
+                url: getInlineEmojiUrl(emoji),
+                isInline: true,
+                emoji: emoji
+            })));
+            console.log(`✅ Добавлено ${inlineEmojis.length} встроенных SVG эмоджи`);
+        }
+        
+        // ПРИОРИТЕТ 2: Дополняем файловыми эмоджи (если нужны)
         if (typeof import.meta !== 'undefined' && import.meta.glob) {
             // Режим с bundler (Vite) - используем import.meta.glob
             const modules = import.meta.glob('../assets/emodji/**/*.{png,PNG,svg,SVG}', { eager: true, as: 'url' });
@@ -924,15 +940,19 @@ export class Toolbar {
                     category = parts.length > 1 ? parts[0] : 'Разное';
                 }
                 if (!groups.has(category)) groups.set(category, []);
-                groups.get(category).push({ path, url });
+                groups.get(category).push({ path, url, isInline: false });
             });
         } else {
             // Режим без bundler - используем статичный список
-            groups = this.getFallbackEmojiGroups();
+            const fallbackGroups = this.getFallbackEmojiGroups();
+            fallbackGroups.forEach((items, category) => {
+                if (!groups.has(category)) groups.set(category, []);
+                groups.get(category).push(...items.map(item => ({ ...item, isInline: false })));
+            });
         }
 
-        // Задаем желаемый порядок категорий
-        const ORDER = ['Смайлики', 'Жесты', 'Женские эмоции', 'Котики', 'Разное'];
+        // Задаем желаемый порядок категорий (встроенные SVG - первые!)
+        const ORDER = ['Встроенные', 'Смайлики', 'Жесты', 'Женские эмоции', 'Котики', 'Разное'];
         const present = [...groups.keys()];
         const orderedFirst = ORDER.filter(name => groups.has(name));
         const theRest = present.filter(name => !ORDER.includes(name)).sort((a, b) => a.localeCompare(b));
@@ -951,14 +971,14 @@ export class Toolbar {
             const grid = document.createElement('div');
             grid.className = 'moodboard-emoji__grid';
 
-            groups.get(cat).forEach(({ url }) => {
+            groups.get(cat).forEach(({ url, isInline, emoji }) => {
                 const btn = document.createElement('button');
                 btn.className = 'moodboard-emoji__btn';
-                btn.title = 'Добавить изображение';
+                btn.title = isInline ? `Встроенный эмоджи: ${emoji}` : 'Добавить изображение';
                 const img = document.createElement('img');
                 img.className = 'moodboard-emoji__img';
                 img.src = url;
-                img.alt = '';
+                img.alt = emoji || '';
                 btn.appendChild(img);
 
                 // Перетаскивание: начинаем только если был реальный drag (движение > 4px)
@@ -1024,9 +1044,19 @@ export class Toolbar {
                     const target = 64; // кратно 128 для лучшей четкости при даунскейле
                     const targetW = target;
                     const targetH = target;
+                    
+                    console.log(`🎯 Создаем эмоджи: ${isInline ? 'встроенный SVG' : 'файл'}, url: ${url.substring(0, 50)}...`);
+                    
                     this.eventBus.emit(Events.Place.Set, {
                         type: 'image',
-                        properties: { src: url, width: targetW, height: targetH, isEmojiIcon: true },
+                        properties: { 
+                            src: url, 
+                            width: targetW, 
+                            height: targetH, 
+                            isEmojiIcon: true,
+                            isInlineSvg: isInline || false,
+                            originalEmoji: emoji || null
+                        },
                         size: { width: targetW, height: targetH }
                     });
                     this.closeEmojiPopup();

package/src/utils/emojiResolver.js

@@ -203,8 +203,20 @@ export function resolveEmojiAbsoluteUrl(emoji, basePath = null) {
         // Формируем URL (приоритет PNG, потом SVG)
         if (!resolvedBasePath.endsWith('/')) resolvedBasePath += '/';
         
-        // Возвращаем URL в формате готовом для использования
-        return `${resolvedBasePath}Смайлики/${base}.png`; // Большинство эмоджи в папке Смайлики
+        // ПРИОРИТЕТ 2: Файлы в папках (только если нет встроенных SVG)
+        // Сначала проверяем разные папки
+        const possiblePaths = [
+            `${resolvedBasePath}Смайлики/${base}.png`,
+            `${resolvedBasePath}Жесты/${base}.png`, 
+            `${resolvedBasePath}Женские эмоции/${base}.png`,
+            `${resolvedBasePath}Котики/${base}.png`,
+            `${resolvedBasePath}Разное/${base}.png`,
+            `${resolvedBasePath}Обезьянка/${base}.png`,
+            `${resolvedBasePath}${base}.png` // Прямо в корне папки эмоджи
+        ];
+        
+        // Возвращаем первый возможный путь (браузер сам проверит доступность)
+        return possiblePaths[0];
         
     } catch (error) {
         return null;

package/src/utils/inlineSvgEmojis.js

@@ -21,6 +21,23 @@ export const INLINE_SVG_EMOJIS = {
         <circle fill="#F4900C" cx="18" cy="13" r="2"/>
     </svg>`,
     
+    '😂': `<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+        <circle fill="#FFCC4D" cx="18" cy="18" r="18"/>
+        <path fill="#664500" d="M10.515 23.621C10.56 23.8 11.683 28 18 28c6.318 0 7.44-4.2 7.485-4.379.055-.222-.025-.447-.204-.571-.18-.124-.403-.115-.571.024C24.629 23.145 22.112 25 18 25s-6.63-1.855-6.71-1.926c-.168-.139-.39-.148-.571-.024-.179.124-.259.349-.204.571z"/>
+        <ellipse fill="#664500" cx="12" cy="13.5" rx="2.5" ry="3.5"/>
+        <ellipse fill="#664500" cx="24" cy="13.5" rx="2.5" ry="3.5"/>
+        <path fill="#55ACEE" d="M5 17c.552 0 1 .447 1 1v1c0 .552-.448 1-1 1s-1-.448-1-1v-1c0-.553.448-1 1-1z"/>
+        <path fill="#55ACEE" d="M31 17c.553 0 1 .447 1 1v1c0 .552-.447 1-1 1-.553 0-1-.448-1-1v-1c0-.553.447-1 1-1z"/>
+    </svg>`,
+    
+    '😎': `<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+        <circle fill="#FFCC4D" cx="18" cy="18" r="18"/>
+        <path fill="#664500" d="M10.515 23.621C10.56 23.8 11.683 28 18 28c6.318 0 7.44-4.2 7.485-4.379.055-.222-.025-.447-.204-.571-.18-.124-.403-.115-.571.024C24.629 23.145 22.112 25 18 25s-6.63-1.855-6.71-1.926c-.168-.139-.39-.148-.571-.024-.179.124-.259.349-.204.571z"/>
+        <path fill="#292F33" d="M31 13c0-3.866-3.134-7-7-7H12c-3.866 0-7 3.134-7 7v1c0 3.866 3.134 7 7 7h12c3.866 0 7-3.134 7-7v-1z"/>
+        <circle fill="#F4900C" cx="12" cy="13.5" r="6"/>
+        <circle fill="#F4900C" cx="24" cy="13.5" r="6"/>
+    </svg>`,
+    
     '🤔': `<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
         <circle fill="#FFCC4D" cx="18" cy="18" r="18"/>
         <path fill="#664500" d="M8 19.5c0 1.381 1.119 2.5 2.5 2.5s2.5-1.119 2.5-2.5S11.881 17 10.5 17 8 18.119 8 19.5z"/>
@@ -34,8 +51,27 @@ export const INLINE_SVG_EMOJIS = {
         <path fill="#FFAC33" d="M7 11c0 5.522-4.478 10-10 10s-10-4.478-10-10 4.478-10 10-10 10 4.478 10 10z"/>
     </svg>`,
     
+    '👎': `<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#EF9645" d="M31.139 26.853c.629.628.63 1.657.001 2.286l-.244.244c-.628.628-1.656.63-2.285.001l-1.903-1.902c-.628-.629-.629-1.657-.001-2.286l.244-.244c.628-.628 1.656-.63 2.285-.001l1.903 1.902z"/>
+        <path fill="#FFDC5D" d="M32.032 14.108c.628-.629 1.657-.628 2.285 0l.244.244c.628.628.629 1.656.001 2.285l-1.902 1.903c-.629.628-1.657.629-2.286.001l-.244-.244c-.628-.628-.629-1.656-.001-2.285l1.903-1.904z"/>
+        <path fill="#FFAC33" d="M29 25c0-5.522 4.478-10 10-10s10 4.478 10 10-4.478 10-10 10-10-4.478-10-10z"/>
+    </svg>`,
+    
     '❤️': `<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
         <path fill="#DD2E44" d="M35.885 11.833c0-5.45-4.418-9.868-9.867-9.868-3.308 0-6.227 1.633-8.018 4.129-1.791-2.496-4.71-4.129-8.017-4.129-5.45 0-9.868 4.417-9.868 9.868 0 .772.098 1.52.266 2.241C1.751 22.587 11.216 31.568 18 34.034c6.784-2.466 16.249-11.447 17.619-19.96.168-.721.266-1.469.266-2.241z"/>
+    </svg>`,
+    
+    '🔥': `<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#DD2E44" d="M18 10c-1.105 0-2 .895-2 2v8c0 1.105.895 2 2 2s2-.895 2-2v-8c0-1.105-.895-2-2-2z"/>
+        <path fill="#F4900C" d="M18 6c-.553 0-1 .447-1 1v4c0 .553.447 1 1 1s1-.447 1-1V7c0-.553-.447-1-1-1z"/>
+        <path fill="#FFAC33" d="M18 26c3.314 0 6-2.686 6-6 0-3.314-2.686-6-6-6s-6 2.686-6 6c0 3.314 2.686 6 6 6z"/>
+    </svg>`,
+    
+    '🎉': `<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#FFCC4D" d="M36 17c0 1.104-.896 2-2 2H2c-1.104 0-2-.896-2-2s.896-2 2-2h32c1.104 0 2 .896 2 2z"/>
+        <path fill="#DD2E44" d="M35.5 9c0 .828-.672 1.5-1.5 1.5s-1.5-.672-1.5-1.5.672-1.5 1.5-1.5 1.5.672 1.5 1.5z"/>
+        <path fill="#55ACEE" d="M3.5 27c0 .828-.672 1.5-1.5 1.5S.5 27.828.5 27s.672-1.5 1.5-1.5 1.5.672 1.5 1.5z"/>
+        <path fill="#F4900C" d="M31 25c.552 0 1 .447 1 1v4c0 .552-.448 1-1 1s-1-.448-1-1v-4c0-.553.448-1 1-1z"/>
     </svg>`
 };