@sequent-org/moodboard 1.4.74 → 1.4.75

package/package.json

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

package/src/assets/icons/message-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-icon lucide-message-square"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/></svg>

package/src/moodboard/bootstrap/MoodBoardUiFactory.js

@@ -1,5 +1,4 @@
 import { Toolbar } from '../../ui/Toolbar.js';
-import { SaveStatus } from '../../ui/SaveStatus.js';
 import { Topbar } from '../../ui/Topbar.js';
 import { ZoomPanel } from '../../ui/ZoomPanel.js';
 import { MapPanel } from '../../ui/MapPanel.js';
@@ -40,11 +39,6 @@ function initToolbar(board) {
         window.reloadIcon = (iconName) => board.toolbar.reloadToolbarIcon(iconName);
     }
 
-    board.saveStatus = new SaveStatus(
-        board.workspaceElement,
-        board.coreMoodboard.eventBus
-    );
-
     bindToolbarEvents(board);
 }
 

package/src/objects/shape/ShapeDrawer.js

@@ -191,6 +191,27 @@ function _drawFillShape(g, w, h, kind, cornerRadius) {
             g.lineTo(skew, 0);
             break;
         }
+        case 'dialog': {
+            const r = Math.max(2, Math.min(w, h) * 0.16);
+            const bodyBottom = h - Math.max(4, h * 0.22);
+            const tailRightBase = w * 0.42;
+            const tailLeftBase = w * 0.24;
+            const tailTipX = w * 0.18;
+            g.moveTo(r, 0);
+            g.lineTo(w - r, 0);
+            g.arcTo(w, 0, w, r, r);
+            g.lineTo(w, bodyBottom - r);
+            g.arcTo(w, bodyBottom, w - r, bodyBottom, r);
+            g.lineTo(tailRightBase, bodyBottom);
+            g.lineTo(tailTipX, h);
+            g.lineTo(tailLeftBase, bodyBottom);
+            g.lineTo(r, bodyBottom);
+            g.arcTo(0, bodyBottom, 0, bodyBottom - r, r);
+            g.lineTo(0, r);
+            g.arcTo(0, 0, r, 0, r);
+            g.closePath();
+            break;
+        }
         case 'arrow': {
             const shaftH = Math.max(6, h * 0.3);
             const shaftY = (h - shaftH) / 2;

package/src/objects/shape/shapeTextArea.js

@@ -63,6 +63,12 @@ export function getShapeTextSafeArea(kind, w, h) {
             const shaftY = (H - shaftH) / 2;
             return { left: 0, top: shaftY, width: W * 0.6, height: shaftH };
         }
+        case 'dialog': {
+            // Тело облачка (без хвостика снизу) — bodyBottom совпадает с ShapeDrawer.
+            // Текст центрируется по вертикали внутри тела, а не всего бокса с хвостом.
+            const bodyBottom = H - Math.max(4, H * 0.22);
+            return { left: 0, top: 0, width: W, height: bodyBottom };
+        }
         case 'square':
         case 'rounded':
         default:

package/src/ui/HtmlHandlesLayer.js

@@ -89,6 +89,7 @@ export class HtmlHandlesLayer {
         this._onDprChange = null;
       }
       this.eventBridge.detach();
+      this.interactionController.destroy();
 
       if (this.layer) {
         this.layer.remove();

package/src/ui/handles/HandlesDomRenderer.js

@@ -11,7 +11,7 @@ import { MindmapStatePatchCommand } from '../../core/commands/MindmapStatePatchC
 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_CURSOR_TYPES = new Set(['frame', 'text', 'simple-text', 'image', 'shape']);
 const VERTICAL_RESIZE_CORNER_CURSOR_ANGLES = {
     nw: -45,
     se: -45,
@@ -50,15 +50,26 @@ function resolveBottomSiblingParentId(sourceObjectId, sourceMeta) {
 
 function shouldUseVerticalResizeCursor(mbType, handleName) {
     return VERTICAL_RESIZE_CURSOR_TYPES.has(mbType)
-        && (handleName === 'handle' || handleName === 'top' || handleName === 'bottom');
+        && (handleName === 'handle'
+            || handleName === 'top'
+            || handleName === 'bottom'
+            || handleName === 'left'
+            || handleName === 'right');
 }
 
-function createVerticalResizeCornerCursor(dir, rotation) {
-    const baseAngle = VERTICAL_RESIZE_CORNER_CURSOR_ANGLES[dir] || 0;
-    const totalAngle = baseAngle + (rotation || 0);
+function buildVerticalResizeArrowCursor(totalAngle, fallback) {
     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`;
+    return `url("${dataUrl}") 12 12, ${fallback}`;
+}
+
+function createVerticalResizeCornerCursor(dir, rotation) {
+    const baseAngle = VERTICAL_RESIZE_CORNER_CURSOR_ANGLES[dir] || 0;
+    return buildVerticalResizeArrowCursor(baseAngle + (rotation || 0), 'nwse-resize');
+}
+
+function createHorizontalResizeCursor(rotation) {
+    return buildVerticalResizeArrowCursor(90 + (rotation || 0), 'ew-resize');
 }
 
 function relayoutMindmapBranchLevel({ core, eventBus, parentId, side }) {
@@ -1313,9 +1324,14 @@ export class HandlesDomRenderer {
 
         const edgeSize = 10;
         const makeEdge = (name, style, cursorHandleType) => {
-            const cursor = shouldUseVerticalResizeCursor(mbType, name)
-                ? VERTICAL_RESIZE_CURSOR
-                : createRotatedResizeCursor(cursorHandleType, rotation);
+            let cursor;
+            if (shouldUseVerticalResizeCursor(mbType, name)) {
+                cursor = (name === 'left' || name === 'right')
+                    ? createHorizontalResizeCursor(rotation)
+                    : VERTICAL_RESIZE_CURSOR;
+            } else {
+                cursor = createRotatedResizeCursor(cursorHandleType, rotation);
+            }
             const e = document.createElement('div');
             e.dataset.edge = name;
             e.dataset.id = id;

package/src/ui/handles/HandlesInteractionController.js

@@ -8,6 +8,30 @@ const TEXT_CORNER_MAX_FONT = 512;
 export class HandlesInteractionController {
     constructor(host) {
         this.host = host;
+        this._dragCursorStyleEl = null;
+    }
+
+    // Во время drag указатель уходит с маленького div-а ручки на canvas,
+    // и браузер подменяет курсор на дефолтный canvas-курсор — иконка ресайза пропадает.
+    // Глобальный <style> с !important держит нужную иконку видимой на всём документе.
+    _lockDragCursor(cursorValue) {
+        if (!cursorValue || typeof document === 'undefined') return;
+        this._unlockDragCursor();
+        const styleEl = document.createElement('style');
+        styleEl.textContent = `* { cursor: ${cursorValue} !important; }`;
+        document.head.appendChild(styleEl);
+        this._dragCursorStyleEl = styleEl;
+    }
+
+    _unlockDragCursor() {
+        if (this._dragCursorStyleEl) {
+            this._dragCursorStyleEl.remove();
+            this._dragCursorStyleEl = null;
+        }
+    }
+
+    destroy() {
+        this._unlockDragCursor();
     }
 
     _parseBoxRotation(box) {
@@ -191,6 +215,8 @@ export class HandlesInteractionController {
             }
         }
 
+        this._lockDragCursor(e.currentTarget.style.cursor);
+
         const world = this.host.core.pixi.worldLayer || this.host.core.pixi.app.stage;
         const s = world?.scale?.x || 1;
         const tx = world?.x || 0;
@@ -469,6 +495,7 @@ export class HandlesInteractionController {
         const onUp = () => {
             document.removeEventListener('pointermove', onMove);
             document.removeEventListener('pointerup', onUp);
+            this._unlockDragCursor();
 
             if (isTextCornerScale) {
                 // Кегль уже сохранён слитой UpdateTextStyleCommand из onMove.
@@ -546,6 +573,7 @@ export class HandlesInteractionController {
     onEdgeResizeDown(e) {
         e.preventDefault();
         e.stopPropagation();
+        this._lockDragCursor(e.currentTarget.style.cursor);
         const id = e.currentTarget.dataset.id;
         const isGroup = id === '__group__';
         const edge = e.currentTarget.dataset.edge;
@@ -756,6 +784,7 @@ export class HandlesInteractionController {
         const onUp = () => {
             document.removeEventListener('pointermove', onMove);
             document.removeEventListener('pointerup', onUp);
+            this._unlockDragCursor();
 
             // Клик по рамке без перетаскивания на текстовом объекте → редактирование
             if (!_edgeHasMoved && isTextTarget && !isGroup) {

package/src/ui/styles/workspace.css

@@ -1386,7 +1386,11 @@
 .shape-parallelogram {
     width: 17px; height: 11px; background: #ffffff; border: 1.5px solid #94a3b8; transform: skewX(-20deg);
 }
-.shape-arrow { font-size: 16px; color: #94a3b8; line-height: 1; }
+.shape-dialog {
+    width: 15px; height: 15px; color: #94a3b8;
+    display: inline-flex; align-items: center; justify-content: center;
+}
+.shape-dialog svg { width: 15px; height: 15px; display: block; }
 
 
 

package/src/ui/toolbar/ToolbarPopupsController.js

@@ -118,6 +118,8 @@ export class ToolbarPopupsController {
         const grid = document.createElement('div');
         grid.className = 'moodboard-shapes__grid';
 
+        const DIALOG_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/></svg>';
+
         const shapes = [
             { id: 'shape', title: 'Добавить фигуру', isToolbarAction: true },
             { id: 'rounded-square', title: 'Скругленный квадрат' },
@@ -125,7 +127,7 @@ export class ToolbarPopupsController {
             { id: 'triangle', title: 'Треугольник' },
             { id: 'diamond', title: 'Ромб' },
             { id: 'parallelogram', title: 'Параллелограмм' },
-            { id: 'arrow', title: 'Стрелка' }
+            { id: 'dialog', title: 'Диалог', svg: DIALOG_SVG }
         ];
 
         shapes.forEach((s) => {
@@ -137,9 +139,9 @@ export class ToolbarPopupsController {
                 icon.className = 'moodboard-shapes__icon shape-square';
             } else {
                 icon.className = `moodboard-shapes__icon shape-${s.id}`;
-                if (s.id === 'arrow') {
-                    icon.innerHTML = '<svg width="18" height="12" viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect x="0" y="5" width="12" height="2" rx="1" fill="#94a3b8"/><path d="M12 0 L18 6 L12 12 Z" fill="#94a3b8"/></svg>';
-                }
+            }
+            if (s.svg) {
+                icon.innerHTML = s.svg;
             }
             btn.appendChild(icon);
             btn.addEventListener('click', () => {
@@ -155,7 +157,7 @@ export class ToolbarPopupsController {
                     triangle: { kind: 'triangle' },
                     diamond: { kind: 'diamond' },
                     parallelogram: { kind: 'parallelogram' },
-                    arrow: { kind: 'arrow' }
+                    dialog: { kind: 'dialog' }
                 };
                 const props = propsMap[s.id] || { kind: 'square' };
                 this.toolbar.eventBus.emit(Events.Place.Set, { type: 'shape', properties: props });