Add skeleton for box selection

Author: stfnkth

marimo/box-selection.py

@@ -0,0 +1,62 @@
+
+
+import marimo
+
+__generated_with = "0.13.2"
+app = marimo.App(width="medium")
+
+
+@app.cell
+def _():
+    import openlayers as ol
+    import marimo as mo
+    return mo, ol
+
+
+@app.cell
+def _(ol):
+    layer = ol.VectorLayer(
+        source=ol.sources.VectorSource(
+            url="https://openlayers.org/data/vector/ecoregions.json"
+        )
+    )
+    return (layer,)
+
+
+@app.cell
+def _(layer, ol):
+    m = ol.MapWidget(layers=[layer])
+    return (m,)
+
+
+@app.cell
+def _(m, mo):
+    w = mo.ui.anywidget(m)
+    return (w,)
+
+
+@app.cell
+def _(w):
+    w
+    return
+
+
+@app.cell
+def _(w):
+    w.value["view_state"]
+    return
+
+
+@app.cell
+def _(m):
+    m.add_call("addBoxSelection")
+    return
+
+
+@app.cell
+def _():
+    return
+
+
+if __name__ == "__main__":
+    app.run()

src/openlayers/js/openlayers.anywidget.js

@@ -16,7 +16,7 @@ import { parseClickEvent } from "./utils";
 import { featureToGeoJSON } from "./utils";
 import { addTooltipToMap } from "./tooltip";
 import { addEventListernersToMapWidget } from "./events";
-import { addSelectFeaturesToMap } from "./select-features";
+import { addSelectFeaturesToMap, addBoxSelectionToMap } from "./select-features";
 import { addDragAndDropToMap as addDragAndDropVectorLayersToMap } from "./drag-and-drop";
 
 // --- Types
@@ -258,6 +258,10 @@ export default class MapWidget {
     addSelectFeaturesToMap(this._map, this._model);
   }
 
+  addBoxSelection(): void {
+    addBoxSelectionToMap(this._map, this._model);
+  }
+
   addClickInteraction(): void {
     const model = this._model;
     this._map.on("click", (e) => {

srcjs/ipywidget-ts/map.ts

@@ -7,7 +7,11 @@ import Fill from 'ol/style/Fill.js';
 import Stroke from 'ol/style/Stroke.js';
 import VectorLayer from "ol/layer/Vector";
 
+// Box selection
+import { platformModifierKeyOnly } from 'ol/events/condition.js';
+
 import { featureToGeoJSON } from "./utils";
+import DragBox from 'ol/interaction/DragBox.js';
 
 // TODO: Should be a parameter
 const highlightStyle = new Style({
@@ -58,4 +62,21 @@ function addSelectFeaturesToMap(map: Map, model?: AnyModel): void {
     });
 }
 
-export { addSelectFeaturesToMap };
+function addBoxSelectionToMap(map: Map, model?: AnyModel): void {
+    console.warn("Box selection not implemented yet");
+
+    const dragBox = new DragBox({
+        condition: platformModifierKeyOnly,
+    });
+    map.addInteraction(dragBox);
+    dragBox.on('boxend', function () {
+        const extent = dragBox.getGeometry().getExtent();
+        console.log("box extent", extent);
+    });
+
+    dragBox.on('boxstart', function () {
+        // select.clearSelection();
+    });
+}
+
+export { addSelectFeaturesToMap, addBoxSelectionToMap };