@mindexec/cli 0.2.0

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

@@ -0,0 +1,372 @@
+// 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)');
+})();