Fix RadarChart drag reference point to use radar center (mouse & touch)

[Copilot]

D3 drag event.x/event.y are in SVG coordinate space (origin at top-left), but the distance calculation treated (0, 0) as the radar center, causing incorrect value mapping when dragging property points. Additionally, touch-based drag did not work because d3.pointer relies on clientX/clientY, which a TouchEvent doesn't expose directly. On iPad Chrome, d3.pointer's internal use of getScreenCTM() caused coordinates to be measured from the page origin rather than the radar center.

Changes

Fix coordinate origin: Compute coordinates via getBoundingClientRect() (always viewport-relative, immune to the getScreenCTM() scroll/zoom bug on mobile browsers), subtract the radar center offset and account for any CSS scaling.

Fix touch support: Extract clientX/clientY from changedTouches[0] for touch events, falling back to the raw event for mouse.

Fix drag interruption: Previously, calling onValueChange on every drag event triggered a React state update → re-render → useEffect → svg.selectAll('*').remove(), destroying the active drag gesture mid-drag. The fix updates the SVG DOM directly during drag (moving the circle and redrawing the filled polygon) and calls onValueChange only once on dragend to commit the final value.

Constrain point to axis: The cursor is projected onto the axis unit vector (dot-product), so the handle moves naturally along its axis line. Dragging to the center yields 0; dragging to the outer edge yields the max value.

---

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-03-13 11:20 UTC

[Lotes]

@copilot Make sure that drag & drop here also works using a touch device. Currently it does not work.

[Copilot]

@copilot Make sure that drag & drop here also works using a touch device. Currently it does not work.

Fixed in 3b5e556. d3.pointer relies on clientX/clientY which a TouchEvent doesn't expose directly. The fix extracts the first changed/active touch point before calling d3.pointer:

const sourceEv = event.sourceEvent;
const pointerEv = sourceEv.changedTouches?.[0] ?? sourceEv.touches?.[0] ?? sourceEv;
const [mouseX, mouseY] = d3.pointer(pointerEv, g.node());

This falls through to the raw event for mouse, and uses the dragging finger's coordinates for touch.

[Lotes]

@copilot In Chrome for IPAD it still compares the touch point with the origin of the web page. What is wrong? It feels not natural to drag the points. When I drag a point to the center, it should be zero. And outside should be max points S.

[Copilot]

@copilot In Chrome for IPAD it still compares the touch point with the origin of the web page. What is wrong? It feels not natural to drag the points. When I drag a point to the cent...

Fixed in 24dfad5. The root cause was that d3.pointer internally uses getScreenCTM().inverse() to convert client coordinates to SVG-local space. On iPad Chrome, getScreenCTM() doesn't account for the page scroll offset, so client coordinates (always viewport-relative) were being mapped incorrectly — effectively comparing against the page origin.

The fix bypasses d3.pointer/getScreenCTM() entirely and uses getBoundingClientRect() instead, which is always in the same viewport-relative coordinate space as clientX/clientY:

const svgNode = g.node()?.ownerSVGElement;
if (!svgNode) return;
const rect = svgNode.getBoundingClientRect();
// Handle any CSS scaling on the SVG element
const scaleX = width / rect.width;
const scaleY = height / rect.height;
// Subtract radar center (the g element's translation)
const mouseX = (clientX - rect.left) * scaleX - width / 2;
const mouseY = (clientY - rect.top) * scaleY - height / 2;

Dragging to the center now correctly yields 0, and dragging to the outer edge yields the max value, on both mouse and touch.

[Lotes]

@copilot when trying to drag a point/handle, it drops a few pixels later, as if the focus disappears immediately - I lose control, even on a Desktop browser. Can you fix this? I want to move the point along its axis in the radar without interuptions.

[Copilot]

@copilot when trying to drag a point/handle, it drops a few pixels later, as if the focus disappears immediately - I lose control, even on a Desktop browser. Can you fix this? I want...

Fixed in c2e1b88. The root cause was that every drag event called onValueChange → React state update → useEffect → svg.selectAll('*').remove(), which destroyed the active drag gesture mid-drag.

The fix:

• During drag: update the circle position and radar polygon directly in the SVG DOM — no React re-render.
• On drag end: call onValueChange once to commit the final value to React state.

Also added axis-projection so the handle now moves along its axis (dot-product of cursor onto the axis unit vector), clamped to [0, radius]. Dragging to the center gives 0, dragging to the outer edge gives the max value, and the drag is uninterrupted throughout.