✨ usePannable, make canvas position absolute, add buttons in Touch

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@shadryx/pptk",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@shadryx/pptk",
-      "version": "0.1.6",
+      "version": "0.1.7",
       "license": "MIT",
       "devDependencies": {
         "solid-js": "^1.6.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadryx/pptk",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Pixel-Perfect ToolKit, a library to help make pixel-perfect applications on high-DPI devices",
   "keywords": [
     "pixel-perfect",

src/index.js

@@ -20,7 +20,7 @@ export const MAX_CANVAS_SIZE = 10000;
 
 /**
  * A function to call to unbind the event listeners attached to a canvas through `attachCanvas`.
- * @deprecated This type will be removed in the next major release
+ * *DEPRECATION NOTICE:* This type will be removed in the next major release
  * @callback AttachCanvasUnbind
  * @returns {void}
  **/
@@ -168,6 +168,7 @@ export function getContext2D(canvas) {
  * @prop {number} dy
  * @prop {PointerEvent['pointerType']} type
  * @prop {number} id
+ * @prop {PointerEvent['buttons']} buttons
  **/
 
 /**
@@ -214,6 +215,7 @@ export function attachTouch(element, options = {}) {
             dy: 0,
             type: event.pointerType,
             id: event.pointerId,
+            buttons: event.buttons,
         };
 
         touches.set(event.pointerId, touch);
@@ -329,6 +331,7 @@ export function attachTouch(element, options = {}) {
  * @prop {number=} dy Defaults to 0
  * @prop {number=} minScale
  * @prop {number=} maxScale
+ * @prop {number=} scale Defaults to 1
  **/
 
 /**
@@ -336,7 +339,7 @@ export function attachTouch(element, options = {}) {
  **/
 export class Pannable {
     /**
-     * @param {PannableOptions} options
+     * @param {PannableOptions=} options
      **/
     constructor(options) {
         /** @type {number} **/
@@ -344,7 +347,7 @@ export class Pannable {
         /** @type {number} **/
         this.dy = options?.dy || 0;
         /** @type {number} **/
-        this.logScale = 0.0;
+        this.logScale = options?.scale ? Math.log2(options.scale) : 0.0;
         /** @type {number} **/
         this.logMinScale = options?.minScale ? Math.log2(options.minScale) : -Infinity;
         /** @type {number} **/

src/solid/PixelPerfectCanvas.tsx

@@ -1,11 +1,11 @@
 import { JSX, Component, createEffect, onCleanup } from "solid-js";
-import { attachCanvas, AttachCanvasOptions } from '../index.js';
+import { attachCanvas, AttachCanvasOptions } from "../index.js";
 
 export type PixelPerfectCanvasProps = {
     /**
      * Style to be applied to the container.
      **/
-    style?: Omit<JSX.CSSProperties, 'overflow' | 'overflow-x' | 'overflow-y'>,
+    style?: Omit<JSX.CSSProperties, "overflow" | "overflow-x" | "overflow-y">,
     /**
      * Class name(s) to give to the container. Make sure that they do not override the required
      * properties (namely `overflow`)
@@ -27,7 +27,7 @@ export type PixelPerfectCanvasProps = {
      * Callback called after the event listeners for dimension and DPR changes are detached.
      **/
     onDetach?: (canvas: HTMLCanvasElement) => void,
-} & Omit<AttachCanvasOptions, 'onResize' | 'container'>
+} & Omit<AttachCanvasOptions, "onResize" | "container">
 
 /**
  * A canvas that is wrapped in a container (which will be styled with `style` or `class`),
@@ -60,12 +60,21 @@ export const PixelPerfectCanvas: Component<PixelPerfectCanvasProps> = (props) =>
     return (<div
         style={{
             ...props.style,
-            overflow: 'hidden'
+            position: "relative"
         }}
         class={props.class}
         ref={(div) => containerRef = div}
     >
-        <canvas ref={(canvas) => canvasRef = canvas}>
+        <canvas
+            ref={(canvas) => canvasRef = canvas}
+            style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+            }}
+        >
             {props.children ?? "Sorry, your browser does not support canvases"}
         </canvas>
     </div>);

src/solid/index.tsx

@@ -1,2 +1,3 @@
 export * from "./PixelPerfectCanvas.jsx";
 export * from "./PixelPerfectTouch.jsx";
+export * from "./usePannable.js";

src/solid/usePannable.ts

@@ -0,0 +1,26 @@
+import { createSignal } from "solid-js";
+import { Pannable, PannableOptions, PannableState, Touch } from "../index.js";
+
+export function usePannable(config: PannableOptions) {
+    const pannable = new Pannable(config);
+    const [state, setState] = createSignal<PannableState>(pannable.getState());
+
+    return {
+        update(touches: Map<number, Touch>) {
+            pannable.update(touches);
+        },
+        move(touches: Map<number, Touch>) {
+            pannable.move(touches);
+            const newState = pannable.getState();
+            setState(newState);
+            return newState;
+        },
+        zoom(amount: number, clientX?: number, clientY?: number) {
+            pannable.zoom(amount, clientX, clientY);
+            const newState = pannable.getState();
+            setState(newState);
+            return newState;
+        },
+        getState: state,
+    };
+}