The first node is always in the middle of the view during initialization, setting position is useless

[FatMii]

Although I set {x: -100, y: 0} for the position attribute of this node, it is still in the middle position (setting any value for position does not take effect)

Below is my code:

index.vue

<template>
  <div style="height: 30vh; border: 2px solid #fafafa">
    <VueFlow
      v-model:nodes="nodes"
      v-model:edges="edges"
      fit-view-on-init
      class="vue-flow-basic-example"
      :default-zoom="1"
      :min-zoom="0.5"
      :max-zoom="1.5"
      @nodes-initialized="layoutGraph('LR')"
      @paneClick="onPaneClick"
    >
      <Background pattern-color="#fff" :gap="8" />
      <template #node-custom="nodeProps">
        <CustomNode v-bind="nodeProps" />
      </template>
    </VueFlow>
  </div>
</template>

<script setup>
import { Position, VueFlow } from "@vue-flow/core";
import { nextTick, ref } from "vue";
import { Background } from "@vue-flow/background";
import { Controls } from "@vue-flow/controls";
import { MiniMap } from "@vue-flow/minimap";
import { useVueFlow } from "@vue-flow/core";
import CustomNode from "./CustomNode.vue";
import { useLayout } from "./useLayout";
const { onConnect, addEdges } = useVueFlow();

const nodes = ref([
  {
    id: "1",
    type: "custom",
    data: { module: "Metrology Analysis" },
    label: "Metrology Analysis",
    position: { x: -100, y: 0},
  },
]);

const edges = ref([
  // { id: "e1-2", source: "1", target: "2", type: "custom" },
  // { id: "e1-3", source: "1", target: "3", animated: true },
]);

onConnect((params) => {
  addEdges([params]);
});

function onPaneClick({ event, edge }) {
  console.log(" onPaneClick:", edge, event);
}

const { layout } = useLayout();
const { fitView } = useVueFlow();
async function layoutGraph(direction) {
  nodes.value = layout(nodes.value, edges.value, direction);
  nextTick(() => {
    fitView();
  });
}
</script>

<style></style>

useLayout.js

import dagre from "@dagrejs/dagre";
import { Position, useVueFlow } from "@vue-flow/core";
import { ref } from "vue";

/**
 * Composable to run the layout algorithm on the graph.
 * It uses the `dagre` library to calculate the layout of the nodes and edges.
 */
export function useLayout() {
  const { findNode } = useVueFlow();

  const graph = ref(new dagre.graphlib.Graph());

  const previousDirection = ref("LR");

  function layout(nodes, edges, direction) {
    // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
    const dagreGraph = new dagre.graphlib.Graph();

    graph.value = dagreGraph;

    dagreGraph.setDefaultEdgeLabel(() => ({}));

    const isHorizontal = direction === "LR";
    dagreGraph.setGraph({ rankdir: direction });

    previousDirection.value = direction;

    for (const node of nodes) {
      // if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
      const graphNode = findNode(node.id);

      dagreGraph.setNode(node.id, {
        width: graphNode.dimensions.width || 150,
        height: graphNode.dimensions.height || 50,
      });
    }

    for (const edge of edges) {
      dagreGraph.setEdge(edge.source, edge.target);
    }

    dagre.layout(dagreGraph);

    // set nodes with updated positions
    return nodes.map((node) => {
      const nodeWithPosition = dagreGraph.node(node.id);

      return {
        ...node,
        targetPosition: isHorizontal ? Position.Left : Position.Top,
        sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
        position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
      };
    });
  }

  return { graph, layout, previousDirection };
}

CustomNode.vue

<template>
  <div class="custom-node" @click="handleClickNode">
    <Handle
      :style="{ opacity: id == '1' ? 0 : 1 }"
      id="target-a"
      type="target"
      :position="Position.Left"
    />
    <Handle id="source-a" type="source" :position="Position.Right" />
    <BarChartOutlined />
    <div class="label">{{ data.module }}</div>
    <RightOutlined @click="OpenModuleChoose" />
    <DeleteOutlined @click="showDeleteConfirm" />
    <CustomModal ref="modalRef" @ok="handleAddNode" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Handle, Position } from "@vue-flow/core";
import {
  BarChartOutlined,
  CaretDownFilled,
  RightOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
import { useVueFlow } from "@vue-flow/core";
import CustomModal from "./CustomModal.vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { createVNode } from "vue";
import { Modal } from "ant-design-vue";

const props = defineProps({
  id: {
    type: String,
    required: true,
    default: () => "",
  },
  position: {
    type: Object,
    default: () => {
      return {
        x: 0,
        y: 0,
      };
    },
  },
  data: {
    type: Object,
    required: true,
    default: () => {},
  },
});

const modalRef = ref(null);
const OpenModuleChoose = () => {
  console.log(modalRef);
  if (modalRef.value) {
    modalRef.value.show();
  }
};

const { addNodes, addEdges, removeNodes } = useVueFlow();

const handleAddNode = ($event) => {
  const newNodeId = Math.random().toString();
  addNodes({
    id: newNodeId,
    type: "custom",
    position: { x: Math.random() * 500, y: Math.random() * 500 },
    targetPosition: Position.Right,
    sourcePosition: Position.Left,
    data: { module: $event },
  });

  addEdges({
    id: `e${props.id}-${newNodeId}`,
    source: props.id,
    target: newNodeId,
  });
};

const showDeleteConfirm = () => {
  Modal.confirm({
    title: "Are you sure delete this task?",
    icon: createVNode(ExclamationCircleOutlined),
    content: "",
    okText: "Yes",
    okType: "danger",
    cancelText: "No",
    onOk() {
      handleDelNode();
    },
    onCancel() {
      console.log("Cancel");
    },
  });
};
const handleDelNode = () => {
  removeNodes(props.id);
};

const handleClickNode = ($event) => {
  if ($event && $event.target.nodeName !== "svg") {
    console.log("set current moduel");
  }
};
</script>

<style>
.custom-node {
  padding: 0 6px;
  border: 1px solid black;
  border-radius: 4px;
  background-color: #91caff;
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
}

.custome-node:hover {
  background-color: #c0c0ff;
}

.label {
  margin: auto 4px;
}

.dialog-container {
  position: absolute;
  top: 36px;
  left: 0;
  display: flex;
}
</style>

[bcakmakoglu]

You are setting fit-view-on-init which means the view will be fit around existing nodes.
Since only one node exists, the view is fit so that the single node you have is in the center of the view.

This is not a bug but a literal feature and the expected behavior of fitView 😄
If you don't want that remove this flag.

[FatMii]

I had tried remove fit-view-on-int flag and resetting the initial position {x:200,y:200}, but it still hasn't changed 😭

<template>
  <div style="height: 30vh; border: 2px solid #fafafa">
    <VueFlow
      v-model:nodes="nodes"
      v-model:edges="edges"
      class="vue-flow-basic-example"
      :default-zoom="1"
      :min-zoom="0.5"
      :max-zoom="1.5"
      @nodes-initialized="layoutGraph('LR')"
      @paneClick="onPaneClick"
    >
      <Background pattern-color="#fff" :gap="8" />

      <!-- <MiniMap /> -->
      <!-- <Controls /> -->

      <template #node-custom="nodeProps">
        <CustomNode v-bind="nodeProps" />
      </template>

      <!-- <template #edge-custom="edgeProps">
        <CustomEdge v-bind="edgeProps" />
      </template> -->
    </VueFlow>
  </div>
</template>

<script setup>
import { Position, VueFlow } from "@vue-flow/core";
import { nextTick, ref } from "vue";
import { Background } from "@vue-flow/background";
import { Controls } from "@vue-flow/controls";
import { MiniMap } from "@vue-flow/minimap";
import { useVueFlow } from "@vue-flow/core";
import CustomNode from "./CustomNode.vue";
import CustomEdge from "./CustomEdge.vue";
import { useLayout } from "./useLayout";
const { onConnect, addEdges } = useVueFlow();

const nodes = ref([
  {
    id: "1",
    type: "custom",
    data: { module: "Metrology Analysis" },
    label: "Metrology Analysis",
    position: { x: 200, y: 200 },
  },
]);

const edges = ref([
  // { id: "e1-2", source: "1", target: "2", type: "custom" },
  // { id: "e1-3", source: "1", target: "3", animated: true },
]);

onConnect((params) => {
  addEdges([params]);
});

function onPaneClick({ event, edge }) {
  console.log(" onPaneClick:", edge, event);
}

const { layout } = useLayout();
const { fitView } = useVueFlow();
async function layoutGraph(direction) {
  nodes.value = layout(nodes.value, edges.value, direction);
  console.log("nodes:", nodes.value);
  nextTick(() => {
    fitView();
  });
}
</script>

<style></style>

[bcakmakoglu]

You're calling fitView yourself in layoutGraph.
Idk what to tell you but please read through your own code properly.