Y Axis Flipping

[bekirbostanci]

In my project y axis should be like Cartesian coordinate system. I mean y axis top should be + bottom should be - I tried to find a configuration for this however I didnt find. (Maybe I missed it) Is there any option for this feature?

[dash14]

Hi @bekirbostanci, The coordinate system of v-network-graph follows the specification of the SVG in which it is drawn, and unfortunately does not support a Cartesian coordinate system. Outside the library, it is possible to reverse the sign of the Y-axis values before drawing and then reverse it again when obtaining the coordinates of each node. I don't know if this fulfils what you want to do, but I have written an example.

<script setup lang="ts">
import {
  Layouts,
  defineConfigs,
  Edges,
  Nodes,
  NodePositions,
} from "v-network-graph";
import { onBeforeMount, ref } from "vue";

const nodes: Nodes = {
  node1: { name: "node1" },
  node2: { name: "node2" },
  node3: { name: "node3" },
};
const edges: Edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
};

const layouts: Layouts = {
  nodes: {
    node1: { x: 0, y: -100 },
    node2: { x: 200, y: 0 },
    node3: { x: 0, y: 100 },
  },
};

const flippedLayouts = ref<Layouts>({ nodes: {} });

onBeforeMount(() => {
  flippedLayouts.value.nodes = flipY(layouts.nodes);
});

function retrieveNodePositions() {
  layouts.nodes = flipY(flippedLayouts.value.nodes);
  console.log("Retrieve node positions", layouts);
}

function flipY(source: NodePositions): NodePositions {
  const positions: NodePositions = {};
  for (const [name, pos] of Object.entries(source)) {
    positions[name] = { x: pos.x, y: -pos.y };
  }
  return positions;
}

const configs = defineConfigs({
  node: {
    label: {
      visible: true,
    },
  },
});
</script>

<template>
  <button @click="retrieveNodePositions">Node Positions</button>
  <v-network-graph
    :nodes="nodes"
    :edges="edges"
    :configs="configs"
    :layouts="flippedLayouts"
  />
</template>

[bekirbostanci]

I solved it with exactly with same way but I want to be sure about is it the best practice. Thanks, I am closing the ticket.