Layout demo: upgrade dagre, add typings

[d9k]

At the layout demo dagre 0.8.5 used (see useLayout.js).

Seems modern @dagrejs/dagre 1.0.1+ has type definitions

So useLayout.js can be renamed to useLayout.ts and typings can be added

[d9k]

BTW WTF, do you know anything about dagre project deprecation?

[d9k]

My working attempt, useLayout.ts:

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

export type Direction = 'TB' | 'BT' | 'LR' | 'RL';

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

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

  const previousDirection = ref('LR');

  function layout(nodes: Node[], edges: Edge[], direction: 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);

      if (!graphNode) {
        console.error('graphNode not found');
        continue;
      }

      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 }
      };
    }) as Node[];
  }

  return { graph, layout, previousDirection };
}

[bcakmakoglu]

The example has been updated to use the non-deprecated dagre pkg now :)

[bcakmakoglu]

I kept all the examples in JS for a reason.
Not everyone wants to use TS and those that want to can easily update the examples to TS, it's not that complicated.
Thanks for the suggestion though, I might switch to the non-deprecated pkg at some point ^^

[bcakmakoglu]

FYI, almost all of these examples are available in TypeScript in the repo itself.

[d9k]

Not everyone wants to use TS and those that want to can easily update the examples to TS, it's not that complicated.

Ok, but I think it's much easier to strip types from .ts file.

[bcakmakoglu]

For simplicity, I wanted to keep the examples in js.
I know it's not that difficult to transform from one to the other, it was a deliberate choice to keep it in JS.

You are always free to tackle this issue and propose a PR to update the docs, adding a JS/TS version for all examples if you want to 😄

[d9k]

It's even can be fully automated. TypeScript examples with Transform example to JS button would be the best solution)