refactor(ol-style-circle): migrate to script setup

Author: d-koppenhagen

docs/componentsguide/styles/circle/index.md

@@ -21,7 +21,7 @@ Styling a feature inside a vector layer.
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
-    style="height:400px"
+    style="height: 400px"
   >
     <ol-view
       ref="view"
@@ -51,23 +51,13 @@ Styling a feature inside a vector layer.
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
-export default {
-  setup() {
-    const center = ref([40, 40]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(8);
-    const rotation = ref(0);
-
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-    };
-  },
-};
+
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(8);
+const rotation = ref(0);
 </script>
 ```
 

src/components/styles/Circle.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import CircleStyle from "ol/style/Circle";
+import Fill from "ol/style/Fill";
+import Stroke from "ol/style/Stroke";
+
+import { inject, watch, onMounted, onUnmounted, provide, computed } from "vue";
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+
+const props = defineProps({
+  radius: {
+    type: Number,
+  },
+  scale: {
+    type: Number,
+  },
+});
+
+const style = inject("style", null);
+const styledObj = inject("styledObj", null);
+
+const { properties } = usePropsAsObjectProperties(props);
+
+const createCircleStyle = (properties) => {
+  return new CircleStyle({
+    ...properties,
+    fill: new Fill(),
+    stroke: new Stroke(),
+  });
+};
+
+const circle = computed(() => createCircleStyle(properties));
+
+const applyStyle = () => {
+  style.value.setImage(null);
+  style.value.setImage(circle.value);
+  styledObj.value.changed();
+};
+watch(properties, () => {
+  applyStyle();
+});
+
+watch(style, () => {
+  applyStyle();
+});
+
+onMounted(() => {
+  style.value.setImage(circle.value);
+});
+
+onUnmounted(() => {
+  style.value.setImage(null);
+});
+
+provide("circle", circle);
+provide("styledObj", styledObj);
+</script>
+
+<style lang=""></style>

src/components/styles/OlStyleCircle.vue

@@ -1,5 +1,5 @@
 import OlStyle from "./OlStyle.vue";
-import Circle from "./Circle.vue";
+import OlStyleCircle from "./OlStyleCircle.vue";
 import Stroke from "./Stroke.vue";
 import Fill from "./Fill.vue";
 import Icon from "./Icon.vue";
@@ -14,7 +14,7 @@ function install(app) {
   install.installed = true;
 
   app.component("ol-style", OlStyle);
-  app.component(Circle.name, Circle);
+  app.component("ol-style-circle", OlStyleCircle);
   app.component(Stroke.name, Stroke);
   app.component(Fill.name, Fill);
   app.component(Icon.name, Icon);
@@ -32,5 +32,5 @@ export {
   Icon,
   Text,
   FlowLine,
-  Circle,
+  OlStyleCircle,
 };