Passing a reactive variable to ol-geom-line-string coordinate no longer stays in sync with variable.

[marktlinn]

Describe the bug
I have a component that is making use of <ol-geom-line-string> e.g. <ol-geom-line-string :coordinates="coordinateArray"></ol-geom-line-string> passing a ref containing an array of coordinate arrays to the ol-geom-line-string.

In the initial versions of our app we had been using Vue3 OpenLayers version 4.0.2 and the reactivity worked as expected. On pushing a new coordinate to the ref coordinateArray the new values were being reflected in the geom line being extended to match the values in the Vue ref. Now that is not the case.

Affected version(s)

Please run npm list --depth=0 vue vue3-openlayers ol ol-ext ol-contextmenu and paste the output below:
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Vue3-openlayers: "11.2.0" (also tested on "11.2.1")
Node:  v20.10.0

To Reproduce
Steps to reproduce the behavior:
Create a geom-line-string element and pass :coordinate a array of coordinates that has a new coordinate pushed to it as some set interval.

On the map as the reactive variable coordinateArray has most coordinates pushed to it they should be shown on the map.

Expected behavior
The expected behaviour is that when passed a reactive variable containing coordinates the reactive variable is updated (e.g. additional coordinates are pushed to the array) these updates should be reflected in the map with the geom-line growing, shrinking etc.

Desktop (please complete the following information):

• Browser chrome

[d-koppenhagen]

I think it's cause the property is not watched deeply. Have you tried to pass a new reference instead of directly pushing into the existing one?

Like this:

const coordinates = ref([/* ... */])

// ...

coordinates.value = [...coordinates.value, newValue]

[marktlinn]

Thank you for your response.

Yes, passing a new reference works and is what we're currently doing, but when tracking a large growing array it leads to inefficiencies in needing to copy and create a new reference each time versus a simple .push() operation on an existing array. The Vue reactivity system supports tracking appending elements to an array via the push method as well as supporting other array methods.

This worked in prior versions of Vue3 OpenLayers so was it intentionally removed, or is there an option to have it watched deeply? It feels like if such reactivity is supported natively by Vue it would be great if there were at least an option to enable deep watch.

[d-koppenhagen]

So, I don't think it was removed intentionally. Does it make a difference when you switch from ref to reactive?

[marktlinn]

No, unfortunately not, it doesn't draw or update the <ol-geom-line-string>.

[d-koppenhagen]

please try with the latest version (11.3.0). This issue can't be reporduced and therefor I think it has been fixed. I updates the Demo and this code should work even without creating a new copy of the coordinates:

<template>
  <button class="btn-default" @click="addCoordinate" type="button">
    Add coordinate
  </button>

  <ol-map style="height: 400px">
    <ol-view
      ref="view"
      :center="[116.54875, 40.45064]"
      :zoom="16"
      projection="EPSG:4326"
    />

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>

    <ol-vector-layer>
      <ol-source-vector>
        <ol-feature>
          <ol-geom-line-string :coordinates="coordinates"></ol-geom-line-string>
          <ol-style>
            <ol-style-stroke color="red" :width="10"></ol-style-stroke>
          </ol-style>
        </ol-feature>
      </ol-source-vector>
    </ol-vector-layer>
  </ol-map>
</template>

<script setup lang="ts">
import { ref } from "vue";

const coordinates = ref([
  [116.544921, 40.451633],
  [116.545264, 40.451649],
  [116.545865, 40.451698],
  [116.546144, 40.451551],
  [116.546337, 40.451274],
  [116.546788, 40.451143],
  [116.547324, 40.451078],
  [116.547539, 40.450996],
  [116.547839, 40.450719],
  [116.54844, 40.450506],
  [116.548933, 40.450604],
  [116.549448, 40.450604],
  [116.550242, 40.450376],
  [116.550865, 40.450163],
  [116.551702, 40.449935],
  [116.552581, 40.449576],
]);

function addCoordinate() {
  const lastCoordinate = coordinates.value[coordinates.value.length - 1];
  coordinates.value.push([
    lastCoordinate[0] + Math.random() * 0.0005,
    lastCoordinate[1] - Math.random() * 0.0005,
  ]);
}
</script>