@sequent-org/moodboard 1.4.59 → 1.4.60

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

@@ -1575,9 +1575,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;