feat(draggable): implement draggable functionality for popups in Gmail and Writing Tools

Author: NekoWings

composables/useDraggable.ts

@@ -0,0 +1,152 @@
+import { Ref, ref } from 'vue'
+
+interface DragState {
+  isDragging: boolean
+  startX: number
+  startY: number
+  startLeft: number
+  startTop: number
+}
+
+interface DragOptions {
+  handle?: Ref<HTMLElement | null>
+  onDragStart?: () => void
+  onDragEnd?: () => void
+  onDrag?: (left: number, top: number) => void
+  constrainToViewport?: boolean
+}
+
+export function useDraggable(
+  targetElement: Ref<HTMLElement | null>,
+  options: DragOptions = {},
+) {
+  const {
+    handle,
+    onDragStart,
+    onDragEnd,
+    onDrag,
+    constrainToViewport = true,
+  } = options
+
+  const isDragging = ref(false)
+  const position = ref({ left: 0, top: 0 })
+
+  const dragState: DragState = {
+    isDragging: false,
+    startX: 0,
+    startY: 0,
+    startLeft: 0,
+    startTop: 0,
+  }
+
+  const handleMouseDown = (event: MouseEvent) => {
+    const target = targetElement.value
+    if (!target) return
+
+    // Check if the drag handle is being used
+    const dragHandle = handle?.value || target
+    if (!dragHandle.contains(event.target as Node)) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const rect = target.getBoundingClientRect()
+
+    dragState.isDragging = true
+    dragState.startX = event.clientX
+    dragState.startY = event.clientY
+    dragState.startLeft = rect.left
+    dragState.startTop = rect.top
+
+    isDragging.value = true
+    onDragStart?.()
+
+    // Add global event listeners
+    document.addEventListener('mousemove', handleMouseMove, { passive: false })
+    document.addEventListener('mouseup', handleMouseUp, { passive: false })
+
+    // Prevent text selection while dragging
+    document.body.style.userSelect = 'none'
+  }
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!dragState.isDragging || !targetElement.value) return
+
+    event.preventDefault()
+
+    const deltaX = event.clientX - dragState.startX
+    const deltaY = event.clientY - dragState.startY
+
+    let newLeft = dragState.startLeft + deltaX
+    let newTop = dragState.startTop + deltaY
+
+    // Constrain to viewport if enabled
+    if (constrainToViewport) {
+      const target = targetElement.value
+      const rect = target.getBoundingClientRect()
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+
+      // Prevent dragging outside viewport bounds
+      newLeft = Math.max(0, Math.min(viewportWidth - rect.width, newLeft))
+      newTop = Math.max(0, Math.min(viewportHeight - rect.height, newTop))
+    }
+
+    position.value = { left: newLeft, top: newTop }
+    onDrag?.(newLeft, newTop)
+
+    // Apply the position to the element
+    if (targetElement.value) {
+      targetElement.value.style.left = `${newLeft}px`
+      targetElement.value.style.top = `${newTop}px`
+    }
+  }
+
+  const handleMouseUp = () => {
+    dragState.isDragging = false
+    isDragging.value = false
+
+    // Remove global event listeners
+    document.removeEventListener('mousemove', handleMouseMove)
+    document.removeEventListener('mouseup', handleMouseUp)
+
+    // Restore text selection
+    document.body.style.userSelect = ''
+
+    onDragEnd?.()
+  }
+
+  const initDraggable = () => {
+    const target = targetElement.value
+    if (!target) return
+
+    // Add mouse down listener to the drag handle or target
+    const dragHandle = handle?.value || target
+    dragHandle.addEventListener('mousedown', handleMouseDown, { passive: false })
+
+    // Set cursor style for drag handle
+    dragHandle.style.cursor = 'move'
+
+    return () => {
+      dragHandle.removeEventListener('mousedown', handleMouseDown)
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+      dragHandle.style.cursor = ''
+    }
+  }
+
+  const resetPosition = () => {
+    position.value = { left: 0, top: 0 }
+    if (targetElement.value) {
+      targetElement.value.style.left = '0px'
+      targetElement.value.style.top = '0px'
+    }
+  }
+
+  return {
+    isDragging,
+    position,
+    initDraggable,
+    resetPosition,
+  }
+}

entrypoints/content/components/GmailTools/index.vue

@@ -13,7 +13,7 @@
           <div
             v-if="showReplyCard"
             ref="popupRef"
-            class="popup bg-white fixed rounded-md z-50 transition-[width,top,left] shadow-[0px_8px_16px_0px_#00000014,0px_4px_8px_0px_#00000014,0px_0px_0px_1px_#00000014]"
+            class="popup bg-white fixed rounded-md z-50 shadow-[0px_8px_16px_0px_#00000014,0px_4px_8px_0px_#00000014,0px_0px_0px_1px_#00000014]"
             :class="!popupPos ? 'opacity-0' : ''"
             :style="popupPos ? { top: popupPos.top + 'px', left: popupPos.left + 'px' } : {}"
           >
@@ -26,7 +26,7 @@
           <div
             v-if="showComposeCard"
             ref="composePopupRef"
-            class="popup bg-white fixed rounded-md z-50 transition-[width,top,left] shadow-[0px_8px_16px_0px_#00000014,0px_4px_8px_0px_#00000014,0px_0px_0px_1px_#00000014]"
+            class="popup bg-white fixed rounded-md z-50 shadow-[0px_8px_16px_0px_#00000014,0px_4px_8px_0px_#00000014,0px_0px_0px_1px_#00000014]"
             :class="!composePopupPos ? 'opacity-0' : ''"
             :style="composePopupPos ? { top: composePopupPos.top + 'px', left: composePopupPos.left + 'px' } : {}"
           >
@@ -47,6 +47,7 @@ import { useElementBounding } from '@vueuse/core'
 import { computed, onMounted, ref, shallowRef, watchEffect } from 'vue'
 import { ShadowRoot as ShadowRootComponent } from 'vue-shadow-dom'
 
+import { useDraggable } from '@/composables/useDraggable'
 import { useLogger } from '@/composables/useLogger'
 import { injectStyleSheetToDocument, loadContentScriptStyleSheet } from '@/utils/css'
 import { getUserConfig } from '@/utils/user-config'
@@ -60,11 +61,15 @@ const rootElement = useRootElement()
 const styleSheet = shallowRef<CSSStyleSheet | null>(null)
 const shadowRootRef = ref<InstanceType<typeof ShadowRoot>>()
 const containerRef = ref<HTMLDivElement>()
-const popupRef = ref<HTMLDivElement>()
-const composePopupRef = ref<HTMLDivElement>()
+const popupRef = ref<HTMLDivElement | null>(null)
+const composePopupRef = ref<HTMLDivElement | null>(null)
 const clickedReplyButtonRef = ref<HTMLElement | null>(null) // for navigating current polish button and finding its parent compose dialog
 const clickedComposeButtonRef = ref<HTMLElement | null>(null) // for navigating current compose button and finding its parent compose dialog
 
+// Drag handles for popup title bars
+const replyDragHandleRef = ref<HTMLElement | null>(null)
+const composeDragHandleRef = ref<HTMLElement | null>(null)
+
 const userConfig = await getUserConfig()
 const enabled = userConfig.emailTools.enable.toRef()
 
@@ -82,6 +87,15 @@ const showComposeCard = ref(false)
 const composeButtonElement = ref<HTMLElement | null>(null)
 const composePopupBounding = useElementBounding(composePopupRef)
 
+// Initialize draggable functionality for both popups
+const replyDraggable = useDraggable(popupRef, {
+  handle: replyDragHandleRef,
+})
+
+const composeDraggable = useDraggable(composePopupRef, {
+  handle: composeDragHandleRef,
+})
+
 const popupPos = computed(() => {
   if (!replyButtonElement.value || popupBounding.height.value === 0 || popupBounding.width.value === 0) {
     return null
@@ -140,11 +154,20 @@ const onShowReplyCard = (buttonElement: HTMLElement, clickedButtonElement: HTMLE
   replyButtonElement.value = buttonElement
   clickedReplyButtonRef.value = clickedButtonElement
   showReplyCard.value = true
+
+  // Initialize dragging after popup is shown
+  setTimeout(() => {
+    if (popupRef.value) {
+      replyDragHandleRef.value = popupRef.value.querySelector('.title') as HTMLElement
+      replyDraggable.initDraggable()
+    }
+  }, 0)
 }
 
 const onCloseReplyCard = () => {
   showReplyCard.value = false
   replyButtonElement.value = null
+  replyDraggable.resetPosition()
 }
 
 const onApplyReply = (text: string) => {
@@ -157,11 +180,20 @@ const onShowComposeCard = (buttonElement: HTMLElement, clickedButtonElement: HTM
   composeButtonElement.value = buttonElement
   clickedComposeButtonRef.value = clickedButtonElement
   showComposeCard.value = true
+
+  // Initialize dragging after popup is shown
+  setTimeout(() => {
+    if (composePopupRef.value) {
+      composeDragHandleRef.value = composePopupRef.value.querySelector('.title') as HTMLElement
+      composeDraggable.initDraggable()
+    }
+  }, 0)
 }
 
 const onCloseComposeCard = () => {
   showComposeCard.value = false
   composeButtonElement.value = null
+  composeDraggable.resetPosition()
 }
 
 const onApplyCompose = (data: { subject: string, body: string }) => {

entrypoints/content/components/WritingTools/EditableEntry.vue

@@ -63,7 +63,7 @@
     <div
       v-if="writingToolType"
       ref="popupRef"
-      class="popup bg-white fixed rounded-md z-50 transition-[width,top,left] shadow-[0px_8px_16px_0px_#00000014,0px_4px_8px_0px_#00000014,0px_0px_0px_1px_#00000014]"
+      class="popup bg-white fixed rounded-md z-50 shadow-[0px_8px_16px_0px_#00000014,0px_4px_8px_0px_#00000014,0px_0px_0px_1px_#00000014]"
       :class="!popupPos ? 'opacity-0' : ''"
       :style="popupPos ? { top: popupPos.top + 'px', left: popupPos.left + 'px' } : {}"
     >
@@ -90,6 +90,7 @@ import IconSparkle from '@/assets/icons/writing-tools-sparkle.svg?component'
 import Button from '@/components/ui/Button.vue'
 import Text from '@/components/ui/Text.vue'
 import { useDeferredValue } from '@/composables/useDeferredValue'
+import { useDraggable } from '@/composables/useDraggable'
 import { useRefSnapshot } from '@/composables/useRefSnapshot'
 import { MIN_SELECTION_LENGTH_TO_SHOW_WRITING_TOOLS } from '@/utils/constants'
 import { useI18n } from '@/utils/i18n'
@@ -111,6 +112,13 @@ const toolBarRef = ref<HTMLDivElement | null>(null)
 const popupRef = ref<HTMLDivElement | null>(null)
 const toolBarBounding = useElementBounding(toolBarRef)
 const popupBounding = useElementBounding(popupRef)
+
+// Draggable functionality for toolbar and popup
+const toolBarDraggable = useDraggable(toolBarRef)
+const popupDragHandleRef = ref<HTMLElement | null>(null)
+const popupDraggable = useDraggable(popupRef, {
+  handle: popupDragHandleRef,
+})
 const writingToolType = ref<WritingToolType | null>(null)
 const writingToolSelectedText = ref<string>('')
 const editableElementText = ref('')
@@ -120,6 +128,20 @@ const isShowToolBar = computed(() => {
 })
 const isShowToolBarDeferred = useDeferredValue(isShowToolBar, 200, (v) => !v)
 
+// Initialize toolbar draggable when it becomes visible
+watch(isShowToolBarDeferred, (isVisible) => {
+  if (isVisible) {
+    setTimeout(() => {
+      if (toolBarRef.value) {
+        toolBarDraggable.initDraggable()
+      }
+    }, 0)
+  }
+  else {
+    toolBarDraggable.resetPosition()
+  }
+})
+
 watch(() => props.editableElement, (newEl) => {
   isEditableFocus.value = newEl === document.activeElement || (document.hasFocus() && newEl.contains(document.activeElement))
 }, { immediate: true })
@@ -280,16 +302,26 @@ const updateSelectedText = () => {
 const onAction = async (action?: WritingToolType) => {
   if (!action) {
     writingToolType.value = null
+    popupDraggable.resetPosition()
     return
   }
   snapshotForGeneratePopup.updateSnapshot()
   regenerateSymbol.value += 1 // Increment to trigger re-render
   writingToolType.value = action
+
+  // Initialize popup draggable after it's shown
+  setTimeout(() => {
+    if (popupRef.value) {
+      popupDragHandleRef.value = popupRef.value.querySelector('.title') as HTMLElement
+      popupDraggable.initDraggable()
+    }
+  }, 0)
 }
 
 const onClosePopup = () => {
   writingToolType.value = null
   writingToolSelectedText.value = ''
+  popupDraggable.resetPosition()
 }
 
 const onClickToClosePopup = (ev: Event) => {