Markk116/MoundHunters
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes here and there

Browse Source
This commit is contained in:
Mark Kalsbeek
2026-01-25 12:55:30 +01:00
parent bd5a59d827
commit 6300de22f0
4 changed files with 366 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
ui/src/components/ContextMenu.vue
View File

@@ -9,8 +9,9 @@
<!-- ============================================= -->
<div class="context-menu-header">
{{ formatCoordinate(lngLat.lng, 'lng') }}, {{ formatCoordinate(lngLat.lat, 'lat') }}
<span v-if="tileData?.id" class="tile-name">{{ tileData.id }}</span>
<span v-if="apiError" class="tile-error">⚠️ Lookup failed</span>
<span v-if="tileMetadata?.id" class="tile-name">{{ tileMetadata.id }}</span>
<span v-if="metadataError" class="tile-error">⚠️ Lookup failed</span>
<span v-if="processingStatus" class="tile-status">{{ processingStatus }}</span>
</div>
<!-- ============================================= -->
@@ -18,40 +19,47 @@
<!-- ============================================= -->
<!-- Always available -->
<button @click="$emit('dropPin')" class="context-menu-item">📍 Drop Pin</button>
<button @click="$emit('startMeasure')" class="context-menu-item">📏 Measure from here</button>
<button @click="handleDropPin" class="context-menu-item">📍 Drop Pin</button>
<button @click="handleStartMeasure" class="context-menu-item">📏 Measure from here</button>
<!-- State A: No tile exists (or error checking) -->
<button
v-if="!tileData && !apiError"
@click="$emit('requestTile')"
v-if="!tileMetadata && !metadataError && !requestingTile"
@click="handleRequestTile"
class="context-menu-item"
>
📥 Request Tile
</button>
<!-- Show status while requesting -->
<div v-if="requestingTile" class="context-menu-status">
⏳ {{ processingStatus || 'Requesting tile...' }}
</div>
<!-- State B: Tile exists but images not loaded -->
<button
v-if="tileData && !imagesLoaded && (tileData.jpg_available || tileData.png_available)"
@click="$emit('loadImages')"
v-if="tileMetadata && !imagesOnMap && hasAvailableImages"
@click="handleLoadImages"
class="context-menu-item"
:disabled="loadingImages"
>
📦 Load Tile Images
{{ loadingImages ? '⏳ Loading...' : '📦 Load Tile Images' }}
</button>
<!-- State C: Images loaded, but mound not loaded -->
<button
v-if="tileData && !moundLoaded"
@click="$emit('loadMound')"
v-if="tileMetadata && !hasMoundData"
@click="handleLoadMound"
class="context-menu-item"
:disabled="loadingMound"
>
🔬 Load Interactive Data
{{ loadingMound ? '⏳ Loading...' : '🔬 Load Interactive Data' }}
</button>
<!-- State D: Mound loaded, ready to open sandbox -->
<button
v-if="moundLoaded"
@click="$emit('openSandbox')"
v-if="hasMoundData"
@click="handleOpenSandbox"
class="context-menu-item"
>
🔬 Open in Shading Sandbox
@@ -60,48 +68,213 @@
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import { formatCoordinate } from '../utils/coordinates.js';
import { useTilesStore } from '../stores/tiles.js';
// ============================================================================
// INTERFACE
// PROPS & EMITS
// ============================================================================
const props = defineProps({
visible: {
type: Boolean,
parseMoundBuffer: {
type: Function,
required: true
},
x: {
type: Number,
required: true
},
y: {
type: Number,
required: true
},
lngLat: {
type: Object, // { lng, lat }
required: true
},
tileData: {
type: Object, // Tile metadata from API
default: null
},
imagesLoaded: {
type: Boolean,
default: false
},
moundLoaded: {
type: Boolean,
default: false
},
apiError: {
type: Boolean,
default: false
}
});
defineEmits(['dropPin', 'startMeasure', 'requestTile', 'loadImages', 'loadMound', 'openSandbox']);
const emit = defineEmits([
'dropPin',
'startMeasure',
'addImagesToMap', // Images loaded, ready to add to map
'openSandbox' // Mound loaded, ready to open sandbox
]);
// ============================================================================
// STORE & STATE
// ============================================================================
const tilesStore = useTilesStore();
// Own state
const visible = ref(false);
const x = ref(0);
const y = ref(0);
const lngLat = ref({ lng: 0, lat: 0 });
// Loading/processing states
const loadingImages = ref(false);
const loadingMound = ref(false);
const metadataError = ref(false);
const requestingTile = ref(false);
const processingStatus = ref(null);
// ============================================================================
// COMPUTED - TILE STATE FROM STORE
// ============================================================================
const tileId = computed(() => {
return tilesStore.findTileByCoords(lngLat.value.lat, lngLat.value.lng);
});
const tileMetadata = computed(() => {
return tileId.value ? tilesStore.getMetadata(tileId.value) : null;
});
const imagesOnMap = computed(() => {
return tileId.value ? tilesStore.areImagesOnMap(tileId.value) : false;
});
const hasMoundData = computed(() => {
return tileId.value ? tilesStore.hasMoundData(tileId.value) : false;
});
const hasAvailableImages = computed(() => {
if (!tileMetadata.value) return false;
return tileMetadata.value.jpg_available || tileMetadata.value.png_available;
});
// ============================================================================
// WATCHERS - FETCH METADATA WHEN MENU OPENS
// ============================================================================
watch(visible, async (isVisible) => {
if (isVisible && !tileId.value) {
await fetchMetadata();
}
});
// ============================================================================
// EXPOSED METHODS
// ============================================================================
function show(mouseX, mouseY, coordinates) {
x.value = mouseX;
y.value = mouseY;
lngLat.value = coordinates;
visible.value = true;
// Reset states
metadataError.value = false;
requestingTile.value = false;
processingStatus.value = null;
}
function hide() {
visible.value = false;
}
defineExpose({ show, hide });
// ============================================================================
// ACTIONS - METADATA
// ============================================================================
async function fetchMetadata() {
metadataError.value = false;
try {
await tilesStore.fetchMetadataByCoords(lngLat.value.lat, lngLat.value.lng);
} catch (err) {
console.error('Failed to fetch tile metadata:', err);
metadataError.value = true;
}
}
// ============================================================================
// ACTIONS - TILE OPERATIONS
// ============================================================================
async function handleRequestTile() {
requestingTile.value = true;
processingStatus.value = 'Looking up tile...';
const eventSource = tilesStore.requestTileProcessing(
lngLat.value.lat,
lngLat.value.lng,
async (data) => {
processingStatus.value = data.message || data.status;
// On ready: auto-load mound and open sandbox
if (data.status === 'ready' && data.tile_id) {
try {
await tilesStore.fetchMoundData(data.tile_id, props.parseMoundBuffer);
emit('openSandbox', data.tile_id);
// Close connection and hide menu
eventSource.close();
setTimeout(() => hide(), 500);
} catch (err) {
console.error('Failed to load mound after processing:', err);
processingStatus.value = 'Error loading data';
requestingTile.value = false;
}
}
if (data.status === 'error') {
requestingTile.value = false;
setTimeout(() => {
if (visible.value) {
processingStatus.value = null;
}
}, 5000);
}
},
(error) => {
console.error('Tile processing error:', error);
processingStatus.value = 'Connection failed';
requestingTile.value = false;
setTimeout(() => {
if (visible.value) {
processingStatus.value = null;
}
}, 5000);
}
);
}
async function handleLoadImages() {
if (!tileId.value || loadingImages.value) return;
loadingImages.value = true;
try {
emit('addImagesToMap', tileId.value);
} finally {
loadingImages.value = false;
}
}
async function handleLoadMound() {
if (!tileId.value || loadingMound.value) return;
loadingMound.value = true;
try {
await tilesStore.fetchMoundData(tileId.value, props.parseMoundBuffer);
} catch (err) {
console.error('Failed to load mound data:', err);
} finally {
loadingMound.value = false;
}
}
function handleOpenSandbox() {
if (!tileId.value) return;
emit('openSandbox', tileId.value);
hide();
}
function handleDropPin() {
emit('dropPin', lngLat.value);
hide();
}
function handleStartMeasure() {
emit('startMeasure', lngLat.value);
hide();
}
</script>
<style scoped>
@@ -147,6 +320,26 @@ defineEmits(['dropPin', 'startMeasure', 'requestTile', 'loadImages', 'loadMound'
font-weight: 600;
}
.context-menu-header .tile-status {
display: block;
margin-top: 4px;
font-size: 11px;
color: #2196F3;
font-weight: 500;
}
/* ============================================= */
/* STATUS DISPLAY */
/* ============================================= */
.context-menu-status {
padding: 10px 12px;
font-size: 13px;
color: #666;
background: #f9f9f9;
border-top: 1px solid #eee;
}
/* ============================================= */
/* MENU ITEMS */
/* ============================================= */
@@ -166,4 +359,14 @@ defineEmits(['dropPin', 'startMeasure', 'requestTile', 'loadImages', 'loadMound'
.context-menu-item:hover {
background: #f0f0f0;
}
.context-menu-item:disabled {
cursor: not-allowed;
opacity: 0.6;
background: #f9f9f9;
}
.context-menu-item:disabled:hover {
background: #f9f9f9;
}
</style>

141
ui/src/components/ShadingSandbox.vue
View File

@@ -290,15 +290,16 @@ const handleResize = () => {
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
// Use exact normalized terrain bounds (no padding = no black bars)
// Use exact tile boundaries (guaranteed square)
if (geometryCache) {
camera.left = -geometryCache.normalizedSpanX / 2;
camera.right = geometryCache.normalizedSpanX / 2;
camera.top = geometryCache.normalizedSpanY / 2;
camera.bottom = -geometryCache.normalizedSpanY / 2;
const halfSpan = geometryCache.tileSpan / 2;
camera.left = -halfSpan;
camera.right = halfSpan;
camera.top = halfSpan;
camera.bottom = -halfSpan;
} else {
// Fallback: square frustum if no tile loaded yet
const viewSize = 6;
const viewSize = 500; // Reasonable default in world units
camera.left = -viewSize;
camera.right = viewSize;
camera.top = viewSize;
@@ -325,32 +326,30 @@ const loadTileData = (tileData, newTileId) => {
}
try {
// Calculate bounds center
const centerX = (tileData.bounds.minX + tileData.bounds.maxX) / 2;
const centerY = (tileData.bounds.minY + tileData.bounds.maxY) / 2;
const centerZ = (tileData.bounds.minZ + tileData.bounds.maxZ) / 2;
// Tile bounds (guaranteed square, defines camera frustum)
const tileBounds = tileData.tileBounds || tileData.bounds;
const tileCenterX = (tileBounds.minX + tileBounds.maxX) / 2;
const tileCenterY = (tileBounds.minY + tileBounds.maxY) / 2;
const tileSpan = tileBounds.maxX - tileBounds.minX; // Should equal maxY - minY (square)
// Calculate spans
const spanX = tileData.bounds.maxX - tileData.bounds.minX;
const spanY = tileData.bounds.maxY - tileData.bounds.minY;
const spanZ = tileData.bounds.maxZ - tileData.bounds.minZ;
const maxSpan = Math.max(spanX, spanY);
// Mesh bounds (actual point data extent, for Z normalization)
const meshBounds = tileData.bounds;
const meshCenterZ = (meshBounds.minZ + meshBounds.maxZ) / 2;
const meshSpanZ = meshBounds.maxZ - meshBounds.minZ;
// Calculate actual aspect ratio of the tile
const tileAspect = spanX / spanY;
// Normalize XY to fit in view, maintaining actual aspect ratio
const normalizeScale = 10 / maxSpan;
// Z scaling: make Z variation visible but proportional
const zScale = normalizeScale * (maxSpan * 0.1) / spanZ;
// Z normalization: scale Z to be perceptible relative to tile span
// Use 10% of tile span as base Z scale (adjust this factor as needed for aesthetics)
const zNormalizationFactor = (tileSpan * 0.1) / meshSpanZ;
// Transform positions
const transformedPositions = new Float32Array(tileData.positions.length);
for (let i = 0; i < tileData.positions.length; i += 3) {
transformedPositions[i] = (tileData.positions[i] - centerX) * normalizeScale;
transformedPositions[i + 1] = (tileData.positions[i + 1] - centerY) * normalizeScale;
transformedPositions[i + 2] = (tileData.positions[i + 2] - centerZ) * zScale;
// X/Y: keep world coordinates, just centered on tile center
transformedPositions[i] = tileData.positions[i] - tileCenterX;
transformedPositions[i + 1] = tileData.positions[i + 1] - tileCenterY;
// Z: normalized relative to tile span, then will be height-exaggerated later
transformedPositions[i + 2] = (tileData.positions[i + 2] - meshCenterZ) * zNormalizationFactor;
}
// Create geometry
@@ -367,20 +366,14 @@ const loadTileData = (tileData, newTileId) => {
baseZ[i + 2] = transformedPositions[i + 2]; // Only Z values
}
// Calculate exact bounds of normalized terrain (no padding = no black bars)
const normalizedSpanX = spanX * normalizeScale;
const normalizedSpanY = spanY * normalizeScale;
geometryCache = {
geometry,
baseZ,
spanZ,
zScale,
tileAspect,
normalizedSpanX,
normalizedSpanY,
// Store original Web Mercator bounds for MapLibre positioning
originalBounds: { ...tileData.bounds }
tileBounds: tileBounds,
tileSpan: tileSpan,
zNormalizationFactor: zNormalizationFactor,
// Store original bounds for reference
originalBounds: { ...meshBounds }
};
// Create material and mesh
@@ -392,14 +385,15 @@ const loadTileData = (tileData, newTileId) => {
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Configure camera frustum to match tile aspect ratio
camera.left = -normalizedSpanX / 2;
camera.right = normalizedSpanX / 2;
camera.top = normalizedSpanY / 2;
camera.bottom = -normalizedSpanY / 2;
// Configure camera frustum to match tile boundaries (guaranteed square)
const halfSpan = tileSpan / 2;
camera.left = -halfSpan;
camera.right = halfSpan;
camera.top = halfSpan;
camera.bottom = -halfSpan;
// Adjust near/far to accommodate height exaggeration
const maxZExtent = (spanZ * zScale / 2) * 20; // Max exaggeration
const maxZExtent = (tileSpan * 0.1) * 20; // Max exaggeration (0.1 factor * 20x scale)
camera.near = 0.1;
camera.far = 100 + maxZExtent * 2;
camera.updateProjectionMatrix();
@@ -491,28 +485,21 @@ const renderTile = async () => {
const originalHeight = renderer.domElement.height;
const originalPixelRatio = renderer.getPixelRatio();
// Calculate render dimensions based on tile aspect ratio
let renderWidth = size;
let renderHeight = size;
if (geometryCache) {
const tileAspect = geometryCache.normalizedSpanX / geometryCache.normalizedSpanY;
if (tileAspect > 1) {
renderHeight = Math.round(size / tileAspect);
} else {
renderWidth = Math.round(size * tileAspect);
}
}
// Tiles are guaranteed square, so render dimensions are always square
const renderWidth = size;
const renderHeight = size;
// Set render size
renderer.setSize(renderWidth, renderHeight);
renderer.setPixelRatio(1); // No pixel ratio multiplier for export
// Update camera to match exact tile bounds (no black bars)
// Update camera to match exact tile bounds (guaranteed square)
if (geometryCache) {
camera.left = -geometryCache.normalizedSpanX / 2;
camera.right = geometryCache.normalizedSpanX / 2;
camera.top = geometryCache.normalizedSpanY / 2;
camera.bottom = -geometryCache.normalizedSpanY / 2;
const halfSpan = geometryCache.tileSpan / 2;
camera.left = -halfSpan;
camera.right = halfSpan;
camera.top = halfSpan;
camera.bottom = -halfSpan;
}
camera.updateProjectionMatrix();
@@ -588,28 +575,21 @@ const renderTileWithSettings = async (tileData, renderSettings, resolution = 102
const originalHeight = renderer.domElement.height;
const originalPixelRatio = renderer.getPixelRatio();
// Calculate render dimensions based on tile aspect ratio
let renderWidth = resolution;
let renderHeight = resolution;
if (geometryCache) {
const tileAspect = geometryCache.normalizedSpanX / geometryCache.normalizedSpanY;
if (tileAspect > 1) {
renderHeight = Math.round(resolution / tileAspect);
} else {
renderWidth = Math.round(resolution * tileAspect);
}
}
// Tiles are guaranteed square, so render dimensions are always square
const renderWidth = resolution;
const renderHeight = resolution;
// Set render size
renderer.setSize(renderWidth, renderHeight);
renderer.setPixelRatio(1);
// Update camera to match exact tile bounds (no black bars)
// Update camera to match exact tile bounds (guaranteed square)
if (geometryCache) {
camera.left = -geometryCache.normalizedSpanX / 2;
camera.right = geometryCache.normalizedSpanX / 2;
camera.top = geometryCache.normalizedSpanY / 2;
camera.bottom = -geometryCache.normalizedSpanY / 2;
const halfSpan = geometryCache.tileSpan / 2;
camera.left = -halfSpan;
camera.right = halfSpan;
camera.top = halfSpan;
camera.bottom = -halfSpan;
}
camera.updateProjectionMatrix();
@@ -623,12 +603,13 @@ const renderTileWithSettings = async (tileData, renderSettings, resolution = 102
renderer.setSize(originalWidth / originalPixelRatio, originalHeight / originalPixelRatio);
renderer.setPixelRatio(originalPixelRatio);
// Restore camera with exact normalized bounds
// Restore camera with exact tile bounds
if (geometryCache) {
camera.left = -geometryCache.normalizedSpanX / 2;
camera.right = geometryCache.normalizedSpanX / 2;
camera.top = geometryCache.normalizedSpanY / 2;
camera.bottom = -geometryCache.normalizedSpanY / 2;
const halfSpan = geometryCache.tileSpan / 2;
camera.left = -halfSpan;
camera.right = halfSpan;
camera.top = halfSpan;
camera.bottom = -halfSpan;
}
camera.updateProjectionMatrix();