simview 3.2__py3-none-any.whl

simview/static/js/components/BatchManager.js

@@ -0,0 +1,198 @@
+import * as THREE from "three";
+import { BATCH_PALETTE_GENERATION_CONFIG } from "../config.js";
+import { generateDivergingPalette } from "../objects/utils.js";
+
+export class BatchManager {
+    constructor(app, modelData) {
+        this.app = app;
+        this.simBatches = 1; // Default to single batch
+        this.currentlyActiveBatch = 0; // Default to the first batch
+        this.collapsedMode = false; // Flag for collapsed mode, TODO implement this
+        this.focusedMode = false; // Flag for focused mode, TODO implement this
+
+        // Batch offset configuration
+        this.spacing = 0.5; // Spacing between batches in meters
+        this.batchOffsets = []; // Array of {x, y, z} offsets for each batch
+        this.batchPalette = []; // Array of colors for each batch
+        this.batchNames = []; // Array of display names for each batch
+        this._initialize(modelData);
+    }
+
+    _initialize(modelData) {
+        if (!modelData) return;
+
+        // Set batch count from model data
+        if (modelData.simBatches !== undefined) {
+            this.simBatches = Math.max(1, parseInt(modelData.simBatches));
+            console.log(
+                `Initializing with ${this.simBatches} simulation batches`
+            );
+            this.app.simBatches = this.simBatches;
+        } else if (modelData.batchSize !== undefined) {
+             // Fallback for backward compatibility if needed, though README says simBatches
+            this.simBatches = Math.max(1, parseInt(modelData.batchSize));
+            console.log(`Initializing with ${this.simBatches} simulation batches (fallback from batchSize)`);
+            this.app.simBatches = this.simBatches;
+        }
+        
+        this.sideLength = Math.ceil(Math.sqrt(this.simBatches));
+        const sideLength = this.sideLength;
+        // Use README-defined terrain dimension names: sizeX, sizeY
+        const { sizeX, sizeY } = modelData.terrain.dimensions;
+
+        // Initialize batch offsets
+        this.batchOffsets = [];
+        for (let i = 0; i < this.simBatches; i++) {
+            const rowIdx = Math.floor(i / sideLength);
+            const colIdx = i % sideLength;
+            this.batchOffsets.push({
+                x: colIdx * (sizeX + this.spacing),
+                y: rowIdx * (sizeY + this.spacing),
+                z: 0,
+            });
+        }
+        console.debug("Batch offsets initialized:", this.batchOffsets);
+
+        this.batchPalette = generateDivergingPalette(
+            BATCH_PALETTE_GENERATION_CONFIG.colors,
+            this.simBatches + 1,
+            BATCH_PALETTE_GENERATION_CONFIG.correctLightness
+        );
+        console.debug("Batch palette initialized:", this.batchPalette);
+
+        const providedNames = Array.isArray(modelData.batchNames)
+            ? modelData.batchNames
+            : null;
+        this.batchNames = Array.from({ length: this.simBatches }, (_, i) =>
+            providedNames && typeof providedNames[i] === "string" && providedNames[i]
+                ? providedNames[i]
+                : `Batch ${i}`
+        );
+    }
+
+    getBatchName(batchIndex) {
+        return this.batchNames[batchIndex] ?? `Batch ${batchIndex}`;
+    }
+
+    setBatchName(batchIndex, name) {
+        if (batchIndex < 0 || batchIndex >= this.simBatches) return;
+        const trimmed = (name || "").trim() || `Batch ${batchIndex}`;
+        this.batchNames[batchIndex] = trimmed;
+        this._persistBatchNames();
+        if (this.app.batchLegend) this.app.batchLegend.refresh();
+        if (this.app.errorMetrics) this.app.errorMetrics.refreshBatchLabels();
+    }
+
+    async _persistBatchNames() {
+        try {
+            const response = await fetch("/batch-names", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ names: this.batchNames }),
+            });
+            if (!response.ok) {
+                console.warn("Failed to persist batch names:", response.status);
+            }
+        } catch (e) {
+            console.warn("Failed to persist batch names:", e);
+        }
+    }
+
+    getSimBatches() {
+        return this.simBatches;
+    }
+
+    getColorForBatch(batchIndex) {
+        if (batchIndex < 0 || batchIndex >= this.simBatches) {
+            return new THREE.Color(0x000000); // Default to black for invalid index
+        }
+        return this.batchPalette[batchIndex];
+    }
+
+    getRowColFromBatchIndex(batchIndex) {
+        if (batchIndex < 0 || batchIndex >= this.simBatches) {
+            return { row: -1, col: -1 };
+        }
+        const sideLength = this.sideLength;
+        const rowIdx = Math.floor(batchIndex / sideLength);
+        const colIdx = batchIndex % sideLength;
+        return { row: rowIdx, col: colIdx };
+    }
+
+    getBatchIndexFromRowCol(rowIdx, colIdx) {
+        const sideLength = this.sideLength;
+        if (
+            rowIdx < 0 ||
+            colIdx < 0 ||
+            rowIdx >= sideLength ||
+            colIdx >= sideLength
+        ) {
+            return -1;
+        }
+        const batchIndex = rowIdx * sideLength + colIdx;
+        if (batchIndex < 0 || batchIndex >= this.simBatches) {
+            return -1;
+        }
+        return batchIndex;
+    }
+
+    getOffsetByRowCol(rowIdx, colIdx) {
+        const sideLength = this.sideLength;
+        if (
+            rowIdx < 0 ||
+            colIdx < 0 ||
+            rowIdx >= sideLength ||
+            colIdx >= sideLength
+        ) {
+            throw new Error("Invalid row or column index");
+        }
+        const batchIndex = rowIdx * sideLength + colIdx;
+        return this.getBatchOffset(batchIndex);
+    }
+
+    // Get offset for a specific batch
+    getBatchOffset(batchIndex) {
+        if (batchIndex >= 0 && batchIndex < this.batchOffsets.length) {
+            return this.batchOffsets[batchIndex];
+        }
+        return { x: 0, y: 0, z: 0 };
+    }
+
+    changeFocusOnBatchByRowCol(row, col) {
+        const { camera, controls } = this.app.scene;
+        const { x, y, z } = this.getOffsetByRowCol(row, col);
+        const newCameraTarget = new THREE.Vector3(x, y, z);
+        const oldCameraTarget = controls.target.clone();
+        controls.target = newCameraTarget;
+        camera.position.add(newCameraTarget.clone().sub(oldCameraTarget));
+    }
+
+    changeFocusOnBatchByIndex(batchIndex) {
+        const { row, col } = this.getRowColFromBatchIndex(batchIndex);
+        this.changeFocusOnBatchByRowCol(row, col);
+    }
+
+    setActiveBatch(batchIndex) {
+        if (batchIndex >= 0 && batchIndex < this.simBatches) {
+            this.currentlyActiveBatch = batchIndex;
+            this.changeFocusOnBatchByIndex(batchIndex);
+        } else {
+            console.warn("Invalid batch index:", batchIndex);
+        }
+        this.app.bodyStateWindow.setSelectedBatch(batchIndex);
+        if (this.app.scalarPlotter) {
+            this.app.scalarPlotter.setFocusedBatch(batchIndex);
+        }
+        if (this.app.batchLegend) {
+            this.app.batchLegend.highlightActive();
+        }
+    }
+
+    setActiveBatchByRowCol(row, col) {
+        const batchIndex = this.getBatchIndexFromRowCol(row, col);
+        if (batchIndex === -1) {
+            return;
+        }
+        this.setActiveBatch(batchIndex);
+    }
+}

simview/static/js/components/InteractionController.js

@@ -0,0 +1,446 @@
+import * as THREE from "three";
+import { SELECTION_CONFIG } from "../config.js";
+
+export class InteractionController {
+    constructor(app) {
+        this.app = app;
+        this.raycaster = new THREE.Raycaster();
+        this.mouse = new THREE.Vector2();
+        this.hoveredObject = null;
+        this.selectedObject = null;
+
+        this.isDragging = false;
+        this.startPoint = { x: 0, y: 0 };
+        this.selectionBox = null;
+
+        this.currentSelectionMode = null;
+
+        // Cache for getIntersectableObjects — rebuilt only when selection mode changes
+        this._intersectableCache = null;
+        this._intersectableCacheMode = null;
+        // Reusable Vector3 for screen-projection in selection box
+        this._projPoint = new THREE.Vector3();
+
+        // Create the probe sphere
+        const sphereGeo = new THREE.SphereGeometry(0.05, 16, 16);
+        const sphereMat = new THREE.MeshBasicMaterial({ color: 0xff0000, depthTest: false });
+        this.probeSphere = new THREE.Mesh(sphereGeo, sphereMat);
+        this.probeSphere.renderOrder = 999; // Draw on top
+        this.probeSphere.visible = false;
+        if (this.app.scene) {
+            this.app.scene.addObject3D(this.probeSphere);
+        }
+
+        // Bind methods to preserve context
+        this.onMouseMove = this.onMouseMove.bind(this);
+        this.onClick = this.onClick.bind(this);
+        this.handleHover = this.handleHover.bind(this);
+        this.onMouseDown = this.onMouseDown.bind(this);
+        this.onMouseDrag = this.onMouseDrag.bind(this);
+        this.onMouseUp = this.onMouseUp.bind(this);
+        this.onKeyUp = this.onKeyUp.bind(this);
+
+        // handleHover does a full raycast; mousemove can fire far more often
+        // than the display refreshes, so coalesce to at most one raycast per
+        // animation frame instead of one per event.
+        this._hoverRafId = null;
+        this._queueHoverUpdate = () => {
+            if (this._hoverRafId !== null) return;
+            this._hoverRafId = requestAnimationFrame(() => {
+                this._hoverRafId = null;
+                this.handleHover();
+            });
+        };
+
+        this.initializeEventListeners();
+    }
+
+    initializeEventListeners() {
+        // Use passive event listeners where possible for better performance
+        const passiveOptions = { passive: true };
+
+        window.addEventListener("mousemove", this.onMouseMove, passiveOptions);
+        window.addEventListener("click", this.onClick);
+        window.addEventListener("keyup", this.onKeyUp);
+
+        const renderer = this.app.scene && this.app.scene.renderer;
+        if (!renderer) {
+            console.warn("InteractionController: renderer not found during initialization.");
+            return;
+        }
+        const canvas = renderer.domElement;
+        if (!canvas) return;
+        
+        canvas.addEventListener("mousemove", this._queueHoverUpdate, passiveOptions);
+        canvas.addEventListener("mousedown", this.onMouseDown);
+        canvas.addEventListener("mousemove", this.onMouseDrag, passiveOptions);
+        canvas.addEventListener("mouseup", this.onMouseUp);
+    }
+
+    cleanup() {
+        // Remove event listeners when cleaning up
+        window.removeEventListener("mousemove", this.onMouseMove);
+        window.removeEventListener("click", this.onClick);
+        window.removeEventListener("keyup", this.onKeyUp);
+
+        const renderer = this.app.scene && this.app.scene.renderer;
+        const canvas = renderer ? renderer.domElement : null;
+        if (canvas) {
+            canvas.removeEventListener("mousemove", this._queueHoverUpdate);
+            canvas.removeEventListener("mousedown", this.onMouseDown);
+            canvas.removeEventListener("mousemove", this.onMouseDrag);
+            canvas.removeEventListener("mouseup", this.onMouseUp);
+        }
+
+        if (this._hoverRafId !== null) {
+            cancelAnimationFrame(this._hoverRafId);
+            this._hoverRafId = null;
+        }
+
+        this.clearSelectionBox();
+
+        if (this.probeSphere && this.app.scene) {
+            this.app.scene.removeObject3D(this.probeSphere);
+            this.probeSphere.geometry.dispose();
+            this.probeSphere.material.dispose();
+            this.probeSphere = null;
+        }
+    }
+
+    getSelectionMode(event) {
+        for (const [mode, config] of Object.entries(SELECTION_CONFIG)) {
+            if (event[`${config.key}Key`]) {
+                return config;
+            }
+        }
+        return null;
+    }
+
+    onMouseMove(e) {
+        // Calculate mouse position in normalized device coordinates (-1 to +1)
+        this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
+        this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+    }
+
+    onClick(e) {
+        if (!this.app.scene || !this.app.scene.camera) return;
+        
+        // Prevent click if mouse was dragged (e.g. rotating camera)
+        if (this.lastMouseDown) {
+            const dx = e.clientX - this.lastMouseDown.x;
+            const dy = e.clientY - this.lastMouseDown.y;
+            this.lastMouseDown = null; // Consume the mousedown
+            if (dx * dx + dy * dy > 25) {
+                return; // 5px movement threshold
+            }
+        }
+
+        this.raycaster.setFromCamera(this.mouse, this.app.scene.camera);
+        const intersects = this.raycaster.intersectObjects(
+            Object.values(this.app.bodies).flatMap((body) =>
+                body.children.filter((child) => child.isMesh)
+            ), // Filter only meshes
+            true // Enable recursive raycasting
+        );
+
+        if (intersects.length > 0) {
+            this.selectedObject = intersects[0].object;
+            this.hideTerrainTooltip();
+            return;
+        }
+
+        // Raycast against terrain
+        if (this.app.uiState && this.app.uiState.terrainProbe && this.app.terrain && this.app.terrain.group) {
+            const terrainIntersects = this.raycaster.intersectObject(this.app.terrain.group, true);
+            const surfaceIntersect = terrainIntersects.find(i => i.object.name === "surface");
+            if (surfaceIntersect) {
+                this.showTerrainTooltip(e, surfaceIntersect);
+                return;
+            }
+        }
+        
+        this.hideTerrainTooltip();
+    }
+
+    showTerrainTooltip(e, intersect) {
+        const point = intersect.point;
+        let batchIndex = 0;
+        let current = intersect.object;
+        while (current) {
+            if (current.name && current.name.startsWith("batch")) {
+                batchIndex = parseInt(current.name.replace("batch", ""));
+                break;
+            }
+            current = current.parent;
+        }
+        
+        const props = this.app.terrain.getPropertiesAt(point.x, point.y, batchIndex);
+        if (!props) return;
+
+        let tooltip = document.getElementById("terrain-tooltip");
+        if (!tooltip) {
+            tooltip = document.createElement("div");
+            tooltip.id = "terrain-tooltip";
+            Object.assign(tooltip.style, {
+                position: "absolute",
+                background: "rgba(0, 0, 0, 0.8)",
+                color: "white",
+                padding: "8px",
+                borderRadius: "4px",
+                pointerEvents: "none",
+                zIndex: "1000",
+                fontSize: "12px",
+                fontFamily: "monospace",
+                whiteSpace: "pre"
+            });
+            document.body.appendChild(tooltip);
+        }
+
+        tooltip.style.left = `${e.clientX + 10}px`;
+        tooltip.style.top = `${e.clientY + 10}px`;
+        tooltip.style.display = "block";
+        
+        let text = `Batch: ${batchIndex}\nX: ${point.x.toFixed(3)}, Y: ${point.y.toFixed(3)}\nHeight: ${props.height.toFixed(3)}`;
+        if (props.friction !== undefined) text += `\nFriction: ${props.friction.toFixed(3)}`;
+        if (props.stiffness !== undefined) text += `\nStiffness: ${props.stiffness.toExponential(2)}`;
+        
+        tooltip.innerText = text;
+
+        if (this.probeSphere) {
+            this.probeSphere.position.copy(point);
+            this.probeSphere.visible = true;
+        }
+    }
+
+    hideTerrainTooltip() {
+        const tooltip = document.getElementById("terrain-tooltip");
+        if (tooltip) {
+            tooltip.style.display = "none";
+        }
+        if (this.probeSphere) {
+            this.probeSphere.visible = false;
+        }
+    }
+
+    onMouseDown(e) {
+        this.lastMouseDown = { x: e.clientX, y: e.clientY };
+        
+        this.currentSelectionMode = this.getSelectionMode(e);
+        if (!this.currentSelectionMode) return;
+
+        e.preventDefault(); // Prevent default only when needed
+        this.isDragging = true;
+        this.startPoint = {
+            x: e.clientX,
+            y: e.clientY,
+        };
+
+        this.initSelectionBox(e.clientX, e.clientY);
+    }
+
+    onMouseDrag(e) {
+        if (!this.isDragging || !this.currentSelectionMode) {
+            if (this.selectionBox) {
+                this.clearSelectionBox();
+            }
+            return;
+        }
+
+        this.updateSelectionBox(e.clientX, e.clientY);
+    }
+
+    onMouseUp(e) {
+        if (!this.isDragging) return;
+
+        this.isDragging = false;
+        if (e.ctrlKey) {
+            this.selectObjectsInBox();
+        }
+        this.clearSelectionBox();
+    }
+
+    onKeyUp(e) {
+        for (const config of Object.values(SELECTION_CONFIG)) {
+            if (e.key === config.key) {
+                this.isDragging = false;
+                this.currentSelectionMode = null;
+                this.clearSelectionBox();
+                break;
+            }
+        }
+    }
+    initSelectionBox(x, y) {
+        this.clearSelectionBox(); // Clear any existing selection box
+
+        const overlay = document.createElement("div");
+        Object.assign(overlay.style, {
+            position: "fixed", // Using fixed instead of absolute
+            border: "1px dashed #00ff00",
+            backgroundColor: "rgba(0, 255, 0, 0.1)",
+            pointerEvents: "none",
+            left: `${x}px`,
+            top: `${y}px`,
+            width: "0px",
+            height: "0px",
+            zIndex: "1000",
+        });
+
+        document.body.appendChild(overlay);
+        this.selectionBox = overlay;
+    }
+
+    updateSelectionBox(currentX, currentY) {
+        if (!this.selectionBox) return;
+
+        const width = currentX - this.startPoint.x;
+        const height = currentY - this.startPoint.y;
+
+        const left = width < 0 ? currentX : this.startPoint.x;
+        const top = height < 0 ? currentY : this.startPoint.y;
+        const absWidth = Math.abs(width);
+        const absHeight = Math.abs(height);
+
+        Object.assign(this.selectionBox.style, {
+            left: `${left}px`,
+            top: `${top}px`,
+            width: `${absWidth}px`,
+            height: `${absHeight}px`,
+        });
+    }
+
+    clearSelectionBox() {
+        if (this.selectionBox) {
+            this.selectionBox.remove();
+            this.selectionBox = null;
+        }
+    }
+
+    handleHover() {
+        if (!this.app.scene || !this.app.scene.camera) return;
+        this.raycaster.setFromCamera(this.mouse, this.app.scene.camera);
+        const intersectables = this.getIntersectableObjects();
+        const intersects = this.raycaster.intersectObjects(intersectables, true);
+
+        // Handle hover state
+        const newHovered = intersects[0]?.object ?? null;
+        if (this.hoveredObject !== newHovered) {
+            if (this.hoveredObject) {
+                this.onObjectUnhover(this.hoveredObject);
+            }
+            if (newHovered) {
+                this.onObjectHover(newHovered);
+            }
+            this.hoveredObject = newHovered;
+        }
+    }
+
+    onObjectHover(object) {
+        object.scale.setScalar(1.2);
+    }
+
+    onObjectUnhover(object) {
+        object.scale.setScalar(1.0);
+    }
+
+    getIntersectableObjects() {
+        if (!this.currentSelectionMode) return [];
+
+        const modeKey = this.currentSelectionMode.objects;
+        if (this._intersectableCache && this._intersectableCacheMode === modeKey) {
+            return this._intersectableCache;
+        }
+
+        const objects = this.app[modeKey];
+        let result;
+        if (modeKey === "bodies") {
+            result = Object.values(objects)
+                .flatMap((body) => body.children)
+                .filter((child) => child.isMesh);
+        } else {
+            result = Object.values(objects);
+        }
+        this._intersectableCache = result;
+        this._intersectableCacheMode = modeKey;
+        return result;
+    }
+
+    invalidateIntersectableCache() {
+        this._intersectableCache = null;
+        this._intersectableCacheMode = null;
+    }
+
+    selectObjectsInBox() {
+        if (!this.currentSelectionMode || !this.selectionBox) return;
+
+        const camera = this.app.scene && this.app.scene.camera;
+        const renderer = this.app.scene && this.app.scene.renderer;
+        if (!camera || !renderer || !renderer.domElement) return;
+        
+        const rect = renderer.domElement.getBoundingClientRect();
+
+        // Get the selection box coordinates
+        const boxLeft = parseInt(this.selectionBox.style.left);
+        const boxTop = parseInt(this.selectionBox.style.top);
+        const boxWidth = parseInt(this.selectionBox.style.width);
+        const boxHeight = parseInt(this.selectionBox.style.height);
+
+        // Function to check if a point is inside the selection box
+        const isPointInSelectionBox = (point) => {
+            // Convert 3D point to screen coordinates (reuse _projPoint to avoid allocation)
+            this._projPoint.copy(point).project(camera);
+
+            // Convert to pixel coordinates
+            const x = ((this._projPoint.x + 1) * rect.width) / 2 + rect.left;
+            const y = ((-this._projPoint.y + 1) * rect.height) / 2 + rect.top;
+
+            return (
+                x >= boxLeft &&
+                x <= boxLeft + boxWidth &&
+                y >= boxTop &&
+                y <= boxTop + boxHeight
+            );
+        };
+
+        // Clear previous selection
+        const selectionSet = this.app[this.currentSelectionMode.set];
+        selectionSet.forEach((obj) => {
+            if (obj.material) {
+                obj.material.color.setHex(obj.originalColor || 0xffffff);
+            }
+        });
+        selectionSet.clear();
+
+        // Select objects (reuse bbox/center to avoid per-object allocations)
+        const selectableObjects = this.getIntersectableObjects();
+        const bbox = new THREE.Box3();
+        const center = new THREE.Vector3();
+        selectableObjects.forEach((object) => {
+            bbox.setFromObject(object);
+            bbox.getCenter(center);
+
+            if (isPointInSelectionBox(center)) {
+                if (!object.hasOwnProperty("originalColor")) {
+                    object.originalColor = object.material.color.getHex();
+                }
+                object.material.color.setHex(0xff0000);
+                selectionSet.add(object);
+            }
+        });
+
+        console.log(
+            `Selected ${selectionSet.size} ${this.currentSelectionMode.objects}`
+        );
+    }
+
+    deselectAll() {
+        for (const config of Object.values(SELECTION_CONFIG)) {
+            const selectionSet = this.app[config.set];
+            selectionSet.forEach((obj) => {
+                if (obj.material && obj.hasOwnProperty("originalColor")) {
+                    obj.material.color.setHex(obj.originalColor);
+                }
+            });
+            selectionSet.clear();
+        }
+    }
+}