feat(ol-interaction-modify): make source injection optional

closes #368

Author: d-koppenhagen

docs/componentsguide/interactions/modify/index.md

@@ -7,13 +7,10 @@
 ## Demo
 
 <script setup>
-import SnapModifyDemo from "@demos/SnapModifyDemo.vue"
+import ModifySourceDemo from "@demos/ModifySourceDemo.vue";
+import SnapModifyDemo from "@demos/SnapModifyDemo.vue";
 </script>
 
-<ClientOnly>
-<SnapModifyDemo/>
-</ClientOnly>
-
 ## Setup
 
 <!--@include: ../../interactions.plugin.md-->
@@ -24,6 +21,24 @@ import SnapModifyDemo from "@demos/SnapModifyDemo.vue"
 | ------------------------- | :----------------------------------: |
 | `<ol-interaction-modify>` | `<Interactions.OlInteractionModify>` |
 
+### Modify the source vector components features
+
+<ClientOnly>
+<ModifySourceDemo/>
+</ClientOnly>
+
+::: code-group
+
+<<< ../../../../src/demos/ModifySourceDemo.vue
+
+:::
+
+### Modify passed `features`
+
+<ClientOnly>
+<SnapModifyDemo/>
+</ClientOnly>
+
 ::: code-group
 
 <<< ../../../../src/demos/SnapModifyDemo.vue
@@ -58,6 +73,10 @@ import SnapModifyDemo from "@demos/SnapModifyDemo.vue"
 
 - **Type**: `Boolean`
 
-  ### features
+### features
 
 - **Type**: `[Collection,Object]`
+
+### source
+
+- **Type**: `VectorSource`

src/components/interaction/OlInteractionModify.vue

@@ -5,13 +5,13 @@
 <script setup lang="ts">
 import type { Ref } from "vue";
 import {
-  provide,
   inject,
-  watch,
   onMounted,
   onUnmounted,
-  toRefs,
+  provide,
   ref,
+  toRefs,
+  watch,
 } from "vue";
 import type Collection from "ol/Collection";
 import Modify from "ol/interaction/Modify";
@@ -36,6 +36,7 @@ const props = withDefaults(
     wrapX?: boolean;
     hitDetection?: boolean;
     features?: Collection<Feature<Geometry>>;
+    source?: VectorSource;
   }>(),
   {
     pixelTolerance: 10,
@@ -44,9 +45,10 @@ const props = withDefaults(
 );
 
 const map = inject<Map>("map");
-const source = inject<Ref<VectorSource> | null>("vectorSource");
+const vectorSource = inject<Ref<VectorSource> | null>("vectorSource", null);
 
 const {
+  source,
   features,
   condition,
   deleteCondition,
@@ -57,8 +59,14 @@ const {
 } = toRefs(props);
 
 function createModify() {
-  const m = new Modify({
-    source: source?.value,
+  if (!source?.value || !features.value) {
+    console.error(
+      `[Vue3-OpenLayers Error] OlInteractionModify: Modify interactions needs either a either a source or features to work.
+      Please provide either the props 'source' or 'feature' or use the component with an '<OlSourceVector>' component.`,
+    );
+  }
+  return new Modify({
+    source: source?.value || vectorSource?.value,
     features: features?.value,
     condition: condition?.value,
     deleteCondition: deleteCondition?.value,
@@ -67,8 +75,6 @@ function createModify() {
     wrapX: wrapX.value,
     hitDetection: hitDetection.value,
   });
-
-  return m;
 }
 
 let modify = createModify();

src/demos/ModifySourceDemo.vue

@@ -0,0 +1,56 @@
+<template>
+  <ol-map style="height: 400px">
+    <ol-view :center="center" :zoom="5" :projection="projection" />
+
+    <ol-tile-layer>
+      <ol-source-osm />
+    </ol-tile-layer>
+
+    <ol-vector-layer>
+      <ol-source-vector :features="zones">
+        <ol-style>
+          <ol-style-stroke color="blue" :width="3" />
+          <ol-style-fill color="rgba(0, 0, 255, 0.4)" />
+        </ol-style>
+        <ol-interaction-modify />
+      </ol-source-vector>
+    </ol-vector-layer>
+  </ol-map>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { GeoJSON } from "ol/format";
+
+const center = ref([-102.13121, 40.2436]);
+const projection = ref("EPSG:4326");
+
+const zones = ref([]);
+
+zones.value = new GeoJSON().readFeatures({
+  type: "FeatureCollection",
+  crs: {
+    type: "name",
+    properties: {
+      name: projection.value,
+    },
+  },
+  features: [
+    {
+      type: "Feature",
+      geometry: {
+        type: "Polygon",
+        coordinates: [
+          [
+            [-103.85636392303468, 38.10970692739486],
+            [-103.86770698495866, 33.218572724914544],
+            [-98.20654544301988, 33.6532810221672],
+            [-98.4408283538437, 38.31894739375114],
+            [-103.85636392303468, 38.10970692739486],
+          ],
+        ],
+      },
+    },
+  ],
+});
+</script>

src/demos/SnapModifyDemo.vue

@@ -21,17 +21,6 @@
 
     <ol-vector-layer>
       <ol-source-vector :features="zones">
-        <ol-interaction-modify
-          v-if="modifyEnabled"
-          :features="selectedFeatures"
-        >
-          <ol-style>
-            <ol-style-circle :radius="5">
-              <ol-style-fill color="#00dd11" />
-              <ol-style-stroke color="blue" :width="2" />
-            </ol-style-circle>
-          </ol-style>
-        </ol-interaction-modify>
         <ol-interaction-draw
           v-if="drawEnabled"
           :stopClick="true"
@@ -40,26 +29,34 @@
         />
         <ol-interaction-snap v-if="modifyEnabled || drawEnabled" />
         <ol-style>
-          <ol-style-stroke color="blue" :width="3"></ol-style-stroke>
-          <ol-style-fill color="rgba(0, 0, 255, 0.4)"></ol-style-fill>
+          <ol-style-stroke color="blue" :width="3" />
+          <ol-style-fill color="rgba(0, 0, 255, 0.4)" />
         </ol-style>
       </ol-source-vector>
+      <ol-interaction-modify v-if="modifyEnabled" :features="selectedFeatures">
+        <ol-style>
+          <ol-style-circle :radius="5">
+            <ol-style-fill color="#00dd11" />
+            <ol-style-stroke color="blue" :width="2" />
+          </ol-style-circle>
+        </ol-style>
+      </ol-interaction-modify>
     </ol-vector-layer>
     <ol-interaction-select
       @select="featureSelected"
       :condition="selectCondition"
       :features="selectedFeatures"
     >
       <ol-style>
-        <ol-style-stroke color="red" :width="2"></ol-style-stroke>
-        <ol-style-fill color="rgba(255, 0, 0, 0.4)"></ol-style-fill>
+        <ol-style-stroke color="red" :width="2" />
+        <ol-style-fill color="rgba(255, 0, 0, 0.4)" />
       </ol-style>
     </ol-interaction-select>
   </ol-map>
 </template>
 
 <script setup>
-import { ref, inject } from "vue";
+import { inject, ref } from "vue";
 import { GeoJSON } from "ol/format";
 import { Collection } from "ol";