fix(ol-source-vector): make property changes reactive

MelihAltintas · Mar 31, 2024 · b476468 · b476468
1 parent c00d992
commit b476468
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 17 deletions.
diff --git a/docs/.vitepress/theme/demo.css b/docs/.vitepress/theme/demo.css
@@ -76,15 +76,17 @@ main form {
   align-items: baseline;
   gap: 1rem;
   margin-bottom: 1rem;
+  flex-flow: column;
 }
 
 main form fieldset {
   margin: 0;
   padding: 0;
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 1rem;
   border: none;
+  flex-wrap: wrap;
 }
 
 main form label {

diff --git a/src/components/sources/OlSourceVector.vue b/src/components/sources/OlSourceVector.vue
@@ -10,7 +10,14 @@ import type VectorLayer from "ol/layer/Vector";
 import type HeatmapLayer from "ol/layer/Heatmap";
 import type { WebGLVectorLayer } from "../layers/WebGLVectorLayerClass";
 import type { Ref } from "vue";
-import { inject, watch, onMounted, onUnmounted, provide, ref } from "vue";
+import {
+  inject,
+  watch,
+  onMounted,
+  onUnmounted,
+  provide,
+  shallowRef,
+} from "vue";
 import type Geometry from "ol/geom/Geometry";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import {
@@ -43,36 +50,45 @@ const layer = heatmapLayer || vectorLayer || webglVectorLayer;
 
 const { properties } = usePropsAsObjectProperties(props);
 
-const createSource = () => new VectorSource(properties);
-
-let source = createSource();
+const source = shallowRef(new VectorSource(properties));
 
 useOpenLayersEvents(source, FEATURE_EVENTS);
 
 const applySource = () => {
-  layer?.value?.setSource(null);
-  source = createSource();
-  layer?.value?.setSource(source);
+  const existingSource = layer?.value.getSource();
+  if (existingSource) {
+    for (const key in properties) {
+      const keyInObj = key as keyof typeof properties;
+      if (properties[keyInObj]) {
+        existingSource.set(key, properties[keyInObj]);
+      }
+    }
+  } else {
+    layer?.value.setSource(source.value);
+  }
 };
-watch(properties, () => applySource());
+watch(
+  () => properties,
+  () => applySource(),
+);
 
 watch(
   () => layer?.value,
   () => applySource(),
 );
 
 onMounted(() => {
-  layer?.value.setSource(source);
+  applySource();
 });
 
 onUnmounted(() => {
   layer?.value.setSource(null);
 });
 
-provide("vectorSource", ref(source));
+provide("vectorSource", source);
 
 defineExpose({
   layer,
-  source: ref(source),
+  source,
 });
 </script>
diff --git a/src/demos/CircleDemo.vue b/src/demos/CircleDemo.vue
@@ -1,4 +1,8 @@
 <template>
+  <form>
+    <label for="radius">Radius:</label>
+    <input type="number" id="radius" step="0.01" min="0.01" v-model="radius" />
+  </form>
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
@@ -18,7 +22,7 @@
     <ol-vector-layer>
       <ol-source-vector>
         <ol-feature>
-          <ol-geom-circle :center="[30, 40]" :radius="0.2"></ol-geom-circle>
+          <ol-geom-circle :center="[30, 40]" :radius="radius"></ol-geom-circle>
           <ol-style>
             <ol-style-stroke color="red" :width="3"></ol-style-stroke>
             <ol-style-fill color="rgba(255,200,0,0.2)"></ol-style-fill>
@@ -35,4 +39,5 @@ import { ref } from "vue";
 const center = ref([30, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(10);
+const radius = ref(0.2);
 </script>
diff --git a/src/demos/GeomPoint.vue b/src/demos/GeomPoint.vue
@@ -1,4 +1,24 @@
 <template>
+  <form>
+    <fieldset>
+      <label for="fill">Fill:</label>
+      <input type="color" id="fill" v-model="fill" />
+      <label for="stroke">Stroke:</label>
+      <input type="color" id="stroke" v-model="stroke" />
+    </fieldset>
+    <fieldset>
+      <label for="strokeWidth">StrokeWidth:</label>
+      <input
+        type="number"
+        id="strokeWidth"
+        step="1"
+        min="0"
+        v-model="strokeWidth"
+      />
+      <label for="radius">Radius:</label>
+      <input type="number" id="radius" step="1" min="1" v-model="radius" />
+    </fieldset>
+  </form>
   <button class="btn-default" @click="changeCoordinate" type="button">
     change coordinates
   </button>
@@ -24,9 +44,9 @@
           <ol-geom-point :coordinates="coordinate"></ol-geom-point>
           <ol-style>
             <ol-style-circle :radius="radius">
-              <ol-style-fill :color="fillColor"></ol-style-fill>
+              <ol-style-fill :color="fill"></ol-style-fill>
               <ol-style-stroke
-                :color="strokeColor"
+                :color="stroke"
                 :width="strokeWidth"
               ></ol-style-stroke>
             </ol-style-circle>
@@ -45,8 +65,8 @@ const projection = ref("EPSG:4326");
 const zoom = ref(8);
 const radius = ref(40);
 const strokeWidth = ref(10);
-const strokeColor = ref("red");
-const fillColor = ref("white");
+const stroke = ref("#ff0000");
+const fill = ref("#ffffff");
 const coordinate = ref([40, 40]);
 
 function changeCoordinate() {