@mindexec/cli 0.2.383 → 0.2.385

package/wwwroot/_content/MindExecution.Shared/js/mind-map-object-manager.js

@@ -0,0 +1,489 @@
+// File: mind-map-object-manager.js
+// [Refactor] Creates and updates WebGL node groups (THREE.Group / THREE.Mesh).
+(function () {
+    'use strict';
+    // Keep glow purely in CSS layers; avoid spending WebGL budget on halo effects.
+    const ENABLE_WEBGL_GLOW = false;
+    const MEMO_WEBGL_THEMES = {
+        coral: { fill: 0xfff1eb, border: 0xf7b08d, accent: 0xff8052 },
+        amber: { fill: 0xfff7df, border: 0xf4d06f, accent: 0xf59e0b },
+        sun: { fill: 0xfff9d7, border: 0xe7d668, accent: 0xca8a04 },
+        sage: { fill: 0xeef6e7, border: 0xbed79f, accent: 0x65a30d },
+        mint: { fill: 0xe8faf4, border: 0x8fd8c1, accent: 0x10b981 },
+        sky: { fill: 0xe8f4ff, border: 0x9dc7f7, accent: 0x3b82f6 },
+        indigo: { fill: 0xeef0ff, border: 0xbcc2ff, accent: 0x6366f1 },
+        violet: { fill: 0xf5ecff, border: 0xd6b8ff, accent: 0x8b5cf6 },
+        rose: { fill: 0xffeef2, border: 0xf5b2c2, accent: 0xf43f5e },
+        gray: { fill: 0xf3f4f6, border: 0xd1d5db, accent: 0x6b7280 },
+        slate: { fill: 0xf3f5f7, border: 0xcbd5e1, accent: 0x64748b }
+    };
+
+    function getNodeMetadata(nodeModel) {
+        return nodeModel?.metadata || nodeModel?.Metadata || null;
+    }
+
+    function isAgentStyledMemoNode(nodeModel) {
+        const metadata = getNodeMetadata(nodeModel);
+        const semanticType = String(metadata?.SemanticType || metadata?.semanticType || '').trim();
+        return semanticType === 'MindCanvasAgent' || semanticType === 'AgentCommand';
+    }
+
+    function getMemoWebglTheme(nodeModel) {
+        const fallbackKey = 'coral';
+        const key = String(getNodeMetadata(nodeModel)?.memoColor || fallbackKey).toLowerCase();
+        return MEMO_WEBGL_THEMES[key] || MEMO_WEBGL_THEMES[fallbackKey];
+    }
+
+    function createRoundedRectGeometry(width, height, radius) {
+        const shape = new THREE.Shape();
+        const x = -width / 2;
+        const y = -height / 2;
+
+        // Start at bottom-left, go clockwise
+        shape.moveTo(x, y + radius);
+        shape.quadraticCurveTo(x, y, x + radius, y);
+
+        shape.lineTo(x + width - radius, y);
+        shape.quadraticCurveTo(x + width, y, x + width, y + radius);
+
+        shape.lineTo(x + width, y + height - radius);
+        shape.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+
+        shape.lineTo(x + radius, y + height);
+        shape.quadraticCurveTo(x, y + height, x, y + height - radius);
+
+        shape.lineTo(x, y + radius);
+
+        const points = shape.getPoints();
+        return new THREE.BufferGeometry().setFromPoints(points);
+    }
+
+    // ▼▼▼ [New] Create FILLED rounded rectangle for scrollbar ▼▼▼
+    // Note: This draws DOWNWARD (negative Y) to match node coordinate system
+    function createRoundedRectFilledGeometry(width, height, radius) {
+        const shape = new THREE.Shape();
+        const x = 0;
+        const y = 0;
+        const r = Math.min(radius, width / 2, height / 2);
+        const h = -height; // Draw downward (negative Y direction)
+
+        // Start at top-left corner, draw clockwise (going down)
+        shape.moveTo(x + r, y);
+        shape.lineTo(x + width - r, y);
+        shape.quadraticCurveTo(x + width, y, x + width, y - r);
+        shape.lineTo(x + width, y + h + r);
+        shape.quadraticCurveTo(x + width, y + h, x + width - r, y + h);
+        shape.lineTo(x + r, y + h);
+        shape.quadraticCurveTo(x, y + h, x, y + h + r);
+        shape.lineTo(x, y - r);
+        shape.quadraticCurveTo(x, y, x + r, y);
+
+        return new THREE.ShapeGeometry(shape);
+    }
+    // ▲▲▲ [New] ▲▲▲
+
+    const IMAGE_SELECTION_GLOW_PAD = 18;
+    const IMAGE_SELECTION_GLOW_COLOR = 0x1e3a8a;
+    const IMAGE_SELECTION_GLOW_OPACITY = 0.18;
+
+    function syncImageSelectionGlow(group, width, height, baseRenderOrder, isSelected) {
+        if (!group) return null;
+
+        let outline = group.getObjectByName('outline');
+        if (!outline) {
+            outline = new THREE.Mesh(
+                createRoundedRectFilledGeometry(
+                    width + IMAGE_SELECTION_GLOW_PAD,
+                    height + IMAGE_SELECTION_GLOW_PAD,
+                    20 + (IMAGE_SELECTION_GLOW_PAD * 0.5)
+                ),
+                new THREE.MeshBasicMaterial({
+                    color: IMAGE_SELECTION_GLOW_COLOR,
+                    transparent: true,
+                    opacity: 0,
+                    depthWrite: false,
+                    depthTest: false
+                })
+            );
+            outline.name = 'outline';
+            outline.userData = { ...(outline.userData || {}), isImageSelectionGlow: true };
+            group.add(outline);
+        }
+
+        if (outline.geometry) {
+            outline.geometry.dispose?.();
+        }
+        outline.geometry = createRoundedRectFilledGeometry(
+            width + IMAGE_SELECTION_GLOW_PAD,
+            height + IMAGE_SELECTION_GLOW_PAD,
+            20 + (IMAGE_SELECTION_GLOW_PAD * 0.5)
+        );
+        outline.position.set(-(IMAGE_SELECTION_GLOW_PAD / 2), IMAGE_SELECTION_GLOW_PAD / 2, 0);
+        outline.renderOrder = baseRenderOrder - 1;
+        outline.visible = !!isSelected;
+
+        if (outline.material) {
+            outline.material.color.setHex(IMAGE_SELECTION_GLOW_COLOR);
+            outline.material.opacity = isSelected ? IMAGE_SELECTION_GLOW_OPACITY : 0;
+            outline.material.transparent = true;
+            outline.material.depthWrite = false;
+            outline.material.depthTest = false;
+            outline.material.needsUpdate = true;
+        }
+
+        return outline;
+    }
+
+    // ▲▲▲ [Change] ▲▲▲
+
+    async function createOrUpdateCanvasTextureNode(module, nodeModel, existingGroup = null, zPos = 0, textures, width, height) {
+        // ▼▼▼ [Changed] Identify nodes handled by CSS3D (Text, Note, Code) ▼▼▼
+        // These nodes render as simple background meshes in WebGL (Mesh), content is in DOM.
+        const isCss3dNode = ['text', 'note', 'memo', 'code', 'markdown'].includes(nodeModel.contentType);
+        // ▲▲▲ [Changed] ▲▲▲
+
+        // For non-CSS3D nodes, validate textures
+        if (!isCss3dNode && (!textures || !textures.default || !textures.selected)) {
+            console.error(`[MindMapObjectManager] Cannot create node ${nodeModel.id}: Invalid textures object provided.`);
+            return null;
+        }
+
+        const TAIL_HEIGHT = 12;
+        const HANDLE_SIZE = 16; // Changed from 36 to 16 to match CSS handles and prevent ghost touches
+        const CORNER_RADIUS = 20;
+        const DEFAULT_OUTLINE_COLOR = 0x374151;
+        const SELECTED_OUTLINE_COLOR = 0x7b7ff2;
+        const memoTheme = String(nodeModel?.contentType ?? '').toLowerCase() === 'memo' ? getMemoWebglTheme(nodeModel) : null;
+        const defaultBorderHex = memoTheme ? memoTheme.border : DEFAULT_OUTLINE_COLOR;
+        const bodyFillHex = memoTheme ? memoTheme.fill : 0xfefefe;
+        const isSelected = module.multiSelectedNodeIds.has(nodeModel.id);
+        const selectedBorderHex = isCss3dNode
+            ? SELECTED_OUTLINE_COLOR
+            : (memoTheme ? memoTheme.accent : SELECTED_OUTLINE_COLOR);
+        const outlineColor = isSelected ? selectedBorderHex : defaultBorderHex;
+        const OUTLINE_SHRINK = 2;
+        const OUTLINE_RADIUS = Math.max(1, CORNER_RADIUS - 1);
+
+        if (existingGroup) {
+            const active = isSelected ? (textures?.selected || {}) : (textures?.default || {});
+            const bodyMesh = existingGroup.getObjectByName('body');
+            const tailMesh = existingGroup.getObjectByName('tail');
+            const glowMesh = existingGroup.getObjectByName('glow');
+            let outline = existingGroup.getObjectByName('outline');
+            let baseRenderOrder = existingGroup.userData?.baseRenderOrder;
+            if (baseRenderOrder === undefined) {
+                baseRenderOrder = bodyMesh?.renderOrder ?? module.nodeZCounter++;
+                existingGroup.userData = {
+                    ...(existingGroup.userData || {}),
+                    baseRenderOrder
+                };
+            }
+
+            if (bodyMesh) {
+                const gp = bodyMesh.geometry && bodyMesh.geometry.parameters;
+                if (!gp || gp.width !== width || gp.height !== height) {
+                    bodyMesh.geometry.dispose();
+                    bodyMesh.geometry = new THREE.PlaneGeometry(width, height);
+
+                    if (outline) {
+                        outline.geometry.dispose();
+                        outline.geometry = createRoundedRectGeometry(
+                            width - OUTLINE_SHRINK,
+                            height - OUTLINE_SHRINK,
+                            OUTLINE_RADIUS
+                        );
+                    }
+                }
+                bodyMesh.position.set(width / 2, -height / 2, 0);
+                if (nodeModel.contentType === 'image') {
+                    syncImageSelectionGlow(existingGroup, width, height, baseRenderOrder, isSelected);
+                    window.MindMapNodes?.syncImageMidLodDecorations?.(existingGroup, width, height, baseRenderOrder, isSelected);
+                } else if (outline) {
+                    outline.position.copy(bodyMesh.position);
+                    outline.position.z = 0; // [Fix] Z=0 for parallax elimination
+                    outline.visible = false;
+                    if (outline.material) {
+                        outline.material.color.setHex(isSelected ? selectedBorderHex : defaultBorderHex);
+                        outline.material.opacity = isSelected ? 1.0 : 0.5;
+                    }
+                }
+
+                if (bodyMesh.material?.uniforms) {
+                    if (bodyMesh.material.uniforms.bgColor) {
+                        bodyMesh.material.uniforms.bgColor.value.setHex(bodyFillHex);
+                    }
+                    if (bodyMesh.material.uniforms.borderColor) {
+                        bodyMesh.material.uniforms.borderColor.value.setHex(isSelected ? selectedBorderHex : defaultBorderHex);
+                    }
+                }
+            }
+            if (tailMesh) {
+                tailMesh.position.set(width / 2, -height - (TAIL_HEIGHT / 2), 0);
+                if (active?.tail && tailMesh.material) {
+                    tailMesh.material.map = active.tail;
+                    tailMesh.material.needsUpdate = true;
+                }
+            }
+            // Update resize handles (omitted for brevity, handled by existing code flow if not changed)
+            if (nodeModel.contentType !== 'pdf') {
+                const edgeWidthLength = Math.max(10, width - HANDLE_SIZE * 2);
+                const edgeHeightLength = Math.max(10, height - HANDLE_SIZE * 2);
+                const handleConfigs = {
+                    // ▼▼▼ [Fix] Z값을 0으로 통일하여 시차(Parallax) 완전 제거 ▼▼▼
+                    'resizeHandle_TL': { x: HANDLE_SIZE / 2, y: -HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 0 },
+                    'resizeHandle_TR': { x: width - HANDLE_SIZE / 2, y: -HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 0 },
+                    'resizeHandle_BL': { x: HANDLE_SIZE / 2, y: -height + HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 0 },
+                    'resizeHandle_BR': { x: width - HANDLE_SIZE / 2, y: -height + HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 0 }
+                    // ▲▲▲ [Fix] ▲▲▲
+                };
+                if (nodeModel.contentType !== 'image') {
+                    Object.assign(handleConfigs, {
+                        'resizeHandle_T': { x: width / 2, y: -HANDLE_SIZE / 2, w: edgeWidthLength, h: HANDLE_SIZE, z: 0 },
+                        'resizeHandle_B': { x: width / 2, y: -height + HANDLE_SIZE / 2, w: edgeWidthLength, h: HANDLE_SIZE, z: 0 },
+                        'resizeHandle_L': { x: HANDLE_SIZE / 2, y: -height / 2, w: HANDLE_SIZE, h: edgeHeightLength, z: 0 },
+                        'resizeHandle_R': { x: width - HANDLE_SIZE / 2, y: -height / 2, w: HANDLE_SIZE, h: edgeHeightLength, z: 0 }
+                    });
+                }
+                Object.entries(handleConfigs).forEach(([name, cfg]) => {
+                    const handle = existingGroup.getObjectByName(name);
+                    if (handle) {
+                        handle.position.set(cfg.x, cfg.y, cfg.z);
+                        const gp = handle.geometry?.parameters;
+                        if (gp && (gp.width !== cfg.w || gp.height !== cfg.h)) {
+                            handle.geometry.dispose();
+                            handle.geometry = new THREE.PlaneGeometry(cfg.w, cfg.h);
+                        }
+                        if (nodeModel.contentType === 'image' && handle.material) {
+                            handle.material.opacity = 0.0;
+                            handle.material.colorWrite = false;
+                            handle.material.needsUpdate = true;
+                        }
+                    }
+                });
+                if (nodeModel.contentType === 'image') {
+                    ['resizeHandle_T', 'resizeHandle_B', 'resizeHandle_L', 'resizeHandle_R'].forEach(name => {
+                        const handle = existingGroup.getObjectByName(name);
+                        if (handle) {
+                            handle.visible = false;
+                        }
+                    });
+                }
+            }
+
+            // ▼▼▼ [Changed] CSS3D nodes: keep simplified material (or shader), skip texture update ▼▼▼
+            if (!isCss3dNode) {
+                const active = isSelected ? textures.selected : textures.default;
+                if (bodyMesh && bodyMesh.material) { bodyMesh.material.map = active.body; bodyMesh.material.needsUpdate = true; }
+                if (tailMesh && tailMesh.material) { tailMesh.material.map = active.tail; tailMesh.material.needsUpdate = true; }
+            }
+            // ▲▲▲ [Changed] ▲▲▲
+
+            if (!ENABLE_WEBGL_GLOW && glowMesh) {
+                existingGroup.remove(glowMesh);
+                try { glowMesh.geometry?.dispose?.(); } catch { }
+                try { glowMesh.material?.dispose?.(); } catch { }
+            } else if (ENABLE_WEBGL_GLOW && window.MindMapGlowShader) {
+                const contentType = nodeModel.contentType || 'text';
+                if (!glowMesh) {
+                    const glow = window.MindMapGlowShader.createSDFGlowMesh(width, height, isSelected, contentType);
+                    glow.position.set(width / 2, -height / 2, 0.0);
+                    glow.renderOrder = baseRenderOrder - 5;
+                    const cameraZ = module.camera?.position?.z ?? Infinity;
+                    const threshold = 4000;
+                    glow.visible = cameraZ < threshold;
+                    existingGroup.add(glow);
+                } else {
+                    window.MindMapGlowShader.updateGlowSize(glowMesh, width, height, contentType);
+                    window.MindMapGlowShader.updateGlowSelection(glowMesh, isSelected);
+                    glowMesh.position.set(width / 2, -height / 2, 0.0);
+                    glowMesh.renderOrder = baseRenderOrder - 5;
+                }
+            }
+
+            existingGroup.userData.worldWidth = width;
+            existingGroup.userData.worldHeight = height;
+            existingGroup.userData.baseRenderOrder = baseRenderOrder;
+
+            return existingGroup;
+
+        } else {
+            // --- Create new group ---
+            const group = new THREE.Group();
+            const baseRenderOrder = module.nodeZCounter++;
+            const active = isSelected ? (textures?.selected || {}) : (textures?.default || {});
+
+            // SDF Glow (disabled by default; use CSS selected states instead)
+            if (ENABLE_WEBGL_GLOW && window.MindMapGlowShader) {
+                const contentType = nodeModel.contentType || 'text';
+                const glowMesh = window.MindMapGlowShader.createSDFGlowMesh(width, height, isSelected, contentType);
+                glowMesh.position.set(width / 2, -height / 2, 0.0);
+                glowMesh.renderOrder = baseRenderOrder - 5;
+                const cameraZ = module.camera?.position?.z ?? Infinity;
+                const threshold = 4000;
+                glowMesh.visible = cameraZ < threshold;
+                group.add(glowMesh);
+            }
+
+            // Body
+            const bodyGeometry = new THREE.PlaneGeometry(width, height);
+            let bodyMaterial;
+
+            if (isCss3dNode) {
+                // ▼▼▼ [Optimized] CSS3D nodes: use SDF shader for border (no texture = saves memory) ▼▼▼
+                // This replaces the textured material for text/note/code
+                bodyMaterial = new THREE.ShaderMaterial({
+                    transparent: false,  // ★ 불투명하게 변경 - 그리드가 비치지 않도록
+                    depthWrite: true,
+                    depthTest: true,
+                    uniforms: {
+                        bgColor: { value: new THREE.Color(bodyFillHex) },
+                        borderColor: { value: new THREE.Color(isSelected ? selectedBorderHex : defaultBorderHex) },
+                        borderWidth: { value: 3.0 },
+                        meshSize: { value: new THREE.Vector2(width, height) }
+                    },
+                    vertexShader: `
+                        varying vec2 vUv;
+                        void main() {
+                            vUv = uv;
+                            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                        }
+                    `,
+                    fragmentShader: `
+                        precision highp float;
+                        varying vec2 vUv;
+                        uniform vec3 bgColor;
+                        uniform vec3 borderColor;
+                        uniform float borderWidth;
+                        uniform vec2 meshSize;
+                        
+                        void main() {
+                            vec2 pixelCoord = vUv * meshSize;
+                            bool inBorder = pixelCoord.x < borderWidth || 
+                                           pixelCoord.x > meshSize.x - borderWidth ||
+                                           pixelCoord.y < borderWidth || 
+                                           pixelCoord.y > meshSize.y - borderWidth;
+                            vec3 finalColor = inBorder ? borderColor : bgColor;
+                            gl_FragColor = vec4(finalColor, 1.0);  // ★ 항상 불투명
+                        }
+                    `
+                });
+                // ▲▲▲ [Optimized] ▲▲▲
+            } else {
+                // Standard mode (Image nodes): use individual texture
+                // ★ [Fix] Image nodes: use fallback color if texture is missing (0xaaaaaa), otherwise white
+                const isImage = nodeModel.contentType === 'image';
+                const hasTexture = !!active.body;
+
+                bodyMaterial = new THREE.MeshBasicMaterial({
+                    map: active.body,
+                    transparent: false,  // ★ 불투명하게 변경 - 그리드가 비치지 않도록
+                    depthWrite: true,
+                    depthTest: true,
+                    color: 0xffffff
+                    // [Fix] polygonOffset 제거 - Z=0 평면에서 renderOrder로만 제어
+                });
+            }
+
+            const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial);
+            bodyMesh.renderOrder = baseRenderOrder;
+            bodyMesh.name = 'body';
+            bodyMesh.position.set(width / 2, -height / 2, 0.0); // ★ z=0.0: 그리드(z=0)와 밀착
+            bodyMesh.userData.nodeId = nodeModel.id;
+            group.add(bodyMesh);
+
+            if (nodeModel.contentType === 'image') {
+                syncImageSelectionGlow(group, width, height, baseRenderOrder, isSelected);
+                window.MindMapNodes?.syncImageMidLodDecorations?.(group, width, height, baseRenderOrder, isSelected);
+            }
+
+            // Tail
+            const tailGeometry = new THREE.PlaneGeometry(TAIL_HEIGHT * 2, TAIL_HEIGHT);
+            let tailMaterial;
+            if (isCss3dNode && !active?.tail) {
+                tailMaterial = new THREE.MeshBasicMaterial({ color: 0xfefefe, transparent: true, opacity: 0.9, depthWrite: false, depthTest: false });
+            } else {
+                tailMaterial = new THREE.MeshBasicMaterial({ map: active?.tail, transparent: true, depthWrite: false, depthTest: false });
+            }
+            const tailMesh = new THREE.Mesh(tailGeometry, tailMaterial);
+            tailMesh.renderOrder = baseRenderOrder;
+            tailMesh.name = 'tail';
+            tailMesh.position.set(width / 2, -height - (TAIL_HEIGHT / 2), 0.0); // ★ z=0.0
+            tailMesh.userData = { nodeId: nodeModel.id, isTailHandle: true };
+            group.add(tailMesh);
+
+            // ▼▼▼ [Removed] Scrollbar creation for CSS3D nodes (DOM handles it) ▼▼▼
+            // (Original code had special logic for code nodes, now removed/skipped)
+            // ▲▲▲ [Removed] ▲▲▲
+
+            // ▼▼▼ [Changed] Add eight resize handles (4 corners + 4 edges spanning full length) ▼▼▼
+            if (nodeModel.contentType !== 'pdf') {
+                // Edge handles span from corner to corner (minus corner handle size)
+                const edgeWidthLength = Math.max(10, width - HANDLE_SIZE * 2);   // horizontal edge length
+                const edgeHeightLength = Math.max(10, height - HANDLE_SIZE * 2); // vertical edge length
+
+                const handles = [];
+
+                // Add edges only if NOT an image node
+                if (nodeModel.contentType !== 'image') {
+                    handles.push(
+                        { name: 'resizeHandle_T', corner: 'T', x: width / 2, y: -HANDLE_SIZE / 2, w: edgeWidthLength, h: HANDLE_SIZE, order: 0 },
+                        { name: 'resizeHandle_B', corner: 'B', x: width / 2, y: -height + HANDLE_SIZE / 2, w: edgeWidthLength, h: HANDLE_SIZE, order: 0 },
+                        { name: 'resizeHandle_L', corner: 'L', x: HANDLE_SIZE / 2, y: -height / 2, w: HANDLE_SIZE, h: edgeHeightLength, order: 0 },
+                        { name: 'resizeHandle_R', corner: 'R', x: width - HANDLE_SIZE / 2, y: -height / 2, w: HANDLE_SIZE, h: edgeHeightLength, order: 0 }
+                    );
+                }
+
+                // Corners always present
+                handles.push(
+                    { name: 'resizeHandle_TL', corner: 'TL', x: HANDLE_SIZE / 2, y: -HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, order: 1 },
+                    { name: 'resizeHandle_TR', corner: 'TR', x: width - HANDLE_SIZE / 2, y: -HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, order: 1 },
+                    { name: 'resizeHandle_BL', corner: 'BL', x: HANDLE_SIZE / 2, y: -height + HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, order: 1 },
+                    { name: 'resizeHandle_BR', corner: 'BR', x: width - HANDLE_SIZE / 2, y: -height + HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, order: 1 }
+                );
+
+                handles.forEach(c => {
+                    const handleGeom = new THREE.PlaneGeometry(c.w, c.h);
+                    // Use opacity 0.01 instead of 0.0 to ensure Raycaster hits it (some implementations optimize out 0.0)
+                    const handleMat = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.01, depthWrite: false, depthTest: false });
+                    const handleMesh = new THREE.Mesh(handleGeom, handleMat);
+                    handleMesh.name = c.name;
+                    handleMesh.userData = { nodeId: nodeModel.id, isResizeHandle: true, corner: c.corner };
+                    handleMesh.renderOrder = baseRenderOrder + 10 + c.order; // Boost renderOrder significantly
+                    // ▼▼▼ [Fix] Z값을 0으로 설정 (그리드와 평탄화하여 시차 제거) ▼▼▼
+                    handleMesh.position.set(c.x, c.y, 0);
+                    // ▲▲▲ [Fix] ▲▲▲
+                    group.add(handleMesh);
+                });
+            }
+            // ▲▲▲ [Changed] ▲▲▲
+
+            group.position.set(nodeModel.positionX, nodeModel.positionY, zPos);
+            group.userData = { worldWidth: width, worldHeight: height, nodeId: nodeModel.id, baseRenderOrder };
+            return group;
+        }
+    }
+
+    function createDeferredNodeShell(nodeModel, width, height, zPos = 0, baseRenderOrder = 0) {
+        const group = new THREE.Group();
+        group.position.set(nodeModel.positionX || 0, nodeModel.positionY || 0, zPos);
+        group.visible = false;
+        group.userData = {
+            worldWidth: width,
+            worldHeight: height,
+            nodeId: nodeModel.id,
+            baseRenderOrder,
+            isDeferredShell: true,
+            spatialGridKeys: new Set()
+        };
+        return group;
+    }
+
+    // Expose MindMapObjectManager globally
+    window.MindMapObjectManager = {
+        createOrUpdateCanvasTextureNode: createOrUpdateCanvasTextureNode,
+        createDeferredNodeShell: createDeferredNodeShell,
+        createRoundedRectFilledGeometry: createRoundedRectFilledGeometry // For scrollbar resize in pipeline
+    };
+
+    console.log('✅ mind-map-object-manager.js loaded (Rounded Outline)');
+})();