fix: manage event cleanup with useEventListener in resize composable

Author: moninla

components/Panel.vue

@@ -42,9 +42,9 @@ const {
   isAtMaxWidth,
   cleanup
 } = useResizable({
-  min: 300,
-  max: 800,
-  defaultWidth: 400,
+  min: ui.tempadPanelWidth,
+  max: ui.tempadPanelMaxWidth,
+  defaultWidth: ui.tempadPanelWidth,
   initialWidth: position?.width,
   onPositionChange: (positionDelta) => {
     x.value += positionDelta
@@ -124,9 +124,7 @@ const rightHandleCursor = computed(() => {
   return 'ew-resize'
 })
 
-const resizingCursor = computed(() => {
-  return 'ew-resize'
-})
+const resizingCursor = 'ew-resize'
 </script>
 
 <template>

composables/resize.ts

@@ -1,4 +1,5 @@
 import type { Ref, ComputedRef } from 'vue'
+import { useEventListener } from '@vueuse/core'
 
 export interface UseResizableOptions {
   min?: number
@@ -74,6 +75,8 @@ export function useResizable(options: UseResizableOptions = {}): UseResizableRet
       const pointerId = e.pointerId
       let lastWidth = startWidth
 
+      const eventCleanups: (() => void)[] = []
+
       function onPointerMove(moveEvent: PointerEvent) {
         if (moveEvent.buttons === 0) {
           cleanup(moveEvent)
@@ -101,28 +104,27 @@ export function useResizable(options: UseResizableOptions = {}): UseResizableRet
         isResizing.value = false
 
         target.releasePointerCapture(pointerId)
-        target.removeEventListener('pointermove', onPointerMove)
-        target.removeEventListener('pointerup', cleanup)
-        target.removeEventListener('pointercancel', cleanup)
-        target.removeEventListener('lostpointercapture', cleanup)
+
+        eventCleanups.forEach(fn => fn())
+        eventCleanups.length = 0
 
         activeCleanups.delete(cleanupHandler)
         onResizeEnd?.(width.value)
       }
 
       const cleanupHandler = () => {
-        target.removeEventListener('pointermove', onPointerMove)
-        target.removeEventListener('pointerup', cleanup)
-        target.removeEventListener('pointercancel', cleanup)
-        target.removeEventListener('lostpointercapture', cleanup)
+        eventCleanups.forEach(fn => fn())
+        eventCleanups.length = 0
       }
 
       activeCleanups.add(cleanupHandler)
 
-      target.addEventListener('pointermove', onPointerMove)
-      target.addEventListener('pointerup', cleanup)
-      target.addEventListener('pointercancel', cleanup)
-      target.addEventListener('lostpointercapture', cleanup)
+      eventCleanups.push(
+        useEventListener(target, 'pointermove', onPointerMove),
+        useEventListener(target, 'pointerup', cleanup),
+        useEventListener(target, 'pointercancel', cleanup),
+        useEventListener(target, 'lostpointercapture', cleanup)
+      )
     }
   }
 

ui/figma.ts

@@ -1,5 +1,6 @@
 const NATIVE_PANEL_WIDTH = 241
 const TEMPAD_PANEL_WIDTH = 240
+const TEMPAD_PANEL_MAX_WIDTH = 500
 
 const ui = reactive({
   isUi3: false,
@@ -12,6 +13,10 @@ const ui = reactive({
     return TEMPAD_PANEL_WIDTH
   },
 
+  get tempadPanelMaxWidth() {
+    return TEMPAD_PANEL_MAX_WIDTH
+  },
+
   get topBoundary() {
     return sumLength(this.isUi3 ? 12 : '--toolbar-height', '--editor-banner-height')
   },