diff --git a/docs/src/documentation/options/touchAction/+option.mdx b/docs/src/documentation/options/touchAction/+option.mdx new file mode 100644 index 00000000..75f5f14f --- /dev/null +++ b/docs/src/documentation/options/touchAction/+option.mdx @@ -0,0 +1,16 @@ +--- +title: touchAction +type: 'string' +defaultValue: 'none' +--- + +import Code from '$components/options/OptionsCode.astro'; +import Example from '$components/options/OptionsExample.astro'; +import Examples from '$components/options/OptionsExamples.svelte'; + +export const shortDescription = + 'Choose to set the initial touch-action of an element to a different value than "none"'; + +

{shortDescription}

+ +By default, the "touch-action" style is set to `none` upon initalizing the draggable on an element. diff --git a/package.json b/package.json index 99eaaab2..b7489199 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "brotli-size": "^4.0.0", + "csstype": "^3.1.2", "fast-glob": "^3.2.12", "jsdom": "^21.1.0", "nx": "15.7.2", diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 59a1aaae..e3535a8c 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,3 +1,5 @@ +import type { Property } from 'csstype'; + export type DragBoundsCoords = { /** Number of pixels from left of the document */ left: number; @@ -182,6 +184,11 @@ export type DragOptions = { */ handle?: string | HTMLElement | HTMLElement[]; + /** + * Choose to set the initial touch-action of an element to a different value than 'none' + */ + touchAction?: Property.TouchAction; + /** * Class to apply on the element on which `use:draggable` is applied. * Note that if `handle` is provided, it will still apply class on the element to which this action is applied, **NOT** the handle @@ -258,6 +265,8 @@ export const draggable = (node: HTMLElement, options: DragOptions = {}) => { cancel, handle, + touchAction = 'none', + defaultClass = DEFAULT_CLASS.MAIN, defaultClassDragging = DEFAULT_CLASS.DRAGGING, defaultClassDragged = DEFAULT_CLASS.DRAGGED, @@ -359,10 +368,11 @@ export const draggable = (node: HTMLElement, options: DragOptions = {}) => { listen('pointerdown', dragStart, false); listen('pointerup', dragEnd, false); + listen('touchend', dragEnd, false); listen('pointermove', drag, false); // On mobile, touch can become extremely janky without it - setStyle(node, 'touch-action', 'none'); + setStyle(node, 'touch-action', touchAction); const calculateInverseScale = () => { // Calculate the current scale of the node diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 63a39d11..40709e2e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: brotli-size: specifier: ^4.0.0 version: 4.0.0 + csstype: + specifier: ^3.1.2 + version: 3.1.2 fast-glob: specifier: ^3.2.12 version: 3.2.12 @@ -139,7 +142,7 @@ importers: version: 5.0.0 astro: specifier: ^2.0.14 - version: 2.0.14(sass@1.58.3) + version: 2.0.14(sass@1.58.3)(terser@5.16.4) astrojs-service-worker: specifier: ^0.0.9 version: 0.0.9(astro@2.0.14) @@ -196,7 +199,7 @@ importers: version: 0.15.3 vite: specifier: ^4.1.3 - version: 4.1.3(sass@1.58.3) + version: 4.1.3(sass@1.58.3)(terser@5.16.4) packages/core: devDependencies: @@ -418,7 +421,7 @@ packages: astro: ^2.0.2 dependencies: '@astrojs/prism': 2.0.0 - astro: 2.0.14(sass@1.58.3) + astro: 2.0.14(sass@1.58.3)(terser@5.16.4) github-slugger: 1.5.0 import-meta-resolve: 2.2.1 rehype-raw: 6.1.1 @@ -490,7 +493,7 @@ packages: svelte: ^3.54.0 dependencies: '@sveltejs/vite-plugin-svelte': 2.0.2(svelte@3.55.1)(vite@4.1.3) - astro: 2.0.14(sass@1.58.3) + astro: 2.0.14(sass@1.58.3)(terser@5.16.4) svelte: 3.55.1 svelte2tsx: 0.5.23(svelte@3.55.1)(typescript@4.9.5) transitivePeerDependencies: @@ -2910,7 +2913,7 @@ packages: magic-string: 0.27.0 svelte: 3.55.1 svelte-hmr: 0.15.1(svelte@3.55.1) - vite: 4.1.3(sass@1.58.3) + vite: 4.1.3(terser@5.16.4) vitefu: 0.2.4(vite@4.1.3) transitivePeerDependencies: - supports-color @@ -3139,7 +3142,7 @@ packages: dependencies: '@types/prop-types': 15.7.5 '@types/scheduler': 0.16.2 - csstype: 3.1.1 + csstype: 3.1.2 dev: true /@types/resolve@1.17.1: @@ -3571,7 +3574,7 @@ packages: resolution: {integrity: sha512-8Yo1nQrl2iB5zj+VUAHrvGIck8bZ4WAmXQgJOeF9FuAZGQD5qK6DtSZaRbpBXsFfZYHA6tE8pjs3btHhLbC1zQ==} dev: false - /astro@2.0.14(sass@1.58.3): + /astro@2.0.14(sass@1.58.3)(terser@5.16.4): resolution: {integrity: sha512-BiXnHyK3rj5Uz45V5p9jRi0xtJc/zxhCxnXYAekHHF1bVvvoa3aXMwl0GZ3Bc0mxP6vPLmbRcjNKdqfyZn1B3Q==} engines: {node: '>=16.12.0', npm: '>=6.14.0'} hasBin: true @@ -3624,7 +3627,7 @@ packages: typescript: 4.9.5 unist-util-visit: 4.1.2 vfile: 5.3.7 - vite: 4.1.3(sass@1.58.3) + vite: 4.1.3(sass@1.58.3)(terser@5.16.4) vitefu: 0.2.4(vite@4.1.3) yargs-parser: 21.1.1 zod: 3.20.6 @@ -3643,7 +3646,7 @@ packages: peerDependencies: astro: '>=1.0.0' dependencies: - astro: 2.0.14(sass@1.58.3) + astro: 2.0.14(sass@1.58.3)(terser@5.16.4) workbox-build: 6.5.4 transitivePeerDependencies: - '@types/babel__core' @@ -4261,8 +4264,8 @@ packages: /csstype@2.6.21: resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==} - /csstype@3.1.1: - resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==} + /csstype@3.1.2: + resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} /csv-generate@3.4.3: resolution: {integrity: sha512-w/T+rqR0vwvHqWs/1ZyMDWtHHSJaN06klRqJXBEpDJaM/+dZkso0OKh1VcuuYvK3XM53KysVNq8Ko/epCK8wOw==} @@ -8506,7 +8509,7 @@ packages: /solid-js@1.6.11: resolution: {integrity: sha512-JquQQHPArGq+i2PLURxJ99Pcz2/1docpbycSio/cKSA0SeI3z5zRjy0TNcH4NRYvbOLrcini+iovXwnexKabyw==} dependencies: - csstype: 3.1.1 + csstype: 3.1.2 /solid-refresh@0.4.3(solid-js@1.6.11): resolution: {integrity: sha512-7+4/gYsVi0BlM4PzT1PU1TB5nW3Hv8FWuB+Kw/ofWui7KQkWBf+dVZOrReQYHEmLCzytHUa2JysUXgzVALJmSw==} @@ -8833,7 +8836,7 @@ packages: resolution: {integrity: sha512-wTGLVlhWJPauViy56AdtJop0fTaEJMqnCadjrlhcIe76R+KrnW+QvHBx69Xots8GaXgds8y+yBAr0cV7YNIeGw==} dependencies: clsx: 1.2.1 - csstype: 3.1.1 + csstype: 3.1.2 dev: false /svelte-copy@1.3.0: @@ -9735,40 +9738,6 @@ packages: fsevents: 2.3.2 dev: true - /vite@4.1.3(sass@1.58.3): - resolution: {integrity: sha512-0Zqo4/Fr/swSOBmbl+HAAhOjrqNwju+yTtoe4hQX9UsARdcuc9njyOdr6xU0DDnV7YP0RT6mgTTOiRtZgxfCxA==} - engines: {node: ^14.18.0 || >=16.0.0} - hasBin: true - peerDependencies: - '@types/node': '>= 14' - less: '*' - sass: '*' - stylus: '*' - sugarss: '*' - terser: ^5.4.0 - peerDependenciesMeta: - '@types/node': - optional: true - less: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - dependencies: - esbuild: 0.16.17 - postcss: 8.4.21 - resolve: 1.22.1 - rollup: 3.17.2 - sass: 1.58.3 - optionalDependencies: - fsevents: 2.3.2 - dev: true - /vite@4.1.3(sass@1.58.3)(terser@5.16.4): resolution: {integrity: sha512-0Zqo4/Fr/swSOBmbl+HAAhOjrqNwju+yTtoe4hQX9UsARdcuc9njyOdr6xU0DDnV7YP0RT6mgTTOiRtZgxfCxA==} engines: {node: ^14.18.0 || >=16.0.0} @@ -9846,7 +9815,7 @@ packages: vite: optional: true dependencies: - vite: 4.1.3(sass@1.58.3) + vite: 4.1.3(terser@5.16.4) dev: true /vitest@0.28.5(jsdom@21.1.0)(terser@5.16.4):