From 488b632e2e88d7e5edeeeac175f34385ca42d406 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 26 May 2022 21:18:56 +0200
Subject: [PATCH] docs: add horizontal layout example

---
 docs/components/examples/horizontal/App.vue   | 27 +++++++++++++
 docs/components/examples/horizontal/index.ts  |  2 +
 .../examples/horizontal/initial-elements.js   | 38 +++++++++++++++++++
 docs/components/examples/index.ts             |  5 +++
 docs/src/.vuepress/config.ts                  |  1 +
 docs/src/examples/horizontal.md               | 19 ++++++++++
 6 files changed, 92 insertions(+)
 create mode 100644 docs/components/examples/horizontal/App.vue
 create mode 100644 docs/components/examples/horizontal/index.ts
 create mode 100644 docs/components/examples/horizontal/initial-elements.js
 create mode 100644 docs/src/examples/horizontal.md

diff --git a/docs/components/examples/horizontal/App.vue b/docs/components/examples/horizontal/App.vue
new file mode 100644
index 00000000..8eebf67f
--- /dev/null
+++ b/docs/components/examples/horizontal/App.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { ref } from 'vue'
+import { initialElements } from './initial-elements.js'
+
+const { onConnect, addEdges } = useVueFlow()
+
+const elements = ref(initialElements)
+
+onConnect((params) => addEdges([params]))
+</script>
+
+<template>
+  <VueFlow
+    v-model="elements"
+    class="basicflow"
+    :default-edge-options="{ type: 'smoothstep' }"
+    :default-zoom="1.5"
+    :min-zoom="0.2"
+    :max-zoom="4"
+    :fit-view-on-init="true"
+  >
+    <Background pattern-color="#aaa" gap="8" />
+    <MiniMap />
+    <Controls />
+  </VueFlow>
+</template>
diff --git a/docs/components/examples/horizontal/index.ts b/docs/components/examples/horizontal/index.ts
new file mode 100644
index 00000000..a40f7c4c
--- /dev/null
+++ b/docs/components/examples/horizontal/index.ts
@@ -0,0 +1,2 @@
+export { default as HorizontalApp } from './App.vue?raw'
+export { default as HorizontalElements } from './initial-elements.js?raw'
diff --git a/docs/components/examples/horizontal/initial-elements.js b/docs/components/examples/horizontal/initial-elements.js
new file mode 100644
index 00000000..174e97b4
--- /dev/null
+++ b/docs/components/examples/horizontal/initial-elements.js
@@ -0,0 +1,38 @@
+import { MarkerType, Position } from '@braks/vue-flow'
+
+export const initialElements = [
+  {
+    id: '1',
+    type: 'input',
+    label: 'Node 1',
+    position: { x: 0, y: 50 },
+    sourcePosition: Position.Right,
+  },
+  {
+    id: '2',
+    type: 'output',
+    label: 'Node 2',
+    position: { x: 250, y: 0 },
+    targetPosition: Position.Left,
+  },
+  { id: '3', label: 'Node 3', position: { x: 250, y: 100 }, sourcePosition: Position.Right, targetPosition: Position.Left },
+  { id: '4', label: 'Node 4', position: { x: 500, y: 150 }, sourcePosition: Position.Right, targetPosition: Position.Left },
+  {
+    id: '5',
+    type: 'output',
+    label: 'Node 5',
+    position: { x: 750, y: 50 },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+  },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3', markerEnd: MarkerType.Arrow },
+  {
+    id: 'e4-5',
+    source: '4',
+    target: '5',
+    style: { stroke: 'orange' },
+    labelBgStyle: { fill: 'orange' },
+  },
+  { id: 'e3-4', source: '3', target: '4' },
+]
diff --git a/docs/components/examples/index.ts b/docs/components/examples/index.ts
index 93f7834d..3fb50965 100644
--- a/docs/components/examples/index.ts
+++ b/docs/components/examples/index.ts
@@ -13,6 +13,7 @@ import { EmptyApp } from './empty'
 import { HiddenApp } from './hidden'
 import { InteractionApp, InteractionCSS, InteractionControls } from './interaction'
 import { MultiApp, MultiCSS, MultiFlow } from './multi'
+import { HorizontalApp, HorizontalElements } from './horizontal'
 
 export const exampleImports = {
   basic: {
@@ -84,4 +85,8 @@ export const exampleImports = {
     'Flow.vue': MultiFlow,
     'style.css': MultiCSS,
   },
+  horizontal: {
+    'App.vue': HorizontalApp,
+    'initial-elements.js': HorizontalElements,
+  },
 }
diff --git a/docs/src/.vuepress/config.ts b/docs/src/.vuepress/config.ts
index 5bfc4234..9fe172ed 100644
--- a/docs/src/.vuepress/config.ts
+++ b/docs/src/.vuepress/config.ts
@@ -114,6 +114,7 @@ export default defineUserConfig<DefaultThemeOptions>({
             '/examples/hidden',
             '/examples/interaction',
             '/examples/multi',
+            '/examples/horizontal',
             '/examples/pinia',
             '/examples/stress',
           ],
diff --git a/docs/src/examples/horizontal.md b/docs/src/examples/horizontal.md
new file mode 100644
index 00000000..30f329ba
--- /dev/null
+++ b/docs/src/examples/horizontal.md
@@ -0,0 +1,19 @@
+---
+pageClass: examples
+
+---
+
+# Horizontal Layout
+
+Vue Flow doesn't require you to use vertical layouts.
+You can use horizontal layouts with the default node types as well.
+
+You can define where source or target handle positions are with the `sourcePosition` or `targetPosition` properties of nodes.
+
+<div class="mt-6">
+  <client-only>
+    <Suspense>
+      <Repl example="horizontal"></Repl>
+    </Suspense>
+  </client-only>
+</div>