@mindexec/cli 0.2.339 → 0.2.341

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

@@ -1,372 +0,0 @@
-// File: mind-map-object-manager.js
-// [Refactor] Creates and updates WebGL node groups (THREE.Group / THREE.Mesh).
-(function () {
-    'use strict';
-
-    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);
-    }
-
-    // ▲▲▲ [Change] ▲▲▲
-
-    // ▼▼▼ [Atlas] Shared materials for Atlas mode (created lazily) ▼▼▼
-    let atlasBodyMaterial = null;
-    let atlasBodyMaterials = []; // Array of materials (one per atlas page)
-    // ▲▲▲ [Atlas] ▲▲▲
-
-    async function createOrUpdateCanvasTextureNode(module, nodeModel, existingGroup = null, zPos = 0, textures, width, height, atlasResult = null) {
-        // ▼▼▼ [Atlas] Check if this is Atlas mode ▼▼▼
-        const isAtlasMode = atlasResult?.isAtlasMode === true;
-
-        if (isAtlasMode) {
-            // Atlas mode uses shared materials - textures.default.body is null
-            // We need to create/update the mesh differently
-            console.log(`[ObjectManager] Creating node ${nodeModel.id} in ATLAS mode`);
-        }
-        // ▲▲▲ [Atlas] ▲▲▲
-
-        // For non-Atlas mode, validate textures
-        if (!isAtlasMode && (!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 = 24;
-        const CORNER_RADIUS = 20; // value chosen to visually match the texture corner radius
-        const DEFAULT_OUTLINE_COLOR = 0x374151;
-        const SELECTED_OUTLINE_COLOR = 0x2563eb;
-        const isSelected = module.multiSelectedNodeIds.has(nodeModel.id);
-        const outlineColor = isSelected ? SELECTED_OUTLINE_COLOR : DEFAULT_OUTLINE_COLOR;
-        const OUTLINE_SHRINK = 2;
-        const OUTLINE_RADIUS = Math.max(1, CORNER_RADIUS - 1);
-
-        if (existingGroup) {
-            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 (outline) {
-                    outline.position.copy(bodyMesh.position);
-                    outline.position.z = 0.1; // place slightly in front of body to avoid Z-fighting
-                    outline.visible = isSelected;
-                    if (outline.material) {
-                        outline.material.color.setHex(isSelected ? SELECTED_OUTLINE_COLOR : DEFAULT_OUTLINE_COLOR);
-                        outline.material.opacity = isSelected ? 1.0 : 0.5;
-                    }
-                }
-            }
-            if (tailMesh) {
-                tailMesh.position.set(width / 2, -height - (TAIL_HEIGHT / 2), 0);
-            }
-            // ▼▼▼ [Changed] Update eight resize handles (4 corners + 4 edges with geometry) ▼▼▼
-            if (nodeModel.contentType !== 'pdf') {
-                const edgeWidthLength = Math.max(10, width - HANDLE_SIZE * 2);
-                const edgeHeightLength = Math.max(10, height - HANDLE_SIZE * 2);
-                const handleConfigs = {
-                    // Corners (square, no geometry update needed)
-                    'resizeHandle_TL': { x: HANDLE_SIZE / 2, y: -HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 1.1 },
-                    'resizeHandle_TR': { x: width - HANDLE_SIZE / 2, y: -HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 1.1 },
-                    'resizeHandle_BL': { x: HANDLE_SIZE / 2, y: -height + HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 1.1 },
-                    'resizeHandle_BR': { x: width - HANDLE_SIZE / 2, y: -height + HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 1.1 },
-                    // Edges (dynamic length, need geometry update)
-                    'resizeHandle_T': { x: width / 2, y: -HANDLE_SIZE / 2, w: edgeWidthLength, h: HANDLE_SIZE, z: 1 },
-                    'resizeHandle_B': { x: width / 2, y: -height + HANDLE_SIZE / 2, w: edgeWidthLength, h: HANDLE_SIZE, z: 1 },
-                    'resizeHandle_L': { x: HANDLE_SIZE / 2, y: -height / 2, w: HANDLE_SIZE, h: edgeHeightLength, z: 1 },
-                    'resizeHandle_R': { x: width - HANDLE_SIZE / 2, y: -height / 2, w: HANDLE_SIZE, h: edgeHeightLength, z: 1 }
-                };
-                Object.entries(handleConfigs).forEach(([name, cfg]) => {
-                    const handle = existingGroup.getObjectByName(name);
-                    if (handle) {
-                        handle.position.set(cfg.x, cfg.y, cfg.z);
-                        // Update geometry for edge handles (they change size with node size)
-                        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);
-                        }
-                    }
-                });
-            }
-            // ▲▲▲ [Changed] ▲▲▲
-
-            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; }
-
-            const glowColor = isSelected ? 0x2563eb : 0x000000;
-            const glowOpacity = isSelected ? 0.6 : 0.3;
-            if (textures.glow) {
-                const gData = textures.glow;
-                const gWidth = gData.width / 2;
-                const gHeight = gData.height / 2;
-                if (!glowMesh) {
-                    const gGeo = new THREE.PlaneGeometry(gWidth, gHeight);
-                    const gMat = new THREE.MeshBasicMaterial({
-                        map: gData.texture,
-                        transparent: true,
-                        opacity: glowOpacity,
-                        color: glowColor,
-                        depthWrite: false,
-                        depthTest: true
-                    });
-                    const glow = new THREE.Mesh(gGeo, gMat);
-                    glow.name = 'glow';
-                    glow.position.set(width / 2, -height / 2, -0.1);
-                    glow.renderOrder = baseRenderOrder - 5;
-                    glow.raycast = () => { };
-                    existingGroup.add(glow);
-                } else {
-                    if (glowMesh.geometry) glowMesh.geometry.dispose();
-                    glowMesh.geometry = new THREE.PlaneGeometry(gWidth, gHeight);
-                    glowMesh.material.map = gData.texture;
-                    glowMesh.material.color.setHex(glowColor);
-                    glowMesh.material.opacity = glowOpacity;
-                    glowMesh.position.set(width / 2, -height / 2, -0.1);
-                    glowMesh.renderOrder = baseRenderOrder - 5;
-                    glowMesh.raycast = () => { };
-                    glowMesh.material.needsUpdate = true;
-                }
-            }
-
-            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++;
-            // ▼▼▼ [Atlas] Safe access for Atlas mode where textures.selected/default may have null body ▼▼▼
-            const active = isSelected ? (textures?.selected || {}) : (textures?.default || {});
-            // ▲▲▲ [Atlas] ▲▲▲
-
-            // ▼▼▼ [Atlas] Glow handling - may be null in Atlas mode ▼▼▼
-            if (textures?.glow && textures.glow.texture) {
-                const glowData = textures.glow;
-                const gWidth = glowData.width / 2;
-                const gHeight = glowData.height / 2;
-                const gGeo = new THREE.PlaneGeometry(gWidth, gHeight);
-                const gMat = new THREE.MeshBasicMaterial({
-                    map: glowData.texture,
-                    transparent: true,
-                    opacity: isSelected ? 0.6 : 0.3,
-                    color: isSelected ? 0x2563eb : 0x000000,
-                    depthWrite: false,
-                    depthTest: true
-                });
-                const glowMesh = new THREE.Mesh(gGeo, gMat);
-                glowMesh.name = 'glow';
-                glowMesh.position.set(width / 2, -height / 2, -0.1);
-                glowMesh.renderOrder = baseRenderOrder - 5;
-                glowMesh.raycast = () => { };
-                group.add(glowMesh);
-            } else if (!isAtlasMode) {
-                // Non-atlas mode without glow - create a placeholder glow
-                const gWidth = (width + 40);
-                const gHeight = (height + 40);
-                const gGeo = new THREE.PlaneGeometry(gWidth, gHeight);
-                const gMat = new THREE.MeshBasicMaterial({
-                    color: 0x000000,
-                    transparent: true,
-                    opacity: 0.3,
-                    depthWrite: false,
-                    depthTest: true
-                });
-                const glowMesh = new THREE.Mesh(gGeo, gMat);
-                glowMesh.name = 'glow';
-                glowMesh.position.set(width / 2, -height / 2, -0.1);
-                glowMesh.renderOrder = baseRenderOrder - 5;
-                glowMesh.raycast = () => { };
-                group.add(glowMesh);
-            }
-            // ▲▲▲ [Atlas] ▲▲▲
-
-            // Body
-            const bodyGeometry = new THREE.PlaneGeometry(width, height);
-            let bodyMaterial;
-
-            // ▼▼▼ [Atlas] Use atlas texture or individual texture ▼▼▼
-            if (isAtlasMode && atlasResult?.uvMap?.body) {
-                // Get the atlas texture from the manager
-                const uvRect = atlasResult.uvMap.body;
-                const atlasTexture = module.atlasManager.getAtlasTexture('body', uvRect.atlasIndex);
-
-                if (atlasTexture) {
-                    // Create a material that samples from the atlas
-                    // For now, use a standard material with a placeholder (full atlas)
-                    // TODO: Implement proper UV-mapped instanced rendering
-                    bodyMaterial = new THREE.MeshBasicMaterial({
-                        map: atlasTexture,
-                        transparent: true,
-                        depthWrite: false,
-                        depthTest: false
-                    });
-
-                    // Store UV info for potential shader-based rendering later
-                    bodyGeometry.userData = { uvRect };
-
-                    // Modify UVs to sample only the node's region from the atlas
-                    const uvAttr = bodyGeometry.attributes.uv;
-                    for (let i = 0; i < uvAttr.count; i++) {
-                        const u = uvAttr.getX(i);
-                        const v = uvAttr.getY(i);
-                        uvAttr.setXY(
-                            i,
-                            uvRect.u + u * uvRect.w,
-                            uvRect.v + (1 - v) * uvRect.h  // Flip V for WebGL coordinates
-                        );
-                    }
-                    uvAttr.needsUpdate = true;
-
-                    console.log(`[ObjectManager] Atlas body UV applied for ${nodeModel.id}: u=${uvRect.u.toFixed(3)}, v=${uvRect.v.toFixed(3)}, w=${uvRect.w.toFixed(3)}, h=${uvRect.h.toFixed(3)}`);
-                } else {
-                    // Fallback to placeholder if atlas texture not ready
-                    console.warn(`[ObjectManager] Atlas texture not available for ${nodeModel.id}, using placeholder`);
-                    bodyMaterial = new THREE.MeshBasicMaterial({ color: 0x333333, transparent: true, opacity: 0.5, depthWrite: false, depthTest: false });
-                }
-            } else {
-                // Standard mode: use individual texture
-                bodyMaterial = new THREE.MeshBasicMaterial({ map: active.body, transparent: true, depthWrite: false, depthTest: false });
-            }
-            // ▲▲▲ [Atlas] ▲▲▲
-
-            const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial);
-            bodyMesh.renderOrder = baseRenderOrder;
-            bodyMesh.name = 'body';
-            bodyMesh.position.set(width / 2, -height / 2, 0);
-            bodyMesh.userData.nodeId = nodeModel.id;
-            if (isAtlasMode) {
-                bodyMesh.userData.isAtlasMode = true;
-                bodyMesh.userData.atlasUVRect = atlasResult?.uvMap?.body;
-            }
-            group.add(bodyMesh);
-
-            const outlineGeometry = createRoundedRectGeometry(
-                width - OUTLINE_SHRINK,
-                height - OUTLINE_SHRINK,
-                OUTLINE_RADIUS
-            );
-            const outlineMaterial = new THREE.LineBasicMaterial({
-                color: outlineColor,
-                transparent: true,
-                opacity: 0.5
-            });
-            const outline = new THREE.LineLoop(outlineGeometry, outlineMaterial);
-            outline.name = 'outline';
-            outline.position.copy(bodyMesh.position);
-            outline.position.z = 0.1;
-            outline.visible = isSelected;
-            outline.renderOrder = baseRenderOrder + 1;
-            group.add(outline);
-
-            // Tail
-            const tailGeometry = new THREE.PlaneGeometry(TAIL_HEIGHT * 2, TAIL_HEIGHT);
-            // ▼▼▼ [Atlas] Handle atlas mode where tail texture may not be individual ▼▼▼
-            let tailMaterial;
-            if (isAtlasMode && !active?.tail) {
-                // For atlas mode, use a solid color or atlas tail texture
-                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 });
-            }
-            // ▲▲▲ [Atlas] ▲▲▲
-            const tailMesh = new THREE.Mesh(tailGeometry, tailMaterial);
-            tailMesh.renderOrder = baseRenderOrder;
-            tailMesh.name = 'tail';
-            tailMesh.position.set(width / 2, -height - (TAIL_HEIGHT / 2), 0);
-            // ▼▼▼ [New] Add flags for tail click/hover hit-testing ▼▼▼
-            tailMesh.userData = { nodeId: nodeModel.id, isTailHandle: true };
-            // ▲▲▲ [New] ▲▲▲
-            group.add(tailMesh);
-
-            // ▼▼▼ [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 = [
-                    // Edges first (lower renderOrder, so corners have priority)
-                    { 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 last (higher renderOrder, overlays edges)
-                    { 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);
-                    const handleMat = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.0, 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 + 1 + c.order; // corners get +2, edges get +1
-                    handleMesh.position.set(c.x, c.y, 1 + c.order * 0.1); // corners slightly in front
-                    group.add(handleMesh);
-                });
-            }
-            // ▲▲▲ [Changed] ▲▲▲
-
-            group.position.set(nodeModel.positionX, nodeModel.positionY, zPos);
-            group.userData = { worldWidth: width, worldHeight: height, nodeId: nodeModel.id, baseRenderOrder };
-            return group;
-        }
-    }
-
-    // Expose MindMapObjectManager globally
-    window.MindMapObjectManager = {
-        createOrUpdateCanvasTextureNode: createOrUpdateCanvasTextureNode
-    };
-
-    console.log('✅ mind-map-object-manager.js loaded (Rounded Outline)');
-})();