@sequent-org/moodboard 1.3.0 → 1.3.1

package/package.json

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

package/src/ui/Toolbar.js

@@ -46,7 +46,13 @@ export class Toolbar {
             console.error('❌ Ошибка загрузки иконок:', error);
         }
 
-        this._toolActivatedHandler = ({ tool }) => this.setActiveToolbarButton(tool);
+        this._toolActivatedHandler = ({ tool }) => {
+            this.setActiveToolbarButton(tool);
+            // Draw palette must stay open only while draw tool is active.
+            if (tool !== 'draw') {
+                this.closeDrawPopup();
+            }
+        };
         this.createToolbar();
         this.attachEvents();
         this.setupHistoryEvents();
@@ -133,9 +139,13 @@ export class Toolbar {
             const isDrawButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--pencil');
             const isEmojiButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--emoji');
             const isFrameButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--frame');
+            const isDrawActive = !!(this.element && this.element.querySelector('.moodboard-toolbar__button--pencil.moodboard-toolbar__button--active'));
+
             if (!isInsideToolbar && !isInsideShapesPopup && !isShapesButton && !isInsideDrawPopup && !isDrawButton && !isInsideEmojiPopup && !isEmojiButton && !isInsideFramePopup && !isFrameButton) {
                 this.closeShapesPopup();
-                this.closeDrawPopup();
+                if (!isDrawActive) {
+                    this.closeDrawPopup();
+                }
                 this.closeEmojiPopup();
                 this.closeFramePopup();
             }

package/src/ui/toolbar/ToolbarPopupsController.js

@@ -232,6 +232,9 @@ export class ToolbarPopupsController {
         const row2 = document.createElement('div');
         row2.className = 'moodboard-draw__row';
         this.toolbar.drawRow2 = row2;
+        const clearActivePresetButtons = () => {
+            row2.querySelectorAll('.moodboard-draw__btn--active').forEach((el) => el.classList.remove('moodboard-draw__btn--active'));
+        };
 
         const pencilPresetEl = document.createElement('div');
         pencilPresetEl.className = 'moodboard-draw__row';
@@ -267,7 +270,7 @@ export class ToolbarPopupsController {
             btn.appendChild(holder);
             btn.addEventListener('click', () => {
                 this.toolbar.animateButton(btn);
-                pencilPresetEl.querySelectorAll('.moodboard-draw__btn--active').forEach((el) => el.classList.remove('moodboard-draw__btn--active'));
+                clearActivePresetButtons();
                 btn.classList.add('moodboard-draw__btn--active');
                 const width = s.width;
                 const color = parseInt(s.color.replace('#', ''), 16);
@@ -291,7 +294,7 @@ export class ToolbarPopupsController {
             btn.appendChild(sw);
             btn.addEventListener('click', () => {
                 this.toolbar.animateButton(btn);
-                markerPresetEl.querySelectorAll('.moodboard-draw__btn--active').forEach((el) => el.classList.remove('moodboard-draw__btn--active'));
+                clearActivePresetButtons();
                 btn.classList.add('moodboard-draw__btn--active');
                 const color = parseInt(s.color.replace('#', ''), 16);
                 this.toolbar.eventBus.emit(Events.Draw.BrushSet, { mode: 'marker', color, width: 8 });