From 6ebf4e695dc829d0efef6b85661b98d9991f5496 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Mon, 17 Jul 2023 14:40:51 +0200 Subject: [PATCH 1/2] fix: check that coordinates are actual numbers before proceeding with syncing values --- packages/uui-color-area/lib/uui-color-area.element.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts index 998c02ba3..0bb2c8565 100644 --- a/packages/uui-color-area/lib/uui-color-area.element.ts +++ b/packages/uui-color-area/lib/uui-color-area.element.ts @@ -181,6 +181,9 @@ export class UUIColorAreaElement extends LitElement { drag(grid, { onMove: (x, y) => { + // check if coordinates are not NaN (can happen when dragging outside of the grid) + if (isNaN(x) || isNaN(y)) return; + this.saturation = clamp((x / width) * 100, 0, 100); this.brightness = clamp(100 - (y / height) * 100, 0, 100); this.lightness = this.getLightness(this.brightness); From c6886d1aaaea7a5482cd0c07d20cb37d767eb5d3 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Mon, 17 Jul 2023 14:41:18 +0200 Subject: [PATCH 2/2] fix: allow TouchEvents to be read for move() function --- packages/uui-base/lib/utils/drag.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/uui-base/lib/utils/drag.ts b/packages/uui-base/lib/utils/drag.ts index 02008fd23..610c339ff 100644 --- a/packages/uui-base/lib/utils/drag.ts +++ b/packages/uui-base/lib/utils/drag.ts @@ -15,11 +15,19 @@ export const drag = ( container: HTMLElement, options?: Partial ) => { - function move(pointerEvent: PointerEvent) { + function move(event: PointerEvent | TouchEvent) { const dims = container.getBoundingClientRect(); const defaultView = container.ownerDocument.defaultView!; - const offsetX = dims.left + defaultView.pageXOffset; - const offsetY = dims.top + defaultView.pageYOffset; + const offsetX = dims.left + defaultView.scrollX; + const offsetY = dims.top + defaultView.scrollY; + + let pointerEvent: PointerEvent | Touch; + if (event instanceof TouchEvent) { + pointerEvent = event.touches[0]; + } else { + pointerEvent = event; + } + const x = pointerEvent.pageX - offsetX; const y = pointerEvent.pageY - offsetY;