@sequent-org/moodboard 1.0.5 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/core/PixiEngine.js +13 -1
- package/src/core/index.js +42 -0
- package/src/moodboard/MoodBoard.js +20 -0
- package/src/moodboard/WorkspaceManager.js +19 -2
- package/src/ui/Topbar.js +22 -0
- package/src/ui/styles/workspace.css +7 -5
- package/src/utils/topbarIconLoader.js +8 -80
package/package.json
CHANGED
package/src/core/PixiEngine.js
CHANGED
|
@@ -17,7 +17,8 @@ export class PixiEngine {
|
|
|
17
17
|
backgroundColor: this.options.backgroundColor,
|
|
18
18
|
antialias: true,
|
|
19
19
|
resolution: (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1,
|
|
20
|
-
autoDensity: true
|
|
20
|
+
autoDensity: true,
|
|
21
|
+
resizeTo: this.container // Автоматически изменять размер при изменении контейнера
|
|
21
22
|
});
|
|
22
23
|
|
|
23
24
|
this.container.appendChild(this.app.view);
|
|
@@ -433,6 +434,17 @@ export class PixiEngine {
|
|
|
433
434
|
return null;
|
|
434
435
|
}
|
|
435
436
|
|
|
437
|
+
/**
|
|
438
|
+
* Изменяет размер PIXI приложения
|
|
439
|
+
* @param {number} width - новая ширина
|
|
440
|
+
* @param {number} height - новая высота
|
|
441
|
+
*/
|
|
442
|
+
resize(width, height) {
|
|
443
|
+
if (this.app && this.app.renderer) {
|
|
444
|
+
this.app.renderer.resize(width, height);
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
|
|
436
448
|
destroy() {
|
|
437
449
|
this.app.destroy(true);
|
|
438
450
|
}
|
package/src/core/index.js
CHANGED
|
@@ -36,6 +36,37 @@ export class CoreMoodBoard {
|
|
|
36
36
|
backgroundColor: 0xF5F5F5,
|
|
37
37
|
...options
|
|
38
38
|
};
|
|
39
|
+
|
|
40
|
+
// Устанавливаем размеры контейнера, если они не заданы
|
|
41
|
+
if (!this.options.width || this.options.width === 800) {
|
|
42
|
+
this.options.width = this.container.clientWidth || 800;
|
|
43
|
+
}
|
|
44
|
+
if (!this.options.height || this.options.height === 600) {
|
|
45
|
+
this.options.height = this.container.clientHeight || 600;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// Создаем ResizeObserver для отслеживания изменений размера контейнера
|
|
49
|
+
this.resizeObserver = null;
|
|
50
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
51
|
+
this.resizeObserver = new ResizeObserver((entries) => {
|
|
52
|
+
for (const entry of entries) {
|
|
53
|
+
const { width, height } = entry.contentRect;
|
|
54
|
+
if (this.pixi && this.pixi.app) {
|
|
55
|
+
// Обновляем размеры PIXI приложения
|
|
56
|
+
this.pixi.resize(width, height);
|
|
57
|
+
// Обновляем размеры в опциях
|
|
58
|
+
this.options.width = width;
|
|
59
|
+
this.options.height = height;
|
|
60
|
+
// Обновляем размеры рабочего пространства
|
|
61
|
+
if (this.workspaceManager) {
|
|
62
|
+
this.workspaceManager.updateSize();
|
|
63
|
+
}
|
|
64
|
+
// Уведомляем о изменении размера
|
|
65
|
+
this.eventBus.emit('resize', { width, height });
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
}
|
|
39
70
|
|
|
40
71
|
this.eventBus = new EventBus();
|
|
41
72
|
this.state = new StateManager(this.eventBus);
|
|
@@ -72,6 +103,11 @@ export class CoreMoodBoard {
|
|
|
72
103
|
try {
|
|
73
104
|
await this.pixi.init();
|
|
74
105
|
this.keyboard.startListening(); // Запускаем прослушивание клавиатуры
|
|
106
|
+
|
|
107
|
+
// Запускаем отслеживание изменения размера контейнера
|
|
108
|
+
if (this.resizeObserver) {
|
|
109
|
+
this.resizeObserver.observe(this.container);
|
|
110
|
+
}
|
|
75
111
|
|
|
76
112
|
// Инициализируем систему инструментов
|
|
77
113
|
await this.initTools();
|
|
@@ -1623,6 +1659,12 @@ export class CoreMoodBoard {
|
|
|
1623
1659
|
}
|
|
1624
1660
|
|
|
1625
1661
|
destroy() {
|
|
1662
|
+
// Останавливаем отслеживание изменения размера
|
|
1663
|
+
if (this.resizeObserver) {
|
|
1664
|
+
this.resizeObserver.disconnect();
|
|
1665
|
+
this.resizeObserver = null;
|
|
1666
|
+
}
|
|
1667
|
+
|
|
1626
1668
|
this.saveManager.destroy();
|
|
1627
1669
|
this.keyboard.destroy();
|
|
1628
1670
|
this.history.destroy();
|
|
@@ -322,6 +322,26 @@ export class MoodBoard {
|
|
|
322
322
|
}
|
|
323
323
|
}
|
|
324
324
|
|
|
325
|
+
/**
|
|
326
|
+
* Обновляет размеры холста
|
|
327
|
+
*/
|
|
328
|
+
updateSize() {
|
|
329
|
+
if (this.workspaceManager) {
|
|
330
|
+
return this.workspaceManager.updateSize();
|
|
331
|
+
}
|
|
332
|
+
return null;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
/**
|
|
336
|
+
* Получает текущие размеры холста
|
|
337
|
+
*/
|
|
338
|
+
getSize() {
|
|
339
|
+
if (this.workspaceManager) {
|
|
340
|
+
return this.workspaceManager.getCanvasSize();
|
|
341
|
+
}
|
|
342
|
+
return { width: 800, height: 600 };
|
|
343
|
+
}
|
|
344
|
+
|
|
325
345
|
/**
|
|
326
346
|
* Очистка ресурсов
|
|
327
347
|
*/
|
|
@@ -83,12 +83,29 @@ export class WorkspaceManager {
|
|
|
83
83
|
return { width: 800, height: 600 };
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
+
// Получаем размеры родительского контейнера
|
|
87
|
+
const parentWidth = this.container.clientWidth;
|
|
88
|
+
const parentHeight = this.container.clientHeight;
|
|
89
|
+
|
|
86
90
|
return {
|
|
87
|
-
width:
|
|
88
|
-
height:
|
|
91
|
+
width: parentWidth || 800,
|
|
92
|
+
height: parentHeight || 600
|
|
89
93
|
};
|
|
90
94
|
}
|
|
91
95
|
|
|
96
|
+
/**
|
|
97
|
+
* Обновляет размеры рабочего пространства
|
|
98
|
+
*/
|
|
99
|
+
updateSize() {
|
|
100
|
+
if (this.canvasContainer && this.container) {
|
|
101
|
+
const size = this.getCanvasSize();
|
|
102
|
+
this.canvasContainer.style.width = size.width + 'px';
|
|
103
|
+
this.canvasContainer.style.height = size.height + 'px';
|
|
104
|
+
return size;
|
|
105
|
+
}
|
|
106
|
+
return null;
|
|
107
|
+
}
|
|
108
|
+
|
|
92
109
|
/**
|
|
93
110
|
* Очистка ресурсов
|
|
94
111
|
*/
|
package/src/ui/Topbar.js
CHANGED
|
@@ -39,6 +39,11 @@ export class Topbar {
|
|
|
39
39
|
createTopbar() {
|
|
40
40
|
this.element = document.createElement('div');
|
|
41
41
|
this.element.className = `moodboard-topbar moodboard-topbar--${this.theme}`;
|
|
42
|
+
|
|
43
|
+
console.log('🔍 Topbar: создаю верхнюю панель');
|
|
44
|
+
console.log('🔍 Topbar: this.icons содержит:', this.icons);
|
|
45
|
+
console.log('🔍 Topbar: количество иконок:', Object.keys(this.icons).length);
|
|
46
|
+
|
|
42
47
|
// Кнопки выбора вида сетки (без функциональности)
|
|
43
48
|
const buttons = [
|
|
44
49
|
{ id: 'grid-line', icon: 'grid-line', title: 'Сетка: линии', type: 'line' },
|
|
@@ -51,10 +56,14 @@ export class Topbar {
|
|
|
51
56
|
const btn = document.createElement('button');
|
|
52
57
|
btn.className = 'moodboard-topbar__button';
|
|
53
58
|
|
|
59
|
+
console.log(`🔍 Topbar: создаю кнопку для иконки "${cfg.icon}"`);
|
|
60
|
+
|
|
54
61
|
// Создаем SVG иконку
|
|
55
62
|
if (this.icons[cfg.icon]) {
|
|
63
|
+
console.log(`✅ Topbar: иконка "${cfg.icon}" найдена, создаю SVG`);
|
|
56
64
|
this.createSvgIcon(btn, cfg.icon);
|
|
57
65
|
} else {
|
|
66
|
+
console.warn(`⚠️ Topbar: иконка "${cfg.icon}" не найдена, создаю fallback`);
|
|
58
67
|
// Fallback: создаем простую текстовую иконку
|
|
59
68
|
const fallbackIcon = document.createElement('span');
|
|
60
69
|
fallbackIcon.textContent = cfg.icon.charAt(0).toUpperCase();
|
|
@@ -78,10 +87,14 @@ export class Topbar {
|
|
|
78
87
|
paintBtn.className = 'moodboard-topbar__button moodboard-topbar__button--paint';
|
|
79
88
|
paintBtn.title = 'Палитра фона';
|
|
80
89
|
|
|
90
|
+
console.log('🔍 Topbar: создаю кнопку краски');
|
|
91
|
+
|
|
81
92
|
// Создаем SVG иконку
|
|
82
93
|
if (this.icons['paint']) {
|
|
94
|
+
console.log('✅ Topbar: иконка paint найдена, создаю SVG');
|
|
83
95
|
this.createSvgIcon(paintBtn, 'paint');
|
|
84
96
|
} else {
|
|
97
|
+
console.warn('⚠️ Topbar: иконка paint не найдена, создаю fallback');
|
|
85
98
|
// Fallback: создаем простую текстовую иконку
|
|
86
99
|
const fallbackIcon = document.createElement('span');
|
|
87
100
|
fallbackIcon.textContent = '🎨';
|
|
@@ -101,7 +114,11 @@ export class Topbar {
|
|
|
101
114
|
* Создает SVG иконку для кнопки
|
|
102
115
|
*/
|
|
103
116
|
createSvgIcon(button, iconName) {
|
|
117
|
+
console.log(`🔍 Topbar: создаю SVG иконку "${iconName}"`);
|
|
118
|
+
console.log(`🔍 Topbar: доступные иконки:`, Object.keys(this.icons));
|
|
119
|
+
|
|
104
120
|
if (this.icons[iconName]) {
|
|
121
|
+
console.log(`✅ Topbar: иконка "${iconName}" найдена, создаю SVG элемент`);
|
|
105
122
|
// Создаем SVG элемент из загруженного содержимого
|
|
106
123
|
const tempDiv = document.createElement('div');
|
|
107
124
|
tempDiv.innerHTML = this.icons[iconName];
|
|
@@ -115,7 +132,12 @@ export class Topbar {
|
|
|
115
132
|
|
|
116
133
|
// Добавляем SVG в кнопку
|
|
117
134
|
button.appendChild(svg);
|
|
135
|
+
console.log(`✅ Topbar: SVG иконка "${iconName}" успешно добавлена в кнопку`);
|
|
136
|
+
} else {
|
|
137
|
+
console.warn(`⚠️ Topbar: не удалось найти SVG элемент в содержимом иконки "${iconName}"`);
|
|
118
138
|
}
|
|
139
|
+
} else {
|
|
140
|
+
console.warn(`⚠️ Topbar: иконка "${iconName}" не найдена в this.icons`);
|
|
119
141
|
}
|
|
120
142
|
}
|
|
121
143
|
|
|
@@ -15,10 +15,9 @@
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.moodboard-workspace {
|
|
18
|
-
position:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
height: 100vh;
|
|
18
|
+
position: relative;
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: 100%;
|
|
22
21
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
23
22
|
overflow: hidden;
|
|
24
23
|
}
|
|
@@ -175,7 +174,10 @@
|
|
|
175
174
|
/* Canvas Container */
|
|
176
175
|
.moodboard-workspace__canvas {
|
|
177
176
|
position: absolute;
|
|
178
|
-
|
|
177
|
+
top: 0;
|
|
178
|
+
left: 0;
|
|
179
|
+
right: 0;
|
|
180
|
+
bottom: 0;
|
|
179
181
|
overflow: hidden;
|
|
180
182
|
}
|
|
181
183
|
|
|
@@ -9,90 +9,21 @@ export class TopbarIconLoader {
|
|
|
9
9
|
|
|
10
10
|
async init() {
|
|
11
11
|
try {
|
|
12
|
-
//
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
import('../assets/icons/topbar/grid-dot.svg?raw'),
|
|
16
|
-
import('../assets/icons/topbar/grid-cross.svg?raw'),
|
|
17
|
-
import('../assets/icons/topbar/grid-off.svg?raw'),
|
|
18
|
-
import('../assets/icons/topbar/paint.svg?raw')
|
|
19
|
-
]);
|
|
20
|
-
|
|
21
|
-
// Сохраняем иконки в Map
|
|
22
|
-
const iconNames = ['grid-line', 'grid-dot', 'grid-cross', 'grid-off', 'paint'];
|
|
12
|
+
// Всегда используем встроенные иконки для надежности
|
|
13
|
+
// Это гарантирует работу в любом окружении (npm пакет, CDN, локальная разработка)
|
|
14
|
+
this.loadBuiltInIcons();
|
|
23
15
|
|
|
24
|
-
|
|
25
|
-
if (iconModules[index] && iconModules[index].default) {
|
|
26
|
-
this.icons.set(name, iconModules[index].default);
|
|
27
|
-
} else {
|
|
28
|
-
console.warn(`⚠️ Иконка ${name} не загружена, используем встроенную`);
|
|
29
|
-
// Используем встроенную иконку как fallback
|
|
30
|
-
const builtInIcon = this.getBuiltInIcon(name);
|
|
31
|
-
if (builtInIcon) {
|
|
32
|
-
this.icons.set(name, builtInIcon);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
});
|
|
16
|
+
console.log('✅ Иконки верхней панели загружены успешно');
|
|
36
17
|
|
|
37
18
|
} catch (error) {
|
|
38
|
-
console.
|
|
19
|
+
console.error('❌ Критическая ошибка загрузки иконок верхней панели:', error);
|
|
20
|
+
// Даже в случае ошибки пытаемся загрузить встроенные иконки
|
|
39
21
|
this.loadBuiltInIcons();
|
|
40
22
|
}
|
|
41
23
|
}
|
|
42
24
|
|
|
43
|
-
getBuiltInIcon(name) {
|
|
44
|
-
const builtInIcons = {
|
|
45
|
-
'grid-line': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
46
|
-
<path d="M2 2H16V4H2V2Z" fill="currentColor"/>
|
|
47
|
-
<path d="M2 7H16V9H2V7Z" fill="currentColor"/>
|
|
48
|
-
<path d="M2 12H16V14H2V12Z" fill="currentColor"/>
|
|
49
|
-
<path d="M2 2V16H4V2H2Z" fill="currentColor"/>
|
|
50
|
-
<path d="M7 2V16H9V2H7Z" fill="currentColor"/>
|
|
51
|
-
<path d="M12 2V16H14V2H12Z" fill="currentColor"/>
|
|
52
|
-
</svg>`,
|
|
53
|
-
'grid-dot': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
54
|
-
<circle cx="4" cy="4" r="1.5" fill="currentColor"/>
|
|
55
|
-
<circle cx="9" cy="4" r="1.5" fill="currentColor"/>
|
|
56
|
-
<circle cx="14" cy="4" r="1.5" fill="currentColor"/>
|
|
57
|
-
<circle cx="4" cy="9" r="1.5" fill="currentColor"/>
|
|
58
|
-
<circle cx="9" cy="9" r="1.5" fill="currentColor"/>
|
|
59
|
-
<circle cx="14" cy="9" r="1.5" fill="currentColor"/>
|
|
60
|
-
<circle cx="4" cy="14" r="1.5" fill="currentColor"/>
|
|
61
|
-
<circle cx="9" cy="14" r="1.5" fill="currentColor"/>
|
|
62
|
-
<circle cx="14" cy="14" r="1.5" fill="currentColor"/>
|
|
63
|
-
</svg>`,
|
|
64
|
-
'grid-cross': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
65
|
-
<path d="M3 3L6 6M6 3L3 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
66
|
-
<path d="M9 3L12 6M12 3L9 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
67
|
-
<path d="M3 9L6 12M6 9L3 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
68
|
-
<path d="M9 9L12 12M12 9L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
69
|
-
<path d="M15 3L18 6M18 3L15 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
70
|
-
<path d="M15 9L18 12M18 9L15 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
71
|
-
<path d="M3 15L6 18M6 15L3 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
72
|
-
<path d="M9 15L12 18M12 15L9 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
73
|
-
<path d="M15 15L18 18M18 15L15 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
74
|
-
</svg>`,
|
|
75
|
-
'grid-off': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
76
|
-
<path d="M2 2H16V4H2V2Z" fill="currentColor" opacity="0.3"/>
|
|
77
|
-
<path d="M2 7H16V9H2V7Z" fill="currentColor" opacity="0.3"/>
|
|
78
|
-
<path d="M2 12H16V14H2V12Z" fill="currentColor" opacity="0.3"/>
|
|
79
|
-
<path d="M2 2V16H4V2H2Z" fill="currentColor" opacity="0.3"/>
|
|
80
|
-
<path d="M7 2V16H9V2H7Z" fill="currentColor" opacity="0.3"/>
|
|
81
|
-
<path d="M12 2V16H14V2H12Z" fill="currentColor" opacity="0.3"/>
|
|
82
|
-
<path d="M1 17L17 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
83
|
-
</svg>`,
|
|
84
|
-
'paint': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
85
|
-
<path d="M4 3H10L13 6V13A2 2 0 0 1 11 15H6A2 2 0 0 1 4 13V3Z" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
|
86
|
-
<path d="M10 3V6H13" stroke="currentColor" stroke-width="1.5"/>
|
|
87
|
-
<path d="M14 10S15.5 11.5 15.5 13A1.5 1.5 0 0 1 13 13C13 11.5 14 10 14 10Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
|
|
88
|
-
</svg>`
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
return builtInIcons[name];
|
|
92
|
-
}
|
|
93
|
-
|
|
94
25
|
loadBuiltInIcons() {
|
|
95
|
-
// Встроенные иконки как
|
|
26
|
+
// Встроенные иконки как основной источник
|
|
96
27
|
const builtInIcons = {
|
|
97
28
|
'grid-line': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
98
29
|
<path d="M2 2H16V4H2V2Z" fill="currentColor"/>
|
|
@@ -145,10 +76,7 @@ export class TopbarIconLoader {
|
|
|
145
76
|
this.icons.set(iconName, svgContent);
|
|
146
77
|
}
|
|
147
78
|
|
|
148
|
-
|
|
149
|
-
Object.entries(builtInIcons).forEach(([name, content]) => {
|
|
150
|
-
this.icons.set(name, content);
|
|
151
|
-
});
|
|
79
|
+
console.log(`📦 Загружено ${this.icons.size} встроенных иконок верхней панели`);
|
|
152
80
|
}
|
|
153
81
|
|
|
154
82
|
getIcon(name) {
|