fix: angle slider dragging

Author: segunadebayo

.changeset/fix-angle-slider-relative-thumb-dragging.md

@@ -0,0 +1,7 @@
+---
+"@zag-js/angle-slider": patch
+---
+
+Fix issue where clicking and dragging the angle-slider thumb from a non-center position causes unexpected value jumps.
+The thumb now maintains its relative position from the initial click point throughout the drag operation, providing more
+intuitive dragging behavior.

e2e/angle-slider.e2e.ts

@@ -1,4 +1,4 @@
-import { test } from "@playwright/test"
+import { expect, test } from "@playwright/test"
 import { AngleSliderModel } from "./models/angle-slider.model"
 
 let I: AngleSliderModel
@@ -12,4 +12,50 @@ test.describe("angle-slider", () => {
   test("should have no accessibility violation", async () => {
     await I.checkAccessibility()
   })
+
+  test("[pointer] should jump to clicked position on control", async () => {
+    // Click directly on the control (not on thumb) should jump to that position
+    await I.seeValueText("0deg")
+
+    // Click at 90 degrees position
+    await I.clickControlAtAngle(90)
+
+    const result = await I.getCurrentValue()
+    const resultAngle = parseInt(result.replace("deg", ""))
+
+    // Should be close to 90 degrees (allow some tolerance)
+    expect(resultAngle).toBeGreaterThanOrEqual(85)
+    expect(resultAngle).toBeLessThanOrEqual(95)
+  })
+
+  test("[pointer] should maintain relative position when dragging from thumb edge", async () => {
+    // Start from default position (0deg)
+    await I.seeValueText("0deg")
+
+    // Drag thumb from its edge (not center) to 90 degrees
+    await I.dragThumbFromEdgeToAngle(90)
+
+    const result = await I.getCurrentValue()
+    const resultAngle = parseInt(result.replace("deg", ""))
+
+    // Should be close to 90 degrees despite clicking edge of thumb
+    expect(resultAngle).toBeGreaterThanOrEqual(85)
+    expect(resultAngle).toBeLessThanOrEqual(95)
+  })
+
+  test("[pointer] should maintain offset throughout drag operation", async () => {
+    // Set initial value to 45 degrees
+    await I.clickControlAtAngle(45)
+    await I.seeValueText("45deg")
+
+    // Now drag from thumb edge to 180 degrees
+    await I.dragThumbFromEdgeToAngle(180)
+
+    const result = await I.getCurrentValue()
+    const resultAngle = parseInt(result.replace("deg", ""))
+
+    // Should be close to 180 degrees
+    expect(resultAngle).toBeGreaterThanOrEqual(175)
+    expect(resultAngle).toBeLessThanOrEqual(185)
+  })
 })

e2e/models/angle-slider.model.ts

@@ -1,5 +1,5 @@
-import { type Page } from "@playwright/test"
-import { a11y } from "../_utils"
+import { expect, type Page } from "@playwright/test"
+import { a11y, rect } from "../_utils"
 import { Model } from "./model"
 
 export class AngleSliderModel extends Model {
@@ -30,4 +30,51 @@ export class AngleSliderModel extends Model {
   focusThumb() {
     return this.thumb.focus()
   }
+
+  async getCurrentValue(): Promise<string> {
+    return (await this.output.textContent()) || "0deg"
+  }
+
+  async seeValueText(value: string) {
+    return expect(this.output).toHaveText(value)
+  }
+
+  async clickControlAtAngle(angle: number) {
+    const controlBbox = await rect(this.control)
+    const centerX = controlBbox.x + controlBbox.width / 2
+    const centerY = controlBbox.y + controlBbox.height / 2
+    const radius = (Math.min(controlBbox.width, controlBbox.height) / 2) * 0.8
+
+    // Convert angle to radians (0° is at top, clockwise)
+    const radians = ((angle - 90) * Math.PI) / 180
+    const targetX = centerX + radius * Math.cos(radians)
+    const targetY = centerY + radius * Math.sin(radians)
+
+    await this.page.mouse.click(targetX, targetY)
+  }
+
+  async dragThumbFromEdgeToAngle(targetAngle: number) {
+    // Get thumb and control positions
+    const thumbBbox = await rect(this.thumb)
+    const controlBbox = await rect(this.control)
+
+    // Click at edge of thumb (not center) to test relative dragging
+    const thumbEdgeX = thumbBbox.x + thumbBbox.width * 0.8
+    const thumbEdgeY = thumbBbox.y + thumbBbox.height * 0.2
+
+    // Calculate target position for the desired angle
+    const centerX = controlBbox.x + controlBbox.width / 2
+    const centerY = controlBbox.y + controlBbox.height / 2
+    const radius = (Math.min(controlBbox.width, controlBbox.height) / 2) * 0.8
+
+    const radians = ((targetAngle - 90) * Math.PI) / 180
+    const targetX = centerX + radius * Math.cos(radians)
+    const targetY = centerY + radius * Math.sin(radians)
+
+    // Drag from thumb edge to target position
+    await this.page.mouse.move(thumbEdgeX, thumbEdgeY)
+    await this.page.mouse.down()
+    await this.page.mouse.move(targetX, targetY)
+    await this.page.mouse.up()
+  }
 }

packages/machines/angle-slider/src/angle-slider.connect.ts

@@ -1,8 +1,9 @@
-import { dataAttr, getEventPoint, getEventStep, isLeftClick } from "@zag-js/dom-query"
+import { dataAttr, getEventPoint, getEventStep, getNativeEvent, isLeftClick } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./angle-slider.anatomy"
 import * as dom from "./angle-slider.dom"
-import type { AngleSliderService, AngleSliderApi } from "./angle-slider.types"
+import type { AngleSliderApi, AngleSliderService } from "./angle-slider.types"
+import { getAngle } from "./angle-slider.utils"
 
 export function connect<T extends PropTypes>(
   service: AngleSliderService,
@@ -81,8 +82,22 @@ export function connect<T extends PropTypes>(
         onPointerDown(event) {
           if (!interactive) return
           if (!isLeftClick(event)) return
+
           const point = getEventPoint(event)
-          send({ type: "CONTROL.POINTER_DOWN", point })
+          const controlEl = event.currentTarget
+
+          // Check if pointer is over the thumb (if thumb exists)
+          const thumbEl = dom.getThumbEl(scope)
+          const composedPath = getNativeEvent(event).composedPath()
+          const isOverThumb = thumbEl && composedPath.includes(thumbEl)
+
+          let angularOffset = null
+          if (isOverThumb) {
+            const clickAngle = getAngle(controlEl, point)
+            angularOffset = clickAngle - value
+          }
+
+          send({ type: "CONTROL.POINTER_DOWN", point, angularOffset })
           event.stopPropagation()
         },
         style: {

packages/machines/angle-slider/src/angle-slider.machine.ts

@@ -1,13 +1,8 @@
 import { raf, setElementValue, trackPointerMove } from "@zag-js/dom-query"
-import { createRect, getPointAngle } from "@zag-js/rect-utils"
-import type { Point } from "@zag-js/types"
-import { snapValueToStep } from "@zag-js/utils"
 import { createMachine } from "@zag-js/core"
 import * as dom from "./angle-slider.dom"
 import type { AngleSliderSchema } from "./angle-slider.types"
-
-const MIN_VALUE = 0
-const MAX_VALUE = 359
+import { clampAngle, constrainAngle, getAngle, MIN_VALUE, MAX_VALUE, snapAngleToStep } from "./angle-slider.utils"
 
 export const machine = createMachine<AngleSliderSchema>({
   props({ props }) {
@@ -30,6 +25,12 @@ export const machine = createMachine<AngleSliderSchema>({
     }
   },
 
+  refs() {
+    return {
+      thumbDragOffset: null,
+    }
+  },
+
   computed: {
     interactive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
     valueAsDegree: ({ context }) => `${context.get("value")}deg`,
@@ -56,7 +57,7 @@ export const machine = createMachine<AngleSliderSchema>({
       on: {
         "CONTROL.POINTER_DOWN": {
           target: "dragging",
-          actions: ["setPointerValue", "focusThumb"],
+          actions: ["setThumbDragOffset", "setPointerValue", "focusThumb"],
         },
         "THUMB.FOCUS": {
           target: "focused",
@@ -68,7 +69,7 @@ export const machine = createMachine<AngleSliderSchema>({
       on: {
         "CONTROL.POINTER_DOWN": {
           target: "dragging",
-          actions: ["setPointerValue", "focusThumb"],
+          actions: ["setThumbDragOffset", "setPointerValue", "focusThumb"],
         },
         "THUMB.ARROW_DEC": {
           actions: ["decrementValue", "invokeOnChangeEnd"],
@@ -94,7 +95,7 @@ export const machine = createMachine<AngleSliderSchema>({
       on: {
         "DOC.POINTER_UP": {
           target: "focused",
-          actions: ["invokeOnChangeEnd"],
+          actions: ["invokeOnChangeEnd", "clearThumbDragOffset"],
         },
         "DOC.POINTER_MOVE": {
           actions: ["setPointerValue"],
@@ -128,10 +129,11 @@ export const machine = createMachine<AngleSliderSchema>({
           valueAsDegree: computed("valueAsDegree"),
         })
       },
-      setPointerValue({ scope, event, context, prop }) {
+      setPointerValue({ scope, event, context, prop, refs }) {
         const controlEl = dom.getControlEl(scope)
         if (!controlEl) return
-        const deg = getAngle(controlEl, event.point)
+        const angularOffset = refs.get("thumbDragOffset")
+        const deg = getAngle(controlEl, event.point, angularOffset)
         context.set("value", constrainAngle(deg, prop("step")))
       },
       setValueToMin({ context }) {
@@ -144,48 +146,24 @@ export const machine = createMachine<AngleSliderSchema>({
         context.set("value", clampAngle(event.value))
       },
       decrementValue({ context, event, prop }) {
-        const value = snapValueToStep(
-          context.get("value") - event.step,
-          MIN_VALUE,
-          MAX_VALUE,
-          event.step ?? prop("step"),
-        )
+        const value = snapAngleToStep(context.get("value") - event.step, event.step ?? prop("step"))
         context.set("value", value)
       },
       incrementValue({ context, event, prop }) {
-        const value = snapValueToStep(
-          context.get("value") + event.step,
-          MIN_VALUE,
-          MAX_VALUE,
-          event.step ?? prop("step"),
-        )
+        const value = snapAngleToStep(context.get("value") + event.step, event.step ?? prop("step"))
         context.set("value", value)
       },
       focusThumb({ scope }) {
         raf(() => {
           dom.getThumbEl(scope)?.focus({ preventScroll: true })
         })
       },
+      setThumbDragOffset({ refs, event }) {
+        refs.set("thumbDragOffset", event.angularOffset ?? null)
+      },
+      clearThumbDragOffset({ refs }) {
+        refs.set("thumbDragOffset", null)
+      },
     },
   },
 })
-
-function getAngle(controlEl: HTMLElement, point: Point) {
-  const rect = createRect(controlEl.getBoundingClientRect())
-  return getPointAngle(rect, point)
-}
-
-function clampAngle(degree: number) {
-  return Math.min(Math.max(degree, MIN_VALUE), MAX_VALUE)
-}
-
-function constrainAngle(degree: number, step: number) {
-  const clampedDegree = clampAngle(degree)
-  const upperStep = Math.ceil(clampedDegree / step)
-  const nearestStep = Math.round(clampedDegree / step)
-  return upperStep >= clampedDegree / step
-    ? upperStep * step === MAX_VALUE
-      ? MIN_VALUE
-      : upperStep * step
-    : nearestStep * step
-}

packages/machines/angle-slider/src/angle-slider.types.ts

@@ -90,6 +90,9 @@ export interface AngleSliderSchema {
   context: {
     value: number
   }
+  refs: {
+    thumbDragOffset: number | null
+  }
   action: string
   event: EventObject
   effect: string

packages/machines/angle-slider/src/angle-slider.utils.ts

@@ -0,0 +1,37 @@
+import { createRect, getPointAngle } from "@zag-js/rect-utils"
+import type { Point } from "@zag-js/types"
+import { snapValueToStep } from "@zag-js/utils"
+
+export const MIN_VALUE = 0
+export const MAX_VALUE = 359
+
+export function getAngle(controlEl: HTMLElement, point: Point, angularOffset?: number | null) {
+  const rect = createRect(controlEl.getBoundingClientRect())
+  const angle = getPointAngle(rect, point)
+
+  // Apply angular offset for relative thumb dragging
+  if (angularOffset != null) {
+    return angle - angularOffset
+  }
+
+  return angle
+}
+
+export function clampAngle(degree: number) {
+  return Math.min(Math.max(degree, MIN_VALUE), MAX_VALUE)
+}
+
+export function constrainAngle(degree: number, step: number) {
+  const clampedDegree = clampAngle(degree)
+  const upperStep = Math.ceil(clampedDegree / step)
+  const nearestStep = Math.round(clampedDegree / step)
+  return upperStep >= clampedDegree / step
+    ? upperStep * step === MAX_VALUE
+      ? MIN_VALUE
+      : upperStep * step
+    : nearestStep * step
+}
+
+export function snapAngleToStep(value: number, step: number) {
+  return snapValueToStep(value, MIN_VALUE, MAX_VALUE, step)
+}

shared/src/css/angle-slider.css

@@ -24,10 +24,10 @@
   top: 0;
   right: 0;
   bottom: 0;
-  left: calc(50% - 1.5px);
-  pointer-events: none;
+  --thumb-width: 3px;
+  left: calc(50% - var(--thumb-width) / 2);
   height: 100%;
-  width: 3px;
+  width: var(--thumb-width);
 
   &::before {
     content: "";
@@ -36,7 +36,7 @@
     top: 0;
     height: var(--thumb-indicator-size);
     background: red;
-    width: 3px;
+    width: var(--thumb-width);
   }
 }
 
@@ -81,6 +81,3 @@
     --marker-color: lightgray;
   }
 }
-
-[data-scope="angle-slider"][data-part="value-text"] {
-}