docs: add dagre layout example

Author: bcakmakoglu

docs/components/DocsRepl.vue

@@ -5,7 +5,7 @@ import CodeMirror from '@vue/repl/codemirror-editor'
 import { useVueFlow } from '@vue-flow/core'
 import { exampleImports } from '../examples'
 
-const props = defineProps<{ example: keyof typeof exampleImports; mainFile?: string; dependencies?: Record<string, string> }>()
+const props = defineProps<{ example: keyof typeof exampleImports; mainFile?: string }>()
 
 const { vueFlowVersion } = useVueFlow()
 

docs/components/Repl.vue

@@ -4,7 +4,7 @@ import { Suspense } from 'vue'
 const DocsRepl = defineAsyncComponent(() => import('./DocsRepl.vue'))
 
 export default defineComponent({
-  props: ['example', 'examplesImports', 'dependencies'],
+  props: ['example', 'mainFile'],
   setup(props) {
     return () => {
       if (typeof navigator === 'undefined') {

docs/examples/custom-node/App.vue

@@ -1,15 +1,11 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, toRef } from 'vue'
 import { MiniMap } from '@vue-flow/minimap'
-import { Position, VueFlow, useNodesData, useVueFlow } from '@vue-flow/core'
+import { Position, VueFlow } from '@vue-flow/core'
 import ColorSelectorNode from './ColorSelectorNode.vue'
 import OutputNode from './OutputNode.vue'
 import { presets } from './presets.js'
 
-useVueFlow()
-
-const nodeData = useNodesData('1')
-
 const nodes = ref([
   {
     id: '1',
@@ -25,6 +21,8 @@ const nodes = ref([
   },
 ])
 
+const colorSelectorData = toRef(() => nodes.value[0].data)
+
 const edges = ref([
   {
     id: 'e1a-2',
@@ -33,7 +31,7 @@ const edges = ref([
     target: '2',
     animated: true,
     style: () => ({
-      stroke: nodeData.value?.color,
+      stroke: colorSelectorData.value?.color,
       filter: 'invert(100%)',
     }),
   },
@@ -55,7 +53,7 @@ function nodeStroke(n) {
 
 function nodeColor(n) {
   if (n.type === 'color-selector') {
-    return nodeData.value?.color
+    return colorSelectorData.value?.color
   }
 
   return '#fff'
@@ -64,20 +62,20 @@ function nodeColor(n) {
 
 <template>
   <VueFlow
-    :nodes="nodes"
+    v-model:nodes="nodes"
     :edges="edges"
     class="custom-node-flow"
-    :class="[nodeData?.isGradient ? 'animated-bg-gradient' : '']"
-    :style="{ backgroundColor: nodeData?.color }"
+    :class="[colorSelectorData?.isGradient ? 'animated-bg-gradient' : '']"
+    :style="{ backgroundColor: colorSelectorData?.color }"
     :default-viewport="{ zoom: 1.5 }"
     fit-view-on-init
   >
-    <template #node-color-selector="{ data }">
-      <ColorSelectorNode :data="data" />
+    <template #node-color-selector="{ id }">
+      <ColorSelectorNode :id="id" />
     </template>
 
-    <template #node-output="{ data }">
-      <OutputNode :data="data" />
+    <template #node-output>
+      <OutputNode />
     </template>
 
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />

docs/examples/custom-node/ColorSelectorNode.vue

@@ -1,24 +1,22 @@
 <script setup>
-import { Handle, Position, useNodeId, useVueFlow } from '@vue-flow/core'
+import { Handle, Position, useVueFlow } from '@vue-flow/core'
 import { colors } from './presets.js'
 
-defineProps({
-  data: {
-    type: Object,
+const props = defineProps({
+  id: {
+    type: String,
     required: true,
   },
 })
 
-const nodeId = useNodeId()
-
 const { updateNodeData } = useVueFlow()
 
 function onSelect(color) {
-  updateNodeData(nodeId, { color }, { replace: true })
+  updateNodeData(props.id, { color, isGradient: false })
 }
 
 function onGradient() {
-  updateNodeData(nodeId, { isGradient: true }, { replace: true })
+  updateNodeData(props.id, { isGradient: true })
 }
 </script>
 

docs/examples/custom-node/OutputNode.vue

@@ -1,13 +1,6 @@
 <script setup>
 import { Handle, Position, useHandleConnections, useNodesData } from '@vue-flow/core'
 
-defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-})
-
 const connections = useHandleConnections({
   type: 'target',
 })

docs/examples/index.ts

@@ -18,6 +18,7 @@ import { IntersectionApp, IntersectionCSS } from './intersection'
 import { SnapToHandleApp, SnappableConnectionLine } from './connection-radius'
 import { NodeResizerApp, ResizableNode } from './node-resizer'
 import { ToolbarApp, ToolbarNode } from './node-toolbar'
+import { LayoutApp, LayoutElements } from './layout'
 
 export const exampleImports = {
   basic: {
@@ -123,4 +124,11 @@ export const exampleImports = {
     'App.vue': ToolbarApp,
     'ToolbarNode.vue': ToolbarNode,
   },
+  layout: {
+    'App.vue': LayoutApp,
+    'initial-elements.js': LayoutElements,
+    'additionalImports': {
+      dagre: 'https://cdn.skypack.dev/pin/[email protected]/mode=imports,min/optimized/dagre.js',
+    },
+  },
 }

docs/examples/layout/App.vue

@@ -0,0 +1,70 @@
+<script setup>
+import dagre from 'dagre'
+import { nextTick, ref } from 'vue'
+import { Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+
+import { initialEdges, initialNodes } from './initial-elements.js'
+
+const nodes = ref(initialNodes)
+
+const edges = ref(initialEdges)
+
+const { findNode, fitView } = useVueFlow()
+
+function handleLayout(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()
+
+  dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+  const isHorizontal = direction === 'LR'
+  dagreGraph.setGraph({ rankdir: direction })
+
+  for (const node of nodes.value) {
+    // 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.value) {
+    dagreGraph.setEdge(edge.source, edge.target)
+  }
+
+  dagre.layout(dagreGraph)
+
+  // set nodes with updated positions
+  nodes.value = nodes.value.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 },
+    }
+  })
+
+  nextTick(() => {
+    fitView()
+  })
+}
+</script>
+
+<template>
+  <div class="layoutflow">
+    <VueFlow :nodes="nodes" :edges="edges" @nodes-initialized="handleLayout('TB')">
+      <Panel style="display: flex; gap: 1rem" position="top-right">
+        <button @click="handleLayout('TB')">vertical layout</button>
+        <button @click="handleLayout('LR')">horizontal layout</button>
+      </Panel>
+    </VueFlow>
+  </div>
+</template>
+
+<style>
+.layoutflow {
+  height: 100%;
+  width: 100%;
+}
+</style>

docs/examples/layout/index.ts

@@ -0,0 +1,2 @@
+export { default as LayoutApp } from './App.vue?raw'
+export { default as LayoutElements } from './initial-elements.js?raw'

docs/examples/layout/initial-elements.js

@@ -0,0 +1,70 @@
+const position = { x: 0, y: 0 }
+
+export const initialNodes = [
+  {
+    id: '1',
+    type: 'input',
+    label: 'input',
+    position,
+  },
+  {
+    id: '2',
+    label: 'node 2',
+    position,
+  },
+  {
+    id: '2a',
+    label: 'node 2a',
+    position,
+  },
+  {
+    id: '2b',
+    label: 'node 2b',
+    position,
+  },
+  {
+    id: '2c',
+    label: 'node 2c',
+    position,
+  },
+  {
+    id: '2d',
+    label: 'node 2d',
+    position,
+  },
+  {
+    id: '3',
+    label: 'node 3',
+    position,
+  },
+  {
+    id: '4',
+    label: 'node 4',
+    position,
+  },
+  {
+    id: '5',
+    label: 'node 5',
+    position,
+  },
+  {
+    id: '6',
+    type: 'output',
+    label: 'output',
+    position,
+  },
+]
+
+export const initialEdges = [
+  { id: '7', type: 'output', label: 'output', position: { x: 400, y: 450 } },
+  { id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
+  { id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
+  { id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },
+  { id: 'e22b', source: '2', target: '2b', type: 'smoothstep', animated: true },
+  { id: 'e22c', source: '2', target: '2c', type: 'smoothstep', animated: true },
+  { id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
+
+  { id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
+  { id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
+  { id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
+]

docs/examples/stress/App.vue

@@ -13,23 +13,19 @@ const edges = ref(initialEdges)
 
 const { dimensions, fitView } = useVueFlow()
 
-function toggleClass() {
-  nodes.value = nodes.value.map((node) => ({ ...node, class: node.class === 'light' ? 'dark' : 'light' }))
-}
-
 function updatePos() {
   nodes.value = nodes.value.map((node) => {
     return {
       ...node,
       position: {
-        x: Math.random() * 10 * dimensions.value.width,
-        y: Math.random() * 10 * dimensions.value.height,
+        x: Math.random() * dimensions.value.width,
+        y: Math.random() * dimensions.value.height,
       },
     }
   })
 
   nextTick(() => {
-    fitView({ duration: 1000, padding: 0.5 })
+    fitView({ padding: 0.5 })
   })
 }
 </script>
@@ -42,7 +38,6 @@ function updatePos() {
 
     <Panel position="top-right">
       <button style="margin-right: 5px" @click="updatePos">update positions</button>
-      <button @click="toggleClass">toggle class</button>
     </Panel>
   </VueFlow>
 </template>