From 3c48913090a4e9e6c9dee55e2df356c6d2bbc0af Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 1 Apr 2022 15:24:07 +0200
Subject: [PATCH] feat(docs): responsive pos of elements

---
 docs/components/home/Additional.vue |  93 +++++++++++------------
 docs/components/home/Home.vue       |  76 ++++++++++++++++---
 docs/components/home/Nested.vue     |  56 +++++++-------
 docs/components/home/RGB.vue        | 114 +++++++++++++++-------------
 4 files changed, 199 insertions(+), 140 deletions(-)

diff --git a/docs/components/home/Additional.vue b/docs/components/home/Additional.vue
index 32b02eaa..32474a01 100644
--- a/docs/components/home/Additional.vue
+++ b/docs/components/home/Additional.vue
@@ -1,96 +1,94 @@
 <script lang="ts" setup>
-import { ref } from "vue";
-import { Position, Elements, VueFlow, Controls, MiniMap, Background, useVueFlow } from "@braks/vue-flow";
+import { ref } from 'vue'
+import { Position, Elements, VueFlow, Controls, MiniMap, Background, useVueFlow } from '@braks/vue-flow'
 
 const elements = ref<Elements>([
   {
-    id: "1",
-    style: { width: "75px" },
-    type: "input",
+    id: '1',
+    style: { width: '75px' },
+    type: 'input',
     sourcePosition: Position.Right,
-    label: "input",
-    position: { x: 25, y: 120 }
+    label: 'input',
+    position: { x: 25, y: 120 },
   },
   {
-    id: "2",
-    label: "A",
+    id: '2',
+    label: 'A',
     targetPosition: Position.Left,
     sourcePosition: Position.Right,
     position: { x: 150, y: 25 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
   {
-    id: "3",
-    label: "B",
+    id: '3',
+    label: 'B',
     targetPosition: Position.Left,
     sourcePosition: Position.Right,
     position: { x: 250, y: 25 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
   {
-    id: "4",
-    label: "C",
+    id: '4',
+    label: 'C',
     targetPosition: Position.Left,
     sourcePosition: Position.Right,
     position: { x: 350, y: 25 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
   {
-    id: "5",
-    label: "D",
+    id: '5',
+    label: 'D',
     targetPosition: Position.Left,
     sourcePosition: Position.Right,
     position: { x: 150, y: 220 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
   {
-    id: "6",
-    label: "E",
+    id: '6',
+    label: 'E',
     targetPosition: Position.Left,
     sourcePosition: Position.Right,
     position: { x: 250, y: 220 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
   {
-    id: "7",
-    label: "F",
+    id: '7',
+    label: 'F',
     targetPosition: Position.Left,
     sourcePosition: Position.Right,
     position: { x: 350, y: 220 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
   {
-    id: "8",
-    type: "output",
-    label: "Output",
+    id: '8',
+    type: 'output',
+    label: 'Output',
     targetPosition: Position.Left,
     position: { x: 500, y: 120 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
-  { id: "e1-2", type: "step", source: "1", target: "2" },
-  { id: "e2-3", type: "step", source: "2", target: "3" },
-  { id: "e3-4", type: "step", source: "3", target: "4" },
-  { id: "e4-8", type: "step", source: "4", target: "8" },
-  { id: "e1-5", type: "step", source: "1", target: "5", animated: true },
-  { id: "e5-6", type: "step", source: "5", target: "6", animated: true },
-  { id: "e6-7", type: "step", source: "6", target: "7", animated: true },
-  { id: "e6-8", type: "step", source: "7", target: "8", animated: true }
-]);
+  { id: 'e1-2', type: 'step', source: '1', target: '2' },
+  { id: 'e2-3', type: 'step', source: '2', target: '3' },
+  { id: 'e3-4', type: 'step', source: '3', target: '4' },
+  { id: 'e4-8', type: 'step', source: '4', target: '8' },
+  { id: 'e1-5', type: 'step', source: '1', target: '5', animated: true },
+  { id: 'e5-6', type: 'step', source: '5', target: '6', animated: true },
+  { id: 'e6-7', type: 'step', source: '6', target: '7', animated: true },
+  { id: 'e6-8', type: 'step', source: '7', target: '8', animated: true },
+])
 
-const emit = defineEmits(["pane"]);
+const emit = defineEmits(['pane'])
 
 const { onPaneReady } = useVueFlow({
   modelValue: elements.value,
   zoomOnScroll: false,
   panOnDrag: false,
-});
+})
 
 onPaneReady((i) => emit('pane', i))
 </script>
 <template>
-  <div
-    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden border-2"
-  >
+  <div class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden border-2">
     <VueFlow>
       <Controls :show-interactive="false" />
       <MiniMap mask-color="rgba(16, 185, 129, 0.5)" class="transform scale-60 origin-bottom-right opacity-75" />
@@ -101,13 +99,10 @@ onPaneReady((i) => emit('pane', i))
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Additional Components</h1>
       <p>
-        Vue Flow includes a MiniMap, Controls and Background, as well as a ton of utilities and a supercharged
-        composable to control the internal state
-        outside the Vue Flow component.
+        Vue Flow includes a MiniMap, Controls and Background, as well as a ton of utilities and a supercharged composable to
+        control the internal state outside the Vue Flow component.
       </p>
-      <a class="button max-w-max" href="/docs">
-        Documentation
-      </a>
+      <a class="button max-w-max" href="/docs"> Documentation </a>
     </div>
   </div>
 </template>
diff --git a/docs/components/home/Home.vue b/docs/components/home/Home.vue
index 5b971989..219d1db4 100644
--- a/docs/components/home/Home.vue
+++ b/docs/components/home/Home.vue
@@ -5,7 +5,7 @@ import BoxNode from './nodes/Box.vue'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const { dimensions, instance, onPaneReady, getNodes, getNode } = useVueFlow({
+const { dimensions, instance, onPaneReady, getNodes, getNode, getEdge, updateEdge, edges } = useVueFlow({
   nodes: [
     { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
     { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
@@ -37,19 +37,77 @@ const { dimensions, instance, onPaneReady, getNodes, getNode } = useVueFlow({
   zoomOnScroll: false,
 })
 
+const init = ref(false)
+const edgeId = ref('eintro-documentation')
 onPaneReady(({ fitView }) => {
   fitView({
     nodes: ['intro', 'examples', 'documentation'],
     duration: 1500,
   })
 
-  setTimeout(() => {
-    watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']], () =>
-      setTimeout(() => {
-        instance.value?.fitView()
-      }, 5),
-    )
-  }, 1500)
+  watch(
+    [breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']],
+    () => {
+      if (breakpoints.isSmaller('md')) {
+        nextTick(() => {
+          getNodes.value.forEach((node) => {
+            switch (node.id) {
+              case 'intro':
+                node.position = { x: 0, y: -50 }
+                break
+              case 'examples':
+                node.position = { x: getNode.value('intro')!.dimensions.width / 2 - node.dimensions.width / 2, y: 300 }
+                break
+              case 'documentation':
+                node.position = { x: getNode.value('intro')!.dimensions.width / 2 - node.dimensions.width / 2, y: 500 }
+                break
+            }
+          })
+
+          const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
+            source: 'examples',
+            target: 'documentation',
+            sourceHandle: null,
+            targetHandle: null,
+          })
+          if (newEdge) edgeId.value = newEdge.id
+        })
+      } else {
+        nextTick(() => {
+          getNodes.value.forEach((node) => {
+            switch (node.id) {
+              case 'intro':
+                node.position = { x: 0, y: 0 }
+                break
+              case 'examples':
+                node.position = { x: -node.dimensions.width / 2, y: 400 }
+                break
+              case 'documentation':
+                node.position = { x: getNode.value('intro')!.dimensions.width / 2 + node.dimensions.width / 2, y: 400 }
+                break
+            }
+          })
+
+          const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
+            source: 'intro',
+            target: 'documentation',
+            sourceHandle: null,
+            targetHandle: null,
+          })
+          if (newEdge) edgeId.value = newEdge.id
+        })
+      }
+
+      setTimeout(
+        () => {
+          if (!init.value) init.value = true
+          instance.value?.fitView()
+        },
+        init.value ? 5 : 1505,
+      )
+    },
+    { immediate: true },
+  )
 })
 </script>
 <template>
@@ -73,14 +131,12 @@ onPaneReady(({ fitView }) => {
             <a class="link group bg-orange-500" href="/docs"> Read The Documentation </a>
           </div>
           <Handle type="target" :position="Position.Top" />
-          <Handle type="source" :position="Position.Bottom" />
         </template>
         <template v-else-if="props.id === 'examples'">
           <div class="flex">
             <a class="link group bg-purple-500" href="/examples"> Check The Examples </a>
           </div>
           <Handle type="target" :position="Position.Top" />
-          <Handle type="source" :position="Position.Bottom" />
         </template>
       </template>
     </VueFlow>
diff --git a/docs/components/home/Nested.vue b/docs/components/home/Nested.vue
index 6d12f68a..aca2fab7 100644
--- a/docs/components/home/Nested.vue
+++ b/docs/components/home/Nested.vue
@@ -1,42 +1,47 @@
 <script lang="ts" setup>
-import { ConnectionMode, useVueFlow, VueFlow, Background, Controls } from "@braks/vue-flow";
+import { ConnectionMode, useVueFlow, VueFlow, Background, Controls } from '@braks/vue-flow'
 
 const emit = defineEmits(['pane'])
-const nodeClasses = ["!normal-case font-semibold !text-white", "!border-1", "shadow-md"].join(" ");
-const childClasses = nodeClasses + " !bg-green-500/70 !border-white";
+
+const nodeClasses = ['!normal-case font-semibold !text-white', '!border-1', 'shadow-md'].join(' ')
+const childClasses = `${nodeClasses} !bg-green-500/70 !border-white`
 
 const { onPaneReady } = useVueFlow({
   fitViewOnInit: true,
   connectionMode: ConnectionMode.Loose,
   zoomOnScroll: false,
   preventScrolling: false,
-  translateExtent: [[-500, -100], [600, 500]],
+  panOnDrag: false,
+  translateExtent: [
+    [-500, -100],
+    [600, 500],
+  ],
   nodes: [
-    { id: "1", type: "input", label: "Outer Node", position: { x: 0, y: 0 }, class: childClasses },
+    { id: '1', type: 'input', label: 'Outer Node', position: { x: 0, y: 0 }, class: childClasses },
     {
-      id: "2",
-      label: "Parent Node",
+      id: '2',
+      label: 'Parent Node',
       position: { x: -125, y: 100 },
-      class: nodeClasses + " !bg-green-500/30 !border-green-500",
-      style: { width: "400px", height: "160px" }
+      class: `${nodeClasses} !bg-green-500/30 !border-green-500`,
+      style: { width: '400px', height: '160px' },
     },
     {
-      id: "2a",
-      label: "Child Node",
+      id: '2a',
+      label: 'Child Node',
       position: { x: 17, y: 30 },
-      parentNode: "2",
+      parentNode: '2',
       extent: 'parent',
-      class: childClasses
+      class: childClasses,
     },
-    { id: "2b", label: "Child Node", position: { x: 225, y: 30 }, parentNode: "2", extent: 'parent', class: childClasses },
-    { id: "2c", label: "Child Node", position: { x: 125, y: 100 }, parentNode: "2", extent: 'parent', class: childClasses },
-    { id: "3", type: "output", label: "Outer Node", position: { x: 0, y: 300 }, class: childClasses },
+    { id: '2b', label: 'Child Node', position: { x: 225, y: 30 }, parentNode: '2', extent: 'parent', class: childClasses },
+    { id: '2c', label: 'Child Node', position: { x: 125, y: 100 }, parentNode: '2', extent: 'parent', class: childClasses },
+    { id: '3', type: 'output', label: 'Outer Node', position: { x: 0, y: 300 }, class: childClasses },
   ],
   edges: [
-    { id: "e1-2a", source: "1", target: "2a", type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } },
-    { id: "e2-3", source: "2", target: "3", type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } }
-  ]
-});
+    { id: 'e1-2a', source: '1', target: '2a', type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } },
+    { id: 'e2-3', source: '2', target: '3', type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } },
+  ],
+})
 
 onPaneReady((i) => emit('pane', i))
 </script>
@@ -44,16 +49,13 @@ onPaneReady((i) => emit('pane', i))
   <div class="md:max-w-1/3 flex flex-col justify-center <md:pt-12">
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Nested- & Subflows</h1>
-      <p>
-        Vue Flow comes with built-in support for nested nodes and nested flows.
-      </p>
-      <a class="button max-w-max" href="/docs">
-        Documentation
-      </a>
+      <p>Vue Flow comes with built-in support for nested nodes and nested flows.</p>
+      <a class="button max-w-max" href="/docs"> Documentation </a>
     </div>
   </div>
   <div
-    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-green-500 overflow-hidden">
+    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-green-500 overflow-hidden"
+  >
     <VueFlow class="nested">
       <Controls class="md:!left-auto md:!right-[10px]" />
       <Background pattern-color="#aaa" class="!bg-gray-800" :gap="18" />
diff --git a/docs/components/home/RGB.vue b/docs/components/home/RGB.vue
index cc5fb3b2..c045b6f3 100644
--- a/docs/components/home/RGB.vue
+++ b/docs/components/home/RGB.vue
@@ -1,19 +1,11 @@
 <script lang="ts" setup>
-import { ref } from "vue";
-import {
-  BackgroundVariant,
-  VueFlow,
-  Background,
-  Controls,
-  MiniMap,
-  GraphNode,
-  MiniMapNodeFunc,
-  useVueFlow
-} from "@braks/vue-flow";
-import { templateRef } from "@vueuse/core";
-import CustomEdge from "./edges/Custom.vue";
-import RGBNode from "./nodes/Input.vue";
-import RGBOutputNode from "./nodes/Output.vue";
+import { BackgroundVariant, VueFlow, Background, Controls, MiniMap, MiniMapNodeFunc, useVueFlow } from '@braks/vue-flow'
+import { breakpointsTailwind } from '@vueuse/core'
+import CustomEdge from './edges/Custom.vue'
+import RGBNode from './nodes/Input.vue'
+import RGBOutputNode from './nodes/Output.vue'
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
 
 type Colors = {
   red: number
@@ -21,59 +13,73 @@ type Colors = {
   blue: number
 }
 
-const emit = defineEmits(["pane"]);
+const emit = defineEmits(['pane'])
 
-const { id, onPaneReady, store } = useVueFlow({
-  id: "rgb-flow",
+const { onPaneReady, getNode } = useVueFlow({
+  id: 'rgb-flow',
   nodes: [
-    { id: "1", type: "rgb", data: { color: "g" }, position: { x: -25, y: 0 } },
-    { id: "2", type: "rgb", data: { color: "r" }, position: { x: 50, y: -110 } },
-    { id: "3", type: "rgb", data: { color: "b" }, position: { x: 0, y: 110 } },
-    { id: "4", type: "rgb-output", label: "RGB", position: { x: 400, y: -25 } }
+    { id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 0 } },
+    { id: '2', type: 'rgb', data: { color: 'r' }, position: { x: 50, y: -110 } },
+    { id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 110 } },
+    { id: '4', type: 'rgb-output', label: 'RGB', position: { x: 400, y: -25 } },
   ],
   edges: [
-    { id: "e1-4", type: "rgb-line", data: { color: "green" }, source: "1", target: "4", animated: true },
-    { id: "e2-4", type: "rgb-line", data: { color: "red" }, source: "2", target: "4", animated: true },
-    { id: "e3-4", type: "rgb-line", data: { color: "blue" }, source: "3", target: "4", animated: true }
+    { id: 'e1-4', type: 'rgb-line', data: { color: 'green' }, source: '1', target: '4', animated: true },
+    { id: 'e2-4', type: 'rgb-line', data: { color: 'red' }, source: '2', target: '4', animated: true },
+    { id: 'e3-4', type: 'rgb-line', data: { color: 'blue' }, source: '3', target: '4', animated: true },
   ],
   zoomOnScroll: false,
-  nodeExtent: [[-50, -150], [500, 300]]
-});
+  nodeExtent: [
+    [-50, -150],
+    [500, 300],
+  ],
+})
 
-onPaneReady((i) => emit("pane", i));
+onPaneReady((i) => emit('pane', i))
 
-const el = templateRef<HTMLDivElement>("el", null);
+const el = templateRef<HTMLDivElement>('el', null)
 
 const color = ref<Colors>({
   red: 222,
   green: 45,
-  blue: 140
-});
+  blue: 140,
+})
 
-const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val));
+watch(
+  [breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']],
+  () => {
+    if (breakpoints.isSmaller('md')) {
+      getNode.value('4')!.position = { x: 300, y: -25 }
+    }
+  },
+  { immediate: true },
+)
 
-const nodeColor: MiniMapNodeFunc = (node: GraphNode) => {
+const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
+
+const nodeColor: MiniMapNodeFunc = (node) => {
   switch (node.id) {
-    case "1":
-      return "green";
-    case "2":
-      return "red";
-    case "3":
-      return "blue";
-    case "4":
-      return `rgb(${color.value.red}, ${color.value.green}, ${color.value.blue})`;
+    case '1':
+      return 'green'
+    case '2':
+      return 'red'
+    case '3':
+      return 'blue'
+    case '4':
+      return `rgb(${color.value.red}, ${color.value.green}, ${color.value.blue})`
   }
-};
+  return ''
+}
 </script>
 <template>
   <div
     ref="el"
     class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800 border-2"
-    :style="{ borderColor: `rgb(${color.red}, ${color.green}, ${color.blue})` }">
+    :style="{ borderColor: `rgb(${color.red}, ${color.green}, ${color.blue})` }"
+  >
     <VueFlow class="relative font-mono">
       <template #edge-rgb-line="rgbLineProps">
-        <CustomEdge
-          v-bind="{ ...rgbLineProps, data: { text: color[rgbLineProps.data?.color], ...rgbLineProps.data } }" />
+        <CustomEdge v-bind="{ ...rgbLineProps, data: { text: color[rgbLineProps.data?.color], ...rgbLineProps.data } }" />
       </template>
       <template #node-rgb="rgbProps">
         <RGBNode v-bind="rgbProps" :amount="color" @change="onChange" />
@@ -82,21 +88,21 @@ const nodeColor: MiniMapNodeFunc = (node: GraphNode) => {
         <RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
       </template>
       <Controls class="transform scale-75 md:scale-100 origin-bottom-left" />
-      <Background :variant="BackgroundVariant.Lines" :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
-                  :gap="48"
-                  :size="1" />
-      <MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right"
-               :node-color="nodeColor" />
+      <Background
+        :variant="BackgroundVariant.Lines"
+        :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
+        :gap="48"
+        :size="1"
+      />
+      <MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
     </VueFlow>
   </div>
   <div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Customizable</h1>
       <p>
-        You can create your own node and edge types or just pass a custom style.
-        Implement custom UIs
-        inside your nodes
-        and add functionality to your edges.
+        You can create your own node and edge types or just pass a custom style. Implement custom UIs inside your nodes and add
+        functionality to your edges.
       </p>
       <a class="button max-w-max" href="/docs">Documentation</a>
     </div>