@mindexec/cli 0.2.477 → 0.2.478

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

@@ -1,40 +1,40 @@
 // 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) {
+(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;
@@ -60,11 +60,11 @@
 
     // ▼▼▼ [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);
+    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)
@@ -78,68 +78,68 @@
         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) {
+        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);
+        const isCss3dNode = ['text', 'note', 'memo', 'code', 'markdown'].includes(nodeModel.contentType);
         // ▲▲▲ [Changed] ▲▲▲
 
         // For non-CSS3D nodes, validate textures
@@ -149,24 +149,24 @@
         }
 
         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 = 0x2563eb;
-        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 = 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');
+        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 = 0x2563eb;
+        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 = 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) {
@@ -191,82 +191,82 @@
                             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;
-                }
-            }
+                }
+                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;
-                        }
-                    });
-                }
-            }
+            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) {
@@ -331,14 +331,14 @@
                 // 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) }
-                    },
+                    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() {
@@ -382,19 +382,19 @@
                 });
             }
 
-            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 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) {
@@ -456,33 +456,33 @@
             // ▲▲▲ [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,
-        getMemoWebglTheme: getMemoWebglTheme,
-        createRoundedRectFilledGeometry: createRoundedRectFilledGeometry // For scrollbar resize in pipeline
-    };
+            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,
+        getMemoWebglTheme: getMemoWebglTheme,
+        createRoundedRectFilledGeometry: createRoundedRectFilledGeometry // For scrollbar resize in pipeline
+    };
 
     console.log('✅ mind-map-object-manager.js loaded (Rounded Outline)');
 })();