feat(map): Introduce CSS Grid sidebar layout and integrated navigation + draw panels, add directions view and step-to-map interaction

2026-02-05 15:49:07 +00:00
parent 32bec849ee
commit f215133997
7 changed files with 492 additions and 96 deletions
--- a/ts_web/elements/00group-map/dees-geo-map/dees-geo-map.ts
+++ b/ts_web/elements/00group-map/dees-geo-map/dees-geo-map.ts
@@ -141,6 +141,9 @@ export class DeesGeoMap extends DeesElement {
  @state()
  private accessor isNavigationOpen: boolean = true;

+  @state()
+  private accessor isDrawPanelOpen: boolean = true;
+
  // Controllers
  private searchController: SearchController | null = null;
  private navigationController: NavigationController | null = null;
@@ -836,6 +839,10 @@ export class DeesGeoMap extends DeesElement {
    this.isNavigationOpen = !this.isNavigationOpen;
  }

+  private toggleDrawPanel(): void {
+    this.isDrawPanelOpen = !this.isDrawPanelOpen;
+  }
+
  // ─── Render ─────────────────────────────────────────────────────────────────

  public render(): TemplateResult {
@@ -843,24 +850,31 @@ export class DeesGeoMap extends DeesElement {
    const hasTrafficProvider = this.trafficController?.provider?.isConfigured ?? false;
    const showTrafficControls = Boolean(hasTrafficProvider || this.trafficApiKey || this.trafficProvider);

+    // Calculate panel widths for CSS Grid
+    const leftPanelWidth = this.showNavigation && this.isNavigationOpen ? '300px' : '0px';
+    const rightPanelWidth = this.showToolbar && this.isDrawPanelOpen ? '180px' : '0px';
+
    return html`
-      <div class="geo-component">
+      <div class="geo-component" style="--left-panel-width: ${leftPanelWidth}; --right-panel-width: ${rightPanelWidth};">
        <!-- Header Toolbar Above Map -->
        ${this.renderHeaderToolbar(showTrafficControls)}

+        <!-- Left Sidebar: Navigation Panel -->
+        <div class="left-sidebar ${!this.showNavigation || !this.isNavigationOpen ? 'collapsed' : ''}">
+          ${this.showNavigation && this.isNavigationOpen && this.navigationController
+            ? this.navigationController.render()
+            : ''}
+        </div>
+
        <!-- Map Container -->
        <div class="map-container" @contextmenu=${(e: MouseEvent) => this.handleMapContextMenu(e)}>
          <div class="map-wrapper"></div>

          <div class="map-overlay">
-            <!-- Top Left: Navigation Panel (toggleable) -->
-            <div class="overlay-top-left">
-              ${this.showNavigation && this.isNavigationOpen && this.navigationController
-                ? this.navigationController.render()
-                : ''}
-            </div>
+            <!-- Top Left: Empty (navigation moved to sidebar) -->
+            <div class="overlay-top-left"></div>

-            <!-- Top Right: Empty now (controls moved to header) -->
+            <!-- Top Right: Empty (controls in header) -->
            <div class="overlay-top-right"></div>

            <!-- Bottom Left: Traffic Legend + Feature Count -->
@@ -873,10 +887,15 @@ export class DeesGeoMap extends DeesElement {
              ` : ''}
            </div>

-            <!-- Bottom Right: Empty now (zoom moved to header) -->
+            <!-- Bottom Right: Empty (zoom in header) -->
            <div class="overlay-bottom-right"></div>
          </div>
        </div>
+
+        <!-- Right Sidebar: Draw Panel -->
+        <div class="right-sidebar ${!this.showToolbar || !this.isDrawPanelOpen ? 'collapsed' : ''}">
+          ${this.showToolbar && this.isDrawPanelOpen ? this.renderDrawPanel() : ''}
+        </div>
      </div>
    `;
  }
@@ -884,11 +903,16 @@ export class DeesGeoMap extends DeesElement {
  private renderHeaderToolbar(showTrafficControls: boolean): TemplateResult {
    return html`
      <div class="header-toolbar">
-        <!-- Left: Draw Tools -->
+        <!-- Left: Navigation Panel Toggle -->
        <div class="toolbar-left">
-          ${this.showToolbar ? html`
-            ${this.renderDrawTools()}
-            <div class="toolbar-divider"></div>
+          ${this.showNavigation ? html`
+            <button
+              class="tool-button ${this.isNavigationOpen ? 'active' : ''}"
+              title="Toggle Navigation Panel"
+              @click=${() => this.toggleNavigation()}
+            >
+              ${renderIcon('navigation')}
+            </button>
          ` : ''}
        </div>

@@ -899,15 +923,15 @@ export class DeesGeoMap extends DeesElement {
            : ''}
        </div>

-        <!-- Right: Navigation Toggle + Traffic Toggle + Zoom Controls -->
+        <!-- Right: Draw Panel Toggle + Traffic Toggle + Zoom Controls -->
        <div class="toolbar-right">
-          ${this.showNavigation ? html`
+          ${this.showToolbar ? html`
            <button
-              class="tool-button ${this.isNavigationOpen ? 'active' : ''}"
-              title="Navigation"
-              @click=${() => this.toggleNavigation()}
+              class="tool-button ${this.isDrawPanelOpen ? 'active' : ''}"
+              title="Toggle Draw Tools"
+              @click=${() => this.toggleDrawPanel()}
            >
-              ${renderIcon('navigation')}
+              ${renderIcon('polygon')}
            </button>
          ` : ''}
          ${showTrafficControls && this.trafficController
@@ -933,7 +957,7 @@ export class DeesGeoMap extends DeesElement {
    `;
  }

-  private renderDrawTools(): TemplateResult {
+  private renderDrawPanel(): TemplateResult {
    const tools: { id: TDrawTool; icon: string; label: string }[] = [
      { id: 'point', icon: 'point', label: 'Point' },
      { id: 'linestring', icon: 'line', label: 'Line' },
@@ -944,33 +968,51 @@ export class DeesGeoMap extends DeesElement {
    ];

    return html`
-      ${tools.map(tool => html`
-        <button
-          class="tool-button ${this.activeTool === tool.id ? 'active' : ''}"
-          title="${tool.label}"
-          @click=${() => this.handleToolClick(tool.id)}
-          ?disabled=${!this.isMapReady}
-        >
-          ${renderIcon(tool.icon)}
-        </button>
-      `)}
-      <div class="toolbar-divider"></div>
-      <button
-        class="tool-button ${this.activeTool === 'select' ? 'active' : ''}"
-        title="Select & Edit"
-        @click=${() => this.handleToolClick('select')}
-        ?disabled=${!this.isMapReady}
-      >
-        ${renderIcon('select')}
-      </button>
-      <button
-        class="tool-button"
-        title="Clear All"
-        @click=${this.handleClearClick}
-        ?disabled=${!this.isMapReady}
-      >
-        ${renderIcon('trash')}
-      </button>
+      <div class="draw-panel">
+        <div class="draw-panel-header">
+          <div class="draw-panel-header-icon">
+            ${renderIcon('polygon')}
+          </div>
+          <div class="draw-panel-header-title">Draw Tools</div>
+        </div>
+
+        <div class="draw-tools-grid">
+          ${tools.map(tool => html`
+            <button
+              class="draw-tool-button ${this.activeTool === tool.id ? 'active' : ''}"
+              title="${tool.label}"
+              @click=${() => this.handleToolClick(tool.id)}
+              ?disabled=${!this.isMapReady}
+            >
+              ${renderIcon(tool.icon)}
+              <span class="draw-tool-button-label">${tool.label}</span>
+            </button>
+          `)}
+        </div>
+
+        <div class="draw-panel-divider"></div>
+
+        <div class="draw-panel-actions">
+          <button
+            class="draw-action-button ${this.activeTool === 'select' ? 'active' : ''}"
+            title="Select & Edit"
+            @click=${() => this.handleToolClick('select')}
+            ?disabled=${!this.isMapReady}
+          >
+            ${renderIcon('select')}
+            <span>Select & Edit</span>
+          </button>
+          <button
+            class="draw-action-button danger"
+            title="Clear All"
+            @click=${this.handleClearClick}
+            ?disabled=${!this.isMapReady}
+          >
+            ${renderIcon('trash')}
+            <span>Clear All</span>
+          </button>
+        </div>
+      </div>
    `;
  }

--- a/ts_web/elements/00group-map/dees-geo-map/geo-map.icons.ts
+++ b/ts_web/elements/00group-map/dees-geo-map/geo-map.icons.ts
@@ -37,6 +37,9 @@ export const GEO_MAP_ICONS: Record<string, TemplateResult> = {
  ruler: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.3 8.7 8.7 21.3c-1 1-2.5 1-3.4 0l-2.6-2.6c-1-1-1-2.5 0-3.4L15.3 2.7c1-1 2.5-1 3.4 0l2.6 2.6c1 1 1 2.5 0 3.4Z"/><path d="m7.5 10.5 2 2"/><path d="m10.5 7.5 2 2"/><path d="m13.5 4.5 2 2"/><path d="m4.5 13.5 2 2"/></svg>`,
  error: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>`,

+  // Arrows
+  arrowLeft: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>`,
+
  // Traffic
  traffic: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="3" width="12" height="18" rx="2"/><circle cx="12" cy="7" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="17" r="1.5" fill="currentColor"/></svg>`,
  trafficLight: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 17H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5"/><path d="M15 7h5a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-5"/><path d="M12 4v4"/><path d="M12 16v4"/><circle cx="12" cy="12" r="3"/></svg>`,
--- a/ts_web/elements/00group-map/dees-geo-map/geo-map.navigation.ts
+++ b/ts_web/elements/00group-map/dees-geo-map/geo-map.navigation.ts
@@ -96,6 +96,9 @@ export class NavigationController {
  // Mode
  public navigationMode: TNavigationMode = 'driving';

+  // View mode: 'planning' for route input, 'directions' for turn-by-turn
+  public viewMode: 'planning' | 'directions' = 'planning';
+
  // Internal
  private callbacks: INavigationControllerCallbacks;
  private navSearchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
@@ -198,6 +201,9 @@ export class NavigationController {

        // Fit map to route bounds
        this.fitToRoute(routeToRender);
+
+        // Switch to directions view after successful route calculation
+        this.viewMode = 'directions';
      }
    } catch (error) {
      this.navigationState = {
@@ -272,6 +278,7 @@ export class NavigationController {
    this.navStartSearchResults = [];
    this.navEndSearchResults = [];
    this.navClickMode = null;
+    this.viewMode = 'planning';

    // Remove markers
    if (this.startMarker) {
@@ -516,6 +523,20 @@ export class NavigationController {
    map.fitBounds(bounds, { padding: 80 });
  }

+  /**
+   * Fly to a specific navigation step location
+   */
+  public flyToStep(step: IOSRMStep): void {
+    const map = this.callbacks.getMap();
+    if (!map) return;
+
+    map.flyTo({
+      center: step.maneuver.location,
+      zoom: 17,
+      duration: 1000,
+    });
+  }
+
  // ─── Search within Navigation ───────────────────────────────────────────────

  /**
@@ -763,6 +784,14 @@ export class NavigationController {
    }
  }

+  /**
+   * Switch between planning and directions view
+   */
+  public setViewMode(mode: 'planning' | 'directions'): void {
+    this.viewMode = mode;
+    this.callbacks.onRequestUpdate();
+  }
+
  // ─── Cleanup ────────────────────────────────────────────────────────────────

  /**
@@ -790,7 +819,18 @@ export class NavigationController {
   * @param extraClass - Optional CSS class to add to the panel for positioning
   */
  public render(extraClass?: string): TemplateResult {
-    const { route, isLoading, error, startPoint, endPoint } = this.navigationState;
+    // If we have a route and we're in directions view, show that
+    if (this.viewMode === 'directions' && this.navigationState.route) {
+      return this.renderDirectionsView(extraClass);
+    }
+    return this.renderPlanningView(extraClass);
+  }
+
+  /**
+   * Render the route planning view (inputs, mode selector, actions)
+   */
+  private renderPlanningView(extraClass?: string): TemplateResult {
+    const { isLoading, error, startPoint, endPoint } = this.navigationState;
    const canCalculate = startPoint && endPoint && !isLoading;

    return html`
@@ -858,35 +898,55 @@ export class NavigationController {
            <span>Calculating route...</span>
          </div>
        ` : ''}
+      </div>
+    `;
+  }

-        ${route && !isLoading ? html`
-          <div class="nav-summary">
-            <div class="nav-summary-item">
-              ${renderIcon('ruler')}
-              <span>${this.formatDistance(route.distance)}</span>
-            </div>
-            <div class="nav-summary-item">
-              ${renderIcon('clock')}
-              <span>${this.formatDuration(this.navigationState.trafficRoute?.duration ?? route.duration)}</span>
-            </div>
+  /**
+   * Render the directions view (back button, summary, turn-by-turn steps)
+   */
+  private renderDirectionsView(extraClass?: string): TemplateResult {
+    const { route, trafficRoute } = this.navigationState;
+
+    if (!route) {
+      // Shouldn't happen, but fallback to planning view
+      return this.renderPlanningView(extraClass);
+    }
+
+    return html`
+      <div class="navigation-panel nav-directions-view ${extraClass || ''}">
+        <div class="nav-directions-header">
+          <button
+            class="nav-back-btn"
+            @click=${() => this.setViewMode('planning')}
+            title="Back to route planning"
+          >
+            ${renderIcon('arrowLeft')}
+          </button>
+          <div class="nav-directions-summary">
+            ${renderIcon('ruler')}
+            <span>${this.formatDistance(route.distance)}</span>
+            <span class="nav-directions-separator">•</span>
+            ${renderIcon('clock')}
+            <span>${this.formatDuration(trafficRoute?.duration ?? route.duration)}</span>
          </div>
+        </div>

-          ${this.navigationState.trafficRoute ? html`
-            <div class="nav-traffic-info ${this.navigationState.trafficRoute.congestionLevel}">
-              <span class="nav-traffic-indicator ${this.navigationState.trafficRoute.congestionLevel}"></span>
-              <span class="nav-traffic-text">${this.getCongestionLabel(this.navigationState.trafficRoute.congestionLevel)}</span>
-              ${this.navigationState.trafficRoute.duration > this.navigationState.trafficRoute.durationWithoutTraffic ? html`
-                <span class="nav-traffic-delay">
-                  +${this.formatDuration(this.navigationState.trafficRoute.duration - this.navigationState.trafficRoute.durationWithoutTraffic)} due to traffic
-                </span>
-              ` : ''}
-            </div>
-          ` : ''}
-
-          <div class="nav-steps">
-            ${this.renderTurnByTurn(route)}
+        ${trafficRoute ? html`
+          <div class="nav-traffic-info ${trafficRoute.congestionLevel}">
+            <span class="nav-traffic-indicator ${trafficRoute.congestionLevel}"></span>
+            <span class="nav-traffic-text">${this.getCongestionLabel(trafficRoute.congestionLevel)}</span>
+            ${trafficRoute.duration > trafficRoute.durationWithoutTraffic ? html`
+              <span class="nav-traffic-delay">
+                +${this.formatDuration(trafficRoute.duration - trafficRoute.durationWithoutTraffic)} due to traffic
+              </span>
+            ` : ''}
          </div>
        ` : ''}
+
+        <div class="nav-steps">
+          ${this.renderTurnByTurn(route)}
+        </div>
      </div>
    `;
  }
@@ -975,7 +1035,7 @@ export class NavigationController {
        const distance = this.formatDistance(step.distance);

        return html`
-          <div class="nav-step">
+          <div class="nav-step" @click=${() => this.flyToStep(step)}>
            <div class="nav-step-icon">${icon}</div>
            <div class="nav-step-content">
              <div class="nav-step-instruction">${instruction}</div>