@sequent-org/moodboard 1.3.4 → 1.4.0

package/src/ui/mindmap/MindmapTextOverlayAdapter.js

@@ -0,0 +1,144 @@
+import { Events } from '../../core/events/Events.js';
+
+const MINDMAP_DRAG_THRESHOLD_PX = 4;
+
+/**
+ * Изолирует mindmap-специфику HTML-слоя текста:
+ * - внешний вид overlay-элемента
+ * - вход в режим редактирования по клику на текст
+ */
+export class MindmapTextOverlayAdapter {
+    supportsObject(objectData) {
+        return objectData?.type === 'mindmap';
+    }
+
+    getDefaultFontFamily(objectData) {
+        return objectData?.properties?.fontFamily || objectData?.fontFamily || 'Roboto, Arial, sans-serif';
+    }
+
+    applyElementStyles(el) {
+        el.classList.add('mb-text--mindmap');
+        el.style.pointerEvents = 'none';
+        el.style.cursor = 'default';
+    }
+
+    attachEditOnClick({ el, targetEl, objectId, objectData, eventBus }) {
+        const clickableEl = targetEl || el;
+        let pendingPointer = null;
+        let dragStarted = false;
+        let suppressNextClick = false;
+
+        const getCanvasEl = () => {
+            const doc = clickableEl?.ownerDocument || document;
+            return doc.querySelector('.moodboard-workspace__canvas canvas');
+        };
+
+        const dispatchMouseToCanvas = (type, sourceEvent, coords = null) => {
+            const canvas = getCanvasEl();
+            if (!canvas || !sourceEvent) return;
+            const point = coords || { clientX: sourceEvent.clientX, clientY: sourceEvent.clientY };
+            const evt = new MouseEvent(type, {
+                bubbles: true,
+                cancelable: true,
+                clientX: point.clientX,
+                clientY: point.clientY,
+                button: sourceEvent.button || 0,
+                buttons: sourceEvent.buttons || 0,
+                ctrlKey: !!sourceEvent.ctrlKey,
+                metaKey: !!sourceEvent.metaKey,
+                shiftKey: !!sourceEvent.shiftKey,
+                altKey: !!sourceEvent.altKey,
+            });
+            canvas.dispatchEvent(evt);
+        };
+
+        const onWindowMouseMove = (moveEvent) => {
+            if (!pendingPointer) return;
+            const dx = moveEvent.clientX - pendingPointer.clientX;
+            const dy = moveEvent.clientY - pendingPointer.clientY;
+            const movedEnough = Math.hypot(dx, dy) >= MINDMAP_DRAG_THRESHOLD_PX;
+            if (!dragStarted && movedEnough) {
+                dragStarted = true;
+                suppressNextClick = true;
+                dispatchMouseToCanvas('mousedown', pendingPointer, pendingPointer);
+            }
+            if (dragStarted) {
+                dispatchMouseToCanvas('mousemove', moveEvent);
+            }
+        };
+
+        const onWindowMouseUp = (upEvent) => {
+            if (!pendingPointer) return;
+            if (dragStarted) {
+                dispatchMouseToCanvas('mouseup', upEvent);
+            }
+            pendingPointer = null;
+            dragStarted = false;
+            window.removeEventListener('mousemove', onWindowMouseMove, true);
+            window.removeEventListener('mouseup', onWindowMouseUp, true);
+        };
+
+        const onTextMouseDown = (event) => {
+            if (event.button !== 0) return;
+            pendingPointer = {
+                clientX: event.clientX,
+                clientY: event.clientY,
+                button: event.button,
+                buttons: event.buttons || 1,
+                ctrlKey: !!event.ctrlKey,
+                metaKey: !!event.metaKey,
+                shiftKey: !!event.shiftKey,
+                altKey: !!event.altKey,
+            };
+            dragStarted = false;
+            window.addEventListener('mousemove', onWindowMouseMove, true);
+            window.addEventListener('mouseup', onWindowMouseUp, true);
+        };
+
+        const onTextClick = (event) => {
+            if (suppressNextClick) {
+                suppressNextClick = false;
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            const actualContent = (typeof el?.dataset?.mbContent === 'string')
+                ? el.dataset.mbContent
+                : (objectData?.properties?.content || objectData?.content || '');
+            const posData = { objectId, position: null };
+            eventBus.emit(Events.Tool.GetObjectPosition, posData);
+            const mergedProperties = {
+                ...(objectData?.properties || {}),
+                content: actualContent,
+            };
+            if (Number.isFinite(objectData?.width) && !Number.isFinite(mergedProperties.width)) {
+                mergedProperties.width = objectData.width;
+            }
+            if (Number.isFinite(objectData?.height) && !Number.isFinite(mergedProperties.height)) {
+                mergedProperties.height = objectData.height;
+            }
+            eventBus.emit(Events.Tool.ObjectEdit, {
+                id: objectId,
+                type: 'mindmap',
+                position: posData.position || objectData?.position || { x: 0, y: 0 },
+                properties: mergedProperties,
+                caretClick: {
+                    clientX: event.clientX,
+                    clientY: event.clientY,
+                },
+                create: false,
+            });
+        };
+
+        clickableEl.addEventListener('mousedown', onTextMouseDown);
+        clickableEl.addEventListener('click', onTextClick);
+        return () => {
+            window.removeEventListener('mousemove', onWindowMouseMove, true);
+            window.removeEventListener('mouseup', onWindowMouseUp, true);
+            clickableEl.removeEventListener('mousedown', onTextMouseDown);
+            clickableEl.removeEventListener('click', onTextClick);
+        };
+    }
+}

package/src/ui/styles/toolbar.css

@@ -64,6 +64,7 @@
 .moodboard-toolbar__button--attachments:hover,
 .moodboard-toolbar__button--emoji:hover,
 .moodboard-toolbar__button--frame:hover,
+.moodboard-toolbar__button--mindmap:hover,
 .moodboard-toolbar__button--clear:hover,
 .moodboard-toolbar__button--undo:hover:not(:disabled),
 .moodboard-toolbar__button--redo:hover:not(:disabled) { background: #80D8FF !important; }

package/src/ui/styles/workspace.css

@@ -234,6 +234,37 @@
     letter-spacing: normal;
 }
 
+.mb-text--mindmap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: left;
+    pointer-events: none;
+    cursor: default;
+    color: #212121;
+    font-family: 'Roboto', Arial, sans-serif;
+    font-weight: 400;
+    padding-top: 50px;
+    padding-bottom: 50px;
+    padding-left: 50px;
+    padding-right: 50px;
+}
+
+.mb-text--mindmap-content {
+    pointer-events: auto;
+    display: inline-block;
+    max-width: 100%;
+    white-space: pre;
+    word-break: normal;
+    overflow-wrap: normal;
+    cursor: default;
+    font-weight: 400;
+}
+
+.mb-text--mindmap-content.is-placeholder {
+    opacity: 0.45;
+}
+
 /* HTML handles layer */
 .moodboard-html-handles {
     position: absolute;
@@ -297,6 +328,75 @@
     justify-content: center;
 }
 
+.mb-mindmap-side-btn {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    border: none;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(107, 114, 128, 0.65);
+    color: #ffffff;
+    cursor: pointer;
+    pointer-events: auto;
+    z-index: 13;
+    padding: 0;
+}
+
+.mb-mindmap-side-btn:hover {
+    background: #80D8FF;
+}
+
+.mb-mindmap-side-btn::before,
+.mb-mindmap-side-btn::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    background: #ffffff;
+    border-radius: 999px;
+    transform: translate(-50%, -50%);
+}
+
+.mb-mindmap-side-btn::before {
+    width: 12px;
+    height: 2px;
+}
+
+.mb-mindmap-side-btn::after {
+    width: 2px;
+    height: 12px;
+}
+
+.mb-mindmap-side-btn--down {
+    font-size: 0;
+}
+
+.mb-mindmap-side-btn--down::before,
+.mb-mindmap-side-btn--down::after {
+    display: block;
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: calc(50% + 1px);
+    width: 8px;
+    height: 2px;
+    background: #ffffff;
+    border-radius: 999px;
+    transform-origin: center;
+}
+
+.mb-mindmap-side-btn--down::before {
+    transform: translate(-88%, -36%) rotate(35deg);
+}
+
+.mb-mindmap-side-btn--down::after {
+    transform: translate(-12%, -36%) rotate(-35deg);
+}
+
 .mb-revit-show-in-model {
     position: absolute;
     transform: translate(-50%, -100%);

package/src/ui/toolbar/ToolbarActionRouter.js

@@ -1,4 +1,6 @@
 import { Events } from '../../core/events/Events.js';
+import { MINDMAP_LAYOUT } from '../mindmap/MindmapLayoutConfig.js';
+import { createRootMindmapIntentMetadata } from '../../mindmap/MindmapCompoundContract.js';
 
 export class ToolbarActionRouter {
     constructor(toolbar) {
@@ -76,6 +78,39 @@ export class ToolbarActionRouter {
             return true;
         }
 
+        if (toolType === 'mindmap-add') {
+            const mindmapWidth = MINDMAP_LAYOUT.width;
+            const mindmapHeight = MINDMAP_LAYOUT.height;
+            this.toolbar.animateButton(button);
+            this.toolbar.closeShapesPopup();
+            this.toolbar.closeDrawPopup();
+            this.toolbar.closeEmojiPopup();
+            this.toolbar.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'place' });
+            this.toolbar.placeSelectedButtonId = 'mindmap';
+            this.toolbar.setActiveToolbarButton('place');
+            this.toolbar.eventBus.emit(Events.Place.Set, {
+                type: 'mindmap',
+                size: { width: mindmapWidth, height: mindmapHeight },
+                properties: {
+                    mindmap: createRootMindmapIntentMetadata(),
+                    fontSize: MINDMAP_LAYOUT.fontSize,
+                    width: mindmapWidth,
+                    height: mindmapHeight,
+                    capsuleBaseWidth: mindmapWidth,
+                    capsuleBaseHeight: mindmapHeight,
+                    paddingX: MINDMAP_LAYOUT.paddingX,
+                    paddingY: MINDMAP_LAYOUT.paddingY,
+                    maxLineChars: MINDMAP_LAYOUT.maxLineChars,
+                    textColor: 0x212121,
+                    strokeColor: 0x2563EB,
+                    fillColor: 0x3B82F6,
+                    fillAlpha: 0.25,
+                    strokeWidth: 1
+                }
+            });
+            return true;
+        }
+
         if (toolType === 'frame') {
             this.toolbar.animateButton(button);
             this.toolbar.toggleFramePopup(button);

package/src/ui/toolbar/ToolbarPopupsController.js

@@ -183,8 +183,8 @@ export class ToolbarPopupsController {
         const buttonRect = anchorButton.getBoundingClientRect();
         const top = buttonRect.top - toolbarRect.top - 4;
         const left = this.toolbar.element.offsetWidth + 8;
-        this.toolbar.shapesPopupEl.style.top = `${top}px`;
-        this.toolbar.shapesPopupEl.style.left = `${left}px`;
+        this.toolbar.shapesPopupEl.style.top = `${Math.round(top)}px`;
+        this.toolbar.shapesPopupEl.style.left = `${Math.round(left)}px`;
         this.toolbar.shapesPopupEl.style.display = 'block';
     }
 
@@ -363,8 +363,8 @@ export class ToolbarPopupsController {
         const buttonRect = anchorButton.getBoundingClientRect();
         const top = buttonRect.top - toolbarRect.top - 4;
         const left = this.toolbar.element.offsetWidth + 8;
-        this.toolbar.drawPopupEl.style.top = `${top}px`;
-        this.toolbar.drawPopupEl.style.left = `${left}px`;
+        this.toolbar.drawPopupEl.style.top = `${Math.round(top)}px`;
+        this.toolbar.drawPopupEl.style.left = `${Math.round(left)}px`;
         this.toolbar.drawPopupEl.style.display = 'block';
     }
 
@@ -652,8 +652,8 @@ export class ToolbarPopupsController {
         const minTop = 8;
         const maxTop = Math.max(minTop, containerHeight - popupHeight - 8);
         const top = Math.min(Math.max(minTop, desiredTop), maxTop);
-        this.toolbar.emojiPopupEl.style.top = `${top}px`;
-        this.toolbar.emojiPopupEl.style.left = `${left}px`;
+        this.toolbar.emojiPopupEl.style.top = `${Math.round(top)}px`;
+        this.toolbar.emojiPopupEl.style.left = `${Math.round(left)}px`;
         this.toolbar.emojiPopupEl.style.visibility = 'visible';
     }
 

package/src/ui/toolbar/ToolbarRenderer.js

@@ -25,6 +25,7 @@ export class ToolbarRenderer {
 
         const existingTools = [
             { id: 'frame', iconName: 'frame', title: 'Добавить фрейм', type: 'frame' },
+            { id: 'mindmap', iconName: 'mindmap', title: 'Схема', type: 'mindmap-add' },
             { id: 'divider', type: 'divider' },
             { id: 'undo', iconName: 'undo', title: 'Отменить (Ctrl+Z)', type: 'undo', disabled: true },
             { id: 'redo', iconName: 'redo', title: 'Повторить (Ctrl+Y)', type: 'redo', disabled: true }

package/src/ui/toolbar/ToolbarStateController.js

@@ -31,6 +31,7 @@ export class ToolbarStateController {
                 attachments: 'attachments',
                 shapes: 'shapes',
                 emoji: 'emoji',
+                mindmap: 'mindmap',
                 null: 'image'
             };
             btnId = placeButtonMap[this.toolbar.placeSelectedButtonId] || 'shapes';

package/src/utils/iconLoader.js

@@ -28,14 +28,15 @@ export class IconLoader {
                 import('../assets/icons/frame.svg?raw'),
                 import('../assets/icons/clear.svg?raw'),
                 import('../assets/icons/undo.svg?raw'),
-                import('../assets/icons/redo.svg?raw')
+                import('../assets/icons/redo.svg?raw'),
+                import('../assets/icons/mindmap.svg?raw')
             ]);
 
             // Сохраняем иконки в кэш
             const iconNames = [
                 'select', 'pan', 'text-add', 'note', 'image', 'shapes',
                 'pencil', 'comments', 'attachments', 'emoji', 'frame',
-                'clear', 'undo', 'redo'
+                'clear', 'undo', 'redo', 'mindmap'
             ];
 
             iconNames.forEach((name, index) => {
@@ -134,6 +135,10 @@ export class IconLoader {
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
   <path d="M15 14L20 9L15 4M4 20V13C4 11.9391 4.42143 10.9217 5.17157 10.1716C5.92172 9.42143 6.93913 9 8 9H20" 
         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`,
+            'mindmap': `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M19 2a3 3 0 1 1 0 6c-.463 0-.9-.109-1.291-.296l-1.19 1.19A3.992 3.992 0 0 1 18 12a3.991 3.991 0 0 1-1.48 3.105l1.189 1.19A2.984 2.984 0 0 1 19 16a3 3 0 1 1-3 3c0-.463.108-.9.295-1.291l-1.748-1.748A4.106 4.106 0 0 1 14 16h-4c-.186 0-.37-.014-.549-.04l-1.747 1.75c.187.392.296.828.296 1.291a3 3 0 1 1-3-3c.462 0 .899.108 1.29.295l1.19-1.19A3.992 3.992 0 0 1 6 12a3.99 3.99 0 0 1 1.48-3.106l-1.19-1.19A2.982 2.982 0 0 1 5 8a3 3 0 1 1 3-3c0 .463-.109.899-.296 1.29l1.748 1.748C9.632 8.014 9.814 8 10 8h4c.185 0 .368.013.547.037l1.748-1.747A2.983 2.983 0 0 1 16 5a3 3 0 0 1 3-3ZM5 18a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm14 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-9-8a2 2 0 1 0 0 4h4a2 2 0 1 0 0-4h-4ZM5 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm14 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/>
 </svg>`
         };
 
@@ -187,7 +192,7 @@ export class IconLoader {
         const iconNames = [
             'select', 'pan', 'text-add', 'note', 'image', 'shapes',
             'pencil', 'comments', 'attachments', 'emoji', 'frame',
-            'clear', 'undo', 'redo'
+            'clear', 'undo', 'redo', 'mindmap'
         ];
 
         iconNames.forEach(name => {
@@ -219,7 +224,8 @@ export class IconLoader {
             'frame': '<svg width="20" height="20" viewBox="0 0 20 20"><rect x="2" y="2" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"/></svg>',
             'clear': '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M3 6H17L16 18H4L3 6Z" fill="currentColor"/></svg>',
             'undo': '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M8 4L3 9L8 14" stroke="currentColor" stroke-width="2" fill="none"/></svg>',
-            'redo': '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M12 4L17 9L12 14" stroke="currentColor" stroke-width="2" fill="none"/></svg>'
+            'redo': '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M12 4L17 9L12 14" stroke="currentColor" stroke-width="2" fill="none"/></svg>',
+            'mindmap': '<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="4" cy="4" r="2" fill="currentColor"/><circle cx="16" cy="4" r="2" fill="currentColor"/><circle cx="4" cy="16" r="2" fill="currentColor"/><circle cx="16" cy="16" r="2" fill="currentColor"/><rect x="7" y="8" width="6" height="4" rx="2" fill="currentColor"/><path d="M6 5L8 8M14 8L16 5M8 12L6 15M12 12L14 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>'
         };
 
         return fallbacks[iconName] || fallbacks['select'];