fix: prevent floating panel to dragged outside of window (#290)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
nuxt · Jun 26, 2023 · 6d315cd · 6d315cd
1 parent d21e24f
commit 6d315cd
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/packages/devtools/src/runtime/plugins/view/Main.vue b/packages/devtools/src/runtime/plugins/view/Main.vue
@@ -99,6 +99,10 @@ function snapToPoints(value: number) {
   return value
 }
 
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
 const isVertical = computed(() => state.value.position === 'left' || state.value.position === 'right')
 
 const anchorPos = computed(() => {
@@ -111,23 +115,23 @@ const anchorPos = computed(() => {
   switch (state.value.position) {
     case 'top':
       return {
-        left: Math.min(Math.max(left, halfWidth + PANEL_MARGIN), windowSize.width - halfWidth - PANEL_MARGIN),
+        left: clamp(left, halfWidth + PANEL_MARGIN, windowSize.width - halfWidth - PANEL_MARGIN),
         top: PANEL_MARGIN + halfHeight,
       }
     case 'right':
       return {
         left: windowSize.width - PANEL_MARGIN - halfHeight,
-        top,
+        top: clamp(top, halfWidth + PANEL_MARGIN, windowSize.height - halfWidth - PANEL_MARGIN),
       }
     case 'left':
       return {
         left: PANEL_MARGIN + halfHeight,
-        top,
+        top: clamp(top, halfWidth + PANEL_MARGIN, windowSize.height - halfWidth - PANEL_MARGIN),
       }
     case 'bottom':
     default:
       return {
-        left: Math.min(Math.max(left, halfWidth + PANEL_MARGIN), windowSize.width - halfWidth - PANEL_MARGIN),
+        left: clamp(left, halfWidth + PANEL_MARGIN, windowSize.width - halfWidth - PANEL_MARGIN),
         top: windowSize.height - PANEL_MARGIN - halfHeight,
       }
   }