fix(timeline): don't handle mouse move outside of canvas

vuejs · Mar 9, 2022 · ee66139 · ee66139
1 parent 1f1c7fd
commit ee66139
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/packages/app-frontend/src/features/timeline/TimelineView.vue b/packages/app-frontend/src/features/timeline/TimelineView.vue
@@ -1350,7 +1350,20 @@ export default defineComponent({
 
     // Misc. mouse events
 
+    let mouseIn = false
+
     function onMouseMove (event: FederatedPointerEvent) {
+      if (event.global.x < 0 ||
+        event.global.y < 0 ||
+        event.global.x > app.screen.width ||
+        event.global.y > app.screen.height) {
+        if (mouseIn) {
+          mouseIn = false
+          onMouseOut()
+        }
+        return
+      }
+      mouseIn = true
       updateLayerHover(event)
       updateCursorPosition(event)
     }
@@ -1363,13 +1376,12 @@ export default defineComponent({
     onMounted(() => {
       // @ts-ignore
       app.stage.addEventListener('pointermove', onMouseMove)
-      // @ts-ignore
-      app.stage.addEventListener('pointerout', onMouseOut)
     })
 
     return {
       wrapper,
       onResize,
+      onMouseOut,
     }
   },
 })
@@ -1381,6 +1393,7 @@ export default defineComponent({
     class="relative overflow-hidden"
     data-id="timeline-view-wrapper"
     @contextmenu.prevent
+    @mouseout="onMouseOut"
   >
     <resize-observer @notify="onResize" />
   </div>