diff --git a/labs/folk-shape.ts b/labs/folk-shape.ts index be346e0..e92db48 100644 --- a/labs/folk-shape.ts +++ b/labs/folk-shape.ts @@ -105,7 +105,7 @@ const styles = css` border-radius: 2px; @media (any-pointer: coarse) { - width: 13px; + width: 15px; } } @@ -114,7 +114,7 @@ const styles = css` width: 16px; @media (any-pointer: coarse) { - width: 20px; + width: 25px; } } @@ -266,6 +266,7 @@ export class FolkShape extends FolkElement { const root = super.createRenderRoot(); this.addEventListener('pointerdown', this); + this.addEventListener('touchmove', this, { passive: false }); this.addEventListener('keydown', this); // Ideally we would creating these lazily on first focus, but the resize handlers need to be around for delegate focus to work. @@ -313,7 +314,13 @@ export class FolkShape extends FolkElement { return this.#readonlyRect; } - handleEvent(event: PointerEvent | KeyboardEvent) { + handleEvent(event: PointerEvent | KeyboardEvent | TouchEvent) { + // prevent IOS Safari from scrolling when a shape is interacted with. + if (event instanceof TouchEvent) { + event.preventDefault(); + return; + } + const focusedElement = (this.renderRoot as ShadowRoot).activeElement as HTMLElement | null; const target = event.composedPath()[0] as HTMLElement; let handle: Handle | null = null; @@ -442,7 +449,7 @@ export class FolkShape extends FolkElement { protected override update(changedProperties: PropertyValues): void { this.#dispatchTransformEvent(); - + super.update(changedProperties); } diff --git a/website/canvas/propagators/event-propagators-with-device-gravity.html b/website/canvas/propagators/event-propagators-with-device-gravity.html index 2cc3de9..6c1c20e 100644 --- a/website/canvas/propagators/event-propagators-with-device-gravity.html +++ b/website/canvas/propagators/event-propagators-with-device-gravity.html @@ -73,14 +73,6 @@ rotation: from.x" import '@labs/standalone/folk-event-propagator.ts'; import { Gizmos } from '@lib/folk-gizmos'; - document.addEventListener( - 'touchmove', - (event) => { - event.preventDefault(); - }, - { passive: false }, - ); - const ropes = Array.from(document.querySelectorAll('folk-event-propagator')); let orientationEvent;