feat: center the same layers

app/src/components/QuestMap.vue

@@ -53,12 +53,15 @@ const data = [
   },
 ]
 
+const marginX = 100
+const marginY = 100
+
 const dag = new DAG(data)
 const nodes = dag.getNodes().map((node) => ({
   id: node._id,
   name: node.title,
-  x: 50 * node.index,
-  y: 100 * node.layer,
+  x: marginX * node.index - (marginX * dag.getLayer(node._id)) / 2,
+  y: marginY * node.layer,
 }))
 
 const edges = dag.getEdgesArray().map((edge) => ({

packages/utils/dag.js

@@ -30,6 +30,18 @@ export default class DAG {
     return Array.from(this.#edges.values())
   }
 
+  getLayers() {
+    return this.#layers
+  }
+
+  getLayer(id) {
+    const node = this.getNode(id)
+    if (!node) {
+      throw new Error(`Node ${id} not found`)
+    }
+    return this.#layers[node.layer - 1]
+  }
+
   #setLayer(id) {
     const node = this.getNode(id)
     if (!node) {

packages/utils/dag.test.js

@@ -125,3 +125,41 @@ describe('dag edges', () => {
     )
   })
 })
+
+describe('dag layers', () => {
+  it('two layer', () => {
+    const data = [
+      {
+        _id: 'helloworld',
+        requirements: [],
+      },
+      {
+        _id: 'spell',
+        requirements: ['helloworld'],
+      },
+    ]
+
+    const dag = new DAG(data)
+    expect(dag.getLayers()).toEqual([1, 1])
+  })
+
+  it('branch layers', () => {
+    const data = [
+      {
+        _id: 'helloworld',
+        requirements: [],
+      },
+      {
+        _id: 'spell',
+        requirements: ['helloworld'],
+      },
+      {
+        _id: 'discover',
+        requirements: ['helloworld'],
+      },
+    ]
+
+    const dag = new DAG(data)
+    expect(dag.getLayers()).toEqual([1, 2])
+  })
+})