fix(ol-style): apply style correctly to ol-interaction-*

This fixes the behaviour that some style weren't applied correctly within interactions.
Added a demo which shows how to style circle at pointer position as well.

closes #351

Author: d-koppenhagen

Diff for: src/components/interaction/OlInteractionDraw.vue

@@ -4,7 +4,15 @@
 
 <script setup lang="ts">
 import type { Ref } from "vue";
-import { provide, inject, watch, onMounted, onUnmounted, toRefs } from "vue";
+import {
+  provide,
+  inject,
+  watch,
+  onMounted,
+  onUnmounted,
+  toRefs,
+  ref,
+} from "vue";
 import Draw from "ol/interaction/Draw";
 import type Map from "ol/Map";
 import type VectorSource from "ol/source/Vector";
@@ -123,7 +131,7 @@ onUnmounted(() => {
   map?.removeInteraction(draw);
 });
 
-provide("stylable", draw);
+provide("stylable", ref(draw));
 
 defineExpose({
   draw,

Diff for: src/components/interaction/OlInteractionModify.vue

@@ -4,7 +4,15 @@
 
 <script setup lang="ts">
 import type { Ref } from "vue";
-import { provide, inject, watch, onMounted, onUnmounted, toRefs } from "vue";
+import {
+  provide,
+  inject,
+  watch,
+  onMounted,
+  onUnmounted,
+  toRefs,
+  ref,
+} from "vue";
 import type Collection from "ol/Collection";
 import Modify from "ol/interaction/Modify";
 import type Map from "ol/Map";
@@ -93,7 +101,7 @@ onUnmounted(() => {
   map?.removeInteraction(modify);
 });
 
-provide("stylable", modify);
+provide("stylable", ref(modify));
 
 defineExpose({
   modify,

Diff for: src/components/styles/OlStyleCircle.vue

@@ -10,7 +10,7 @@ import CircleStyle from "ol/style/Circle";
 import Fill from "ol/style/Fill";
 import Stroke from "ol/style/Stroke";
 
-import type { Ref } from "vue";
+import { type Ref } from "vue";
 import { inject, watch, onMounted, onUnmounted, provide, computed } from "vue";
 import type Draw from "ol/interaction/Draw";
 import type Modify from "ol/interaction/Modify";
@@ -64,7 +64,7 @@ watch(
 );
 
 onMounted(() => {
-  style?.value?.setImage(circle.value);
+  applyStyle();
 });
 
 onUnmounted(() => {

Diff for: src/demos/DrawDemo.vue

@@ -42,6 +42,10 @@
           <ol-style>
             <ol-style-stroke color="blue" :width="2"></ol-style-stroke>
             <ol-style-fill color="rgba(255, 255, 0, 0.4)"></ol-style-fill>
+            <ol-style-circle :radius="5">
+              <ol-style-fill color="#00dd11" />
+              <ol-style-stroke color="blue" :width="2" />
+            </ol-style-circle>
           </ol-style>
         </ol-interaction-draw>
       </ol-source-vector>

Diff for: src/demos/SnapModifyDemo.vue

@@ -25,6 +25,12 @@
           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"