@sequent-org/moodboard 1.2.119 → 1.3.1

package/src/ui/Topbar.js

@@ -40,15 +40,15 @@ export class Topbar {
         // не подсвечиваем дефолт до прихода актуального типа из ядра
 
         // Синхронизация активного состояния по событию из ядра
-        this.eventBus.on(Events.UI.GridCurrent, ({ type }) => {
-            this.setActive(type);
-        });
+        this._onGridCurrent = ({ type }) => this.setActive(type);
+        this.eventBus.on(Events.UI.GridCurrent, this._onGridCurrent);
 
         // Обновляем цвет кнопки "краски" при выборе цвета фона
-        this.eventBus.on(Events.UI.PaintPick, ({ btnHex }) => {
+        this._onPaintPick = ({ btnHex }) => {
             if (!btnHex) return;
             this.setPaintButtonHex(btnHex);
-        });
+        };
+        this.eventBus.on(Events.UI.PaintPick, this._onPaintPick);
 
         // Инициализация цвета кнопки "краска" из настроек (или фона рендерера)
         try {
@@ -254,18 +254,6 @@ export class Topbar {
         const colors = this._palette.map(c => ({ id: c.id, name: c.name, hex: c.btnHex, board: c.board }));
         const grid = document.createElement('div');
         grid.className = 'moodboard-topbar__paint-grid';
-        const darken = (hex, amount = 0.25) => {
-            try {
-                const h = hex.replace('#','');
-                const r = parseInt(h.substring(0,2), 16);
-                const g = parseInt(h.substring(2,4), 16);
-                const b = parseInt(h.substring(4,6), 16);
-                const dr = Math.max(0, Math.min(255, Math.round(r * (1 - amount))));
-                const dg = Math.max(0, Math.min(255, Math.round(g * (1 - amount))));
-                const db = Math.max(0, Math.min(255, Math.round(b * (1 - amount))));
-                return `#${dr.toString(16).padStart(2,'0')}${dg.toString(16).padStart(2,'0')}${db.toString(16).padStart(2,'0')}`;
-            } catch (_) { return hex; }
-        };
 
         colors.forEach(c => {
             const b = document.createElement('button');
@@ -274,7 +262,7 @@ export class Topbar {
             b.title = `Цвет ${c.id}`;
             b.style.background = c.hex;
             // Тёмная обводка того же цвета
-            b.style.borderColor = darken(c.hex, 0.35);
+            b.style.borderColor = this._darkenHex(c.hex, 0.35);
             // Цвет галочки — чёрный для максимальной видимости
             b.style.color = '#111';
             // Для надёжного сравнения — сохраняем оба значения в dataset
@@ -326,22 +314,32 @@ export class Topbar {
         this.element.appendChild(pop);
         this._paintPopover = pop;
 
-        // закрытие по клику вне
-        const onDocClick = (ev) => {
+        // закрытие по клику вне (сохраняем ссылку для cleanup при destroy)
+        this._onDocClickOutside = (ev) => {
             if (!pop.contains(ev.target) && ev.target !== anchorBtn) {
                 pop.remove();
                 this._paintPopover = null;
-                document.removeEventListener('click', onDocClick, true);
+                document.removeEventListener('click', this._onDocClickOutside, true);
             }
         };
-        setTimeout(() => document.addEventListener('click', onDocClick, true), 0);
+        setTimeout(() => document.addEventListener('click', this._onDocClickOutside, true), 0);
     }
 
     destroy() {
-        if (this.element) {
-            this.element.remove();
-            this.element = null;
+        if (!this.element) return;
+
+        if (this._paintPopover) {
+            this._paintPopover.remove();
+            this._paintPopover = null;
+            document.removeEventListener('click', this._onDocClickOutside, true);
         }
+
+        if (this._onGridCurrent) this.eventBus.off(Events.UI.GridCurrent, this._onGridCurrent);
+        if (this._onPaintPick) this.eventBus.off(Events.UI.PaintPick, this._onPaintPick);
+
+        this.element.remove();
+        this.element = null;
+        this._paintBtn = null;
     }
 }
 

package/src/ui/ZoomPanel.js

@@ -72,17 +72,18 @@ export class ZoomPanel {
             }
         });
 
-        document.addEventListener('mousedown', (e) => {
+        this._onDocMouseDown = (e) => {
             if (!this.menuEl) return;
-            // ИСПРАВЛЕНИЕ: Защита от null элементов
             if (!this.element || !e.target) return;
             if (this.element.contains(e.target)) return;
             this.hideMenu();
-        });
+        };
+        document.addEventListener('mousedown', this._onDocMouseDown);
 
-        this.eventBus.on(Events.UI.ZoomPercent, ({ percentage }) => {
+        this._onZoomPercent = ({ percentage }) => {
             if (this.valueEl) this.valueEl.textContent = `${percentage}%`;
-        });
+        };
+        this.eventBus.on(Events.UI.ZoomPercent, this._onZoomPercent);
     }
 
     showMenu() {
@@ -115,9 +116,19 @@ export class ZoomPanel {
     }
 
     destroy() {
+        if (this._onDocMouseDown) {
+            document.removeEventListener('mousedown', this._onDocMouseDown);
+            this._onDocMouseDown = null;
+        }
+        if (this._onZoomPercent) {
+            this.eventBus.off(Events.UI.ZoomPercent, this._onZoomPercent);
+            this._onZoomPercent = null;
+        }
+        this.hideMenu();
         if (this.element) this.element.remove();
         this.element = null;
         this.labelEl = null;
+        this.valueEl = null;
     }
 }
 

package/src/ui/handles/GroupSelectionHandlesController.js

@@ -0,0 +1,29 @@
+export class GroupSelectionHandlesController {
+    constructor(host) {
+        this.host = host;
+    }
+
+    renderForSelection(ids) {
+        const preview = this.host._groupRotationPreview;
+        if (preview && Array.isArray(preview.ids) && preview.ids.length === ids.length) {
+            const hasSameSelection = ids.every((id) => preview.ids.includes(id));
+            if (hasSameSelection && preview.startBounds) {
+                this.host._showBounds({
+                    x: preview.center.x - preview.startBounds.width / 2,
+                    y: preview.center.y - preview.startBounds.height / 2,
+                    width: preview.startBounds.width,
+                    height: preview.startBounds.height,
+                }, '__group__', {
+                    rotation: preview.angle || 0,
+                });
+                return;
+            }
+        }
+        const worldBounds = this.host.positioningService.getGroupSelectionWorldBounds(ids);
+        if (!worldBounds) {
+            this.host.hide();
+            return;
+        }
+        this.host._showBounds(worldBounds, '__group__');
+    }
+}

package/src/ui/handles/HandlesDomRenderer.js

@@ -0,0 +1,278 @@
+import { Events } from '../../core/events/Events.js';
+import { createRotatedResizeCursor } from '../../tools/object-tools/selection/CursorController.js';
+
+const HANDLES_ACCENT_COLOR = '#80D8FF';
+
+export class HandlesDomRenderer {
+    constructor(host, rotateIconSvg) {
+        this.host = host;
+        this.rotateIconSvg = rotateIconSvg;
+    }
+
+    setHandlesVisibility(show) {
+        if (!this.host.layer) return;
+        const box = this.host.layer.querySelector('.mb-handles-box');
+        if (!box) return;
+
+        box.querySelectorAll('[data-dir]').forEach((el) => {
+            el.style.display = show ? '' : 'none';
+        });
+        box.querySelectorAll('[data-edge]').forEach((el) => {
+            el.style.display = show ? '' : 'none';
+        });
+
+        const rot = box.querySelector('[data-handle="rotate"]');
+        if (rot) rot.style.display = show ? '' : 'none';
+        if (show && !box.querySelector('[data-dir]')) {
+            this.host.update();
+        }
+    }
+
+    showBounds(worldBounds, id, options = {}) {
+        if (!this.host.layer) return;
+
+        const cssRect = this.host.positioningService.worldBoundsToCssRect(worldBounds);
+
+        let isFileTarget = false;
+        let isFrameTarget = false;
+        if (id !== '__group__') {
+            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;
+            isFileTarget = mbType === 'file';
+            isFrameTarget = mbType === 'frame';
+        }
+
+        const left = cssRect.left;
+        const top = cssRect.top;
+        const width = cssRect.width;
+        const height = cssRect.height;
+
+        this.host.layer.innerHTML = '';
+        const box = document.createElement('div');
+        box.className = 'mb-handles-box';
+
+        let rotation = options.rotation ?? 0;
+        if (id !== '__group__') {
+            const rotationData = { objectId: id, rotation: 0 };
+            this.host.eventBus.emit(Events.Tool.GetObjectRotation, rotationData);
+            rotation = rotationData.rotation || 0;
+        }
+
+        Object.assign(box.style, {
+            position: 'absolute', left: `${left}px`, top: `${top}px`,
+            width: `${width}px`, height: `${height}px`,
+            outline: `2px solid ${HANDLES_ACCENT_COLOR}`, outlineOffset: '0', borderRadius: '3px', boxSizing: 'border-box', pointerEvents: 'none',
+            transformOrigin: 'center center',
+            transform: `rotate(${rotation}deg)`,
+        });
+        this.host.layer.appendChild(box);
+        if (this.host._handlesSuppressed) {
+            this.host.visible = true;
+            return;
+        }
+
+        const mkCorner = (dir, x, y) => {
+            const cursor = createRotatedResizeCursor(dir, rotation);
+            const h = document.createElement('div');
+            h.dataset.dir = dir;
+            h.dataset.id = id;
+            h.className = 'mb-handle';
+            h.style.pointerEvents = isFileTarget ? 'none' : 'auto';
+            h.style.cursor = cursor;
+            h.style.left = `${x - 6}px`;
+            h.style.top = `${y - 6}px`;
+            h.style.display = isFileTarget ? 'none' : 'block';
+
+            const inner = document.createElement('div');
+            inner.className = 'mb-handle-inner';
+            h.appendChild(inner);
+
+            h.addEventListener('mouseenter', () => {
+                h.style.background = HANDLES_ACCENT_COLOR;
+                h.style.borderColor = HANDLES_ACCENT_COLOR;
+                h.style.cursor = cursor;
+            });
+            h.addEventListener('mouseleave', () => {
+                h.style.background = HANDLES_ACCENT_COLOR;
+                h.style.borderColor = HANDLES_ACCENT_COLOR;
+            });
+
+            if (!isFileTarget) {
+                h.addEventListener('mousedown', (e) => this.host._onHandleDown(e, box));
+            }
+
+            box.appendChild(h);
+        };
+
+        const x0 = 0;
+        const y0 = 0;
+        const x1 = width;
+        const y1 = height;
+        mkCorner('nw', x0, y0);
+        mkCorner('ne', x1, y0);
+        mkCorner('se', x1, y1);
+        mkCorner('sw', x0, y1);
+
+        const edgeSize = 10;
+        const makeEdge = (name, style, cursorHandleType) => {
+            const cursor = createRotatedResizeCursor(cursorHandleType, rotation);
+            const e = document.createElement('div');
+            e.dataset.edge = name;
+            e.dataset.id = id;
+            e.className = 'mb-edge';
+            Object.assign(e.style, style, {
+                pointerEvents: isFileTarget ? 'none' : 'auto',
+                cursor,
+                display: isFileTarget ? 'none' : 'block',
+            });
+            if (!isFileTarget) {
+                e.addEventListener('mousedown', (evt) => this.host._onEdgeResizeDown(evt));
+            }
+            box.appendChild(e);
+        };
+
+        const cornerGap = 20;
+        makeEdge('top', {
+            left: `${cornerGap}px`,
+            top: `-${edgeSize / 2}px`,
+            width: `${Math.max(0, width - 2 * cornerGap)}px`,
+            height: `${edgeSize}px`,
+        }, 'n');
+
+        makeEdge('bottom', {
+            left: `${cornerGap}px`,
+            top: `${height - edgeSize / 2}px`,
+            width: `${Math.max(0, width - 2 * cornerGap)}px`,
+            height: `${edgeSize}px`,
+        }, 's');
+
+        makeEdge('left', {
+            left: `-${edgeSize / 2}px`,
+            top: `${cornerGap}px`,
+            width: `${edgeSize}px`,
+            height: `${Math.max(0, height - 2 * cornerGap)}px`,
+        }, 'w');
+
+        makeEdge('right', {
+            left: `${width - edgeSize / 2}px`,
+            top: `${cornerGap}px`,
+            width: `${edgeSize}px`,
+            height: `${Math.max(0, height - 2 * cornerGap)}px`,
+        }, 'e');
+
+        const rotateHandle = document.createElement('div');
+        rotateHandle.dataset.handle = 'rotate';
+        rotateHandle.dataset.id = id;
+        if (isFileTarget || isFrameTarget) {
+            Object.assign(rotateHandle.style, { display: 'none', pointerEvents: 'none' });
+        } else {
+            rotateHandle.className = 'mb-rotate-handle';
+            const d = 38;
+            const L = Math.max(1, Math.hypot(width, height));
+            const centerX = -(width / L) * d;
+            const centerY = height + (height / L) * d;
+            rotateHandle.style.left = `${Math.round(centerX)}px`;
+            rotateHandle.style.top = `${Math.round(centerY - 10)}px`;
+            rotateHandle.innerHTML = this.rotateIconSvg;
+            const svgEl = rotateHandle.querySelector('svg');
+            if (svgEl) {
+                svgEl.style.width = '100%';
+                svgEl.style.height = '100%';
+                svgEl.style.display = 'block';
+            }
+            rotateHandle.addEventListener('mousedown', (e) => this.host._onRotateHandleDown(e, box));
+        }
+        box.appendChild(rotateHandle);
+
+        this.host.visible = true;
+        this.host.target = { type: id === '__group__' ? 'group' : 'single', id, bounds: worldBounds };
+    }
+
+    repositionBoxChildren(box) {
+        const width = parseFloat(box.style.width);
+        const height = parseFloat(box.style.height);
+        const cx = width / 2;
+        const cy = height / 2;
+
+        box.querySelectorAll('[data-dir]').forEach((h) => {
+            const dir = h.dataset.dir;
+            switch (dir) {
+                case 'nw':
+                    h.style.left = `${-6}px`;
+                    h.style.top = `${-6}px`;
+                    break;
+                case 'ne':
+                    h.style.left = `${Math.max(-6, width - 6)}px`;
+                    h.style.top = `${-6}px`;
+                    break;
+                case 'se':
+                    h.style.left = `${Math.max(-6, width - 6)}px`;
+                    h.style.top = `${Math.max(-6, height - 6)}px`;
+                    break;
+                case 'sw':
+                    h.style.left = `${-6}px`;
+                    h.style.top = `${Math.max(-6, height - 6)}px`;
+                    break;
+                case 'n':
+                    h.style.left = `${cx - 6}px`;
+                    h.style.top = `${-6}px`;
+                    break;
+                case 'e':
+                    h.style.left = `${Math.max(-6, width - 6)}px`;
+                    h.style.top = `${cy - 6}px`;
+                    break;
+                case 's':
+                    h.style.left = `${cx - 6}px`;
+                    h.style.top = `${Math.max(-6, height - 6)}px`;
+                    break;
+                case 'w':
+                    h.style.left = `${-6}px`;
+                    h.style.top = `${cy - 6}px`;
+                    break;
+            }
+        });
+
+        const edgeSize = 10;
+        const cornerGap = 20;
+        const top = box.querySelector('[data-edge="top"]');
+        const bottom = box.querySelector('[data-edge="bottom"]');
+        const left = box.querySelector('[data-edge="left"]');
+        const right = box.querySelector('[data-edge="right"]');
+
+        if (top) Object.assign(top.style, {
+            left: `${cornerGap}px`,
+            top: `-${edgeSize / 2}px`,
+            width: `${Math.max(0, width - 2 * cornerGap)}px`,
+            height: `${edgeSize}px`,
+        });
+        if (bottom) Object.assign(bottom.style, {
+            left: `${cornerGap}px`,
+            top: `${height - edgeSize / 2}px`,
+            width: `${Math.max(0, width - 2 * cornerGap)}px`,
+            height: `${edgeSize}px`,
+        });
+        if (left) Object.assign(left.style, {
+            left: `-${edgeSize / 2}px`,
+            top: `${cornerGap}px`,
+            width: `${edgeSize}px`,
+            height: `${Math.max(0, height - 2 * cornerGap)}px`,
+        });
+        if (right) Object.assign(right.style, {
+            left: `${width - edgeSize / 2}px`,
+            top: `${cornerGap}px`,
+            width: `${edgeSize}px`,
+            height: `${Math.max(0, height - 2 * cornerGap)}px`,
+        });
+
+        const rotateHandle = box.querySelector('[data-handle="rotate"]');
+        if (rotateHandle) {
+            const d = 20;
+            const L = Math.max(1, Math.hypot(width, height));
+            const centerX = -(width / L) * d;
+            const centerY = height + (height / L) * d;
+            rotateHandle.style.left = `${Math.round(centerX - 10)}px`;
+            rotateHandle.style.top = `${Math.round(centerY - 10)}px`;
+        }
+    }
+}

package/src/ui/handles/HandlesEventBridge.js

@@ -0,0 +1,102 @@
+import { Events } from '../../core/events/Events.js';
+
+export class HandlesEventBridge {
+    constructor(host) {
+        this.host = host;
+        this.subscriptions = [];
+        this.isAttached = false;
+    }
+
+    attach() {
+        if (this.isAttached) return;
+        this.isAttached = true;
+
+        const bindings = [
+            [Events.Tool.SelectionAdd, () => this.host.update()],
+            [Events.Tool.SelectionRemove, () => this.host.update()],
+            [Events.Tool.SelectionClear, () => {
+                this.host._endGroupRotationPreview();
+                this.host.hide();
+            }],
+            [Events.Tool.DragUpdate, () => this.host.update()],
+            [Events.Object.Deleted, (data) => {
+                const objectId = data?.objectId || data;
+                console.log('🗑️ HtmlHandlesLayer: получено событие удаления:', data, 'objectId:', objectId);
+                this.host.hide();
+                this.host.layer.innerHTML = '';
+                setTimeout(() => {
+                    this.host.update();
+                }, 10);
+            }],
+            [Events.Tool.DragStart, () => { this.host._handlesSuppressed = true; this.host._setHandlesVisibility(false); }],
+            [Events.Tool.DragEnd, () => { this.host._handlesSuppressed = false; this.host._setHandlesVisibility(true); }],
+            [Events.Tool.ResizeUpdate, () => this.host.update()],
+            [Events.Tool.ResizeStart, () => { this.host._handlesSuppressed = true; this.host._setHandlesVisibility(false); }],
+            [Events.Tool.ResizeEnd, () => { this.host._handlesSuppressed = false; this.host._setHandlesVisibility(true); }],
+            [Events.Tool.RotateUpdate, () => this.host.update()],
+            [Events.Tool.RotateStart, () => { this.host._handlesSuppressed = true; this.host._setHandlesVisibility(false); }],
+            [Events.Tool.RotateEnd, () => { this.host._handlesSuppressed = false; this.host._setHandlesVisibility(true); }],
+            [Events.Tool.GroupDragUpdate, () => {
+                this.host._syncGroupRotationPreviewTranslation();
+                this.host.update();
+            }],
+            [Events.Tool.GroupDragStart, () => { this.host._handlesSuppressed = true; this.host._setHandlesVisibility(false); }],
+            [Events.Tool.GroupDragEnd, () => { this.host._handlesSuppressed = false; this.host._setHandlesVisibility(true); }],
+            [Events.Tool.GroupResizeUpdate, (data) => {
+                this.host._updateGroupResizePreview(data);
+                this.host.update();
+            }],
+            [Events.Tool.GroupResizeStart, (data) => {
+                this.host._startGroupResizePreview(data);
+                this.host._handlesSuppressed = true;
+                this.host._setHandlesVisibility(false);
+            }],
+            [Events.Tool.GroupResizeEnd, () => {
+                this.host._finishGroupResizePreview();
+                this.host._handlesSuppressed = false;
+                this.host._setHandlesVisibility(true);
+            }],
+            [Events.Tool.GroupRotateUpdate, (data) => {
+                this.host._updateGroupRotationPreview(data);
+                this.host.update();
+            }],
+            [Events.Tool.GroupRotateStart, (data) => {
+                this.host._startGroupRotationPreview(data);
+                this.host._handlesSuppressed = true;
+                this.host._setHandlesVisibility(false);
+            }],
+            [Events.Tool.GroupRotateEnd, () => {
+                this.host._finishGroupRotationPreview();
+                this.host._handlesSuppressed = false;
+                this.host._setHandlesVisibility(true);
+                this.host.update();
+            }],
+            [Events.UI.ZoomPercent, () => this.host.update()],
+            [Events.Tool.PanUpdate, () => this.host.update()],
+            [Events.History.Changed, (data) => {
+                if (data?.lastUndone || data?.lastRedone) {
+                    this.host._endGroupRotationPreview();
+                    this.host.update();
+                }
+            }],
+        ];
+
+        bindings.forEach(([event, handler]) => {
+            this.host.eventBus.on(event, handler);
+            this.subscriptions.push([event, handler]);
+        });
+    }
+
+    detach() {
+        if (!this.isAttached) return;
+        this.isAttached = false;
+        if (typeof this.host.eventBus?.off !== 'function') {
+            this.subscriptions = [];
+            return;
+        }
+        this.subscriptions.forEach(([event, handler]) => {
+            this.host.eventBus.off(event, handler);
+        });
+        this.subscriptions = [];
+    }
+}