@sequent-org/moodboard 1.4.32 → 1.4.34

package/src/ui/connectors/ConnectorHandlesLayer.js

@@ -0,0 +1,321 @@
+import * as PIXI from 'pixi.js';
+import { Events } from '../../core/events/Events.js';
+import { HandlesPositioningService } from '../handles/HandlesPositioningService.js';
+import { UpdateConnectorCommand } from '../../core/commands/UpdateConnectorCommand.js';
+
+const HANDLE_SIZE   = 12;
+const ANCHOR_SNAP   = 16; // CSS px до магнита к середине грани
+const EDGE_SNAP     = 10; // CSS px до кромки
+/** Нормализованные якоря середин граней — порядок совпадает с ConnectorDragController. */
+const MID_ANCHORS = [
+    { x: 0.5, y: 0 },
+    { x: 1,   y: 0.5 },
+    { x: 0.5, y: 1 },
+    { x: 0,   y: 0.5 },
+];
+
+/**
+ * DOM-слой двух ручек для перепривязки концов выбранного коннектора.
+ * Паттерн: ConnectionAnchorsLayer (подписки, world→screen, drag).
+ * Терминал формируется по правилам ConnectorDragController._resolveEnd.
+ */
+export class ConnectorHandlesLayer {
+    constructor(container, eventBus, core) {
+        this.container          = container;
+        this.eventBus           = eventBus;
+        this.core               = core;
+        this.layer              = null;
+        this.positioningService = new HandlesPositioningService(this);
+        this.subscriptions      = [];
+        this._eventsAttached    = false;
+        this._activeConnectorId = null;
+
+        // drag state
+        this._drag        = null; // { endKey:'start'|'end', el }
+        this._boundMove   = null;
+        this._boundUp     = null;
+    }
+
+    attach() {
+        if (!this.layer) {
+            this.layer = document.createElement('div');
+            this.layer.className = 'mb-connector-handles-layer';
+            Object.assign(this.layer.style, {
+                position:      'absolute',
+                left:          '0',
+                top:           '0',
+                width:         '100%',
+                height:        '100%',
+                pointerEvents: 'none',
+                zIndex:        '36',
+            });
+            this.container.appendChild(this.layer);
+        }
+        this._attachEvents();
+        this.updateFromSelection();
+    }
+
+    destroy() {
+        this._cancelDrag();
+        this._detachEvents();
+        if (this.layer && this.layer.parentNode) {
+            this.layer.parentNode.removeChild(this.layer);
+        }
+        this.layer              = null;
+        this._activeConnectorId = null;
+        this.eventBus           = null;
+        this.core               = null;
+        this.container          = null;
+    }
+
+    // ─── Events ───────────────────────────────────────────────────────────────
+
+    _attachEvents() {
+        if (this._eventsAttached) return;
+
+        const on = (event, handler) => {
+            this.eventBus.on(event, handler);
+            this.subscriptions.push([event, handler]);
+        };
+
+        on(Events.Tool.SelectionAdd,       () => this.updateFromSelection());
+        on(Events.Tool.SelectionRemove,    () => this.updateFromSelection());
+        on(Events.Tool.SelectionClear,     () => this.updateFromSelection());
+        on(Events.Object.Deleted,          () => this.updateFromSelection());
+
+        on(Events.Tool.DragUpdate,         () => this._reposition());
+        on(Events.Tool.ResizeUpdate,       () => this._reposition());
+        on(Events.Tool.GroupDragUpdate,    () => this._reposition());
+        on(Events.Tool.GroupResizeUpdate,  () => this._reposition());
+        on(Events.Tool.RotateUpdate,       () => this._reposition());
+        on(Events.Tool.PanUpdate,          () => this._reposition());
+        on(Events.Viewport.Changed,        () => this._reposition());
+        on(Events.UI.ZoomPercent,          () => this._reposition());
+        on(Events.History.Changed,         () => this._reposition());
+
+        this._eventsAttached = true;
+    }
+
+    _detachEvents() {
+        if (typeof this.eventBus?.off !== 'function') {
+            this.subscriptions   = [];
+            this._eventsAttached = false;
+            return;
+        }
+        this.subscriptions.forEach(([event, handler]) => this.eventBus.off(event, handler));
+        this.subscriptions   = [];
+        this._eventsAttached = false;
+    }
+
+    // ─── Public ───────────────────────────────────────────────────────────────
+
+    /** Перечитывает выделение и показывает/скрывает ручки. */
+    updateFromSelection() {
+        if (!this.layer) return;
+
+        const selection = Array.from(this.core?.selectTool?.selectedObjects || []);
+        if (selection.length !== 1) { this._hide(); return; }
+
+        const id  = selection[0];
+        const req = { objectId: id, pixiObject: null };
+        this.eventBus.emit(Events.Tool.GetObjectPixi, req);
+        if (req.pixiObject?._mb?.type !== 'connector') { this._hide(); return; }
+
+        this._activeConnectorId = id;
+        this._render();
+    }
+
+    // ─── Render ───────────────────────────────────────────────────────────────
+
+    _hide() {
+        this._activeConnectorId = null;
+        if (this.layer) this.layer.innerHTML = '';
+    }
+
+    _reposition() {
+        if (!this._activeConnectorId || !this.layer) return;
+        // Не перерисовывать во время drag — ручка движется вручную через _onDragMove.
+        if (this._drag) return;
+        this._render();
+    }
+
+    _render() {
+        if (!this.layer || !this._activeConnectorId) return;
+
+        const id  = this._activeConnectorId;
+        const seg = (this.core.connectorLayer?._lastSegments ?? []).find(s => s.id === id);
+        if (!seg) { this.layer.innerHTML = ''; return; }
+
+        const ss = this._worldToScreen(seg.start.x, seg.start.y);
+        const es = this._worldToScreen(seg.end.x,   seg.end.y);
+
+        this.layer.innerHTML = '';
+        this._createHandle('start', ss.x, ss.y);
+        this._createHandle('end',   es.x, es.y);
+    }
+
+    /** Конвертирует world-точку в CSS-координаты относительно контейнера. Целые px. */
+    _worldToScreen(wx, wy) {
+        const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
+        const pt    = world.toGlobal(new PIXI.Point(wx, wy));
+        const { offsetLeft, offsetTop } = this.positioningService.getViewportOffsets();
+        return {
+            x: Math.round(offsetLeft + pt.x),
+            y: Math.round(offsetTop  + pt.y),
+        };
+    }
+
+    /** Создаёт DOM-ручку с центром в (cx, cy) в px от container. */
+    _createHandle(endKey, cx, cy) {
+        const r  = HANDLE_SIZE / 2;
+        const el = document.createElement('div');
+        el.className      = 'mb-connector-handle';
+        el.dataset.end    = endKey;
+        Object.assign(el.style, {
+            position:        'absolute',
+            left:            `${cx - r}px`,
+            top:             `${cy - r}px`,
+            width:           `${HANDLE_SIZE}px`,
+            height:          `${HANDLE_SIZE}px`,
+            backgroundColor: '#ffffff',
+            border:          '2px solid #2563EB',
+            borderRadius:    '50%',
+            pointerEvents:   'auto',
+            boxSizing:       'border-box',
+            cursor:          'grab',
+        });
+        el.addEventListener('pointerdown', (e) => this._onPointerDown(e, endKey, el));
+        this.layer.appendChild(el);
+    }
+
+    // ─── Drag ─────────────────────────────────────────────────────────────────
+
+    _onPointerDown(e, endKey, el) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this._drag      = { endKey, el };
+        el.style.cursor = 'grabbing';
+
+        this._boundMove = (ev) => this._onDragMove(ev);
+        this._boundUp   = (ev) => this._onDragUp(ev);
+        document.addEventListener('pointermove', this._boundMove);
+        document.addEventListener('pointerup',   this._boundUp);
+    }
+
+    _onDragMove(e) {
+        if (!this._drag) return;
+        const r    = HANDLE_SIZE / 2;
+        const rect = this.container.getBoundingClientRect();
+        const x    = Math.round(e.clientX - rect.left - r);
+        const y    = Math.round(e.clientY - rect.top  - r);
+        this._drag.el.style.left = `${x}px`;
+        this._drag.el.style.top  = `${y}px`;
+    }
+
+    _onDragUp(e) {
+        document.removeEventListener('pointermove', this._boundMove);
+        document.removeEventListener('pointerup',   this._boundUp);
+        this._boundMove = null;
+        this._boundUp   = null;
+
+        if (!this._drag) return;
+        const { endKey } = this._drag;
+        this._drag = null;
+
+        const connectorId = this._activeConnectorId;
+        if (!connectorId) { this._render(); return; }
+
+        const terminal = this._resolveTerminal(e.clientX, e.clientY);
+        const updates  = endKey === 'start' ? { start: terminal } : { end: terminal };
+
+        this.core.history.executeCommand(
+            new UpdateConnectorCommand(this.core, connectorId, updates)
+        );
+        // ConnectorLayer перерисуется по History.Changed → _reposition()
+    }
+
+    /**
+     * Определяет терминал по clientX/Y. Логика: ConnectorDragController._resolveEnd.
+     * sourceBoundId не передаётся — при перепривязке конца можно приземлиться
+     * на тот же объект, к которому привязан другой конец.
+     *
+     * Допущение: isExact=false всегда (матчит контракт ConnectorBindingResolver).
+     */
+    _resolveTerminal(clientX, clientY) {
+        const view     = this.core.pixi.app.view;
+        const viewRect = view.getBoundingClientRect();
+        const world    = this.core.pixi.worldLayer || this.core.pixi.app.stage;
+        const worldPt  = world.toLocal(new PIXI.Point(clientX - viewRect.left, clientY - viewRect.top));
+
+        const hitData = {
+            x: clientX - viewRect.left,
+            y: clientY - viewRect.top,
+            result: null,
+        };
+        this.eventBus.emit(Events.Tool.HitTest, hitData);
+        const objectId = hitData.result?.object || null;
+
+        if (objectId) {
+            const posData  = { objectId, position: null };
+            const sizeData = { objectId, size: null };
+            this.eventBus.emit(Events.Tool.GetObjectPosition, posData);
+            this.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+
+            if (posData.position && sizeData.size) {
+                const { x, y } = posData.position;
+                const { width, height } = sizeData.size;
+                const scale = world?.scale?.x || 1;
+
+                // Приоритет 1: магнит к середине грани (≤ANCHOR_SNAP CSS px)
+                const snapThr = ANCHOR_SNAP / scale;
+                let best = null, bestDist = snapThr;
+                for (const a of MID_ANCHORS) {
+                    const ax = x + a.x * width;
+                    const ay = y + a.y * height;
+                    const d  = Math.hypot(worldPt.x - ax, worldPt.y - ay);
+                    if (d <= bestDist) { bestDist = d; best = a; }
+                }
+                if (best) {
+                    return { boundId: objectId, anchor: best, isPrecise: true, isExact: false };
+                }
+
+                // Приоритет 2: произвольная точка кромки (≤EDGE_SNAP CSS px)
+                const edgeThr = EDGE_SNAP / scale;
+                const nearEdge = Math.min(
+                    worldPt.x - x, x + width  - worldPt.x,
+                    worldPt.y - y, y + height - worldPt.y,
+                ) <= edgeThr;
+                if (nearEdge) {
+                    return {
+                        boundId: objectId,
+                        anchor: {
+                            x: Math.max(0, Math.min(1, (worldPt.x - x) / width)),
+                            y: Math.max(0, Math.min(1, (worldPt.y - y) / height)),
+                        },
+                        isPrecise: true,
+                        isExact: false,
+                    };
+                }
+
+                // Приоритет 3: центр объекта
+                return { boundId: objectId, anchor: { x: 0.5, y: 0.5 }, isPrecise: false, isExact: false };
+            }
+        }
+
+        // Свободная точка в world-coords
+        return { point: { x: worldPt.x, y: worldPt.y } };
+    }
+
+    _cancelDrag() {
+        if (this._boundMove) {
+            document.removeEventListener('pointermove', this._boundMove);
+            this._boundMove = null;
+        }
+        if (this._boundUp) {
+            document.removeEventListener('pointerup', this._boundUp);
+            this._boundUp = null;
+        }
+        this._drag = null;
+    }
+}

package/src/ui/connectors/ConnectorLabelLayer.js

@@ -0,0 +1,334 @@
+import * as PIXI from 'pixi.js';
+import { Events } from '../../core/events/Events.js';
+
+function numToHex(color) {
+    return '#' + (color >>> 0).toString(16).padStart(6, '0');
+}
+
+/**
+ * ConnectorLabelLayer — HTML-оверлей текстовых меток над коннекторами.
+ *
+ * Метка позиционируется по середине пути коннектора (_lastSegments из ConnectorLayer).
+ * Редактирование по двойному клику или через openEditorForConnector().
+ * Сохранение через UpdateConnectorCommand (Events.Object.StateChanged → tryCreateConnectorStyleCommand).
+ */
+export class ConnectorLabelLayer {
+    constructor(container, eventBus, core) {
+        this.container  = container;
+        this.eventBus   = eventBus;
+        this.core       = core;
+        this.layer      = null;
+        /** @type {Map<string, HTMLElement>} */
+        this.idToEl     = new Map();
+        this._editingId = null;
+        this._editEl    = null;
+        this._subs      = [];
+    }
+
+    attach() {
+        this.layer = document.createElement('div');
+        this.layer.className = 'connector-label-layer';
+        Object.assign(this.layer.style, {
+            position:      'absolute',
+            inset:         '0',
+            overflow:      'hidden',
+            pointerEvents: 'none',
+            zIndex:        '11',
+        });
+        this.container.appendChild(this.layer);
+
+        const redraw  = () => this._updateAll();
+        const rebuild = () => this._rebuildFromState();
+
+        const bindings = [
+            [Events.Object.Created,         rebuild],
+            [Events.Object.Deleted,         ({ objectId }) => this._removeLabelEl(objectId)],
+            [Events.Object.StateChanged,    ({ objectId }) => { this._syncOne(objectId); this._updateOne(objectId); }],
+            [Events.History.Changed,        rebuild],
+            [Events.Board.Loaded,           rebuild],
+            [Events.Tool.DragUpdate,        redraw],
+            [Events.Tool.DragEnd,           redraw],
+            [Events.Tool.ResizeUpdate,      redraw],
+            [Events.Tool.ResizeEnd,         redraw],
+            [Events.Tool.GroupDragUpdate,   redraw],
+            [Events.Tool.GroupResizeUpdate, redraw],
+            [Events.Tool.PanUpdate,         redraw],
+            [Events.Viewport.Changed,       redraw],
+            [Events.UI.ZoomPercent,         redraw],
+        ];
+
+        for (const [ev, fn] of bindings) {
+            this.eventBus.on(ev, fn);
+            this._subs.push([ev, fn]);
+        }
+
+        this._rebuildFromState();
+    }
+
+    destroy() {
+        if (this._editingId) this._cleanupEditEl();
+        for (const [ev, fn] of this._subs) {
+            if (this.eventBus?.off) this.eventBus.off(ev, fn);
+        }
+        this._subs = [];
+        if (this.layer) { this.layer.remove(); this.layer = null; }
+        this.idToEl.clear();
+        this.eventBus = null;
+        this.core     = null;
+    }
+
+    /** Публичный API для T+ кнопки: открыть редактор для коннектора. */
+    openEditorForConnector(connectorId) {
+        this._openEditor(connectorId);
+    }
+
+    // ── State sync ────────────────────────────────────────────────────────────
+
+    _rebuildFromState() {
+        if (!this.core?.state) return;
+        const objects = this.core.state.state.objects || [];
+        const connectorIds = new Set(
+            objects.filter(o => o.type === 'connector').map(o => o.id)
+        );
+
+        for (const [id] of this.idToEl) {
+            if (!connectorIds.has(id)) this._removeLabelEl(id);
+        }
+
+        for (const obj of objects) {
+            if (obj.type !== 'connector') continue;
+            const label = obj.properties?.style?.label;
+            if (label != null) {
+                this._ensureLabelEl(obj.id, label);
+                this._updateOne(obj.id);
+            } else {
+                this._removeLabelEl(obj.id);
+            }
+        }
+    }
+
+    _syncOne(connectorId) {
+        if (!this.core?.state) return;
+        const obj = (this.core.state.state.objects || []).find(o => o.id === connectorId);
+        if (!obj || obj.type !== 'connector') { this._removeLabelEl(connectorId); return; }
+        const label = obj.properties?.style?.label;
+        if (label != null) {
+            this._ensureLabelEl(connectorId, label);
+        } else {
+            this._removeLabelEl(connectorId);
+        }
+    }
+
+    _ensureLabelEl(connectorId, label) {
+        if (!this.layer) return;
+        let el = this.idToEl.get(connectorId);
+        if (!el) {
+            el = document.createElement('div');
+            el.className  = 'connector-label';
+            el.dataset.id = connectorId;
+            Object.assign(el.style, {
+                position:        'absolute',
+                pointerEvents:   'auto',
+                cursor:          'default',
+                padding:         '2px 8px',
+                borderRadius:    '4px',
+                backgroundColor: 'rgba(255,255,255,0.92)',
+                border:          '1px solid rgba(0,0,0,0.12)',
+                boxShadow:       '0 1px 3px rgba(0,0,0,0.10)',
+                whiteSpace:      'nowrap',
+                userSelect:      'none',
+                transform:       'translate(-50%, -50%)',
+                lineHeight:      '1.4',
+            });
+            el.addEventListener('dblclick', (e) => {
+                e.stopPropagation();
+                this._openEditor(connectorId);
+            });
+            this.layer.appendChild(el);
+            this.idToEl.set(connectorId, el);
+        }
+        el.textContent    = label.text ?? '';
+        el.style.color    = numToHex(label.color ?? 0x212121);
+        el.style.fontSize = `${label.fontSize ?? 14}px`;
+        el.style.display  = label.text ? '' : 'none';
+    }
+
+    _removeLabelEl(connectorId) {
+        const el = this.idToEl.get(connectorId);
+        if (el) { el.remove(); this.idToEl.delete(connectorId); }
+        if (this._editingId === connectorId) this._cleanupEditEl();
+    }
+
+    // ── Positioning ───────────────────────────────────────────────────────────
+
+    _updateAll() {
+        for (const id of this.idToEl.keys()) this._updateOne(id);
+        if (this._editingId) this._repositionEditor(this._editingId);
+    }
+
+    _updateOne(connectorId) {
+        const el = this.idToEl.get(connectorId);
+        if (!el || !this.core?.pixi) return;
+
+        const obj = (this.core?.state?.state?.objects || []).find(o => o.id === connectorId);
+        const label = obj?.properties?.style?.label;
+        if (!label?.text) { el.style.display = 'none'; return; }
+
+        const mid = this._getMidpointCss(connectorId);
+        if (!mid) { el.style.display = 'none'; return; }
+
+        el.style.display  = '';
+        el.style.left     = `${mid.x}px`;
+        el.style.top      = `${mid.y}px`;
+
+        // Масштабируем размер шрифта вместе с зумом
+        const worldLayer = this.core.pixi.worldLayer || this.core.pixi.app?.stage;
+        const zoom       = worldLayer?.scale?.x ?? 1;
+        el.style.fontSize = `${Math.max(6, Math.round((label.fontSize ?? 14) * zoom))}px`;
+    }
+
+    /**
+     * Возвращает CSS-координаты середины коннектора относительно container.
+     * Целые пиксели (screen-space integer contract).
+     */
+    _getMidpointCss(connectorId) {
+        const segments = this.core?.connectorLayer?._lastSegments;
+        if (!segments) return null;
+        const seg = segments.find(s => s.id === connectorId);
+        if (!seg?.points?.length) return null;
+
+        const pts = seg.points;
+        const i1  = Math.floor((pts.length - 1) / 2);
+        const i2  = Math.ceil( (pts.length - 1) / 2);
+        const midWX = (pts[i1].x + pts[i2].x) / 2;
+        const midWY = (pts[i1].y + pts[i2].y) / 2;
+
+        const worldLayer = this.core.pixi.worldLayer || this.core.pixi.app?.stage;
+        const view       = this.core.pixi.app?.view;
+
+        if (worldLayer && view?.parentElement) {
+            const cRect = view.parentElement.getBoundingClientRect();
+            const vRect = view.getBoundingClientRect();
+            const offL  = vRect.left - cRect.left;
+            const offT  = vRect.top  - cRect.top;
+            const pt    = worldLayer.toGlobal(new PIXI.Point(midWX, midWY));
+            return { x: Math.round(offL + pt.x), y: Math.round(offT + pt.y) };
+        }
+
+        // Fallback без view
+        const scale = worldLayer?.scale?.x ?? 1;
+        const wx    = worldLayer?.x ?? 0;
+        const wy    = worldLayer?.y ?? 0;
+        return { x: Math.round(midWX * scale + wx), y: Math.round(midWY * scale + wy) };
+    }
+
+    // ── Editor ────────────────────────────────────────────────────────────────
+
+    _openEditor(connectorId) {
+        if (this._editingId) this._cleanupEditEl();
+        if (!this.layer) return;
+
+        const pos = this._getMidpointCss(connectorId) ?? { x: 0, y: 0 };
+        const objects = this.core?.state?.state?.objects || [];
+        const obj     = objects.find(o => o.id === connectorId);
+        const label   = obj?.properties?.style?.label;
+
+        // Скрываем статичную метку на время редактирования
+        const staticEl = this.idToEl.get(connectorId);
+        if (staticEl) staticEl.style.visibility = 'hidden';
+
+        const worldLayer = this.core?.pixi?.worldLayer || this.core?.pixi?.app?.stage;
+        const zoom       = worldLayer?.scale?.x ?? 1;
+
+        const editEl = document.createElement('div');
+        editEl.contentEditable = 'true';
+        editEl.className = 'connector-label connector-label--editing';
+        Object.assign(editEl.style, {
+            position:        'absolute',
+            left:            `${pos.x}px`,
+            top:             `${pos.y}px`,
+            transform:       'translate(-50%, -50%)',
+            pointerEvents:   'auto',
+            cursor:          'text',
+            padding:         '2px 8px',
+            borderRadius:    '4px',
+            backgroundColor: 'white',
+            border:          '2px solid #2563EB',
+            boxShadow:       '0 2px 8px rgba(37,99,235,0.2)',
+            whiteSpace:      'nowrap',
+            outline:         'none',
+            minWidth:        '40px',
+            lineHeight:      '1.4',
+            color:           numToHex(label?.color ?? 0x212121),
+            fontSize:        `${Math.max(6, Math.round((label?.fontSize ?? 14) * zoom))}px`,
+        });
+        editEl.textContent = label?.text ?? '';
+        this.layer.appendChild(editEl);
+
+        this._editEl    = editEl;
+        this._editingId = connectorId;
+
+        requestAnimationFrame(() => {
+            editEl.focus();
+            const range = document.createRange();
+            range.selectNodeContents(editEl);
+            const sel = window.getSelection();
+            if (sel) { sel.removeAllRanges(); sel.addRange(range); }
+        });
+
+        editEl.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this._commitEdit(connectorId); }
+            if (e.key === 'Escape') { e.preventDefault(); this._cancelEdit(); }
+        });
+
+        editEl.addEventListener('blur', () => {
+            // Задержка: чтобы клик на кнопку панели не сразу коммитил
+            setTimeout(() => {
+                if (this._editingId === connectorId && this._editEl) {
+                    this._commitEdit(connectorId);
+                }
+            }, 180);
+        });
+    }
+
+    _repositionEditor(connectorId) {
+        if (!this._editEl || this._editingId !== connectorId) return;
+        const mid = this._getMidpointCss(connectorId);
+        if (!mid) return;
+        this._editEl.style.left = `${mid.x}px`;
+        this._editEl.style.top  = `${mid.y}px`;
+    }
+
+    _commitEdit(connectorId) {
+        if (!this._editEl) return;
+        const text = this._editEl.textContent?.trim() ?? '';
+        this._cleanupEditEl();
+
+        const objects  = this.core?.state?.state?.objects || [];
+        const obj      = objects.find(o => o.id === connectorId);
+        const existing = obj?.properties?.style?.label;
+
+        const newLabel = text
+            ? { text, color: existing?.color ?? 0x212121, fontSize: existing?.fontSize ?? 14 }
+            : null;
+
+        this.eventBus?.emit(Events.Object.StateChanged, {
+            objectId: connectorId,
+            updates:  { properties: { style: { label: newLabel } } },
+        });
+    }
+
+    _cancelEdit() {
+        this._cleanupEditEl();
+    }
+
+    _cleanupEditEl() {
+        if (this._editEl) { this._editEl.remove(); this._editEl = null; }
+        const id = this._editingId;
+        this._editingId = null;
+        if (id) {
+            const staticEl = this.idToEl.get(id);
+            if (staticEl) staticEl.style.visibility = '';
+        }
+    }
+}