diff --git a/src/index.js b/src/index.js index 1fe9614..bbbd5b7 100644 --- a/src/index.js +++ b/src/index.js @@ -321,6 +321,7 @@ export function attachTouch(element, options = {}) { * @prop {number=} minScale * @prop {number=} maxScale * @prop {number=} scale Defaults to 1 + * @prop {boolean=} round Whether or not to round `dx` and `dy` in `getState` **/ /** @@ -344,6 +345,9 @@ export class Pannable { /** @private **/ this.lastValues = [0, 0, 1]; + + /** @private **/ + this.round = options.round; } /** @private **/ @@ -381,7 +385,15 @@ export class Pannable { /** @returns {PannableState} **/ getState(cx = 0, cy = 0) { - return new PannableState(this.dx + cx, this.dy + cy, this.logScale); + if (this.round) { + return new PannableState( + Math.round(this.dx + cx), + Math.round(this.dy + cy), + this.logScale + ); + } else { + return new PannableState(this.dx + cx, this.dy + cy, this.logScale); + } } /** diff --git a/src/solid/PixelPerfectTouch.tsx b/src/solid/PixelPerfectTouch.tsx index a471d33..2d0cb0c 100644 --- a/src/solid/PixelPerfectTouch.tsx +++ b/src/solid/PixelPerfectTouch.tsx @@ -10,11 +10,13 @@ export type PixelPefectTouchProps = { * Called whenever the touchMap is updated. * You can safely pass the setter of a solid.js signal to have reactive updates to the touchMap. **/ - onUpdate?: (touchMap: Map) => void + onUpdate?: (touchMap: Map) => void; + + style?: JSX.CSSProperties, } & AttachTouchOptions; export const PixelPerfectTouch: Component = ( - { children, onMount, ...options } + { children, onMount, style, ...options } ) => { let element: HTMLDivElement; @@ -40,7 +42,27 @@ export const PixelPerfectTouch: Component = ( }); onCleanup(cleanup); + + if (options.preventDefault) { + function onContext(event: MouseEvent) { + event.preventDefault(); + } + + element.addEventListener("contextmenu", onContext); + + onCleanup(() => { + element.removeEventListener("contextmenu", onContext); + }); + } }); - return
element = el}>{children}
; + return (
element = el} + style={{ + ...(options.preventDefault ? {"user-select": "none"} : {}), + ...(style ?? {}), + }} + > + {children} +
); };