@studiometa/js-toolkit 3.5.0 → 3.6.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (240) hide show
  1. package/Base/Base.d.ts +2 -2
  2. package/Base/Base.js.map +2 -2
  3. package/Base/managers/AbstractManager.d.ts +2 -2
  4. package/Base/types.d.ts +3 -3
  5. package/Base/utils.d.ts +1 -1
  6. package/Base/utils.js +1 -2
  7. package/Base/utils.js.map +2 -2
  8. package/README.md +10 -0
  9. package/decorators/withBreakpointManager.d.ts +1 -1
  10. package/decorators/withBreakpointManager.js.map +1 -1
  11. package/decorators/withBreakpointObserver.d.ts +1 -1
  12. package/decorators/withBreakpointObserver.js.map +1 -1
  13. package/decorators/withDrag.d.ts +1 -1
  14. package/decorators/withDrag.js.map +1 -1
  15. package/decorators/withExtraConfig.d.ts +1 -1
  16. package/decorators/withExtraConfig.js.map +1 -1
  17. package/decorators/withFreezedOptions.d.ts +1 -1
  18. package/decorators/withFreezedOptions.js.map +1 -1
  19. package/decorators/withGroup.js.map +2 -2
  20. package/decorators/withIntersectionObserver.d.ts +1 -1
  21. package/decorators/withIntersectionObserver.js.map +1 -1
  22. package/decorators/withMountOnMediaQuery.d.ts +1 -1
  23. package/decorators/withMountOnMediaQuery.js.map +1 -1
  24. package/decorators/withMountWhenInView.d.ts +1 -1
  25. package/decorators/withMountWhenInView.js.map +1 -1
  26. package/decorators/withMutation.d.ts +1 -1
  27. package/decorators/withMutation.js.map +1 -1
  28. package/decorators/withRelativePointer.d.ts +1 -1
  29. package/decorators/withRelativePointer.js.map +1 -1
  30. package/decorators/withResponsiveOptions.d.ts +1 -1
  31. package/decorators/withResponsiveOptions.js.map +1 -1
  32. package/decorators/withScrolledInView/withScrolledInView.d.ts +1 -1
  33. package/decorators/withScrolledInView/withScrolledInView.js.map +1 -1
  34. package/helpers/createApp.d.ts +1 -1
  35. package/helpers/createApp.js +6 -4
  36. package/helpers/createApp.js.map +2 -2
  37. package/helpers/getClosestParent.d.ts +1 -1
  38. package/helpers/getClosestParent.js.map +1 -1
  39. package/helpers/getDirectChildren.d.ts +2 -2
  40. package/helpers/getDirectChildren.js.map +1 -1
  41. package/helpers/getInstanceFromElement.d.ts +1 -1
  42. package/helpers/getInstanceFromElement.js.map +1 -1
  43. package/helpers/importOnInteraction.d.ts +1 -1
  44. package/helpers/importOnInteraction.js.map +1 -1
  45. package/helpers/importOnMediaQuery.d.ts +1 -1
  46. package/helpers/importOnMediaQuery.js.map +1 -1
  47. package/helpers/importWhenIdle.d.ts +1 -1
  48. package/helpers/importWhenIdle.js.map +1 -1
  49. package/helpers/importWhenPrefersMotion.d.ts +1 -1
  50. package/helpers/importWhenPrefersMotion.js.map +1 -1
  51. package/helpers/importWhenVisible.d.ts +1 -1
  52. package/helpers/importWhenVisible.js.map +1 -1
  53. package/helpers/index.d.ts +1 -0
  54. package/helpers/index.js +1 -0
  55. package/helpers/index.js.map +2 -2
  56. package/helpers/logTree.d.ts +17 -0
  57. package/helpers/logTree.js +59 -0
  58. package/helpers/logTree.js.map +7 -0
  59. package/helpers/queryComponent.js +9 -10
  60. package/helpers/queryComponent.js.map +2 -2
  61. package/index.d.ts +1 -1
  62. package/index.js +1 -1
  63. package/index.js.map +1 -1
  64. package/package.json +1 -1
  65. package/services/AbstractService.d.ts +1 -1
  66. package/services/AbstractService.js +1 -1
  67. package/services/AbstractService.js.map +2 -2
  68. package/services/DragService.d.ts +6 -6
  69. package/services/DragService.js.map +1 -1
  70. package/services/KeyService.d.ts +1 -1
  71. package/services/KeyService.js.map +1 -1
  72. package/services/LoadService.d.ts +1 -1
  73. package/services/LoadService.js.map +1 -1
  74. package/services/MutationService.d.ts +1 -1
  75. package/services/MutationService.js.map +1 -1
  76. package/services/PointerService.d.ts +1 -1
  77. package/services/PointerService.js.map +1 -1
  78. package/services/RafService.d.ts +2 -2
  79. package/services/RafService.js +13 -7
  80. package/services/RafService.js.map +2 -2
  81. package/services/ResizeService.d.ts +1 -1
  82. package/services/ResizeService.js.map +1 -1
  83. package/services/ScrollService.d.ts +22 -4
  84. package/services/ScrollService.js +55 -7
  85. package/services/ScrollService.js.map +2 -2
  86. package/utils/cache.d.ts +1 -1
  87. package/utils/cache.js.map +1 -1
  88. package/utils/collide/boundingRectToCircle.d.ts +3 -3
  89. package/utils/collide/boundingRectToCircle.js.map +1 -1
  90. package/utils/collide/collideCircleCircle.d.ts +1 -1
  91. package/utils/collide/collideCircleCircle.js.map +1 -1
  92. package/utils/collide/collideCircleRect.d.ts +1 -1
  93. package/utils/collide/collideCircleRect.js.map +1 -1
  94. package/utils/collide/collidePointCircle.d.ts +1 -1
  95. package/utils/collide/collidePointCircle.js.map +1 -1
  96. package/utils/collide/collidePointRect.d.ts +1 -1
  97. package/utils/collide/collidePointRect.js.map +1 -1
  98. package/utils/collide/collideRectRect.d.ts +1 -1
  99. package/utils/collide/collideRectRect.js.map +1 -1
  100. package/utils/css/animate.d.ts +1 -1
  101. package/utils/css/animate.js +162 -96
  102. package/utils/css/animate.js.map +2 -2
  103. package/utils/css/classes.d.ts +3 -3
  104. package/utils/css/classes.js.map +1 -1
  105. package/utils/css/getOffsetSizes.d.ts +1 -1
  106. package/utils/css/getOffsetSizes.js.map +1 -1
  107. package/utils/css/matrix.d.ts +1 -1
  108. package/utils/css/matrix.js.map +1 -1
  109. package/utils/css/styles.d.ts +2 -2
  110. package/utils/css/styles.js.map +1 -1
  111. package/utils/css/transform.d.ts +1 -1
  112. package/utils/css/transform.js +12 -13
  113. package/utils/css/transform.js.map +2 -2
  114. package/utils/css/transition.d.ts +1 -1
  115. package/utils/css/transition.js.map +1 -1
  116. package/utils/debounce.d.ts +1 -1
  117. package/utils/debounce.js.map +1 -1
  118. package/utils/history.d.ts +3 -3
  119. package/utils/history.js.map +1 -1
  120. package/utils/index.d.ts +1 -0
  121. package/utils/index.js +1 -0
  122. package/utils/index.js.map +2 -2
  123. package/utils/is.d.ts +10 -10
  124. package/utils/is.js.map +1 -1
  125. package/utils/loadElement.d.ts +5 -5
  126. package/utils/loadElement.js.map +1 -1
  127. package/utils/math/clamp.d.ts +1 -1
  128. package/utils/math/clamp.js.map +1 -1
  129. package/utils/math/clamp01.d.ts +1 -1
  130. package/utils/math/clamp01.js.map +1 -1
  131. package/utils/math/createEases.d.ts +2 -2
  132. package/utils/math/createEases.js.map +1 -1
  133. package/utils/math/createRange.d.ts +1 -1
  134. package/utils/math/createRange.js.map +1 -1
  135. package/utils/math/damp.d.ts +1 -1
  136. package/utils/math/damp.js.map +2 -2
  137. package/utils/math/inertiaFinalValue.d.ts +1 -1
  138. package/utils/math/inertiaFinalValue.js.map +1 -1
  139. package/utils/math/lerp.d.ts +1 -1
  140. package/utils/math/lerp.js.map +1 -1
  141. package/utils/math/map.d.ts +1 -1
  142. package/utils/math/map.js.map +1 -1
  143. package/utils/math/round.d.ts +1 -1
  144. package/utils/math/round.js.map +1 -1
  145. package/utils/math/smoothTo.d.ts +24 -6
  146. package/utils/math/wrap.d.ts +1 -1
  147. package/utils/math/wrap.js.map +1 -1
  148. package/utils/memo.d.ts +1 -1
  149. package/utils/memo.js.map +1 -1
  150. package/utils/memoize.d.ts +2 -2
  151. package/utils/memoize.js.map +1 -1
  152. package/utils/nextFrame.d.ts +1 -1
  153. package/utils/nextFrame.js.map +1 -1
  154. package/utils/nextMicrotask.d.ts +1 -1
  155. package/utils/nextMicrotask.js.map +1 -1
  156. package/utils/nextTick.d.ts +1 -1
  157. package/utils/nextTick.js.map +1 -1
  158. package/utils/object/getAllProperties.js +4 -2
  159. package/utils/object/getAllProperties.js.map +2 -2
  160. package/utils/random.d.ts +3 -3
  161. package/utils/random.js.map +1 -1
  162. package/utils/scheduler.d.ts +3 -3
  163. package/utils/scheduler.js.map +1 -1
  164. package/utils/scrollTo.d.ts +1 -1
  165. package/utils/scrollTo.js.map +1 -1
  166. package/utils/storage/createLocalStorageProvider.d.ts +2 -0
  167. package/utils/storage/createLocalStorageProvider.js +32 -0
  168. package/utils/storage/createLocalStorageProvider.js.map +7 -0
  169. package/utils/storage/createMemoryStorageProvider.d.ts +2 -0
  170. package/utils/storage/createMemoryStorageProvider.js +27 -0
  171. package/utils/storage/createMemoryStorageProvider.js.map +7 -0
  172. package/utils/storage/createNoopProvider.d.ts +2 -0
  173. package/utils/storage/createNoopProvider.js +23 -0
  174. package/utils/storage/createNoopProvider.js.map +7 -0
  175. package/utils/storage/createSessionStorageProvider.d.ts +2 -0
  176. package/utils/storage/createSessionStorageProvider.js +31 -0
  177. package/utils/storage/createSessionStorageProvider.js.map +7 -0
  178. package/utils/storage/createStorage.d.ts +2 -0
  179. package/utils/storage/createStorage.js +96 -0
  180. package/utils/storage/createStorage.js.map +7 -0
  181. package/utils/storage/createUrlSearchParamsInHashProvider.d.ts +2 -0
  182. package/utils/storage/createUrlSearchParamsInHashProvider.js +57 -0
  183. package/utils/storage/createUrlSearchParamsInHashProvider.js.map +7 -0
  184. package/utils/storage/createUrlSearchParamsProvider.d.ts +2 -0
  185. package/utils/storage/createUrlSearchParamsProvider.js +41 -0
  186. package/utils/storage/createUrlSearchParamsProvider.js.map +7 -0
  187. package/utils/storage/getBrowserContext.d.ts +1 -0
  188. package/utils/storage/getBrowserContext.js +17 -0
  189. package/utils/storage/getBrowserContext.js.map +7 -0
  190. package/utils/storage/getGlobalStorage.d.ts +1 -0
  191. package/utils/storage/getGlobalStorage.js +7 -0
  192. package/utils/storage/getGlobalStorage.js.map +7 -0
  193. package/utils/storage/getStorageKeys.d.ts +1 -0
  194. package/utils/storage/getStorageKeys.js +12 -0
  195. package/utils/storage/getStorageKeys.js.map +7 -0
  196. package/utils/storage/index.d.ts +8 -0
  197. package/utils/storage/index.js +62 -0
  198. package/utils/storage/index.js.map +7 -0
  199. package/utils/storage/providers.d.ts +11 -0
  200. package/utils/storage/providers.js +30 -0
  201. package/utils/storage/providers.js.map +7 -0
  202. package/utils/storage/serializers.d.ts +2 -0
  203. package/utils/storage/serializers.js +14 -0
  204. package/utils/storage/serializers.js.map +7 -0
  205. package/utils/storage/types.d.ts +33 -0
  206. package/utils/storage/types.js +1 -0
  207. package/utils/storage/types.js.map +7 -0
  208. package/utils/storage.d.ts +1 -0
  209. package/utils/storage.js +2 -0
  210. package/utils/storage.js.map +7 -0
  211. package/utils/string/changeCase.d.ts +6 -6
  212. package/utils/string/changeCase.js +1 -1
  213. package/utils/string/changeCase.js.map +2 -2
  214. package/utils/string/withLeadingCharacters.d.ts +1 -1
  215. package/utils/string/withLeadingCharacters.js.map +1 -1
  216. package/utils/string/withLeadingSlash.d.ts +1 -1
  217. package/utils/string/withLeadingSlash.js.map +1 -1
  218. package/utils/string/withTrailingCharacters.d.ts +1 -1
  219. package/utils/string/withTrailingCharacters.js.map +1 -1
  220. package/utils/string/withTrailingSlash.d.ts +1 -1
  221. package/utils/string/withTrailingSlash.js.map +1 -1
  222. package/utils/string/withoutLeadingCharacters.d.ts +1 -1
  223. package/utils/string/withoutLeadingCharacters.js.map +1 -1
  224. package/utils/string/withoutLeadingCharactersRecursive.d.ts +1 -1
  225. package/utils/string/withoutLeadingCharactersRecursive.js.map +1 -1
  226. package/utils/string/withoutLeadingSlash.d.ts +1 -1
  227. package/utils/string/withoutLeadingSlash.js.map +1 -1
  228. package/utils/string/withoutTrailingCharacters.d.ts +1 -1
  229. package/utils/string/withoutTrailingCharacters.js.map +1 -1
  230. package/utils/string/withoutTrailingCharactersRecursive.d.ts +1 -1
  231. package/utils/string/withoutTrailingCharactersRecursive.js.map +1 -1
  232. package/utils/string/withoutTrailingSlash.d.ts +1 -1
  233. package/utils/string/withoutTrailingSlash.js.map +1 -1
  234. package/utils/throttle.d.ts +1 -1
  235. package/utils/throttle.js.map +1 -1
  236. package/utils/trapFocus.d.ts +2 -2
  237. package/utils/trapFocus.js.map +1 -1
  238. package/utils/tween.js +5 -5
  239. package/utils/tween.js.map +2 -2
  240. package/tsconfig.build.tsbuildinfo +0 -1
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- const version = "3.5.0";
1
+ const version = "3.6.0-beta.0";
2
2
  export * from "./Base/index.js";
3
3
  export * from "./Base/types.js";
4
4
  export * from "./decorators/index.js";
package/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../packages/js-toolkit/index.ts"],
4
- "sourcesContent": ["export const version = '3.5.0' as const;\n\nexport * from './Base/index.js';\nexport * from './Base/types.js';\nexport * from './decorators/index.js';\nexport * from './helpers/index.js';\nexport * from './services/index.js';\n"],
4
+ "sourcesContent": ["export const version = '3.6.0-beta.0' as const;\n\nexport * from './Base/index.js';\nexport * from './Base/types.js';\nexport * from './decorators/index.js';\nexport * from './helpers/index.js';\nexport * from './services/index.js';\n"],
5
5
  "mappings": "AAAO,MAAM,UAAU;AAEvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@studiometa/js-toolkit",
3
- "version": "3.5.0",
3
+ "version": "3.6.0-beta.1",
4
4
  "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -82,7 +82,7 @@ export declare class AbstractService<PropsType = any> {
82
82
  /**
83
83
  * Implements the EventListenerObject interface.
84
84
  */
85
- handleEvent(event: Event): void;
85
+ handleEvent(_event: Event): void;
86
86
  /**
87
87
  * Add or remove event listeners based on the static `config` property.
88
88
  */
@@ -82,7 +82,7 @@ class AbstractService {
82
82
  /**
83
83
  * Implements the EventListenerObject interface.
84
84
  */
85
- handleEvent(event) {
85
+ handleEvent(_event) {
86
86
  }
87
87
  /**
88
88
  * Add or remove event listeners based on the static `config` property.
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/services/AbstractService.ts"],
4
- "sourcesContent": ["import { cache } from '../utils/cache.js';\n\nexport interface ServiceInterface<T> {\n /**\n * Remove a function from the resize service by its key.\n */\n remove(key: string | symbol): void;\n /**\n * Add a callback to the service. The callback will receive the current service props as parameter.\n */\n add(key: string | symbol, callback: (props: T) => void): void;\n /**\n * Test if the service has alreaydy a callback for the given key.\n */\n has(key: string | symbol): boolean;\n /**\n * Get the service's props.\n */\n props(): T;\n}\n\n/**\n * Service configuration of events to be attached to targets.\n */\nexport type ServiceConfig = [\n (instance: AbstractService) => EventTarget,\n [string, AddEventListenerOptions?][],\n][];\n\n/**\n * AbstractService class.\n */\nexport class AbstractService<PropsType = any> {\n /**\n * Used to type `this.constructor` correctly\n * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n */\n declare ['constructor']: typeof AbstractService;\n\n /**\n * Service configuration.\n */\n static config: ServiceConfig = [];\n\n /**\n * Cache for the created instances.\n */\n static __instances = new Map();\n\n /**\n * Get a service instance as a singleton based on the given key.\n */\n static getInstance<T extends ServiceInterface<any>>(keys: any = [this], ...args: any[]) {\n return cache(keys, () => {\n // @ts-ignore\n const instance = new this(...args);\n return {\n add: (key, callback) => instance.add(key, callback),\n remove: (key) => instance.remove(key),\n has: (key) => instance.has(key),\n props: () => instance.props,\n } as T;\n });\n }\n\n /**\n * Is the service active or not?\n */\n __isInit = false;\n\n /**\n * Props for the service.\n */\n props = {};\n\n /**\n * Holds all the callbacks that will be triggered.\n */\n callbacks: Map<string | symbol, (props: PropsType) => unknown> = new Map();\n\n /**\n * Does the service has the given key?\n */\n has(key: string | symbol): boolean {\n return this.callbacks.has(key);\n }\n\n /**\n * Get a service callback by its key.\n */\n get(key: string | symbol): (props: PropsType) => unknown {\n return this.callbacks.get(key);\n }\n\n /**\n * Add a callback to the service.\n */\n add(key: string | symbol, callback: (props: PropsType) => unknown) {\n if (this.has(key)) {\n console.warn(`The key \\`${String(key)}\\` has already been added.`);\n return;\n }\n\n // Initialize the service when we add the first callback\n if (this.callbacks.size === 0 && !this.__isInit) {\n this.init();\n this.__isInit = true;\n }\n\n this.callbacks.set(key, callback);\n }\n\n /**\n * Remove a callback from the service by its key.\n */\n remove(key: string | symbol) {\n this.callbacks.delete(key);\n\n // Kill the service when we remove the last callback\n if (this.callbacks.size === 0 && this.__isInit) {\n this.kill();\n this.__isInit = false;\n }\n }\n\n /**\n * Trigger all service callbacks with service props.\n */\n trigger(props: PropsType) {\n for (const callback of this.callbacks.values()) {\n callback(props);\n }\n }\n\n /* v8 ignore next 6 */\n /**\n * Implements the EventListenerObject interface.\n */\n handleEvent(event: Event) {\n // Should be implemented.\n }\n\n /**\n * Add or remove event listeners based on the static `config` property.\n */\n __manageEvents(mode: 'add' | 'remove') {\n for (const [target, events] of this.constructor.config) {\n const resolvedTarget = target(this);\n for (const [type, options] of events) {\n resolvedTarget[`${mode}EventListener`](type, this, options);\n }\n }\n }\n\n /**\n * Triggered when the service is initialized.\n */\n init() {\n this.__manageEvents('add');\n }\n\n /**\n * Triggered when the service is killed.\n */\n kill() {\n this.__manageEvents('remove');\n }\n}\n"],
5
- "mappings": "AAAA,SAAS,aAAa;AAgCf,MAAM,gBAAiC;AAAA;AAAA;AAAA;AAAA,EAU5C,OAAO,SAAwB,CAAC;AAAA;AAAA;AAAA;AAAA,EAKhC,OAAO,cAAc,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAK7B,OAAO,YAA6C,OAAY,CAAC,IAAI,MAAM,MAAa;AACtF,WAAO,MAAM,MAAM,MAAM;AAEvB,YAAM,WAAW,IAAI,KAAK,GAAG,IAAI;AACjC,aAAO;AAAA,QACL,KAAK,CAAC,KAAK,aAAa,SAAS,IAAI,KAAK,QAAQ;AAAA,QAClD,QAAQ,CAAC,QAAQ,SAAS,OAAO,GAAG;AAAA,QACpC,KAAK,CAAC,QAAQ,SAAS,IAAI,GAAG;AAAA,QAC9B,OAAO,MAAM,SAAS;AAAA,MACxB;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,EAKT,YAAiE,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAKzE,IAAI,KAA+B;AACjC,WAAO,KAAK,UAAU,IAAI,GAAG;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAqD;AACvD,WAAO,KAAK,UAAU,IAAI,GAAG;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAsB,UAAyC;AACjE,QAAI,KAAK,IAAI,GAAG,GAAG;AACjB,cAAQ,KAAK,aAAa,OAAO,GAAG,CAAC,4BAA4B;AACjE;AAAA,IACF;AAGA,QAAI,KAAK,UAAU,SAAS,KAAK,CAAC,KAAK,UAAU;AAC/C,WAAK,KAAK;AACV,WAAK,WAAW;AAAA,IAClB;AAEA,SAAK,UAAU,IAAI,KAAK,QAAQ;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,KAAsB;AAC3B,SAAK,UAAU,OAAO,GAAG;AAGzB,QAAI,KAAK,UAAU,SAAS,KAAK,KAAK,UAAU;AAC9C,WAAK,KAAK;AACV,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAkB;AACxB,eAAW,YAAY,KAAK,UAAU,OAAO,GAAG;AAC9C,eAAS,KAAK;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,OAAc;AAAA,EAE1B;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,MAAwB;AACrC,eAAW,CAAC,QAAQ,MAAM,KAAK,KAAK,YAAY,QAAQ;AACtD,YAAM,iBAAiB,OAAO,IAAI;AAClC,iBAAW,CAAC,MAAM,OAAO,KAAK,QAAQ;AACpC,uBAAe,GAAG,IAAI,eAAe,EAAE,MAAM,MAAM,OAAO;AAAA,MAC5D;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,eAAe,KAAK;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,eAAe,QAAQ;AAAA,EAC9B;AACF;",
4
+ "sourcesContent": ["import { cache } from '../utils/cache.js';\n\nexport interface ServiceInterface<T> {\n /**\n * Remove a function from the resize service by its key.\n */\n remove(key: string | symbol): void;\n /**\n * Add a callback to the service. The callback will receive the current service props as parameter.\n */\n add(key: string | symbol, callback: (props: T) => void): void;\n /**\n * Test if the service has alreaydy a callback for the given key.\n */\n has(key: string | symbol): boolean;\n /**\n * Get the service's props.\n */\n props(): T;\n}\n\n/**\n * Service configuration of events to be attached to targets.\n */\nexport type ServiceConfig = [\n (instance: AbstractService) => EventTarget,\n [string, AddEventListenerOptions?][],\n][];\n\n/**\n * AbstractService class.\n */\nexport class AbstractService<PropsType = any> {\n /**\n * Used to type `this.constructor` correctly\n * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n */\n declare ['constructor']: typeof AbstractService;\n\n /**\n * Service configuration.\n */\n static config: ServiceConfig = [];\n\n /**\n * Cache for the created instances.\n */\n static __instances = new Map();\n\n /**\n * Get a service instance as a singleton based on the given key.\n */\n static getInstance<T extends ServiceInterface<any>>(keys: any = [this], ...args: any[]) {\n return cache(keys, () => {\n // @ts-ignore\n const instance = new this(...args);\n return {\n add: (key, callback) => instance.add(key, callback),\n remove: (key) => instance.remove(key),\n has: (key) => instance.has(key),\n props: () => instance.props,\n } as T;\n });\n }\n\n /**\n * Is the service active or not?\n */\n __isInit = false;\n\n /**\n * Props for the service.\n */\n props = {};\n\n /**\n * Holds all the callbacks that will be triggered.\n */\n callbacks: Map<string | symbol, (props: PropsType) => unknown> = new Map();\n\n /**\n * Does the service has the given key?\n */\n has(key: string | symbol): boolean {\n return this.callbacks.has(key);\n }\n\n /**\n * Get a service callback by its key.\n */\n get(key: string | symbol): (props: PropsType) => unknown {\n return this.callbacks.get(key);\n }\n\n /**\n * Add a callback to the service.\n */\n add(key: string | symbol, callback: (props: PropsType) => unknown) {\n if (this.has(key)) {\n console.warn(`The key \\`${String(key)}\\` has already been added.`);\n return;\n }\n\n // Initialize the service when we add the first callback\n if (this.callbacks.size === 0 && !this.__isInit) {\n this.init();\n this.__isInit = true;\n }\n\n this.callbacks.set(key, callback);\n }\n\n /**\n * Remove a callback from the service by its key.\n */\n remove(key: string | symbol) {\n this.callbacks.delete(key);\n\n // Kill the service when we remove the last callback\n if (this.callbacks.size === 0 && this.__isInit) {\n this.kill();\n this.__isInit = false;\n }\n }\n\n /**\n * Trigger all service callbacks with service props.\n */\n trigger(props: PropsType) {\n for (const callback of this.callbacks.values()) {\n callback(props);\n }\n }\n\n /* v8 ignore next 6 */\n /**\n * Implements the EventListenerObject interface.\n */\n handleEvent(_event: Event) {\n // Should be implemented.\n }\n\n /**\n * Add or remove event listeners based on the static `config` property.\n */\n __manageEvents(mode: 'add' | 'remove') {\n for (const [target, events] of this.constructor.config) {\n const resolvedTarget = target(this);\n for (const [type, options] of events) {\n resolvedTarget[`${mode}EventListener`](type, this, options);\n }\n }\n }\n\n /**\n * Triggered when the service is initialized.\n */\n init() {\n this.__manageEvents('add');\n }\n\n /**\n * Triggered when the service is killed.\n */\n kill() {\n this.__manageEvents('remove');\n }\n}\n"],
5
+ "mappings": "AAAA,SAAS,aAAa;AAgCf,MAAM,gBAAiC;AAAA;AAAA;AAAA;AAAA,EAU5C,OAAO,SAAwB,CAAC;AAAA;AAAA;AAAA;AAAA,EAKhC,OAAO,cAAc,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAK7B,OAAO,YAA6C,OAAY,CAAC,IAAI,MAAM,MAAa;AACtF,WAAO,MAAM,MAAM,MAAM;AAEvB,YAAM,WAAW,IAAI,KAAK,GAAG,IAAI;AACjC,aAAO;AAAA,QACL,KAAK,CAAC,KAAK,aAAa,SAAS,IAAI,KAAK,QAAQ;AAAA,QAClD,QAAQ,CAAC,QAAQ,SAAS,OAAO,GAAG;AAAA,QACpC,KAAK,CAAC,QAAQ,SAAS,IAAI,GAAG;AAAA,QAC9B,OAAO,MAAM,SAAS;AAAA,MACxB;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,EAKT,YAAiE,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAKzE,IAAI,KAA+B;AACjC,WAAO,KAAK,UAAU,IAAI,GAAG;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAqD;AACvD,WAAO,KAAK,UAAU,IAAI,GAAG;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAsB,UAAyC;AACjE,QAAI,KAAK,IAAI,GAAG,GAAG;AACjB,cAAQ,KAAK,aAAa,OAAO,GAAG,CAAC,4BAA4B;AACjE;AAAA,IACF;AAGA,QAAI,KAAK,UAAU,SAAS,KAAK,CAAC,KAAK,UAAU;AAC/C,WAAK,KAAK;AACV,WAAK,WAAW;AAAA,IAClB;AAEA,SAAK,UAAU,IAAI,KAAK,QAAQ;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,KAAsB;AAC3B,SAAK,UAAU,OAAO,GAAG;AAGzB,QAAI,KAAK,UAAU,SAAS,KAAK,KAAK,UAAU;AAC9C,WAAK,KAAK;AACV,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAkB;AACxB,eAAW,YAAY,KAAK,UAAU,OAAO,GAAG;AAC9C,eAAS,KAAK;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,QAAe;AAAA,EAE3B;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,MAAwB;AACrC,eAAW,CAAC,QAAQ,MAAM,KAAK,KAAK,YAAY,QAAQ;AACtD,YAAM,iBAAiB,OAAO,IAAI;AAClC,iBAAW,CAAC,MAAM,OAAO,KAAK,QAAQ;AACpC,uBAAe,GAAG,IAAI,eAAe,EAAE,MAAM,MAAM,OAAO;AAAA,MAC5D;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,eAAe,KAAK;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,eAAe,QAAQ;AAAA,EAC9B;AACF;",
6
6
  "names": []
7
7
  }
@@ -71,11 +71,11 @@ export interface DragServiceOptions {
71
71
  }
72
72
  export declare class DragService extends AbstractService<DragServiceProps> {
73
73
  static MODES: {
74
- readonly START: "start";
75
- readonly DRAG: "drag";
76
- readonly DROP: "drop";
77
- readonly INERTIA: "inertia";
78
- readonly STOP: "stop";
74
+ readonly START: 'start';
75
+ readonly DRAG: 'drag';
76
+ readonly DROP: 'drop';
77
+ readonly INERTIA: 'inertia';
78
+ readonly STOP: 'stop';
79
79
  };
80
80
  static config: ServiceConfig;
81
81
  id: string;
@@ -135,5 +135,5 @@ export declare class DragService extends AbstractService<DragServiceProps> {
135
135
  * props();
136
136
  * ```
137
137
  * @link https://js-toolkit.studiometa.dev/api/services/useDrag.html
138
- */
138
+ */
139
139
  export declare function useDrag(target: HTMLElement, options: DragServiceOptions): DragServiceInterface;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/services/DragService.ts"],
4
- "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { useRaf } from './RafService.js';\nimport { isDefined } from '../utils/is.js';\nimport { inertiaFinalValue } from '../utils/math/index.js';\nimport { PASSIVE_EVENT_OPTIONS, CAPTURE_EVENT_OPTIONS } from './utils.js';\n\nexport interface DragServiceProps {\n /**\n * The current mode of the dragging logic.\n */\n mode: 'start' | 'drag' | 'drop' | 'inertia' | 'stop';\n /**\n * Available modes.\n */\n MODES: {\n START: 'start';\n DRAG: 'drag';\n DROP: 'drop';\n INERTIA: 'inertia';\n STOP: 'stop';\n };\n /**\n * The target element of the drag.\n */\n target: HTMLElement;\n /**\n * Whether the user is currently grabbing the targeted element or not.\n */\n isGrabbing: boolean;\n /**\n * Whether the drag currently has inertia or not.\n */\n hasInertia: boolean;\n /**\n * The current horizontal position in the viewport.\n */\n x: number;\n /**\n * The current vertical position in the viewport.\n */\n y: number;\n /**\n * The delta between the current position and the last.\n */\n delta: { x: number; y: number };\n /**\n * The initial position where the dragging started.\n */\n origin: { x: number; y: number };\n /**\n * The distance from the current position to the origin.\n */\n distance: { x: number; y: number };\n /**\n * The final position that will be reached at the end of the inertia.\n */\n final: { x: number; y: number };\n}\n\nexport type DragServiceInterface = ServiceInterface<DragServiceProps>;\n\nexport interface DragServiceOptions {\n dampFactor?: number;\n dragTreshold?: number;\n}\n\nlet count = 0;\n\nexport class DragService extends AbstractService<DragServiceProps> {\n static MODES = {\n START: 'start',\n DRAG: 'drag',\n DROP: 'drop',\n INERTIA: 'inertia',\n STOP: 'stop',\n } as const;\n\n static config: ServiceConfig = [\n [\n (instance) => (instance as DragService).props.target,\n [\n ['dragstart', CAPTURE_EVENT_OPTIONS],\n ['click', CAPTURE_EVENT_OPTIONS],\n ['pointerdown', PASSIVE_EVENT_OPTIONS],\n ],\n ],\n [\n () => window,\n [\n ['pointerup', PASSIVE_EVENT_OPTIONS],\n ['touchend', PASSIVE_EVENT_OPTIONS],\n ],\n ],\n ];\n\n id: string;\n\n dampFactor = 0.85;\n\n dragTreshold = 10;\n\n previousEvent: TouchEvent | MouseEvent = null;\n\n props = {\n target: null,\n mode: undefined,\n MODES: DragService.MODES,\n isGrabbing: false,\n hasInertia: false,\n x: 0,\n y: 0,\n delta: {\n x: 0,\n y: 0,\n },\n origin: {\n x: 0,\n y: 0,\n },\n distance: {\n x: 0,\n y: 0,\n },\n final: {\n x: 0,\n y: 0,\n },\n } as DragServiceProps;\n\n /**\n * Test if we should allow click on links and buttons.\n */\n get shouldPreventClick(): boolean {\n return (\n Math.abs(this.props.distance.x) > this.dragTreshold ||\n Math.abs(this.props.distance.y) > this.dragTreshold\n );\n }\n\n constructor(\n target: HTMLElement,\n { dampFactor = 0.85, dragTreshold = 10 }: DragServiceOptions = {},\n ) {\n super();\n count += 1;\n this.id = `drag-${count}`;\n this.dampFactor = dampFactor;\n this.dragTreshold = dragTreshold;\n this.props.target = target;\n }\n\n /**\n * Get the client value for the given axis.\n */\n getEventPosition(event: MouseEvent | TouchEvent): { x: number; y: number } {\n // @ts-ignore\n const eventOrTouch = isDefined(event.touches) ? event.touches[0] : event;\n return {\n x: eventOrTouch.clientX,\n y: eventOrTouch.clientY,\n };\n }\n\n /**\n * Start the drag.\n *\n * @param {number} x The initial horizontal position.\n * @param {number} y The initial vertical position.\n */\n start(x: number, y: number) {\n const { props } = this;\n if (props.isGrabbing) {\n return;\n }\n\n // Reset state\n props.x = props.origin.x = props.final.x = x;\n props.y = props.origin.y = props.final.y = y;\n props.delta.x = props.distance.x = 0;\n props.delta.y = props.distance.y = 0;\n props.mode = props.MODES.START;\n props.isGrabbing = true;\n\n this.trigger(props);\n\n document.addEventListener('touchmove', this, PASSIVE_EVENT_OPTIONS);\n document.addEventListener('mousemove', this, PASSIVE_EVENT_OPTIONS);\n }\n\n /**\n * Stop the drag, or drop.\n */\n drop() {\n const { props, dampFactor, id } = this;\n\n if (!props.isGrabbing) {\n return;\n }\n\n document.removeEventListener('touchmove', this);\n document.removeEventListener('mousemove', this);\n\n props.isGrabbing = false;\n props.mode = props.MODES.DROP;\n props.hasInertia = true;\n props.final.x = inertiaFinalValue(props.x, props.delta.x, dampFactor);\n props.final.y = inertiaFinalValue(props.y, props.delta.y, dampFactor);\n this.previousEvent = null;\n\n this.trigger(props);\n\n setTimeout(() => {\n const raf = useRaf();\n raf.remove(id);\n raf.add(id, () => this.rafHandler());\n });\n }\n\n /**\n * Stop the drag.\n */\n stop() {\n const { props, id } = this;\n\n useRaf().remove(id);\n props.isGrabbing = false;\n props.hasInertia = false;\n props.mode = props.MODES.STOP;\n\n this.trigger(props);\n }\n\n /**\n * Raf service handler.\n */\n rafHandler() {\n const { props, dampFactor } = this;\n\n if (!props.isGrabbing) {\n props.x += props.delta.x;\n props.y += props.delta.y;\n props.distance.x = props.x - props.origin.x;\n props.distance.y = props.y - props.origin.y;\n props.delta.x *= dampFactor;\n props.delta.y *= dampFactor;\n props.mode = props.MODES.INERTIA;\n\n this.trigger(props);\n\n if (Math.abs(props.delta.x) < 0.1 && Math.abs(props.delta.y) < 0.1) {\n this.stop();\n }\n }\n }\n\n /**\n * Pointer service handler.\n */\n drag(event: TouchEvent | MouseEvent) {\n const { props } = this;\n\n if (props.isGrabbing) {\n const position = this.getEventPosition(event);\n props.x = position.x;\n props.y = position.y;\n\n if (this.previousEvent) {\n const previousPosition = this.getEventPosition(this.previousEvent);\n props.delta.x = position.x - previousPosition.x;\n props.delta.y = position.y - previousPosition.y;\n }\n\n props.final.x = position.x;\n props.final.y = position.y;\n props.distance.x = props.x - props.origin.x;\n props.distance.y = props.y - props.origin.y;\n props.mode = props.MODES.DRAG;\n\n this.trigger(props);\n this.previousEvent = event;\n }\n }\n\n /**\n * Handle any event.\n */\n handleEvent(event: TouchEvent | MouseEvent | PointerEvent | DragEvent) {\n switch (event.type) {\n case 'dragstart':\n event.preventDefault();\n break;\n case 'click':\n if (this.shouldPreventClick) {\n event.stopImmediatePropagation();\n event.stopPropagation();\n event.preventDefault();\n }\n break;\n case 'pointerup':\n case 'touchend':\n this.drop();\n break;\n case 'touchmove':\n case 'mousemove':\n if ((event as MouseEvent).buttons === 1 || (event as TouchEvent).touches?.length === 1) {\n this.drag(event);\n } else {\n this.drop();\n }\n break;\n default:\n if ((event as PointerEvent).button === 0) {\n this.start((event as PointerEvent).x, (event as PointerEvent).y);\n }\n }\n }\n}\n\n/**\n * Use the drag service.\n *\n * ```js\n * import { useDrag } from '@studiometa/js-toolkit/services';\n * const element = document.querySelector('.draggable');\n * const { add, remove, props } = useDrag(element, { dampFactor: 0.5 });\n * add('key', (props) => console.log(props));\n * remove('key');\n * props();\n * ```\n * @link https://js-toolkit.studiometa.dev/api/services/useDrag.html\n*/\nexport function useDrag(target: HTMLElement, options: DragServiceOptions): DragServiceInterface {\n return DragService.getInstance<DragServiceInterface>(\n [target, JSON.stringify(options)],\n target,\n options,\n );\n}\n"],
4
+ "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { useRaf } from './RafService.js';\nimport { isDefined } from '../utils/is.js';\nimport { inertiaFinalValue } from '../utils/math/index.js';\nimport { PASSIVE_EVENT_OPTIONS, CAPTURE_EVENT_OPTIONS } from './utils.js';\n\nexport interface DragServiceProps {\n /**\n * The current mode of the dragging logic.\n */\n mode: 'start' | 'drag' | 'drop' | 'inertia' | 'stop';\n /**\n * Available modes.\n */\n MODES: {\n START: 'start';\n DRAG: 'drag';\n DROP: 'drop';\n INERTIA: 'inertia';\n STOP: 'stop';\n };\n /**\n * The target element of the drag.\n */\n target: HTMLElement;\n /**\n * Whether the user is currently grabbing the targeted element or not.\n */\n isGrabbing: boolean;\n /**\n * Whether the drag currently has inertia or not.\n */\n hasInertia: boolean;\n /**\n * The current horizontal position in the viewport.\n */\n x: number;\n /**\n * The current vertical position in the viewport.\n */\n y: number;\n /**\n * The delta between the current position and the last.\n */\n delta: { x: number; y: number };\n /**\n * The initial position where the dragging started.\n */\n origin: { x: number; y: number };\n /**\n * The distance from the current position to the origin.\n */\n distance: { x: number; y: number };\n /**\n * The final position that will be reached at the end of the inertia.\n */\n final: { x: number; y: number };\n}\n\nexport type DragServiceInterface = ServiceInterface<DragServiceProps>;\n\nexport interface DragServiceOptions {\n dampFactor?: number;\n dragTreshold?: number;\n}\n\nlet count = 0;\n\nexport class DragService extends AbstractService<DragServiceProps> {\n static MODES = {\n START: 'start',\n DRAG: 'drag',\n DROP: 'drop',\n INERTIA: 'inertia',\n STOP: 'stop',\n } as const;\n\n static config: ServiceConfig = [\n [\n (instance) => (instance as DragService).props.target,\n [\n ['dragstart', CAPTURE_EVENT_OPTIONS],\n ['click', CAPTURE_EVENT_OPTIONS],\n ['pointerdown', PASSIVE_EVENT_OPTIONS],\n ],\n ],\n [\n () => window,\n [\n ['pointerup', PASSIVE_EVENT_OPTIONS],\n ['touchend', PASSIVE_EVENT_OPTIONS],\n ],\n ],\n ];\n\n id: string;\n\n dampFactor = 0.85;\n\n dragTreshold = 10;\n\n previousEvent: TouchEvent | MouseEvent = null;\n\n props = {\n target: null,\n mode: undefined,\n MODES: DragService.MODES,\n isGrabbing: false,\n hasInertia: false,\n x: 0,\n y: 0,\n delta: {\n x: 0,\n y: 0,\n },\n origin: {\n x: 0,\n y: 0,\n },\n distance: {\n x: 0,\n y: 0,\n },\n final: {\n x: 0,\n y: 0,\n },\n } as DragServiceProps;\n\n /**\n * Test if we should allow click on links and buttons.\n */\n get shouldPreventClick(): boolean {\n return (\n Math.abs(this.props.distance.x) > this.dragTreshold ||\n Math.abs(this.props.distance.y) > this.dragTreshold\n );\n }\n\n constructor(\n target: HTMLElement,\n { dampFactor = 0.85, dragTreshold = 10 }: DragServiceOptions = {},\n ) {\n super();\n count += 1;\n this.id = `drag-${count}`;\n this.dampFactor = dampFactor;\n this.dragTreshold = dragTreshold;\n this.props.target = target;\n }\n\n /**\n * Get the client value for the given axis.\n */\n getEventPosition(event: MouseEvent | TouchEvent): { x: number; y: number } {\n // @ts-ignore\n const eventOrTouch = isDefined(event.touches) ? event.touches[0] : event;\n return {\n x: eventOrTouch.clientX,\n y: eventOrTouch.clientY,\n };\n }\n\n /**\n * Start the drag.\n *\n * @param {number} x The initial horizontal position.\n * @param {number} y The initial vertical position.\n */\n start(x: number, y: number) {\n const { props } = this;\n if (props.isGrabbing) {\n return;\n }\n\n // Reset state\n props.x = props.origin.x = props.final.x = x;\n props.y = props.origin.y = props.final.y = y;\n props.delta.x = props.distance.x = 0;\n props.delta.y = props.distance.y = 0;\n props.mode = props.MODES.START;\n props.isGrabbing = true;\n\n this.trigger(props);\n\n document.addEventListener('touchmove', this, PASSIVE_EVENT_OPTIONS);\n document.addEventListener('mousemove', this, PASSIVE_EVENT_OPTIONS);\n }\n\n /**\n * Stop the drag, or drop.\n */\n drop() {\n const { props, dampFactor, id } = this;\n\n if (!props.isGrabbing) {\n return;\n }\n\n document.removeEventListener('touchmove', this);\n document.removeEventListener('mousemove', this);\n\n props.isGrabbing = false;\n props.mode = props.MODES.DROP;\n props.hasInertia = true;\n props.final.x = inertiaFinalValue(props.x, props.delta.x, dampFactor);\n props.final.y = inertiaFinalValue(props.y, props.delta.y, dampFactor);\n this.previousEvent = null;\n\n this.trigger(props);\n\n setTimeout(() => {\n const raf = useRaf();\n raf.remove(id);\n raf.add(id, () => this.rafHandler());\n });\n }\n\n /**\n * Stop the drag.\n */\n stop() {\n const { props, id } = this;\n\n useRaf().remove(id);\n props.isGrabbing = false;\n props.hasInertia = false;\n props.mode = props.MODES.STOP;\n\n this.trigger(props);\n }\n\n /**\n * Raf service handler.\n */\n rafHandler() {\n const { props, dampFactor } = this;\n\n if (!props.isGrabbing) {\n props.x += props.delta.x;\n props.y += props.delta.y;\n props.distance.x = props.x - props.origin.x;\n props.distance.y = props.y - props.origin.y;\n props.delta.x *= dampFactor;\n props.delta.y *= dampFactor;\n props.mode = props.MODES.INERTIA;\n\n this.trigger(props);\n\n if (Math.abs(props.delta.x) < 0.1 && Math.abs(props.delta.y) < 0.1) {\n this.stop();\n }\n }\n }\n\n /**\n * Pointer service handler.\n */\n drag(event: TouchEvent | MouseEvent) {\n const { props } = this;\n\n if (props.isGrabbing) {\n const position = this.getEventPosition(event);\n props.x = position.x;\n props.y = position.y;\n\n if (this.previousEvent) {\n const previousPosition = this.getEventPosition(this.previousEvent);\n props.delta.x = position.x - previousPosition.x;\n props.delta.y = position.y - previousPosition.y;\n }\n\n props.final.x = position.x;\n props.final.y = position.y;\n props.distance.x = props.x - props.origin.x;\n props.distance.y = props.y - props.origin.y;\n props.mode = props.MODES.DRAG;\n\n this.trigger(props);\n this.previousEvent = event;\n }\n }\n\n /**\n * Handle any event.\n */\n handleEvent(event: TouchEvent | MouseEvent | PointerEvent | DragEvent) {\n switch (event.type) {\n case 'dragstart':\n event.preventDefault();\n break;\n case 'click':\n if (this.shouldPreventClick) {\n event.stopImmediatePropagation();\n event.stopPropagation();\n event.preventDefault();\n }\n break;\n case 'pointerup':\n case 'touchend':\n this.drop();\n break;\n case 'touchmove':\n case 'mousemove':\n if ((event as MouseEvent).buttons === 1 || (event as TouchEvent).touches?.length === 1) {\n this.drag(event);\n } else {\n this.drop();\n }\n break;\n default:\n if ((event as PointerEvent).button === 0) {\n this.start((event as PointerEvent).x, (event as PointerEvent).y);\n }\n }\n }\n}\n\n/**\n * Use the drag service.\n *\n * ```js\n * import { useDrag } from '@studiometa/js-toolkit/services';\n * const element = document.querySelector('.draggable');\n * const { add, remove, props } = useDrag(element, { dampFactor: 0.5 });\n * add('key', (props) => console.log(props));\n * remove('key');\n * props();\n * ```\n * @link https://js-toolkit.studiometa.dev/api/services/useDrag.html\n */\nexport function useDrag(target: HTMLElement, options: DragServiceOptions): DragServiceInterface {\n return DragService.getInstance<DragServiceInterface>(\n [target, JSON.stringify(options)],\n target,\n options,\n );\n}\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -26,5 +26,5 @@ export declare class KeyService extends AbstractService<KeyServiceProps> {
26
26
  /**
27
27
  * Use the keyboard service.
28
28
  * @link https://js-toolkit.studiometa.dev/api/services/useKey.html
29
- */
29
+ */
30
30
  export declare function useKey(): KeyServiceInterface;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/services/KeyService.ts"],
4
- "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { keyCodes } from '../utils/keyCodes.js';\n\nfunction getInitialKeyCodes(): Record<keyof typeof keyCodes, false> {\n return Object.fromEntries(Object.keys(keyCodes).map((key) => [key, false])) as Record<\n keyof typeof keyCodes,\n false\n >;\n}\n\nexport interface KeyServiceProps {\n event: KeyboardEvent;\n triggered: number;\n direction: 'up' | 'down' | 'none';\n isUp: boolean;\n isDown: boolean;\n ENTER: boolean;\n SPACE: boolean;\n TAB: boolean;\n ESC: boolean;\n LEFT: boolean;\n UP: boolean;\n RIGHT: boolean;\n DOWN: boolean;\n}\n\nexport type KeyServiceInterface = ServiceInterface<KeyServiceProps>;\n\nexport class KeyService extends AbstractService<KeyServiceProps> {\n static config: ServiceConfig = [[() => document, [['keydown'], ['keyup']]]];\n\n previousEvent: Event | null = null;\n\n props: KeyServiceProps = {\n event: null,\n triggered: 0,\n isUp: false,\n isDown: false,\n direction: 'none',\n ...getInitialKeyCodes(),\n };\n\n updateProps(event: KeyboardEvent): KeyServiceProps {\n const { props } = this;\n\n props.event = event;\n\n for (const [name, code] of Object.entries(keyCodes)) {\n props[name] = code === event.keyCode;\n }\n\n if (!this.previousEvent) {\n props.triggered = 0;\n }\n\n if (props.event.type === 'keydown' && this.previousEvent?.type === 'keydown') {\n props.triggered += 1;\n } else {\n props.triggered = 1;\n }\n\n this.previousEvent = props.event;\n\n props.direction = props.event.type === 'keydown' ? 'down' : 'up';\n props.isUp = props.event.type === 'keyup';\n props.isDown = props.event.type === 'keydown';\n\n return props;\n }\n\n handleEvent(event: KeyboardEvent) {\n this.trigger(this.updateProps(event));\n }\n}\n\n/**\n * Use the keyboard service.\n * @link https://js-toolkit.studiometa.dev/api/services/useKey.html\n*/\nexport function useKey(): KeyServiceInterface {\n return KeyService.getInstance();\n}\n"],
4
+ "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { keyCodes } from '../utils/keyCodes.js';\n\nfunction getInitialKeyCodes(): Record<keyof typeof keyCodes, false> {\n return Object.fromEntries(Object.keys(keyCodes).map((key) => [key, false])) as Record<\n keyof typeof keyCodes,\n false\n >;\n}\n\nexport interface KeyServiceProps {\n event: KeyboardEvent;\n triggered: number;\n direction: 'up' | 'down' | 'none';\n isUp: boolean;\n isDown: boolean;\n ENTER: boolean;\n SPACE: boolean;\n TAB: boolean;\n ESC: boolean;\n LEFT: boolean;\n UP: boolean;\n RIGHT: boolean;\n DOWN: boolean;\n}\n\nexport type KeyServiceInterface = ServiceInterface<KeyServiceProps>;\n\nexport class KeyService extends AbstractService<KeyServiceProps> {\n static config: ServiceConfig = [[() => document, [['keydown'], ['keyup']]]];\n\n previousEvent: Event | null = null;\n\n props: KeyServiceProps = {\n event: null,\n triggered: 0,\n isUp: false,\n isDown: false,\n direction: 'none',\n ...getInitialKeyCodes(),\n };\n\n updateProps(event: KeyboardEvent): KeyServiceProps {\n const { props } = this;\n\n props.event = event;\n\n for (const [name, code] of Object.entries(keyCodes)) {\n props[name] = code === event.keyCode;\n }\n\n if (!this.previousEvent) {\n props.triggered = 0;\n }\n\n if (props.event.type === 'keydown' && this.previousEvent?.type === 'keydown') {\n props.triggered += 1;\n } else {\n props.triggered = 1;\n }\n\n this.previousEvent = props.event;\n\n props.direction = props.event.type === 'keydown' ? 'down' : 'up';\n props.isUp = props.event.type === 'keyup';\n props.isDown = props.event.type === 'keydown';\n\n return props;\n }\n\n handleEvent(event: KeyboardEvent) {\n this.trigger(this.updateProps(event));\n }\n}\n\n/**\n * Use the keyboard service.\n * @link https://js-toolkit.studiometa.dev/api/services/useKey.html\n */\nexport function useKey(): KeyServiceInterface {\n return KeyService.getInstance();\n}\n"],
5
5
  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAEzB,SAAS,qBAA2D;AAClE,SAAO,OAAO,YAAY,OAAO,KAAK,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC;AAI5E;AAoBO,MAAM,mBAAmB,gBAAiC;AAAA,EAC/D,OAAO,SAAwB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,SAAS,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AAAA,EAE1E,gBAA8B;AAAA,EAE9B,QAAyB;AAAA,IACvB,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,GAAG,mBAAmB;AAAA,EACxB;AAAA,EAEA,YAAY,OAAuC;AACjD,UAAM,EAAE,MAAM,IAAI;AAElB,UAAM,QAAQ;AAEd,eAAW,CAAC,MAAM,IAAI,KAAK,OAAO,QAAQ,QAAQ,GAAG;AACnD,YAAM,IAAI,IAAI,SAAS,MAAM;AAAA,IAC/B;AAEA,QAAI,CAAC,KAAK,eAAe;AACvB,YAAM,YAAY;AAAA,IACpB;AAEA,QAAI,MAAM,MAAM,SAAS,aAAa,KAAK,eAAe,SAAS,WAAW;AAC5E,YAAM,aAAa;AAAA,IACrB,OAAO;AACL,YAAM,YAAY;AAAA,IACpB;AAEA,SAAK,gBAAgB,MAAM;AAE3B,UAAM,YAAY,MAAM,MAAM,SAAS,YAAY,SAAS;AAC5D,UAAM,OAAO,MAAM,MAAM,SAAS;AAClC,UAAM,SAAS,MAAM,MAAM,SAAS;AAEpC,WAAO;AAAA,EACT;AAAA,EAEA,YAAY,OAAsB;AAChC,SAAK,QAAQ,KAAK,YAAY,KAAK,CAAC;AAAA,EACtC;AACF;AAMO,SAAS,SAA8B;AAC5C,SAAO,WAAW,YAAY;AAChC;",
6
6
  "names": []
7
7
  }
@@ -12,5 +12,5 @@ export declare class LoadService extends AbstractService<LoadServiceProps> {
12
12
  /**
13
13
  * Use the load service.
14
14
  * @link https://js-toolkit.studiometa.dev/api/services/useLoad.html
15
- */
15
+ */
16
16
  export declare function useLoad(): LoadServiceInterface;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/services/LoadService.ts"],
4
- "sourcesContent": ["import type { ServiceInterface, ServiceConfig } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\n\nexport interface LoadServiceProps {\n time: DOMHighResTimeStamp;\n}\n\nexport type LoadServiceInterface = ServiceInterface<LoadServiceProps>;\n\nexport class LoadService extends AbstractService<LoadServiceProps> {\n static config: ServiceConfig = [[() => window, [['load']]]];\n\n props: LoadServiceProps = {\n time: performance.now(),\n };\n\n handleEvent() {\n this.props.time = window.performance.now();\n this.trigger(this.props);\n }\n}\n\n/**\n * Use the load service.\n * @link https://js-toolkit.studiometa.dev/api/services/useLoad.html\n*/\nexport function useLoad(): LoadServiceInterface {\n return LoadService.getInstance();\n}\n"],
4
+ "sourcesContent": ["import type { ServiceInterface, ServiceConfig } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\n\nexport interface LoadServiceProps {\n time: DOMHighResTimeStamp;\n}\n\nexport type LoadServiceInterface = ServiceInterface<LoadServiceProps>;\n\nexport class LoadService extends AbstractService<LoadServiceProps> {\n static config: ServiceConfig = [[() => window, [['load']]]];\n\n props: LoadServiceProps = {\n time: performance.now(),\n };\n\n handleEvent() {\n this.props.time = window.performance.now();\n this.trigger(this.props);\n }\n}\n\n/**\n * Use the load service.\n * @link https://js-toolkit.studiometa.dev/api/services/useLoad.html\n */\nexport function useLoad(): LoadServiceInterface {\n return LoadService.getInstance();\n}\n"],
5
5
  "mappings": "AACA,SAAS,uBAAuB;AAQzB,MAAM,oBAAoB,gBAAkC;AAAA,EACjE,OAAO,SAAwB,CAAC,CAAC,MAAM,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAAA,EAE1D,QAA0B;AAAA,IACxB,MAAM,YAAY,IAAI;AAAA,EACxB;AAAA,EAEA,cAAc;AACZ,SAAK,MAAM,OAAO,OAAO,YAAY,IAAI;AACzC,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;AAMO,SAAS,UAAgC;AAC9C,SAAO,YAAY,YAAY;AACjC;",
6
6
  "names": []
7
7
  }
@@ -17,5 +17,5 @@ export declare class MutationService extends AbstractService<MutationServiceProp
17
17
  /**
18
18
  * Use the mutation service.
19
19
  * @link https://js-toolkit.studiometa.dev/api/services/useMutation.html
20
- */
20
+ */
21
21
  export declare function useMutation(target?: Node, options?: MutationObserverInit): MutationServiceInterface;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/services/MutationService.ts"],
4
- "sourcesContent": ["import type { ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { isEmpty } from '../utils/is.js';\n\nexport interface MutationServiceProps {\n mutations: MutationRecord[];\n}\n\nexport type MutationServiceInterface = ServiceInterface<MutationServiceProps>;\n\nexport type MutationServiceOptions = MutationObserverInit;\n\nexport class MutationService extends AbstractService<MutationServiceProps> {\n props: MutationServiceProps = {\n mutations: [],\n };\n\n target: Node;\n\n options: MutationObserverInit;\n\n observer: MutationObserver;\n\n constructor(target?: Node, options?: MutationObserverInit) {\n super();\n this.target = target ?? document.documentElement;\n this.options = options;\n }\n\n init() {\n this.observer = new MutationObserver((mutations) => {\n this.props.mutations = mutations;\n this.trigger(this.props);\n });\n this.observer.observe(this.target, isEmpty(this.options) ? { attributes: true } : this.options);\n }\n\n kill() {\n this.observer.disconnect();\n this.observer = null;\n }\n}\n\n/**\n * Use the mutation service.\n * @link https://js-toolkit.studiometa.dev/api/services/useMutation.html\n*/\nexport function useMutation(\n target?: Node,\n options?: MutationObserverInit,\n): MutationServiceInterface {\n return MutationService.getInstance([target, JSON.stringify(options)], target, options);\n}\n"],
4
+ "sourcesContent": ["import type { ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { isEmpty } from '../utils/is.js';\n\nexport interface MutationServiceProps {\n mutations: MutationRecord[];\n}\n\nexport type MutationServiceInterface = ServiceInterface<MutationServiceProps>;\n\nexport type MutationServiceOptions = MutationObserverInit;\n\nexport class MutationService extends AbstractService<MutationServiceProps> {\n props: MutationServiceProps = {\n mutations: [],\n };\n\n target: Node;\n\n options: MutationObserverInit;\n\n observer: MutationObserver;\n\n constructor(target?: Node, options?: MutationObserverInit) {\n super();\n this.target = target ?? document.documentElement;\n this.options = options;\n }\n\n init() {\n this.observer = new MutationObserver((mutations) => {\n this.props.mutations = mutations;\n this.trigger(this.props);\n });\n this.observer.observe(this.target, isEmpty(this.options) ? { attributes: true } : this.options);\n }\n\n kill() {\n this.observer.disconnect();\n this.observer = null;\n }\n}\n\n/**\n * Use the mutation service.\n * @link https://js-toolkit.studiometa.dev/api/services/useMutation.html\n */\nexport function useMutation(\n target?: Node,\n options?: MutationObserverInit,\n): MutationServiceInterface {\n return MutationService.getInstance([target, JSON.stringify(options)], target, options);\n}\n"],
5
5
  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,eAAe;AAUjB,MAAM,wBAAwB,gBAAsC;AAAA,EACzE,QAA8B;AAAA,IAC5B,WAAW,CAAC;AAAA,EACd;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA,YAAY,QAAe,SAAgC;AACzD,UAAM;AACN,SAAK,SAAS,UAAU,SAAS;AACjC,SAAK,UAAU;AAAA,EACjB;AAAA,EAEA,OAAO;AACL,SAAK,WAAW,IAAI,iBAAiB,CAAC,cAAc;AAClD,WAAK,MAAM,YAAY;AACvB,WAAK,QAAQ,KAAK,KAAK;AAAA,IACzB,CAAC;AACD,SAAK,SAAS,QAAQ,KAAK,QAAQ,QAAQ,KAAK,OAAO,IAAI,EAAE,YAAY,KAAK,IAAI,KAAK,OAAO;AAAA,EAChG;AAAA,EAEA,OAAO;AACL,SAAK,SAAS,WAAW;AACzB,SAAK,WAAW;AAAA,EAClB;AACF;AAMO,SAAS,YACd,QACA,SAC0B;AAC1B,SAAO,gBAAgB,YAAY,CAAC,QAAQ,KAAK,UAAU,OAAO,CAAC,GAAG,QAAQ,OAAO;AACvF;",
6
6
  "names": []
7
7
  }
@@ -53,5 +53,5 @@ export declare class PointerService extends AbstractService<PointerServiceProps>
53
53
  /**
54
54
  * Use the pointer service.
55
55
  * @link https://js-toolkit.studiometa.dev/api/services/usePointer.html
56
- */
56
+ */
57
57
  export declare function usePointer(target?: HTMLElement | Window): PointerServiceInterface;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/services/PointerService.ts"],
4
- "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { ONCE_CAPTURE_EVENT_OPTIONS, PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';\n\nexport interface PointerServiceProps {\n event: MouseEvent | TouchEvent;\n isDown: boolean;\n x: number;\n y: number;\n changed: { x: boolean; y: boolean };\n last: { x: number; y: number };\n delta: { x: number; y: number };\n progress: { x: number; y: number };\n max: { x: number; y: number };\n}\n\nexport type PointerServiceInterface = ServiceInterface<PointerServiceProps>;\n\nexport class PointerService extends AbstractService<PointerServiceProps> {\n static config: ServiceConfig = [\n [\n () => document,\n [\n ['mouseenter', ONCE_CAPTURE_EVENT_OPTIONS],\n ['mousemove', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['touchmove', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['mousedown', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['touchstart', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['mouseup', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['touchend', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ],\n ],\n ];\n\n target: HTMLElement | Window | undefined;\n\n props: PointerServiceProps = {\n event: null,\n isDown: false,\n x: 0,\n y: 0,\n changed: {\n x: false,\n y: false,\n },\n last: {\n x: 0,\n y: 0,\n },\n delta: {\n x: 0,\n y: 0,\n },\n progress: {\n x: 0.5,\n y: 0.5,\n },\n max: {\n x: 0,\n y: 0,\n },\n };\n\n constructor(target: HTMLElement | undefined) {\n super();\n this.target = target;\n const targetSize = this.getTargetSize();\n this.props.x = this.props.last.x = targetSize.x / 2;\n this.props.y = this.props.last.y = targetSize.y / 2;\n this.props.max.x = targetSize.width;\n this.props.max.y = targetSize.height;\n }\n\n isTouchEvent(event: TouchEvent | MouseEvent): boolean {\n return typeof TouchEvent !== 'undefined' && event instanceof TouchEvent;\n }\n\n getTargetSize() {\n const { target } = this;\n return target instanceof Element\n ? target.getBoundingClientRect()\n : {\n width: window.innerWidth,\n height: window.innerHeight,\n x: 0,\n y: 0,\n };\n }\n\n /**\n * Update the pointer positions.\n */\n updateProps(event: MouseEvent | TouchEvent): PointerServiceProps {\n const { props } = this;\n\n props.event = event;\n const yLast = props.y;\n const xLast = props.x;\n\n const targetSize = this.getTargetSize();\n\n // Check pointer Y\n // We either get data from a touch event `event.touches[0].clientY` or from\n // a mouse event `event.clientY`.\n let y = this.isTouchEvent(event)\n ? (event as TouchEvent).touches[0]?.clientY\n : (event as MouseEvent).clientY;\n y -= targetSize.y;\n if (y !== props.y) {\n props.y = y;\n }\n\n // Check pointer X\n // We either get data from a touch event `event.touches[0].clientX` or from\n // a mouse event `event.clientX`.\n let x = this.isTouchEvent(event)\n ? (event as TouchEvent).touches[0]?.clientX\n : (event as MouseEvent).clientX;\n x -= targetSize.x;\n if (x !== props.x) {\n props.x = x;\n }\n\n props.changed.x = props.x !== xLast;\n props.changed.y = props.y !== yLast;\n\n props.last.x = xLast;\n props.last.y = yLast;\n\n props.delta.x = props.x - xLast;\n props.delta.y = props.y - yLast;\n\n props.max.x = targetSize.width;\n props.max.y = targetSize.height;\n\n props.progress.x = props.x / props.max.x;\n props.progress.y = props.y / props.max.y;\n\n return props;\n }\n\n /**\n * Handle events.\n *\n * @todo handle scroll as well\n */\n handleEvent(event: MouseEvent | TouchEvent) {\n // eslint-disable-next-line default-case\n switch (event.type) {\n case 'mouseenter':\n case 'mousemove':\n case 'touchmove':\n this.trigger(this.updateProps(event));\n break;\n case 'mousedown':\n case 'touchstart':\n this.props.isDown = true;\n this.trigger(this.props);\n break;\n case 'mouseup':\n case 'touchend':\n this.props.isDown = false;\n this.trigger(this.props);\n break;\n }\n }\n}\n\n/**\n * Use the pointer service.\n * @link https://js-toolkit.studiometa.dev/api/services/usePointer.html\n*/\nexport function usePointer(target: HTMLElement | Window = window): PointerServiceInterface {\n return PointerService.getInstance([target], target);\n}\n"],
4
+ "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { ONCE_CAPTURE_EVENT_OPTIONS, PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';\n\nexport interface PointerServiceProps {\n event: MouseEvent | TouchEvent;\n isDown: boolean;\n x: number;\n y: number;\n changed: { x: boolean; y: boolean };\n last: { x: number; y: number };\n delta: { x: number; y: number };\n progress: { x: number; y: number };\n max: { x: number; y: number };\n}\n\nexport type PointerServiceInterface = ServiceInterface<PointerServiceProps>;\n\nexport class PointerService extends AbstractService<PointerServiceProps> {\n static config: ServiceConfig = [\n [\n () => document,\n [\n ['mouseenter', ONCE_CAPTURE_EVENT_OPTIONS],\n ['mousemove', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['touchmove', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['mousedown', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['touchstart', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['mouseup', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['touchend', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ],\n ],\n ];\n\n target: HTMLElement | Window | undefined;\n\n props: PointerServiceProps = {\n event: null,\n isDown: false,\n x: 0,\n y: 0,\n changed: {\n x: false,\n y: false,\n },\n last: {\n x: 0,\n y: 0,\n },\n delta: {\n x: 0,\n y: 0,\n },\n progress: {\n x: 0.5,\n y: 0.5,\n },\n max: {\n x: 0,\n y: 0,\n },\n };\n\n constructor(target: HTMLElement | undefined) {\n super();\n this.target = target;\n const targetSize = this.getTargetSize();\n this.props.x = this.props.last.x = targetSize.x / 2;\n this.props.y = this.props.last.y = targetSize.y / 2;\n this.props.max.x = targetSize.width;\n this.props.max.y = targetSize.height;\n }\n\n isTouchEvent(event: TouchEvent | MouseEvent): boolean {\n return typeof TouchEvent !== 'undefined' && event instanceof TouchEvent;\n }\n\n getTargetSize() {\n const { target } = this;\n return target instanceof Element\n ? target.getBoundingClientRect()\n : {\n width: window.innerWidth,\n height: window.innerHeight,\n x: 0,\n y: 0,\n };\n }\n\n /**\n * Update the pointer positions.\n */\n updateProps(event: MouseEvent | TouchEvent): PointerServiceProps {\n const { props } = this;\n\n props.event = event;\n const yLast = props.y;\n const xLast = props.x;\n\n const targetSize = this.getTargetSize();\n\n // Check pointer Y\n // We either get data from a touch event `event.touches[0].clientY` or from\n // a mouse event `event.clientY`.\n let y = this.isTouchEvent(event)\n ? (event as TouchEvent).touches[0]?.clientY\n : (event as MouseEvent).clientY;\n y -= targetSize.y;\n if (y !== props.y) {\n props.y = y;\n }\n\n // Check pointer X\n // We either get data from a touch event `event.touches[0].clientX` or from\n // a mouse event `event.clientX`.\n let x = this.isTouchEvent(event)\n ? (event as TouchEvent).touches[0]?.clientX\n : (event as MouseEvent).clientX;\n x -= targetSize.x;\n if (x !== props.x) {\n props.x = x;\n }\n\n props.changed.x = props.x !== xLast;\n props.changed.y = props.y !== yLast;\n\n props.last.x = xLast;\n props.last.y = yLast;\n\n props.delta.x = props.x - xLast;\n props.delta.y = props.y - yLast;\n\n props.max.x = targetSize.width;\n props.max.y = targetSize.height;\n\n props.progress.x = props.x / props.max.x;\n props.progress.y = props.y / props.max.y;\n\n return props;\n }\n\n /**\n * Handle events.\n *\n * @todo handle scroll as well\n */\n handleEvent(event: MouseEvent | TouchEvent) {\n // eslint-disable-next-line default-case\n switch (event.type) {\n case 'mouseenter':\n case 'mousemove':\n case 'touchmove':\n this.trigger(this.updateProps(event));\n break;\n case 'mousedown':\n case 'touchstart':\n this.props.isDown = true;\n this.trigger(this.props);\n break;\n case 'mouseup':\n case 'touchend':\n this.props.isDown = false;\n this.trigger(this.props);\n break;\n }\n }\n}\n\n/**\n * Use the pointer service.\n * @link https://js-toolkit.studiometa.dev/api/services/usePointer.html\n */\nexport function usePointer(target: HTMLElement | Window = window): PointerServiceInterface {\n return PointerService.getInstance([target], target);\n}\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -13,7 +13,7 @@ export declare class RafService extends AbstractService<RafServiceProps> {
13
13
  /**
14
14
  * @private
15
15
  */
16
- scheduler: Record<"read" | "write" | "afterWrite", (fn: () => unknown) => void>;
16
+ scheduler: Record<"afterWrite" | "read" | "write", (fn: () => unknown) => void>;
17
17
  props: RafServiceProps;
18
18
  trigger(props: RafServiceProps): void;
19
19
  loop(): void;
@@ -23,5 +23,5 @@ export declare class RafService extends AbstractService<RafServiceProps> {
23
23
  /**
24
24
  * Use the RequestAnimationFrame (raf) service.
25
25
  * @link https://js-toolkit.studiometa.dev/api/services/useRaf.html
26
- */
26
+ */
27
27
  export declare function useRaf(): RafServiceInterface;
@@ -15,16 +15,22 @@ class RafService extends AbstractService {
15
15
  delta: 0
16
16
  };
17
17
  trigger(props) {
18
- for (const callback of this.callbacks.values()) {
19
- this.scheduler.read(() => {
18
+ this.scheduler.read(() => {
19
+ const writeQueue = [];
20
+ for (const callback of this.callbacks.values()) {
20
21
  const render = callback(props);
21
22
  if (isFunction(render)) {
22
- this.scheduler.write(() => {
23
- render(props);
24
- });
23
+ writeQueue.push(render);
25
24
  }
26
- });
27
- }
25
+ }
26
+ if (writeQueue.length > 0) {
27
+ this.scheduler.write(() => {
28
+ for (let i = 0; i < writeQueue.length; i++) {
29
+ writeQueue[i](props);
30
+ }
31
+ });
32
+ }
33
+ });
28
34
  }
29
35
  loop() {
30
36
  const time = performance.now();
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/services/RafService.ts"],
4
- "sourcesContent": ["import type { ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { domScheduler } from '../utils/scheduler.js';\nimport { isFunction } from '../utils/is.js';\n\nexport interface RafServiceProps {\n time: DOMHighResTimeStamp;\n delta: number;\n}\n\nexport type RafServiceInterface = ServiceInterface<RafServiceProps>;\n\nexport class RafService extends AbstractService<RafServiceProps> {\n /**\n * @private\n */\n isTicking = false;\n\n /**\n * @private\n */\n scheduler = domScheduler;\n\n props: RafServiceProps = {\n time: performance.now(),\n delta: 0,\n };\n\n trigger(props: RafServiceProps) {\n for (const callback of this.callbacks.values()) {\n this.scheduler.read(() => {\n const render = callback(props) as (() => unknown) | void;\n if (isFunction(render)) {\n this.scheduler.write(() => {\n // @ts-ignore\n render(props);\n });\n }\n });\n }\n }\n\n loop() {\n const time = performance.now();\n this.props.delta = time - this.props.time;\n this.props.time = time;\n this.trigger(this.props);\n\n if (!this.isTicking) {\n return;\n }\n\n requestAnimationFrame(() => this.loop());\n }\n\n init() {\n this.isTicking = true;\n requestAnimationFrame(() => this.loop());\n }\n\n kill() {\n this.isTicking = false;\n }\n}\n\n/**\n * Use the RequestAnimationFrame (raf) service.\n * @link https://js-toolkit.studiometa.dev/api/services/useRaf.html\n*/\nexport function useRaf(): RafServiceInterface {\n return RafService.getInstance();\n}\n"],
5
- "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AASpB,MAAM,mBAAmB,gBAAiC;AAAA;AAAA;AAAA;AAAA,EAI/D,YAAY;AAAA;AAAA;AAAA;AAAA,EAKZ,YAAY;AAAA,EAEZ,QAAyB;AAAA,IACvB,MAAM,YAAY,IAAI;AAAA,IACtB,OAAO;AAAA,EACT;AAAA,EAEA,QAAQ,OAAwB;AAC9B,eAAW,YAAY,KAAK,UAAU,OAAO,GAAG;AAC9C,WAAK,UAAU,KAAK,MAAM;AACxB,cAAM,SAAS,SAAS,KAAK;AAC7B,YAAI,WAAW,MAAM,GAAG;AACtB,eAAK,UAAU,MAAM,MAAM;AAEzB,mBAAO,KAAK;AAAA,UACd,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,OAAO;AACL,UAAM,OAAO,YAAY,IAAI;AAC7B,SAAK,MAAM,QAAQ,OAAO,KAAK,MAAM;AACrC,SAAK,MAAM,OAAO;AAClB,SAAK,QAAQ,KAAK,KAAK;AAEvB,QAAI,CAAC,KAAK,WAAW;AACnB;AAAA,IACF;AAEA,0BAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EACzC;AAAA,EAEA,OAAO;AACL,SAAK,YAAY;AACjB,0BAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EACzC;AAAA,EAEA,OAAO;AACL,SAAK,YAAY;AAAA,EACnB;AACF;AAMO,SAAS,SAA8B;AAC5C,SAAO,WAAW,YAAY;AAChC;",
4
+ "sourcesContent": ["import type { ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { domScheduler } from '../utils/scheduler.js';\nimport { isFunction } from '../utils/is.js';\n\nexport interface RafServiceProps {\n time: DOMHighResTimeStamp;\n delta: number;\n}\n\nexport type RafServiceInterface = ServiceInterface<RafServiceProps>;\n\nexport class RafService extends AbstractService<RafServiceProps> {\n /**\n * @private\n */\n isTicking = false;\n\n /**\n * @private\n */\n scheduler = domScheduler;\n\n props: RafServiceProps = {\n time: performance.now(),\n delta: 0,\n };\n\n trigger(props: RafServiceProps) {\n this.scheduler.read(() => {\n const writeQueue: Array<(props: RafServiceProps) => unknown> = [];\n\n for (const callback of this.callbacks.values()) {\n const render = callback(props) as ((props: RafServiceProps) => unknown) | void;\n if (isFunction(render)) {\n writeQueue.push(render);\n }\n }\n\n if (writeQueue.length > 0) {\n this.scheduler.write(() => {\n for (let i = 0; i < writeQueue.length; i++) {\n writeQueue[i](props);\n }\n });\n }\n });\n }\n\n loop() {\n const time = performance.now();\n this.props.delta = time - this.props.time;\n this.props.time = time;\n this.trigger(this.props);\n\n if (!this.isTicking) {\n return;\n }\n\n requestAnimationFrame(() => this.loop());\n }\n\n init() {\n this.isTicking = true;\n requestAnimationFrame(() => this.loop());\n }\n\n kill() {\n this.isTicking = false;\n }\n}\n\n/**\n * Use the RequestAnimationFrame (raf) service.\n * @link https://js-toolkit.studiometa.dev/api/services/useRaf.html\n */\nexport function useRaf(): RafServiceInterface {\n return RafService.getInstance();\n}\n"],
5
+ "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AASpB,MAAM,mBAAmB,gBAAiC;AAAA;AAAA;AAAA;AAAA,EAI/D,YAAY;AAAA;AAAA;AAAA;AAAA,EAKZ,YAAY;AAAA,EAEZ,QAAyB;AAAA,IACvB,MAAM,YAAY,IAAI;AAAA,IACtB,OAAO;AAAA,EACT;AAAA,EAEA,QAAQ,OAAwB;AAC9B,SAAK,UAAU,KAAK,MAAM;AACxB,YAAM,aAAyD,CAAC;AAEhE,iBAAW,YAAY,KAAK,UAAU,OAAO,GAAG;AAC9C,cAAM,SAAS,SAAS,KAAK;AAC7B,YAAI,WAAW,MAAM,GAAG;AACtB,qBAAW,KAAK,MAAM;AAAA,QACxB;AAAA,MACF;AAEA,UAAI,WAAW,SAAS,GAAG;AACzB,aAAK,UAAU,MAAM,MAAM;AACzB,mBAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;AAC1C,uBAAW,CAAC,EAAE,KAAK;AAAA,UACrB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,OAAO;AACL,UAAM,OAAO,YAAY,IAAI;AAC7B,SAAK,MAAM,QAAQ,OAAO,KAAK,MAAM;AACrC,SAAK,MAAM,OAAO;AAClB,SAAK,QAAQ,KAAK,KAAK;AAEvB,QAAI,CAAC,KAAK,WAAW;AACnB;AAAA,IACF;AAEA,0BAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EACzC;AAAA,EAEA,OAAO;AACL,SAAK,YAAY;AACjB,0BAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EACzC;AAAA,EAEA,OAAO;AACL,SAAK,YAAY;AAAA,EACnB;AACF;AAMO,SAAS,SAA8B;AAC5C,SAAO,WAAW,YAAY;AAChC;",
6
6
  "names": []
7
7
  }
@@ -26,5 +26,5 @@ export declare class ResizeService<T extends Features['breakpoints'] = Features[
26
26
  /**
27
27
  * Use the resize service.
28
28
  * @link https://js-toolkit.studiometa.dev/api/services/useResize.html
29
- */
29
+ */
30
30
  export declare function useResize<T extends Features['breakpoints'] = Features['breakpoints']>(breakpoints?: T): ResizeServiceInterface<T>;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/services/ResizeService.ts"],
4
- "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { debounce } from '../utils/debounce.js';\nimport { cache } from '../utils/cache.js';\n\nexport interface ResizeServiceProps<U extends Features['breakpoints'] = Features['breakpoints']> {\n width: number;\n height: number;\n ratio: number;\n orientation: 'square' | 'landscape' | 'portrait';\n breakpoint: keyof U;\n breakpoints: Array<keyof U>;\n activeBreakpoints: Record<keyof U, boolean>;\n}\n\nexport type ResizeServiceInterface<U extends Features['breakpoints'] = Features['breakpoints']> =\n ServiceInterface<ResizeServiceProps<U>>;\n\nexport class ResizeService<\n T extends Features['breakpoints'] = Features['breakpoints'],\n> extends AbstractService<ResizeServiceProps<T>> {\n static config: ServiceConfig = [[() => window, [['resize']]]];\n\n breakpoints: T;\n\n props: ResizeServiceProps<T> = {\n width: window.innerWidth,\n height: window.innerHeight,\n ratio: window.innerWidth / window.innerHeight,\n orientation: 'square',\n get breakpoint() {\n return Object.keys(this.activeBreakpoints)\n .toReversed()\n .find((name) => this.activeBreakpoints[name]);\n },\n get breakpoints() {\n return Object.keys(this.activeBreakpoints);\n },\n activeBreakpoints: {} as Record<keyof T, boolean>,\n };\n\n constructor(breakpoints: T) {\n super();\n this.breakpoints = breakpoints;\n\n Object.defineProperty(this.props, 'activeBreakpoints', {\n get: () => {\n const activeBreakpoints = {};\n\n for (const [name, breakpoint] of Object.entries(\n this.breakpoints ?? features.get('breakpoints'),\n )) {\n activeBreakpoints[name] = cache(\n [this, window.innerWidth, window.innerHeight, breakpoint],\n () => window.matchMedia(`(min-width: ${breakpoint})`).matches,\n );\n }\n\n return activeBreakpoints as Record<keyof T, boolean>;\n },\n });\n }\n\n /**\n * Update props.\n */\n updateProps(): ResizeServiceProps<T> {\n const { props } = this;\n\n props.width = window.innerWidth;\n props.height = window.innerHeight;\n props.ratio = window.innerWidth / window.innerHeight;\n props.orientation = 'square';\n\n if (props.ratio > 1) {\n props.orientation = 'landscape';\n }\n\n if (props.ratio < 1) {\n props.orientation = 'portrait';\n }\n\n return props;\n }\n\n onResizeDebounce = debounce(() => {\n this.trigger(this.updateProps());\n }, 100);\n\n handleEvent() {\n this.onResizeDebounce();\n }\n}\n\n/**\n * Use the resize service.\n * @link https://js-toolkit.studiometa.dev/api/services/useResize.html\n*/\nexport function useResize<T extends Features['breakpoints'] = Features['breakpoints']>(\n breakpoints?: T,\n): ResizeServiceInterface<T> {\n return ResizeService.getInstance([breakpoints], breakpoints);\n}\n"],
4
+ "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { debounce } from '../utils/debounce.js';\nimport { cache } from '../utils/cache.js';\n\nexport interface ResizeServiceProps<U extends Features['breakpoints'] = Features['breakpoints']> {\n width: number;\n height: number;\n ratio: number;\n orientation: 'square' | 'landscape' | 'portrait';\n breakpoint: keyof U;\n breakpoints: Array<keyof U>;\n activeBreakpoints: Record<keyof U, boolean>;\n}\n\nexport type ResizeServiceInterface<U extends Features['breakpoints'] = Features['breakpoints']> =\n ServiceInterface<ResizeServiceProps<U>>;\n\nexport class ResizeService<\n T extends Features['breakpoints'] = Features['breakpoints'],\n> extends AbstractService<ResizeServiceProps<T>> {\n static config: ServiceConfig = [[() => window, [['resize']]]];\n\n breakpoints: T;\n\n props: ResizeServiceProps<T> = {\n width: window.innerWidth,\n height: window.innerHeight,\n ratio: window.innerWidth / window.innerHeight,\n orientation: 'square',\n get breakpoint() {\n return Object.keys(this.activeBreakpoints)\n .toReversed()\n .find((name) => this.activeBreakpoints[name]);\n },\n get breakpoints() {\n return Object.keys(this.activeBreakpoints);\n },\n activeBreakpoints: {} as Record<keyof T, boolean>,\n };\n\n constructor(breakpoints: T) {\n super();\n this.breakpoints = breakpoints;\n\n Object.defineProperty(this.props, 'activeBreakpoints', {\n get: () => {\n const activeBreakpoints = {};\n\n for (const [name, breakpoint] of Object.entries(\n this.breakpoints ?? features.get('breakpoints'),\n )) {\n activeBreakpoints[name] = cache(\n [this, window.innerWidth, window.innerHeight, breakpoint],\n () => window.matchMedia(`(min-width: ${breakpoint})`).matches,\n );\n }\n\n return activeBreakpoints as Record<keyof T, boolean>;\n },\n });\n }\n\n /**\n * Update props.\n */\n updateProps(): ResizeServiceProps<T> {\n const { props } = this;\n\n props.width = window.innerWidth;\n props.height = window.innerHeight;\n props.ratio = window.innerWidth / window.innerHeight;\n props.orientation = 'square';\n\n if (props.ratio > 1) {\n props.orientation = 'landscape';\n }\n\n if (props.ratio < 1) {\n props.orientation = 'portrait';\n }\n\n return props;\n }\n\n onResizeDebounce = debounce(() => {\n this.trigger(this.updateProps());\n }, 100);\n\n handleEvent() {\n this.onResizeDebounce();\n }\n}\n\n/**\n * Use the resize service.\n * @link https://js-toolkit.studiometa.dev/api/services/useResize.html\n */\nexport function useResize<T extends Features['breakpoints'] = Features['breakpoints']>(\n breakpoints?: T,\n): ResizeServiceInterface<T> {\n return ResizeService.getInstance([breakpoints], breakpoints);\n}\n"],
5
5
  "mappings": "AACA,SAAS,uBAAuB;AAEhC,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,aAAa;AAef,MAAM,sBAEH,gBAAuC;AAAA,EAC/C,OAAO,SAAwB,CAAC,CAAC,MAAM,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;AAAA,EAE5D;AAAA,EAEA,QAA+B;AAAA,IAC7B,OAAO,OAAO;AAAA,IACd,QAAQ,OAAO;AAAA,IACf,OAAO,OAAO,aAAa,OAAO;AAAA,IAClC,aAAa;AAAA,IACb,IAAI,aAAa;AACf,aAAO,OAAO,KAAK,KAAK,iBAAiB,EACtC,WAAW,EACX,KAAK,CAAC,SAAS,KAAK,kBAAkB,IAAI,CAAC;AAAA,IAChD;AAAA,IACA,IAAI,cAAc;AAChB,aAAO,OAAO,KAAK,KAAK,iBAAiB;AAAA,IAC3C;AAAA,IACA,mBAAmB,CAAC;AAAA,EACtB;AAAA,EAEA,YAAY,aAAgB;AAC1B,UAAM;AACN,SAAK,cAAc;AAEnB,WAAO,eAAe,KAAK,OAAO,qBAAqB;AAAA,MACrD,KAAK,MAAM;AACT,cAAM,oBAAoB,CAAC;AAE3B,mBAAW,CAAC,MAAM,UAAU,KAAK,OAAO;AAAA,UACtC,KAAK,eAAe,SAAS,IAAI,aAAa;AAAA,QAChD,GAAG;AACD,4BAAkB,IAAI,IAAI;AAAA,YACxB,CAAC,MAAM,OAAO,YAAY,OAAO,aAAa,UAAU;AAAA,YACxD,MAAM,OAAO,WAAW,eAAe,UAAU,GAAG,EAAE;AAAA,UACxD;AAAA,QACF;AAEA,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,cAAqC;AACnC,UAAM,EAAE,MAAM,IAAI;AAElB,UAAM,QAAQ,OAAO;AACrB,UAAM,SAAS,OAAO;AACtB,UAAM,QAAQ,OAAO,aAAa,OAAO;AACzC,UAAM,cAAc;AAEpB,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,mBAAmB,SAAS,MAAM;AAChC,SAAK,QAAQ,KAAK,YAAY,CAAC;AAAA,EACjC,GAAG,GAAG;AAAA,EAEN,cAAc;AACZ,SAAK,iBAAiB;AAAA,EACxB;AACF;AAMO,SAAS,UACd,aAC2B;AAC3B,SAAO,cAAc,YAAY,CAAC,WAAW,GAAG,WAAW;AAC7D;",
6
6
  "names": []
7
7
  }
@@ -45,14 +45,32 @@ export interface ScrollServiceProps {
45
45
  export type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
46
46
  export declare class ScrollService extends AbstractService<ScrollServiceProps> {
47
47
  static config: ServiceConfig;
48
+ /**
49
+ * Cached scroll max values, updated on resize and first scroll.
50
+ * @private
51
+ */
52
+ __maxX: number | null;
53
+ __maxY: number | null;
54
+ /**
55
+ * Observe scroll container size changes that do not trigger window resize.
56
+ * @private
57
+ */
58
+ __resizeObserver: ResizeObserver | null;
48
59
  props: ScrollServiceProps;
49
60
  updateProps(): ScrollServiceProps;
50
- update(): void;
61
+ update(trigger?: boolean): void;
51
62
  onScrollDebounced: (...args: unknown[]) => void;
52
63
  /**
53
- * Scroll handler.
64
+ * Update cached max scroll values on resize.
65
+ * @private
66
+ */
67
+ __updateMaxValues(): void;
68
+ /**
69
+ * Scroll and resize handler.
54
70
  */
55
- handleEvent(): void;
71
+ handleEvent(event: Event): void;
72
+ init(): void;
73
+ kill(): void;
56
74
  }
57
75
  /**
58
76
  * Use the scroll service.
@@ -65,5 +83,5 @@ export declare class ScrollService extends AbstractService<ScrollServiceProps> {
65
83
  * props();
66
84
  * ```
67
85
  * @link https://js-toolkit.studiometa.dev/api/services/useScroll.html
68
- */
86
+ */
69
87
  export declare function useScroll(): ScrollServiceInterface;
@@ -3,7 +3,21 @@ import { debounce } from "../utils/debounce.js";
3
3
  import { PASSIVE_CAPTURE_EVENT_OPTIONS } from "./utils.js";
4
4
  import { nextTick } from "../utils/nextTick.js";
5
5
  class ScrollService extends AbstractService {
6
- static config = [[() => document, [["scroll", PASSIVE_CAPTURE_EVENT_OPTIONS]]]];
6
+ static config = [
7
+ [() => document, [["scroll", PASSIVE_CAPTURE_EVENT_OPTIONS]]],
8
+ [() => window, [["resize", PASSIVE_CAPTURE_EVENT_OPTIONS]]]
9
+ ];
10
+ /**
11
+ * Cached scroll max values, updated on resize and first scroll.
12
+ * @private
13
+ */
14
+ __maxX = null;
15
+ __maxY = null;
16
+ /**
17
+ * Observe scroll container size changes that do not trigger window resize.
18
+ * @private
19
+ */
20
+ __resizeObserver = null;
7
21
  props = {
8
22
  x: window.scrollX,
9
23
  y: window.scrollY,
@@ -58,8 +72,11 @@ class ScrollService extends AbstractService {
58
72
  props.last.y = props.lastY = yLast;
59
73
  props.delta.x = props.deltaX = props.x - xLast;
60
74
  props.delta.y = props.deltaY = props.y - yLast;
61
- props.max.x = props.maxX = document.scrollingElement.scrollWidth - window.innerWidth;
62
- props.max.y = props.maxY = document.scrollingElement.scrollHeight - window.innerHeight;
75
+ if (this.__maxX === null || this.__maxY === null) {
76
+ this.__updateMaxValues();
77
+ }
78
+ props.max.x = props.maxX = this.__maxX;
79
+ props.max.y = props.maxY = this.__maxY;
63
80
  props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;
64
81
  props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;
65
82
  props.isUp = props.y < yLast;
@@ -70,19 +87,50 @@ class ScrollService extends AbstractService {
70
87
  props.direction.y = props.isDown ? "DOWN" : props.isUp ? "UP" : "NONE";
71
88
  return props;
72
89
  }
73
- update() {
74
- nextTick(() => this.updateProps()).then(() => this.trigger(this.props));
90
+ update(trigger = true) {
91
+ nextTick(() => this.updateProps()).then(() => {
92
+ if (trigger) {
93
+ this.trigger(this.props);
94
+ }
95
+ });
75
96
  }
76
97
  onScrollDebounced = debounce(() => {
77
98
  this.update();
78
99
  }, 100);
79
100
  /**
80
- * Scroll handler.
101
+ * Update cached max scroll values on resize.
102
+ * @private
81
103
  */
82
- handleEvent() {
104
+ __updateMaxValues() {
105
+ this.__maxX = document.scrollingElement.scrollWidth - window.innerWidth;
106
+ this.__maxY = document.scrollingElement.scrollHeight - window.innerHeight;
107
+ }
108
+ /**
109
+ * Scroll and resize handler.
110
+ */
111
+ handleEvent(event) {
112
+ if (event.type === "resize") {
113
+ this.__updateMaxValues();
114
+ this.update(false);
115
+ return;
116
+ }
83
117
  this.update();
84
118
  this.onScrollDebounced();
85
119
  }
120
+ init() {
121
+ super.init();
122
+ if (typeof ResizeObserver === "function" && document.scrollingElement) {
123
+ this.__resizeObserver = new ResizeObserver(() => {
124
+ this.__updateMaxValues();
125
+ });
126
+ this.__resizeObserver.observe(document.scrollingElement);
127
+ }
128
+ }
129
+ kill() {
130
+ this.__resizeObserver?.disconnect();
131
+ this.__resizeObserver = null;
132
+ super.kill();
133
+ }
86
134
  }
87
135
  function useScroll() {
88
136
  return ScrollService.getInstance();
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/services/ScrollService.ts"],
4
- "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { debounce } from '../utils/debounce.js';\nimport { PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';\nimport { nextTick } from '../utils/nextTick.js';\n\nexport interface ScrollServiceProps {\n x: number;\n y: number;\n changed: { x: boolean; y: boolean };\n changedX: boolean;\n changedY: boolean;\n last: { x: number; y: number };\n lastX: number;\n lastY: number;\n delta: { x: number; y: number };\n deltaX: number;\n deltaY: number;\n progress: { x: number; y: number };\n progressX: number;\n progressY: number;\n max: { x: number; y: number };\n maxX: number;\n maxY: number;\n direction: { x: 'LEFT' | 'RIGHT' | 'NONE'; y: 'UP' | 'DOWN' | 'NONE' };\n isUp: boolean;\n isRight: boolean;\n isDown: boolean;\n isLeft: boolean;\n}\n\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport class ScrollService extends AbstractService<ScrollServiceProps> {\n static config: ServiceConfig = [[() => document, [['scroll', PASSIVE_CAPTURE_EVENT_OPTIONS]]]];\n\n props: ScrollServiceProps = {\n x: window.scrollX,\n y: window.scrollY,\n changed: {\n x: false,\n y: false,\n },\n changedX: false,\n changedY: false,\n last: {\n x: window.scrollX,\n y: window.scrollY,\n },\n lastX: window.scrollX,\n lastY: window.scrollY,\n delta: {\n x: 0,\n y: 0,\n },\n deltaX: 0,\n deltaY: 0,\n max: {\n x: document.scrollingElement.scrollWidth - window.innerWidth,\n y: document.scrollingElement.scrollHeight - window.innerHeight,\n },\n maxX: document.scrollingElement.scrollWidth - window.innerWidth,\n maxY: document.scrollingElement.scrollHeight - window.innerHeight,\n progress: {\n x: 0,\n y: 0,\n },\n progressX: 0,\n progressY: 0,\n direction: {\n x: 'NONE',\n y: 'NONE',\n },\n isUp: false,\n isRight: false,\n isDown: false,\n isLeft: false,\n };\n\n updateProps(): ScrollServiceProps {\n const { props } = this;\n const yLast = props.y;\n const xLast = props.x;\n\n props.y = window.scrollY;\n props.x = window.scrollX;\n props.changed.x = props.changedX = props.x !== xLast;\n props.changed.y = props.changedY = props.y !== yLast;\n props.last.x = props.lastX = xLast;\n props.last.y = props.lastY = yLast;\n props.delta.x = props.deltaX = props.x - xLast;\n props.delta.y = props.deltaY = props.y - yLast;\n props.max.x = props.maxX = document.scrollingElement.scrollWidth - window.innerWidth;\n props.max.y = props.maxY = document.scrollingElement.scrollHeight - window.innerHeight;\n props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;\n props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;\n props.isUp = props.y < yLast;\n props.isRight = props.x > xLast;\n props.isDown = props.y > yLast;\n props.isLeft = props.x < xLast;\n /* eslint-disable no-nested-ternary */\n props.direction.x = props.isRight ? 'RIGHT' : props.isLeft ? 'LEFT' : 'NONE';\n props.direction.y = props.isDown ? 'DOWN' : props.isUp ? 'UP' : 'NONE';\n /* eslint-enable no-nested-ternary */\n\n return props;\n }\n\n update() {\n nextTick(() => this.updateProps()).then(() => this.trigger(this.props));\n }\n\n onScrollDebounced = debounce(() => {\n this.update();\n }, 100);\n\n /**\n * Scroll handler.\n */\n handleEvent() {\n this.update();\n this.onScrollDebounced();\n }\n}\n\n/**\n * Use the scroll service.\n *\n * ```js\n * import { useScroll } from '@studiometa/js-toolkit/services';\n * const { add, remove, props } = useScroll();\n * add(key, (props) => {});\n * remove(key);\n * props();\n * ```\n * @link https://js-toolkit.studiometa.dev/api/services/useScroll.html\n*/\nexport function useScroll(): ScrollServiceInterface {\n return ScrollService.getInstance();\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { debounce } from '../utils/debounce.js';\nimport { PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';\nimport { nextTick } from '../utils/nextTick.js';\n\nexport interface ScrollServiceProps {\n x: number;\n y: number;\n changed: { x: boolean; y: boolean };\n changedX: boolean;\n changedY: boolean;\n last: { x: number; y: number };\n lastX: number;\n lastY: number;\n delta: { x: number; y: number };\n deltaX: number;\n deltaY: number;\n progress: { x: number; y: number };\n progressX: number;\n progressY: number;\n max: { x: number; y: number };\n maxX: number;\n maxY: number;\n direction: { x: 'LEFT' | 'RIGHT' | 'NONE'; y: 'UP' | 'DOWN' | 'NONE' };\n isUp: boolean;\n isRight: boolean;\n isDown: boolean;\n isLeft: boolean;\n}\n\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport class ScrollService extends AbstractService<ScrollServiceProps> {\n static config: ServiceConfig = [\n [() => document, [['scroll', PASSIVE_CAPTURE_EVENT_OPTIONS]]],\n [() => window, [['resize', PASSIVE_CAPTURE_EVENT_OPTIONS]]],\n ];\n\n /**\n * Cached scroll max values, updated on resize and first scroll.\n * @private\n */\n __maxX: number | null = null;\n __maxY: number | null = null;\n\n /**\n * Observe scroll container size changes that do not trigger window resize.\n * @private\n */\n __resizeObserver: ResizeObserver | null = null;\n\n props: ScrollServiceProps = {\n x: window.scrollX,\n y: window.scrollY,\n changed: {\n x: false,\n y: false,\n },\n changedX: false,\n changedY: false,\n last: {\n x: window.scrollX,\n y: window.scrollY,\n },\n lastX: window.scrollX,\n lastY: window.scrollY,\n delta: {\n x: 0,\n y: 0,\n },\n deltaX: 0,\n deltaY: 0,\n max: {\n x: document.scrollingElement.scrollWidth - window.innerWidth,\n y: document.scrollingElement.scrollHeight - window.innerHeight,\n },\n maxX: document.scrollingElement.scrollWidth - window.innerWidth,\n maxY: document.scrollingElement.scrollHeight - window.innerHeight,\n progress: {\n x: 0,\n y: 0,\n },\n progressX: 0,\n progressY: 0,\n direction: {\n x: 'NONE',\n y: 'NONE',\n },\n isUp: false,\n isRight: false,\n isDown: false,\n isLeft: false,\n };\n\n updateProps(): ScrollServiceProps {\n const { props } = this;\n const yLast = props.y;\n const xLast = props.x;\n\n props.y = window.scrollY;\n props.x = window.scrollX;\n props.changed.x = props.changedX = props.x !== xLast;\n props.changed.y = props.changedY = props.y !== yLast;\n props.last.x = props.lastX = xLast;\n props.last.y = props.lastY = yLast;\n props.delta.x = props.deltaX = props.x - xLast;\n props.delta.y = props.deltaY = props.y - yLast;\n if (this.__maxX === null || this.__maxY === null) {\n this.__updateMaxValues();\n }\n props.max.x = props.maxX = this.__maxX;\n props.max.y = props.maxY = this.__maxY;\n props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;\n props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;\n props.isUp = props.y < yLast;\n props.isRight = props.x > xLast;\n props.isDown = props.y > yLast;\n props.isLeft = props.x < xLast;\n /* eslint-disable no-nested-ternary */\n props.direction.x = props.isRight ? 'RIGHT' : props.isLeft ? 'LEFT' : 'NONE';\n props.direction.y = props.isDown ? 'DOWN' : props.isUp ? 'UP' : 'NONE';\n /* eslint-enable no-nested-ternary */\n\n return props;\n }\n\n update(trigger = true) {\n nextTick(() => this.updateProps()).then(() => {\n if (trigger) {\n this.trigger(this.props);\n }\n });\n }\n\n onScrollDebounced = debounce(() => {\n this.update();\n }, 100);\n\n /**\n * Update cached max scroll values on resize.\n * @private\n */\n __updateMaxValues() {\n this.__maxX = document.scrollingElement.scrollWidth - window.innerWidth;\n this.__maxY = document.scrollingElement.scrollHeight - window.innerHeight;\n }\n\n /**\n * Scroll and resize handler.\n */\n handleEvent(event: Event) {\n if (event.type === 'resize') {\n this.__updateMaxValues();\n this.update(false);\n return;\n }\n\n this.update();\n this.onScrollDebounced();\n }\n\n init() {\n super.init();\n\n if (typeof ResizeObserver === 'function' && document.scrollingElement) {\n this.__resizeObserver = new ResizeObserver(() => {\n this.__updateMaxValues();\n });\n this.__resizeObserver.observe(document.scrollingElement);\n }\n }\n\n kill() {\n this.__resizeObserver?.disconnect();\n this.__resizeObserver = null;\n super.kill();\n }\n}\n\n/**\n * Use the scroll service.\n *\n * ```js\n * import { useScroll } from '@studiometa/js-toolkit/services';\n * const { add, remove, props } = useScroll();\n * add(key, (props) => {});\n * remove(key);\n * props();\n * ```\n * @link https://js-toolkit.studiometa.dev/api/services/useScroll.html\n */\nexport function useScroll(): ScrollServiceInterface {\n return ScrollService.getInstance();\n}\n"],
5
+ "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,qCAAqC;AAC9C,SAAS,gBAAgB;AA6BlB,MAAM,sBAAsB,gBAAoC;AAAA,EACrE,OAAO,SAAwB;AAAA,IAC7B,CAAC,MAAM,UAAU,CAAC,CAAC,UAAU,6BAA6B,CAAC,CAAC;AAAA,IAC5D,CAAC,MAAM,QAAQ,CAAC,CAAC,UAAU,6BAA6B,CAAC,CAAC;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAwB;AAAA,EACxB,SAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMxB,mBAA0C;AAAA,EAE1C,QAA4B;AAAA,IAC1B,GAAG,OAAO;AAAA,IACV,GAAG,OAAO;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,MAAM;AAAA,MACJ,GAAG,OAAO;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAAA,IACA,OAAO,OAAO;AAAA,IACd,OAAO,OAAO;AAAA,IACd,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,KAAK;AAAA,MACH,GAAG,SAAS,iBAAiB,cAAc,OAAO;AAAA,MAClD,GAAG,SAAS,iBAAiB,eAAe,OAAO;AAAA,IACrD;AAAA,IACA,MAAM,SAAS,iBAAiB,cAAc,OAAO;AAAA,IACrD,MAAM,SAAS,iBAAiB,eAAe,OAAO;AAAA,IACtD,UAAU;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AAAA,EAEA,cAAkC;AAChC,UAAM,EAAE,MAAM,IAAI;AAClB,UAAM,QAAQ,MAAM;AACpB,UAAM,QAAQ,MAAM;AAEpB,UAAM,IAAI,OAAO;AACjB,UAAM,IAAI,OAAO;AACjB,UAAM,QAAQ,IAAI,MAAM,WAAW,MAAM,MAAM;AAC/C,UAAM,QAAQ,IAAI,MAAM,WAAW,MAAM,MAAM;AAC/C,UAAM,KAAK,IAAI,MAAM,QAAQ;AAC7B,UAAM,KAAK,IAAI,MAAM,QAAQ;AAC7B,UAAM,MAAM,IAAI,MAAM,SAAS,MAAM,IAAI;AACzC,UAAM,MAAM,IAAI,MAAM,SAAS,MAAM,IAAI;AACzC,QAAI,KAAK,WAAW,QAAQ,KAAK,WAAW,MAAM;AAChD,WAAK,kBAAkB;AAAA,IACzB;AACA,UAAM,IAAI,IAAI,MAAM,OAAO,KAAK;AAChC,UAAM,IAAI,IAAI,MAAM,OAAO,KAAK;AAChC,UAAM,SAAS,IAAI,MAAM,YAAY,MAAM,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,MAAM,IAAI;AACjF,UAAM,SAAS,IAAI,MAAM,YAAY,MAAM,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,MAAM,IAAI;AACjF,UAAM,OAAO,MAAM,IAAI;AACvB,UAAM,UAAU,MAAM,IAAI;AAC1B,UAAM,SAAS,MAAM,IAAI;AACzB,UAAM,SAAS,MAAM,IAAI;AAEzB,UAAM,UAAU,IAAI,MAAM,UAAU,UAAU,MAAM,SAAS,SAAS;AACtE,UAAM,UAAU,IAAI,MAAM,SAAS,SAAS,MAAM,OAAO,OAAO;AAGhE,WAAO;AAAA,EACT;AAAA,EAEA,OAAO,UAAU,MAAM;AACrB,aAAS,MAAM,KAAK,YAAY,CAAC,EAAE,KAAK,MAAM;AAC5C,UAAI,SAAS;AACX,aAAK,QAAQ,KAAK,KAAK;AAAA,MACzB;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,oBAAoB,SAAS,MAAM;AACjC,SAAK,OAAO;AAAA,EACd,GAAG,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAMN,oBAAoB;AAClB,SAAK,SAAS,SAAS,iBAAiB,cAAc,OAAO;AAC7D,SAAK,SAAS,SAAS,iBAAiB,eAAe,OAAO;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,OAAc;AACxB,QAAI,MAAM,SAAS,UAAU;AAC3B,WAAK,kBAAkB;AACvB,WAAK,OAAO,KAAK;AACjB;AAAA,IACF;AAEA,SAAK,OAAO;AACZ,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEA,OAAO;AACL,UAAM,KAAK;AAEX,QAAI,OAAO,mBAAmB,cAAc,SAAS,kBAAkB;AACrE,WAAK,mBAAmB,IAAI,eAAe,MAAM;AAC/C,aAAK,kBAAkB;AAAA,MACzB,CAAC;AACD,WAAK,iBAAiB,QAAQ,SAAS,gBAAgB;AAAA,IACzD;AAAA,EACF;AAAA,EAEA,OAAO;AACL,SAAK,kBAAkB,WAAW;AAClC,SAAK,mBAAmB;AACxB,UAAM,KAAK;AAAA,EACb;AACF;AAcO,SAAS,YAAoC;AAClD,SAAO,cAAc,YAAY;AACnC;",
6
6
  "names": []
7
7
  }
package/utils/cache.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
2
  * Cache the result of a callback in map instances.
3
3
  * @link https://js-toolkit.studiometa.dev/utils/cache.html
4
- */
4
+ */
5
5
  export declare function cache<T extends any>(keys: any | any[], callback: () => T): T;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/utils/cache.ts"],
4
- "sourcesContent": ["import { isArray } from './is.js';\n\n/**\n * Cache the result of a callback in map instances.\n * @link https://js-toolkit.studiometa.dev/utils/cache.html\n*/\nexport function cache<T extends any>(keys: any | any[], callback: () => T): T {\n const normalizedKeys = isArray(keys) ? keys : [keys];\n let value = (globalThis.__JS_TOOLKIT_CACHE__ ??= new Map());\n let index = 1;\n\n for (const key of normalizedKeys) {\n if (!value.has(key)) {\n const newValue = index === normalizedKeys.length ? callback() : new Map();\n value.set(key, newValue);\n }\n\n value = value.get(key);\n index += 1;\n }\n\n return value as T;\n}\n"],
4
+ "sourcesContent": ["import { isArray } from './is.js';\n\n/**\n * Cache the result of a callback in map instances.\n * @link https://js-toolkit.studiometa.dev/utils/cache.html\n */\nexport function cache<T extends any>(keys: any | any[], callback: () => T): T {\n const normalizedKeys = isArray(keys) ? keys : [keys];\n let value = (globalThis.__JS_TOOLKIT_CACHE__ ??= new Map());\n let index = 1;\n\n for (const key of normalizedKeys) {\n if (!value.has(key)) {\n const newValue = index === normalizedKeys.length ? callback() : new Map();\n value.set(key, newValue);\n }\n\n value = value.get(key);\n index += 1;\n }\n\n return value as T;\n}\n"],
5
5
  "mappings": "AAAA,SAAS,eAAe;AAMjB,SAAS,MAAqB,MAAmB,UAAsB;AAC5E,QAAM,iBAAiB,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AACnD,MAAI,QAAS,WAAW,yBAAyB,oBAAI,IAAI;AACzD,MAAI,QAAQ;AAEZ,aAAW,OAAO,gBAAgB;AAChC,QAAI,CAAC,MAAM,IAAI,GAAG,GAAG;AACnB,YAAM,WAAW,UAAU,eAAe,SAAS,SAAS,IAAI,oBAAI,IAAI;AACxE,YAAM,IAAI,KAAK,QAAQ;AAAA,IACzB;AAEA,YAAQ,MAAM,IAAI,GAAG;AACrB,aAAS;AAAA,EACX;AAEA,SAAO;AACT;",
6
6
  "names": []
7
7
  }
@@ -11,12 +11,12 @@
11
11
  * @param {boolean} force Force usage of non-square DOMElements
12
12
  * @return {Circle} Circle object that can be used in collides functions
13
13
  * @link https://js-toolkit.studiometa.dev/utils/collision/boundingRectToCircle.html
14
- */
14
+ */
15
15
  export declare function boundingRectToCircle({ x, y, width, height }: {
16
+ height: any;
17
+ width: any;
16
18
  x: any;
17
19
  y: any;
18
- width: any;
19
- height: any;
20
20
  }, force?: boolean): {
21
21
  x: any;
22
22
  y: any;