@mindexec/cli 0.2.478 → 0.2.479

package/wwwroot/_content/MindExecution.Shared/js/mind-map-text-lod-system.js

@@ -3,9 +3,9 @@
 (function () {
     'use strict';
 
-    // LOD 설정 - 카메라 Z 기반
-    const CAMERA_Z_THRESHOLD = 4000; // z < 4000이면 고해상도, 이상이면 저해상도
-    const ENABLE_WEBGL_GLOW = false;
+    // LOD 설정 - 카메라 Z 기반
+    const CAMERA_Z_THRESHOLD = 4000; // z < 4000이면 고해상도, 이상이면 저해상도
+    const ENABLE_WEBGL_GLOW = false;
 
     const QUALITY_SCALES = {
         HIGH: 1.0,
@@ -19,21 +19,21 @@
 
     // 업데이트 큐 (프레임당 여러 개 처리 가능)
     const updateQueue = [];
-    let isProcessing = false;
-    let module = null;
-    let lastCameraZ = null;
-    let lastDesiredLevel = null;
-    function isDocumentHidden() {
-        return typeof document !== 'undefined' && document.visibilityState === 'hidden';
-    }
-
-    function scheduleNonVisualFrame(callback, hiddenDelay = 16) {
-        if (typeof requestAnimationFrame === 'function' && !isDocumentHidden()) {
-            return requestAnimationFrame(callback);
-        }
-
-        return setTimeout(() => callback(typeof performance !== 'undefined' ? performance.now() : Date.now()), hiddenDelay);
-    }
+    let isProcessing = false;
+    let module = null;
+    let lastCameraZ = null;
+    let lastDesiredLevel = null;
+    function isDocumentHidden() {
+        return typeof document !== 'undefined' && document.visibilityState === 'hidden';
+    }
+
+    function scheduleNonVisualFrame(callback, hiddenDelay = 16) {
+        if (typeof requestAnimationFrame === 'function' && !isDocumentHidden()) {
+            return requestAnimationFrame(callback);
+        }
+
+        return setTimeout(() => callback(typeof performance !== 'undefined' ? performance.now() : Date.now()), hiddenDelay);
+    }
 
     // ▼▼▼ [Perf] Yield heavy work to idle time ▼▼▼
     function yieldToIdle() {
@@ -46,26 +46,26 @@
         });
     }
 
-    function deferDispose(tex) {
-        if (!tex || typeof tex.dispose !== 'function') return;
-        if (typeof requestIdleCallback === 'function') {
-            requestIdleCallback(() => { try { tex.dispose(); } catch { } });
-        } else {
-            setTimeout(() => { try { tex.dispose(); } catch { } }, 0);
-        }
-    }
-
-    function removeGlowMesh(group) {
-        if (!group?.getObjectByName) return null;
-        const glowMesh = group.getObjectByName('glow');
-        if (!glowMesh) return null;
-
-        group.remove(glowMesh);
-        deferDispose(glowMesh.geometry);
-        deferDispose(glowMesh.material);
-        return null;
-    }
-    // ▲▲▲ [Perf] ▲▲▲
+    function deferDispose(tex) {
+        if (!tex || typeof tex.dispose !== 'function') return;
+        if (typeof requestIdleCallback === 'function') {
+            requestIdleCallback(() => { try { tex.dispose(); } catch { } });
+        } else {
+            setTimeout(() => { try { tex.dispose(); } catch { } }, 0);
+        }
+    }
+
+    function removeGlowMesh(group) {
+        if (!group?.getObjectByName) return null;
+        const glowMesh = group.getObjectByName('glow');
+        if (!glowMesh) return null;
+
+        group.remove(glowMesh);
+        deferDispose(glowMesh.geometry);
+        deferDispose(glowMesh.material);
+        return null;
+    }
+    // ▲▲▲ [Perf] ▲▲▲
 
     /**
      * LOD 시스템 초기화
@@ -137,18 +137,18 @@
         lastDesiredLevel = desiredLevel;
         lastCheckTime = now;
 
-        if (ENABLE_WEBGL_GLOW) {
-            // ★ 모든 노드의 glow 가시성을 카메라 거리에 따라 일괄 업데이트
-            const showGlow = desiredLevel === 'HIGH';
-            module.nodeObjectsById.forEach((nodeEntry) => {
-                const glowMesh = nodeEntry.glObject?.getObjectByName('glow');
-                if (glowMesh && glowMesh.visible !== showGlow) {
-                    glowMesh.visible = showGlow;
-                }
-            });
-        } else {
-            module.nodeObjectsById.forEach((nodeEntry) => removeGlowMesh(nodeEntry.glObject));
-        }
+        if (ENABLE_WEBGL_GLOW) {
+            // ★ 모든 노드의 glow 가시성을 카메라 거리에 따라 일괄 업데이트
+            const showGlow = desiredLevel === 'HIGH';
+            module.nodeObjectsById.forEach((nodeEntry) => {
+                const glowMesh = nodeEntry.glObject?.getObjectByName('glow');
+                if (glowMesh && glowMesh.visible !== showGlow) {
+                    glowMesh.visible = showGlow;
+                }
+            });
+        } else {
+            module.nodeObjectsById.forEach((nodeEntry) => removeGlowMesh(nodeEntry.glObject));
+        }
 
         // ★ [Perf] Frustum 생성 (한 번만 생성해서 재사용)
         const frustum = new THREE.Frustum();
@@ -160,9 +160,9 @@
         module.nodeObjectsById.forEach((nodeEntry, nodeId) => {
             const model = nodeEntry.model;
             // ▼▼▼ [Fix] markdown, image 타입도 포함 ▼▼▼
-            if (!model || (model.contentType !== 'text' && model.contentType !== 'note' && model.contentType !== 'memo' && model.contentType !== 'markdown' && model.contentType !== 'image')) {
-                return;
-            }
+            if (!model || (model.contentType !== 'text' && model.contentType !== 'note' && model.contentType !== 'memo' && model.contentType !== 'markdown' && model.contentType !== 'image')) {
+                return;
+            }
             // ▲▲▲ [Fix] ▲▲▲
 
             const currentLevel = nodeEntry.glObject?.userData?.lodLevel;
@@ -178,10 +178,10 @@
                 // ★ [Fix] HIGH 모드에서 CSS3D 지원 노드는 화면 밖이라도 LOW(WebGL)로 내리지 않고 HIGH(CSS3D) 유지
                 // 이렇게 해야 화면 안으로 들어올 때 WebGL -> CSS3D 전환 깜빡임이 없고, 사용자가 원하는 "무조건 CSS3D"가 됨.
                 // (성능 주의: DOM 요소가 많아질 수 있음)
-                const supportsCss3d = model.contentType === 'text' ||
-                    model.contentType === 'note' ||
-                    model.contentType === 'memo' ||
-                    model.contentType === 'markdown';
+                const supportsCss3d = model.contentType === 'text' ||
+                    model.contentType === 'note' ||
+                    model.contentType === 'memo' ||
+                    model.contentType === 'markdown';
                 if (desiredLevel === 'HIGH' && supportsCss3d) {
                     targetLevel = 'HIGH';
                 } else {
@@ -218,10 +218,10 @@
 
             // ★ [Safety] CSS3D 모드(HIGH)라면 WebGL Body/Tail 숨김 강제 (외부 간섭 방지)
             // 다른 로직(선택, 인터랙션 등)에서 실수로 body.visible = true로 되돌리는 경우를 방지
-            const supportsCss3d = model.contentType === 'text' ||
-                model.contentType === 'note' ||
-                model.contentType === 'memo' ||
-                model.contentType === 'markdown';
+            const supportsCss3d = model.contentType === 'text' ||
+                model.contentType === 'note' ||
+                model.contentType === 'memo' ||
+                model.contentType === 'markdown';
             if (supportsCss3d && targetLevel === 'HIGH' && nodeEntry.currentType === 'CSS') {
                 const body = nodeEntry.glObject?.getObjectByName('body');
                 if (body && body.visible) body.visible = false;
@@ -265,11 +265,11 @@
 
         isProcessing = false;
 
-        // 남은 작업은 다음 프레임에 처리
-        if (updateQueue.length > 0) {
-            scheduleNonVisualFrame(() => processQueue());
-        }
-    }
+        // 남은 작업은 다음 프레임에 처리
+        if (updateQueue.length > 0) {
+            scheduleNonVisualFrame(() => processQueue());
+        }
+    }
 
     async function applyTextureQuality(nodeEntry, level) {
         if (!nodeEntry?.glObject || !nodeEntry?.model) return;
@@ -367,23 +367,23 @@
 
             } else if (level === 'HIGH') {
                 // ▼▼▼ [Changed] HIGH 모드: CSS3D 사용 (텍스처 메모리 절약) ▼▼▼
-                // text, note, markdown 타입만 CSS3D 전환
-                const supportsCss3d = nodeModel.contentType === 'text' ||
-                    nodeModel.contentType === 'note' ||
-                    nodeModel.contentType === 'memo' ||
-                    nodeModel.contentType === 'markdown';
+                // text, note, markdown 타입만 CSS3D 전환
+                const supportsCss3d = nodeModel.contentType === 'text' ||
+                    nodeModel.contentType === 'note' ||
+                    nodeModel.contentType === 'memo' ||
+                    nodeModel.contentType === 'markdown';
 
                 // ▼▼▼ [Fix] cssObject가 없으면 동적 생성 시도 ▼▼▼
                 if (supportsCss3d && !nodeEntry.cssObject) {
                     console.log(`[TextLOD] Creating cssObject for ${nodeId} (contentType=${nodeModel.contentType})`);
                     if (window.MindMapCss3DManager) {
-                        nodeEntry.cssObject = window.MindMapCss3DManager.createCss3dObject(module, nodeModel);
-                        if (nodeEntry.cssObject) {
-                            const glPos = nodeEntry.glObject.position;
-                            nodeEntry.cssObject.position.set(glPos.x, glPos.y, glPos.z);
-                            (module.cssScene || module.scene).add(nodeEntry.cssObject);
-                            console.log(`[TextLOD] ✅ cssObject created and added to scene for ${nodeId}`);
-                        } else {
+                        nodeEntry.cssObject = window.MindMapCss3DManager.createCss3dObject(module, nodeModel);
+                        if (nodeEntry.cssObject) {
+                            const glPos = nodeEntry.glObject.position;
+                            nodeEntry.cssObject.position.set(glPos.x, glPos.y, glPos.z);
+                            (module.cssScene || module.scene).add(nodeEntry.cssObject);
+                            console.log(`[TextLOD] ✅ cssObject created and added to scene for ${nodeId}`);
+                        } else {
                             console.warn(`[TextLOD] ⚠️ Failed to create cssObject for ${nodeId}`);
                         }
                     }
@@ -508,15 +508,15 @@
                 // ▲▲▲ [Changed] ▲▲▲
             }
 
-            if (ENABLE_WEBGL_GLOW) {
-                // ★ glow 가시성은 level에 따라 설정
-                const glowMesh = nodeEntry.glObject.getObjectByName('glow');
-                if (glowMesh) {
-                    glowMesh.visible = (level === 'HIGH');
-                }
-            } else {
-                removeGlowMesh(nodeEntry.glObject);
-            }
+            if (ENABLE_WEBGL_GLOW) {
+                // ★ glow 가시성은 level에 따라 설정
+                const glowMesh = nodeEntry.glObject.getObjectByName('glow');
+                if (glowMesh) {
+                    glowMesh.visible = (level === 'HIGH');
+                }
+            } else {
+                removeGlowMesh(nodeEntry.glObject);
+            }
 
             // LOD 레벨 저장
             nodeEntry.glObject.userData.lodLevel = level;
@@ -540,8 +540,8 @@
         if (!module) return;
 
         module.nodeObjectsById.forEach((nodeEntry, nodeId) => {
-            if (nodeEntry.model?.contentType === 'text' || nodeEntry.model?.contentType === 'note' || nodeEntry.model?.contentType === 'memo') {
-                updateQueue.push({
+            if (nodeEntry.model?.contentType === 'text' || nodeEntry.model?.contentType === 'note' || nodeEntry.model?.contentType === 'memo') {
+                updateQueue.push({
                     nodeId: nodeId,
                     nodeEntry: nodeEntry,
                     level: level
@@ -570,8 +570,8 @@
         // ★ [New] Optionally queue for immediate regeneration
         if (regenerate && module) {
             const nodeEntry = module.nodeObjectsById.get(nodeId);
-            if (nodeEntry && (nodeEntry.model?.contentType === 'text' || nodeEntry.model?.contentType === 'note' || nodeEntry.model?.contentType === 'memo')) {
-                const cameraZ = module.camera?.position?.z || 0;
+            if (nodeEntry && (nodeEntry.model?.contentType === 'text' || nodeEntry.model?.contentType === 'note' || nodeEntry.model?.contentType === 'memo')) {
+                const cameraZ = module.camera?.position?.z || 0;
                 const desiredLevel = cameraZ < CAMERA_Z_THRESHOLD ? 'HIGH' : 'LOW';
 
                 // Reset LOD level to force regeneration
@@ -612,8 +612,8 @@
             }
 
             const nodeEntry = module.nodeObjectsById.get(nodeId);
-            if (nodeEntry && (nodeEntry.model?.contentType === 'text' || nodeEntry.model?.contentType === 'note' || nodeEntry.model?.contentType === 'memo')) {
-                if (nodeEntry.glObject) {
+            if (nodeEntry && (nodeEntry.model?.contentType === 'text' || nodeEntry.model?.contentType === 'note' || nodeEntry.model?.contentType === 'memo')) {
+                if (nodeEntry.glObject) {
                     nodeEntry.glObject.userData.lodLevel = null;
                 }