feat: add close button to the draw panel - #515

Walkthrough

Adds a memoized CustomMapDrawPanel factory that wraps the existing MapDrawPanel, conditionally hides it based on mapControls.mapDraw.show, overlays a close button when active to toggle the draw control, and registers the custom factory in KeplerInjector to replace the default.

Changes

Sequence Diagram(s)

sequenceDiagram
  participant Injector as KeplerInjector
  participant Factory as CustomMapDrawPanelFactory
  participant Panel as MapDrawPanel (wrapped)
  participant AppState as MapControls State
  participant User as User

  Injector->>Factory: register replacement (MapDrawPanelFactory → CustomMapDrawPanelFactory)
  Factory->>Panel: instantiate wrapped component with props
  Panel->>AppState: read `mapControls.mapDraw.show` and `mapControls.mapDraw.active`
  alt draw control hidden
    Panel-->>User: render nothing (null)
  else draw control visible
    Panel-->>User: render MapDrawPanel UI
    alt draw active
      User->>Panel: click Close button
      Panel->>Panel: preventDefault & stopPropagation
      Panel->>AppState: call `onToggleMapControl('mapDraw')`
      AppState-->>Panel: updated `mapControls` triggers re-render
    end
  end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix: Kepler injector improvements #349: Also modifies KeplerInjector.tsx to register custom factory replacements (similar injector change).
• fix: add back draw geometry button #513: Related to uiState.mapControls.mapDraw handling that this wrapper interacts with.

Suggested reviewers

• ilyabo
• lixun910

Poem

🐰 I wrap the draw with nimble paws,
An X appears to halt the cause,
Factories swapped with gentle hop,
Injector hums — the changes drop,
Hoppity code, the map applause!

❌ Failed checks (1 warning)

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

• X
• Mastodon
• Reddit
• LinkedIn