fix: improve measure mode

Author: Justineo

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Added MCP server support to let agents/IDEs pull code, structure, and screenshots from your current Figma selection.
 - The inspect panel can be resized horizontally by dragging either its left or right edge. (Suggested and implemented by @molinla at [#34](https://github.com/ecomfe/tempad-dev/pull/34))
+- Measure mode won't trigger node duplication anymore when dragging a node in design mode.
 
 ## 0.13.1
 

packages/extension/composables/key-lock.ts

@@ -1,3 +1,5 @@
+import { useEventListener } from '@vueuse/core'
+
 import { options } from '@/ui/state'
 import { getCanvas, setLockAltKey, setLockMetaKey } from '@/utils'
 
@@ -16,6 +18,14 @@ function resume() {
   setLockAltKey(options.value.measureOn)
 }
 
+function pauseMeasure() {
+  setLockAltKey(false)
+}
+
+function resumeMeasure() {
+  setLockAltKey(options.value.measureOn)
+}
+
 let resuming: number | null = null
 function pauseMetaThenResume() {
   if (resuming != null) {
@@ -49,21 +59,13 @@ function keyup(e: KeyboardEvent) {
 export function useKeyLock() {
   const canvas = getCanvas()
 
-  onMounted(() => {
-    canvas.addEventListener('mouseleave', pause)
-    canvas.addEventListener('mouseenter', resume)
-    canvas.addEventListener('wheel', pauseMetaThenResume)
-    window.addEventListener('keydown', keydown)
-    window.addEventListener('keyup', keyup)
-  })
-
-  onUnmounted(() => {
-    canvas.removeEventListener('mouseleave', pause)
-    canvas.removeEventListener('mouseenter', resume)
-    canvas.removeEventListener('wheel', pauseMetaThenResume)
-    window.removeEventListener('keydown', keydown)
-    window.removeEventListener('keyup', keyup)
-  })
+  useEventListener(canvas, 'mouseleave', pause)
+  useEventListener(canvas, 'mouseenter', resume)
+  useEventListener(canvas, 'pointerdown', pauseMeasure, { capture: true })
+  useEventListener('pointerup', resumeMeasure, { capture: true })
+  useEventListener(canvas, 'wheel', pauseMetaThenResume)
+  useEventListener('keydown', keydown)
+  useEventListener('keyup', keyup)
 
   watch(
     () => options.value.deepSelectOn,