reflex-map3d 0.1.1__py3-none-any.whl

reflex_map3d/__init__.py

@@ -0,0 +1,56 @@
+"""Reflex custom component: map3d.
+
+Generate a real-world 3D city from OpenStreetMap data, straight from a Reflex
+app. A port of https://github.com/cartesiancs/map3d.
+"""
+
+from ._base import NPM_DEPENDENCIES
+from .area_selector import (
+    DEFAULT_ATTRIBUTION,
+    DEFAULT_TILE_URL,
+    Map3dAreaSelector,
+    map3d_area_selector,
+)
+from .models import BBox, Feature, to_bbox
+from .overpass import (
+    DEFAULT_OVERPASS_URL,
+    FALLBACK_OVERPASS_URLS,
+    OverpassError,
+    buildings_query,
+    fetch_buildings,
+    fetch_buildings_async,
+    fetch_roads,
+    fetch_roads_async,
+    roads_query,
+    to_features,
+)
+from .scene import DEFAULT_SCALE, Map3dScene, map3d_scene
+from .viewer import Map3dViewer, map3d_viewer
+
+__all__ = [
+    "DEFAULT_ATTRIBUTION",
+    "DEFAULT_OVERPASS_URL",
+    "DEFAULT_SCALE",
+    "DEFAULT_TILE_URL",
+    "FALLBACK_OVERPASS_URLS",
+    "NPM_DEPENDENCIES",
+    "BBox",
+    "Feature",
+    "Map3dAreaSelector",
+    "Map3dScene",
+    "Map3dViewer",
+    "OverpassError",
+    "buildings_query",
+    "fetch_buildings",
+    "fetch_buildings_async",
+    "fetch_roads",
+    "fetch_roads_async",
+    "map3d_area_selector",
+    "map3d_scene",
+    "map3d_viewer",
+    "roads_query",
+    "to_bbox",
+    "to_features",
+]
+
+__version__ = "0.1.0"

reflex_map3d/_base.py

@@ -0,0 +1,78 @@
+"""Shared plumbing for the reflex-map3d components.
+
+The React side of this package ships as plain ``.js``/``.jsx`` files next to
+this module. :func:`rx.asset` symlinks them into the consuming app's
+``assets/external/`` tree and hands back a ``$/public/...`` specifier that Vite
+compiles, so no npm package has to be published for the port to work.
+
+Every file is registered from *this* module on purpose: shared assets are
+grouped by the module that registers them, and the relative imports between
+the frontend files only resolve when they all land in the same directory.
+"""
+
+from __future__ import annotations
+
+import reflex as rx
+from reflex.components.component import NoSSRComponent
+
+__all__ = ["FRONTEND_FILES", "NPM_DEPENDENCIES", "Map3dComponent", "asset_library"]
+
+#: npm packages every map3d component pulls in.
+#:
+#: The versions track the ones cartesiancs/map3d builds against, bumped to the
+#: releases that support the React 19 runtime Reflex ships.
+NPM_DEPENDENCIES: list[str] = [
+    "three@0.186.0",
+    "@react-three/fiber@9.7.0",
+    "@react-three/drei@10.7.8",
+    "react-leaflet@5.0.0",
+    "leaflet@1.9.4",
+]
+
+#: The frontend files shipped in the wheel, in dependency order.
+FRONTEND_FILES: tuple[str, ...] = (
+    "geo.js",
+    "overpass.js",
+    "icons.jsx",
+    "tooltip.jsx",
+    "area_selector.jsx",
+    "scene.jsx",
+    "viewer.jsx",
+)
+
+
+def _register_assets() -> dict[str, str]:
+    """Link every frontend file into the app and map it to its import path.
+
+    Returns:
+        A mapping of file name to the ``$/public/...`` module specifier.
+    """
+    return {name: rx.asset(name, shared=True).importable_path for name in FRONTEND_FILES}
+
+
+_ASSETS = _register_assets()
+
+
+def asset_library(filename: str) -> str:
+    """Resolve a bundled frontend file to an importable module path.
+
+    Args:
+        filename: The frontend file name, as listed in :data:`FRONTEND_FILES`.
+
+    Returns:
+        The module specifier to use as a component ``library``.
+
+    Raises:
+        KeyError: If the file is not one of the shipped frontend files.
+    """
+    return _ASSETS[filename]
+
+
+class Map3dComponent(NoSSRComponent):
+    """Base class for every map3d component.
+
+    three.js, Leaflet and the Overpass fetches all touch ``window``/``document``
+    on mount, so the components are imported dynamically on the client only.
+    """
+
+    lib_dependencies: list[str] = NPM_DEPENDENCIES

reflex_map3d/_base.pyi

@@ -0,0 +1,87 @@
+"""Stub file for custom_components/reflex_map3d/_base.py"""
+
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+from collections.abc import Mapping, Sequence
+from typing import Any, Optional
+from reflex_components_core.core.breakpoints import Breakpoints
+from reflex_base.event import (
+    EventType,
+    PointerEventInfo,
+)
+from reflex_base.vars.base import Var
+from reflex.components.component import NoSSRComponent
+
+__all__ = ["FRONTEND_FILES", "NPM_DEPENDENCIES", "Map3dComponent", "asset_library"]
+NPM_DEPENDENCIES: list[str]
+FRONTEND_FILES: tuple[str, ...]
+_ASSETS: dict[str, str]
+
+def asset_library(filename: str) -> str: ...
+
+class Map3dComponent(NoSSRComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        custom_attrs: dict[str, Any | Var] | None = None,
+        on_blur: Optional[EventType[()]] = None,
+        on_click: Optional[EventType[()] | EventType[PointerEventInfo]] = None,
+        on_context_menu: Optional[EventType[()] | EventType[PointerEventInfo]] = None,
+        on_double_click: Optional[EventType[()] | EventType[PointerEventInfo]] = None,
+        on_focus: Optional[EventType[()]] = None,
+        on_mount: Optional[EventType[()]] = None,
+        on_mouse_down: Optional[EventType[()]] = None,
+        on_mouse_enter: Optional[EventType[()]] = None,
+        on_mouse_leave: Optional[EventType[()]] = None,
+        on_mouse_move: Optional[EventType[()]] = None,
+        on_mouse_out: Optional[EventType[()]] = None,
+        on_mouse_over: Optional[EventType[()]] = None,
+        on_mouse_up: Optional[EventType[()]] = None,
+        on_scroll: Optional[EventType[()]] = None,
+        on_scroll_end: Optional[EventType[()]] = None,
+        on_unmount: Optional[EventType[()]] = None,
+        **props,
+    ) -> "Map3dComponent":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            ref: The Var to pass as the ref to the component.
+            class_name: The class name for the component.
+            custom_attrs: Attributes passed directly to the component.
+            on_focus: Fired when the element (or some element inside of it) receives focus. For example, it is called when the user clicks on a text input.
+            on_blur: Fired when focus has left the element (or left some element inside of it). For example, it is called when the user clicks outside of a focused text input.
+            on_click: Fired when the user clicks on an element. For example, it's called when the user clicks on a button.
+            on_context_menu: Fired when the user right-clicks on an element.
+            on_double_click: Fired when the user double-clicks on an element.
+            on_mouse_down: Fired when the user presses a mouse button on an element.
+            on_mouse_enter: Fired when the mouse pointer enters the element.
+            on_mouse_leave: Fired when the mouse pointer leaves the element.
+            on_mouse_move: Fired when the mouse pointer moves over the element.
+            on_mouse_out: Fired when the mouse pointer moves out of the element.
+            on_mouse_over: Fired when the mouse pointer moves onto the element.
+            on_mouse_up: Fired when the user releases a mouse button on an element.
+            on_scroll: Fired when the user scrolls the element.
+            on_scroll_end: Fired when scrolling ends on the element.
+            on_mount: Fired when the component is mounted to the page.
+            on_unmount: Fired when the component is removed from the page. Only called during navigation, not on page refresh.
+            **props: The props of the component.
+
+        Returns:
+            The component.
+        """
+        ...

reflex_map3d/area_selector.jsx

@@ -0,0 +1,256 @@
+/**
+ * Leaflet bounding-box selector, ported from cartesiancs/map3d for Reflex.
+ *
+ * The user drags a rectangle over an OpenStreetMap tile layer; the selection
+ * is reported back as {north, south, east, west} so a Reflex state can drive
+ * the 3D scene with it.
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { MapContainer, Rectangle, TileLayer, useMapEvents } from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import { CircleMinus, PointerClick } from "./icons.jsx";
+
+import { normalizeBBox } from "./geo.js";
+
+const DEFAULT_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+const DEFAULT_ATTRIBUTION =
+  '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors';
+
+const iconStyle = { width: "14px", height: "14px" };
+
+/** Wrap a longitude back into [-180, 180) after a world-wrapping drag. */
+function wrapLng(latlng) {
+  const lng = ((((latlng.lng + 180) % 360) + 360) % 360) - 180;
+  return new L.LatLng(latlng.lat, lng);
+}
+
+function boundsToBBox(bounds) {
+  const ne = bounds.getNorthEast();
+  const sw = bounds.getSouthWest();
+  return {
+    north: ne.lat,
+    south: sw.lat,
+    east: ne.lng,
+    west: sw.lng,
+  };
+}
+
+function RectangleSelector({ dragEnabled, drawBounds, rectangleColor, onDraw, onDone }) {
+  const [firstPoint, setFirstPoint] = useState(null);
+  const lastLatLng = useRef(null);
+
+  const emit = useCallback(
+    (start, end, done) => {
+      const raw = new L.LatLngBounds(start, end);
+      const wrapped = new L.LatLngBounds(wrapLng(start), wrapLng(end));
+      onDraw(raw);
+      if (done) onDone(boundsToBBox(wrapped));
+    },
+    [onDraw, onDone],
+  );
+
+  const map = useMapEvents({
+    mousedown(event) {
+      if (!dragEnabled) setFirstPoint(event.latlng);
+    },
+    mousemove(event) {
+      if (!firstPoint) return;
+      lastLatLng.current = event.latlng;
+      emit(firstPoint, event.latlng, false);
+    },
+    mouseup(event) {
+      if (!firstPoint) return;
+      emit(firstPoint, event.latlng, true);
+      setFirstPoint(null);
+    },
+  });
+
+  useEffect(() => {
+    if (!map) return undefined;
+    const container = map.getContainer();
+
+    const touchStart = (event) => {
+      if (dragEnabled || event.touches.length === 0) return;
+      setFirstPoint(map.mouseEventToLatLng(event.touches[0]));
+    };
+    const touchMove = (event) => {
+      if (!firstPoint || event.touches.length === 0) return;
+      const latlng = map.mouseEventToLatLng(event.touches[0]);
+      lastLatLng.current = latlng;
+      emit(firstPoint, latlng, false);
+    };
+    const touchEnd = () => {
+      if (!firstPoint) return;
+      emit(firstPoint, lastLatLng.current || firstPoint, true);
+      setFirstPoint(null);
+    };
+
+    container.addEventListener("touchstart", touchStart);
+    container.addEventListener("touchmove", touchMove);
+    container.addEventListener("touchend", touchEnd);
+    return () => {
+      container.removeEventListener("touchstart", touchStart);
+      container.removeEventListener("touchmove", touchMove);
+      container.removeEventListener("touchend", touchEnd);
+    };
+  }, [map, dragEnabled, firstPoint, emit]);
+
+  useEffect(() => {
+    if (!map) return;
+    if (dragEnabled) map.dragging.enable();
+    else map.dragging.disable();
+  }, [dragEnabled, map]);
+
+  return drawBounds ? (
+    <Rectangle bounds={drawBounds} pathOptions={{ color: rectangleColor }} />
+  ) : null;
+}
+
+const buttonBase = {
+  backdropFilter: "blur(8px)",
+  border: "none",
+  padding: "0.5rem 1rem",
+  borderRadius: "8px",
+  cursor: "pointer",
+  transition: "0.2s",
+  alignItems: "center",
+  gap: "0.5rem",
+  fontSize: "14px",
+};
+
+export function Map3dAreaSelector({
+  center = [40.8, -73.95],
+  zoom = 13,
+  tileUrl = DEFAULT_TILE_URL,
+  attribution = DEFAULT_ATTRIBUTION,
+  minZoom = 2,
+  maxZoom = 19,
+  rectangleColor = "#1f6feb",
+  showControls = true,
+  selectLabel = "Select Box",
+  dragLabel = "Back to Drag",
+  clearLabel = "Remove Box",
+  onSelect,
+  onClear,
+  onModeChange,
+  children,
+  css,
+  style,
+  className,
+  ...rest
+}) {
+  const [dragEnabled, setDragEnabled] = useState(true);
+  const [drawBounds, setDrawBounds] = useState(null);
+  const [hasSelection, setHasSelection] = useState(false);
+
+  const mapCenter = useMemo(() => {
+    if (Array.isArray(center) && center.length >= 2) return [Number(center[0]), Number(center[1])];
+    if (center && typeof center === "object") return [Number(center.lat), Number(center.lng)];
+    return [40.8, -73.95];
+  }, [center]);
+
+  const handleDone = useCallback(
+    (bbox) => {
+      setHasSelection(true);
+      if (onSelect) onSelect(bbox);
+    },
+    [onSelect],
+  );
+
+  const handleToggleDrag = () => {
+    const next = !dragEnabled;
+    setDragEnabled(next);
+    if (onModeChange) onModeChange(next);
+  };
+
+  const handleClear = () => {
+    setDrawBounds(null);
+    setHasSelection(false);
+    setDragEnabled(true);
+    if (onModeChange) onModeChange(true);
+    if (onClear) onClear();
+  };
+
+  // Reflex hands its style props down as a class (emotion consumes `css`), so
+  // the wrapper must not pin its own width/height inline: an inline value would
+  // beat the class and collapse the component to its parent's size.
+  const wrapperStyle = { position: "relative", ...(css || {}), ...(style || {}) };
+
+  return (
+    <div className={className} style={wrapperStyle} {...rest}>
+      {showControls && (
+        <div
+          style={{
+            position: "absolute",
+            zIndex: 999,
+            right: "1rem",
+            top: "1rem",
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: "0.5rem",
+          }}
+        >
+          <button
+            type="button"
+            onClick={handleClear}
+            style={{
+              ...buttonBase,
+              display: !hasSelection || dragEnabled ? "none" : "flex",
+              color: "#ffffff",
+              backgroundColor: "#ef4444",
+              outline: "#ef4444c2 solid 0.1rem",
+            }}
+          >
+            <CircleMinus style={iconStyle} /> {clearLabel}
+          </button>
+
+          <button
+            type="button"
+            onClick={handleToggleDrag}
+            style={{
+              ...buttonBase,
+              display: "flex",
+              color: dragEnabled ? "#ffffff" : "#000000",
+              backgroundColor: dragEnabled ? "#007bffe8" : "#ffffffd8",
+              outline: dragEnabled
+                ? "#086ad4c2 solid 0.1rem"
+                : "rgba(240, 240, 244, 0.51) solid 0.1rem",
+            }}
+          >
+            {dragEnabled ? (
+              <>
+                <PointerClick style={iconStyle} />
+                <span>{selectLabel}</span>
+              </>
+            ) : (
+              <span>{dragLabel}</span>
+            )}
+          </button>
+        </div>
+      )}
+
+      <MapContainer
+        center={mapCenter}
+        zoom={zoom}
+        minZoom={minZoom}
+        maxZoom={maxZoom}
+        style={{ height: "100%", width: "100%" }}
+      >
+        <TileLayer attribution={attribution} url={tileUrl} />
+        <RectangleSelector
+          dragEnabled={dragEnabled}
+          drawBounds={drawBounds}
+          rectangleColor={rectangleColor}
+          onDraw={setDrawBounds}
+          onDone={handleDone}
+        />
+      </MapContainer>
+      {children}
+    </div>
+  );
+}
+
+export { normalizeBBox };
+export default Map3dAreaSelector;

reflex_map3d/area_selector.py

@@ -0,0 +1,92 @@
+"""The Leaflet bounding-box selector."""
+
+from __future__ import annotations
+
+from typing import Any
+
+import reflex as rx
+
+from ._base import Map3dComponent, asset_library
+
+__all__ = ["Map3dAreaSelector", "map3d_area_selector"]
+
+DEFAULT_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+DEFAULT_ATTRIBUTION = (
+    '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
+)
+
+
+class Map3dAreaSelector(Map3dComponent):
+    """An OpenStreetMap map on which the user drags out a bounding box.
+
+    Switch the map into "Select Box" mode, drag a rectangle, and the selection
+    is pushed to the backend through ``on_select`` as
+    ``{"north": ..., "south": ..., "east": ..., "west": ...}``.
+    """
+
+    library = asset_library("area_selector.jsx")
+
+    tag = "Map3dAreaSelector"
+
+    # Where the map opens, as ``[lat, lng]``.
+    center: rx.Var[list[float]] = rx.Var.create([40.8, -73.95])
+
+    # The initial zoom level.
+    zoom: rx.Var[int] = rx.Var.create(13)
+
+    # The XYZ raster tile template to render.
+    tile_url: rx.Var[str] = rx.Var.create(DEFAULT_TILE_URL)
+
+    # The attribution shown in the map corner. Keep it when using OSM tiles.
+    attribution: rx.Var[str] = rx.Var.create(DEFAULT_ATTRIBUTION)
+
+    # The smallest zoom level the user may reach.
+    min_zoom: rx.Var[int] = rx.Var.create(2)
+
+    # The largest zoom level the user may reach.
+    max_zoom: rx.Var[int] = rx.Var.create(19)
+
+    # The stroke colour of the selection rectangle.
+    rectangle_color: rx.Var[str] = rx.Var.create("#1f6feb")
+
+    # Whether to render the built-in mode/clear buttons.
+    show_controls: rx.Var[bool] = rx.Var.create(True)
+
+    # Label of the button that switches into rectangle-drawing mode.
+    select_label: rx.Var[str] = rx.Var.create("Select Box")
+
+    # Label of the button that switches back to panning.
+    drag_label: rx.Var[str] = rx.Var.create("Back to Drag")
+
+    # Label of the button that clears the current selection.
+    clear_label: rx.Var[str] = rx.Var.create("Remove Box")
+
+    # Fired with the bounding box whenever the user finishes a drag.
+    on_select: rx.EventHandler[lambda bbox: [bbox]]
+
+    # Fired when the user clears the current selection.
+    on_clear: rx.EventHandler[lambda: []]
+
+    # Fired with ``True`` for pan mode and ``False`` for draw mode.
+    on_mode_change: rx.EventHandler[lambda drag_enabled: [drag_enabled]]
+
+    @classmethod
+    def create(cls, *children: Any, **props: Any) -> Map3dAreaSelector:
+        """Create the selector, defaulting to a usable size.
+
+        Leaflet needs a sized container, so a default height is applied unless
+        the caller sets one.
+
+        Args:
+            *children: Extra nodes rendered on top of the map.
+            **props: The component props.
+
+        Returns:
+            The component instance.
+        """
+        props.setdefault("height", "480px")
+        props.setdefault("width", "100%")
+        return super().create(*children, **props)
+
+
+map3d_area_selector = Map3dAreaSelector.create

reflex_map3d/area_selector.pyi

@@ -0,0 +1,119 @@
+"""Stub file for custom_components/reflex_map3d/area_selector.py"""
+
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+from collections.abc import Mapping, Sequence
+from typing import Any, Optional
+from reflex_components_core.core.breakpoints import Breakpoints
+from reflex_base.event import (
+    EventType,
+    PointerEventInfo,
+)
+from reflex_base.vars.base import Var
+from ._base import Map3dComponent
+
+__all__ = ["Map3dAreaSelector", "map3d_area_selector"]
+DEFAULT_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+DEFAULT_ATTRIBUTION = (
+    '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
+)
+
+class Map3dAreaSelector(Map3dComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        center: Var[list[float]] | list[float] | None = None,
+        zoom: Var[int] | int | None = None,
+        tile_url: Var[str] | str | None = None,
+        attribution: Var[str] | str | None = None,
+        min_zoom: Var[int] | int | None = None,
+        max_zoom: Var[int] | int | None = None,
+        rectangle_color: Var[str] | str | None = None,
+        show_controls: Var[bool] | bool | None = None,
+        select_label: Var[str] | str | None = None,
+        drag_label: Var[str] | str | None = None,
+        clear_label: Var[str] | str | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        custom_attrs: dict[str, Any | Var] | None = None,
+        on_blur: Optional[EventType[()]] = None,
+        on_clear: Optional[EventType[Any]] = None,
+        on_click: Optional[EventType[()] | EventType[PointerEventInfo]] = None,
+        on_context_menu: Optional[EventType[()] | EventType[PointerEventInfo]] = None,
+        on_double_click: Optional[EventType[()] | EventType[PointerEventInfo]] = None,
+        on_focus: Optional[EventType[()]] = None,
+        on_mode_change: Optional[EventType[Any]] = None,
+        on_mount: Optional[EventType[()]] = None,
+        on_mouse_down: Optional[EventType[()]] = None,
+        on_mouse_enter: Optional[EventType[()]] = None,
+        on_mouse_leave: Optional[EventType[()]] = None,
+        on_mouse_move: Optional[EventType[()]] = None,
+        on_mouse_out: Optional[EventType[()]] = None,
+        on_mouse_over: Optional[EventType[()]] = None,
+        on_mouse_up: Optional[EventType[()]] = None,
+        on_scroll: Optional[EventType[()]] = None,
+        on_scroll_end: Optional[EventType[()]] = None,
+        on_select: Optional[EventType[Any]] = None,
+        on_unmount: Optional[EventType[()]] = None,
+        **props,
+    ) -> "Map3dAreaSelector":
+        """Create the selector, defaulting to a usable size.
+
+        Leaflet needs a sized container, so a default height is applied unless
+        the caller sets one.
+
+        Args:
+            *children: Extra nodes rendered on top of the map.
+            center: Where the map opens, as ``[lat, lng]``.
+            zoom: The initial zoom level.
+            tile_url: The XYZ raster tile template to render.
+            attribution: The attribution shown in the map corner. Keep it when using OSM tiles.
+            min_zoom: The smallest zoom level the user may reach.
+            max_zoom: The largest zoom level the user may reach.
+            rectangle_color: The stroke colour of the selection rectangle.
+            show_controls: Whether to render the built-in mode/clear buttons.
+            select_label: Label of the button that switches into rectangle-drawing mode.
+            drag_label: Label of the button that switches back to panning.
+            clear_label: Label of the button that clears the current selection.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            ref: The Var to pass as the ref to the component.
+            class_name: The class name for the component.
+            custom_attrs: Attributes passed directly to the component.
+            on_focus: Fired when the element (or some element inside of it) receives focus. For example, it is called when the user clicks on a text input.
+            on_blur: Fired when focus has left the element (or left some element inside of it). For example, it is called when the user clicks outside of a focused text input.
+            on_click: Fired when the user clicks on an element. For example, it's called when the user clicks on a button.
+            on_context_menu: Fired when the user right-clicks on an element.
+            on_double_click: Fired when the user double-clicks on an element.
+            on_mouse_down: Fired when the user presses a mouse button on an element.
+            on_mouse_enter: Fired when the mouse pointer enters the element.
+            on_mouse_leave: Fired when the mouse pointer leaves the element.
+            on_mouse_move: Fired when the mouse pointer moves over the element.
+            on_mouse_out: Fired when the mouse pointer moves out of the element.
+            on_mouse_over: Fired when the mouse pointer moves onto the element.
+            on_mouse_up: Fired when the user releases a mouse button on an element.
+            on_scroll: Fired when the user scrolls the element.
+            on_scroll_end: Fired when scrolling ends on the element.
+            on_mount: Fired when the component is mounted to the page.
+            on_unmount: Fired when the component is removed from the page. Only called during navigation, not on page refresh.
+            on_select: Fired with the bounding box whenever the user finishes a drag.
+            on_clear: Fired when the user clears the current selection.
+            on_mode_change: Fired with ``True`` for pan mode and ``False`` for draw mode.
+            **props: The component props.
+
+        Returns:
+            The component instance.
+        """
+        ...
+
+map3d_area_selector = Map3dAreaSelector.create