@sequent-org/moodboard 1.4.32 → 1.4.33

package/src/ui/connectors/ConnectorLayer.js

@@ -1,19 +1,60 @@
 import * as PIXI from 'pixi.js';
 import { Events } from '../../core/events/Events.js';
 import { ConnectorBindingResolver, distanceToSegment } from '../../services/ConnectorBindingResolver.js';
+import { buildPath, bezierControlPoints, sampleBezier, BEZIER_SAMPLES } from '../../services/ConnectorRouter.js';
 
 const HIT_TEST_SCREEN_PX = 8;
-const ARROW_LEN   = 12;
-const ARROW_HALF  = 4;
-const DASH_LEN    = 8;
-const GAP_LEN     = 5;
+const ARROW_LEN      = 12;
+const ARROW_HALF     = 5;
+const DASH_LEN       = 8;
+const GAP_LEN        = 5;
+const ELBOW_RADIUS   = 8;
+const CIRCLE_R       = 4;
+const DIAMOND_HALF   = 5;
+
+/** Сколько пикселей отступить от кончика маркера, чтобы линия не заходила внутрь него. */
+function getHeadSetback(kind) {
+    if (kind === 'arrow')    return ARROW_LEN;
+    if (kind === 'triangle') return ARROW_LEN;
+    if (kind === 'circle')   return CIRCLE_R * 2;
+    if (kind === 'diamond')  return DIAMOND_HALF * 2;
+    return 0;
+}
 
 function asArray(value) {
     return Array.isArray(value) ? value : [];
 }
 
+/** Возвращает центр объекта (world) или свободную точку терминала. */
+function getObjectCenter(terminal, target) {
+    if (!terminal?.boundId) {
+        return { x: terminal?.point?.x ?? 0, y: terminal?.point?.y ?? 0 };
+    }
+    if (!target) return { x: 0, y: 0 };
+    const left = target.position?.x ?? 0;
+    const top  = target.position?.y ?? 0;
+    const w    = target.width  ?? target.properties?.width  ?? 0;
+    const h    = target.height ?? target.properties?.height ?? 0;
+    return { x: left + w / 2, y: top + h / 2 };
+}
+
+/** Нормализует HeadKind: boolean (обратная совместимость) → строка. */
+function normalizeHeadKind(value) {
+    if (value === true)  return 'arrow';
+    if (value === false) return 'none';
+    return typeof value === 'string' ? value : 'none';
+}
+
+function normalizeHead(head) {
+    if (!head) return { start: 'none', end: 'arrow' };
+    return {
+        start: normalizeHeadKind(head.start),
+        end:   normalizeHeadKind(head.end),
+    };
+}
+
 /**
- * Рисует пунктирную линию через последовательность moveTo/lineTo.
+ * Пунктирная линия по одному отрезку.
  * @param {PIXI.Graphics} g
  */
 function drawDashedLine(g, x1, y1, x2, y2) {
@@ -42,39 +83,141 @@ function drawDashedLine(g, x1, y1, x2, y2) {
 }
 
 /**
- * Рисует треугольный наконечник стрелки в точке `to`, направление from→to.
- * Вызывать после g.lineStyle(0) не нужно — сбрасывает линию сам.
+ * Рисует наконечник стрелки в tipPt, направление fromPt→tipPt.
+ *
  * @param {PIXI.Graphics} g
- * @param {{ x: number, y: number }} from
- * @param {{ x: number, y: number }} to
- * @param {number} color  PIXI-цвет
+ * @param {{ x:number, y:number }} fromPt  предпоследняя точка
+ * @param {{ x:number, y:number }} tipPt   кончик
+ * @param {number} color   PIXI-цвет
+ * @param {string} kind    HeadKind: 'none'|'arrow'|'triangle'|'circle'|'diamond'
+ * @param {number} lineWidth  толщина линии коннектора (для согласованной толщины наконечника)
  */
-function drawArrow(g, from, to, color) {
-    const dx  = to.x - from.x;
-    const dy  = to.y - from.y;
+function drawHead(g, fromPt, tipPt, color, kind, lineWidth = 2) {
+    if (kind === 'none') return;
+    const dx  = tipPt.x - fromPt.x;
+    const dy  = tipPt.y - fromPt.y;
     const len = Math.hypot(dx, dy);
     if (len < 1e-6) return;
     const ux = dx / len;
     const uy = dy / len;
-    // перпендикуляр
     const px = -uy;
     const py =  ux;
-    const bx = to.x - ux * ARROW_LEN;
-    const by = to.y - uy * ARROW_LEN;
+
     g.lineStyle(0);
-    g.beginFill(color, 1);
-    g.drawPolygon([
-        Math.round(to.x),               Math.round(to.y),
-        Math.round(bx + px * ARROW_HALF), Math.round(by + py * ARROW_HALF),
-        Math.round(bx - px * ARROW_HALF), Math.round(by - py * ARROW_HALF),
-    ]);
-    g.endFill();
+
+    if (kind === 'arrow') {
+        // Единый штрих крыло→кончик→крыло: round-join даёт чистый острый кончик,
+        // round-cap — аккуратные концы крыльев. Толщина = толщине линии.
+        const bx = tipPt.x - ux * ARROW_LEN;
+        const by = tipPt.y - uy * ARROW_LEN;
+        const w  = Math.max(2, lineWidth + 0.5);
+        try {
+            g.lineStyle({ width: w, color, alpha: 1, cap: 'round', join: 'round' });
+        } catch (_) {
+            g.lineStyle(w, color, 1);
+        }
+        g.moveTo(Math.round(bx + px * ARROW_HALF), Math.round(by + py * ARROW_HALF));
+        g.lineTo(Math.round(tipPt.x), Math.round(tipPt.y));
+        g.lineTo(Math.round(bx - px * ARROW_HALF), Math.round(by - py * ARROW_HALF));
+        g.lineStyle(0);
+    } else if (kind === 'triangle') {
+        const bx = tipPt.x - ux * ARROW_LEN;
+        const by = tipPt.y - uy * ARROW_LEN;
+        g.beginFill(color, 1);
+        g.drawPolygon([
+            Math.round(tipPt.x),               Math.round(tipPt.y),
+            Math.round(bx + px * ARROW_HALF),  Math.round(by + py * ARROW_HALF),
+            Math.round(bx - px * ARROW_HALF),  Math.round(by - py * ARROW_HALF),
+        ]);
+        g.endFill();
+    } else if (kind === 'circle') {
+        const cx = Math.round(tipPt.x - ux * CIRCLE_R);
+        const cy = Math.round(tipPt.y - uy * CIRCLE_R);
+        g.beginFill(color, 1);
+        g.drawCircle(cx, cy, CIRCLE_R);
+        g.endFill();
+    } else if (kind === 'diamond') {
+        // Ромб: вершина в tipPt, тыл на расстоянии 2×DIAMOND_HALF
+        const mx = tipPt.x - ux * DIAMOND_HALF;
+        const my = tipPt.y - uy * DIAMOND_HALF;
+        g.beginFill(color, 1);
+        g.drawPolygon([
+            Math.round(tipPt.x),                          Math.round(tipPt.y),
+            Math.round(mx + px * DIAMOND_HALF),            Math.round(my + py * DIAMOND_HALF),
+            Math.round(tipPt.x - ux * 2 * DIAMOND_HALF),  Math.round(tipPt.y - uy * 2 * DIAMOND_HALF),
+            Math.round(mx - px * DIAMOND_HALF),            Math.round(my - py * DIAMOND_HALF),
+        ]);
+        g.endFill();
+    }
+}
+
+
+/**
+ * Сплошная ломаная; для elbow скругляет углы дугой quadraticCurveTo.
+ *
+ * @param {PIXI.Graphics} g
+ * @param {Array<{x:number,y:number}>} pts
+ * @param {boolean} isElbow  включить скругление углов
+ */
+function drawPolylineSolid(g, pts, isElbow) {
+    if (pts.length < 2) return;
+    g.moveTo(pts[0].x, pts[0].y);
+    for (let i = 1; i < pts.length - 1; i++) {
+        const prev = pts[i - 1];
+        const curr = pts[i];
+        const next = pts[i + 1];
+        if (!isElbow) {
+            g.lineTo(curr.x, curr.y);
+            continue;
+        }
+        const dxIn  = curr.x - prev.x;
+        const dyIn  = curr.y - prev.y;
+        const lenIn = Math.hypot(dxIn, dyIn);
+        const dxOut  = next.x - curr.x;
+        const dyOut  = next.y - curr.y;
+        const lenOut = Math.hypot(dxOut, dyOut);
+        if (lenIn < 1e-6 || lenOut < 1e-6) {
+            g.lineTo(curr.x, curr.y);
+            continue;
+        }
+        const r   = Math.min(ELBOW_RADIUS, lenIn / 2, lenOut / 2);
+        const iux = dxIn  / lenIn;
+        const iuy = dyIn  / lenIn;
+        const oux = dxOut / lenOut;
+        const ouy = dyOut / lenOut;
+        g.lineTo(Math.round(curr.x - iux * r), Math.round(curr.y - iuy * r));
+        g.quadraticCurveTo(curr.x, curr.y,
+            Math.round(curr.x + oux * r), Math.round(curr.y + ouy * r));
+    }
+    g.lineTo(pts[pts.length - 1].x, pts[pts.length - 1].y);
+}
+
+/** Пунктирная ломаная по массиву точек. */
+function drawPolylineDash(g, pts) {
+    for (let i = 1; i < pts.length; i++) {
+        drawDashedLine(g, pts[i - 1].x, pts[i - 1].y, pts[i].x, pts[i].y);
+    }
+}
+
+/** Рисует кубическую кривую Безье через bezierCurveTo (или пунктирную аппроксимацию). */
+function drawBezierCurve(g, start, end, isDash, startDir = null, endDir = null) {
+    const { cp1, cp2 } = bezierControlPoints(start, end, startDir, endDir);
+    if (isDash) {
+        const pts = [];
+        for (let i = 0; i <= BEZIER_SAMPLES; i++) {
+            pts.push(sampleBezier(start, cp1, cp2, end, i / BEZIER_SAMPLES));
+        }
+        drawPolylineDash(g, pts);
+        return;
+    }
+    g.moveTo(start.x, start.y);
+    g.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
 }
 
 /**
  * ConnectorLayer — слой рендера универсальных коннекторов.
  *
- * Паттерн: MindmapConnectionLayer (один PIXI.Graphics, полная перерисовка на события).
+ * Паттерн: один PIXI.Graphics, полная перерисовка на события.
  * Рисует connector-объекты из state.objects в worldLayer.
  * Резолвинг end-point: ConnectorBindingResolver.resolve() двумя проходами
  * (грубый → точный) для корректной проекции на кромку при isExact=false.
@@ -90,7 +233,7 @@ export class ConnectorLayer {
         this.graphics        = null;
         this.subscriptions   = [];
         this._eventsAttached = false;
-        /** @type {Array<{ id: string, start: {x,y}, end: {x,y} }>} */
+        /** @type {Array<{ id: string, points: Array<{x:number,y:number}> }>} */
         this._lastSegments   = [];
     }
 
@@ -132,6 +275,7 @@ export class ConnectorLayer {
             [Events.Tool.GroupResizeUpdate,  () => this.updateAll()],
             [Events.Tool.RotateUpdate,       () => this.updateAll()],
             [Events.Tool.PanUpdate,          () => this.updateAll()],
+            [Events.Viewport.Changed,        () => this.updateAll()],
             [Events.UI.ZoomPercent,          () => this.updateAll()],
             [Events.History.Changed,         () => this.updateAll()],
             [Events.Board.Loaded,            () => this.updateAll()],
@@ -166,7 +310,7 @@ export class ConnectorLayer {
         }
 
         if (!this.graphics) {
-            this.graphics      = new PIXI.Graphics();
+            this.graphics        = new PIXI.Graphics();
             this.graphics.name   = 'connector-layer';
             this.graphics.zIndex = 3;
             const world = this.core?.pixi?.worldLayer || this.core?.pixi?.app?.stage;
@@ -179,71 +323,134 @@ export class ConnectorLayer {
         this._lastSegments = [];
 
         connectors.forEach((connector) => {
-            const style        = connector?.properties?.style ?? {};
-            const startTerm    = connector?.properties?.start;
-            const endTerm      = connector?.properties?.end;
+            const style     = connector?.properties?.style ?? {};
+            const startTerm = connector?.properties?.start;
+            const endTerm   = connector?.properties?.end;
             if (!startTerm || !endTerm) return;
 
             const startTarget = startTerm.boundId ? (byId.get(startTerm.boundId) ?? null) : null;
             const endTarget   = endTerm.boundId   ? (byId.get(endTerm.boundId)   ?? null) : null;
 
-            // Двухпроходное резолвание для корректной проекции isExact=false:
-            // проход 1 — грубые точки (без взаимной информации)
-            const roughStart = ConnectorBindingResolver.resolve(startTerm, startTarget, null);
-            const roughEnd   = ConnectorBindingResolver.resolve(endTerm,   endTarget,   null);
-            // проход 2 — уточнение с кромочной проекцией
-            const start = ConnectorBindingResolver.resolve(startTerm, startTarget, roughEnd);
-            const end   = ConnectorBindingResolver.resolve(endTerm,   endTarget,   start);
-
-            const sx = Math.round(start.x);
-            const sy = Math.round(start.y);
-            const ex = Math.round(end.x);
-            const ey = Math.round(end.y);
-
             const color  = style.stroke ?? 0x2563EB;
             const width  = style.width  ?? 2;
             const isDash = !!style.dash;
-            const head   = style.head ?? { start: false, end: true };
+            const route  = style.route  ?? 'straight';
+            const head   = normalizeHead(style.head);
+
+            let sx, sy, ex, ey, startDir = null, endDir = null;
+
+            if (route === 'elbow' || route === 'bezier') {
+                // Для elbow/bezier — резолв через грань с перпендикулярным выходом
+                const startCenter = getObjectCenter(startTerm, startTarget);
+                const endCenter   = getObjectCenter(endTerm,   endTarget);
+                const startDesc   = ConnectorBindingResolver.resolveWithSide(startTerm, startTarget, endCenter);
+                const endDesc     = ConnectorBindingResolver.resolveWithSide(endTerm,   endTarget,   startCenter);
+                sx       = Math.round(startDesc.point.x);
+                sy       = Math.round(startDesc.point.y);
+                ex       = Math.round(endDesc.point.x);
+                ey       = Math.round(endDesc.point.y);
+                startDir = startDesc.dir;
+                endDir   = endDesc.dir;
+            } else {
+                // straight: двухпроходный резолв (кромочная проекция по лучу центр-центр)
+                const roughStart = ConnectorBindingResolver.resolve(startTerm, startTarget, null);
+                const roughEnd   = ConnectorBindingResolver.resolve(endTerm,   endTarget,   null);
+                const start      = ConnectorBindingResolver.resolve(startTerm, startTarget, roughEnd);
+                const end        = ConnectorBindingResolver.resolve(endTerm,   endTarget,   start);
+                sx = Math.round(start.x);
+                sy = Math.round(start.y);
+                ex = Math.round(end.x);
+                ey = Math.round(end.y);
+            }
 
             try {
-                g.lineStyle({ width, color, alpha: 1, alignment: 0, cap: 'round', join: 'round' });
+                g.lineStyle({ width, color, alpha: 1, alignment: 0.5, cap: 'round', join: 'round' });
             } catch (_) {
-                g.lineStyle(width, color, 1, 0);
+                g.lineStyle(width, color, 1, 0.5);
+            }
+
+            const pts = buildPath({ x: sx, y: sy }, { x: ex, y: ey }, route, startDir, endDir);
+
+            // Для рисования линии: укорачиваем концы ровно до основания маркера,
+            // чтобы толстый stroke не заходил внутрь наконечника.
+            // Оригинальный pts используется только для drawHead (кончик остаётся точным).
+            const drawPts = pts.slice();
+            if (drawPts.length >= 2) {
+                if (head.end !== 'none') {
+                    const n   = drawPts.length;
+                    const tp  = drawPts[n - 1];
+                    const fp  = drawPts[n - 2];
+                    const sb  = getHeadSetback(head.end);
+                    const dx  = tp.x - fp.x;
+                    const dy  = tp.y - fp.y;
+                    const len = Math.hypot(dx, dy);
+                    if (sb > 0 && len > sb) {
+                        drawPts[n - 1] = {
+                            x: Math.round(tp.x - (dx / len) * sb),
+                            y: Math.round(tp.y - (dy / len) * sb),
+                        };
+                    }
+                }
+                if (head.start !== 'none') {
+                    const tp  = drawPts[0];
+                    const fp  = drawPts[1];
+                    const sb  = getHeadSetback(head.start);
+                    const dx  = tp.x - fp.x;
+                    const dy  = tp.y - fp.y;
+                    const len = Math.hypot(dx, dy);
+                    if (sb > 0 && len > sb) {
+                        drawPts[0] = {
+                            x: Math.round(tp.x - (dx / len) * sb),
+                            y: Math.round(tp.y - (dy / len) * sb),
+                        };
+                    }
+                }
             }
 
-            if (isDash) {
-                drawDashedLine(g, sx, sy, ex, ey);
+            const drawStart = drawPts[0];
+            const drawEnd   = drawPts[drawPts.length - 1];
+
+            if (route === 'bezier') {
+                drawBezierCurve(g, drawStart, drawEnd, isDash, startDir, endDir);
+            } else if (isDash) {
+                drawPolylineDash(g, drawPts);
             } else {
-                g.moveTo(sx, sy);
-                g.lineTo(ex, ey);
+                drawPolylineSolid(g, drawPts, route === 'elbow');
             }
 
-            if (head?.end)   drawArrow(g, { x: sx, y: sy }, { x: ex, y: ey }, color);
-            if (head?.start) drawArrow(g, { x: ex, y: ey }, { x: sx, y: sy }, color);
+            if (head.end !== 'none' && pts.length >= 2) {
+                drawHead(g, pts[pts.length - 2], pts[pts.length - 1], color, head.end, width);
+            }
+            if (head.start !== 'none' && pts.length >= 2) {
+                drawHead(g, pts[1], pts[0], color, head.start, width);
+            }
 
-            this._lastSegments.push({ id: connector.id, start: { x: sx, y: sy }, end: { x: ex, y: ey } });
+            this._lastSegments.push({ id: connector.id, points: pts });
         });
     }
 
     /**
      * Возвращает id ближайшего коннектора, если worldPoint в пределах порога.
      * Порог задан в экранных пикселях, пересчитывается в world через текущий scale.
+     * Проверяет каждую пару соседних точек сохранённого пути (ломаная/аппроксимация).
      *
      * @param {{ x: number, y: number }} worldPoint
      * @returns {string|null}
      */
     hitTest(worldPoint) {
         if (this._lastSegments.length === 0) return null;
-        // worldLayer.scale.x = zoom; 1 screen px = 1/scale world units
         const scale          = this.core?.pixi?.worldLayer?.scale?.x ?? 1;
         const worldThreshold = HIT_TEST_SCREEN_PX / scale;
         let closest = null;
         let minDist = worldThreshold;
         for (const seg of this._lastSegments) {
-            const d = distanceToSegment(worldPoint, seg.start, seg.end);
-            if (d < minDist) {
-                minDist = d;
-                closest = seg.id;
+            const pts = seg.points;
+            for (let i = 1; i < pts.length; i++) {
+                const d = distanceToSegment(worldPoint, pts[i - 1], pts[i]);
+                if (d < minDist) {
+                    minDist = d;
+                    closest = seg.id;
+                }
             }
         }
         return closest;

package/src/ui/handles/HandlesDomRenderer.js

@@ -68,13 +68,9 @@ function relayoutMindmapBranchLevel({ core, eventBus, parentId, side }) {
         });
     if (siblings.length === 0) return;
 
-    const app = core?.pixi?.app;
-    const worldLayer = core?.pixi?.worldLayer || app?.stage;
-    const rendererRes = app?.renderer?.resolution || 1;
-    const worldScale = worldLayer?.scale?.x || 1;
-    const baseGapWorld = Math.max(1, Math.round((10 * rendererRes) / worldScale));
-    const gapWorld = Math.max(1, Math.round(baseGapWorld * MINDMAP_CHILD_GAP_MULTIPLIER));
-    const verticalGapWorld = Math.max(1, Math.round(baseGapWorld * MINDMAP_CHILD_VERTICAL_GAP_MULTIPLIER));
+    const baseGapWorld = 10;
+    const gapWorld = baseGapWorld * MINDMAP_CHILD_GAP_MULTIPLIER;
+    const verticalGapWorld = Math.max(1, baseGapWorld * MINDMAP_CHILD_VERTICAL_GAP_MULTIPLIER);
 
     const byParentBySide = new Map();
     const childrenByParent = new Map();
@@ -1349,12 +1345,8 @@ export class HandlesDomRenderer {
 
         if (isMindmapTarget) {
             const emitChildMindmapFromSource = (direction) => {
-                const app = this.host.core?.pixi?.app;
-                const worldLayer = this.host.core?.pixi?.worldLayer || app?.stage;
-                const rendererRes = app?.renderer?.resolution || 1;
-                const worldScale = worldLayer?.scale?.x || 1;
-                const baseGapWorld = Math.max(1, Math.round((10 * rendererRes) / worldScale));
-                const gapWorld = Math.max(1, Math.round(baseGapWorld * MINDMAP_CHILD_GAP_MULTIPLIER));
+                const baseGapWorld = 10;
+                const gapWorld = baseGapWorld * MINDMAP_CHILD_GAP_MULTIPLIER;
                 const childWidth = Math.max(1, Math.round(MINDMAP_LAYOUT.width * MINDMAP_CHILD_WIDTH_FACTOR));
                 const childHeight = Math.max(1, Math.round(MINDMAP_LAYOUT.height * MINDMAP_CHILD_HEIGHT_FACTOR));
                 const childPaddingX = Math.max(1, Math.round(MINDMAP_LAYOUT.paddingX * MINDMAP_CHILD_PADDING_FACTOR));

package/src/ui/handles/HandlesEventBridge.js

@@ -113,6 +113,7 @@ export class HandlesEventBridge {
             }],
             [Events.UI.ZoomPercent, () => this.host.update()],
             [Events.Tool.PanUpdate, () => this.host.update()],
+            [Events.Viewport.Changed, () => this.host.update()],
             [Events.History.Changed, (data) => {
                 if (data?.lastUndone || data?.lastRedone) {
                     this.host._endGroupRotationPreview();

package/src/ui/handles/SingleSelectionHandlesController.js

@@ -15,6 +15,10 @@ export class SingleSelectionHandlesController {
             this.host.hide();
             return;
         }
+        if (mb.type === 'connector') {
+            this.host.hide();
+            return;
+        }
 
         const worldBounds = this.host.positioningService.getSingleSelectionWorldBounds(id, pixi);
         this.host._showBounds(worldBounds, id);

package/src/ui/mindmap/MindmapCollapseLayer.js

@@ -161,6 +161,7 @@ export class MindmapCollapseLayer {
             [Events.Tool.GroupDragUpdate,    reposition],
             [Events.Tool.GroupResizeUpdate,  reposition],
             [Events.Tool.PanUpdate,          reposition],
+            [Events.Viewport.Changed,        reposition],
             [Events.UI.ZoomPercent,          reposition],
             [Events.Object.TransformUpdated, reposition],
         ];

package/src/ui/mindmap/MindmapConnectionLayer.js

@@ -182,6 +182,7 @@ export class MindmapConnectionLayer {
             [Events.Tool.GroupResizeUpdate, () => this.updateAll()],
             [Events.Tool.RotateUpdate, () => this.updateAll()],
             [Events.Tool.PanUpdate, () => this.updateAll()],
+            [Events.Viewport.Changed, () => this.updateAll()],
             [Events.UI.ZoomPercent, () => this.updateAll()],
             [Events.History.Changed, () => this.updateAll()],
             [Events.Board.Loaded, () => this.updateAll()],

package/src/ui/mindmap/MindmapHtmlTextLayer.js

@@ -114,6 +114,8 @@ export class MindmapHtmlTextLayer {
 
         this.eventBus.on(Events.UI.ZoomPercent, () => this.updateAll());
         this.eventBus.on(Events.Tool.PanUpdate, () => this.updateAll());
+        this._onViewportChanged = () => this.updateAll();
+        this.eventBus.on(Events.Viewport.Changed, this._onViewportChanged);
         this.eventBus.on(Events.UI.TextEditEnd, ({ objectId }) => {
             if (objectId && this.idToEl.has(objectId)) this._scheduleAutoFit(objectId);
         });
@@ -178,6 +180,10 @@ export class MindmapHtmlTextLayer {
     }
 
     destroy() {
+        if (this._onViewportChanged && this.eventBus) {
+            this.eventBus.off(Events.Viewport.Changed, this._onViewportChanged);
+            this._onViewportChanged = null;
+        }
         for (const [id, state] of this._hoverStates) {
             gsap.killTweensOf(state);
             this._detachPixiHover(id);