I am using the svelte.js framework

and I am using a function that returns an object like this {x, y, rotated, isMoving}

the problem is that isMoving use getter

{
  get isMoving() {
    return Object.values(this)
  }
}

basically I want all the values to be in a array and then loop on it.

function activeAxis() {
  return {
    x: x !== prevCoords.x && y === prevCoords.y,
    y: y !== prevCoords.y && x === prevCoords.x,
    rotated: y !== prevCoords.y && x !== prevCoords.x,
    get isMoving() {
      return Object.values(this)
    }
  };
}

the array is a series of points with x and y

like this:

let array = [{
    x: 10
    y: 20
  },
  {
    x: 15
    y: 20
  },
  {
    x: 25,
    y: 9
  },
  {
    x: 25,
    y: 30
  },
  {
    x: 25,
    y: 25
  },
  {
    x: 25
    y: 25
  }
]

here my 2 components

Canvas.svelte

<script>
  import Gline from "./Gline.svelte";

  let coordsArray = [];

  for (let i = 0; i < 20; i++) {
    coordsArray = [
      ...coordsArray,
      {
        x: 10,
        y: i * 10,
      },
    ];
  }
</script>

<div>
  {#each coordsArray as thisCoords, index}
    {@const prevCoords = coordsArray[index - 1]
      ? coordsArray[index - 1]
      : coordsArray[index]}
    <Gline x={thisCoords.x} y={thisCoords.y} {prevCoords} />
  {/each}
</div>

Line.svelte

<script>
  export let x;
  export let y;
  export let prevCoords;

  function activeAxis() {
    return {
      x: x !== prevCoords.x && y === prevCoords.y,
      y: y !== prevCoords.y && x === prevCoords.x,
      rotated: y !== prevCoords.y && x !== prevCoords.x,
      get isMoving() {
        return Object.values(this)
      }
    };
  }

  console.log(activeAxis().isMoving);
</script>

<div class="h-1 bg-cyan-500 absolute w-28" style="top: {y}px; left: {x}px;" />