diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue index 15e5f11..0c6bf8e 100644 --- a/app/src/components/QuestMap.vue +++ b/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) => ({ diff --git a/packages/utils/dag.js b/packages/utils/dag.js index de95372..6a3a911 100644 --- a/packages/utils/dag.js +++ b/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) { diff --git a/packages/utils/dag.test.js b/packages/utils/dag.test.js index ba42757..e296782 100644 --- a/packages/utils/dag.test.js +++ b/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]) + }) +})