import { describeFetchPanelContext } from './geometry-selection-copy.js?v=scim3-current-59'; import { syncGeometryAssetSlotsState } from '../geometry/geometry-asset-slots-state.js?v=scim3-current-59'; import { activeGeometryAssetEditLayer, geometryAssetLayerOpacity, isGeometryAssetLayerLocked, syncGeometryAssetLayerStackState } from '../geometry/geometry-asset-layer-stack-state.js?v=scim3-current-59'; import { wgs84PointsToWorkbench } from '../geometry/wgs84-projection.js?v=scim3-current-59'; export function renderFetchRegioBoundaryPanel(ctx, canvas, panel, colors, scimState = null) { if (!panel) return; const selectionCopy = describeFetchPanelContext(scimState); panel.tabBounds = []; panel.controlBounds = []; panel.buildControlBounds = []; panel.geometryAssetSlotBounds = []; panel.layerStackPopoverBounds = null; panel.closeBounds = null; panel.workbenchMapBounds = null; panel.draftNameInputBounds = null; panel.draftCreatorInputBounds = null; panel.draftShortNoteInputBounds = null; panel.osmRelationIdInputBounds = null; panel.osmSearchInputBounds = null; panel.pointReductionSliderBounds = null; panel.leafletMapBounds = null; if (!panel.visible) { renderFetchRegionHeaderToggle(ctx, canvas, panel, colors, selectionCopy); return; } const bounds = resolvePanelBounds(panel, canvas); panel.renderBounds = bounds; const { x, y, width, height } = bounds; const textColor = colors?.text || '#f5f5f5'; const mutedColor = 'rgba(245,245,245,0.68)'; const focusColor = colors?.focus || '#fff7d1'; ctx.save(); ctx.globalAlpha = 0.95; ctx.fillStyle = 'rgba(8, 10, 10, 0.91)'; ctx.strokeStyle = colors?.line || 'rgba(255,255,255,0.62)'; ctx.lineWidth = 1; ctx.fillRect(x, y, width, height); ctx.strokeRect(x, y, width, height); ctx.fillStyle = textColor; ctx.font = '12px ui-monospace, monospace'; ctx.fillText(selectionCopy.panelTitle, x + 16, y + 24); renderFetchRegionHeaderToggle(ctx, canvas, panel, colors, selectionCopy, bounds); ctx.font = '10px ui-monospace, monospace'; ctx.fillText(`${selectionCopy.status} - ${selectionCopy.hint} / mock / not_truth`, x + 16, y + 44, width - 126); renderTabs(ctx, panel, x + 16, y + 60, width - 32, mutedColor, focusColor); const content = { x: x + 16, y: y + 106, width: width - 32, height: height - 124 }; if (panel.activeTab === 'Build Geometry') renderBuildGeometryTab(ctx, scimState, content, mutedColor, textColor, focusColor, selectionCopy); if (panel.activeTab === 'Geometry Assets') renderGeometryAssetsTab(ctx, scimState, content, mutedColor, textColor, focusColor); if (panel.activeTab === 'Map Connector') renderMapConnectorTab(ctx, scimState, content, mutedColor, textColor, focusColor); if (panel.activeTab === 'Review State') renderReviewStateTab(ctx, panel, scimState, content, mutedColor, textColor, focusColor); if (panel.activeTab === 'Representation Intake') renderRepresentationIntakeTab(ctx, scimState, content, mutedColor, textColor, focusColor); ctx.restore(); } function renderFetchRegionHeaderToggle(ctx, canvas, panel, colors, selectionCopy, panelBounds = null) { const label = panel.visible ? '-' : '+'; const width = 30; const bounds = panel.visible && panelBounds ? { x: panelBounds.x + panelBounds.width - width - 18, y: panelBounds.y + 10, width, height: 24 } : { x: canvas.width - width - 24, y: 10, width, height: 24 }; panel.headerToggleBounds = bounds; panel.headerToggleTooltip = selectionCopy.panelTooltip; ctx.save(); ctx.fillStyle = panel.visible ? 'rgba(255,247,209,0.13)' : 'rgba(255,255,255,0.055)'; ctx.strokeStyle = panel.visible ? colors?.focus || '#fff7d1' : 'rgba(255,255,255,0.34)'; ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.fillStyle = panel.visible ? colors?.focus || '#fff7d1' : colors?.text || '#f5f5f5'; ctx.font = '14px ui-monospace, monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(label, bounds.x + bounds.width / 2, bounds.y + bounds.height / 2 + 0.5); ctx.restore(); } function resolvePanelBounds(panel, canvas) { if (panel.layoutMode !== 'canvas_boundary_workbench') return panel.bounds; const margin = 24; const top = 52; const footer = 28; const CHROME = 124; // header + tabs + inner margins inside the panel const SIDEBAR_MIN_CONTENT = 260; // slim sidebar floor (name + metadata + tool icons) const TARGET_MAP_RATIO = 4 / 2; // 2:1, must match renderBuildGeometryTab const availableW = Math.max(0, canvas.width - margin * 2); const availableH = Math.max(0, canvas.height - top - footer); // The panel height is driven by the 2:1 workbench map, NOT by the canvas height. // Sidebar height follows; if its content needs more than the map's height we // raise the floor — but only by what the sidebar actually needs, not by 700px. const sideWidth = Math.min(260, availableW * 0.25); const mapZoneWidth = Math.max(0, availableW - 32 - sideWidth - 18); const naturalMapHeight = mapZoneWidth / TARGET_MAP_RATIO; const desiredContentHeight = Math.max(naturalMapHeight, SIDEBAR_MIN_CONTENT); const desiredPanelHeight = desiredContentHeight + CHROME; // Clamp to canvas: never push the footer off-screen. const panelHeight = Math.min(desiredPanelHeight, availableH); return { x: margin, y: top, width: availableW, height: panelHeight }; } function renderTabs(ctx, panel, x, y, width, mutedColor, focusColor) { const tabWidth = Math.floor((width - 4 * (panel.tabs.length - 1)) / panel.tabs.length); panel.tabBounds = panel.tabs.map((label, index) => { const bounds = { label, x: x + index * (tabWidth + 4), y, width: tabWidth, height: 24 }; const active = panel.activeTab === label; ctx.fillStyle = active ? 'rgba(255,247,209,0.15)' : 'rgba(255,255,255,0.045)'; ctx.strokeStyle = active ? focusColor : 'rgba(255,255,255,0.24)'; ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.fillStyle = active ? focusColor : mutedColor; ctx.font = '9px ui-monospace, monospace'; ctx.fillText(label, bounds.x + 10, bounds.y + 16, bounds.width - 16); return bounds; }); ctx.strokeStyle = 'rgba(255,255,255,0.14)'; ctx.beginPath(); ctx.moveTo(x, y + 36); ctx.lineTo(x + width, y + 36); ctx.stroke(); } function renderBuildGeometryTab(ctx, scimState, box, mutedColor, textColor, focusColor, selectionCopy) { const sideWidth = Math.min(260, box.width * 0.25); const mapBoxX = box.x + sideWidth + 18; const availableMapWidth = box.width - sideWidth - 18; const availableMapHeight = box.height; // Maintain a stable 4:3 aspect ratio for the workbench map so resizing the // window does not squash or stretch the drawing area. The map fills the // available height, then derives width from ratio; if too wide, falls back // to width-driven height. Empty space is left unfilled (no stretch). const targetRatio = 4 / 2; // 2:1 — Map ist deutlich breiter als hoch, gibt mehr Platz für Detail-Editing. let mapWidth = availableMapHeight * targetRatio; let mapHeight = availableMapHeight; if (mapWidth > availableMapWidth) { mapWidth = availableMapWidth; mapHeight = mapWidth / targetRatio; } const map = { x: mapBoxX, y: box.y, width: mapWidth, height: mapHeight }; renderWorkbenchSidebar(ctx, box.x, box.y, sideWidth, box.height, mutedColor, textColor, focusColor, selectionCopy, scimState?.buildTarget, scimState?.fetchPanel, scimState); renderBuildGeometryMap(ctx, scimState, map, mutedColor, focusColor, selectionCopy); // Leaflet-Karte (Map & Sketch) liegt über dem Workbench-Monitor. app.js // positioniert das HTML-Overlay nach Maßgabe dieser Bounds. if (scimState?.fetchPanel) { scimState.fetchPanel.leafletMapBounds = { x: map.x, y: map.y, width: map.width, height: map.height }; } } function renderWorkbenchSidebar(ctx, x, y, width, height, mutedColor, textColor, focusColor, selectionCopy, buildTarget, panel, scimState) { const sourceSlot = buildTarget?.source_slot; const candidateDraft = buildTarget?.candidate_draft; const workbenchView = buildTarget?.workbench_view; const activeMode = buildTarget?.workbench_mode || 'select'; const sourceReady = Boolean(sourceSlot?.geometry_available); const drawLayerLocked = isGeometryAssetLayerLocked(scimState, DRAW_DRAFT_LAYER_SLOT_ID); const activeEditLayer = activeGeometryAssetEditLayer(scimState); const activeEditLayerStatus = activeEditLayer ? activeEditLayer.edit_status === 'locked_visible_only' ? `${activeEditLayer.label} / locked` : `${activeEditLayer.label} / active` : 'none'; const drawPointCount = buildTarget?.draw_placeholder_draft?.points?.length || 0; const activePreview = buildTarget?.active_preview; const savedBuildCandidate = scimState?.candidateState?.savedBuildCandidate; const spatialFrame = buildTarget?.workbench_spatial_frame; const savedPointCount = savedBuildCandidate?.candidate_geometry_data?.points?.length || savedBuildCandidate?.active_preview?.point_count || 0; const validationPairs = workbenchValidationPairs(buildTarget); ctx.fillStyle = 'rgba(255,255,255,0.035)'; ctx.strokeStyle = 'rgba(255,255,255,0.18)'; ctx.fillRect(x, y, width, height); ctx.strokeRect(x, y, width, height); ctx.fillStyle = textColor; ctx.font = '10px ui-monospace, monospace'; ctx.fillText(selectionCopy.sidebarTitle, x + 12, y + 20, width - 36); // Diagnostics-Chevron rechts neben dem Titel. const chevronOpen = Boolean(panel?.diagnosticsOpen); const chevronBounds = { label: 'Toggle Diagnostics', x: x + width - 22, y: y + 8, width: 16, height: 16 }; ctx.save(); ctx.fillStyle = chevronOpen ? 'rgba(255,184,77,0.16)' : 'rgba(255,255,255,0.04)'; ctx.strokeStyle = chevronOpen ? 'rgba(255,184,77,0.62)' : 'rgba(255,255,255,0.28)'; ctx.fillRect(chevronBounds.x, chevronBounds.y, chevronBounds.width, chevronBounds.height); ctx.strokeRect(chevronBounds.x, chevronBounds.y, chevronBounds.width, chevronBounds.height); ctx.font = '10px ui-monospace, monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = chevronOpen ? 'rgba(255,184,77,0.96)' : mutedColor; ctx.fillText(chevronOpen ? '▾' : '▸', chevronBounds.x + 8, chevronBounds.y + 9); ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic'; ctx.restore(); if (panel) panel.buildControlBounds.push(chevronBounds); ctx.fillStyle = mutedColor; ctx.font = '9px ui-monospace, monospace'; // Trimmed sidebar status pairs — Diagnose-Detail entfernt, nur Essentials. // Rest gehört entweder ins Geometry Asset Tab oder ist überflüssig für den Nutzer. const isFederationContext = buildTarget?.build_context === 'federation_representation'; const contextPairs = isFederationContext ? [ ['selection', selectionCopy.status], ['mode', workbenchModeLabel(buildTarget)], ['draft', `${drawPointCount} points / ${buildTarget?.draw_placeholder_draft?.draft_status || 'empty'}`], ['preview', activePreview?.preview_source_type || 'none'], ['save', buildTarget?.save_gate_status || 'no_preview'], ...federationSidebarPairs(scimState) ] : [ ['selection', selectionCopy.status], ['mode', workbenchModeLabel(buildTarget)], ['draft', `${drawPointCount} points / ${buildTarget?.draw_placeholder_draft?.draft_status || 'empty'}`], ['preview', activePreview?.preview_source_type || 'none'], ['save', buildTarget?.save_gate_status || 'no_preview'] ]; renderStatusPairs(ctx, contextPairs, x + 12, y + 42, width - 24); // Diagnostics-Drawer: Popover rechts neben der Sidebar, zeigt die vollständigen // technischen Pairs an wenn aufgeklappt. Default: zu. if (chevronOpen) { renderDiagnosticsDrawer(ctx, x + width + 8, y + 8, scimState, buildTarget, mutedColor, focusColor); } // Draft section folgt direkt nach den Pairs — kein fester 306px-Floor mehr. const toolTop = y + 42 + contextPairs.length * 14 + 28; const separatorY = toolTop - 14; ctx.strokeStyle = focusColor; ctx.globalAlpha = 0.26; ctx.beginPath(); ctx.moveTo(x + 12, separatorY); ctx.lineTo(x + width - 12, separatorY); ctx.stroke(); ctx.globalAlpha = 0.95; renderDraftGeometriesSection(ctx, x, toolTop, width, mutedColor, focusColor, buildTarget, panel, drawLayerLocked); // Mock Source Load tool entfernt — OSM ist jetzt die echte Vorlage, // für Vorlagenfreies Zeichnen genügt ein leerer Draft. } function renderDiagnosticsDrawer(ctx, x, y, scimState, buildTarget, mutedColor, focusColor) { const sourceSlot = buildTarget?.source_slot; const candidateDraft = buildTarget?.candidate_draft; const workbenchView = buildTarget?.workbench_view; const drawLayerLocked = isGeometryAssetLayerLocked(scimState, DRAW_DRAFT_LAYER_SLOT_ID); const activeEditLayer = activeGeometryAssetEditLayer(scimState); const activeEditLayerStatus = activeEditLayer ? activeEditLayer.edit_status === 'locked_visible_only' ? `${activeEditLayer.label} / locked` : `${activeEditLayer.label} / active` : 'none'; const drawPointCount = buildTarget?.draw_placeholder_draft?.points?.length || 0; const activePreview = buildTarget?.active_preview; const savedBuildCandidate = scimState?.candidateState?.savedBuildCandidate; const spatialFrame = buildTarget?.workbench_spatial_frame; const savedPointCount = savedBuildCandidate?.candidate_geometry_data?.points?.length || savedBuildCandidate?.active_preview?.point_count || 0; const validationPairs = workbenchValidationPairs(buildTarget); const pairs = [ ['build', buildTarget?.target_geometry_type || 'none'], ['parent', buildTarget?.parent_label || 'none'], ['candidate', buildTarget?.candidate_name || 'none'], ['source', sourceSlot?.source_type || 'empty'], ['source label', sourceSlot?.source_label || 'No source loaded'], ['validation', sourceSlot?.validation_status || 'not_validated'], ['frame', workbenchFrameStatus(spatialFrame)], ['monitor fit', workbenchView?.fit_mode || 'fit_parent'], ['monitor layer', workbenchView?.selected_layer || 'parent'], ['edit layer', activeEditLayerStatus], ['draw lock', drawLayerLocked ? 'locked / visible only' : 'free'], ...validationPairs, ['saved', savedBuildCandidate?.candidate_status || 'none'], ['saved points', `${savedPointCount}`], ['saved frame', savedBuildCandidate?.workbench_spatial_frame_id || 'none'], ['saved truth', savedBuildCandidate?.truth_status || 'not_truth'] ]; const width = 220; const padding = 10; const rowHeight = 12; const headerHeight = 22; const height = headerHeight + pairs.length * rowHeight + padding; ctx.save(); ctx.fillStyle = 'rgba(8,10,10,0.94)'; ctx.strokeStyle = 'rgba(255,184,77,0.42)'; ctx.lineWidth = 1; ctx.fillRect(x, y, width, height); ctx.strokeRect(x, y, width, height); ctx.font = '9px ui-monospace, monospace'; ctx.fillStyle = focusColor; ctx.fillText('Diagnostics', x + padding, y + 14, width - padding * 2); ctx.font = '8px ui-monospace, monospace'; pairs.forEach(([title, state], index) => { const rowY = y + headerHeight + index * rowHeight; ctx.fillStyle = 'rgba(245,245,245,0.46)'; ctx.fillText(`${title}`, x + padding, rowY + 8, 80); ctx.fillStyle = mutedColor; ctx.fillText(String(state), x + padding + 84, rowY + 8, width - padding * 2 - 84); }); ctx.restore(); } function renderDraftGeometriesSection(ctx, x, y, width, mutedColor, focusColor, buildTarget, panel, drawLayerLocked) { const draft = buildTarget?.draw_placeholder_draft; const sourceReady = Boolean(buildTarget?.source_slot?.geometry_available); const layerCreated = draft?.layer_status === 'draft_layer_created'; const pointCount = draft?.points?.length || 0; const previewReady = Boolean(buildTarget?.active_preview?.can_save); const draftName = draft?.draft_name || null; const draftNameSet = Boolean(draftName?.trim()); const saveReady = draftNameSet && previewReady; const targetName = buildTarget?.candidate_name || 'New Geometry Boundary'; const rawGeoType = buildTarget?.target_geometry_type || ''; const geoTypeLabel = rawGeoType.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); const placeholder = `New ${geoTypeLabel || 'Geometry'} Boundary`; const left = x + 12; const innerWidth = width - 24; let cursorY = y; ctx.save(); ctx.font = '10px ui-monospace, monospace'; ctx.fillStyle = focusColor; ctx.fillText('Draft Geometries', left, cursorY + 12, innerWidth); cursorY += 20; if (layerCreated || pointCount > 0) { // Slim card: name + 3 metadata rows. Status-Zeilen entfernt — gehören in Geometry Asset. const card = { x: left, y: cursorY, width: innerWidth, height: 70 }; const active = buildTarget?.workbench_mode === 'draw_placeholder'; ctx.fillStyle = active ? 'rgba(255,247,209,0.105)' : 'rgba(255,255,255,0.035)'; ctx.strokeStyle = active ? 'rgba(255,247,209,0.52)' : 'rgba(255,255,255,0.18)'; ctx.fillRect(card.x, card.y, card.width, card.height); ctx.strokeRect(card.x, card.y, card.width, card.height); const nameBounds = { label: 'Draft Name Input', x: card.x + 8, y: card.y + 4, width: card.width - 16, height: 18 }; ctx.fillStyle = draftNameSet ? 'rgba(255,247,209,0.08)' : 'rgba(255,255,255,0.03)'; ctx.strokeStyle = draftNameSet ? 'rgba(255,247,209,0.38)' : 'rgba(255,255,255,0.20)'; ctx.lineWidth = 1; ctx.fillRect(nameBounds.x, nameBounds.y, nameBounds.width, nameBounds.height); ctx.strokeRect(nameBounds.x, nameBounds.y, nameBounds.width, nameBounds.height); ctx.font = '9px ui-monospace, monospace'; ctx.fillStyle = draftNameSet ? focusColor : 'rgba(245,245,245,0.32)'; ctx.fillText(draftNameSet ? draftName : placeholder, nameBounds.x + 6, nameBounds.y + 13, nameBounds.width - 10); if (panel) { panel.buildControlBounds.push(nameBounds); panel.draftNameInputBounds = nameBounds; } // Metadata: 3 schmale Zeilen unter dem Namen. ctx.font = '8px ui-monospace, monospace'; const creator = draft?.creator || '-'; const createdAt = draft?.created_at || '-'; const shortNote = draft?.short_note || 'click to add note…'; const metaY0 = card.y + 28; const labelX = card.x + 10; const valueX = card.x + 60; const valueW = card.width - 70; ctx.fillStyle = 'rgba(245,245,245,0.46)'; ctx.fillText('created', labelX, metaY0 + 8, 44); ctx.fillStyle = mutedColor; ctx.fillText(createdAt, valueX, metaY0 + 8, valueW); const creatorBounds = { label: 'Draft Creator Input', x: card.x + 8, y: metaY0 + 11, width: card.width - 16, height: 11 }; ctx.fillStyle = 'rgba(245,245,245,0.46)'; ctx.fillText('creator', labelX, metaY0 + 19, 44); ctx.fillStyle = draft?.creator ? mutedColor : 'rgba(245,245,245,0.32)'; ctx.fillText(creator, valueX, metaY0 + 19, valueW); if (panel) { panel.buildControlBounds.push(creatorBounds); panel.draftCreatorInputBounds = creatorBounds; } const noteBounds = { label: 'Draft Short Note Input', x: card.x + 8, y: metaY0 + 22, width: card.width - 16, height: 12 }; ctx.fillStyle = 'rgba(245,245,245,0.46)'; ctx.fillText('note', labelX, metaY0 + 30, 44); ctx.fillStyle = draft?.short_note ? mutedColor : 'rgba(245,245,245,0.32)'; ctx.fillText(shortNote, valueX, metaY0 + 30, valueW); if (panel) { panel.buildControlBounds.push(noteBounds); panel.draftShortNoteInputBounds = noteBounds; } cursorY += card.height + 8; } // „New Draft Layer"-Vollbreitenkarte entfernt. Stattdessen kleines Plus-Icon // direkt vor den Tool-Buttons unten — erlaubt das Erzeugen ohne Spaltenbreite zu fressen. const iconSize = 28; const iconGap = 7; const iconGroupWidth = iconSize * 4 + iconGap * 3 + 12; const iconX = left + innerWidth - iconGroupWidth; const iconY = cursorY; ctx.fillStyle = 'rgba(0,0,0,0.28)'; ctx.strokeStyle = 'rgba(255,247,209,0.14)'; ctx.fillRect(iconX - 6, iconY - 4, iconGroupWidth, iconSize + 8); ctx.strokeRect(iconX - 6, iconY - 4, iconGroupWidth, iconSize + 8); // Plus-Icon: New Draft Layer (leerer Draft, zum freien Zeichnen) const newDraftBounds = { label: 'New Draft Layer', x: iconX, y: iconY, width: iconSize, height: iconSize }; ctx.fillStyle = layerCreated ? 'rgba(255,247,209,0.06)' : 'rgba(255,255,255,0.075)'; ctx.strokeStyle = layerCreated ? 'rgba(255,247,209,0.22)' : 'rgba(255,247,209,0.42)'; ctx.fillRect(newDraftBounds.x, newDraftBounds.y, iconSize, iconSize); ctx.strokeRect(newDraftBounds.x, newDraftBounds.y, iconSize, iconSize); ctx.save(); ctx.font = '18px ui-monospace, monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = layerCreated ? mutedColor : focusColor; ctx.fillText('+', newDraftBounds.x + iconSize / 2, newDraftBounds.y + iconSize / 2 + 1); ctx.restore(); if (panel) panel.buildControlBounds.push(newDraftBounds); // Import-Icon: Datei (GeoJSON / SCIM3) als Draft laden — zum Sichten + Korrigieren const importBounds = { label: 'Import Candidate File', x: iconX + iconSize + iconGap, y: iconY, width: iconSize, height: iconSize }; ctx.fillStyle = 'rgba(255,255,255,0.06)'; ctx.strokeStyle = 'rgba(184,226,255,0.52)'; ctx.fillRect(importBounds.x, importBounds.y, iconSize, iconSize); ctx.strokeRect(importBounds.x, importBounds.y, iconSize, iconSize); ctx.save(); ctx.strokeStyle = 'rgba(184,226,255,0.96)'; ctx.lineWidth = 1.4; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; const ix = importBounds.x + iconSize / 2; const iy = importBounds.y + iconSize / 2; // Pfeil nach unten in eine Schale ctx.beginPath(); ctx.moveTo(ix, iy - 6); ctx.lineTo(ix, iy + 3); ctx.moveTo(ix - 4, iy - 1); ctx.lineTo(ix, iy + 3); ctx.lineTo(ix + 4, iy - 1); // Schale ctx.moveTo(ix - 6, iy + 4); ctx.lineTo(ix - 6, iy + 7); ctx.lineTo(ix + 6, iy + 7); ctx.lineTo(ix + 6, iy + 4); ctx.stroke(); ctx.restore(); if (panel) panel.buildControlBounds.push(importBounds); const previewIconBounds = { label: 'Set Active Preview', tooltip: toolRailTooltip('Set Active Preview'), x: iconX + (iconSize + iconGap) * 2, y: iconY, width: iconSize, height: iconSize }; const previewActive = previewReady; const previewEnabled = sourceReady; ctx.fillStyle = previewActive ? 'rgba(255,184,77,0.16)' : previewEnabled ? 'rgba(255,255,255,0.075)' : 'rgba(255,255,255,0.035)'; ctx.strokeStyle = previewActive ? 'rgba(255,184,77,0.90)' : previewEnabled ? 'rgba(255,255,255,0.38)' : 'rgba(255,255,255,0.18)'; ctx.fillRect(previewIconBounds.x, previewIconBounds.y, iconSize, iconSize); ctx.strokeRect(previewIconBounds.x, previewIconBounds.y, iconSize, iconSize); ctx.globalAlpha = previewEnabled ? 1 : 0.34; renderWorkbenchToolIcon(ctx, previewIconBounds, 'preview', previewActive ? 'rgba(255,184,77,0.96)' : mutedColor); ctx.globalAlpha = 1; if (panel) panel.buildControlBounds.push(previewIconBounds); const saveIconBounds = { label: 'Save as Candidate', tooltip: toolRailTooltip('Save as Candidate'), x: iconX + (iconSize + iconGap) * 3, y: iconY, width: iconSize, height: iconSize }; ctx.fillStyle = saveReady ? 'rgba(255,184,77,0.16)' : 'rgba(255,255,255,0.035)'; ctx.strokeStyle = saveReady ? 'rgba(255,184,77,0.90)' : 'rgba(255,255,255,0.18)'; ctx.fillRect(saveIconBounds.x, saveIconBounds.y, iconSize, iconSize); ctx.strokeRect(saveIconBounds.x, saveIconBounds.y, iconSize, iconSize); ctx.globalAlpha = saveReady ? 1 : 0.34; renderWorkbenchToolIcon(ctx, saveIconBounds, 'save', saveReady ? 'rgba(255,184,77,0.96)' : mutedColor); ctx.globalAlpha = 1; if (panel) panel.buildControlBounds.push(saveIconBounds); cursorY += iconSize + 8; // Inline Reduce-Zeile entfernt — Reduce lebt jetzt in der Tool Rail unter Snap. ctx.restore(); return cursorY + 4; } function renderMiniAction(ctx, bounds, label, enabled, focusColor, mutedColor) { ctx.fillStyle = enabled ? 'rgba(255,247,209,0.10)' : 'rgba(255,255,255,0.025)'; ctx.strokeStyle = enabled ? 'rgba(255,247,209,0.42)' : 'rgba(255,255,255,0.14)'; ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.fillStyle = enabled ? focusColor : mutedColor; ctx.font = '8px ui-monospace, monospace'; ctx.fillText(label, bounds.x + 7, bounds.y + 12, bounds.width - 12); } function renderStatusPairs(ctx, pairs, x, y, width) { ctx.font = '9px ui-monospace, monospace'; pairs.forEach(([title, state], index) => { const rowY = y + index * 14; ctx.fillStyle = 'rgba(245,245,245,0.46)'; const titleText = `${title} `; ctx.fillText(titleText, x, rowY, width); const titleWidth = Math.min(ctx.measureText(titleText).width, 82); ctx.fillStyle = 'rgba(245,245,245,0.76)'; ctx.fillText(String(state), x + titleWidth + 6, rowY, width - titleWidth - 6); }); } function workbenchFrameStatus(spatialFrame) { if (!spatialFrame) return 'none'; const ready = spatialFrame.workbench_spatial_frame_id ? 'ready' : 'none'; return `${ready} / ${spatialFrame.transform_status || 'unknown'}`; } function workbenchValidationPairs(buildTarget) { const sourceReady = Boolean(buildTarget?.source_slot?.geometry_available); const draft = buildTarget?.draw_placeholder_draft; const pointCount = draft?.points?.length || 0; const undoAvailable = pointCount > 0 || (draft?.undo_stack?.length || 0) > 0; const drawStatus = draft?.is_closed ? 'closed' : pointCount ? 'open' : 'empty'; const previewReady = Boolean(buildTarget?.active_preview?.can_save); const saveReady = buildTarget?.save_gate_status === 'ready' && previewReady; const draftName = buildTarget?.draw_placeholder_draft?.draft_name; return [ ['valid source', sourceReady ? 'yes' : 'no'], ['valid draw', `${drawStatus} / points ${pointCount}`], ['valid name', draftName ? draftName : 'required'], ['valid preview', previewReady ? 'yes' : 'no'], ['valid save', (draftName && saveReady) ? 'ready' : 'blocked'] ]; } function federationSidebarPairs(scimState) { const selection = scimState?.federationSelection; const selectedIds = selection?.selectedGeometryAssetIds || []; return [ ['federation', selection?.valid_for_federation_representation ? 'valid' : 'invalid'], ['regions', `${selection?.region_count || 0}`], ['ghosts', `${selection?.ghost_region_count || 0}`], ['parents', `${selectedIds.length}`], ['role', 'cross-region representation'], ['truth', 'not_truth / operator review required'] ]; } function renderBuildGeometryMap(ctx, scimState, map, mutedColor, focusColor, selectionCopy) { const buildTarget = scimState?.buildTarget; const workbenchView = buildTarget?.workbench_view; const draftFrame = drawDraftFrameStyle(scimState, buildTarget); if (scimState?.fetchPanel) scimState.fetchPanel.workbenchMapBounds = map; ctx.fillStyle = 'rgba(255,255,255,0.025)'; ctx.strokeStyle = draftFrame.color; ctx.lineWidth = draftFrame.width; ctx.fillRect(map.x, map.y, map.width, map.height); ctx.strokeRect(map.x, map.y, map.width, map.height); ctx.lineWidth = 1; ctx.save(); ctx.beginPath(); ctx.rect(map.x, map.y, map.width, map.height); ctx.clip(); renderMapGrid(ctx, map, workbenchView); // Mock-Boundary-Polygone (EU, Austria, Salzkammergut, Gruenberg) im Workbench // entfernt — sind keine Vorlage und nicht Teil des realen Workflow. Nur Layer // Stack Entries (echte Templates / Drafts / Assets) werden gerendert. renderStackedWorkbenchLayers(ctx, map, scimState, buildTarget, focusColor, workbenchView); ctx.restore(); renderWorkbenchViewDock(ctx, map, buildTarget, scimState?.fetchPanel, mutedColor, focusColor); renderBuildGeometryLayerStackHint(ctx, map, scimState, buildTarget, scimState?.fetchPanel, mutedColor, focusColor); renderFederationMapSummary(ctx, map, scimState, mutedColor, focusColor); // renderRepresentationGeometryInspector entfernt — Representation Intake nicht relevant. renderWorkbenchReviewDock(ctx, map, mutedColor); renderWorkbenchStatusStrip(ctx, map, scimState, buildTarget, selectionCopy, mutedColor, focusColor); renderWorkbenchToolRail(ctx, map, scimState, buildTarget, scimState?.fetchPanel, mutedColor, focusColor); } function renderWorkbenchReviewDock(ctx, map, mutedColor) { const controls = [ { label: 'Validate', status: 'inactive' }, { label: 'Compare Source', status: 'inactive' } ]; const width = 132; const height = 22; const gap = 8; const x = map.x + map.width - 14 - controls.length * width - (controls.length - 1) * gap; const y = map.y + map.height - 54; ctx.save(); ctx.font = '9px ui-monospace, monospace'; controls.forEach((control, index) => { const bx = x + index * (width + gap); ctx.fillStyle = 'rgba(255,255,255,0.026)'; ctx.strokeStyle = 'rgba(255,255,255,0.16)'; ctx.fillRect(bx, y, width, height); ctx.strokeRect(bx, y, width, height); ctx.fillStyle = mutedColor; ctx.fillText(`${control.label} / ${control.status}`, bx + 9, y + 14, width - 16); }); ctx.restore(); } function renderRepresentationGeometryInspector(ctx, map, scimState, mutedColor, focusColor) { const representation = scimState?.gruenberg; if (!representation || !shouldShowPanelScope(scimState, 'representation')) return; const layer = (scimState?.geometryAssetLayerStack || []).find(item => item.slot_id === 'slot:geometry-asset:representation-geometry'); const width = 330; const height = 76; const x = map.x + 14; const y = map.y + map.height - 116; const pairs = [ ['name', representation.display_label || 'Unnamed Representation'], ['parent', 'Salzkammergut'], ['status', representation.source_manifest?.source_status || representation.asset_status || 'memory candidate'], ['layer', layer ? `${layer.label} / ${Math.round(layer.opacity * 100)}%` : 'Representation Geometry'], ['truth', representation.truth_status || 'not_truth'] ]; ctx.save(); ctx.fillStyle = 'rgba(0,0,0,0.42)'; ctx.strokeStyle = 'rgba(255,247,209,0.22)'; ctx.fillRect(x, y, width, height); ctx.strokeRect(x, y, width, height); ctx.font = '9px ui-monospace, monospace'; ctx.fillStyle = focusColor; ctx.fillText('Representation Geometry', x + 10, y + 15, width - 20); pairs.forEach(([title, state], index) => { const rowY = y + 30 + index * 9; ctx.fillStyle = 'rgba(245,245,245,0.46)'; ctx.fillText(`${title} `, x + 10, rowY, 54); ctx.fillStyle = title === 'name' ? 'rgba(245,245,245,0.80)' : mutedColor; ctx.fillText(String(state), x + 68, rowY, width - 78); }); ctx.restore(); } function drawDraftFrameStyle(scimState, buildTarget) { const fallback = { color: 'rgba(255,255,255,0.18)', width: 1 }; if (buildTarget?.workbench_mode !== 'draw_placeholder') return fallback; const layers = syncGeometryAssetLayerStackState(scimState); const index = layers.findIndex(layer => layer.slot_id === 'slot:geometry-asset:draw-draft-candidate'); if (index < 0 || layers.length < 1) return fallback; const depth = layers.length <= 1 ? 1 : 1 - index / (layers.length - 1); const alpha = 0.30 + depth * 0.70; const locked = isGeometryAssetLayerLocked(scimState, 'slot:geometry-asset:draw-draft-candidate'); return { color: `rgba(255,184,77,${locked ? Math.min(alpha, 0.42) : alpha.toFixed(3)})`, width: locked ? 1 : 1.4 }; } function renderStackedWorkbenchLayers(ctx, map, scimState, buildTarget, focusColor, workbenchView) { const layers = [...syncGeometryAssetLayerStackState(scimState)].reverse(); layers.forEach(layer => { if (layer.slot_id === 'slot:geometry-asset:draw-draft-candidate') { renderDrawPlaceholderDraft(ctx, map, buildTarget, focusColor, layer.opacity, workbenchView); } // Mock-Slot-Rendering entfernt (own-region-geometry, representation-geometry). // Diese Slots sind ohnehin aus dem Geometry Assets Tab versteckt. if (layer.slot_id === 'slot:geometry-asset:osm-boundary') { renderOsmLayerEntry(ctx, map, scimState, workbenchView, layer.opacity); } if (layer.slot_id === 'slot:geometry-asset:osm-trails') { renderOsmTrailsLayerEntry(ctx, map, scimState, workbenchView, layer.opacity); } }); } function renderFederationMapSummary(ctx, map, scimState, mutedColor, focusColor) { const selection = scimState?.federationSelection; if (!selection?.valid_for_federation_representation) return; const text = `Federation source set: ${selection.region_count || 0} Region / ${selection.ghost_region_count || 0} Ghostregion / not_truth`; ctx.save(); ctx.fillStyle = 'rgba(255,247,209,0.08)'; ctx.strokeStyle = 'rgba(255,247,209,0.32)'; ctx.fillRect(map.x + 14, map.y + 70, 380, 24); ctx.strokeRect(map.x + 14, map.y + 70, 380, 24); ctx.fillStyle = focusColor || mutedColor; ctx.font = '9px ui-monospace, monospace'; ctx.fillText(text, map.x + 24, map.y + 86, 360); ctx.restore(); } function renderDrawPlaceholderDraft(ctx, map, buildTarget, focusColor, opacity = 1, workbenchView = null) { const points = buildTarget?.draw_placeholder_draft?.points || []; const draft = buildTarget?.draw_placeholder_draft; if (draft?.anchor_point) renderDraftAnchor(ctx, map, draft.anchor_point, focusColor, workbenchView); if (!points.length) return; const screenPoints = points.map(point => toMap(map, point, workbenchView)); const breakSegments = new Set(draft?.break_segments || []); ctx.save(); ctx.globalAlpha = Math.max(0, Math.min(1, opacity)); if (draft?.is_closed && screenPoints.length > 2 && !breakSegments.size) { ctx.fillStyle = 'rgba(255,247,209,0.14)'; ctx.beginPath(); screenPoints.forEach((point, index) => { if (index === 0) ctx.moveTo(point.x, point.y); else ctx.lineTo(point.x, point.y); }); ctx.closePath(); ctx.fill(); } if (screenPoints.length > 1) { ctx.strokeStyle = 'rgba(255,247,209,0.76)'; ctx.lineWidth = 1.3; const segmentCount = draft?.is_closed ? screenPoints.length : screenPoints.length - 1; for (let index = 0; index < segmentCount; index += 1) { if (breakSegments.has(index)) continue; const point = screenPoints[index]; const next = screenPoints[(index + 1) % screenPoints.length]; ctx.beginPath(); ctx.moveTo(point.x, point.y); ctx.lineTo(next.x, next.y); ctx.stroke(); } } renderDraftDeleteHover(ctx, screenPoints, draft, buildTarget?.delete_hover_target, focusColor); screenPoints.forEach((point, index) => { const startSnapActive = index === 0 && draft?.start_hover; const closedStart = index === 0 && draft?.is_closed; const vertexHover = index === draft?.hover_vertex_index; const vertexDrag = index === draft?.drag_vertex_index; const radius = vertexDrag ? 10 : vertexHover ? 9 : startSnapActive ? 8 : closedStart ? 6 : 4; if (vertexDrag) renderDragCrosshair(ctx, point, focusColor); ctx.fillStyle = vertexDrag ? 'rgba(0,0,0,0)' : focusColor; ctx.strokeStyle = vertexDrag ? focusColor : 'rgba(0,0,0,0.86)'; ctx.lineWidth = vertexDrag ? 0.85 : 1; ctx.beginPath(); ctx.arc(point.x, point.y, radius, 0, Math.PI * 2); if (!vertexDrag) ctx.fill(); ctx.stroke(); if (!vertexDrag) { ctx.fillStyle = '#050505'; ctx.font = '7px ui-monospace, monospace'; ctx.fillText(String(index + 1), point.x - 2.2, point.y + 2.5); } }); ctx.restore(); } function renderDraftDeleteHover(ctx, screenPoints, draft, target, focusColor) { if (!target?.target_type || !screenPoints.length) return; ctx.save(); ctx.strokeStyle = 'rgba(255,184,77,0.98)'; ctx.fillStyle = 'rgba(255,184,77,0.18)'; ctx.lineWidth = target.stretch ? 3 : 2.2; if (target.target_type === 'vertex' && Number.isInteger(target.vertexIndex) && screenPoints[target.vertexIndex]) { const point = screenPoints[target.vertexIndex]; ctx.beginPath(); ctx.arc(point.x, point.y, 10, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.restore(); return; } if (target.target_type === 'segment' && Number.isInteger(target.segmentIndex)) { const segments = target.stretch ? connectedDraftSegmentIndexes(draft, target.segmentIndex) : [target.segmentIndex]; segments.forEach(segmentIndex => { const start = screenPoints[segmentIndex]; const end = screenPoints[(segmentIndex + 1) % screenPoints.length]; if (!start || !end) return; ctx.beginPath(); ctx.moveTo(start.x, start.y); ctx.lineTo(end.x, end.y); ctx.stroke(); }); } ctx.restore(); } function connectedDraftSegmentIndexes(draft, segmentIndex) { const points = draft?.points || []; const max = draft?.is_closed ? points.length : points.length - 1; if (segmentIndex < 0 || segmentIndex >= max) return []; const breaks = new Set(draft?.break_segments || []); const result = new Set([segmentIndex]); for (let left = segmentIndex - 1; left >= 0 && !breaks.has(left); left -= 1) result.add(left); for (let right = segmentIndex + 1; right < max && !breaks.has(right); right += 1) result.add(right); return [...result].sort((a, b) => a - b); } function renderDraftAnchor(ctx, map, anchorPoint, focusColor, workbenchView = null) { const point = toMap(map, anchorPoint, workbenchView); ctx.save(); ctx.strokeStyle = focusColor; ctx.fillStyle = 'rgba(255,184,77,0.18)'; ctx.lineWidth = 1.2; ctx.beginPath(); ctx.arc(point.x, point.y - 7, 4.2, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(point.x, point.y - 2.6); ctx.lineTo(point.x, point.y + 13); ctx.moveTo(point.x - 6, point.y + 5.5); ctx.lineTo(point.x + 6, point.y + 5.5); ctx.moveTo(point.x, point.y + 0.5); ctx.lineTo(point.x, point.y + 10.5); ctx.stroke(); ctx.restore(); } function renderDragCrosshair(ctx, point, focusColor) { const arm = 22; const gap = 3; ctx.save(); ctx.strokeStyle = focusColor; ctx.globalAlpha = 0.52; ctx.lineWidth = 0.65; ctx.beginPath(); ctx.moveTo(point.x - arm, point.y); ctx.lineTo(point.x - gap, point.y); ctx.moveTo(point.x + gap, point.y); ctx.lineTo(point.x + arm, point.y); ctx.moveTo(point.x, point.y - arm); ctx.lineTo(point.x, point.y - gap); ctx.moveTo(point.x, point.y + gap); ctx.lineTo(point.x, point.y + arm); ctx.stroke(); ctx.restore(); } function renderWorkbenchStatusStrip(ctx, map, scimState, buildTarget, selectionCopy, mutedColor, focusColor) { const pointCount = buildTarget?.draw_placeholder_draft?.points?.length || 0; const closed = Boolean(buildTarget?.draw_placeholder_draft?.is_closed); const startHover = Boolean(buildTarget?.draw_placeholder_draft?.start_hover); const vertexHover = Number.isInteger(buildTarget?.draw_placeholder_draft?.hover_vertex_index); const preview = buildTarget?.active_preview; const layers = syncGeometryAssetLayerStackState(scimState); const drawStatus = vertexHover ? 'vertex hover' : closed ? 'closed preview' : startHover ? 'release to close' : pointCount ? `${pointCount} point(s)` : 'empty'; const pairs = [ ['scope', workbenchScopeStatus(selectionCopy)], ['mode', workbenchModeLabel(buildTarget)], ['layer', buildTarget?.draw_placeholder_draft?.layer_status === 'draft_layer_created' ? 'Draw Draft' : 'none'], ['draw', drawStatus], ['anchor', buildTarget?.draw_placeholder_draft?.anchor_status === 'anchor_set_memory' ? 'set' : 'missing'], ...(buildTarget?.delete_modifier_active ? [['delete', workbenchDeleteStatus(buildTarget)]] : []), ['layers', `${layers.length}`], ['preview', preview?.can_save ? 'ready' : 'none'], ['save', buildTarget?.save_gate_status || 'blocked'], ['zoom', `${(buildTarget?.workbench_view?.zoom || 1).toFixed(2)}`] ]; ctx.save(); ctx.font = '9px ui-monospace, monospace'; let cursorX = map.x + 14; const y = map.y + map.height - 18; pairs.forEach(([title, state]) => { ctx.fillStyle = 'rgba(245,245,245,0.50)'; const titleText = `${title} `; ctx.fillText(titleText, cursorX, y, map.x + map.width - cursorX - 14); cursorX += ctx.measureText(titleText).width; ctx.fillStyle = title === 'preview' && state === 'ready' ? focusColor : 'rgba(245,245,245,0.74)'; const stateText = `${state} `; ctx.fillText(stateText, cursorX, y, map.x + map.width - cursorX - 14); cursorX += ctx.measureText(stateText).width; }); ctx.restore(); } function workbenchDeleteStatus(buildTarget) { const target = buildTarget?.delete_hover_target; if (!target?.target_type) return buildTarget?.delete_stretch_modifier_active ? 'stretch armed' : 'armed'; if (target.target_type === 'vertex') return `node ${(target.vertexIndex ?? 0) + 1}`; return target.stretch ? 'stretch' : 'segment'; } function workbenchScopeStatus(selectionCopy) { return String(selectionCopy?.mapFooter || 'build geometry') .replace(/^Build Geometry canvas:\s*/i, '') .replace(/\s*\/\s*mock\s*\/\s*not_truth$/i, '') .replace(/:/g, ''); } function renderWorkbenchToolRail(ctx, map, scimState, buildTarget, panel, mutedColor, focusColor) { const draft = buildTarget?.draw_placeholder_draft; const pointCount = draft?.points?.length || 0; const undoAvailable = pointCount > 0 || Boolean(draft?.undo_stack?.length); const sourceReady = Boolean(buildTarget?.source_slot?.geometry_available); const drawLayerLocked = isGeometryAssetLayerLocked(scimState, DRAW_DRAFT_LAYER_SLOT_ID); const activeMode = buildTarget?.workbench_mode || 'select'; const reductionTarget = buildTarget?.point_reduction_target ?? 100; const tools = [ { icon: 'view', label: 'Workbench Mode View', active: activeMode === 'view', enabled: true }, { icon: 'draw', label: 'Workbench Mode Draw', active: activeMode === 'draw_placeholder', enabled: sourceReady && !drawLayerLocked }, { icon: 'snap', label: 'Toggle Point Snap', active: Boolean(buildTarget?.snap_to_unlocked_layer_points), enabled: activeMode === 'draw_placeholder' }, { icon: 'reduce', label: 'Open Point Reduction', active: reductionTarget < 100, enabled: pointCount >= 3 }, { icon: 'undo', label: 'Undo Draft', active: false, enabled: undoAvailable && !drawLayerLocked }, { icon: 'delete', label: 'Delete Draft Geometry', active: Boolean(buildTarget?.delete_modifier_active), enabled: activeMode === 'draw_placeholder' && !drawLayerLocked }, // Amber bleibt nach dem Setzen bestehen: armed = „klick zum Setzen", // gesetzt = „Anker existiert". So verschwindet das Feedback nicht beim Setzen. { icon: 'anchor', label: 'Set Anchor', active: Boolean(buildTarget?.anchor_mode_active) || draft?.anchor_status === 'anchor_set_memory', enabled: activeMode === 'draw_placeholder' && !drawLayerLocked }, { icon: 'layers', label: 'Layer Stack Toggle', active: Boolean(scimState?.geometryAssetLayerStackOpen), enabled: true } ]; const size = 28; const gap = 7; const x = map.x + map.width - size - 34; const y = map.y + 80; ctx.save(); ctx.fillStyle = 'rgba(0,0,0,0.34)'; ctx.strokeStyle = 'rgba(255,247,209,0.18)'; ctx.fillRect(x - 6, y - 6, size + 12, tools.length * size + (tools.length - 1) * gap + 12); ctx.strokeRect(x - 6, y - 6, size + 12, tools.length * size + (tools.length - 1) * gap + 12); tools.forEach((tool, index) => { const bounds = { label: tool.label, tooltip: toolRailTooltip(tool.label), x, y: y + index * (size + gap), width: size, height: size }; if (panel) { panel.buildControlBounds.push(bounds); // Anchor for the Reduce slider HTML overlay (opens to the left of this button). if (tool.label === 'Open Point Reduction') panel.pointReductionSliderBounds = bounds; } const active = tool.active; ctx.fillStyle = active ? 'rgba(255,184,77,0.16)' : tool.enabled ? 'rgba(255,255,255,0.075)' : 'rgba(255,255,255,0.035)'; ctx.strokeStyle = active ? 'rgba(255,184,77,0.90)' : tool.enabled ? 'rgba(255,255,255,0.38)' : 'rgba(255,255,255,0.18)'; ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.globalAlpha = tool.enabled ? 1 : 0.34; renderWorkbenchToolIcon(ctx, bounds, tool.icon, active ? 'rgba(255,184,77,0.96)' : mutedColor); ctx.globalAlpha = 1; }); ctx.restore(); } function renderWorkbenchToolIcon(ctx, bounds, icon, color) { const cx = bounds.x + bounds.width / 2; const cy = bounds.y + bounds.height / 2; ctx.save(); ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = 1.25; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; if (icon === 'view') { const vx = cx + 4; const hy = cy + 4; ctx.beginPath(); ctx.moveTo(vx, cy - 7); ctx.lineTo(vx, cy + 7); ctx.moveTo(cx - 7, hy); ctx.lineTo(cx + 7, hy); ctx.moveTo(vx, cy - 7); ctx.lineTo(vx - 3, cy - 4); ctx.moveTo(vx, cy - 7); ctx.lineTo(vx + 3, cy - 4); ctx.moveTo(cx - 7, hy); ctx.lineTo(cx - 4, hy - 3); ctx.moveTo(cx - 7, hy); ctx.lineTo(cx - 4, hy + 3); ctx.stroke(); } if (icon === 'draw') { ctx.beginPath(); ctx.moveTo(cx - 7, cy + 5); ctx.lineTo(cx + 5, cy - 7); ctx.lineTo(cx + 8, cy - 4); ctx.lineTo(cx - 4, cy + 8); ctx.stroke(); ctx.beginPath(); ctx.arc(cx - 7, cy + 7.25, 1.7, 0, Math.PI * 2); ctx.fill(); } if (icon === 'undo') { ctx.beginPath(); ctx.save(); ctx.translate(cx, cy + 1); ctx.scale(-1, 1); ctx.arc(-1, 0, 6, Math.PI * 0.20, Math.PI * 1.55); ctx.restore(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(cx - 2, cy - 6.5); ctx.lineTo(cx - 6, cy - 2.5); ctx.lineTo(cx, cy - 1.5); ctx.stroke(); } if (icon === 'delete') { ctx.beginPath(); ctx.moveTo(cx - 6, cy - 6); ctx.lineTo(cx + 6, cy + 6); ctx.moveTo(cx + 6, cy - 6); ctx.lineTo(cx - 6, cy + 6); ctx.stroke(); } if (icon === 'anchor') { ctx.beginPath(); ctx.arc(cx, cy - 6, 2.6, 0, Math.PI * 2); ctx.moveTo(cx, cy - 3.2); ctx.lineTo(cx, cy + 8); ctx.moveTo(cx - 5, cy + 4.4); ctx.lineTo(cx + 5, cy + 4.4); ctx.moveTo(cx, cy + 0.2); ctx.lineTo(cx, cy + 8.6); ctx.stroke(); } if (icon === 'snap') { ctx.beginPath(); ctx.arc(cx - 4, cy - 3, 2, 0, Math.PI * 2); ctx.arc(cx + 5, cy + 4, 2, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.moveTo(cx - 2, cy - 2); ctx.lineTo(cx + 3, cy + 3); ctx.stroke(); } if (icon === 'reduce') { // Drei Knoten oben in einer Reihe, ein Knoten darunter (= reduzierte Punktanzahl). ctx.beginPath(); ctx.arc(cx - 5, cy - 3, 1.6, 0, Math.PI * 2); ctx.arc(cx, cy - 3, 1.6, 0, Math.PI * 2); ctx.arc(cx + 5, cy - 3, 1.6, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(cx - 4, cy + 1); ctx.lineTo(cx + 4, cy + 1); ctx.stroke(); ctx.beginPath(); ctx.moveTo(cx - 2, cy + 4); ctx.lineTo(cx + 2, cy + 4); ctx.stroke(); } if (icon === 'preview') { ctx.strokeRect(cx - 7.2, cy - 7.2, 14.4, 14.4); ctx.beginPath(); ctx.moveTo(cx - 4, cy); ctx.lineTo(cx - 1, cy + 3); ctx.lineTo(cx + 5, cy - 3); ctx.stroke(); } if (icon === 'save') { ctx.strokeRect(cx - 7, cy - 7, 14, 14); ctx.beginPath(); ctx.moveTo(cx - 4, cy - 7); ctx.lineTo(cx - 4, cy - 2); ctx.lineTo(cx + 4, cy - 2); ctx.lineTo(cx + 4, cy - 7); ctx.moveTo(cx - 4, cy + 7); ctx.lineTo(cx - 4, cy + 2); ctx.lineTo(cx + 4, cy + 2); ctx.lineTo(cx + 4, cy + 7); ctx.stroke(); } if (icon === 'layers') { ctx.beginPath(); ctx.moveTo(cx - 7, cy - 5); ctx.lineTo(cx + 7, cy - 5); ctx.moveTo(cx - 7, cy); ctx.lineTo(cx + 7, cy); ctx.moveTo(cx - 7, cy + 5); ctx.lineTo(cx + 7, cy + 5); ctx.stroke(); } ctx.restore(); } function toolRailTooltip(label) { const tooltips = { 'Workbench Mode View': 'View: pan and wheel zoom the workbench monitor', 'Workbench Mode Draw': 'Draw: create and edit the active Draft Layer', 'Toggle Point Snap': 'Snap: snap to points on unlocked visible layers', 'Undo Draft': 'Undo: restore last draft edit', 'Delete Draft Geometry': 'Delete: hold Command and click node or line; Shift+Command deletes the connected element', 'Set Anchor': 'Anchor: set visible Pill cable anchor', 'Set Active Preview': 'Preview: use current draft/source as active preview', 'Save as Candidate': 'Save: store current active preview as memory candidate', 'Layer Stack Toggle': 'Layers: show or hide layer stack' }; return tooltips[label] || label; } function renderBuildGeometryLayerStackHint(ctx, map, scimState, buildTarget, panel, mutedColor, focusColor) { const layers = syncGeometryAssetLayerStackState(scimState); if (scimState?.geometryAssetLayerStackOpen) { ctx.save(); renderLayerStackPopover(ctx, map.x + 14, map.y + 14, 430, layers, panel, mutedColor, focusColor, scimState); ctx.restore(); } } function workbenchModeLabel(buildTarget) { const mode = buildTarget?.workbench_mode || 'select'; if (mode === 'view') return 'View'; if (mode === 'draw_placeholder') return 'Draw'; return 'Idle'; } function renderLeafletLayerRow(ctx, x, y, width, rowY, panel, mutedColor, focusColor, scimState) { // Fixe Layer-Zeile ganz unten: OSM Map (Leaflet). Kein ×, kein up/down — // stattdessen ein on/off-Toggle. Steuert das HTML-Karten-Overlay. const enabled = Boolean(scimState?.leafletLayerEnabled); ctx.fillStyle = enabled ? 'rgba(255,184,77,0.14)' : 'rgba(255,255,255,0.055)'; ctx.fillRect(x + 8, rowY, width - 16, 22); ctx.strokeStyle = enabled ? 'rgba(255,184,77,0.62)' : 'rgba(255,255,255,0.20)'; ctx.strokeRect(x + 8, rowY, width - 16, 22); ctx.font = '9px ui-monospace, monospace'; ctx.fillStyle = enabled ? focusColor : mutedColor; ctx.fillText('OSM Map (Leaflet)', x + 16, rowY + 15, width - 120); // on/off-Toggle ganz rechts const toggleW = 46; const bounds = { label: 'Toggle Leaflet Layer', x: x + width - 16 - toggleW, y: rowY + 2, width: toggleW, height: 18 }; if (panel) panel.buildControlBounds.push(bounds); ctx.fillStyle = enabled ? 'rgba(255,184,77,0.22)' : 'rgba(255,255,255,0.045)'; ctx.strokeStyle = enabled ? 'rgba(255,184,77,0.70)' : 'rgba(255,255,255,0.26)'; ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.fillStyle = enabled ? focusColor : mutedColor; ctx.textAlign = 'center'; ctx.fillText(enabled ? 'ON' : 'OFF', bounds.x + bounds.width / 2, bounds.y + 12); ctx.textAlign = 'left'; } function renderLayerStackPopover(ctx, x, y, width, layers, panel, mutedColor, focusColor, scimState) { const rowHeight = 28; // +1 Zeile für die fixe Leaflet-Karten-Zeile ganz unten. const height = 14 + (layers.length + 1) * rowHeight; const activeEditLayer = activeGeometryAssetEditLayer(scimState); if (panel) panel.layerStackPopoverBounds = { x, y, width, height }; ctx.fillStyle = 'rgba(0,0,0,0.72)'; ctx.strokeStyle = 'rgba(255,247,209,0.34)'; ctx.fillRect(x, y, width, height); ctx.strokeRect(x, y, width, height); ctx.font = '9px ui-monospace, monospace'; layers.forEach((layer, index) => { const rowY = y + 8 + index * rowHeight; const opacityPercent = Math.round(layer.opacity * 100); const isEditLayer = activeEditLayer?.slot_id === layer.slot_id; ctx.fillStyle = isEditLayer ? 'rgba(255,247,209,0.16)' : index % 2 ? 'rgba(255,255,255,0.075)' : 'rgba(255,255,255,0.105)'; ctx.fillRect(x + 8, rowY, width - 16, 22); if (isEditLayer) { ctx.strokeStyle = layer.locked ? 'rgba(255,165,0,0.72)' : 'rgba(255,247,209,0.58)'; ctx.strokeRect(x + 8, rowY, width - 16, 22); } ctx.fillStyle = layer.opacity === 0 ? 'rgba(245,245,245,0.36)' : focusColor; ctx.fillText(layer.label, x + 16, rowY + 15, width - 190); if (isEditLayer) { ctx.fillStyle = layer.locked ? 'rgba(255,200,120,0.88)' : focusColor; ctx.fillText(layer.locked ? 'edit lock' : 'edit', x + width - 188, rowY + 15, 34); } const controls = [ { icon: 'up', label: `Layer Up:${layer.slot_id}`, w: 24 }, { icon: 'down', label: `Layer Down:${layer.slot_id}`, w: 24 }, { text: `${opacityPercent}%`, label: `Layer Opacity:${layer.slot_id}`, w: 38 }, { icon: 'lock', locked: layer.locked, label: `Layer Lock:${layer.slot_id}`, w: 28 }, { icon: 'remove', label: `Layer Remove:${layer.slot_id}`, w: 22 } ]; let cx = x + width - 172; // 5 controls × widths + 4 × 6 gap ≈ 170 controls.forEach(control => { const bounds = { label: control.label, x: cx, y: rowY + 2, width: control.w, height: 18 }; if (panel) panel.buildControlBounds.push(bounds); ctx.fillStyle = control.locked ? 'rgba(255,247,209,0.10)' : 'rgba(255,255,255,0.045)'; ctx.strokeStyle = control.icon === 'remove' ? 'rgba(255,140,140,0.62)' : 'rgba(255,255,255,0.22)'; ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height); if (control.icon === 'up' || control.icon === 'down') { renderTriangleIcon(ctx, bounds, control.icon, mutedColor); } else if (control.icon === 'lock') { renderLockIcon(ctx, bounds, control.locked ? focusColor : mutedColor, control.locked); } else if (control.icon === 'remove') { // × Schließen-Glyph ctx.save(); ctx.strokeStyle = 'rgba(255,180,180,0.92)'; ctx.lineWidth = 1.4; ctx.beginPath(); ctx.moveTo(bounds.x + 6, bounds.y + 5); ctx.lineTo(bounds.x + bounds.width - 6, bounds.y + bounds.height - 5); ctx.moveTo(bounds.x + bounds.width - 6, bounds.y + 5); ctx.lineTo(bounds.x + 6, bounds.y + bounds.height - 5); ctx.stroke(); ctx.restore(); } else { ctx.fillStyle = mutedColor; ctx.fillText(control.text, bounds.x + 5, bounds.y + 12, bounds.width - 8); } cx += control.w + 6; }); }); // Fixe Leaflet-Karten-Zeile ganz unten (kein ×, kein up/down). renderLeafletLayerRow(ctx, x, y, width, y + 8 + layers.length * rowHeight, panel, mutedColor, focusColor, scimState); } function renderTriangleIcon(ctx, bounds, direction, color) { const cx = bounds.x + bounds.width / 2; const cy = bounds.y + bounds.height / 2; const size = 4.5; ctx.fillStyle = color; ctx.beginPath(); if (direction === 'up') { ctx.moveTo(cx, cy - size); ctx.lineTo(cx - size, cy + size * 0.9); ctx.lineTo(cx + size, cy + size * 0.9); } else { ctx.moveTo(cx, cy + size); ctx.lineTo(cx - size, cy - size * 0.9); ctx.lineTo(cx + size, cy - size * 0.9); } ctx.closePath(); ctx.fill(); } function renderLockIcon(ctx, bounds, color, locked) { const x = bounds.x + bounds.width / 2 - 5; const y = bounds.y + bounds.height / 2 - 2; ctx.save(); ctx.strokeStyle = color; ctx.lineWidth = locked ? 1.2 : 0.8; ctx.globalAlpha = locked ? 0.95 : 0.48; ctx.strokeRect(x, y, 10, 7); ctx.beginPath(); if (locked) { ctx.arc(x + 5, y, 4, Math.PI, 0); } else { ctx.save(); ctx.translate(x + 11, y + 1); ctx.scale(-1, 1); ctx.arc(0, 0, 4, Math.PI * 0.94, Math.PI * 1.85); ctx.restore(); } ctx.stroke(); ctx.restore(); } function renderWorkbenchViewDock(ctx, map, buildTarget, panel, mutedColor, focusColor) { const workbenchView = buildTarget?.workbench_view; const sourceReady = Boolean(buildTarget?.source_slot?.geometry_available); const buttons = [ { icon: 'parent', label: 'Fit Parent', active: workbenchView?.fit_mode === 'fit_parent', enabled: true }, { icon: 'source', label: 'Fit Source', active: workbenchView?.fit_mode === 'fit_source', enabled: sourceReady }, { icon: 'all', label: 'Fit All', active: workbenchView?.fit_mode === 'fit_all', enabled: true }, { icon: 'reset', label: 'Reset Workbench View', active: false, enabled: true } ]; const size = 24; const gap = 5; const x = map.x + map.width - 14 - buttons.length * size - (buttons.length - 1) * gap; const y = map.y + 12; ctx.save(); ctx.font = '10px ui-monospace, monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; buttons.forEach((button, index) => { const bounds = { label: button.label, tooltip: viewDockTooltip(button.label), x: x + index * (size + gap), y, width: size, height: size }; if (panel) panel.buildControlBounds.push(bounds); ctx.fillStyle = button.active ? 'rgba(255,247,209,0.16)' : button.enabled ? 'rgba(255,255,255,0.045)' : 'rgba(255,255,255,0.020)'; ctx.strokeStyle = button.active ? focusColor : button.enabled ? 'rgba(255,255,255,0.26)' : 'rgba(255,255,255,0.12)'; ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.globalAlpha = button.enabled ? 1 : 0.46; renderWorkbenchViewIcon(ctx, bounds, button.icon, button.enabled ? focusColor : mutedColor); ctx.globalAlpha = 1; }); ctx.restore(); } function viewDockTooltip(label) { const tooltips = { 'Fit Parent': 'Fit Parent: frame the parent boundary', 'Fit Source': 'Fit Source: frame the loaded source geometry', 'Fit All': 'Fit All: frame parent and source together', 'Reset Workbench View': 'Reset View: restore workbench pan and zoom' }; return tooltips[label] || label; } function renderWorkbenchViewIcon(ctx, bounds, icon, color) { const cx = bounds.x + bounds.width / 2; const cy = bounds.y + bounds.height / 2; ctx.save(); ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = 1.15; if (icon === 'parent') { ctx.strokeRect(cx - 6, cy - 6, 12, 12); ctx.strokeRect(cx - 2.5, cy - 2.5, 5, 5); } if (icon === 'source') { ctx.beginPath(); ctx.arc(cx, cy, 6, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.arc(cx, cy, 2, 0, Math.PI * 2); ctx.fill(); } if (icon === 'all') { const s = 7; const l = 4; ctx.beginPath(); ctx.moveTo(cx - s, cy - s + l); ctx.lineTo(cx - s, cy - s); ctx.lineTo(cx - s + l, cy - s); ctx.moveTo(cx + s - l, cy - s); ctx.lineTo(cx + s, cy - s); ctx.lineTo(cx + s, cy - s + l); ctx.moveTo(cx + s, cy + s - l); ctx.lineTo(cx + s, cy + s); ctx.lineTo(cx + s - l, cy + s); ctx.moveTo(cx - s + l, cy + s); ctx.lineTo(cx - s, cy + s); ctx.lineTo(cx - s, cy + s - l); ctx.stroke(); } if (icon === 'reset') { const endAngle = Math.PI * 1.72; const tipX = cx + Math.cos(endAngle) * 6; const tipY = cy + 1 + Math.sin(endAngle) * 6; ctx.beginPath(); ctx.arc(cx, cy + 1, 6, Math.PI * 0.20, endAngle); ctx.stroke(); const arrowCenter = { x: tipX + 1.4, y: tipY + 0.55 }; const arrowSize = 0.6; const arrowPoints = rotatePoints([ { x: arrowCenter.x, y: arrowCenter.y + 3.4 * arrowSize }, { x: arrowCenter.x - 3.2 * arrowSize, y: arrowCenter.y - 2.0 * arrowSize }, { x: arrowCenter.x + 3.2 * arrowSize, y: arrowCenter.y - 2.0 * arrowSize } ], arrowCenter, -Math.PI / 36); ctx.beginPath(); ctx.moveTo(arrowPoints[0].x, arrowPoints[0].y); ctx.lineTo(arrowPoints[1].x, arrowPoints[1].y); ctx.lineTo(arrowPoints[2].x, arrowPoints[2].y); ctx.closePath(); ctx.fill(); } ctx.restore(); } function rotatePoints(points, center, angle) { const cos = Math.cos(angle); const sin = Math.sin(angle); return points.map(point => { const dx = point.x - center.x; const dy = point.y - center.y; return { x: center.x + dx * cos - dy * sin, y: center.y + dx * sin + dy * cos }; }); } function renderSaveAsCandidateButton(ctx, map, mutedColor, focusColor, buildTarget, panel, scimState) { const bounds = { x: map.x + map.width - 178, y: map.y + map.height - 42, width: 156, height: 24 }; const sourceSlot = buildTarget?.source_slot; const preview = buildTarget?.active_preview; const savedBuildCandidate = scimState?.candidateState?.savedBuildCandidate; const savedPointCount = savedBuildCandidate?.candidate_geometry_data?.points?.length || savedBuildCandidate?.active_preview?.point_count || 0; const isSaved = savedBuildCandidate?.candidate_status === 'candidate_saved_memory'; const enabled = Boolean(buildTarget?.save_enabled && sourceSlot?.geometry_available && buildTarget?.save_gate_status === 'ready' && preview?.can_save); if (panel) panel.buildControlBounds.push({ ...bounds, label: 'Save as Candidate' }); ctx.save(); ctx.fillStyle = enabled || isSaved ? focusColor : mutedColor; ctx.font = '8px ui-monospace, monospace'; ctx.fillText( isSaved ? `saved memory / points: ${savedPointCount}` : enabled ? `active Preview: ${preview.preview_source_type}` : 'Save only in active Preview', bounds.x, bounds.y - 8, bounds.width + 4 ); ctx.fillStyle = isSaved ? 'rgba(255,247,209,0.18)' : enabled ? 'rgba(255,247,209,0.12)' : 'rgba(255,255,255,0.035)'; ctx.strokeStyle = isSaved ? 'rgba(255,247,209,0.86)' : enabled ? 'rgba(255,247,209,0.70)' : 'rgba(255,247,209,0.34)'; ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.fillStyle = enabled || isSaved ? focusColor || mutedColor : mutedColor; ctx.font = '9px ui-monospace, monospace'; ctx.fillText(isSaved ? 'Save as Candidate / saved' : `Save as Candidate / ${enabled ? 'ready' : 'inactive'}`, bounds.x + 10, bounds.y + 16, bounds.width - 16); ctx.restore(); } function panelBoundariesForSelection(scimState) { if (scimState?.federationSelection?.valid_for_federation_representation) { const selectedIds = scimState.federationSelection.selectedGeometryAssetIds || []; const selectedBoundaries = [ { asset: scimState?.salzkammergut?.geometryAsset, scope: 'region', points: SALZKAMMERGUT_2D_POINTS }, ...(scimState?.ghostRegions || []).map(asset => ({ asset, scope: 'ghost_region', points: asset.geometry_data?.points || [] })) ]; return selectedBoundaries.filter(boundary => boundary.asset && selectedIds.includes(boundary.asset.geometry_asset_id)); } return [ { asset: scimState?.europe, scope: 'eu', points: EUROPE_2D_POINTS }, { asset: scimState?.austria, scope: 'nation', points: AUSTRIA_2D_POINTS }, { asset: scimState?.salzkammergut?.geometryAsset, scope: 'region', points: SALZKAMMERGUT_2D_POINTS }, { asset: scimState?.gruenberg, scope: 'representation', points: GRUENBERG_2D_POINTS } ].filter(boundary => boundary.asset && shouldShowPanelScope(scimState, boundary.scope)); } function shouldShowPanelScope(scimState, scope) { const selectedScope = scimState?.geometrySelection?.selectedScope || 'eu'; return PANEL_SCOPE_ORDER[scope] >= PANEL_SCOPE_ORDER[selectedScope]; } function renderMapGrid(ctx, map, workbenchView = null) { ctx.strokeStyle = 'rgba(255,255,255,0.075)'; ctx.lineWidth = 1; for (let i = -6; i <= 6; i++) { const a = toMap(map, { x: i / 6, y: -1.25 }, workbenchView); const b = toMap(map, { x: i / 6, y: 1.25 }, workbenchView); ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); } for (let i = -4; i <= 4; i++) { const a = toMap(map, { x: -1.25, y: i / 4 }, workbenchView); const b = toMap(map, { x: 1.25, y: i / 4 }, workbenchView); ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); } } function renderMapBoundary(ctx, map, points, scimState, options) { if (!options.asset) return; const screenPoints = points.map(point => toMap(map, point, options.workbenchView)); const focused = scimState?.geometrySelection?.selectedGeometryAssetId === options.asset.geometry_asset_id; const federationSelected = (scimState?.federationSelection?.selectedGeometryAssetIds || []).includes(options.asset.geometry_asset_id); ctx.save(); ctx.globalAlpha = Math.max(0, Math.min(1, options.opacity ?? 1)); ctx.beginPath(); screenPoints.forEach((screen, index) => { if (index === 0) ctx.moveTo(screen.x, screen.y); else ctx.lineTo(screen.x, screen.y); }); ctx.closePath(); ctx.fillStyle = GEOMETRY_FILL; ctx.fill(); ctx.strokeStyle = focused || federationSelected ? SELECTED_STROKE : UNSELECTED_STROKE; ctx.lineWidth = focused || federationSelected ? SELECTED_STROKE_WIDTH : UNSELECTED_STROKE_WIDTH; if (options.scope === 'ghost_region') ctx.setLineDash([7, 6]); ctx.stroke(); if (options.scope === 'ghost_region') ctx.setLineDash([]); ctx.restore(); } function boundaryLayerOpacity(scimState, scope) { if (scope === 'region') return geometryAssetLayerOpacity(scimState, 'slot:geometry-asset:own-region-geometry'); return 1; } function renderOsmLayerEntry(ctx, map, scimState, workbenchView, layerOpacity = 1) { const wgs84Points = scimState?.osm_geometry_wgs84; const frame = scimState?.osm_wgs84_frame; if (!wgs84Points || !Array.isArray(wgs84Points) || wgs84Points.length < 2 || !frame) return; const workbenchPoints = wgs84PointsToWorkbench(wgs84Points, frame); if (!workbenchPoints.length) return; const screenPoints = workbenchPoints.map(p => toMap(map, p, workbenchView)); const isLeading = scimState?.buildTarget?.leading_geometry_slot_id === 'slot:geometry-asset:osm-boundary'; ctx.save(); ctx.globalAlpha = Math.max(0, Math.min(1, layerOpacity)); // Reference data: muted blue, not amber. Leading status only thickens the line slightly. ctx.strokeStyle = 'rgba(184,226,255,0.78)'; ctx.lineWidth = isLeading ? 1.4 : 1.0; ctx.beginPath(); screenPoints.forEach((screen, index) => { if (index === 0) ctx.moveTo(screen.x, screen.y); else ctx.lineTo(screen.x, screen.y); }); ctx.closePath(); ctx.stroke(); ctx.restore(); } // OSM-Trails: viele Linien (kein geschlossenes Polygon) als Wandervorlage. // Benutzt einen eigenen wgs84-Frame (osm_trails_frame), unabhängig vom Boundary-Frame. function renderOsmTrailsLayerEntry(ctx, map, scimState, workbenchView, layerOpacity = 1) { const trails = scimState?.osm_trails_wgs84; const frame = scimState?.osm_trails_frame || scimState?.osm_wgs84_frame; if (!Array.isArray(trails) || trails.length === 0 || !frame) return; ctx.save(); ctx.globalAlpha = Math.max(0, Math.min(1, layerOpacity)) * 0.85; ctx.strokeStyle = 'rgba(160,210,170,0.78)'; // gedämpftes Grün — typische Wanderwegen-Konvention ctx.lineWidth = 0.8; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; for (const trail of trails) { const points = trail.points; if (!Array.isArray(points) || points.length < 2) continue; const workbenchPoints = wgs84PointsToWorkbench(points, frame); if (workbenchPoints.length < 2) continue; const screenPoints = workbenchPoints.map(p => toMap(map, p, workbenchView)); ctx.beginPath(); screenPoints.forEach((screen, index) => { if (index === 0) ctx.moveTo(screen.x, screen.y); else ctx.lineTo(screen.x, screen.y); }); ctx.stroke(); // bewusst NICHT closePath — Wege sind Linien, keine Polygone } ctx.restore(); } function renderMunicipalityDots(ctx, scimState, map, workbenchView = null) { const points = scimState?.salzkammergut?.data?.municipalities || scimState?.mockFetch?.municipalities || []; for (const item of points) { const screen = toMap(map, item.mock_display_position, workbenchView); ctx.fillStyle = item.validation_status === 'mock_validated_shape_placeholder' ? 'rgba(255,247,209,0.82)' : item.fetch_status === 'mock_fetched' ? 'rgba(184,226,255,0.72)' : 'rgba(255,255,255,0.20)'; ctx.beginPath(); ctx.arc(screen.x, screen.y, 2.6, 0, Math.PI * 2); ctx.fill(); } } function renderGeometryAssetsTab(ctx, scimState, box, mutedColor, textColor, focusColor) { const allSlots = syncGeometryAssetSlotsState(scimState); const templates = allSlots.filter(s => s.is_template); const list = Array.isArray(scimState?.candidateState?.savedBuildCandidates) ? scimState.candidateState.savedBuildCandidates : []; // Compat: falls Array leer aber alter Single-Slot existiert const compatSingle = (list.length === 0 && scimState?.candidateState?.savedBuildCandidate) ? [scimState.candidateState.savedBuildCandidate] : []; const allCandidates = list.length ? list : compatSingle; const foundationAssets = allCandidates.filter(c => c?.committed_to_foundation); const assetsPending = allCandidates.filter(c => !c?.committed_to_foundation); const panel = scimState?.fetchPanel; const leadingSlotId = scimState?.buildTarget?.leading_geometry_slot_id; // Header ctx.fillStyle = textColor; ctx.font = '10px ui-monospace, monospace'; ctx.fillText('Geometry Assets — Foundation Assets · Assets · Templates', box.x, box.y, box.width); ctx.fillStyle = mutedColor; ctx.font = '9px ui-monospace, monospace'; ctx.fillText('Foundation Assets = committed, visible. Assets = saved, pending. Templates = external references.', box.x, box.y + 18, box.width); // Drei Spalten nebeneinander const colGap = 12; const colTop = box.y + 40; const colHeight = box.height - 40; const colWidth = Math.floor((box.width - colGap * 2) / 3); // Spalte 1: Foundation Assets (links — das "Veröffentlichte") renderAssetColumn(ctx, box.x, colTop, colWidth, colHeight, 'Foundation Assets', foundationAssets, 'No committed assets. Use Commit on an Asset card.', mutedColor, textColor, focusColor, panel, leadingSlotId, 'committed'); // Spalte 2: Assets (mitte — das "Saved, pending") renderAssetColumn(ctx, box.x + colWidth + colGap, colTop, colWidth, colHeight, 'Assets', assetsPending, 'No pending assets. Save a draft in Build Geometry.', mutedColor, textColor, focusColor, panel, leadingSlotId, 'pending'); // Spalte 3: Templates (rechts — Material/Vorlagen) renderTemplateColumn(ctx, box.x + (colWidth + colGap) * 2, colTop, colWidth, colHeight, templates, mutedColor, textColor, focusColor, panel); } // Rendert eine Spalte mit Asset-Karten (Foundation Assets ODER Assets). function renderAssetColumn(ctx, x, y, width, height, title, candidates, emptyMessage, mutedColor, textColor, focusColor, panel, leadingSlotId, columnKind) { // Header ctx.save(); ctx.font = '10px ui-monospace, monospace'; ctx.fillStyle = columnKind === 'committed' ? 'rgba(255,184,77,0.96)' : focusColor; ctx.fillText(title, x, y + 12, width); ctx.strokeStyle = columnKind === 'committed' ? 'rgba(255,184,77,0.42)' : 'rgba(255,247,209,0.22)'; ctx.beginPath(); ctx.moveTo(x, y + 18); ctx.lineTo(x + width, y + 18); ctx.stroke(); ctx.restore(); let cursorY = y + 26; if (!candidates.length) { renderAssetEmptyState(ctx, x, cursorY, width, emptyMessage, mutedColor); return; } for (const candidate of candidates) { cursorY = renderCompactAssetCard(ctx, x, cursorY, width, candidate, mutedColor, textColor, focusColor, panel); if (cursorY > y + height - 10) break; // Spalte voll } } // Rendert die Templates-Spalte (Map-Connector-Slots). function renderTemplateColumn(ctx, x, y, width, height, templates, mutedColor, textColor, focusColor, panel) { ctx.save(); ctx.font = '10px ui-monospace, monospace'; ctx.fillStyle = 'rgba(184,226,255,0.92)'; ctx.fillText('Templates', x, y + 12, width); ctx.strokeStyle = 'rgba(184,226,255,0.32)'; ctx.beginPath(); ctx.moveTo(x, y + 18); ctx.lineTo(x + width, y + 18); ctx.stroke(); ctx.restore(); let cursorY = y + 26; if (!templates.length) { renderAssetEmptyState(ctx, x, cursorY, width, 'No templates. Use Map Connector to fetch OSM.', mutedColor); return; } for (const slot of templates) { cursorY = renderCompactTemplateCard(ctx, x, cursorY, width, slot, mutedColor, textColor, focusColor, panel); if (cursorY > y + height - 10) break; } } // Kompakte Asset-Karte für Spalten-Layout (Vorschau + Buttons). function renderCompactAssetCard(ctx, x, y, width, candidate, mutedColor, textColor, focusColor, panel) { const cardH = 130; const isCommitted = Boolean(candidate.committed_to_foundation); ctx.save(); ctx.fillStyle = isCommitted ? 'rgba(255,184,77,0.10)' : 'rgba(255,247,209,0.06)'; ctx.strokeStyle = isCommitted ? 'rgba(255,184,77,0.62)' : 'rgba(255,247,209,0.34)'; ctx.lineWidth = 1.2; ctx.fillRect(x, y, width, cardH); ctx.strokeRect(x, y, width, cardH); // Title ctx.font = '10px ui-monospace, monospace'; ctx.fillStyle = isCommitted ? 'rgba(255,184,77,0.96)' : focusColor; ctx.fillText(candidate.candidate_name || 'Unnamed', x + 10, y + 16, width - 20); // Meta ctx.font = '8px ui-monospace, monospace'; ctx.fillStyle = mutedColor; const pts = candidate.wgs84_points?.length || 0; ctx.fillText(`${pts} pts · ${candidate.candidate_geometry_type || '—'}`, x + 10, y + 30, width - 20); ctx.fillText(`${candidate.creator || '—'} · ${candidate.created_at?.slice(0, 10) || '—'}`, x + 10, y + 42, width - 20); // Preview-Monitor (mini outline) const previewBox = { x: x + 10, y: y + 50, width: 70, height: 38 }; renderMiniGeometryPreview(ctx, previewBox, candidate.wgs84_points, isCommitted ? 'rgba(255,184,77,0.88)' : 'rgba(255,247,209,0.78)'); // Note (rechts vom Preview) if (candidate.short_note) { ctx.font = '8px ui-monospace, monospace'; ctx.fillStyle = mutedColor; wrapText(ctx, candidate.short_note, previewBox.x + previewBox.width + 8, y + 56, width - (previewBox.width + 30), 10, 3); } // Action-Buttons (4 kompakt nebeneinander) const actionsY = y + cardH - 24; const btnH = 18; const gap = 4; const availW = width - 20; const btnW = Math.floor((availW - gap * 3) / 4); const ids = candidate.candidate_id; const commitBtn = { label: `Toggle Asset Commit:${ids}`, x: x + 10, y: actionsY, width: btnW, height: btnH }; renderAssetActionButton(ctx, commitBtn, isCommitted ? 'Uncommit' : 'Commit', isCommitted ? 'rgba(184,226,255,0.92)' : 'rgba(255,184,77,0.96)', mutedColor, panel); const tplBtn = { label: `Use Asset As Template:${ids}`, x: commitBtn.x + btnW + gap, y: actionsY, width: btnW, height: btnH }; renderAssetActionButton(ctx, tplBtn, '→ Tpl', 'rgba(184,226,255,0.96)', mutedColor, panel); const exportBtn = { label: `Export Saved Candidate:${ids}`, x: tplBtn.x + btnW + gap, y: actionsY, width: btnW, height: btnH }; renderAssetActionButton(ctx, exportBtn, 'Export', focusColor, mutedColor, panel); const deleteBtn = { label: `Delete Saved Candidate:${ids}`, x: exportBtn.x + btnW + gap, y: actionsY, width: btnW, height: btnH }; renderAssetActionButton(ctx, deleteBtn, 'Del', 'rgba(255,140,140,0.92)', mutedColor, panel); ctx.restore(); return y + cardH + 8; } // Kompakte Template-Karte für Spalten-Layout. function renderCompactTemplateCard(ctx, x, y, width, slot, mutedColor, textColor, focusColor, panel) { const cardH = 110; ctx.save(); ctx.fillStyle = 'rgba(184,226,255,0.06)'; ctx.strokeStyle = 'rgba(184,226,255,0.42)'; ctx.lineWidth = 1; ctx.fillRect(x, y, width, cardH); ctx.strokeRect(x, y, width, cardH); // Title + TEMPLATE Badge ctx.font = '10px ui-monospace, monospace'; ctx.fillStyle = textColor; ctx.fillText(slot.label, x + 10, y + 16, width - 80); ctx.font = '7px ui-monospace, monospace'; ctx.fillStyle = 'rgba(184,226,255,0.78)'; ctx.textAlign = 'right'; ctx.fillText('TEMPLATE', x + width - 10, y + 14); ctx.textAlign = 'left'; ctx.font = '8px ui-monospace, monospace'; ctx.fillStyle = mutedColor; ctx.fillText(`${slot.source_status || 'empty'}`, x + 10, y + 30, width - 20); ctx.fillText(`type: ${slot.geometry_type || 'boundary'}`, x + 10, y + 42, width - 20); // Use-Marker renderGeometryAssetSlotUseMarker(ctx, slot, x + 10, y + cardH - 22, width - 20, focusColor, mutedColor); ctx.restore(); return y + cardH + 8; } // Mini-Vorschau-Monitor: zeichnet das Geometry-Outline klein in eine Box. function renderMiniGeometryPreview(ctx, box, wgs84Points, strokeColor) { ctx.save(); ctx.fillStyle = 'rgba(0,0,0,0.28)'; ctx.strokeStyle = 'rgba(255,255,255,0.16)'; ctx.lineWidth = 1; ctx.fillRect(box.x, box.y, box.width, box.height); ctx.strokeRect(box.x, box.y, box.width, box.height); if (!Array.isArray(wgs84Points) || wgs84Points.length < 3) { ctx.restore(); return; } // bbox berechnen let minLon = Infinity, maxLon = -Infinity, minLat = Infinity, maxLat = -Infinity; for (const p of wgs84Points) { if (p.lon < minLon) minLon = p.lon; if (p.lon > maxLon) maxLon = p.lon; if (p.lat < minLat) minLat = p.lat; if (p.lat > maxLat) maxLat = p.lat; } const lonRange = Math.max(0.0001, maxLon - minLon); const latRange = Math.max(0.0001, maxLat - minLat); // Aspect-preserving fit in inner box (4px margin) const innerW = box.width - 8; const innerH = box.height - 8; const scale = Math.min(innerW / lonRange, innerH / latRange); const offsetX = box.x + 4 + (innerW - lonRange * scale) / 2; const offsetY = box.y + 4 + (innerH - latRange * scale) / 2; ctx.strokeStyle = strokeColor; ctx.lineWidth = 1; ctx.beginPath(); wgs84Points.forEach((p, i) => { const px = offsetX + (p.lon - minLon) * scale; const py = offsetY + (maxLat - p.lat) * scale; // lat invertiert (Nord oben) if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py); }); ctx.closePath(); ctx.stroke(); ctx.restore(); } // Einfacher Word-Wrap für Mehrzeilen-Text in einer Box. function wrapText(ctx, text, x, y, maxWidth, lineHeight, maxLines) { const words = String(text || '').split(/\s+/); let line = ''; let lineCount = 0; for (const word of words) { const test = line ? `${line} ${word}` : word; if (ctx.measureText(test).width > maxWidth && line) { ctx.fillText(line, x, y + lineCount * lineHeight, maxWidth); line = word; lineCount += 1; if (lineCount >= maxLines - 1) { // letzte Zeile: ggf. mit … kürzen, dann break const remainder = words.slice(words.indexOf(word)).join(' '); ctx.fillText(remainder, x, y + lineCount * lineHeight, maxWidth); return; } } else { line = test; } } if (line) ctx.fillText(line, x, y + lineCount * lineHeight, maxWidth); } function renderAssetSectionHeader(ctx, x, y, width, label, actionLabel, mutedColor, focusColor, panel) { ctx.save(); ctx.font = '10px ui-monospace, monospace'; ctx.fillStyle = focusColor; ctx.fillText(label, x, y + 12, width - 100); ctx.strokeStyle = 'rgba(255,247,209,0.22)'; ctx.beginPath(); ctx.moveTo(x + label.length * 6.6 + 8, y + 9); ctx.lineTo(x + width - (actionLabel ? 110 : 0), y + 9); ctx.stroke(); if (actionLabel) { const btnW = 96; const btnBounds = { label: actionLabel, x: x + width - btnW, y, width: btnW, height: 18 }; ctx.fillStyle = 'rgba(255,247,209,0.08)'; ctx.strokeStyle = 'rgba(255,247,209,0.42)'; ctx.lineWidth = 1; ctx.fillRect(btnBounds.x, btnBounds.y, btnBounds.width, btnBounds.height); ctx.strokeRect(btnBounds.x, btnBounds.y, btnBounds.width, btnBounds.height); ctx.font = '9px ui-monospace, monospace'; ctx.fillStyle = focusColor; ctx.textAlign = 'center'; ctx.fillText(actionLabel, btnBounds.x + btnW / 2, y + 13); ctx.textAlign = 'left'; if (panel) panel.buildControlBounds.push({ label: actionLabel === 'Import JSON' ? 'Import Candidate File' : actionLabel, x: btnBounds.x, y: btnBounds.y, width: btnW, height: 18 }); } ctx.restore(); return y + 22; } function renderAssetEmptyState(ctx, x, y, width, message, mutedColor) { ctx.save(); ctx.fillStyle = 'rgba(255,255,255,0.025)'; ctx.strokeStyle = 'rgba(255,255,255,0.12)'; ctx.lineWidth = 1; ctx.fillRect(x, y, width, 36); ctx.strokeRect(x, y, width, 36); ctx.font = '9px ui-monospace, monospace'; ctx.fillStyle = mutedColor; ctx.fillText(message, x + 12, y + 22, width - 24); ctx.restore(); return y + 40; } function renderTemplateCard(ctx, x, y, width, height, slot, mutedColor, textColor, focusColor, panel) { const checked = slot.use_in_build_geometry && slot.geometry_available; ctx.save(); ctx.fillStyle = checked ? 'rgba(184,226,255,0.06)' : 'rgba(255,255,255,0.025)'; ctx.strokeStyle = checked ? 'rgba(184,226,255,0.42)' : 'rgba(255,255,255,0.14)'; ctx.lineWidth = 1; ctx.fillRect(x, y, width, height); ctx.strokeRect(x, y, width, height); // Top-right TEMPLATE badge ctx.font = '8px ui-monospace, monospace'; ctx.fillStyle = 'rgba(184,226,255,0.78)'; ctx.textAlign = 'right'; ctx.fillText('TEMPLATE', x + width - 10, y + 14); ctx.textAlign = 'left'; // Label ctx.font = '10px ui-monospace, monospace'; ctx.fillStyle = textColor; ctx.fillText(slot.label, x + 12, y + 18, width - 100); // Details ctx.font = '9px ui-monospace, monospace'; ctx.fillStyle = mutedColor; ctx.fillText(`${slot.source_status || 'empty'}`, x + 12, y + 36, width - 24); ctx.fillText(`type: ${slot.geometry_type || 'boundary'} · transform: ${slot.transform_status || '—'}`, x + 12, y + 51, width - 24); ctx.fillText(`frame: ${slot.frame_match_status || '—'}`, x + 12, y + 66, width - 24); // Use-marker bottom-left renderGeometryAssetSlotUseMarker(ctx, slot, x + 12, y + height - 22, width - 24, focusColor, mutedColor); ctx.restore(); return y + height + 8; } function renderDraftCard(ctx, x, y, width, height, draft, mutedColor, textColor, focusColor) { ctx.save(); ctx.fillStyle = 'rgba(255,247,209,0.08)'; ctx.strokeStyle = 'rgba(255,247,209,0.42)'; ctx.lineWidth = 1; ctx.fillRect(x, y, width, height); ctx.strokeRect(x, y, width, height); ctx.font = '10px ui-monospace, monospace'; ctx.fillStyle = focusColor; ctx.fillText(draft.draft_name || draft.draft_title || 'Unnamed Draft', x + 12, y + 18, width - 100); ctx.font = '9px ui-monospace, monospace'; ctx.fillStyle = mutedColor; const pts = draft.points?.length || 0; const status = draft.is_closed ? 'closed' : (pts ? 'open' : 'empty'); ctx.fillText(`${pts} points · ${status} · status: ${draft.draft_status || '—'}`, x + 12, y + 38, width - 24); ctx.fillText(`creator: ${draft.creator || '—'} · created: ${draft.created_at || '—'}`, x + 12, y + 53, width - 24); if (draft.short_note) { ctx.fillText(`note: ${draft.short_note}`, x + 12, y + 68, width - 24); } else { ctx.fillStyle = 'rgba(245,245,245,0.32)'; ctx.fillText('(no note)', x + 12, y + 68, width - 24); } ctx.restore(); return y + height + 8; } function renderSavedAssetCard(ctx, x, y, width, height, candidate, leadingSlotId, mutedColor, textColor, focusColor, panel) { const hasWgs84 = Array.isArray(candidate.wgs84_points) && candidate.wgs84_points.length >= 3; ctx.save(); ctx.fillStyle = 'rgba(255,184,77,0.10)'; ctx.strokeStyle = 'rgba(255,184,77,0.62)'; ctx.lineWidth = 1.2; ctx.fillRect(x, y, width, height); ctx.strokeRect(x, y, width, height); // Title ctx.font = '11px ui-monospace, monospace'; ctx.fillStyle = 'rgba(255,184,77,0.96)'; ctx.fillText(candidate.candidate_name || 'Unnamed Asset', x + 12, y + 20, width - 200); // Metadata rows ctx.font = '9px ui-monospace, monospace'; ctx.fillStyle = mutedColor; const pointCount = hasWgs84 ? candidate.wgs84_points.length : (candidate.candidate_geometry_data?.points?.length || 0); ctx.fillText(`${pointCount} ${hasWgs84 ? 'WGS84' : 'workbench'} points · ${candidate.candidate_geometry_type || '—'}`, x + 12, y + 38, width - 24); ctx.fillText(`creator: ${candidate.creator || '—'} · created: ${candidate.created_at || '—'}`, x + 12, y + 53, width - 24); if (candidate.short_note) { ctx.fillText(`note: ${candidate.short_note}`, x + 12, y + 68, width - 24); } else { ctx.fillStyle = 'rgba(245,245,245,0.32)'; ctx.fillText('(no note)', x + 12, y + 68, width - 24); } ctx.fillStyle = mutedColor; ctx.fillText(`id: ${candidate.candidate_id || '—'}`, x + 12, y + 83, width - 24); // Action buttons row at the bottom — vier Aktionen kompakt nebeneinander. const actionsY = y + height - 26; const btnH = 20; const gap = 6; const isCommitted = Boolean(candidate.committed_to_foundation); // Commit-Toggle: bringt das Asset auf die Foundation (oder zieht es zurück). const commitLabel = isCommitted ? 'Uncommit' : 'Commit'; const commitBtnW = 70; const commitBtn = { label: 'Toggle Asset Commit', x: x + 12, y: actionsY, width: commitBtnW, height: btnH }; const commitColor = isCommitted ? 'rgba(184,226,255,0.92)' : 'rgba(255,184,77,0.96)'; renderAssetActionButton(ctx, commitBtn, commitLabel, commitColor, mutedColor, panel); // → Template: Asset als Vorlage in Build Geometry laden (Layer Stack) const templateBtnW = 90; const templateBtn = { label: 'Use Asset As Template', x: commitBtn.x + commitBtnW + gap, y: actionsY, width: templateBtnW, height: btnH }; renderAssetActionButton(ctx, templateBtn, '→ Template', 'rgba(184,226,255,0.96)', mutedColor, panel); const exportBtn = { label: 'Export Saved Candidate', x: templateBtn.x + templateBtnW + gap, y: actionsY, width: 72, height: btnH }; renderAssetActionButton(ctx, exportBtn, 'Export', focusColor, mutedColor, panel); const deleteBtn = { label: 'Delete Saved Candidate', x: exportBtn.x + 72 + gap, y: actionsY, width: 56, height: btnH }; renderAssetActionButton(ctx, deleteBtn, 'Delete', 'rgba(255,140,140,0.92)', mutedColor, panel); ctx.restore(); return y + height + 8; } function renderAssetActionButton(ctx, bounds, label, accentColor, mutedColor, panel) { ctx.save(); ctx.fillStyle = 'rgba(255,255,255,0.04)'; ctx.strokeStyle = accentColor; ctx.lineWidth = 1; ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height); ctx.font = '9px ui-monospace, monospace'; ctx.fillStyle = accentColor; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(label, bounds.x + bounds.width / 2, bounds.y + bounds.height / 2 + 0.5); ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic'; ctx.restore(); if (panel) panel.buildControlBounds.push(bounds); } function renderGeometryAssetSlotUseMarker(ctx, slot, x, y, width, focusColor, mutedColor) { const size = 14; const available = Boolean(slot?.geometry_available && slot?.frame_match === 'yes'); const pendingFrame = Boolean(slot?.geometry_available && slot?.frame_match !== 'yes'); const active = Boolean(available && slot?.use_in_build_geometry); ctx.save(); ctx.strokeStyle = active ? focusColor : available ? 'rgba(255,255,255,0.42)' : 'rgba(255,255,255,0.16)'; ctx.fillStyle = active ? 'rgba(255,247,209,0.16)' : 'rgba(255,255,255,0.018)'; ctx.fillRect(x, y, size, size); ctx.strokeRect(x, y, size, size); ctx.font = '12px ui-monospace, monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; if (active) { ctx.fillStyle = focusColor; ctx.fillText('✓', x + size / 2, y + size / 2 + 0.5); } else if (!available) { ctx.fillStyle = pendingFrame ? 'rgba(255,247,209,0.32)' : 'rgba(255,255,255,0.24)'; ctx.fillText('x', x + size / 2, y + size / 2 + 0.5); } ctx.textAlign = 'left'; ctx.fillStyle = active ? focusColor : available ? mutedColor : pendingFrame ? 'rgba(255,247,209,0.48)' : 'rgba(255,255,255,0.38)'; ctx.font = '9px ui-monospace, monospace'; const label = available ? active ? 'available in Build Geometry' : 'available, not selected' : pendingFrame ? `blocked: frame ${slot.frame_match}` : 'not available'; ctx.fillText(label, x + size + 8, y + 10, width - size - 8); ctx.restore(); } function renderMapConnectorTab(ctx, scimState, box, mutedColor, textColor, focusColor) { const connectors = scimState?.mapConnectorState?.map_connectors || []; const policy = scimState?.mapConnectorState?.connector_policy; const spatialFrame = scimState?.buildTarget?.workbench_spatial_frame; const panel = scimState?.fetchPanel; ctx.fillStyle = textColor; ctx.font = '10px ui-monospace, monospace'; ctx.fillText('Map Connector — source interfaces / not_truth', box.x, box.y, box.width); ctx.fillStyle = mutedColor; ctx.font = '9px ui-monospace, monospace'; ctx.fillText(`network: ${policy?.network_status || 'disabled_mock_first'} / frame: ${spatialFrame?.workbench_spatial_frame_id || 'none'}`, box.x, box.y + 18, box.width); let connectorCursorY = box.y + 58; connectors.forEach((connector) => { const isOsm = connector.connector_type === 'osm'; const isOsmTrails = connector.connector_type === 'osm_trails'; const cardHeight = isOsm ? 126 : isOsmTrails ? 126 : 86; const y = connectorCursorY; ctx.fillStyle = connector.can_materialize_asset ? 'rgba(255,247,209,0.070)' : 'rgba(255,255,255,0.035)'; ctx.fillRect(box.x, y, box.width, cardHeight); ctx.strokeStyle = connector.can_materialize_asset ? 'rgba(255,247,209,0.34)' : 'rgba(255,255,255,0.16)'; ctx.strokeRect(box.x, y, box.width, cardHeight); ctx.fillStyle = connector.can_materialize_asset ? focusColor : connector.connector_type === 'mock' ? focusColor : textColor; ctx.font = '10px ui-monospace, monospace'; ctx.fillText(`${connector.connector_label} / ${connector.connector_type}`, box.x + 12, y + 16, box.width - 24); ctx.fillStyle = mutedColor; ctx.font = '9px ui-monospace, monospace'; ctx.fillText(`connection: ${connector.connection_status} / fetch: ${connector.last_fetch_status}`, box.x + 12, y + 34, box.width - 24); ctx.fillText(`manifest: ${connector.source_manifest_status} / target: ${connector.target_slot_id}`, box.x + 12, y + 49, box.width - 24); ctx.fillText(`transform: ${connector.transform_status} / frame: ${connector.frame_match || 'no'} / ${connector.frame_match_status || 'unknown'}`, box.x + 12, y + 64, box.width - 24); ctx.fillStyle = connector.can_materialize_asset ? focusColor : mutedColor; ctx.fillText(`materialize: ${connector.materialize_status} / validation: ${connector.validation_status} / truth: ${connector.truth_status}`, box.x + 12, y + 79, box.width - 24); if (isOsm) { const panel = scimState?.fetchPanel; const relationId = scimState?.osm_relation_id || null; const materialized = Boolean(scimState?.osm_asset_materialized); const fetchStatus = scimState?.osm_fetch_status || 'idle'; const fetchError = scimState?.osm_fetch_error || null; const nodeCount = scimState?.osm_geometry_wgs84?.length || 0; const fetching = fetchStatus === 'fetching'; const relationIdSet = Boolean(relationId); const idFieldBounds = { label: 'OSM Relation ID Input', x: box.x + 12, y: y + 88, width: box.width - 64, height: 18 }; ctx.fillStyle = relationIdSet ? 'rgba(255,247,209,0.08)' : 'rgba(255,255,255,0.03)'; ctx.strokeStyle = relationIdSet ? 'rgba(255,247,209,0.38)' : 'rgba(255,255,255,0.20)'; ctx.lineWidth = 1; ctx.fillRect(idFieldBounds.x, idFieldBounds.y, idFieldBounds.width, idFieldBounds.height); ctx.strokeRect(idFieldBounds.x, idFieldBounds.y, idFieldBounds.width, idFieldBounds.height); ctx.font = '9px ui-monospace, monospace'; ctx.fillStyle = relationIdSet ? focusColor : 'rgba(245,245,245,0.32)'; ctx.fillText(relationIdSet ? relationId : 'Relation ID (z.B. 123456)', idFieldBounds.x + 6, idFieldBounds.y + 13, idFieldBounds.width - 10); if (panel) { panel.buildControlBounds.push(idFieldBounds); panel.osmRelationIdInputBounds = idFieldBounds; } const connectEnabled = relationIdSet && !fetching; const connectBounds = { label: 'Materialize OSM Asset', x: box.x + box.width - 50, y: y + 88, width: 38, height: 18 }; const buttonFill = fetching ? 'rgba(184,226,255,0.16)' : materialized ? 'rgba(255,184,77,0.16)' : fetchStatus === 'error' ? 'rgba(255,90,90,0.16)' : connectEnabled ? 'rgba(255,247,209,0.10)' : 'rgba(255,255,255,0.025)'; const buttonStroke = fetching ? 'rgba(184,226,255,0.80)' : materialized ? 'rgba(255,184,77,0.90)' : fetchStatus === 'error' ? 'rgba(255,90,90,0.80)' : connectEnabled ? 'rgba(255,247,209,0.42)' : 'rgba(255,255,255,0.14)'; ctx.fillStyle = buttonFill; ctx.strokeStyle = buttonStroke; ctx.fillRect(connectBounds.x, connectBounds.y, connectBounds.width, connectBounds.height); ctx.strokeRect(connectBounds.x, connectBounds.y, connectBounds.width, connectBounds.height); ctx.font = '8px ui-monospace, monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; const buttonLabel = fetching ? '...' : materialized ? '✓ ok' : fetchStatus === 'error' ? 'retry' : 'Connect'; const buttonColor = fetching ? 'rgba(184,226,255,0.96)' : materialized ? 'rgba(255,184,77,0.96)' : fetchStatus === 'error' ? 'rgba(255,180,180,0.96)' : connectEnabled ? focusColor : mutedColor; ctx.fillStyle = buttonColor; ctx.fillText(buttonLabel, connectBounds.x + connectBounds.width / 2, connectBounds.y + connectBounds.height / 2 + 0.5); ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic'; if (connectEnabled && panel) { panel.buildControlBounds.push(connectBounds); } // Status line under the input row ctx.font = '8px ui-monospace, monospace'; const statusText = fetching ? 'Fetching from overpass-api.de…' : fetchStatus === 'error' ? `Fetch failed: ${fetchError || 'unknown'}` : materialized ? `Real OSM loaded · ${nodeCount} nodes · wgs84_frame ready` : relationIdSet ? 'Ready to fetch. Click Connect.' : 'Enter a numeric OSM relation id.'; ctx.fillStyle = fetchStatus === 'error' ? 'rgba(255,180,180,0.78)' : materialized ? 'rgba(255,184,77,0.78)' : fetching ? 'rgba(184,226,255,0.78)' : mutedColor; ctx.fillText(statusText, box.x + 12, y + 116, box.width - 24); } if (isOsmTrails) { const panel = scimState?.fetchPanel; const query = scimState?.osm_search_query || ''; const trailsFetchStatus = scimState?.osm_trails_fetch_status || 'idle'; const trailsError = scimState?.osm_trails_fetch_error || null; const trailCount = scimState?.osm_trails_count || 0; const isBusy = trailsFetchStatus === 'searching' || trailsFetchStatus === 'fetching'; const querySet = Boolean(query); // Search-Input const searchInputBounds = { label: 'OSM Search Input', x: box.x + 12, y: y + 88, width: box.width - 64, height: 18 }; ctx.fillStyle = querySet ? 'rgba(255,247,209,0.08)' : 'rgba(255,255,255,0.03)'; ctx.strokeStyle = querySet ? 'rgba(255,247,209,0.38)' : 'rgba(255,255,255,0.20)'; ctx.lineWidth = 1; ctx.fillRect(searchInputBounds.x, searchInputBounds.y, searchInputBounds.width, searchInputBounds.height); ctx.strokeRect(searchInputBounds.x, searchInputBounds.y, searchInputBounds.width, searchInputBounds.height); ctx.font = '9px ui-monospace, monospace'; ctx.fillStyle = querySet ? focusColor : 'rgba(245,245,245,0.32)'; ctx.fillText(querySet ? query : 'Place name (z.B. „Grünberg Gmunden")', searchInputBounds.x + 6, searchInputBounds.y + 13, searchInputBounds.width - 10); if (panel) { panel.buildControlBounds.push(searchInputBounds); panel.osmSearchInputBounds = searchInputBounds; } // Search-Button const searchEnabled = querySet && !isBusy; const searchBtn = { label: 'Search And Fetch Trails', x: box.x + box.width - 50, y: y + 88, width: 38, height: 18 }; const sbFill = isBusy ? 'rgba(184,226,255,0.16)' : trailCount > 0 ? 'rgba(255,184,77,0.16)' : trailsFetchStatus === 'error' ? 'rgba(255,90,90,0.16)' : searchEnabled ? 'rgba(255,247,209,0.10)' : 'rgba(255,255,255,0.025)'; const sbStroke = isBusy ? 'rgba(184,226,255,0.80)' : trailCount > 0 ? 'rgba(255,184,77,0.90)' : trailsFetchStatus === 'error' ? 'rgba(255,90,90,0.80)' : searchEnabled ? 'rgba(255,247,209,0.42)' : 'rgba(255,255,255,0.14)'; ctx.fillStyle = sbFill; ctx.strokeStyle = sbStroke; ctx.fillRect(searchBtn.x, searchBtn.y, searchBtn.width, searchBtn.height); ctx.strokeRect(searchBtn.x, searchBtn.y, searchBtn.width, searchBtn.height); ctx.font = '8px ui-monospace, monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; const sbLabel = isBusy ? '...' : trailCount > 0 ? '✓ ok' : trailsFetchStatus === 'error' ? 'retry' : 'Search'; const sbColor = isBusy ? 'rgba(184,226,255,0.96)' : trailCount > 0 ? 'rgba(255,184,77,0.96)' : trailsFetchStatus === 'error' ? 'rgba(255,180,180,0.96)' : searchEnabled ? focusColor : mutedColor; ctx.fillStyle = sbColor; ctx.fillText(sbLabel, searchBtn.x + searchBtn.width / 2, searchBtn.y + searchBtn.height / 2 + 0.5); ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic'; if (searchEnabled && panel) panel.buildControlBounds.push(searchBtn); // Status-Zeile ctx.font = '8px ui-monospace, monospace'; const trailStatusText = isBusy ? (trailsFetchStatus === 'searching' ? 'Searching place via Nominatim…' : 'Fetching trails from Overpass…') : trailsFetchStatus === 'error' ? `Failed: ${trailsError || 'unknown'}` : trailCount > 0 ? `${trailCount} trails loaded` : querySet ? 'Ready to search. Click Search.' : 'Enter a place name (city, region, mountain…)'; ctx.fillStyle = trailsFetchStatus === 'error' ? 'rgba(255,180,180,0.78)' : trailCount > 0 ? 'rgba(255,184,77,0.78)' : isBusy ? 'rgba(184,226,255,0.78)' : mutedColor; ctx.fillText(trailStatusText, box.x + 12, y + 116, box.width - 24); } connectorCursorY += cardHeight + 12; }); } function renderReviewStateTab(ctx, panel, scimState, box, mutedColor, textColor, focusColor) { renderWorkflowTab(ctx, panel, scimState, box.x, box.y, box.width, textColor, focusColor); renderCandidateTab(ctx, scimState, box.x, box.y + 220, box.width, mutedColor, textColor); } function renderRepresentationIntakeTab(ctx, scimState, box, mutedColor, textColor, focusColor) { const rows = [ ['intake role', 'future user-facing representation geometry input'], ['action state', 'not handlungsfaehig / review required'], ['source owner', 'future user or region authority'], ['review bridge', 'Review State decides further use'], ['truth status', 'not_truth'] ]; ctx.fillStyle = textColor; ctx.font = '10px ui-monospace, monospace'; ctx.fillText('Representation Intake - prepared non-action tab', box.x, box.y, box.width); rows.forEach((row, index) => { const y = box.y + 34 + index * 42; ctx.fillStyle = 'rgba(255,255,255,0.035)'; ctx.strokeStyle = 'rgba(255,255,255,0.16)'; ctx.fillRect(box.x, y, box.width, 30); ctx.strokeRect(box.x, y, box.width, 30); ctx.fillStyle = index === 0 ? focusColor : textColor; ctx.fillText(row[0], box.x + 12, y + 13, box.width - 24); ctx.fillStyle = mutedColor; ctx.fillText(row[1], box.x + 12, y + 25, box.width - 24); }); } function renderWorkflowTab(ctx, panel, scimState, x, y, width, textColor, focusColor) { panel.controlBounds = panel.controls.map((label, index) => { const row = Math.floor(index / 2); const col = index % 2; const button = { label, x: x + col * ((width + 8) / 2), y: y + row * 34, width: (width - 8) / 2, height: 24 }; ctx.strokeStyle = 'rgba(255,255,255,0.28)'; ctx.fillStyle = resolveControlFill(label, scimState); ctx.fillRect(button.x, button.y, button.width, button.height); ctx.strokeRect(button.x, button.y, button.width, button.height); ctx.fillStyle = label === 'Use for Focus' ? focusColor : textColor; ctx.font = '9px ui-monospace, monospace'; ctx.fillText(label, button.x + 10, button.y + 16, button.width - 16); return button; }); const candidateState = scimState?.candidateState; ctx.fillStyle = 'rgba(245,245,245,0.68)'; ctx.font = '9px ui-monospace, monospace'; ctx.fillText(`last: ${candidateState?.lastAction || 'Initialize'}`, x, y + 160, width); ctx.fillText(candidateState?.lastActionEffect || 'No Candidate action yet.', x, y + 174, width); } function renderCandidateTab(ctx, scimState, x, y, width, mutedColor, textColor) { const candidateDraft = scimState?.buildTarget?.candidate_draft; const activePreview = scimState?.buildTarget?.active_preview; const savedBuildCandidate = scimState?.candidateState?.savedBuildCandidate; const spatialFrame = scimState?.buildTarget?.workbench_spatial_frame; const savedGeometry = savedBuildCandidate?.candidate_geometry_data; const savedPointCount = savedGeometry?.points?.length || savedBuildCandidate?.active_preview?.point_count || 0; const savedPreviewType = savedBuildCandidate?.active_preview?.preview_source_type || 'none'; const candidate = scimState?.salzkammergut; const mockFetch = scimState?.mockFetch; const municipalities = candidate?.data?.municipalities || mockFetch?.municipalities || []; ctx.fillStyle = textColor; ctx.font = '10px ui-monospace, monospace'; ctx.fillText(`draft candidate: ${candidateDraft?.candidate_name || 'none'}`, x, y, width); ctx.fillStyle = mutedColor; ctx.font = '9px ui-monospace, monospace'; ctx.fillText(`draft status: ${candidateDraft?.draft_status || 'draft_not_ready'}`, x, y + 16, width); ctx.fillText(`geometry type: ${candidateDraft?.candidate_geometry_type || 'none'}`, x, y + 31, width); ctx.fillText(`parent asset: ${candidateDraft?.parent_geometry_asset_id || 'none'}`, x, y + 46, width); ctx.fillText(`source id: ${candidateDraft?.source_id || 'none'}`, x, y + 61, width); ctx.fillText(`frame: ${spatialFrame?.workbench_spatial_frame_id || 'none'}`, x, y + 76, width); ctx.fillText(`truth: ${candidateDraft?.truth_status || 'not_truth'} / persist: ${candidateDraft?.persistence || 'memory_only'}`, x, y + 91, width); ctx.fillText(`active preview: ${activePreview?.preview_source_type || 'none'} / ${scimState?.buildTarget?.save_gate_status || 'no_preview'}`, x, y + 113, width); ctx.fillText(`saved memory: ${savedBuildCandidate?.candidate_name || 'none'}`, x, y + 135, width); ctx.fillText(`saved type: ${savedBuildCandidate?.candidate_geometry_type || 'none'}`, x, y + 151, width); ctx.fillText(`saved preview: ${savedPreviewType} / points: ${savedPointCount}`, x, y + 166, width); ctx.fillText(`saved context: ${savedBuildCandidate?.build_context || 'none'} / parents: ${savedBuildCandidate?.parent_geometry_asset_ids?.length || 0}`, x, y + 181, width); ctx.fillText(`saved frame: ${savedBuildCandidate?.workbench_spatial_frame_id || 'none'} / sources: ${savedBuildCandidate?.source_manifest_ids?.length || 0}`, x, y + 196, width); ctx.fillText(`saved truth: ${savedBuildCandidate?.truth_status || 'not_truth'} / persist: ${savedBuildCandidate?.persistence || 'memory_only'}`, x, y + 211, width); ctx.fillText(`legacy mock members: ${municipalities.length || 0}/36`, x, y + 236, width); renderStatusMatrix(ctx, municipalities, x, y + 260, width); } function renderStatusTab(ctx, scimState, x, y, width, mutedColor, textColor, focusColor) { const candidateState = scimState?.candidateState; const buildTarget = scimState?.buildTarget; const candidateDraft = buildTarget?.candidate_draft; const rows = [ `view: ${scimState?.viewState?.currentView || 'unknown'}`, `build target: ${buildTarget?.target_geometry_type || 'unknown'}`, `build parent: ${buildTarget?.parent_label || 'unknown'}`, `workbench mode: ${workbenchModeLabel(buildTarget)}`, `workbench fit: ${buildTarget?.workbench_view?.fit_mode || 'fit_parent'}`, `workbench layer: ${buildTarget?.workbench_view?.selected_layer || 'parent'}`, `draw points: ${buildTarget?.draw_placeholder_draft?.points?.length || 0}`, `active preview: ${buildTarget?.active_preview?.preview_source_type || 'none'}`, `save gate: ${buildTarget?.save_gate_status || 'no_preview'}`, `draft: ${candidateDraft?.draft_status || 'draft_not_ready'}`, `review: ${candidateState?.reviewStatus || 'not_reviewed'}`, `presence: ${candidateState?.candidatePresence || 'none'}`, `persist: ${candidateState?.persistence || 'memory_only'}`, `truth: ${candidateState?.truth_status || 'not_truth'}`, `last: ${candidateState?.lastAction || 'Initialize'}` ]; ctx.fillStyle = mutedColor; ctx.font = '9px ui-monospace, monospace'; rows.forEach((row, index) => ctx.fillText(row, x, y + index * 15, width)); const actionY = y + rows.length * 15 + 12; ctx.strokeStyle = focusColor; ctx.globalAlpha = 0.24; ctx.beginPath(); ctx.moveTo(x, actionY); ctx.lineTo(x + width, actionY); ctx.stroke(); ctx.globalAlpha = 0.94; ctx.fillStyle = textColor; ctx.fillText(candidateState?.lastActionEffect || 'No Candidate action yet.', x, actionY + 22, width); } function renderStatusMatrix(ctx, municipalities, x, y, width) { const cell = 10; const gap = 4; const cols = 12; municipalities.slice(0, 36).forEach((item, index) => { const col = index % cols; const row = Math.floor(index / cols); const px = x + col * (cell + gap); const py = y + row * (cell + gap); ctx.fillStyle = resolveMunicipalityStatusColor(item); ctx.fillRect(px, py, cell, cell); ctx.strokeStyle = 'rgba(255,255,255,0.18)'; ctx.strokeRect(px, py, cell, cell); }); ctx.fillStyle = 'rgba(245,245,245,0.68)'; ctx.font = '9px ui-monospace, monospace'; ctx.fillText('matrix: pending / fetched / validated mock shapes', x, y + 58, width); } function resolveControlFill(label, scimState) { const reviewStatus = scimState?.candidateState?.reviewStatus; if (label === 'Use for Focus' && reviewStatus !== 'candidate_ready' && reviewStatus !== 'candidate_saved_memory' && reviewStatus !== 'candidate_under_review') return 'rgba(255,255,255,0.030)'; if (label === 'Use for Focus') return 'rgba(255,247,209,0.16)'; if (label === 'Preview Candidate' && reviewStatus === 'candidate_ready') return 'rgba(255,255,255,0.13)'; if (label === 'Mark for Review' && reviewStatus === 'candidate_under_review') return 'rgba(255,255,255,0.13)'; if (label === 'Save Candidate' && reviewStatus === 'candidate_saved_memory') return 'rgba(255,255,255,0.13)'; if (label === 'Clear Candidate' && reviewStatus === 'candidate_cleared') return 'rgba(255,255,255,0.13)'; if (label === 'Reject Candidate') return 'rgba(255,255,255,0.035)'; return 'rgba(255,255,255,0.055)'; } function resolveMunicipalityStatusColor(item) { if (item.validation_status === 'mock_validated_shape_placeholder') return 'rgba(255,247,209,0.78)'; if (item.fetch_status === 'mock_fetched') return 'rgba(184,226,255,0.70)'; return 'rgba(255,255,255,0.16)'; } function toMap(map, point, workbenchView = null) { const zoom = Math.max(0.25, Number(workbenchView?.zoom) || 1); const panX = Number(workbenchView?.pan_x) || 0; const panY = Number(workbenchView?.pan_y) || 0; // Uniform scale für x UND y → keine Verzerrung. Der Monitor ist 2:1 breit; // ein eigener (größerer) x-Faktor würde projizierte Geometrien horizontal // strecken = vertikal stauchen. Maßstab folgt der Höhe (kleinere Dimension). const unit = map.height * 0.38 * zoom; return { x: map.x + map.width * 0.50 + (point.x + panX) * unit, y: map.y + map.height * 0.52 + (point.y + panY) * unit }; } const EUROPE_2D_POINTS = Object.freeze([ { x: -0.96, y: -0.42 }, { x: -0.66, y: -0.64 }, { x: -0.08, y: -0.66 }, { x: 0.56, y: -0.46 }, { x: 0.94, y: -0.12 }, { x: 0.74, y: 0.44 }, { x: 0.18, y: 0.64 }, { x: -0.44, y: 0.54 }, { x: -0.88, y: 0.20 } ]); const GEOMETRY_FILL = 'rgb(51,51,51)'; const SELECTED_STROKE = 'rgba(255,255,255,0.96)'; const UNSELECTED_STROKE = 'rgba(255,255,255,0.48)'; const SELECTED_STROKE_WIDTH = 2.2; const UNSELECTED_STROKE_WIDTH = SELECTED_STROKE_WIDTH * 0.5; const DRAW_DRAFT_LAYER_SLOT_ID = 'slot:geometry-asset:draw-draft-candidate'; const PANEL_SCOPE_ORDER = Object.freeze({ eu: 1, nation: 2, region: 3, representation: 4 }); const AUSTRIA_2D_POINTS = Object.freeze([ { x: -0.92, y: -0.28 }, { x: -0.62, y: -0.54 }, { x: -0.12, y: -0.50 }, { x: 0.48, y: -0.32 }, { x: 0.86, y: -0.08 }, { x: 0.74, y: 0.30 }, { x: 0.20, y: 0.52 }, { x: -0.36, y: 0.44 }, { x: -0.86, y: 0.10 } ]); const SALZKAMMERGUT_2D_POINTS = Object.freeze([ { x: -0.72, y: -0.42 }, { x: -0.32, y: -0.52 }, { x: 0.28, y: -0.36 }, { x: 0.48, y: -0.08 }, { x: 0.40, y: 0.36 }, { x: 0.02, y: 0.52 }, { x: -0.44, y: 0.38 }, { x: -0.74, y: 0.04 } ]); const GRUENBERG_2D_POINTS = Object.freeze([ { x: -0.02, y: -0.08 }, { x: 0.12, y: -0.06 }, { x: 0.16, y: 0.08 }, { x: 0.02, y: 0.16 }, { x: -0.10, y: 0.06 } ]);