fix(AnnotationPoint): Do not propagate mouse/touch move/leave events to TooltipContext after switching from pointer events. Fixes #598 (#602)

Author: techniq

.changeset/clean-nights-jog.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(AnnotationPoint): Do not propagate mouse/touch move/leave events to TooltipContext after switching from pointer events. Fixes #598

packages/layerchart/src/lib/components/AnnotationPoint.svelte

@@ -88,23 +88,30 @@
         ? 'start'
         : 'middle',
   });
-</script>
 
-<Circle
-  cx={point.x}
-  cy={point.y}
-  {r}
-  onpointermove={(e) => {
+  function onPointerMove(e: PointerEvent | MouseEvent | TouchEvent) {
     if (details) {
       e.stopPropagation();
       ctx.tooltip.show(e, { annotation: { label, details } });
     }
-  }}
-  onpointerleave={() => {
+  }
+
+  function onPointerLeave(e: PointerEvent | MouseEvent | TouchEvent) {
     if (details) {
+      e.stopPropagation();
       ctx.tooltip.hide();
     }
-  }}
+  }
+</script>
+
+<Circle
+  cx={point.x}
+  cy={point.y}
+  {r}
+  onmousemove={onPointerMove}
+  ontouchmove={onPointerMove}
+  onmouseleave={onPointerLeave}
+  ontouchend={onPointerLeave}
   {...props?.circle}
   class={cls('stroke-surface-100', props?.circle?.class)}
 />

packages/layerchart/src/lib/components/tooltip/TooltipContext.svelte

@@ -22,7 +22,11 @@
     y: number;
     data: T | null;
     payload: TooltipPayload[];
-    show(e: PointerEvent, tooltipData?: any, payload?: TooltipPayload): void;
+    show(
+      e: PointerEvent | MouseEvent | TouchEvent,
+      tooltipData?: any,
+      payload?: TooltipPayload
+    ): void;
     hide(e?: PointerEvent): void;
     mode: TooltipMode;
     isHoveringTooltipArea: boolean;