@sequent-org/moodboard 1.4.58 → 1.4.60

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

@@ -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;