@mindexec/cli 0.2.0

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

@@ -0,0 +1,1059 @@
+// File: mind-map-core.js
+// MindMap3D and component interface - core logic (simplified: style queue removed)
+(function () {
+    if (typeof MindMapInteractions === 'undefined' ||
+        typeof MindMapNodes === 'undefined' ||
+        typeof MindMapDnD === 'undefined' ||
+        typeof globalThis.THREE === 'undefined' ||
+        typeof window.MindMapThemes === 'undefined') {
+        console.error('[mind-map-core.js] Failed: dependencies not loaded.');
+        return;
+    }
+
+    let moduleInstance = null;
+
+    class MindMapModule {
+        constructor() {
+            this.scene = null;
+            this.camera = null;
+            this.renderer = null;
+            this.cssRenderer = null; // ▼▼▼ [Added] CSS3DRenderer reference ▼▼▼
+            this.dotNetHelper = null;
+            this.container = null;
+            this.animationFrameId = null;
+            this.nodeObjectsById = new Map();
+            this.lodUpdateQueue = []; // Initialize lodUpdateQueue
+            this.isPanning = false;
+            this.lastMousePos = { x: 0, y: 0 };
+            this.targetZ = null;
+            this.targetX = null;
+            this.targetY = null;
+            this.isDraggingNode = false;
+            this.draggedNodeObject = null;
+            this.startMousePos = { x: 0, y: 0 };
+            this.wasDragged = false;
+            this.clickStartTime = 0;
+            this.selectedNodeIdJs = null;
+            this.raycaster = null;
+            this.pointer = null;
+            this.plane = null;
+            this.intersectPoint = new THREE.Vector3();
+            this.dragOffset = new THREE.Vector3();
+            this.isSelecting = false;
+            this.isShiftSelecting = false;
+            this.selectionRectStartPos = { x: 0, y: 0 };
+            this.selectionRectElement = null;
+            this.isDraggingMultipleNodes = false;
+            this.multiSelectBox = null;
+            // ▼▼▼ [Changed] Initialize cursor position ▼▼▼
+            this.cursorPosition = new THREE.Vector3(0, 0, 0);
+            // ▲▲▲ [Changed] ▲▲▲
+            this.cursorMesh = null;
+            this.cursorMaterial = null;
+            this.cursorLineMaterial = null;
+
+            // ▼▼▼ [Changed] Initialize multi-drag related fields ▼▼▼
+            this.multiDragInitialPositions = new Map(); // Naming aligned (previous: initialMultiSelectPositions)
+            this.clickedNodeInitialPos = new THREE.Vector3(); // Fix: missing initialization
+            // ▲▲▲ [Changed] ▲▲▲
+
+            this.nodeZCounter = 1; // renderOrder counter
+
+            // ▼▼▼ [Core addition] Flag to track Note node editing state ▼▼▼
+            this.isEditingNote = false;
+            // ▲▲▲ [Core addition] ▲▲▲
+
+            // ▼▼▼ [Core addition] Multi-selection and spatial grid initialization ▼▼▼
+            this.multiSelectedNodeIds = new Set();
+            this.spatialGrid = new Map();
+            this.GRID_CELL_SIZE = 500;
+            // ▼▼▼ [Changed] 25 -> 10 (match background-themes.js 'XYGrid' size1) ▼▼▼
+            this.GRID_SIZE = 10;
+            // ▲▲▲ [Changed] ▲▲▲
+
+            // ▼▼▼ [Optimization] Add render-loop optimization fields ▼▼▼
+            this.frameCount = 0;
+            this.lastCameraPos = new THREE.Vector3();
+            this.lastCameraRot = new THREE.Euler();
+            // ▲▲▲ [Optimization] ▲▲▲
+
+            // ▼▼▼ [New] Texture Atlas Manager for batched rendering ▼▼▼
+            this.atlasManager = null; // Lazy init when needed
+            this.useAtlasRendering = false; // Feature flag - enable when stable
+            // ▲▲▲ [New] ▲▲▲
+        }
+
+        // Cursor snap function (keep legacy behavior: floor/ceil)
+        snapToGrid(v) { return Math.floor(v / this.GRID_SIZE) * this.GRID_SIZE; }
+        snapToGridY(v) { return Math.ceil(v / this.GRID_SIZE) * this.GRID_SIZE; }
+
+        // ▼▼▼ [New] Node snap function - use Math.round to snap to nearest grid ▼▼▼
+        snapNodeToGrid(v) { return Math.round(v / this.GRID_SIZE) * this.GRID_SIZE; }
+        // ▲▲▲ [New] ▲▲▲
+
+        init(containerId, helper) {
+            // Re-activate
+            if (this.container) {
+                const target = document.getElementById(containerId);
+                if (target && this.renderer) {
+                    try {
+                        if (this.renderer.domElement.parentElement) {
+                            this.renderer.domElement.parentElement.removeChild(this.renderer.domElement);
+                        }
+                        // ▼▼▼ [Added] Also remove the CSS3D canvas from the DOM ▼▼▼
+                        if (this.cssRenderer && this.cssRenderer.domElement.parentElement) {
+                            this.cssRenderer.domElement.parentElement.removeChild(this.cssRenderer.domElement);
+                        }
+                        // ▲▲▲ [Added] ▲▲▲
+                    } catch { }
+                    target.appendChild(this.renderer.domElement);
+                    // ▼▼▼ [Critical fix] Re-add missing CSS3D canvas ▼▼▼
+                    if (this.cssRenderer) {
+                        target.appendChild(this.cssRenderer.domElement);
+                    }
+                    // ▲▲▲ [Critical fix] ▲▲▲
+                    this.container = target;
+                    this.dotNetHelper = helper;
+                    window.dotNetHelper = helper; // Expose globally for NativeDropHandler access
+                    target.style.display = 'block';
+                    MindMapInteractions.onResize(this);
+                    if (!this.animationFrameId) this.animate();
+                    console.log(`[mind-map-core.js] Re-activated for #${containerId}.`);
+                    return;
+                }
+            }
+
+            // Initialize
+            this.dotNetHelper = helper;
+            window.dotNetHelper = helper; // Expose globally for NativeDropHandler access
+            this.container = document.getElementById(containerId);
+            if (!this.container) {
+                console.error('[mind-map-core.js] Container not found!');
+                return;
+            }
+            this.container.style.display = 'block';
+            const THREE = globalThis.THREE;
+            this.scene = new THREE.Scene();
+            this.debugGroup = new THREE.Group();
+            this.scene.add(this.debugGroup);
+
+            // ▼▼▼ [Cursor creation] Mesh + Line hybrid -----
+            this.cursorMesh = new THREE.Group();
+            const cursorSize = 20; // Cursor length
+            const thickness = 4;   // Cursor thickness
+
+            // Mesh material (background / thickness)
+            this.cursorMaterial = new THREE.MeshBasicMaterial({
+                color: 0xffffff,
+                transparent: true,
+                opacity: 1.0,
+                depthTest: false
+            });
+
+            // Line material (centerline)
+            this.cursorLineMaterial = new THREE.LineBasicMaterial({
+                color: 0xffffff,
+                transparent: false,
+                opacity: 1,
+                depthTest: false
+            });
+
+            // Mesh geometry (vertical/horizontal bars)
+            const vGeo = new THREE.BoxGeometry(thickness, cursorSize, 1);
+            const vMesh = new THREE.Mesh(vGeo, this.cursorMaterial);
+            vMesh.position.set(thickness / 2, -cursorSize / 2, 0);
+            vMesh.renderOrder = 9998;
+
+            const hGeo = new THREE.BoxGeometry(cursorSize, thickness, 1);
+            const hMesh = new THREE.Mesh(hGeo, this.cursorMaterial);
+            hMesh.position.set(cursorSize / 2, -thickness / 2, 0);
+            hMesh.renderOrder = 9998;
+
+            this.cursorMesh.add(vMesh);
+            this.cursorMesh.add(hMesh);
+
+            // Line geometry (position adjusted)
+            const lineGeo = new THREE.BufferGeometry().setFromPoints([
+                new THREE.Vector3(0, -cursorSize, 0),
+                new THREE.Vector3(0, 0, 0),
+                new THREE.Vector3(cursorSize, 0, 0)
+            ]);
+            const line = new THREE.Line(lineGeo, this.cursorLineMaterial);
+            line.position.z = 0.6;
+            line.renderOrder = 9999;
+            this.cursorMesh.add(line);
+
+            this.cursorMesh.position.set(0, 0, 1);
+            this.cursorMesh.renderOrder = 9999;
+            this.scene.add(this.cursorMesh);
+
+            if (this.updateCursorPosition) {
+                this.updateCursorPosition(0, 0);
+            }
+            // ▲▲▲ [Cursor creation] ▲▲▲
+
+            const NEAR = 0.1, FAR = 1e7;
+            this.camera = new THREE.PerspectiveCamera(50, this.container.clientWidth / this.container.clientHeight, NEAR, FAR);
+            const initialZ = 1200;
+            this.camera.position.z = initialZ;
+            this.targetZ = initialZ;
+            this.targetX = this.camera.position.x;
+            this.targetY = this.camera.position.y;
+
+            // ▼▼▼ [Changed] Add fallback logic if WebGLRenderer init fails (context limits, etc.) ▼▼▼
+            try {
+                this.renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true, alpha: true });
+            } catch (e) {
+                console.warn('[MindMap] WebGL context creation failed with advanced settings. Retrying with defaults.', e);
+                try {
+                    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+                } catch (e2) {
+                    console.warn('[MindMap] WebGL context creation failed with antialias. Retrying plain.', e2);
+                    this.renderer = new THREE.WebGLRenderer({ alpha: true });
+                }
+            }
+            // ▲▲▲ [Changed] ▲▲▲
+
+            this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
+            this.renderer.setPixelRatio(window.devicePixelRatio || 1);
+            this.renderer.setClearColor(0x000000, 0); // Transparent background for Space3D theme
+            // [Changed] Z-Index: 1, pointerEvents: 'none' (same as CodeMaster)
+            Object.assign(this.renderer.domElement.style, { position: 'absolute', top: 0, left: 0, zIndex: 1, pointerEvents: 'none' });
+            this.container.appendChild(this.renderer.domElement);
+
+            // ▼▼▼ [Changed] CSS3DRenderer initialization (same as CodeMaster) ▼▼▼
+            if (globalThis.CSS3DRenderer) {
+                this.cssRenderer = new globalThis.CSS3DRenderer();
+                this.cssRenderer.setSize(this.container.clientWidth, this.container.clientHeight);
+                // [Changed] Z-Index: 2 (top-most), pointerEvents: 'auto' (receive all events)
+                Object.assign(this.cssRenderer.domElement.style, {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    zIndex: 2,
+                    pointerEvents: 'auto'
+                });
+                this.container.appendChild(this.cssRenderer.domElement);
+                console.log('[mind-map-core.js] CSS3DRenderer initialized (Z-Index: 2, pointerEvents: auto)');
+            } else {
+                console.warn('[mind-map-core.js] CSS3DRenderer not available');
+            }
+            // ▲▲▲ [Changed] ▲▲▲
+
+            this.raycaster = new THREE.Raycaster();
+            this.pointer = new THREE.Vector2();
+            this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+            this.selectionRectElement = document.getElementById('selection-rectangle');
+
+            this.setBackgroundTheme('Space3D');
+
+            MindMapInteractions.addEventListeners(this);
+            MindMapDnD.addEventListeners(this);
+
+            this.animate();
+            // ▼▼▼ [Added] Initialize MenuManager ▼▼▼
+            if (window.MindMapMenuManager) {
+                window.MindMapMenuManager.init(this);
+            }
+            // ▲▲▲ [Added] ▲▲▲
+            // ▼▼▼ [Added] Initialize MultiSelect ▼▼▼
+            if (window.MindMapMultiSelect) {
+                window.MindMapMultiSelect.init(this);
+            }
+            // ▲▲▲ [Added] ▲▲▲
+
+            // ▼▼▼ [New] Initialize Atlas Manager (can be enabled later via enableAtlasRendering) ▼▼▼
+            if (window.TextureAtlasManager) {
+                this.initAtlasManager({ atlasSize: 4096, maxAtlasPages: 16 });
+                console.log('[mind-map-core.js] TextureAtlasManager ready (enable with mindMap.enableAtlasRendering(true))');
+            }
+            // ▲▲▲ [New] ▲▲▲
+
+            // ▼▼▼ [New] Initialize LOD Renderer for massive node counts ▼▼▼
+            // ▼▼▼ [TEMP DISABLED] LOD Renderer initialization to test if it causes rendering issues ▼▼▼
+            /*
+            if (window.LODRenderer) {
+                this.lodRenderer = new window.LODRenderer(this.renderer, this.scene);
+                console.log('[mind-map-core.js] LODRenderer ready (enable with mindMap.enableLOD(true))');
+            }
+            */
+            this.lodRenderer = null;
+            this.useLODRendering = false; // Disabled for testing - enable with mindMap.enableLOD(true)
+            // ▲▲▲ [TEMP DISABLED] ▲▲▲
+
+            console.log(`[mind-map-core.js] Initialized for #${containerId}.`);
+        }
+
+        setBackgroundTheme(themeName) {
+            if (themeName === this.currentThemeName || !this.scene || !window.MindMapThemes) return;
+            const newTheme = window.MindMapThemes.getTheme(themeName);
+            if (!newTheme) { console.warn(`[mind-map-core.js] Theme '${themeName}' not found.`); return; }
+            if (this.currentThemeObject) {
+                const oldTheme = window.MindMapThemes.getTheme(this.currentThemeName);
+                try { oldTheme?.dispose(this.currentThemeObject); } catch { }
+                if (this.scene) this.scene.remove(this.currentThemeObject);
+            }
+            this.currentThemeObject = newTheme.create(this.scene);
+            if (this.currentThemeObject) this.scene.add(this.currentThemeObject);
+            this.currentThemeName = themeName;
+        }
+
+        cullAndLOD() {
+            // ▼▼▼ [Optimization] Frustum culling ▼▼▼
+            // Nodes outside the camera frustum have visible=false, reducing draw calls
+            if (!this.camera || !this.scene) return;
+
+            // 1. Create a frustum and update it from the current camera projection matrix.
+            const frustum = new THREE.Frustum();
+            const projScreenMatrix = new THREE.Matrix4();
+            projScreenMatrix.multiplyMatrices(this.camera.projectionMatrix, this.camera.matrixWorldInverse);
+            frustum.setFromProjectionMatrix(projScreenMatrix);
+
+            // Check if LOD is controlling visibility
+            const lodControlsVisibility = this.useLODRendering && this.lodRenderer?.isInLODMode;
+
+            // 2. Iterate all nodes and check whether they are inside the frustum.
+            this.nodeObjectsById.forEach((nodeEntry, nodeId) => {
+                const glObject = nodeEntry.glObject;
+                if (!glObject || !glObject.userData) return;
+
+                // Compute a node bounding box.
+                const width = glObject.userData.worldWidth || 300;
+                const height = glObject.userData.worldHeight || 200;
+                const nodeBox = new THREE.Box3(
+                    new THREE.Vector3(glObject.position.x, glObject.position.y - height, glObject.position.z),
+                    new THREE.Vector3(glObject.position.x + width, glObject.position.y, glObject.position.z)
+                );
+
+                // 3. Determine visibility by checking frustum-box intersection.
+                const isVisible = frustum.intersectsBox(nodeBox);
+
+                // 4. Control visibility for both WebGL and CSS3D objects.
+                // Skip glObject visibility if LOD is controlling it
+                if (!lodControlsVisibility && glObject.visible !== isVisible) {
+                    glObject.visible = isVisible;
+                }
+                if (nodeEntry.cssObject && nodeEntry.cssObject.visible !== (isVisible && nodeEntry.currentType === 'CSS')) {
+                    nodeEntry.cssObject.visible = (isVisible && nodeEntry.currentType === 'CSS');
+                }
+            });
+            // ▲▲▲ [Optimization] ▲▲▲
+        }
+
+        animate() {
+            const loop = async () => {
+                this.animationFrameId = requestAnimationFrame(loop);
+
+                // Rendering always runs (camera interpolation, etc.)
+                // During resize the canvas is hidden and not visible to the user
+
+                if (this.currentThemeObject && typeof this.currentThemeObject.animate === 'function') {
+                    this.currentThemeObject.animate(this.camera);
+                }
+
+                const s = 0.25;
+                const oldPos = this.camera.position.clone(); // Position before movement
+
+                this.camera.position.x += (this.targetX - this.camera.position.x) * s;
+                this.camera.position.y += (this.targetY - this.camera.position.y) * s;
+                this.camera.position.z += (this.targetZ - this.camera.position.z) * s;
+
+                // ▼▼▼ [Optimization] If the camera barely moved, skip movement work (sleep mode) ▼▼▼
+                // (avoid unnecessary matrix updates)
+                const deltaMove = this.camera.position.distanceToSquared(oldPos);
+                const isCameraMoving = deltaMove > 0.0001;
+
+                // ▼▼▼ [Changed] Do not sync node positions during camera movement (Zoom/Pan) ▼▼▼
+                // Reason: PageUp/Down or wheel zoom moves only the camera.
+                // Forcing WebGL/CSS coordinate sync here can introduce numeric drift and cause nodes to "jump".
+
+                // [Changed] Only sync during drag operations (when nodes actually move)
+                if (this.isDraggingNode || this.isDraggingMultipleNodes) {
+                    this.nodeObjectsById.forEach((nodeEntry) => {
+                        if (nodeEntry.currentType === 'CSS' && nodeEntry.cssObject && nodeEntry.glObject) {
+                            if (!this.isEditingNote) {
+                                nodeEntry.glObject.position.copy(nodeEntry.cssObject.position);
+                            }
+                        }
+                    });
+                }
+                // ▲▲▲ [Changed] ▲▲▲
+
+                // ▼▼▼ [New] LOD Rendering for massive node counts ▼▼▼
+                if (this.useLODRendering && this.lodRenderer) {
+                    this.lodRenderer.updateLOD(this.camera, this.nodeObjectsById);
+                }
+                // ▲▲▲ [New] ▲▲▲
+
+                // ▼▼▼ [Optimization] Throttle frustum culling & LOD frequency ▼▼▼
+                // Run only when the camera moves, or once every 10 frames
+                this.frameCount = (this.frameCount || 0) + 1;
+                if (isCameraMoving || this.frameCount % 10 === 0) {
+                    this.cullAndLOD();
+                }
+                // ▲▲▲ [Optimization] ▲▲▲
+
+                if (this.cursorMaterial) {
+                    const time = Date.now() * 0.005;
+                    const val = (Math.sin(time) * 0.5) + 0.5;
+                    this.cursorMaterial.color.setRGB(val, val, val);
+                    if (this.cursorLineMaterial) {
+                        this.cursorLineMaterial.color.setRGB(val, val, val);
+                    }
+                }
+                this.renderer.render(this.scene, this.camera);
+
+                if (this.cssRenderer) {
+                    this.cssRenderer.render(this.scene, this.camera);
+                }
+
+                // ▼▼▼ [Added] Sync menu position ▼▼▼
+                if (window.MindMapMenuManager) {
+                    window.MindMapMenuManager.update();
+                }
+                // ▲▲▲ [Added] ▲▲▲
+                // ▼▼▼ [Added] Sync multi-select overlay position ▼▼▼
+                if (window.MindMapMultiSelect) {
+                    window.MindMapMultiSelect.update();
+                }
+                // ▲▲▲ [Added] ▲▲▲
+            };
+            loop();
+        }
+
+        updateCursorPosition(x, y, moveCamera = false, cameraTarget = null) {
+            const snappedX = this.snapToGrid(x);
+            const snappedY = this.snapToGridY(y);
+
+            this.cursorPosition.set(snappedX, snappedY, 0);
+            if (this.cursorMesh) {
+                this.cursorMesh.position.set(snappedX, snappedY, 1);
+            }
+
+            if (moveCamera) {
+                let targetCenterX = snappedX;
+                let targetCenterY = snappedY;
+
+                if (cameraTarget) {
+                    targetCenterX = cameraTarget.x;
+                    targetCenterY = cameraTarget.y;
+                }
+
+                if (this.camera) {
+                    const vfov = (this.camera.fov * Math.PI) / 180;
+                    const viewHeight = 2 * Math.tan(vfov / 2) * this.camera.position.z;
+                    const yOffset = viewHeight * 0.3;
+                    this.targetX = targetCenterX;
+                    this.targetY = targetCenterY - yOffset;
+                } else {
+                    this.targetX = targetCenterX;
+                    this.targetY = targetCenterY;
+                }
+            }
+        }
+
+        hide() {
+            if (this.container) {
+                this.container.style.display = 'none';
+                if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); this.animationFrameId = null; }
+            }
+        }
+
+        cleanupAndDispose() {
+            if (!this.container) return;
+            if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); this.animationFrameId = null; }
+
+            MindMapInteractions.removeEventListeners(this);
+            MindMapDnD.removeEventListeners(this);
+
+            if (this.scene && this.debugGroup) { this.scene.remove(this.debugGroup); }
+            this.debugGroup = null;
+
+            if (this.currentThemeObject && window.MindMapThemes) {
+                const theme = window.MindMapThemes.getTheme(this.currentThemeName);
+                try { theme?.dispose(this.currentThemeObject); } catch { }
+                if (this.scene) this.scene.remove(this.currentThemeObject);
+            }
+            this.currentThemeObject = null;
+            this.currentThemeName = null;
+
+            MindMapNodes.resetState(this);
+
+            if (this.scene) {
+                this.scene.traverse(o => {
+                    if (o.geometry) o.geometry.dispose();
+                    if (o.material) {
+                        if (Array.isArray(o.material)) o.material.forEach(m => m.dispose());
+                        else o.material.dispose();
+                    }
+                });
+            }
+
+            if (this.renderer) {
+                this.renderer.dispose();
+                // ▼▼▼ [Changed] Force context loss to prevent context leaks ▼▼▼
+                try {
+                    if (typeof this.renderer.forceContextLoss === 'function') {
+                        this.renderer.forceContextLoss();
+                    } else {
+                        const gl = this.renderer.getContext();
+                        if (gl && gl.getExtension) {
+                            const ext = gl.getExtension('WEBGL_lose_context');
+                            if (ext) ext.loseContext();
+                        }
+                    }
+                } catch (e) { console.warn('[MindMap] Failed to lose context:', e); }
+                this.renderer.domElement = null;
+                this.renderer = null; // Release reference
+                // ▲▲▲ [Changed] ▲▲▲
+            }
+
+            // ▼▼▼ [Added] Cleanup CSS3DRenderer ▼▼▼
+            if (this.cssRenderer && this.cssRenderer.domElement) {
+                if (this.cssRenderer.domElement.parentElement) {
+                    this.cssRenderer.domElement.parentElement.removeChild(this.cssRenderer.domElement);
+                }
+            }
+            this.cssRenderer = null;
+            // ▲▲▲ [Added] ▲▲▲
+
+            this.scene = null;
+            this.camera = null;
+            this.renderer = null;
+            this.container = null;
+            this.dotNetHelper = null;
+            window.dotNetHelper = null; // Cleanup global reference too
+            this.lodUpdateQueue = [];
+        }
+
+        toggleDebugLines() {
+            if (!this.scene) return;
+            const DEBUG_GROUP_NAME = 'MindMapDebugLines';
+            let debugGroup = this.scene.getObjectByName(DEBUG_GROUP_NAME);
+            if (debugGroup) {
+                this.scene.remove(debugGroup);
+                debugGroup.traverse(child => { if (child.geometry) child.geometry.dispose(); if (child.material) child.material.dispose(); });
+                console.log('[MindMap] Debug lines hidden.');
+            } else {
+                debugGroup = new THREE.Group();
+                debugGroup.name = DEBUG_GROUP_NAME;
+                this.nodeObjectsById.forEach(nodeEntry => {
+                    const glObject = nodeEntry.glObject;
+                    if (glObject) {
+                        glObject.traverse(child => {
+                            if (child.isMesh) {
+                                const edges = new THREE.EdgesGeometry(child.geometry);
+                                const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0xff00ff }));
+                                const childWorldPos = new THREE.Vector3();
+                                child.getWorldPosition(childWorldPos);
+                                line.position.copy(childWorldPos);
+                                line.rotation.copy(child.rotation);
+                                line.scale.copy(child.scale);
+                                debugGroup.add(line);
+                            }
+                        });
+                    }
+                });
+                this.scene.add(debugGroup);
+                console.log('[MindMap] Debug lines shown.');
+            }
+        }
+
+        // ▼▼▼ [Changed] Expand camera & cursor state save/restore API ▼▼▼
+        getCameraState() {
+            if (!this.camera) return { x: 0, y: 0, z: 1200, cursorX: 0, cursorY: 0 };
+            return {
+                x: this.camera.position.x,
+                y: this.camera.position.y,
+                z: this.camera.position.z,
+                cursorX: this.cursorPosition?.x ?? 0,
+                cursorY: this.cursorPosition?.y ?? 0
+            };
+        }
+
+        setCameraState(x, y, z, cursorX, cursorY) {
+            if (!this.camera) return;
+
+            this.targetX = x;
+            this.targetY = y;
+            this.targetZ = z;
+            this.camera.position.set(x, y, z);
+
+            if (cursorX !== undefined && cursorY !== undefined) {
+                this.updateCursorPosition(cursorX, cursorY, false);
+            }
+        }
+
+        getNodePositions() {
+            if (!this.nodeObjectsById) return [];
+
+            const positions = [];
+            this.nodeObjectsById.forEach((entry, nodeId) => {
+                const obj = entry?.glObject || entry?.cssObject;
+                if (!obj || !obj.position) return;
+                positions.push({
+                    nodeId: String(nodeId),
+                    x: obj.position.x,
+                    y: obj.position.y
+                });
+            });
+            return positions;
+        }
+        // ▲▲▲ [Modified] ▲▲▲
+
+        // ▼▼▼ [New] Texture Atlas Manager methods ▼▼▼
+        initAtlasManager(options = {}) {
+            if (!window.TextureAtlasManager) {
+                console.warn('[MindMapModule] TextureAtlasManager not loaded');
+                return null;
+            }
+            if (!this.atlasManager) {
+                this.atlasManager = new window.TextureAtlasManager({
+                    atlasSize: options.atlasSize || 4096,
+                    maxAtlasPages: options.maxAtlasPages || 16
+                });
+                console.log('[MindMapModule] TextureAtlasManager initialized');
+            }
+            return this.atlasManager;
+        }
+
+        getAtlasManager() {
+            return this.atlasManager;
+        }
+
+        getAtlasStats() {
+            if (!this.atlasManager) return null;
+            return this.atlasManager.getStats();
+        }
+
+        enableAtlasRendering(enabled = true) {
+            this.useAtlasRendering = enabled;
+            console.log(`[MindMapModule] Atlas rendering ${enabled ? 'enabled' : 'disabled'}`);
+        }
+        // ▲▲▲ [New] ▲▲▲
+
+        // ▼▼▼ [New] LOD Renderer methods ▼▼▼
+        enableLOD(enabled = true) {
+            this.useLODRendering = enabled;
+            if (this.lodRenderer) {
+                if (enabled) {
+                    // When enabling, generate thumbnails for existing nodes SYNCHRONOUSLY
+                    const textureCache = window.MindMapNodes?.textureCache;
+                    let generatedCount = 0;
+                    this.nodeObjectsById.forEach((entry, nodeId) => {
+                        // Try to get the source canvas from texture cache
+                        const cached = textureCache?.get(nodeId);
+                        if (cached?.default?.body?.image) {
+                            const sourceCanvas = cached.default.body.image;
+                            const model = entry.model;
+                            const w = model?.width || 400;
+                            const h = model?.height || 200;
+                            // Use generateThumbnail directly (sync) instead of addNode (async queue)
+                            this.lodRenderer.generateThumbnail(nodeId, sourceCanvas, w, h);
+                            generatedCount++;
+                        }
+                    });
+                    console.log(`[MindMapModule] LOD enabled, generated ${generatedCount} thumbnails for existing nodes`);
+                } else {
+                    // When disabling, make sure all individual nodes are visible
+                    this.nodeObjectsById.forEach((entry) => {
+                        if (entry.glObject) entry.glObject.visible = true;
+                    });
+                    if (this.lodRenderer.instancedMesh) {
+                        this.lodRenderer.instancedMesh.visible = false;
+                    }
+                    this.lodRenderer.isInLODMode = false;
+                    console.log(`[MindMapModule] LOD rendering disabled`);
+                }
+            } else {
+                console.warn('[MindMapModule] LODRenderer not initialized');
+            }
+        }
+        getLODStats() {
+            if (!this.lodRenderer) return null;
+            return this.lodRenderer.getStats();
+        }
+
+        addNodeToLOD(nodeId, canvas, width, height) {
+            if (this.lodRenderer && canvas) {
+                this.lodRenderer.addNode(nodeId, canvas, width, height);
+            }
+        }
+
+        removeNodeFromLOD(nodeId) {
+            if (this.lodRenderer) {
+                this.lodRenderer.removeNode(nodeId);
+            }
+        }
+        // ▲▲▲ [New] ▲▲▲
+    } // End MindMapModule class
+
+    window.mindMap = {
+        init: (id, h) => { if (!moduleInstance) moduleInstance = new MindMapModule(); moduleInstance.init(id, h); },
+        addNode: async (m) => { if (moduleInstance) await MindMapNodes.addNode(moduleInstance, m); },
+        // ▼▼▼ [Optimization] Batch processing to avoid blocking the UI thread ▼▼▼
+        addNodes: async (models) => {
+            if (!moduleInstance || !models || models.length === 0) return;
+
+            console.log(`[mindMap.addNodes] Starting batch add for ${models.length} nodes`);
+            const CHUNK_SIZE = 5; // Nodes per chunk
+
+            for (let i = 0; i < models.length; i += CHUNK_SIZE) {
+                const chunk = models.slice(i, i + CHUNK_SIZE);
+                console.log(`[mindMap.addNodes] Processing chunk ${Math.floor(i / CHUNK_SIZE) + 1}/${Math.ceil(models.length / CHUNK_SIZE)} (${chunk.length} nodes)`);
+
+                // Process nodes sequentially within the chunk (each node may do heavy work like texture creation)
+                for (const m of chunk) {
+                    await MindMapNodes.addNode(moduleInstance, m);
+                }
+
+                // Yield to the UI thread (allow one render cycle)
+                if (i + CHUNK_SIZE < models.length) {
+                    await new Promise(r => requestAnimationFrame(r));
+                }
+            }
+
+            console.log(`[mindMap.addNodes] Batch add completed for ${models.length} nodes`);
+        },
+        // ▲▲▲ [Optimization] ▲▲▲
+        removeNode: (id) => { if (moduleInstance) MindMapNodes.removeNode(moduleInstance, id); },
+        updateNodeContent: async (id, content, w = null, h = null, isLoading = null) => { if (moduleInstance) await MindMapNodes.updateNodeContent(moduleInstance, id, content, w, h, isLoading); },
+        // ▼▼▼ [Changed] Apply chunked batch processing to reduce browser load during bulk updates ▼▼▼
+        updateMultipleNodesContent: async (details) => {
+            if (!moduleInstance || !details || details.length === 0) return;
+
+            console.log(`[mindMap.updateMultipleNodesContent] Starting batch update for ${details.length} nodes`);
+
+            // Nodes per chunk (to reduce browser load)
+            // 5-10 is typically stable.
+            const CHUNK_SIZE = 5;
+
+            // Split the array into chunks
+            for (let i = 0; i < details.length; i += CHUNK_SIZE) {
+                const chunk = details.slice(i, i + CHUNK_SIZE);
+
+                // Run only the current chunk in parallel
+                const updatePromises = chunk.map(detail => {
+                    return new Promise(async (resolve, reject) => {
+                        const maxWaitTime = 2000; // Increased wait time: 1s -> 2s
+                        const startTime = performance.now();
+
+                        // Wait until the node object is created (polling)
+                        while (!moduleInstance.nodeObjectsById.has(detail.nodeId) && (performance.now() - startTime < maxWaitTime)) {
+                            await new Promise(r => setTimeout(r, 50));
+                        }
+
+                        if (!moduleInstance.nodeObjectsById.has(detail.nodeId)) {
+                            console.warn(`[mindMap] Timeout waiting for node: ${detail.nodeId}`);
+                            // Resolve so the overall process continues even on failure
+                            return resolve();
+                        }
+
+                        // Perform the actual content (image) update
+                        MindMapNodes.updateNodeContent(moduleInstance, detail.nodeId, detail.fileUrl, detail.width, detail.height)
+                            .then(resolve)
+                            .catch(err => {
+                                console.warn(`[mindMap] Update failed for ${detail.nodeId}:`, err);
+                                resolve(); // Resolve to keep going even if an error occurs
+                            });
+                    });
+                });
+
+                // Wait for all work in the current chunk
+                await Promise.all(updatePromises);
+
+                // Yield to the UI thread (allow a render cycle)
+                if (i + CHUNK_SIZE < details.length) {
+                    await new Promise(r => requestAnimationFrame(r));
+                }
+            }
+
+            console.log(`[mindMap.updateMultipleNodesContent] Batch update completed for ${details.length} nodes`);
+        },
+        // ▲▲▲ [Changed] ▲▲▲
+        // ▼▼▼ [New] Add a function to sync selection state from C# to JS ▼▼▼
+        updateNodeSelection: (oldNodeId, newNodeId) => {
+            if (!moduleInstance) return;
+
+            // Convert empty strings to null
+            const actualOldId = oldNodeId || null;
+            const actualNewId = newNodeId || null;
+
+            console.log(`[mindMap.updateNodeSelection] old=${actualOldId}, new=${actualNewId}`);
+
+            // ▼▼▼ [Changed] Remove automatic WebGL switching logic ▼▼▼
+            // (This logic was moved to interactions.js blurActiveEditable() and
+            // the blur event handler in css3d-manager.js.)
+            /*
+            if (actualOldId && actualOldId !== actualNewId) {
+                const oldEntry = moduleInstance.nodeObjectsById.get(actualOldId);
+                if (oldEntry && oldEntry.model.contentType === 'note' && oldEntry.currentType === 'CSS') {
+                    console.log(`[mindMap.updateNodeSelection] Switching old note ${actualOldId} back to WebGL`);
+                    MindMapNodes.switchToWebGL(moduleInstance, actualOldId);
+                }
+            }
+            */
+            // ▲▲▲ [Changed] ▲▲▲
+
+            // 2. Update JS internal state
+            if (actualNewId) {
+                console.log(`[mindMap.updateNodeSelection] Setting selectedNodeIdJs to ${actualNewId}`);
+                MindMapNodes.clearMultiSelection(moduleInstance, actualNewId);
+                moduleInstance.selectedNodeIdJs = actualNewId;
+                MindMapNodes.updateNodeSelectionStyle(moduleInstance, actualNewId, true, true);
+            } else {
+                console.log(`[mindMap.updateNodeSelection] Clearing selection (null)`);
+                MindMapNodes.clearMultiSelection(moduleInstance, null);
+                moduleInstance.selectedNodeIdJs = null;
+            }
+        },
+        // ▲▲▲ [New] ▲▲▲
+        // ▼▼▼ [New] Add hybrid rendering helpers ▼▼▼
+        switchToCss3D: async (id) => { if (moduleInstance) await MindMapNodes.switchToCss3D(moduleInstance, id); },
+        switchToWebGL: async (id) => { if (moduleInstance) await MindMapNodes.switchToWebGL(moduleInstance, id); },
+        // ▲▲▲ [New] ▲▲▲
+        // ▼▼▼ [New] Convert node content type (e.g., text to note for editing) ▼▼▼
+        updateNodeContentType: async (id, newType) => { if (moduleInstance) await MindMapNodes.updateNodeContentType(moduleInstance, id, newType); },
+        // ▲▲▲ [New] ▲▲▲
+
+        // ▼▼▼ [Added] Pause/resume rendering ▼▼▼
+        pause: () => {
+            if (moduleInstance && moduleInstance.animationFrameId) {
+                cancelAnimationFrame(moduleInstance.animationFrameId);
+                moduleInstance.animationFrameId = null;
+                console.log('[MindMap] Animation paused.');
+            }
+        },
+        resume: () => {
+            if (moduleInstance && !moduleInstance.animationFrameId) {
+                moduleInstance.animate();
+                console.log('[MindMap] Animation resumed.');
+            }
+        },
+        // ▲▲▲ [Added] ▲▲▲
+
+        // ▼▼▼ [Changed] Expand camera & cursor state save/restore API ▼▼▼
+        getCameraState: () => {
+            if (moduleInstance) return moduleInstance.getCameraState();
+            return { x: 0, y: 0, z: 1200, cursorX: 0, cursorY: 0 };
+        },
+        setCameraState: (x, y, z, cx, cy) => {
+            if (moduleInstance) moduleInstance.setCameraState(x, y, z, cx, cy);
+        },
+
+        getNodePositions: () => {
+            if (moduleInstance) return moduleInstance.getNodePositions();
+            return [];
+        },
+        // ▲▲▲ [Changed] ▲▲▲
+
+        setBackgroundTheme: (name) => { if (moduleInstance) moduleInstance.setBackgroundTheme(name); },
+        hide: () => { if (moduleInstance) moduleInstance.hide(); },
+        toggleDebug: () => { if (moduleInstance) moduleInstance.toggleDebugLines(); },
+        cleanupAndDispose: () => { if (moduleInstance) { moduleInstance.cleanupAndDispose(); moduleInstance = null; } },
+
+        // ▼▼▼ [New] LOD Rendering API ▼▼▼
+        enableLOD: (enabled = true) => { if (moduleInstance) moduleInstance.enableLOD(enabled); },
+        getLODStats: () => { if (moduleInstance) return moduleInstance.getLODStats(); return null; },
+        // ▲▲▲ [New] ▲▲▲
+
+        // ▼▼▼ [New] Reset nodes on board switch (keep WebGL context) ▼▼▼
+        resetBoard: () => {
+            if (!moduleInstance) return;
+            console.log('[MindMap] resetBoard: Clearing all nodes for board switch...');
+
+            // 1. Remove all node objects from the scene
+            if (moduleInstance.nodeObjectsById) {
+                moduleInstance.nodeObjectsById.forEach((nodeEntry, nodeId) => {
+                    try {
+                        // Remove WebGL object
+                        if (nodeEntry.glObject && moduleInstance.scene) {
+                            moduleInstance.scene.remove(nodeEntry.glObject);
+                            nodeEntry.glObject.traverse(child => {
+                                if (child.geometry) child.geometry.dispose();
+                                if (child.material) {
+                                    if (Array.isArray(child.material)) {
+                                        child.material.forEach(m => m.dispose());
+                                    } else {
+                                        child.material.dispose();
+                                    }
+                                }
+                            });
+                        }
+                        // Remove CSS3D object
+                        if (nodeEntry.cssObject && moduleInstance.scene) {
+                            moduleInstance.scene.remove(nodeEntry.cssObject);
+                        }
+                    } catch (e) {
+                        console.warn(`[MindMap] Failed to remove node ${nodeId}:`, e);
+                    }
+                });
+            }
+
+            // 2. Reset MindMapNodes state (texture cache, etc.)
+            MindMapNodes.resetState(moduleInstance);
+
+            console.log('[MindMap] resetBoard: All nodes cleared.');
+        },
+        // ▲▲▲ [New] ▲▲▲
+
+        // ▼▼▼ [New] Hide canvases immediately before window resize ▼▼▼
+        hideForResize: () => {
+            if (!moduleInstance) return;
+            moduleInstance.isWindowResizing = true;
+
+            // Fully hide canvases
+            if (moduleInstance.renderer && moduleInstance.renderer.domElement) {
+                moduleInstance.renderer.domElement.style.visibility = 'hidden';
+            }
+            if (moduleInstance.cssRenderer && moduleInstance.cssRenderer.domElement) {
+                moduleInstance.cssRenderer.domElement.style.visibility = 'hidden';
+            }
+            // Set a white background on the container
+            if (moduleInstance.container) {
+                moduleInstance.container.style.backgroundColor = 'white';
+            }
+        },
+        // ▲▲▲ [New] ▲▲▲
+
+        // ▼▼▼ [New] Settings application API ▼▼▼
+        applySettings: (settings) => {
+            if (!moduleInstance) return;
+            console.log('[MindMap] Applying settings:', settings);
+
+            // Enable/disable grid snapping
+            if (settings.gridSnapEnabled !== undefined) {
+                moduleInstance.gridSnapEnabled = settings.gridSnapEnabled;
+            }
+
+            // Change grid type
+            if (settings.gridType) {
+                const themeMap = {
+                    'space3d': 'Space3D',
+                    'default': 'XYGrid',
+                    'dot': 'SpatialGrid2D'
+                };
+                const themeName = themeMap[settings.gridType] || 'Space3D';
+                moduleInstance.setBackgroundTheme(themeName);
+            }
+
+            // Camera trace mode
+            if (settings.cameraTraceMode !== undefined) {
+                moduleInstance.cameraTraceMode = settings.cameraTraceMode;
+            }
+
+            // ▼▼▼ [New] Default AI node size settings ▼▼▼
+            if (settings.aiNodeDefaultWidth !== undefined) {
+                moduleInstance.aiNodeDefaultWidth = settings.aiNodeDefaultWidth;
+            }
+            if (settings.aiNodeDefaultHeight !== undefined) {
+                moduleInstance.aiNodeDefaultHeight = settings.aiNodeDefaultHeight;
+            }
+            // Show full AI response (no height limit)
+            if (settings.showFullAiResponse !== undefined) {
+                moduleInstance.showFullAiResponse = settings.showFullAiResponse;
+            }
+
+            // Cursor direction (horizontal / vertical)
+            if (settings.cursorDirection !== undefined) {
+                moduleInstance.cursorDirection = settings.cursorDirection;
+            }
+            // ▲▲▲ [New] ▲▲▲
+        },
+
+        // Get current settings
+        getSettings: () => {
+            if (!moduleInstance) return {};
+            return {
+                gridSnapEnabled: moduleInstance.gridSnapEnabled !== false, // Default: true
+                gridType: moduleInstance.currentThemeName === 'SpatialGrid2D' ? 'dot' : 'default',
+                cameraTraceMode: moduleInstance.cameraTraceMode || 'cursor',
+                aiNodeDefaultWidth: moduleInstance.aiNodeDefaultWidth || 400,
+                aiNodeDefaultHeight: moduleInstance.aiNodeDefaultHeight || 200,
+                showFullAiResponse: moduleInstance.showFullAiResponse || false,
+                cursorDirection: moduleInstance.cursorDirection || 'horizontal'
+            };
+        },
+        // ▲▲▲ [New] ▲▲▲
+
+        // ▼▼▼ [New] Helper functions for native drop ▼▼▼
+        // Screen coordinates -> world coordinates
+        screenToWorld: (screenX, screenY) => {
+            if (!moduleInstance || !moduleInstance.camera || !moduleInstance.container) {
+                return [0, 0];
+            }
+
+            const container = moduleInstance.container;
+            const camera = moduleInstance.camera;
+
+            // Compute NDC coordinates
+            const ndcX = (screenX / container.clientWidth) * 2 - 1;
+            const ndcY = -(screenY / container.clientHeight) * 2 + 1;
+
+            // Compute view extents
+            const vfov = (camera.fov * Math.PI) / 180;
+            const viewHeight = 2 * Math.tan(vfov / 2) * camera.position.z;
+            const viewWidth = viewHeight * camera.aspect;
+
+            // Compute world coordinates
+            const worldX = camera.position.x + (ndcX * viewWidth) / 2;
+            const worldY = camera.position.y + (ndcY * viewHeight) / 2;
+
+            return [worldX, worldY];
+        },
+
+        // Measure image size (for C# native drop)
+        measureImageSize: (src) => {
+            return new Promise((resolve) => {
+                const img = new Image();
+                img.onload = () => {
+                    resolve([img.naturalWidth, img.naturalHeight]);
+                };
+                img.onerror = () => {
+                    resolve([400, 300]); // Default
+                };
+                img.src = src;
+            });
+        },
+
+        // Create Blob URL from byte array (much faster than base64)
+        createBlobUrl: (bytes, mimeType) => {
+            try {
+                const blob = new Blob([bytes], { type: mimeType });
+                const url = URL.createObjectURL(blob);
+                console.log(`[mindMap.createBlobUrl] Created Blob URL (${Math.round(bytes.length / 1024)}KB, ${mimeType})`);
+                return url;
+            } catch (ex) {
+                console.error(`[mindMap.createBlobUrl] Failed: ${ex}`);
+                return null;
+            }
+        },
+
+        // Revoke Blob URL to free memory
+        revokeBlobUrl: (url) => {
+            if (url && url.startsWith('blob:')) {
+                URL.revokeObjectURL(url);
+            }
+        },
+        // ▲▲▲ [New] ▲▲▲
+
+        // ▼▼▼ [New] Atlas rendering API ▼▼▼
+        initAtlas: (options) => {
+            if (moduleInstance) return moduleInstance.initAtlasManager(options);
+            return null;
+        },
+        getAtlasStats: () => {
+            if (moduleInstance) return moduleInstance.getAtlasStats();
+            return null;
+        },
+        enableAtlasRendering: (enabled) => {
+            if (moduleInstance) moduleInstance.enableAtlasRendering(enabled);
+        }
+        // ▲▲▲ [New] ▲▲▲
+    };
+
+    // Backward-compatible alias: MindCanvas is the new page/internal name, but the underlying surface is the same.
+    window.mindCanvas = window.mindMap;
+
+    console.log('? mind-map-core.js loaded (simplified, style queue removed).');
+})();