From 59ac64564a61796a7ec0a8a0418f173847c49fb7 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 1 Apr 2022 15:41:34 +0200
Subject: [PATCH] feat(docs): disable pan on mobile

---
 docs/components/home/Nested.vue | 14 ++++++++++++--
 docs/components/home/RGB.vue    |  6 ++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/docs/components/home/Nested.vue b/docs/components/home/Nested.vue
index aca2fab7..89525703 100644
--- a/docs/components/home/Nested.vue
+++ b/docs/components/home/Nested.vue
@@ -1,17 +1,19 @@
 <script lang="ts" setup>
 import { ConnectionMode, useVueFlow, VueFlow, Background, Controls } from '@braks/vue-flow'
+import { breakpointsTailwind } from '@vueuse/core'
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
 
 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 { onPaneReady } = useVueFlow({
+const { onPaneReady, panOnDrag } = useVueFlow({
   fitViewOnInit: true,
   connectionMode: ConnectionMode.Loose,
   zoomOnScroll: false,
   preventScrolling: false,
-  panOnDrag: false,
   translateExtent: [
     [-500, -100],
     [600, 500],
@@ -43,6 +45,14 @@ const { onPaneReady } = useVueFlow({
   ],
 })
 
+watch(
+  [breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']],
+  () => {
+    panOnDrag.value = !breakpoints.isSmaller('md')
+  },
+  { immediate: true },
+)
+
 onPaneReady((i) => emit('pane', i))
 </script>
 <template>
diff --git a/docs/components/home/RGB.vue b/docs/components/home/RGB.vue
index c045b6f3..bd5fbe05 100644
--- a/docs/components/home/RGB.vue
+++ b/docs/components/home/RGB.vue
@@ -15,7 +15,7 @@ type Colors = {
 
 const emit = defineEmits(['pane'])
 
-const { onPaneReady, getNode } = useVueFlow({
+const { onPaneReady, getNode, panOnDrag } = useVueFlow({
   id: 'rgb-flow',
   nodes: [
     { id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 0 } },
@@ -48,9 +48,11 @@ const color = ref<Colors>({
 watch(
   [breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']],
   () => {
-    if (breakpoints.isSmaller('md')) {
+    const mobile = breakpoints.isSmaller('md')
+    if (mobile) {
       getNode.value('4')!.position = { x: 300, y: -25 }
     }
+    panOnDrag.value = !mobile
   },
   { immediate: true },
 )