✨ 🐛 Add round option to usePannable and set user-select in PixelPerfectTouch

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);
+        }
     }
 
     /**

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<number, Touch>) => void
+    onUpdate?: (touchMap: Map<number, Touch>) => void;
+
+    style?: JSX.CSSProperties,
 } & AttachTouchOptions;
 
 export const PixelPerfectTouch: Component<PixelPefectTouchProps> = (
-    { children, onMount, ...options }
+    { children, onMount, style, ...options }
 ) => {
     let element: HTMLDivElement;
 
@@ -40,7 +42,27 @@ export const PixelPerfectTouch: Component<PixelPefectTouchProps> = (
         });
 
         onCleanup(cleanup);
+
+        if (options.preventDefault) {
+            function onContext(event: MouseEvent) {
+                event.preventDefault();
+            }
+
+            element.addEventListener("contextmenu", onContext);
+
+            onCleanup(() => {
+                element.removeEventListener("contextmenu", onContext);
+            });
+        }
     });
 
-    return <div ref={el => element = el}>{children}</div>;
+    return (<div
+        ref={el => element = el}
+        style={{
+            ...(options.preventDefault ? {"user-select": "none"} : {}),
+            ...(style ?? {}),
+        }}
+    >
+        {children}
+    </div>);
 };