@sequent-org/moodboard 1.4.59 → 1.4.61

package/src/ui/HtmlTextLayer.js

@@ -9,6 +9,7 @@ import {
     resolveLineHeightRatio,
     computeTextRightPadPx,
     resolveStaticTextPadding,
+    computeSingleLineCenterDelta,
     TEXT_BOX_BOTTOM_PAD_PX,
 } from '../services/text/TextBoxMetrics.js';
 
@@ -761,16 +762,26 @@ export class HtmlTextLayer {
             }
         } catch (_) {}
 
-        // Гарантируем, что высота соответствует контенту (особенно после смены font-size)
+        // Высота текстового бокса всегда равна высоте контента: рамка облегает строки,
+        // под текстом нет пустого зазора. Высоту объекта (logHeight = round(h*s)) здесь
+        // НЕ учитываем — иначе единожды завышенный obj.height (дефолт при создании или
+        // остаток от прежнего многострочного текста) залипал, и появлялся зазор после зума.
         try {
             el.style.height = 'auto';
-            // Добавим небольшой нижний отступ для хвостов букв, чтобы не отсекались (например, у «з»)
-            const hCss = Math.max(1, Math.round(el.scrollHeight + TEXT_BOX_BOTTOM_PAD_PX));
+            // Для обычного однострочного текста центрируем видимые буквы по вертикали:
+            // line-box резервирует сверху место под прописные/выносные, которого строчный
+            // текст не занимает, поэтому буквы кажутся прижатыми к низу рамки. centerDelta
+            // уравнивает верхний и нижний зазоры вокруг глифов. Для markdown/списков и в
+            // окружении без layout (jsdom) дельта = null → сохраняем прежний нижний отступ
+            // TEXT_BOX_BOTTOM_PAD_PX под хвосты букв (например, «з», «у»).
+            const centerDelta = (!isMarkdown && !useList)
+                ? computeSingleLineCenterDelta(el)
+                : null;
+            const extra = (centerDelta === null) ? TEXT_BOX_BOTTOM_PAD_PX : centerDelta;
+            const hCss = Math.max(1, Math.round(el.scrollHeight + extra));
             el.style.height = `${hCss}px`;
-            // Обновим высоту для лога, если её ещё не устанавливали
-            if (!logHeight) {
-                logHeight = hCss;
-            }
+            // Обновим высоту для лога
+            logHeight = hCss;
         } catch (_) {}
         
         console.log(`🔍 HtmlTextLayer: позиция обновлена для ${objectId}:`, {
@@ -910,19 +921,26 @@ export class HtmlTextLayer {
             // Измеряем фактическую высоту HTML-текста
             el.style.height = 'auto';
             const measured = Math.max(1, Math.round(el.scrollHeight));
-            el.style.height = `${measured}px`;
-            // Пересчитываем мировую высоту и отправляем обновление размера через события ResizeUpdate
+            
             const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
             const s = world?.scale?.x || 1;
             const res = (this.core?.pixi?.app?.renderer?.resolution) || 1;
-            const worldH = (measured * res) / s;
-            // Узнаём текущую ширину в мире
+            const worldH_auto = (measured * res) / s;
+            
+            const currentWorldH = obj?.height || 0;
+            // Высота объекта всегда подгоняется под контент (и вверх, и вниз): без сжатия
+            // единожды завышенная высота залипала и давала пустой зазор под текстом.
+            const finalWorldH = worldH_auto;
+            const finalCssH = Math.round((finalWorldH * s) / res);
+            
+            el.style.height = `${finalCssH}px`;
+            
             const worldW = obj?.width || 0;
             const position = obj?.position || null;
-            if (worldW > 0 && position) {
+            if (worldW > 0 && position && finalWorldH !== currentWorldH) {
                 this.core.eventBus.emit(Events.Tool.ResizeUpdate, {
                     object: objectId,
-                    size: { width: worldW, height: worldH },
+                    size: { width: worldW, height: finalWorldH },
                     position
                 });
             }

package/src/ui/animation/HoverLiftController.js

@@ -83,6 +83,7 @@ export class HoverLiftController {
         this._isDragging = false;
         this._isResizing = false;
         this._isRotating = false;
+        this._isConnecting = false;
         /** Set<id> — выделенные объекты (по _mb.objectId) */
         this._selectedIds = new Set();
 
@@ -172,6 +173,26 @@ export class HoverLiftController {
         this._entries.delete(pixiObject);
     }
 
+    /**
+     * Текущая визуальная hover-трансформация объекта относительно его базы.
+     * Нужна, чтобы внешние оверлеи (подсветка коннектора) совпадали с
+     * масштабированным/приподнятым на hover объектом.
+     * @param {import('pixi.js').DisplayObject} pixiObject
+     * @returns {{ scaleMulX: number, scaleMulY: number, centerX: number, centerY: number } | null}
+     */
+    getVisualTransform(pixiObject) {
+        const entry = this._entries.get(pixiObject);
+        if (!entry) return null;
+        const baseScaleX = entry.baseScaleX || 1;
+        const baseScaleY = entry.baseScaleY || 1;
+        return {
+            scaleMulX: (pixiObject.scale?.x ?? baseScaleX) / baseScaleX,
+            scaleMulY: (pixiObject.scale?.y ?? baseScaleY) / baseScaleY,
+            centerX: pixiObject.x,
+            centerY: pixiObject.y,
+        };
+    }
+
     /** Обновить базовые значения после внешнего resize/move */
     syncBase(pixiObject) {
         const entry = this._entries.get(pixiObject);
@@ -197,9 +218,20 @@ export class HoverLiftController {
         return world?.scale?.x ?? 1;
     }
 
+    /**
+     * Внешняя блокировка hover на время протягивания коннектора.
+     * Цель коннектора не должна играть scale/lift: иначе её визуальные
+     * границы выходят за рамку подсветки, которая строится по логическим bounds.
+     * @param {boolean} active
+     */
+    setConnecting(active) {
+        this._isConnecting = !!active;
+        if (this._isConnecting) this._snapBackAll();
+    }
+
     /** Можно ли сейчас показывать hover */
     _isBlocked(pixiObject) {
-        if (this._isDragging || this._isResizing || this._isRotating) return true;
+        if (this._isDragging || this._isResizing || this._isRotating || this._isConnecting) return true;
         const id = pixiObject._mb?.objectId;
         if (id && this._selectedIds.has(id)) return true;
         return false;

package/src/ui/handles/HandlesDomRenderer.js

@@ -9,6 +9,15 @@ import { MINDMAP_LAYOUT } from '../mindmap/MindmapLayoutConfig.js';
 import { MindmapStatePatchCommand } from '../../core/commands/MindmapStatePatchCommand.js';
 
 const HANDLES_ACCENT_COLOR = '#80D8FF';
+const VERTICAL_RESIZE_CURSOR_COLOR = '#6B7280';
+const VERTICAL_RESIZE_CURSOR = 'url("/icons/move-vertical.svg") 12 12, ns-resize';
+const VERTICAL_RESIZE_CURSOR_TYPES = new Set(['frame', 'text', 'simple-text', 'image']);
+const VERTICAL_RESIZE_CORNER_CURSOR_ANGLES = {
+    nw: -45,
+    se: -45,
+    ne: 45,
+    sw: 45,
+};
 const REVIT_SHOW_IN_MODEL_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true" focusable="false"><path d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z"/></svg>';
 const MODEL3D_SHOW_IN_VIEWER_ICON_SVG = REVIT_SHOW_IN_MODEL_ICON_SVG;
 const MINDMAP_CHILD_WIDTH_FACTOR = 0.9;
@@ -39,6 +48,19 @@ function resolveBottomSiblingParentId(sourceObjectId, sourceMeta) {
     return sourceMeta?.parentId || null;
 }
 
+function shouldUseVerticalResizeCursor(mbType, handleName) {
+    return VERTICAL_RESIZE_CURSOR_TYPES.has(mbType)
+        && (handleName === 'handle' || handleName === 'top' || handleName === 'bottom');
+}
+
+function createVerticalResizeCornerCursor(dir, rotation) {
+    const baseAngle = VERTICAL_RESIZE_CORNER_CURSOR_ANGLES[dir] || 0;
+    const totalAngle = baseAngle + (rotation || 0);
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><g transform="rotate(${totalAngle} 12 12)"><path d="M12 2v20" stroke="${VERTICAL_RESIZE_CURSOR_COLOR}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m8 18 4 4 4-4" stroke="${VERTICAL_RESIZE_CURSOR_COLOR}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m8 6 4-4 4 4" stroke="${VERTICAL_RESIZE_CURSOR_COLOR}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>`;
+    const dataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+    return `url("${dataUrl}") 12 12, nwse-resize`;
+}
+
 function relayoutMindmapBranchLevel({ core, eventBus, parentId, side }) {
     if (!core || !eventBus || !parentId || (side !== 'left' && side !== 'right')) return;
     const objects = core?.state?.state?.objects || [];
@@ -1166,10 +1188,11 @@ export class HandlesDomRenderer {
         let sourceMindmapProperties = null;
         const occupiedOutgoingSides = new Set();
         const hiddenIncomingSide = { value: null };
+        let mbType = null;
         if (id !== '__group__') {
             const req = { objectId: id, pixiObject: null };
             this.host.eventBus.emit('tool:get:object:pixi', req);
-            const mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
+            mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
             isFileTarget = mbType === 'file';
             isFrameTarget = mbType === 'frame';
             isMindmapTarget = mbType === 'mindmap';
@@ -1244,7 +1267,9 @@ export class HandlesDomRenderer {
         }
 
         const mkCorner = (dir, x, y) => {
-            const cursor = createRotatedResizeCursor(dir, rotation);
+            const cursor = shouldUseVerticalResizeCursor(mbType, 'handle')
+                ? createVerticalResizeCornerCursor(dir, rotation)
+                : createRotatedResizeCursor(dir, rotation);
             const h = document.createElement('div');
             h.dataset.dir = dir;
             h.dataset.id = id;
@@ -1288,7 +1313,9 @@ export class HandlesDomRenderer {
 
         const edgeSize = 10;
         const makeEdge = (name, style, cursorHandleType) => {
-            const cursor = createRotatedResizeCursor(cursorHandleType, rotation);
+            const cursor = shouldUseVerticalResizeCursor(mbType, name)
+                ? VERTICAL_RESIZE_CURSOR
+                : createRotatedResizeCursor(cursorHandleType, rotation);
             const e = document.createElement('div');
             e.dataset.edge = name;
             e.dataset.id = id;

package/src/ui/handles/HandlesInteractionController.js

@@ -216,12 +216,14 @@ export class HandlesInteractionController {
         let aspectLockDominantAxis = null;
         let isTextTarget = false;
         let isNoteTarget = false;
+        let isVerticalResizeTarget = false;
         {
             const req = { objectId: id, pixiObject: null };
             this.host.eventBus.emit(Events.Tool.GetObjectPixi, req);
             const mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
             isTextTarget = (mbType === 'text' || mbType === 'simple-text');
             isNoteTarget = (mbType === 'note');
+            isVerticalResizeTarget = ['frame', 'text', 'simple-text', 'image'].includes(mbType);
         }
 
         const onMove = (ev) => {
@@ -263,9 +265,9 @@ export class HandlesInteractionController {
                 newW = rotatedBox.width;
                 newH = rotatedBox.height;
             } else {
-                if (dir.includes('e')) newW = Math.max(1, startCSS.width + dx);
+                if (dir.includes('e') && !isVerticalResizeTarget) newW = Math.max(1, startCSS.width + dx);
                 if (dir.includes('s')) newH = Math.max(1, startCSS.height + dy);
-                if (dir.includes('w')) {
+                if (dir.includes('w') && !isVerticalResizeTarget) {
                     newW = Math.max(1, startCSS.width - dx);
                     newLeft = startCSS.left + dx;
                 }
@@ -344,7 +346,7 @@ export class HandlesInteractionController {
                         el.style.width = `${Math.max(1, Math.round(newW))}px`;
                         el.style.height = 'auto';
                         const measured = Math.max(1, Math.round(el.scrollHeight));
-                        newH = measured;
+                        newH = Math.max(newH, measured);
                     }
                 } catch (_) {}
             }
@@ -418,35 +420,30 @@ export class HandlesInteractionController {
                     const mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
                     isFrameTarget = mbType === 'frame';
                 }
-                const resizeEndData = {
-                    object: id,
-                    oldSize: { width: startWorld.width, height: startWorld.height },
-                    newSize: { width: worldW, height: worldH },
-                    oldPosition: { x: startWorld.x, y: startWorld.y },
-                    newPosition: isFrameTarget ? null : (isEdgeLeftOrTop ? { x: worldX, y: worldY } : { x: startWorld.x, y: startWorld.y }),
-                };
-                this.host.eventBus.emit(Events.Tool.ResizeEnd, resizeEndData);
-                try {
-                    const req2 = { objectId: id, pixiObject: null };
-                    this.host.eventBus.emit(Events.Tool.GetObjectPixi, req2);
-                    const mbType2 = req2.pixiObject && req2.pixiObject._mb && req2.pixiObject._mb.type;
-                    if (mbType2 === 'text' || mbType2 === 'simple-text') {
+                
+                let finalWorldH = worldH;
+                if (isTextTarget) {
+                    try {
                         const textLayer = (typeof window !== 'undefined') ? window.moodboardHtmlTextLayer : null;
                         const el = textLayer && textLayer.idToEl ? textLayer.idToEl.get && textLayer.idToEl.get(id) : null;
                         if (el) {
                             el.style.width = `${Math.max(1, Math.round(endCSS.width))}px`;
                             el.style.height = 'auto';
                             const measured = Math.max(1, Math.round(el.scrollHeight));
-                            const worldH2 = measured / s;
-                            const fixData = {
-                                object: id,
-                                size: { width: worldW, height: worldH2 },
-                                position: isFrameTarget ? null : (isEdgeLeftOrTop ? { x: worldX, y: worldY } : { x: startWorld.x, y: startWorld.y }),
-                            };
-                            this.host.eventBus.emit(Events.Tool.ResizeUpdate, fixData);
+                            const finalCssH = Math.max(measured, endCSS.height);
+                            finalWorldH = finalCssH / s;
                         }
-                    }
-                } catch (_) {}
+                    } catch (_) {}
+                }
+
+                const resizeEndData = {
+                    object: id,
+                    oldSize: { width: startWorld.width, height: startWorld.height },
+                    newSize: { width: worldW, height: finalWorldH },
+                    oldPosition: { x: startWorld.x, y: startWorld.y },
+                    newPosition: edgeFinalPositionChanged ? { x: worldX, y: worldY } : { x: startWorld.x, y: startWorld.y },
+                };
+                this.host.eventBus.emit(Events.Tool.ResizeEnd, resizeEndData);
             }
         };
 
@@ -626,7 +623,7 @@ export class HandlesInteractionController {
                         el.style.width = `${Math.max(1, Math.round(newW))}px`;
                         el.style.height = 'auto';
                         const measured = Math.max(1, Math.round(el.scrollHeight));
-                        newH = measured;
+                        newH = Math.max(newH, measured);
                     }
                 } catch (_) {}
             }
@@ -717,7 +714,7 @@ export class HandlesInteractionController {
             } else {
                 const edgeFinalPositionChanged = (endCSS.left !== startCSS.left) || (endCSS.top !== startCSS.top);
                 let finalWorldH = worldH;
-                if (isTextTarget && (edge === 'left' || edge === 'right')) {
+                if (isTextTarget) {
                     try {
                         const textLayer = (typeof window !== 'undefined') ? window.moodboardHtmlTextLayer : null;
                         const el = textLayer && textLayer.idToEl ? textLayer.idToEl.get && textLayer.idToEl.get(id) : null;
@@ -725,7 +722,8 @@ export class HandlesInteractionController {
                             el.style.width = `${Math.max(1, Math.round(endCSS.width))}px`;
                             el.style.height = 'auto';
                             const measured = Math.max(1, Math.round(el.scrollHeight));
-                            finalWorldH = measured / s;
+                            const finalCssH = Math.max(measured, endCSS.height);
+                            finalWorldH = finalCssH / s;
                         }
                     } catch (_) {}
                 }

package/src/ui/styles/chat.css

@@ -32,6 +32,49 @@
     }
 }
 
+/* Mobile (≤768px): панель генерации — компактный bottom-sheet во всю ширину,
+   приподнят над зум/карта-баром, не наезжает на тулбар и холст. */
+@media (max-width: 768px) {
+    .moodboard-chat {
+        left: 8px;
+        right: 8px;
+        bottom: 84px; /* выше зум/карта-бара (16px + 60px touch-кнопки + зазор) */
+        transform: none;
+        width: auto;
+        max-width: none;
+    }
+
+    .moodboard-chat__composer {
+        min-height: 0;
+        padding: 0 6px 6px 8px;
+        gap: 6px;
+    }
+
+    /* iOS не зумит инпут при font-size ≥ 16px */
+    .moodboard-chat__textarea {
+        font-size: 16px;
+        min-height: 40px;
+        height: 40px;
+        padding: 12px 0 4px;
+    }
+
+    /* Пилюли и кнопка отправки переносятся, чтобы не выпадать за край */
+    .moodboard-chat__actions-row {
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+
+    .moodboard-chat__pills {
+        gap: 8px 10px;
+        flex-wrap: wrap;
+    }
+
+    /* История диалога не должна занимать весь экран на телефоне */
+    .moodboard-chat__history {
+        max-height: 40vh;
+    }
+}
+
 .moodboard-chat__history {
     max-height: 360px;
     overflow-y: auto;

package/src/ui/styles/topbar.css

@@ -111,3 +111,23 @@
 .moodboard-topbar__button--zoom { width: 32px; height: 32px; font-size: 16px; }
 .moodboard-topbar__zoom-label { min-width: 48px; text-align: center; font-size: 14px; }
 
+/* Mobile (≤768px): топбар не должен выходить за край экрана. Сжимаем зазоры,
+   ограничиваем ширину вьюпортом и даём прокрутку внутри пилюли, если кнопок много. */
+@media (max-width: 768px) {
+    .moodboard-topbar {
+        top: 8px;
+        left: 8px;
+        gap: 2px;
+        padding: 6px;
+        max-width: calc(100vw - 16px);
+        overflow-x: auto;
+        scrollbar-width: none; /* Firefox */
+    }
+
+    .moodboard-topbar::-webkit-scrollbar { display: none; }
+
+    .moodboard-topbar__button { flex: 0 0 auto; }
+
+    .moodboard-topbar__divider { margin: 0 3px; }
+}
+

package/src/ui/styles/workspace.css

@@ -676,6 +676,28 @@
     border-radius: 1px;
 }
 
+/* Иконка запрета ввода при достижении лимита строк записки */
+.moodboard-note-limit-ban {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 48px;
+    height: 48px;
+    align-items: center;
+    justify-content: center;
+    color: #b0b0b0;
+    opacity: 0.9;
+    pointer-events: none;
+    z-index: 10002;
+}
+
+.moodboard-note-limit-ban svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
 @keyframes mb-caret-blink {
     0%, 100% { opacity: 1; }
     50% { opacity: 0; }
@@ -1575,9 +1597,42 @@
 
 /* Responsive */
 @media (max-width: 768px) {
+    /* Тулбар прижимаем ближе к краю, чтобы оставить максимум холста.
+       Высоту регулирует ToolbarResponsiveController (схлопывание в «Ещё»). */
+    .moodboard-workspace__toolbar {
+        left: 8px;
+    }
+
     .moodboard-toolbar {
-        overflow-x: auto;
-        padding: 10px;
+        padding: 6px;
+        gap: 6px;
+    }
+
+    /* Зум- и карта-бары компактнее и ближе к краю на телефоне */
+    .moodboard-zoombar {
+        right: 72px;
+        bottom: 16px;
+        padding: 6px;
+        gap: 6px;
+    }
+
+    .moodboard-mapbar {
+        right: 8px;
+        bottom: 16px;
+        padding: 6px;
+    }
+
+    .moodboard-zoombar__menu,
+    .moodboard-mapbar__popup {
+        right: 0;
+    }
+
+    /* Мини-карта не должна перекрывать половину экрана */
+    .moodboard-mapbar__popup {
+        width: 60vw;
+        height: 28vh;
+        min-width: 180px;
+        min-height: 120px;
     }
 }
 

package/src/ui/text-properties/TextPropertiesPanelRenderer.js

@@ -7,6 +7,16 @@ import {
 import { createTextFormatControls } from './TextFormatControls.js';
 import { createTextLockMoreControls } from './TextLockMoreControls.js';
 
+const NO_COLOR_ICON_SVG = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 23.5C18.3513 23.5 23.5 18.3513 23.5 12C23.5 5.64873 18.3513 0.5 12 0.5C5.64873 0.5 0.5 5.64873 0.5 12C0.5 18.3513 5.64873 23.5 12 23.5Z" stroke="#B2B2B2" stroke-width="1.2"></path><path d="M4.27344 19.7266L19.7148 4.28516" stroke="#B2B2B2" stroke-width="1.2"></path></svg>`;
+
+function createNoColorIcon(extraStyle = '') {
+    const wrapper = document.createElement('span');
+    wrapper.className = 'no-color-icon';
+    wrapper.style.cssText = `display:inline-flex;pointer-events:none;width:20px;height:20px;${extraStyle}`;
+    wrapper.innerHTML = NO_COLOR_ICON_SVG;
+    return wrapper;
+}
+
 export function createTextPropertiesPanelRenderer(panelInstance) {
     const panel = document.createElement('div');
     panel.className = 'text-properties-panel';
@@ -106,20 +116,18 @@ export function updateCurrentBgColorButton(panelInstance, color) {
                 line.remove();
             }
 
-            if (!panelInstance.currentBgColorButton.querySelector('img.no-color-icon')) {
-                const img = document.createElement('img');
-                img.src = '/icons/no-color.svg';
-                img.className = 'no-color-icon';
-                img.style.cssText = 'width: 20px; height: 20px; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);';
-                panelInstance.currentBgColorButton.appendChild(img);
+            if (!panelInstance.currentBgColorButton.querySelector('.no-color-icon')) {
+                panelInstance.currentBgColorButton.appendChild(
+                    createNoColorIcon('position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);')
+                );
             }
         } else {
             panelInstance.currentBgColorButton.style.backgroundColor = color;
             panelInstance.currentBgColorButton.title = `Цвет выделения: ${color}`;
             
-            const img = panelInstance.currentBgColorButton.querySelector('img.no-color-icon');
-            if (img) {
-                img.remove();
+            const icon = panelInstance.currentBgColorButton.querySelector('.no-color-icon');
+            if (icon) {
+                icon.remove();
             }
             
             const line = panelInstance.currentBgColorButton.querySelector('div');
@@ -514,11 +522,7 @@ function createHighlightColorGrid(panelInstance, container) {
                 position: relative;
             `;
 
-            const img = document.createElement('img');
-            img.src = '/icons/no-color.svg';
-            img.className = 'no-color-icon';
-            img.style.cssText = 'width: 20px; height: 20px; pointer-events: none;';
-            colorButton.appendChild(img);
+            colorButton.appendChild(createNoColorIcon());
         } else {
             colorButton.style.cssText = `
                 width: 28px;
@@ -668,11 +672,7 @@ function createBackgroundColorGrid(panelInstance, container) {
                 position: relative;
             `;
 
-            const img = document.createElement('img');
-            img.src = '/icons/no-color.svg';
-            img.className = 'no-color-icon';
-            img.style.cssText = 'width: 20px; height: 20px; pointer-events: none;';
-            colorButton.appendChild(img);
+            colorButton.appendChild(createNoColorIcon());
         } else {
             colorButton.style.cssText = `
                 width: 28px;