@mindexec/cli 0.2.446 → 0.2.447

package/wwwroot/_content/MindExecution.Shared/js/mind-map-core.js

@@ -1364,7 +1364,11 @@
                 metricsSnapshotAgeMs: 0,
                 metricsSnapshotPeakMs: 0,
                 visibilityCullingProfile: null,
-                renderPlanDiagnostics: null
+                renderPlanDiagnostics: null,
+                nearCss3dPerf: null,
+                css3dRendererCounters: null,
+                renderQueueMetrics: null,
+                lastCss3dVisibilityPatch: null
             };
         }
 
@@ -1490,7 +1494,11 @@
             metricsSnapshotAgeMs: 0,
             metricsSnapshotPeakMs: Number((moduleInstance._renderDebugMetricsSnapshotPeakMs || 0).toFixed(2)),
             visibilityCullingProfile: moduleInstance._lastVisibilityCullingProfile || null,
-            renderPlanDiagnostics: window.MindMapRenderPlan?.getDiagnostics?.(moduleInstance.lodRenderer) || null
+            renderPlanDiagnostics: window.MindMapRenderPlan?.getDiagnostics?.(moduleInstance.lodRenderer) || null,
+            nearCss3dPerf: window.MindMapCss3dHotPath?.getPerfSnapshot?.(moduleInstance) || null,
+            css3dRendererCounters: moduleInstance.cssRenderer?.getDebugCounters?.() || null,
+            renderQueueMetrics: window.MindMapPipeline?.getQueueDebugMetrics?.() || null,
+            lastCss3dVisibilityPatch: moduleInstance._lastCss3dVisibilityPatch || null
         };
         moduleInstance._lastRenderDebugMetricsSnapshot = snapshot;
         return snapshot;
@@ -3290,36 +3298,22 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
 
             const roundedX = Math.round(nextX * 2) / 2;
             const roundedY = Math.round(nextY * 2) / 2;
-            if (this.isZooming === true &&
-                this._lastLocalSnapGridPointerSnapKey &&
-                Math.abs(Number(this._lastSnapGridClientX || 0) - roundedX) < 0.001 &&
-                Math.abs(Number(this._lastSnapGridClientY || 0) - roundedY) < 0.001) {
-                this._localSnapGridStyleDeferredForZoom = true;
+            if (Math.abs(Number(this._lastSnapGridClientX ?? Number.NaN) - roundedX) < 0.001 &&
+                Math.abs(Number(this._lastSnapGridClientY ?? Number.NaN) - roundedY) < 0.001) {
+                if (this.isZooming === true) {
+                    this._localSnapGridStyleDeferredForZoom = true;
+                }
                 return false;
             }
-            const fallbackGrid = Math.max(1, Number(this.GRID_SIZE || 10));
-            let pointerSnapKey = `screen:${Math.round(roundedX / fallbackGrid)}|${Math.round(roundedY / fallbackGrid)}`;
-            if (this.container && this.camera?.isPerspectiveCamera) {
-                const viewportMetrics = getCachedViewportMetrics(this);
-                const width = Math.max(1, Number(viewportMetrics.width || 0));
-                const height = Math.max(1, Number(viewportMetrics.height || 0));
-                const left = Number(viewportMetrics.left || 0);
-                const top = Number(viewportMetrics.top || 0);
-                const centerX = Math.max(0, Math.min(width, roundedX - left));
-                const centerY = Math.max(0, Math.min(height, roundedY - top));
-                const snappedCenter = this._getLocalSnapGridSnappedScreenCenter(centerX, centerY, width, height, this.camera);
-                pointerSnapKey = snappedCenter.snapKey || pointerSnapKey;
-            }
-
-            if (this._lastLocalSnapGridPointerSnapKey === pointerSnapKey) {
-                return false;
+            if (this.isZooming === true) {
+                this._localSnapGridStyleDeferredForZoom = true;
             }
 
             const previousX = this._lastSnapGridClientX;
             const previousY = this._lastSnapGridClientY;
             this._lastSnapGridClientX = roundedX;
             this._lastSnapGridClientY = roundedY;
-            this._lastLocalSnapGridPointerSnapKey = pointerSnapKey;
+            this._lastLocalSnapGridPointerSnapKey = `screen:${roundedX}|${roundedY}`;
             this._localSnapGridPointerRevision = Math.max(0, Number(this._localSnapGridPointerRevision || 0)) + 1;
             this._lastLocalSnapGridTransformKey = '';
             if (previousX !== roundedX || previousY !== roundedY) {
@@ -3334,11 +3328,13 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
         _getLocalSnapGridSnappedScreenCenter(rawCenterX, rawCenterY, width, height, camera = null) {
             const safeWidth = Math.max(1, Number(width || 0));
             const safeHeight = Math.max(1, Number(height || 0));
-            const fallbackGrid = Math.max(1, Number(this.GRID_SIZE || 10));
+            const grid = Math.max(1, Number(this.GRID_SIZE || 10));
+            const fallbackCenterX = Math.max(0, Math.min(safeWidth, Number(rawCenterX || 0)));
+            const fallbackCenterY = Math.max(0, Math.min(safeHeight, Number(rawCenterY || 0)));
             const fallback = {
-                centerX: Math.max(0, Math.min(safeWidth, Number(rawCenterX || 0))),
-                centerY: Math.max(0, Math.min(safeHeight, Number(rawCenterY || 0))),
-                snapKey: `screen:${Math.round(Number(rawCenterX || 0) / fallbackGrid)}|${Math.round(Number(rawCenterY || 0) / fallbackGrid)}`
+                centerX: fallbackCenterX,
+                centerY: fallbackCenterY,
+                snapKey: `screen:${Math.round(fallbackCenterX / grid)}|${Math.round(fallbackCenterY / grid)}`
             };
             const activeCamera = camera || this.camera;
             if (!activeCamera?.isPerspectiveCamera) {
@@ -3355,17 +3351,20 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
 
             const cameraX = Number(activeCamera.position?.x || 0);
             const cameraY = Number(activeCamera.position?.y || 0);
-            const worldX = cameraX + ((fallback.centerX / safeWidth) - 0.5) * viewWidth;
-            const worldY = cameraY + (0.5 - (fallback.centerY / safeHeight)) * viewHeight;
-            const grid = fallbackGrid;
+            const worldX = cameraX + ((fallbackCenterX / safeWidth) - 0.5) * viewWidth;
+            const worldY = cameraY + (0.5 - (fallbackCenterY / safeHeight)) * viewHeight;
             const snappedWorldX = Math.round(worldX / grid) * grid;
             const snappedWorldY = Math.round(worldY / grid) * grid;
-            const snappedCenterX = (((snappedWorldX - cameraX) / viewWidth) + 0.5) * safeWidth;
-            const snappedCenterY = (0.5 - ((snappedWorldY - cameraY) / viewHeight)) * safeHeight;
 
             return {
-                centerX: Math.max(0, Math.min(safeWidth, snappedCenterX)),
-                centerY: Math.max(0, Math.min(safeHeight, snappedCenterY)),
+                centerX: Math.max(0, Math.min(
+                    safeWidth,
+                    (((snappedWorldX - cameraX) / viewWidth) + 0.5) * safeWidth
+                )),
+                centerY: Math.max(0, Math.min(
+                    safeHeight,
+                    (0.5 - ((snappedWorldY - cameraY) / viewHeight)) * safeHeight
+                )),
                 snapKey: `world:${Math.round(snappedWorldX / grid)}|${Math.round(snappedWorldY / grid)}`
             };
         }
@@ -3444,6 +3443,43 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             return layer.parentNode === host;
         }
 
+        _syncLocalSnapGridBackgroundSurface() {
+            if (!this.container) {
+                return false;
+            }
+
+            const isLocalSnapGridTheme = this.currentThemeObject?.userData?.localSnapGrid === true;
+            if (isLocalSnapGridTheme !== true) {
+                if (this.container.style.backgroundColor) {
+                    this.container.style.backgroundColor = '';
+                }
+                return false;
+            }
+
+            const rawBackgroundColor = this.currentThemeObject?.userData?.localSnapGridBackgroundColor;
+            let backgroundColor = '';
+            if (rawBackgroundColor !== undefined && rawBackgroundColor !== null) {
+                try {
+                    const themeColor = rawBackgroundColor?.isColor === true
+                        ? rawBackgroundColor
+                        : new THREE.Color(rawBackgroundColor);
+                    backgroundColor = `#${themeColor.getHexString()}`;
+                } catch {
+                    backgroundColor = '';
+                }
+            }
+
+            // Local dot/line hints are DOM canvases below the transparent WebGL
+            // resident surface. An opaque scene background would cover the hint.
+            if (this.scene?.background) {
+                this.scene.background = null;
+            }
+            if (this.container.style.backgroundColor !== backgroundColor) {
+                this.container.style.backgroundColor = backgroundColor;
+            }
+            return true;
+        }
+
         _ensureLocalSnapGridLayer() {
             if (!this.container || typeof document === 'undefined') {
                 return null;
@@ -3514,66 +3550,74 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             const smallStep = Math.max(LOCAL_SNAP_GRID_MIN_STEP_PX, Number(smallStepPx) || LOCAL_SNAP_GRID_DEFAULT_STEP_PX);
             const majorStep = Math.max(smallStep, Number(majorStepPx) || LOCAL_SNAP_GRID_DEFAULT_MAJOR_STEP_PX);
             ctx.clearRect(0, 0, size, size);
-            const radius = center;
-            const radiusSq = radius * radius;
+            const radiusSq = center * center;
+            const forCenteredSteps = (step, callback) => {
+                callback(center);
+                for (let offset = step; offset <= center; offset += step) {
+                    callback(center - offset);
+                    callback(center + offset);
+                }
+            };
 
             if (styleKind === 'dot') {
                 ctx.fillStyle = 'rgba(58, 69, 88, 0.46)';
                 const dotRadius = 1.15;
-                for (let y = 0; y <= size; y += smallStep) {
+                forCenteredSteps(smallStep, y => {
                     const dy = y - center;
                     const dySq = dy * dy;
-                    for (let x = 0; x <= size; x += smallStep) {
+                    forCenteredSteps(smallStep, x => {
                         const dx = x - center;
                         if ((dx * dx) + dySq > radiusSq) {
-                            continue;
+                            return;
                         }
                         ctx.beginPath();
                         ctx.arc(x, y, dotRadius, 0, Math.PI * 2);
                         ctx.fill();
-                    }
-                }
+                    });
+                });
 
                 ctx.fillStyle = 'rgba(15, 23, 42, 0.62)';
                 const majorDotRadius = 1.85;
-                for (let y = 0; y <= size; y += majorStep) {
+                forCenteredSteps(majorStep, y => {
                     const dy = y - center;
                     const dySq = dy * dy;
-                    for (let x = 0; x <= size; x += majorStep) {
+                    forCenteredSteps(majorStep, x => {
                         const dx = x - center;
                         if ((dx * dx) + dySq > radiusSq) {
-                            continue;
+                            return;
                         }
                         ctx.beginPath();
                         ctx.arc(x, y, majorDotRadius, 0, Math.PI * 2);
                         ctx.fill();
-                    }
-                }
+                    });
+                });
             } else {
                 const drawLines = (step, color, width) => {
                     ctx.strokeStyle = color;
                     ctx.lineWidth = width;
                     ctx.beginPath();
-                    for (let x = 0.5; x <= size; x += step) {
+                    forCenteredSteps(step, x => {
                         const dx = x - center;
                         const spanSq = radiusSq - (dx * dx);
                         if (spanSq <= 0) {
-                            continue;
+                            return;
                         }
                         const span = Math.sqrt(spanSq);
-                        ctx.moveTo(x, center - span);
-                        ctx.lineTo(x, center + span);
-                    }
-                    for (let y = 0.5; y <= size; y += step) {
+                        const pixelX = Math.round(x) + 0.5;
+                        ctx.moveTo(pixelX, center - span);
+                        ctx.lineTo(pixelX, center + span);
+                    });
+                    forCenteredSteps(step, y => {
                         const dy = y - center;
                         const spanSq = radiusSq - (dy * dy);
                         if (spanSq <= 0) {
-                            continue;
+                            return;
                         }
                         const span = Math.sqrt(spanSq);
-                        ctx.moveTo(center - span, y);
-                        ctx.lineTo(center + span, y);
-                    }
+                        const pixelY = Math.round(y) + 0.5;
+                        ctx.moveTo(center - span, pixelY);
+                        ctx.lineTo(center + span, pixelY);
+                    });
                     ctx.stroke();
                 };
 
@@ -3595,7 +3639,14 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             return true;
         }
 
-        _applyLocalSnapGridStyle(layer, styleKind, smallStepPx, majorStepPx, opacity, keyPrefix = 'style') {
+        _applyLocalSnapGridStyle(
+            layer,
+            styleKind,
+            smallStepPx,
+            majorStepPx,
+            opacity,
+            keyPrefix = 'style'
+        ) {
             if (!layer) {
                 return false;
             }
@@ -3622,7 +3673,12 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             this._lastLocalSnapGridKey = localGridKey;
             const opacityValue = safeOpacity.toFixed(3);
             this._lastLocalSnapGridOpacity = opacityValue;
-            this._drawLocalSnapGridBitmap(layer, safeStyleKind, safeSmallStep, safeMajorStep);
+            this._drawLocalSnapGridBitmap(
+                layer,
+                safeStyleKind,
+                safeSmallStep,
+                safeMajorStep
+            );
             if (layer.style.opacity !== opacityValue) {
                 layer.style.opacity = opacityValue;
             }
@@ -3673,7 +3729,8 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 return;
             }
 
-            if (this._localSnapGridVisible !== true && layer.style.display === 'none') {
+            if (this._localSnapGridVisible !== true &&
+                layer.style.display === 'none') {
                 return;
             }
 
@@ -3722,19 +3779,24 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             const centerY = hasPointer
                 ? Math.max(0, Math.min(height, Number(this._lastSnapGridClientY) - top))
                 : height / 2;
-            const snappedCenter = this._getLocalSnapGridSnappedScreenCenter(centerX, centerY, width, height, this.camera);
-            const layerLeft = snappedCenter.centerX - LOCAL_SNAP_GRID_RADIUS_PX;
-            const layerTop = snappedCenter.centerY - LOCAL_SNAP_GRID_RADIUS_PX;
+            const snappedCenter = this._getLocalSnapGridSnappedScreenCenter(
+                centerX,
+                centerY,
+                width,
+                height,
+                this.camera
+            );
+            const snappedLayerLeft = Math.round(snappedCenter.centerX - LOCAL_SNAP_GRID_RADIUS_PX);
+            const snappedLayerTop = Math.round(snappedCenter.centerY - LOCAL_SNAP_GRID_RADIUS_PX);
+            const transformKey = `${snappedLayerLeft}|${snappedLayerTop}`;
+            if (transformKey !== this._lastLocalSnapGridTransformKey) {
+                this._lastLocalSnapGridTransformKey = transformKey;
+                layer.style.transform = `translate3d(${snappedLayerLeft}px, ${snappedLayerTop}px, 0)`;
+            }
+            this._lastLocalSnapGridPointerSnapKey = snappedCenter.snapKey;
+            this._lastLocalSnapGridPositionRevision = Math.max(0, Number(this._localSnapGridPointerRevision || 0));
 
             if (this.isZooming === true && !!this._lastLocalSnapGridKey) {
-                const snappedLayerLeft = Math.round(layerLeft);
-                const snappedLayerTop = Math.round(layerTop);
-                const transformKey = `${snappedLayerLeft}|${snappedLayerTop}`;
-                if (transformKey !== this._lastLocalSnapGridTransformKey) {
-                    this._lastLocalSnapGridTransformKey = transformKey;
-                    layer.style.transform = `translate3d(${snappedLayerLeft}px, ${snappedLayerTop}px, 0)`;
-                }
-                this._lastLocalSnapGridPositionRevision = Math.max(0, Number(this._localSnapGridPointerRevision || 0));
                 this._localSnapGridStyleDeferredForZoom = true;
                 this._setLocalSnapGridVisible(true, this._lastLocalSnapGridOpacity || null);
                 return true;
@@ -3770,20 +3832,17 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
 
             if (shouldDeferLocalGridStyleForZoom !== true) {
                 this._localSnapGridStyleDeferredForZoom = false;
-                this._applyLocalSnapGridStyle(layer, styleKind, smallStepPx, majorStepPx, opacity);
+                this._applyLocalSnapGridStyle(
+                    layer,
+                    styleKind,
+                    smallStepPx,
+                    majorStepPx,
+                    opacity
+                );
             } else if (shouldDeferLocalGridStyleForZoom === true) {
                 this._localSnapGridStyleDeferredForZoom = true;
             }
 
-            const snappedLayerLeft = Math.round(layerLeft);
-            const snappedLayerTop = Math.round(layerTop);
-            const transformKey = `${snappedLayerLeft}|${snappedLayerTop}`;
-            if (transformKey !== this._lastLocalSnapGridTransformKey) {
-                this._lastLocalSnapGridTransformKey = transformKey;
-                layer.style.transform = `translate3d(${snappedLayerLeft}px, ${snappedLayerTop}px, 0)`;
-            }
-            this._lastLocalSnapGridPositionRevision = Math.max(0, Number(this._localSnapGridPointerRevision || 0));
-
             this._setLocalSnapGridVisible(true, this._lastLocalSnapGridOpacity || opacity.toFixed(3));
             return true;
         }
@@ -3813,15 +3872,6 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
 
             const layer = this._localSnapGridLayer;
             const pointerRevision = Math.max(0, Number(this._localSnapGridPointerRevision || 0));
-            if (this.isZooming === true &&
-                this._localSnapGridVisible === true &&
-                this._lastLocalSnapGridKey &&
-                this._lastLocalSnapGridTransformKey &&
-                this._lastLocalSnapGridPositionRevision === pointerRevision) {
-                this._localSnapGridStyleDeferredForZoom = true;
-                return true;
-            }
-
             const viewportMetrics = getCachedViewportMetrics(this);
             const width = Math.max(1, Number(viewportMetrics.width || 0));
             const height = Math.max(1, Number(viewportMetrics.height || 0));
@@ -3840,17 +3890,21 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             const centerY = hasPointer
                 ? Math.max(0, Math.min(height, Number(this._lastSnapGridClientY) - top))
                 : height / 2;
-            const snappedCenter = this._getLocalSnapGridSnappedScreenCenter(centerX, centerY, width, height, this.camera);
-            const layerLeft = snappedCenter.centerX - LOCAL_SNAP_GRID_RADIUS_PX;
-            const layerTop = snappedCenter.centerY - LOCAL_SNAP_GRID_RADIUS_PX;
-            const snappedLayerLeft = Math.round(layerLeft);
-            const snappedLayerTop = Math.round(layerTop);
+            const snappedCenter = this._getLocalSnapGridSnappedScreenCenter(
+                centerX,
+                centerY,
+                width,
+                height,
+                this.camera
+            );
+            const snappedLayerLeft = Math.round(snappedCenter.centerX - LOCAL_SNAP_GRID_RADIUS_PX);
+            const snappedLayerTop = Math.round(snappedCenter.centerY - LOCAL_SNAP_GRID_RADIUS_PX);
             const transformKey = `${snappedLayerLeft}|${snappedLayerTop}`;
-
             if (transformKey !== this._lastLocalSnapGridTransformKey) {
                 this._lastLocalSnapGridTransformKey = transformKey;
                 layer.style.transform = `translate3d(${snappedLayerLeft}px, ${snappedLayerTop}px, 0)`;
             }
+            this._lastLocalSnapGridPointerSnapKey = snappedCenter.snapKey;
             this._lastLocalSnapGridPositionRevision = pointerRevision;
 
             if (this.isZooming === true) {
@@ -4761,6 +4815,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             // 3. CSS3D Renderer (??
             if (globalThis.CSS3DRenderer) {
                 this.cssRenderer = new globalThis.CSS3DRenderer();
+                window.MindMapCss3dHotPath?.ensureCssRendererHooks?.(this);
                 this.cssRenderer.setSize(this.container.clientWidth, this.container.clientHeight);
 
                 const cssEl = this.cssRenderer.domElement;
@@ -4892,7 +4947,10 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             }
             if (isLocalSnapGridOnlyTheme === true) {
                 this.currentThemeObject.visible = false;
+                this._syncLocalSnapGridBackgroundSurface();
                 this._syncLocalSnapGridLayer(true);
+            } else {
+                this._syncLocalSnapGridBackgroundSurface();
             }
             this._forceThemeAnimationFrame = true;
             this._forceUpdateFrames = Math.max(this._forceUpdateFrames || 0, 2);
@@ -6505,6 +6563,8 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     shouldUpdateResidentCssMediaFallback;
                 const prevVisibilityVersion = Number(this._visibilityVersion || 0);
                 const prevLodVisualEpoch = Number(this.lodRenderer?._lodVisualEpoch || 0);
+                const css3dVisualChangedSinceLastRenderAtFrameStart =
+                    this._css3dVisualChangedSinceLastRender === true;
                 this._css3dVisualChangedThisFrame = false;
                 let shouldSyncCss3dTransforms = false;
                 let lodUpdateCalledThisFrame = false;
@@ -6637,9 +6697,37 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     !hasNonCameraNavigationForcedUpdate &&
                     !hasPendingNearCssWarmup &&
                     !this.isWindowResizing;
+                const hasExactVisibilityDiff =
+                    visibilityChangedThisFrame === true &&
+                    this._lastVisibilityDiffComplete === true &&
+                    Number(this._lastVisibilityDiffVersion ?? -1) === Number(this._visibilityVersion || 0);
+                const canApplyCss3dVisibilityDiff =
+                    isFullResMode === true &&
+                    hasExactVisibilityDiff === true &&
+                    lodVisualEpochChangedThisFrame !== true &&
+                    css3dVisualChangedSinceLastRenderAtFrameStart !== true &&
+                    !isNodeInteracting &&
+                    !hasNonCameraNavigationForcedUpdate &&
+                    !hasPendingNearCssWarmup &&
+                    !this.isWindowResizing;
+                const css3dVisibilityDiffResult = canApplyCss3dVisibilityDiff
+                    ? window.MindMapCss3DManager?.applyVisibilityDiff?.(
+                        this,
+                        this._lastVisibilityEnteredIds || [],
+                        this._lastVisibilityExitedIds || []
+                    )
+                    : null;
+                const css3dVisibilityDiffAppliedThisFrame =
+                    css3dVisibilityDiffResult?.complete === true;
+                this._lastCss3dVisibilityPatch = css3dVisibilityDiffResult || null;
+                if (css3dVisibilityDiffAppliedThisFrame) {
+                    this._css3dVisualChangedThisFrame = false;
+                    this._css3dVisualChangedSinceLastRender = false;
+                }
                 const shouldSyncCss3dForVisibilityChange =
                     visibilityChangedThisFrame === true &&
-                    isIncrementalPanVisibilityFrame !== true;
+                    isIncrementalPanVisibilityFrame !== true &&
+                    css3dVisibilityDiffAppliedThisFrame !== true;
                 if (useTextOverlayV2 && lodVisualEpochChangedThisFrame) {
                     this._overlayDirty = true;
                 }
@@ -6977,10 +7065,16 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         this._syncMotionGridLayerForCameraNavigation();
                     }
                 }
+                const localSnapGridPointerRevision = Math.max(0, Number(this._localSnapGridPointerRevision || 0));
+                const hasPendingLocalSnapGridPointerMove =
+                    Number(this._lastLocalSnapGridPositionRevision ?? -1) !== localSnapGridPointerRevision;
                 const shouldUseLocalSnapGridPositionOnly = !!(
-                    isCameraNavigationOnlyInteractiveFrame === true &&
                     this._localSnapGridLayer?.isConnected &&
-                    this._lastLocalSnapGridKey
+                    this._lastLocalSnapGridKey &&
+                    (
+                        isCameraNavigationOnlyInteractiveFrame === true ||
+                        hasPendingLocalSnapGridPointerMove === true
+                    )
                 );
                 syncLocalSnapGridForCameraNavigation(this, shouldUseLocalSnapGridPositionOnly === true);
                 if (shouldRenderWebglFrame === true &&
@@ -7669,7 +7763,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         this.setBackgroundTheme(desiredTheme);
                     }
 
-                    this.container.style.backgroundColor = '';
+                    this._syncLocalSnapGridBackgroundSurface();
                     this.container.style.display = 'block';
 
                     if (this.renderer?.domElement) {
@@ -9794,6 +9888,11 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             }
             resetFramePerfPeakProfile(moduleInstance);
             moduleInstance._renderDebugMetricsSnapshotPeakMs = 0;
+            window.MindMapCss3dHotPath?.resetPerfCounters?.(moduleInstance);
+            moduleInstance.cssRenderer?.resetDebugCounters?.();
+            window.MindMapPipeline?.resetQueueDebugMetrics?.();
+            moduleInstance._lastRenderDebugMetricsSnapshot = null;
+            moduleInstance._lastRenderDebugMetricsSnapshotAt = 0;
             return true;
         },
         getOverlayDebugSnapshot: () => window.MindMapTextOverlayV2?.getDebugSnapshot?.(moduleInstance) || null,