@sequent-org/moodboard 1.4.30 → 1.4.32

package/src/ui/HtmlTextLayer.js

@@ -1,6 +1,21 @@
+import gsap from 'gsap';
+import { CustomEase } from 'gsap/CustomEase';
 import { Events } from '../core/events/Events.js';
 import * as PIXI from 'pixi.js';
 
+gsap.registerPlugin(CustomEase);
+const TEXT_HOVER_EASE = 'hoverLiftSpring';
+CustomEase.create(TEXT_HOVER_EASE, 'M0,0 C0.215,0.61 0.355,1 0.71,1.56 0.89,1.72 1,1 1,1');
+
+const TEXT_HOVER_TY  = -2;   // screen-px вверх
+const TEXT_HOVER_SC  = 1.06; // масштаб «маленький» пресет
+const TEXT_HOVER_DUR = 0.22;
+const TEXT_BACK_DUR  = 0.18;
+
+const prefersReducedMotion =
+    typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
 /**
  * HtmlTextLayer — рисует текст как HTML-элементы поверх PIXI для максимальной чёткости
  * Синхронизирует позицию/размер/масштаб с миром (worldLayer) и состоянием объектов
@@ -12,6 +27,14 @@ export class HtmlTextLayer {
         this.core = core; // CoreMoodBoard, нужен доступ к pixi/state
         this.layer = null;
         this.idToEl = new Map();
+
+        // hover-lift state: objectId -> { ty: 0, sc: 1 }
+        this._hoverStates = new Map();
+        this._hoveredTextId = null;
+        this._selectedIds = new Set();
+        // objectId -> { rect, onOver, onOut } — слушатели PIXI pointer на хит-rect текста
+        this._pixiHoverHandlers = new Map();
+        this._transformActive = false;
     }
 
     attach() {
@@ -157,10 +180,63 @@ export class HtmlTextLayer {
             ids.forEach(id => this.updateOne(id));
         });
 
+        // Hover-lift текста управляется PIXI pointerover/pointerout прямо на хит-rect
+        // текста (см. _ensurePixiHover). Events.Object.Hover для текста ненадёжен:
+        // он зависит от активного инструмента и hit-test пути и не доходит стабильно.
+
+        // Блокировка hover во время drag/resize/rotate (как в HoverLiftController)
+        this._onTransformStart = () => {
+            this._transformActive = true;
+            if (this._hoveredTextId) {
+                const id = this._hoveredTextId;
+                this._hoveredTextId = null;
+                this._animTextHoverOut(id);
+            }
+        };
+        this._onTransformEnd = () => { this._transformActive = false; };
+        this.eventBus.on(Events.Tool.DragStart, this._onTransformStart);
+        this.eventBus.on(Events.Tool.GroupDragStart, this._onTransformStart);
+        this.eventBus.on(Events.Tool.DragEnd, this._onTransformEnd);
+        this.eventBus.on(Events.Tool.GroupDragEnd, this._onTransformEnd);
+        this.eventBus.on(Events.Tool.ResizeStart, this._onTransformStart);
+        this.eventBus.on(Events.Tool.GroupResizeStart, this._onTransformStart);
+        this.eventBus.on(Events.Tool.ResizeEnd, this._onTransformEnd);
+        this.eventBus.on(Events.Tool.GroupResizeEnd, this._onTransformEnd);
+        this.eventBus.on(Events.Tool.RotateStart, this._onTransformStart);
+        this.eventBus.on(Events.Tool.GroupRotateStart, this._onTransformStart);
+        this.eventBus.on(Events.Tool.RotateEnd, this._onTransformEnd);
+        this.eventBus.on(Events.Tool.GroupRotateEnd, this._onTransformEnd);
+
+        // Отслеживаем выделение, чтобы не показывать hover у выделенных объектов
+        this._onSelectionAdd = (data) => {
+            const id = data?.object ?? data?.objectId ?? data?.id ?? data;
+            if (id) {
+                this._selectedIds.add(String(id));
+                if (this._hoveredTextId === String(id)) {
+                    this._hoveredTextId = null;
+                    this._animTextHoverOut(String(id));
+                }
+            }
+        };
+        this._onSelectionRemove = (data) => {
+            const id = data?.object ?? data?.objectId ?? data?.id ?? data;
+            if (id) this._selectedIds.delete(String(id));
+        };
+        this._onSelectionClear = () => { this._selectedIds.clear(); };
+        this.eventBus.on(Events.Tool.SelectionAdd, this._onSelectionAdd);
+        this.eventBus.on(Events.Tool.SelectionRemove, this._onSelectionRemove);
+        this.eventBus.on(Events.Tool.SelectionClear, this._onSelectionClear);
+
         // Первичная отрисовка
         this.rebuildFromState();
         this.updateAll();
 
+        // После загрузки веб-шрифтов переизмеряем все боксы: до swap шрифта scrollHeight
+        // фиксируется по fallback-метрикам, после — по реальным глифам.
+        if (typeof document !== 'undefined' && document.fonts && document.fonts.ready) {
+            document.fonts.ready.then(() => this.updateAll()).catch(() => {});
+        }
+
         // Хелпер: при каждом обновлении ручек — обновляем HTML блок
         const world = this.core?.pixi?.worldLayer || this.core?.pixi?.app?.stage;
         if (world) {
@@ -172,6 +248,33 @@ export class HtmlTextLayer {
         if (this.layer) this.layer.remove();
         this.layer = null;
         this.idToEl.clear();
+        // Убиваем все hover-твины и отцепляем PIXI pointer-слушатели
+        for (const state of this._hoverStates.values()) gsap.killTweensOf(state);
+        this._hoverStates.clear();
+        for (const id of [...this._pixiHoverHandlers.keys()]) this._detachPixiHover(id);
+        this._hoveredTextId = null;
+        // Отписываемся от событий
+        if (this.eventBus) {
+            if (this._onTransformStart) {
+                this.eventBus.off(Events.Tool.DragStart, this._onTransformStart);
+                this.eventBus.off(Events.Tool.GroupDragStart, this._onTransformStart);
+                this.eventBus.off(Events.Tool.ResizeStart, this._onTransformStart);
+                this.eventBus.off(Events.Tool.GroupResizeStart, this._onTransformStart);
+                this.eventBus.off(Events.Tool.RotateStart, this._onTransformStart);
+                this.eventBus.off(Events.Tool.GroupRotateStart, this._onTransformStart);
+            }
+            if (this._onTransformEnd) {
+                this.eventBus.off(Events.Tool.DragEnd, this._onTransformEnd);
+                this.eventBus.off(Events.Tool.GroupDragEnd, this._onTransformEnd);
+                this.eventBus.off(Events.Tool.ResizeEnd, this._onTransformEnd);
+                this.eventBus.off(Events.Tool.GroupResizeEnd, this._onTransformEnd);
+                this.eventBus.off(Events.Tool.RotateEnd, this._onTransformEnd);
+                this.eventBus.off(Events.Tool.GroupRotateEnd, this._onTransformEnd);
+            }
+            if (this._onSelectionAdd) this.eventBus.off(Events.Tool.SelectionAdd, this._onSelectionAdd);
+            if (this._onSelectionRemove) this.eventBus.off(Events.Tool.SelectionRemove, this._onSelectionRemove);
+            if (this._onSelectionClear) this.eventBus.off(Events.Tool.SelectionClear, this._onSelectionClear);
+        }
     }
 
     rebuildFromState() {
@@ -221,8 +324,7 @@ export class HtmlTextLayer {
         el.style.backgroundColor = backgroundColor === 'transparent' ? '' : backgroundColor;
         el.style.lineHeight = `${baseLineHeight}px`;
         // Выравнивание рендеринга с textarea
-        el.style.whiteSpace = 'pre-wrap';
-        el.style.wordBreak = 'break-word';
+        el.style.whiteSpace = 'pre';
         el.style.overflow = 'visible';
         el.style.letterSpacing = '0px';
         el.style.fontKerning = 'normal';
@@ -240,6 +342,9 @@ export class HtmlTextLayer {
         this.layer.appendChild(el);
         this.idToEl.set(objectId, el);
         
+        // Инициализируем hover-состояние
+        this._hoverStates.set(objectId, { ty: 0, sc: 1 });
+        
         console.log(`🔍 HtmlTextLayer: HTML-элемент создан и добавлен в DOM:`, el);
     }
 
@@ -247,6 +352,12 @@ export class HtmlTextLayer {
         const el = this.idToEl.get(objectId);
         if (el) el.remove();
         this.idToEl.delete(objectId);
+        // Убиваем возможный активный твин и чистим состояние
+        const state = this._hoverStates.get(objectId);
+        if (state) gsap.killTweensOf(state);
+        this._hoverStates.delete(objectId);
+        this._detachPixiHover(objectId);
+        if (this._hoveredTextId === objectId) this._hoveredTextId = null;
     }
 
     updateAll() {
@@ -257,7 +368,10 @@ export class HtmlTextLayer {
     updateOne(objectId) {
         const el = this.idToEl.get(objectId);
         if (!el || !this.core) return;
-        
+
+        // Лениво вешаем PIXI pointer-слушатели на хит-rect текста (он уже создан к моменту updateOne)
+        this._ensurePixiHover(objectId);
+
         console.log(`🔍 HtmlTextLayer: обновляю позицию для текста ${objectId}`);
 
         const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
@@ -365,9 +479,16 @@ export class HtmlTextLayer {
             logLeft = left;
             logTop = top;
         }
-        // Поворот вокруг центра (как у PIXI и HTML-ручек)
+        // Поворот вокруг центра (как у PIXI и HTML-ручек); hover-lift добавляется сверху
+        const hover = this._hoverStates.get(objectId);
+        const hoverTy = hover?.ty ?? 0;
+        const hoverSc = hover?.sc ?? 1;
+        const hoverPart = (Math.abs(hoverTy) > 0.001 || Math.abs(hoverSc - 1) > 0.001)
+            ? `translate3d(0, ${hoverTy}px, 0) scale(${hoverSc})`
+            : '';
+        const rotatePart = angle ? `rotate(${angle}deg)` : '';
         el.style.transformOrigin = 'center center';
-        el.style.transform = angle ? `rotate(${angle}deg)` : '';
+        el.style.transform = [hoverPart, rotatePart].filter(Boolean).join(' ');
         // Текст
         const content = obj.content || obj.properties?.content;
         if (typeof content === 'string') {
@@ -375,6 +496,25 @@ export class HtmlTextLayer {
             console.log(`🔍 HtmlTextLayer: содержимое обновлено в updateOne для ${objectId}:`, content);
         }
 
+        // Гарантируем, что рамка не прилипает к тексту справа: ширина блока всегда
+        // не меньше реальной ширины текста + правый отступ. Слой ручек строит рамку
+        // по getBoundingClientRect этого .mb-text, поэтому запас распространяется и на неё.
+        // Применяем ко всем объектам (в т.ч. старым, сохранённым без запаса) и независимо
+        // от шрифта. Без поворота: width:auto у absolute-элемента = ширина контента.
+        try {
+            const hasContent = !!(el.textContent && el.textContent.trim());
+            if (hasContent && !angle) {
+                const rightMargin = Math.ceil(fontSizePx * 0.7) + 6;
+                const prevWidth = el.style.width;
+                el.style.width = 'auto';
+                const contentW = Math.ceil(el.scrollWidth);
+                const stateWcss = parseFloat(prevWidth) || logWidth || 0;
+                const finalW = Math.max(stateWcss, contentW + rightMargin);
+                el.style.width = `${finalW}px`;
+                logWidth = finalW;
+            }
+        } catch (_) {}
+
         // Гарантируем, что высота соответствует контенту (особенно после смены font-size)
         try {
             el.style.height = 'auto';
@@ -399,6 +539,73 @@ export class HtmlTextLayer {
         });
     }
 
+    /** Лениво вешает pointerover/pointerout на PIXI хит-rect текста */
+    _ensurePixiHover(objectId) {
+        if (this._pixiHoverHandlers.has(objectId)) return;
+        const rect = this.core?.pixi?.objects?.get ? this.core.pixi.objects.get(objectId) : null;
+        if (!rect || typeof rect.on !== 'function') return;
+
+        const onOver = () => this._onTextPointerOver(objectId);
+        const onOut = () => this._onTextPointerOut(objectId);
+        rect.on('pointerover', onOver);
+        rect.on('pointerout', onOut);
+        this._pixiHoverHandlers.set(objectId, { rect, onOver, onOut });
+    }
+
+    _detachPixiHover(objectId) {
+        const h = this._pixiHoverHandlers.get(objectId);
+        if (!h) return;
+        try {
+            h.rect.off('pointerover', h.onOver);
+            h.rect.off('pointerout', h.onOut);
+        } catch (_) {}
+        this._pixiHoverHandlers.delete(objectId);
+    }
+
+    _onTextPointerOver(objectId) {
+        if (prefersReducedMotion) return;
+        if (this._transformActive) return;
+        if (this._selectedIds.has(objectId) || this._selectedIds.has(String(objectId))) return;
+        if (this._hoveredTextId === objectId) return;
+        this._hoveredTextId = objectId;
+        this._animTextHoverIn(objectId);
+    }
+
+    _onTextPointerOut(objectId) {
+        if (this._hoveredTextId === objectId) this._hoveredTextId = null;
+        this._animTextHoverOut(objectId);
+    }
+
+    _animTextHoverIn(objectId) {
+        if (prefersReducedMotion) return;
+        const state = this._hoverStates.get(objectId);
+        if (!state) return;
+        gsap.killTweensOf(state);
+        gsap.to(state, {
+            ty: TEXT_HOVER_TY,
+            sc: TEXT_HOVER_SC,
+            duration: TEXT_HOVER_DUR,
+            ease: TEXT_HOVER_EASE,
+            onUpdate: () => this.updateOne(objectId),
+            onComplete: () => this.updateOne(objectId),
+        });
+    }
+
+    _animTextHoverOut(objectId) {
+        if (prefersReducedMotion) return;
+        const state = this._hoverStates.get(objectId);
+        if (!state) return;
+        gsap.killTweensOf(state);
+        gsap.to(state, {
+            ty: 0,
+            sc: 1,
+            duration: TEXT_BACK_DUR,
+            ease: 'power2.out',
+            onUpdate: () => this.updateOne(objectId),
+            onComplete: () => this.updateOne(objectId),
+        });
+    }
+
     _autoFitTextHeight(objectId) {
         const el = this.idToEl.get(objectId);
         if (!el || !this.core) return;

package/src/ui/animation/HoverLiftController.js

@@ -0,0 +1,395 @@
+import gsap from 'gsap';
+import { CustomEase } from 'gsap/CustomEase';
+import * as PIXI from 'pixi.js';
+import { DropShadowFilter } from '@pixi/filter-drop-shadow';
+import { Events } from '../../core/events/Events.js';
+
+gsap.registerPlugin(CustomEase);
+
+/**
+ * Фирменная упругая hover-анимация для PIXI-объектов.
+ * Канон: cubic-bezier(0.34, 1.56, 0.64, 1), 0.22s.
+ * Пресет «Большие» (≥120×80): translateY −4px/scale 1.02.
+ * Пресет «Маленькие»: translateY −2px/scale 1.06.
+ * Подъём задаётся в screen-space: world-offset = px / worldScale.
+ */
+
+const EASE_ID = 'hoverLiftSpring';
+CustomEase.create(EASE_ID, 'M0,0 C0.215,0.61 0.355,1 0.71,1.56 0.89,1.72 1,1 1,1');
+
+const DURATION = 0.22;
+const DURATION_BACK = 0.18;
+
+/** Проверяем один раз при инициализации — дальше кэшируем */
+const prefersReducedMotion =
+    typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+/**
+ * Выбирает пресет по размеру объекта.
+ * @param {number} w
+ * @param {number} h
+ * @returns {{ liftPx: number, scaleMul: number }}
+ */
+function getPreset(w, h) {
+    if (w >= 120 && h >= 80) {
+        return { liftPx: 4, scaleMul: 1.02 };
+    }
+    return { liftPx: 2, scaleMul: 1.06 };
+}
+
+/** Пиковые значения тени на hover (одинаковы для всех объектов) */
+const HOVER_ALPHA = 0.28;
+const HOVER_DISTANCE = 14;
+
+/** Базовая (покойная) тень для изображений — создаёт эффект объёма */
+const IMAGE_REST_ALPHA = 0.18;
+const IMAGE_REST_DISTANCE = 6;
+
+/**
+ * Создаёт DropShadowFilter с начальными параметрами.
+ * @param {number} restAlpha — начальная альфа (0 для обычных, >0 для изображений)
+ * @param {number} restDistance
+ */
+function createShadowFilter(restAlpha = 0, restDistance = 8) {
+    const f = new DropShadowFilter({
+        alpha: restAlpha,
+        blur: 6,
+        distance: restDistance,
+        angle: 90,
+        quality: 3,
+    });
+    // Явно устанавливаем resolution, чтобы _updatePadding() не обращался
+    // к deprecated settings.FILTER_RESOLUTION при каждом изменении distance
+    const dpr = typeof window !== 'undefined' ? (window.devicePixelRatio || 1) : 1;
+    f.resolution = dpr;
+    f.multisample = PIXI.MSAA_QUALITY.HIGH;
+    return f;
+}
+
+export class HoverLiftController {
+    /**
+     * @param {import('../../core/EventBus.js').EventBus} eventBus
+     * @param {import('pixi.js').Application} pixiApp  — для доступа к worldLayer.scale
+     */
+    constructor(eventBus, pixiApp) {
+        this._eventBus = eventBus;
+        this._pixiApp = pixiApp;
+
+        /** Map<pixiObject, { baseScaleX, baseScaleY, baseY, shadow, isHovered, tween }> */
+        this._entries = new Map();
+
+        /** Флаги блокировки hover */
+        this._isDragging = false;
+        this._isResizing = false;
+        this._isRotating = false;
+        /** Set<id> — выделенные объекты (по _mb.objectId) */
+        this._selectedIds = new Set();
+
+        this._bindEvents();
+    }
+
+    // ─── Публичный API ────────────────────────────────────────────────────────
+
+    /**
+     * Подключить hover-lift к PIXI-объекту.
+     * @param {import('pixi.js').DisplayObject} pixiObject
+     * @param {{ width?: number, height?: number }} objectData
+     */
+    attach(pixiObject, objectData) {
+        if (!pixiObject || this._entries.has(pixiObject)) return;
+
+        const type = pixiObject._mb?.type || objectData?.type;
+        // text/simple-text рендерятся как HTML-элементы (HtmlTextLayer).
+        // Для них hover-lift управляется через MindmapHtmlTextLayer/_ensurePixiHover.
+        // mindmap: PIXI-капсула получает подъём через HoverLiftController; HTML-текст
+        // синхронизируется через MindmapHtmlTextLayer._ensurePixiHover (те же pointerover/out).
+        if (type === 'text' || type === 'simple-text') return;
+        const hasStaticShadow = type === 'image' || type === 'frame';
+        const restAlpha = hasStaticShadow ? IMAGE_REST_ALPHA : 0;
+        const restDistance = hasStaticShadow ? IMAGE_REST_DISTANCE : 8;
+        // Фрейм — крупный структурный контейнер. Hover-«pop» (scale + подъём)
+        // на нём бессмысленен и создаёт видимый скачок в переходе hover→resize/drag:
+        // объект приподнимается на hover, а в момент нажатия мгновенно
+        // возвращается к базе. Оставляем фрейму только статичную тень, без подъёма.
+        const liftEnabled = type !== 'frame';
+
+        const shadow = createShadowFilter(restAlpha, restDistance);
+        pixiObject.filters = [...(pixiObject.filters || []), shadow];
+
+        const entry = {
+            baseScaleX: pixiObject.scale?.x ?? 1,
+            baseScaleY: pixiObject.scale?.y ?? 1,
+            baseY: pixiObject.y,
+            shadow,
+            restAlpha,
+            restDistance,
+            isHovered: false,
+            tween: null,
+        };
+        this._entries.set(pixiObject, entry);
+
+        if (!liftEnabled) return;
+
+        const w = objectData?.width ?? objectData?.properties?.width ?? 100;
+        const h = objectData?.height ?? objectData?.properties?.height ?? 100;
+        const preset = getPreset(w, h);
+
+        const onOver = () => this._onOver(pixiObject, preset, entry);
+        const onOut = () => this._onOut(pixiObject, preset, entry);
+
+        pixiObject.on('pointerover', onOver);
+        pixiObject.on('pointerout', onOut);
+
+        entry._onOver = onOver;
+        entry._onOut = onOut;
+    }
+
+    /**
+     * Отключить hover-lift и убить все твины.
+     * @param {import('pixi.js').DisplayObject} pixiObject
+     */
+    detach(pixiObject) {
+        const entry = this._entries.get(pixiObject);
+        if (!entry) return;
+
+        if (entry._onOver) pixiObject.off('pointerover', entry._onOver);
+        if (entry._onOut) pixiObject.off('pointerout', entry._onOut);
+
+        if (entry.tween) entry.tween.kill();
+
+        // Убираем наш фильтр из списка
+        if (pixiObject.filters) {
+            pixiObject.filters = pixiObject.filters.filter(f => f !== entry.shadow);
+        }
+        entry.shadow.destroy?.();
+
+        // Сбрасываем до базовых значений
+        if (pixiObject.scale) {
+            pixiObject.scale.set(entry.baseScaleX, entry.baseScaleY);
+        }
+        pixiObject.y = entry.baseY;
+
+        this._entries.delete(pixiObject);
+    }
+
+    /** Обновить базовые значения после внешнего resize/move */
+    syncBase(pixiObject) {
+        const entry = this._entries.get(pixiObject);
+        if (!entry || entry.isHovered) return;
+        entry.baseScaleX = pixiObject.scale?.x ?? entry.baseScaleX;
+        entry.baseScaleY = pixiObject.scale?.y ?? entry.baseScaleY;
+        entry.baseY = pixiObject.y;
+    }
+
+    destroy() {
+        this._unbindEvents();
+        for (const [pixiObject] of this._entries) {
+            this.detach(pixiObject);
+        }
+        this._entries.clear();
+    }
+
+    // ─── Внутренние методы ────────────────────────────────────────────────────
+
+    /** Текущий масштаб worldLayer (≈ zoom уровень) */
+    _worldScale() {
+        const world = this._pixiApp?.stage?.children?.find(c => c.name === 'worldLayer');
+        return world?.scale?.x ?? 1;
+    }
+
+    /** Можно ли сейчас показывать hover */
+    _isBlocked(pixiObject) {
+        if (this._isDragging || this._isResizing || this._isRotating) return true;
+        const id = pixiObject._mb?.objectId;
+        if (id && this._selectedIds.has(id)) return true;
+        return false;
+    }
+
+    _onOver(pixiObject, preset, entry) {
+        if (prefersReducedMotion || this._isBlocked(pixiObject)) return;
+        if (entry.isHovered) return;
+
+        // Базовый scale/y фиксируем в момент наведения, пока объект в покое
+        // (нет активного твина). Это снимает гонку с отложенной загрузкой
+        // текстуры (ImageObject.fitToSize ставит scale уже после attach):
+        // иначе baseScale остаётся 1 и спрайт «раздувается» до натурального
+        // размера текстуры вместо ×1.02.
+        if (!entry.tween) {
+            entry.baseScaleX = pixiObject.scale?.x ?? entry.baseScaleX;
+            entry.baseScaleY = pixiObject.scale?.y ?? entry.baseScaleY;
+            entry.baseY = pixiObject.y;
+        }
+
+        entry.isHovered = true;
+        if (entry.tween) entry.tween.kill();
+
+        const zoom = this._worldScale();
+        const worldLift = preset.liftPx / zoom;
+
+        entry.tween = gsap.to(pixiObject, {
+            duration: DURATION,
+            ease: EASE_ID,
+            y: entry.baseY - worldLift,
+            onUpdate: () => {
+                if (pixiObject.scale) {
+                    const t = entry.tween?.progress() ?? 1;
+                    const scaleX = entry.baseScaleX + (entry.baseScaleX * (preset.scaleMul - 1)) * t;
+                    const scaleY = entry.baseScaleY + (entry.baseScaleY * (preset.scaleMul - 1)) * t;
+                    pixiObject.scale.set(scaleX, scaleY);
+                }
+                const t = entry.tween?.progress() ?? 1;
+                entry.shadow.alpha = entry.restAlpha + (HOVER_ALPHA - entry.restAlpha) * t;
+                entry.shadow.distance = entry.restDistance + (HOVER_DISTANCE - entry.restDistance) * t;
+            },
+            onComplete: () => {
+                if (pixiObject.scale) {
+                    pixiObject.scale.set(
+                        entry.baseScaleX * preset.scaleMul,
+                        entry.baseScaleY * preset.scaleMul
+                    );
+                }
+                entry.shadow.alpha = HOVER_ALPHA;
+                entry.shadow.distance = HOVER_DISTANCE;
+            },
+        });
+    }
+
+    _onOut(pixiObject, preset, entry) {
+        if (prefersReducedMotion) return;
+        if (!entry.isHovered) return;
+        entry.isHovered = false;
+        if (entry.tween) entry.tween.kill();
+
+        entry.tween = gsap.to(pixiObject, {
+            duration: DURATION_BACK,
+            ease: 'power2.out',
+            y: entry.baseY,
+            onUpdate: () => {
+                if (pixiObject.scale) {
+                    const p = 1 - (entry.tween?.progress() ?? 0);
+                    const scaleX = entry.baseScaleX + (entry.baseScaleX * (preset.scaleMul - 1)) * p;
+                    const scaleY = entry.baseScaleY + (entry.baseScaleY * (preset.scaleMul - 1)) * p;
+                    pixiObject.scale.set(scaleX, scaleY);
+                }
+                const p = 1 - (entry.tween?.progress() ?? 0);
+                entry.shadow.alpha = entry.restAlpha + (HOVER_ALPHA - entry.restAlpha) * p;
+                entry.shadow.distance = entry.restDistance + (HOVER_DISTANCE - entry.restDistance) * p;
+            },
+            onComplete: () => {
+                if (pixiObject.scale) {
+                    pixiObject.scale.set(entry.baseScaleX, entry.baseScaleY);
+                }
+                entry.shadow.alpha = entry.restAlpha;
+                entry.shadow.distance = entry.restDistance;
+                pixiObject.y = entry.baseY;
+                entry.tween = null;
+            },
+        });
+    }
+
+    /** Немедленно сбросить hover без анимации для всех объектов */
+    _snapBackAll() {
+        for (const [pixiObject, entry] of this._entries) {
+            // Сбрасываем не только наведённые, но и объекты с ещё живым твином:
+            // возвратный _onOut-твин имеет isHovered=false, но продолжает писать
+            // pixiObject.y/scale каждый кадр и иначе конкурировал бы с resize/drag.
+            if (!entry.isHovered && !entry.tween) continue;
+            if (entry.tween) entry.tween.kill();
+            entry.tween = null;
+            entry.isHovered = false;
+            pixiObject.y = entry.baseY;
+            if (pixiObject.scale) {
+                pixiObject.scale.set(entry.baseScaleX, entry.baseScaleY);
+            }
+            entry.shadow.alpha = entry.restAlpha;
+            entry.shadow.distance = entry.restDistance;
+        }
+    }
+
+    /** Немедленно сбросить hover для объекта с конкретным objectId */
+    _snapBackById(objectId) {
+        const id = String(objectId);
+        for (const [pixiObject, entry] of this._entries) {
+            if (String(pixiObject._mb?.objectId) !== id) continue;
+            if (!entry.isHovered && !entry.tween) continue;
+            if (entry.tween) entry.tween.kill();
+            entry.tween = null;
+            entry.isHovered = false;
+            pixiObject.y = entry.baseY;
+            if (pixiObject.scale) {
+                pixiObject.scale.set(entry.baseScaleX, entry.baseScaleY);
+            }
+            entry.shadow.alpha = entry.restAlpha;
+            entry.shadow.distance = entry.restDistance;
+        }
+    }
+
+    _bindEvents() {
+        const eb = this._eventBus;
+        if (!eb) return;
+
+        this._onDragStart = () => { this._isDragging = true; this._snapBackAll(); };
+        this._onDragEnd = () => { this._isDragging = false; };
+        this._onResizeStart = () => { this._isResizing = true; this._snapBackAll(); };
+        this._onResizeEnd = () => { this._isResizing = false; };
+        this._onRotateStart = () => { this._isRotating = true; this._snapBackAll(); };
+        this._onRotateEnd = () => { this._isRotating = false; };
+
+        this._onSelectionAdd = (data) => {
+            const id = data?.object ?? data?.objectId ?? data?.id ?? data;
+            if (id) {
+                this._selectedIds.add(String(id));
+                this._snapBackById(id);
+            }
+        };
+        this._onSelectionRemove = (data) => {
+            const id = data?.object ?? data?.objectId ?? data?.id ?? data;
+            if (id) this._selectedIds.delete(String(id));
+        };
+        this._onSelectionClear = () => { this._selectedIds.clear(); };
+
+        eb.on(Events.Tool.DragStart, this._onDragStart);
+        eb.on(Events.Tool.GroupDragStart, this._onDragStart);
+        eb.on(Events.Tool.DragEnd, this._onDragEnd);
+        eb.on(Events.Tool.GroupDragEnd, this._onDragEnd);
+
+        eb.on(Events.Tool.ResizeStart, this._onResizeStart);
+        eb.on(Events.Tool.GroupResizeStart, this._onResizeStart);
+        eb.on(Events.Tool.ResizeEnd, this._onResizeEnd);
+        eb.on(Events.Tool.GroupResizeEnd, this._onResizeEnd);
+
+        eb.on(Events.Tool.RotateStart, this._onRotateStart);
+        eb.on(Events.Tool.GroupRotateStart, this._onRotateStart);
+        eb.on(Events.Tool.RotateEnd, this._onRotateEnd);
+        eb.on(Events.Tool.GroupRotateEnd, this._onRotateEnd);
+
+        eb.on(Events.Tool.SelectionAdd, this._onSelectionAdd);
+        eb.on(Events.Tool.SelectionRemove, this._onSelectionRemove);
+        eb.on(Events.Tool.SelectionClear, this._onSelectionClear);
+    }
+
+    _unbindEvents() {
+        const eb = this._eventBus;
+        if (!eb) return;
+
+        eb.off(Events.Tool.DragStart, this._onDragStart);
+        eb.off(Events.Tool.GroupDragStart, this._onDragStart);
+        eb.off(Events.Tool.DragEnd, this._onDragEnd);
+        eb.off(Events.Tool.GroupDragEnd, this._onDragEnd);
+
+        eb.off(Events.Tool.ResizeStart, this._onResizeStart);
+        eb.off(Events.Tool.GroupResizeStart, this._onResizeStart);
+        eb.off(Events.Tool.ResizeEnd, this._onResizeEnd);
+        eb.off(Events.Tool.GroupResizeEnd, this._onResizeEnd);
+
+        eb.off(Events.Tool.RotateStart, this._onRotateStart);
+        eb.off(Events.Tool.GroupRotateStart, this._onRotateStart);
+        eb.off(Events.Tool.RotateEnd, this._onRotateEnd);
+        eb.off(Events.Tool.GroupRotateEnd, this._onRotateEnd);
+
+        eb.off(Events.Tool.SelectionAdd, this._onSelectionAdd);
+        eb.off(Events.Tool.SelectionRemove, this._onSelectionRemove);
+        eb.off(Events.Tool.SelectionClear, this._onSelectionClear);
+    }
+}