feat(ol-interaction-dragbox): add DragBox component wrapper

closes #307

Author: d-koppenhagen

docs/.vitepress/config.ts

@@ -271,6 +271,10 @@ export const config: UserConfig = {
                 text: "ol-interaction-draw",
                 link: "/componentsguide/interactions/draw/",
               },
+              {
+                text: "ol-interaction-dragbox",
+                link: "/componentsguide/interactions/dragbox/",
+              },
               {
                 text: "ol-interaction-dragrotate",
                 link: "/componentsguide/interactions/dragrotate/",

docs/componentsguide/interactions/dragbox/index.md

@@ -0,0 +1,74 @@
+# ol-interaction-dragbox
+
+> Allows the user to draw a vector box by clicking and dragging on the map,
+> normally combined with a _condition_ that limits it to when the `shift` or other key is held down.
+
+<script setup>
+import VectorSourceDemo1 from "@demos/VectorSourceDemo1.vue"
+</script>
+
+<ClientOnly>
+<VectorSourceDemo1/>
+</ClientOnly>
+
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/VectorSourceDemo1.vue
+
+:::
+
+## Properties
+
+### Props from OpenLayers
+
+Properties are passed-trough from OpenLayers directly.
+Their types and default values can be checked-out [in the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_interaction_DragBox-DragBox.html).
+Only some properties deviate caused by reserved keywords from Vue / HTML.
+This deviating props are described in the section below.
+
+### Deviating Properties
+
+None.
+
+## Events
+
+You have access to all Events from the underlying interaction.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_interaction_DragBox-DragBox.html) to see the available events tht will be fired.
+
+```html
+<ol-interaction-dragbox @error="handleEvent">
+  <!-- ... -->
+</ol-interaction-dragbox>
+```
+
+## Methods
+
+You have access to all Methods from the underlying interaction.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_interaction_DragBox-DragBox.html) to see the available methods.
+
+To access the source, you can use a `ref()` as shown below:
+
+```vue
+<template>
+  <!-- ... -->
+  <ol-map ref="mapRef" @error="handleEvent">
+    <!-- ... -->
+  </ol-map>
+  <!-- ... -->
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type DragBox from "ol/interaction/DragBox";
+
+const drgboxRef = ref<{ dragbox: DragBox } | null>(null);
+
+onMounted(() => {
+  const dragbox: DragBox = drgboxRef.value?.dragbox;
+  // call your method on `dragbox`
+});
+</script>
+```
+

docs/componentsguide/map/index.md

@@ -25,6 +25,8 @@ See also documentation of `ol-view` component.
 
 :::
 
+## Properties
+
 ### Props from OpenLayers
 
 Properties are passed-trough from OpenLayers directly.

src/components/interaction/OlDragBoxInteraction.vue

@@ -0,0 +1,53 @@
+<template lang="">
+  <slot></slot>
+</template>
+
+<script setup lang="ts">
+import { inject, watch, onMounted, onUnmounted, computed } from "vue";
+
+import DragBox, { type Options } from "ol/interaction/DragBox";
+
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { Map } from "ol";
+import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<Options>(), {});
+
+const map = inject<Map>("map");
+
+const { properties } = usePropsAsObjectProperties(props);
+
+const dragbox = computed(() => {
+  const s = new DragBox({
+    ...properties,
+  });
+
+  return s;
+});
+
+useOpenLayersEvents(dragbox, ["boxcancel", "boxdrag", "boxend", "boxstart"]);
+
+watch(dragbox, (newVal, oldVal) => {
+  map?.removeInteraction(oldVal);
+  map?.addInteraction(newVal);
+
+  map?.changed();
+});
+
+onMounted(() => {
+  map?.addInteraction(dragbox.value);
+});
+
+onUnmounted(() => {
+  map?.removeInteraction(dragbox.value);
+});
+
+defineExpose({
+  dragbox,
+});
+</script>

src/components/interaction/index.ts

@@ -1,5 +1,6 @@
 import type { App } from "vue";
 import OlClusterSelectInteraction from "./OlClusterSelectInteraction.vue";
+import OlDragBoxInteraction from "./OlDragBoxInteraction.vue";
 import OlDragRotateInteraction from "./OlDragRotateInteraction.vue";
 import OlDragRotateZoomInteraction from "./OlDragRotateZoomInteraction.vue";
 import OlSelectInteraction from "./OlSelectInteraction.vue";
@@ -10,6 +11,7 @@ import OlTransformInteraction from "./OlTransformInteraction.vue";
 
 function install(app: App) {
   app.component("ol-interaction-clusterselect", OlClusterSelectInteraction);
+  app.component("ol-interaction-dragbox", OlDragBoxInteraction);
   app.component("ol-interaction-dragrotate", OlDragRotateInteraction);
   app.component("ol-interaction-dragrotatezoom", OlDragRotateZoomInteraction);
   app.component("ol-interaction-select", OlSelectInteraction);
@@ -24,6 +26,7 @@ export default install;
 export {
   install,
   OlClusterSelectInteraction,
+  OlDragBoxInteraction,
   OlDragRotateInteraction,
   OlDragRotateZoomInteraction,
   OlSelectInteraction,

src/demos/VectorSourceDemo1.vue

@@ -9,26 +9,48 @@
       :center="center"
       :zoom="zoom"
       :projection="projection"
+      :constrainRotation="16"
     />
 
-    <ol-tile-layer>
-      <ol-source-osm />
-    </ol-tile-layer>
-
-    <ol-vector-layer>
-      <ol-source-vector :url="url" :format="geoJson"> </ol-source-vector>
+    <ol-vector-layer background="#1a2b39" ref="vectorSourceRef">
+      <ol-source-vector :url="url" :format="geoJson">
+        <ol-style :overrideStyleFunction="styleFn"></ol-style>
+      </ol-source-vector>
     </ol-vector-layer>
+
+    <ol-interaction-dragbox
+      :condition="shiftKeyOnly"
+      @boxstart="log('boxstart', $event)"
+      @boxdrag="log('boxdrag', $event)"
+      @boxend="log('boxend', $event)"
+      @boxcancel="log('boxcancel', $event)"
+    ></ol-interaction-dragbox>
   </ol-map>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import type { Feature } from "ol";
+import { Fill, Style } from "ol/style";
+import { shiftKeyOnly } from "ol/events/condition";
 import { ref, inject } from "vue";
+import type { DragBoxEvent } from "ol/interaction/DragBox";
 
 const center = ref([0, 0]);
 const projection = ref("EPSG:4326");
-const zoom = ref(3);
-
+const zoom = ref(0);
 const url = ref("https://openlayers.org/data/vector/ecoregions.json");
 const format = inject("ol-format");
 const geoJson = new format.GeoJSON();
+
+function styleFn(feature: Feature) {
+  return new Style({
+    fill: new Fill({
+      color: feature.get("COLOR_BIO") || "#eeeeee",
+    }),
+  });
+}
+
+function log(eventType: string, event: DragBoxEvent) {
+  console.log(eventType, event);
+}
 </script>

tests/__screenshots__/interactions.test.ts/ol-interaction-dragbox-should-drag-on-the-map-1.png

@@ -70,6 +70,17 @@ test.describe("ol-interaction-draw", () => {
   });
 });
 
+test.describe("ol-interaction-dragbox", () => {
+  test("should drag on the map", async ({ page }) => {
+    const map = new MapPage(page);
+    await map.goto("/componentsguide/interactions/dragbox/");
+    await map.waitUntilReady();
+    await map.waitUntilCanvasLoaded();
+    await map.dragOnCanvas([180, 180], [300, 180], ["Shift"]);
+    await map.checkCanvasScreenshot();
+  });
+});
+
 test.describe("ol-interaction-dragrotate", () => {
   test("should rotate the map view by dragging on it with pressed modifiers", async ({
     page,

tests/__screenshots__/layers.test.ts/ol-vector-layer-should-render-1.png

@@ -122,6 +122,7 @@ export default defineConfig({
           "ol/geom/Polygon": "Polygon",
           "ol/style/Style": "Style",
           "ol/interaction/Draw": "Draw",
+          "ol/interaction/DragBox": "DragBox",
           "ol/interaction/Modify": "Modify",
           "ol/style/Circle": "CircleStyle",
           "ol/style/Fill": "Fill",