@sequent-org/moodboard 1.1.0 → 1.2.0

package/src/ui/NotePropertiesPanel.js

@@ -101,7 +101,6 @@ export class NotePropertiesPanel {
         }
         // Скрываем все палитры цветов
         if (this.backgroundColorPalette) this.backgroundColorPalette.style.display = 'none';
-        if (this.borderColorPalette) this.borderColorPalette.style.display = 'none';
         if (this.textColorPalette) this.textColorPalette.style.display = 'none';
     }
 
@@ -114,16 +113,17 @@ export class NotePropertiesPanel {
             flexDirection: 'row',
             alignItems: 'center',
             gap: '8px',
-            padding: '8px 12px',
+            padding: '8px 40px',
             backgroundColor: 'white',
             border: '1px solid #e0e0e0',
-            borderRadius: '8px',
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+            borderRadius: '9999px',
+            boxShadow: '0 6px 24px rgba(0, 0, 0, 0.16)',
             fontSize: '12px',
             fontFamily: 'Arial, sans-serif',
             minWidth: '320px',
             height: '40px',
-            zIndex: '10000'
+            zIndex: '10000',
+            backdropFilter: 'blur(4px)'
         });
 
         // Создаем контролы для записки
@@ -179,6 +179,63 @@ export class NotePropertiesPanel {
     }
 
     _createNoteControls(panel) {
+        // Контейнер для выбора шрифта (как в панели текста)
+        const fontContainer = document.createElement('div');
+        Object.assign(fontContainer.style, {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px'
+        });
+
+        const fontLabel = document.createElement('span');
+        fontLabel.textContent = 'Шрифт:';
+        Object.assign(fontLabel.style, {
+            fontSize: '11px',
+            color: '#666',
+            minWidth: '40px'
+        });
+
+        const fontSelect = document.createElement('select');
+        Object.assign(fontSelect.style, {
+            border: '1px solid #ddd',
+            borderRadius: '4px',
+            padding: '3px 8px',
+            fontSize: '12px',
+            backgroundColor: '#fff',
+            cursor: 'pointer',
+            minWidth: '140px',
+        });
+        this.fontSelect = fontSelect;
+
+        const fonts = [
+            { value: 'Caveat, Arial, cursive', name: 'Caveat' },
+            { value: 'Roboto, Arial, sans-serif', name: 'Roboto' },
+            { value: 'Oswald, Arial, sans-serif', name: 'Oswald' },
+            { value: 'Playfair Display, Georgia, serif', name: 'Playfair Display' },
+            { value: 'Roboto Slab, Georgia, serif', name: 'Roboto Slab' },
+            { value: 'Noto Serif, Georgia, serif', name: 'Noto Serif' },
+            { value: 'Lobster, Arial, cursive', name: 'Lobster' },
+            { value: 'Rubik Mono One, Arial, sans-serif', name: 'Rubik Mono One' },
+            { value: 'Great Vibes, Arial, cursive', name: 'Great Vibes' },
+            { value: 'Amatic SC, Arial, cursive', name: 'Amatic SC' },
+            { value: 'Poiret One, Arial, cursive', name: 'Poiret One' },
+            { value: 'Pacifico, Arial, cursive', name: 'Pacifico' },
+        ];
+        fonts.forEach((font) => {
+            const option = document.createElement('option');
+            option.value = font.value;
+            option.textContent = font.name;
+            option.style.fontFamily = font.value;
+            fontSelect.appendChild(option);
+        });
+
+        fontSelect.addEventListener('change', (e) => {
+            this._changeFontFamily(e.target.value);
+        });
+
+        fontContainer.appendChild(fontLabel);
+        fontContainer.appendChild(fontSelect);
+
         // Контейнер для цвета фона
         const backgroundContainer = this._createColorControl(
             'Фон:',
@@ -195,21 +252,7 @@ export class NotePropertiesPanel {
             'backgroundColor'
         );
 
-        // Контейнер для цвета границы
-        const borderContainer = this._createColorControl(
-            'Граница:',
-            'borderColorButton',
-            'borderColorPalette',
-            [
-                { name: 'Золотой', hex: '#F9A825', pixi: 0xF9A825 },
-                { name: 'Розовый', hex: '#E91E63', pixi: 0xE91E63 },
-                { name: 'Синий', hex: '#2196F3', pixi: 0x2196F3 },
-                { name: 'Зеленый', hex: '#4CAF50', pixi: 0x4CAF50 },
-                { name: 'Оранжевый', hex: '#FF9800', pixi: 0xFF9800 },
-                { name: 'Фиолетовый', hex: '#9C27B0', pixi: 0x9C27B0 }
-            ],
-            'borderColor'
-        );
+        // Раздел "Граница" удалён по требованиям дизайна
 
         // Контейнер для цвета текста
         const textContainer = this._createColorControl(
@@ -270,8 +313,8 @@ export class NotePropertiesPanel {
         fontSizeContainer.appendChild(fontSizeLabel);
         fontSizeContainer.appendChild(fontSizeInput);
 
+        panel.appendChild(fontContainer);
         panel.appendChild(backgroundContainer);
-        panel.appendChild(borderContainer);
         panel.appendChild(textContainer);
         panel.appendChild(fontSizeContainer);
     }
@@ -295,12 +338,13 @@ export class NotePropertiesPanel {
 
         const button = document.createElement('button');
         Object.assign(button.style, {
-            width: '32px',
-            height: '20px',
-            border: '1px solid #ccc',
-            borderRadius: '4px',
+            width: '24px',
+            height: '24px',
+            border: `1px solid ${this._darkenHex(colors[0].hex, 0.28)}`,
+            borderRadius: '50%',
             cursor: 'pointer',
-            backgroundColor: colors[0].hex
+            backgroundColor: colors[0].hex,
+            padding: '0'
         });
 
         button.addEventListener('click', (e) => {
@@ -342,11 +386,11 @@ export class NotePropertiesPanel {
         colors.forEach(color => {
             const colorSwatch = document.createElement('div');
             Object.assign(colorSwatch.style, {
-                width: '20px',
-                height: '20px',
+                width: '22px',
+                height: '22px',
                 backgroundColor: color.hex,
-                border: '1px solid #ccc',
-                borderRadius: '4px',
+                border: `1px solid ${this._darkenHex(color.hex, 0.28)}`,
+                borderRadius: '50%',
                 cursor: 'pointer',
                 transition: 'transform 0.1s'
             });
@@ -400,8 +444,8 @@ export class NotePropertiesPanel {
     }
 
     _documentClickHandler(e) {
-        const palettes = [this.backgroundColorPalette, this.borderColorPalette, this.textColorPalette];
-        const buttons = [this.backgroundColorButton, this.borderColorButton, this.textColorButton];
+        const palettes = [this.backgroundColorPalette, this.textColorPalette];
+        const buttons = [this.backgroundColorButton, this.textColorButton];
         
         let shouldClose = true;
         
@@ -432,12 +476,11 @@ export class NotePropertiesPanel {
         // Обновляем соответствующую кнопку
         if (propertyName === 'backgroundColor' && this.backgroundColorButton) {
             this.backgroundColorButton.style.backgroundColor = color.hex;
+            this.backgroundColorButton.style.borderColor = this._darkenHex(color.hex, 0.28);
             this.backgroundColorButton.title = `Цвет фона: ${color.name}`;
-        } else if (propertyName === 'borderColor' && this.borderColorButton) {
-            this.borderColorButton.style.backgroundColor = color.hex;
-            this.borderColorButton.title = `Цвет границы: ${color.name}`;
         } else if (propertyName === 'textColor' && this.textColorButton) {
             this.textColorButton.style.backgroundColor = color.hex;
+            this.textColorButton.style.borderColor = this._darkenHex(color.hex, 0.28);
             this.textColorButton.title = `Цвет текста: ${color.name}`;
         }
 
@@ -463,6 +506,17 @@ export class NotePropertiesPanel {
         });
     }
 
+    _changeFontFamily(fontFamily) {
+        if (!this.currentId) return;
+
+        console.log('📝 NotePropertiesPanel: Changing font family to:', fontFamily);
+
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: { properties: { fontFamily: fontFamily } }
+        });
+    }
+
     _updateControlsFromObject() {
         if (!this.currentId) return;
 
@@ -474,9 +528,7 @@ export class NotePropertiesPanel {
             if (this.backgroundColorButton && props.backgroundColor !== undefined) {
                 this._updateColorButton(this.backgroundColorButton, props.backgroundColor);
             }
-            if (this.borderColorButton && props.borderColor !== undefined) {
-                this._updateColorButton(this.borderColorButton, props.borderColor);
-            }
+            // Раздел "Граница" удалён — пропускаем обновление кнопки границы
             if (this.textColorButton && props.textColor !== undefined) {
                 this._updateColorButton(this.textColorButton, props.textColor);
             }
@@ -485,6 +537,11 @@ export class NotePropertiesPanel {
             if (this.fontSizeInput && props.fontSize !== undefined) {
                 this.fontSizeInput.value = props.fontSize.toString();
             }
+
+            // Обновляем выбранный шрифт
+            if (this.fontSelect) {
+                this.fontSelect.value = props.fontFamily || 'Pacifico, Arial, sans-serif';
+            }
         }
     }
 
@@ -494,6 +551,26 @@ export class NotePropertiesPanel {
         // Конвертируем PIXI цвет в hex строку
         const hexColor = `#${pixiColor.toString(16).padStart(6, '0').toUpperCase()}`;
         button.style.backgroundColor = hexColor;
+        button.style.borderColor = this._darkenHex(hexColor, 0.28);
+    }
+
+    /**
+     * Затемняет hex-цвет на заданную долю (0..1)
+     */
+    _darkenHex(hex, amount = 0.2) {
+        try {
+            const norm = (hex || '').trim();
+            const m = /^#?([a-fA-F0-9]{6})$/.exec(norm.startsWith('#') ? norm : `#${norm}`);
+            if (!m) return '#777777';
+            const num = parseInt(m[1], 16);
+            const r = Math.max(0, Math.min(255, Math.floor(((num >> 16) & 0xFF) * (1 - amount))));
+            const g = Math.max(0, Math.min(255, Math.floor(((num >> 8) & 0xFF) * (1 - amount))));
+            const b = Math.max(0, Math.min(255, Math.floor((num & 0xFF) * (1 - amount))));
+            const toHex = (v) => v.toString(16).padStart(2, '0').toUpperCase();
+            return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+        } catch (_) {
+            return '#777777';
+        }
     }
 
     destroy() {

package/src/ui/TextPropertiesPanel.js

@@ -41,7 +41,7 @@ export class TextPropertiesPanel {
             if (this.currentId && objectId === this.currentId) this.hide();
         });
         
-        // Скрываем панель во время редактирования текста
+        // Во время редактирования текста скрываем панель
         this.eventBus.on(Events.UI.TextEditStart, () => {
             this.isTextEditing = true;
             this.hide();
@@ -119,23 +119,7 @@ export class TextPropertiesPanel {
     _createPanel() {
         const panel = document.createElement('div');
         panel.className = 'text-properties-panel';
-        Object.assign(panel.style, {
-            position: 'absolute',
-            pointerEvents: 'auto',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: '12px',
-            padding: '8px 16px',
-            backgroundColor: 'white',
-            border: '1px solid #e0e0e0',
-            borderRadius: '8px',
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-            fontSize: '14px',
-            fontFamily: 'Arial, sans-serif',
-            minWidth: '550px',
-            height: '44px'
-        });
+        // Основные стили панели вынесены в CSS (.text-properties-panel)
 
         // Создаем контролы
         this._createFontControls(panel);
@@ -147,36 +131,28 @@ export class TextPropertiesPanel {
         // Лейбл для шрифта
         const fontLabel = document.createElement('span');
         fontLabel.textContent = 'Шрифт:';
-        fontLabel.style.fontSize = '12px';
-        fontLabel.style.color = '#666';
-        fontLabel.style.fontWeight = '500';
+        fontLabel.className = 'tpp-label';
         panel.appendChild(fontLabel);
 
         // Выпадающий список шрифтов
         this.fontSelect = document.createElement('select');
         this.fontSelect.className = 'font-select';
-        Object.assign(this.fontSelect.style, {
-            border: '1px solid #ddd',
-            borderRadius: '4px',
-            padding: '4px 8px',
-            fontSize: '13px',
-            backgroundColor: 'white',
-            cursor: 'pointer',
-            minWidth: '140px'
-        });
+        this.fontSelect.className = 'font-select';
 
         // Список популярных шрифтов
         const fonts = [
-            { value: 'Arial, sans-serif', name: 'Arial' },
-            { value: 'Helvetica, sans-serif', name: 'Helvetica' },
-            { value: 'Georgia, serif', name: 'Georgia' },
-            { value: 'Times New Roman, serif', name: 'Times New Roman' },
-            { value: 'Courier New, monospace', name: 'Courier New' },
-            { value: 'Verdana, sans-serif', name: 'Verdana' },
-            { value: 'Tahoma, sans-serif', name: 'Tahoma' },
-            { value: 'Impact, sans-serif', name: 'Impact' },
-            { value: 'Comic Sans MS, cursive', name: 'Comic Sans MS' },
-            { value: 'Trebuchet MS, sans-serif', name: 'Trebuchet MS' }
+            { value: 'Roboto, Arial, sans-serif', name: 'Roboto' },
+            { value: 'Oswald, Arial, sans-serif', name: 'Oswald' },
+            { value: '"Playfair Display", Georgia, serif', name: 'Playfair Display' },
+            { value: '"Roboto Slab", Georgia, serif', name: 'Roboto Slab' },
+            { value: '"Noto Serif", Georgia, serif', name: 'Noto Serif' },
+            { value: 'Lobster, "Comic Sans MS", cursive', name: 'Lobster' },
+            { value: 'Caveat, "Comic Sans MS", cursive', name: 'Caveat' },
+            { value: '"Rubik Mono One", "Courier New", monospace', name: 'Rubik Mono One' },
+            { value: '"Great Vibes", "Comic Sans MS", cursive', name: 'Great Vibes' },
+            { value: '"Amatic SC", "Comic Sans MS", cursive', name: 'Amatic SC' },
+            { value: '"Poiret One", Arial, sans-serif', name: 'Poiret One' },
+            { value: 'Pacifico, "Comic Sans MS", cursive', name: 'Pacifico' }
         ];
 
         fonts.forEach(font => {
@@ -197,24 +173,13 @@ export class TextPropertiesPanel {
         // Лейбл для размера
         const sizeLabel = document.createElement('span');
         sizeLabel.textContent = 'Размер:';
-        sizeLabel.style.fontSize = '12px';
-        sizeLabel.style.color = '#666';
-        sizeLabel.style.fontWeight = '500';
-        sizeLabel.style.marginLeft = '8px';
+        sizeLabel.className = 'tpp-label tpp-label--spaced';
         panel.appendChild(sizeLabel);
 
         // Выпадающий список размеров шрифта
         this.fontSizeSelect = document.createElement('select');
         this.fontSizeSelect.className = 'font-size-select';
-        Object.assign(this.fontSizeSelect.style, {
-            border: '1px solid #ddd',
-            borderRadius: '4px',
-            padding: '4px 8px',
-            fontSize: '13px',
-            backgroundColor: 'white',
-            cursor: 'pointer',
-            minWidth: '70px'
-        });
+        this.fontSizeSelect.className = 'font-size-select';
 
         // Популярные размеры шрифта
         const fontSizes = [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 60, 72];
@@ -236,22 +201,16 @@ export class TextPropertiesPanel {
         // Лейбл для цвета
         const colorLabel = document.createElement('span');
         colorLabel.textContent = 'Цвет:';
-        colorLabel.style.fontSize = '12px';
-        colorLabel.style.color = '#666';
-        colorLabel.style.fontWeight = '500';
-        colorLabel.style.marginLeft = '8px';
+        colorLabel.className = 'tpp-label tpp-label--spaced';
         panel.appendChild(colorLabel);
 
         // Создаем компактный селектор цвета текста
         this._createCompactColorSelector(panel);
 
-        // Лейбл для выделения
+        // Лейбл для фона
         const bgColorLabel = document.createElement('span');
-        bgColorLabel.textContent = 'Выделение:';
-        bgColorLabel.style.fontSize = '12px';
-        bgColorLabel.style.color = '#666';
-        bgColorLabel.style.fontWeight = '500';
-        bgColorLabel.style.marginLeft = '8px';
+        bgColorLabel.textContent = 'Фон:';
+        bgColorLabel.className = 'tpp-label tpp-label--spaced';
         panel.appendChild(bgColorLabel);
 
         // Создаем компактный селектор цвета фона
@@ -271,19 +230,7 @@ export class TextPropertiesPanel {
         this.currentColorButton = document.createElement('button');
         this.currentColorButton.type = 'button';
         this.currentColorButton.title = 'Выбрать цвет';
-        this.currentColorButton.style.cssText = `
-            width: 32px;
-            height: 24px;
-            border: 2px solid #ddd;
-            border-radius: 4px;
-            background-color: #000000;
-            cursor: pointer;
-            margin: 0;
-            padding: 0;
-            display: block;
-            box-sizing: border-box;
-            position: relative;
-        `;
+        this.currentColorButton.className = 'current-color-button';
 
         // Создаем выпадающую панель с цветами
         this.colorDropdown = document.createElement('div');
@@ -325,27 +272,27 @@ export class TextPropertiesPanel {
     _createColorGrid(container) {
         // Популярные цвета для текста
         const presetColors = [
-            { color: '#000000', name: 'Черный' },
-            { color: '#333333', name: 'Темно-серый' },
-            { color: '#666666', name: 'Серый' },
-            { color: '#999999', name: 'Светло-серый' },
-            { color: '#ffffff', name: 'Белый' },
-            { color: '#ff0000', name: 'Красный' },
-            { color: '#00ff00', name: 'Зеленый' },
-            { color: '#0000ff', name: 'Синий' },
-            { color: '#ffff00', name: 'Желтый' },
-            { color: '#ff00ff', name: 'Фиолетовый' },
-            { color: '#00ffff', name: 'Голубой' },
-            { color: '#ffa500', name: 'Оранжевый' }
+            { color: '#000000', name: '#000000' },
+            { color: '#404040', name: '#404040' },
+            { color: '#999999', name: '#999999' },
+            { color: '#FF2D55', name: '#FF2D55' },
+            { color: '#CB30E0', name: '#CB30E0' },
+            { color: '#6155F5', name: '#6155F5' },
+            { color: '#00C0E8', name: '#00C0E8' },
+            { color: '#34C759', name: '#34C759' },
+            { color: '#FF8D28', name: '#FF8D28' },
+            { color: '#FFCC00', name: '#FFCC00' }
         ];
 
         // Сетка заготовленных цветов
         const presetsGrid = document.createElement('div');
         presetsGrid.style.cssText = `
             display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            gap: 4px;
+            grid-template-columns: repeat(6, 28px);
+            gap: 6px;
             margin-bottom: 8px;
+            align-items: center;
+            justify-items: center;
         `;
 
         presetColors.forEach(preset => {
@@ -353,10 +300,10 @@ export class TextPropertiesPanel {
             colorButton.type = 'button';
             colorButton.title = preset.name;
             colorButton.style.cssText = `
-                width: 24px;
-                height: 24px;
+                width: 28px;
+                height: 28px;
                 border: 1px solid #ddd;
-                border-radius: 3px;
+                border-radius: 50%;
                 background-color: ${preset.color};
                 cursor: pointer;
                 margin: 0;
@@ -364,9 +311,31 @@ export class TextPropertiesPanel {
                 display: block;
                 box-sizing: border-box;
                 ${preset.color === '#ffffff' ? 'border-color: #ccc;' : ''}
+                position: relative;
+            `;
+            // Галочка по центру активного пресета
+            const tick = document.createElement('i');
+            tick.style.cssText = `
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                width: 8px;
+                height: 5px;
+                transform: translate(-50%, -50%) rotate(315deg) scaleX(-1);
+                border-right: 2px solid #111;
+                border-bottom: 2px solid #111;
+                display: none;
+                pointer-events: none;
             `;
+            colorButton.appendChild(tick);
 
             colorButton.addEventListener('click', () => {
+                // Снимаем активность с других и ставим на текущий
+                Array.from(presetsGrid.children).forEach((el) => {
+                    const i = el.querySelector('i');
+                    if (i) i.style.display = 'none';
+                });
+                tick.style.display = 'block';
                 this._selectColor(preset.color);
             });
 
@@ -462,19 +431,7 @@ export class TextPropertiesPanel {
         this.currentBgColorButton = document.createElement('button');
         this.currentBgColorButton.type = 'button';
         this.currentBgColorButton.title = 'Выбрать цвет выделения';
-        this.currentBgColorButton.style.cssText = `
-            width: 32px;
-            height: 24px;
-            border: 2px solid #ddd;
-            border-radius: 4px;
-            background-color: transparent;
-            cursor: pointer;
-            margin: 0;
-            padding: 0;
-            display: block;
-            box-sizing: border-box;
-            position: relative;
-        `;
+        this.currentBgColorButton.className = 'current-bgcolor-button';
 
         // Создаем выпадающую панель с цветами фона
         this.bgColorDropdown = document.createElement('div');
@@ -534,9 +491,11 @@ export class TextPropertiesPanel {
         const presetsGrid = document.createElement('div');
         presetsGrid.style.cssText = `
             display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            gap: 4px;
+            grid-template-columns: repeat(6, 28px);
+            gap: 6px;
             margin-bottom: 8px;
+            align-items: center;
+            justify-items: center;
         `;
 
         bgColors.forEach(preset => {
@@ -547,10 +506,10 @@ export class TextPropertiesPanel {
             if (preset.color === 'transparent') {
                 // Специальная кнопка для "без выделения"
                 colorButton.style.cssText = `
-                    width: 24px;
-                    height: 24px;
+                    width: 28px;
+                    height: 28px;
                     border: 1px solid #ddd;
-                    border-radius: 3px;
+                    border-radius: 50%;
                     background: white;
                     cursor: pointer;
                     margin: 0;
@@ -573,10 +532,10 @@ export class TextPropertiesPanel {
                 colorButton.appendChild(line);
             } else {
                 colorButton.style.cssText = `
-                    width: 24px;
-                    height: 24px;
+                    width: 28px;
+                    height: 28px;
                     border: 1px solid #ddd;
-                    border-radius: 3px;
+                    border-radius: 50%;
                     background-color: ${preset.color};
                     cursor: pointer;
                     margin: 0;
@@ -584,10 +543,33 @@ export class TextPropertiesPanel {
                     display: block;
                     box-sizing: border-box;
                     ${preset.color === '#ffffff' ? 'border-color: #ccc;' : ''}
+                    position: relative;
+                `;
+                // Галочка по центру активного пресета
+                const tick = document.createElement('i');
+                tick.style.cssText = `
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    width: 8px;
+                    height: 5px;
+                    transform: translate(-50%, -50%) rotate(315deg) scaleX(-1);
+                    border-right: 2px solid #111;
+                    border-bottom: 2px solid #111;
+                    display: none;
+                    pointer-events: none;
                 `;
+                colorButton.appendChild(tick);
             }
 
             colorButton.addEventListener('click', () => {
+                // Снимаем активность с других и ставим на текущий
+                Array.from(presetsGrid.children).forEach((el) => {
+                    const i = el.querySelector('i');
+                    if (i) i.style.display = 'none';
+                });
+                const selfTick = colorButton.querySelector('i');
+                if (selfTick) selfTick.style.display = 'block';
                 this._selectBgColor(preset.color);
             });
 
@@ -701,11 +683,11 @@ export class TextPropertiesPanel {
 
         console.log('🔧 TextPropertiesPanel: Changing font family to:', fontFamily);
 
-        // Обновляем свойства объекта через StateManager
+        // Обновляем свойства объекта через StateManager (в properties)
         this.eventBus.emit(Events.Object.StateChanged, {
             objectId: this.currentId,
             updates: {
-                fontFamily: fontFamily
+                properties: { fontFamily }
             }
         });
 
@@ -822,7 +804,7 @@ export class TextPropertiesPanel {
                 this.fontSelect.value = properties.fontFamily;
             } else {
                 // Устанавливаем дефолтный шрифт
-                this.fontSelect.value = 'Arial, sans-serif';
+                this.fontSelect.value = 'Roboto, Arial, sans-serif';
             }
 
             // Устанавливаем размер шрифта в селекте
@@ -881,7 +863,7 @@ export class TextPropertiesPanel {
 
         // Позиционируем панель над объектом
         const panelX = screenX + (objectWidth / 2) - (this.panel.offsetWidth / 2);
-        const panelY = screenY - this.panel.offsetHeight - 10; // 10px отступ от объекта
+        const panelY = screenY - this.panel.offsetHeight - 20; // поднимем выше ещё
 
         // Проверяем границы контейнера
         const containerRect = this.container.getBoundingClientRect();