@rokkit/core 1.0.0-next.25 → 1.0.0-next.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.25",
+  "version": "1.0.0-next.26",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "validators": "latest",
     "vite": "^4.3.5",
     "vitest": "~0.31.0",
-    "shared-config": "1.0.0-next.24"
+    "shared-config": "1.0.0-next.25"
   },
   "files": [
     "src/**/*.js",

package/src/actions/pannable.js

@@ -1,3 +1,4 @@
+// pannable.js
 /**
  * Handle drag and move events
  *
@@ -9,8 +10,8 @@ export function pannable(node) {
 	let y
 
 	function track(event, name, delta = {}) {
-		x = event.clientX
-		y = event.clientY
+		x = event.clientX || event.touches[0].clientX
+		y = event.clientY || event.touches[0].clientY
 		event.stopPropagation()
 		event.preventDefault()
 		node.dispatchEvent(
@@ -24,11 +25,13 @@ export function pannable(node) {
 		track(event, 'panstart')
 		window.addEventListener('mousemove', handleMousemove)
 		window.addEventListener('mouseup', handleMouseup)
+		window.addEventListener('touchmove', handleMousemove, { passive: false })
+		window.addEventListener('touchend', handleMouseup)
 	}
 
 	function handleMousemove(event) {
-		const dx = event.clientX - x
-		const dy = event.clientY - y
+		const dx = (event.clientX || event.touches[0].clientX) - x
+		const dy = (event.clientY || event.touches[0].clientY) - y
 
 		track(event, 'panmove', { dx, dy })
 	}
@@ -38,13 +41,17 @@ export function pannable(node) {
 
 		window.removeEventListener('mousemove', handleMousemove)
 		window.removeEventListener('mouseup', handleMouseup)
+		window.removeEventListener('touchmove', handleMousemove)
+		window.removeEventListener('touchend', handleMouseup)
 	}
 
 	node.addEventListener('mousedown', handleMousedown)
+	node.addEventListener('touchstart', handleMousedown, { passive: false })
 
 	return {
 		destroy() {
 			node.removeEventListener('mousedown', handleMousedown)
+			node.removeEventListener('touchstart', handleMousedown)
 		}
 	}
 }

package/src/mocks/index.js

@@ -8,3 +8,10 @@ export function createEvent(x, y) {
 		preventDefault: vi.fn()
 	}
 }
+export function createTouchEvent(clientX, clientY) {
+	return {
+		touches: [{ clientX, clientY }],
+		preventDefault: vi.fn(),
+		stopPropagation: vi.fn()
+	}
+}