@studiometa/js-toolkit 3.0.0-beta.3 → 3.0.0-beta.4
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.
package/package.json
CHANGED
package/services/DragService.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { AbstractService } from "./AbstractService.js";
|
|
2
2
|
import { useRaf } from "./RafService.js";
|
|
3
|
-
import { isDefined
|
|
3
|
+
import { isDefined } from "../utils/is.js";
|
|
4
|
+
import { inertiaFinalValue } from "../utils/math/index.js";
|
|
4
5
|
import { PASSIVE_EVENT_OPTIONS, CAPTURE_EVENT_OPTIONS } from "./utils.js";
|
|
5
6
|
let count = 0;
|
|
6
7
|
class DragService extends AbstractService {
|
|
@@ -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
|
|
5
|
-
"mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB,SAAS,
|
|
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\ntype DragLifecycle = 'start' | 'drag' | 'drop' | 'inertia' | 'stop';\n\nexport interface DragServiceProps {\n /**\n * The current mode of the dragging logic.\n */\n mode: DragLifecycle;\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: Record<Uppercase<DragLifecycle>, DragLifecycle> = {\n START: 'start',\n DRAG: 'drag',\n DROP: 'drop',\n INERTIA: 'inertia',\n STOP: 'stop',\n };\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 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 = DragService.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 = DragService.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 = DragService.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 = DragService.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 = DragService.MODES.DRAG;\n\n this.trigger(props);\n this.previousEvent = event;\n }\n }\n\n /**\n * Handle any event.\n */\n handleEvent(event: 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 this.drag(event);\n break;\n default:\n if (event.button === 0) {\n this.start(event.x, event.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 */\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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"root":["../packages/global.d.ts","../packages/js-toolkit/index.ts","../packages/js-toolkit/base/base.ts","../packages/js-toolkit/base/features.ts","../packages/js-toolkit/base/index.ts","../packages/js-toolkit/base/types.ts","../packages/js-toolkit/base/utils.ts","../packages/js-toolkit/base/managers/abstractmanager.ts","../packages/js-toolkit/base/managers/childrenmanager.ts","../packages/js-toolkit/base/managers/eventsmanager.ts","../packages/js-toolkit/base/managers/optionsmanager.ts","../packages/js-toolkit/base/managers/refsmanager.ts","../packages/js-toolkit/base/managers/responsiveoptionsmanager.ts","../packages/js-toolkit/base/managers/servicesmanager.ts","../packages/js-toolkit/base/managers/index.ts","../packages/js-toolkit/decorators/index.ts","../packages/js-toolkit/decorators/withbreakpointmanager.ts","../packages/js-toolkit/decorators/withbreakpointobserver.ts","../packages/js-toolkit/decorators/withdrag.ts","../packages/js-toolkit/decorators/withextraconfig.ts","../packages/js-toolkit/decorators/withfreezedoptions.ts","../packages/js-toolkit/decorators/withintersectionobserver.ts","../packages/js-toolkit/decorators/withmountonmediaquery.ts","../packages/js-toolkit/decorators/withmountwheninview.ts","../packages/js-toolkit/decorators/withmountwhenprefersmotion.ts","../packages/js-toolkit/decorators/withmutation.ts","../packages/js-toolkit/decorators/withname.ts","../packages/js-toolkit/decorators/withrelativepointer.ts","../packages/js-toolkit/decorators/withresponsiveoptions.ts","../packages/js-toolkit/decorators/withscrolledinview/index.ts","../packages/js-toolkit/decorators/withscrolledinview/types.ts","../packages/js-toolkit/decorators/withscrolledinview/utils.ts","../packages/js-toolkit/decorators/withscrolledinview/withscrolledinview.ts","../packages/js-toolkit/helpers/createapp.ts","../packages/js-toolkit/helpers/getclosestparent.ts","../packages/js-toolkit/helpers/getdirectchildren.ts","../packages/js-toolkit/helpers/getinstancefromelement.ts","../packages/js-toolkit/helpers/importoninteraction.ts","../packages/js-toolkit/helpers/importonmediaquery.ts","../packages/js-toolkit/helpers/importwhenidle.ts","../packages/js-toolkit/helpers/importwhenprefersmotion.ts","../packages/js-toolkit/helpers/importwhenvisible.ts","../packages/js-toolkit/helpers/index.ts","../packages/js-toolkit/helpers/utils.ts","../packages/js-toolkit/services/abstractservice.ts","../packages/js-toolkit/services/dragservice.ts","../packages/js-toolkit/services/keyservice.ts","../packages/js-toolkit/services/loadservice.ts","../packages/js-toolkit/services/mutationservice.ts","../packages/js-toolkit/services/pointerservice.ts","../packages/js-toolkit/services/rafservice.ts","../packages/js-toolkit/services/resizeservice.ts","../packages/js-toolkit/services/scrollservice.ts","../packages/js-toolkit/services/index.ts","../packages/js-toolkit/services/utils.ts","../packages/js-toolkit/utils/queue.ts","../packages/js-toolkit/utils/smartqueue.ts","../packages/js-toolkit/utils/cache.ts","../packages/js-toolkit/utils/debounce.ts","../packages/js-toolkit/utils/getcomponentresolver.ts","../packages/js-toolkit/utils/has.ts","../packages/js-toolkit/utils/history.ts","../packages/js-toolkit/utils/index.ts","../packages/js-toolkit/utils/is.ts","../packages/js-toolkit/utils/keycodes.ts","../packages/js-toolkit/utils/loadelement.ts","../packages/js-toolkit/utils/memo.ts","../packages/js-toolkit/utils/memoize.ts","../packages/js-toolkit/utils/nextframe.ts","../packages/js-toolkit/utils/nextmicrotask.ts","../packages/js-toolkit/utils/nexttick.ts","../packages/js-toolkit/utils/noop.ts","../packages/js-toolkit/utils/random.ts","../packages/js-toolkit/utils/scheduler.ts","../packages/js-toolkit/utils/scrollto.ts","../packages/js-toolkit/utils/throttle.ts","../packages/js-toolkit/utils/trapfocus.ts","../packages/js-toolkit/utils/tween.ts","../packages/js-toolkit/utils/wait.ts","../packages/js-toolkit/utils/collide/boundingrecttocircle.ts","../packages/js-toolkit/utils/collide/collidecirclecircle.ts","../packages/js-toolkit/utils/collide/collidecirclerect.ts","../packages/js-toolkit/utils/collide/collidepointcircle.ts","../packages/js-toolkit/utils/collide/collidepointrect.ts","../packages/js-toolkit/utils/collide/colliderectrect.ts","../packages/js-toolkit/utils/collide/index.ts","../packages/js-toolkit/utils/css/animate.ts","../packages/js-toolkit/utils/css/classes.ts","../packages/js-toolkit/utils/css/getoffsetsizes.ts","../packages/js-toolkit/utils/css/index.ts","../packages/js-toolkit/utils/css/matrix.ts","../packages/js-toolkit/utils/css/styles.ts","../packages/js-toolkit/utils/css/transform.ts","../packages/js-toolkit/utils/css/transition.ts","../packages/js-toolkit/utils/css/utils.ts","../packages/js-toolkit/utils/dom/ancestors.ts","../packages/js-toolkit/utils/dom/createelement.ts","../packages/js-toolkit/utils/dom/index.ts","../packages/js-toolkit/utils/math/clamp.ts","../packages/js-toolkit/utils/math/clamp01.ts","../packages/js-toolkit/utils/math/createeases.ts","../packages/js-toolkit/utils/math/createrange.ts","../packages/js-toolkit/utils/math/damp.ts","../packages/js-toolkit/utils/math/ease.ts","../packages/js-toolkit/utils/math/index.ts","../packages/js-toolkit/utils/math/inertiafinalvalue.ts","../packages/js-toolkit/utils/math/lerp.ts","../packages/js-toolkit/utils/math/map.ts","../packages/js-toolkit/utils/math/mean.ts","../packages/js-toolkit/utils/math/round.ts","../packages/js-toolkit/utils/object/getallproperties.ts","../packages/js-toolkit/utils/string/changecase.ts","../packages/js-toolkit/utils/string/endswith.ts","../packages/js-toolkit/utils/string/index.ts","../packages/js-toolkit/utils/string/startswith.ts","../packages/js-toolkit/utils/string/withleadingcharacters.ts","../packages/js-toolkit/utils/string/withleadingslash.ts","../packages/js-toolkit/utils/string/withtrailingcharacters.ts","../packages/js-toolkit/utils/string/withtrailingslash.ts","../packages/js-toolkit/utils/string/withoutleadingcharacters.ts","../packages/js-toolkit/utils/string/withoutleadingcharactersrecursive.ts","../packages/js-toolkit/utils/string/withoutleadingslash.ts","../packages/js-toolkit/utils/string/withouttrailingcharacters.ts","../packages/js-toolkit/utils/string/withouttrailingcharactersrecursive.ts","../packages/js-toolkit/utils/string/withouttrailingslash.ts"],"version":"5.
|
|
1
|
+
{"root":["../packages/global.d.ts","../packages/js-toolkit/index.ts","../packages/js-toolkit/base/base.ts","../packages/js-toolkit/base/features.ts","../packages/js-toolkit/base/index.ts","../packages/js-toolkit/base/types.ts","../packages/js-toolkit/base/utils.ts","../packages/js-toolkit/base/managers/abstractmanager.ts","../packages/js-toolkit/base/managers/childrenmanager.ts","../packages/js-toolkit/base/managers/eventsmanager.ts","../packages/js-toolkit/base/managers/optionsmanager.ts","../packages/js-toolkit/base/managers/refsmanager.ts","../packages/js-toolkit/base/managers/responsiveoptionsmanager.ts","../packages/js-toolkit/base/managers/servicesmanager.ts","../packages/js-toolkit/base/managers/index.ts","../packages/js-toolkit/decorators/index.ts","../packages/js-toolkit/decorators/withbreakpointmanager.ts","../packages/js-toolkit/decorators/withbreakpointobserver.ts","../packages/js-toolkit/decorators/withdrag.ts","../packages/js-toolkit/decorators/withextraconfig.ts","../packages/js-toolkit/decorators/withfreezedoptions.ts","../packages/js-toolkit/decorators/withintersectionobserver.ts","../packages/js-toolkit/decorators/withmountonmediaquery.ts","../packages/js-toolkit/decorators/withmountwheninview.ts","../packages/js-toolkit/decorators/withmountwhenprefersmotion.ts","../packages/js-toolkit/decorators/withmutation.ts","../packages/js-toolkit/decorators/withname.ts","../packages/js-toolkit/decorators/withrelativepointer.ts","../packages/js-toolkit/decorators/withresponsiveoptions.ts","../packages/js-toolkit/decorators/withscrolledinview/index.ts","../packages/js-toolkit/decorators/withscrolledinview/types.ts","../packages/js-toolkit/decorators/withscrolledinview/utils.ts","../packages/js-toolkit/decorators/withscrolledinview/withscrolledinview.ts","../packages/js-toolkit/helpers/createapp.ts","../packages/js-toolkit/helpers/getclosestparent.ts","../packages/js-toolkit/helpers/getdirectchildren.ts","../packages/js-toolkit/helpers/getinstancefromelement.ts","../packages/js-toolkit/helpers/importoninteraction.ts","../packages/js-toolkit/helpers/importonmediaquery.ts","../packages/js-toolkit/helpers/importwhenidle.ts","../packages/js-toolkit/helpers/importwhenprefersmotion.ts","../packages/js-toolkit/helpers/importwhenvisible.ts","../packages/js-toolkit/helpers/index.ts","../packages/js-toolkit/helpers/utils.ts","../packages/js-toolkit/services/abstractservice.ts","../packages/js-toolkit/services/dragservice.ts","../packages/js-toolkit/services/keyservice.ts","../packages/js-toolkit/services/loadservice.ts","../packages/js-toolkit/services/mutationservice.ts","../packages/js-toolkit/services/pointerservice.ts","../packages/js-toolkit/services/rafservice.ts","../packages/js-toolkit/services/resizeservice.ts","../packages/js-toolkit/services/scrollservice.ts","../packages/js-toolkit/services/index.ts","../packages/js-toolkit/services/utils.ts","../packages/js-toolkit/utils/queue.ts","../packages/js-toolkit/utils/smartqueue.ts","../packages/js-toolkit/utils/cache.ts","../packages/js-toolkit/utils/debounce.ts","../packages/js-toolkit/utils/getcomponentresolver.ts","../packages/js-toolkit/utils/has.ts","../packages/js-toolkit/utils/history.ts","../packages/js-toolkit/utils/index.ts","../packages/js-toolkit/utils/is.ts","../packages/js-toolkit/utils/keycodes.ts","../packages/js-toolkit/utils/loadelement.ts","../packages/js-toolkit/utils/memo.ts","../packages/js-toolkit/utils/memoize.ts","../packages/js-toolkit/utils/nextframe.ts","../packages/js-toolkit/utils/nextmicrotask.ts","../packages/js-toolkit/utils/nexttick.ts","../packages/js-toolkit/utils/noop.ts","../packages/js-toolkit/utils/random.ts","../packages/js-toolkit/utils/scheduler.ts","../packages/js-toolkit/utils/scrollto.ts","../packages/js-toolkit/utils/throttle.ts","../packages/js-toolkit/utils/trapfocus.ts","../packages/js-toolkit/utils/tween.ts","../packages/js-toolkit/utils/wait.ts","../packages/js-toolkit/utils/collide/boundingrecttocircle.ts","../packages/js-toolkit/utils/collide/collidecirclecircle.ts","../packages/js-toolkit/utils/collide/collidecirclerect.ts","../packages/js-toolkit/utils/collide/collidepointcircle.ts","../packages/js-toolkit/utils/collide/collidepointrect.ts","../packages/js-toolkit/utils/collide/colliderectrect.ts","../packages/js-toolkit/utils/collide/index.ts","../packages/js-toolkit/utils/css/animate.ts","../packages/js-toolkit/utils/css/classes.ts","../packages/js-toolkit/utils/css/getoffsetsizes.ts","../packages/js-toolkit/utils/css/index.ts","../packages/js-toolkit/utils/css/matrix.ts","../packages/js-toolkit/utils/css/styles.ts","../packages/js-toolkit/utils/css/transform.ts","../packages/js-toolkit/utils/css/transition.ts","../packages/js-toolkit/utils/css/utils.ts","../packages/js-toolkit/utils/dom/ancestors.ts","../packages/js-toolkit/utils/dom/createelement.ts","../packages/js-toolkit/utils/dom/index.ts","../packages/js-toolkit/utils/math/clamp.ts","../packages/js-toolkit/utils/math/clamp01.ts","../packages/js-toolkit/utils/math/createeases.ts","../packages/js-toolkit/utils/math/createrange.ts","../packages/js-toolkit/utils/math/damp.ts","../packages/js-toolkit/utils/math/ease.ts","../packages/js-toolkit/utils/math/index.ts","../packages/js-toolkit/utils/math/inertiafinalvalue.ts","../packages/js-toolkit/utils/math/lerp.ts","../packages/js-toolkit/utils/math/map.ts","../packages/js-toolkit/utils/math/mean.ts","../packages/js-toolkit/utils/math/round.ts","../packages/js-toolkit/utils/object/getallproperties.ts","../packages/js-toolkit/utils/string/changecase.ts","../packages/js-toolkit/utils/string/endswith.ts","../packages/js-toolkit/utils/string/index.ts","../packages/js-toolkit/utils/string/startswith.ts","../packages/js-toolkit/utils/string/withleadingcharacters.ts","../packages/js-toolkit/utils/string/withleadingslash.ts","../packages/js-toolkit/utils/string/withtrailingcharacters.ts","../packages/js-toolkit/utils/string/withtrailingslash.ts","../packages/js-toolkit/utils/string/withoutleadingcharacters.ts","../packages/js-toolkit/utils/string/withoutleadingcharactersrecursive.ts","../packages/js-toolkit/utils/string/withoutleadingslash.ts","../packages/js-toolkit/utils/string/withouttrailingcharacters.ts","../packages/js-toolkit/utils/string/withouttrailingcharactersrecursive.ts","../packages/js-toolkit/utils/string/withouttrailingslash.ts"],"version":"5.7.2"}
|
package/utils/tween.js
CHANGED
|
@@ -2,7 +2,7 @@ import { cubicBezier } from "@motionone/easing";
|
|
|
2
2
|
import { lerp, map, clamp01, damp, inertiaFinalValue } from "./math/index.js";
|
|
3
3
|
import { isDefined, isArray, isNumber } from "./is.js";
|
|
4
4
|
import { noop, noopValue as linear } from "./noop.js";
|
|
5
|
-
import { useRaf } from "../services/
|
|
5
|
+
import { useRaf } from "../services/RafService.js";
|
|
6
6
|
let id = 0;
|
|
7
7
|
const DEFAULT_PROGRESS_PRECISION = 1e-4;
|
|
8
8
|
function normalizeEase(ease) {
|
package/utils/tween.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/js-toolkit/utils/tween.ts"],
|
|
4
|
-
"sourcesContent": ["import { cubicBezier } from '@motionone/easing';\nimport { lerp, map, clamp01, damp, inertiaFinalValue } from './math/index.js';\nimport { isDefined, isArray, isNumber } from './is.js';\nimport { noop, noopValue as linear } from './noop.js';\nimport { useRaf } from '../services/
|
|
4
|
+
"sourcesContent": ["import { cubicBezier } from '@motionone/easing';\nimport { lerp, map, clamp01, damp, inertiaFinalValue } from './math/index.js';\nimport { isDefined, isArray, isNumber } from './is.js';\nimport { noop, noopValue as linear } from './noop.js';\nimport { useRaf } from '../services/RafService.js';\nimport type { EasingFunction } from './math/createEases.js';\n\nlet id = 0;\nconst DEFAULT_PROGRESS_PRECISION = 0.0001;\n\nexport type BezierCurve = [number, number, number, number];\n\n/**\n * Controls for a tween.\n */\nexport interface Tween {\n /**\n * Start the tween from the beginning.\n */\n start: () => void;\n /**\n * Finish the tween and set its state to the end.\n */\n finish: () => void;\n /**\n * Pause the tween.\n */\n pause: () => void;\n /**\n * Start the tween from the current paused progress.\n */\n play: () => void;\n /**\n * Set and get the tween's progress.\n */\n progress: (progress?: number) => number;\n}\n\nexport interface TweenOptions {\n /**\n * The duration, in seconds.\n * Defaults to `1`.\n */\n duration?: number;\n /**\n * The delay, in seconds.\n * Defaults to `0`.\n */\n delay?: number;\n /**\n * The easing function or bezier curve to use.\n * Defaults to a linear easing function.\n */\n easing?: EasingFunction | BezierCurve;\n /**\n * The smooth factor. Setting this option to `true` or a `number` will disable the `duration` option.\n */\n smooth?: true | number;\n /**\n * The precision for when to consider the tween finished.\n * Defaults to `0.0001`.\n */\n precision?: number;\n /**\n * A callback executed on start.\n */\n onStart?: (progress: number) => void;\n /**\n * A callback executed each time the progress is updated.\n */\n onProgress?: (progress: number) => void;\n /**\n * A callback executed when the tween is finished.\n */\n onFinish?: (progress: number) => void;\n}\n\n/**\n * Normalize a easing function with default fallbacks.\n */\nexport function normalizeEase(ease: EasingFunction | BezierCurve): EasingFunction {\n if (!isDefined(ease)) {\n return linear;\n }\n\n if (isArray(ease)) {\n return cubicBezier(...ease);\n }\n\n return ease;\n}\n\n/**\n * Tween from 0 to 1.\n */\nexport function tween(callback: (progress: number) => unknown, options: TweenOptions = {}): Tween {\n const raf = useRaf();\n\n let progressValue = 0;\n let easedProgress = 0;\n\n const isSmooth = isDefined(options.smooth) && (isNumber(options.smooth) || options.smooth);\n const smoothFactor = isNumber(options.smooth) ? options.smooth : 0.1;\n const precision = options.precision ?? DEFAULT_PROGRESS_PRECISION;\n const ease = normalizeEase(options.easing);\n\n let delay = options.delay ?? 0;\n delay *= 1000;\n let duration = options.duration ?? 1;\n duration *= 1000;\n\n /* eslint-disable @typescript-eslint/no-use-before-define */\n let startTime = getStartTime();\n let endTime = getEndTime(startTime);\n /* eslint-enable @typescript-eslint/no-use-before-define */\n\n const key = `tw-${id}`;\n id += 1;\n\n const { onStart = noop, onProgress = noop, onFinish = noop } = options;\n let isRunning = false;\n\n /**\n * Pause the animation.\n */\n function pause() {\n isRunning = false;\n raf.remove(key);\n }\n\n /**\n * Set the progress value.\n */\n function progress(newProgress: number) {\n if (!isDefined(newProgress)) {\n return easedProgress;\n }\n\n progressValue = newProgress;\n easedProgress = isSmooth\n ? damp(progressValue, easedProgress, smoothFactor, precision)\n : ease(progressValue);\n\n // Stop when reaching precision\n if (Math.abs(1 - easedProgress) < precision) {\n progressValue = 1;\n easedProgress = 1;\n }\n\n callback(easedProgress);\n onProgress(easedProgress);\n\n if (easedProgress === 1) {\n pause();\n requestAnimationFrame(() => onFinish(easedProgress));\n }\n\n return easedProgress;\n }\n\n /**\n * Loop for rendering the animation.\n */\n function tick(props: { time: number }) {\n progress(clamp01(map(props.time, startTime, endTime, 0, 1)));\n }\n\n function getStartTime() {\n return performance.now() + delay;\n }\n\n function getEndTime(time: number) {\n return isSmooth ? inertiaFinalValue(time, 1) : time + duration;\n }\n\n /**\n * Play the animation.\n */\n function start() {\n onStart(0);\n startTime = getStartTime();\n endTime = getEndTime(startTime);\n progressValue = 0;\n easedProgress = 0;\n isRunning = true;\n\n raf.add(key, tick);\n }\n\n /**\n * Play a paused animation.\n */\n function play() {\n if (isRunning) {\n return;\n }\n\n startTime = getStartTime() - lerp(0, duration, progressValue);\n endTime = getEndTime(startTime);\n isRunning = true;\n\n raf.add(key, tick);\n }\n\n return {\n start,\n finish: () => progress(1),\n pause,\n play,\n progress,\n };\n}\n"],
|
|
5
5
|
"mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,MAAM,KAAK,SAAS,MAAM,yBAAyB;AAC5D,SAAS,WAAW,SAAS,gBAAgB;AAC7C,SAAS,MAAM,aAAa,cAAc;AAC1C,SAAS,cAAc;AAGvB,IAAI,KAAK;AACT,MAAM,6BAA6B;AAwE5B,SAAS,cAAc,MAAoD;AAChF,MAAI,CAAC,UAAU,IAAI,GAAG;AACpB,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,IAAI,GAAG;AACjB,WAAO,YAAY,GAAG,IAAI;AAAA,EAC5B;AAEA,SAAO;AACT;AAKO,SAAS,MAAM,UAAyC,UAAwB,CAAC,GAAU;AAChG,QAAM,MAAM,OAAO;AAEnB,MAAI,gBAAgB;AACpB,MAAI,gBAAgB;AAEpB,QAAM,WAAW,UAAU,QAAQ,MAAM,MAAM,SAAS,QAAQ,MAAM,KAAK,QAAQ;AACnF,QAAM,eAAe,SAAS,QAAQ,MAAM,IAAI,QAAQ,SAAS;AACjE,QAAM,YAAY,QAAQ,aAAa;AACvC,QAAM,OAAO,cAAc,QAAQ,MAAM;AAEzC,MAAI,QAAQ,QAAQ,SAAS;AAC7B,WAAS;AACT,MAAI,WAAW,QAAQ,YAAY;AACnC,cAAY;AAGZ,MAAI,YAAY,aAAa;AAC7B,MAAI,UAAU,WAAW,SAAS;AAGlC,QAAM,MAAM,MAAM,EAAE;AACpB,QAAM;AAEN,QAAM,EAAE,UAAU,MAAM,aAAa,MAAM,WAAW,KAAK,IAAI;AAC/D,MAAI,YAAY;AAKhB,WAAS,QAAQ;AACf,gBAAY;AACZ,QAAI,OAAO,GAAG;AAAA,EAChB;AAKA,WAAS,SAAS,aAAqB;AACrC,QAAI,CAAC,UAAU,WAAW,GAAG;AAC3B,aAAO;AAAA,IACT;AAEA,oBAAgB;AAChB,oBAAgB,WACZ,KAAK,eAAe,eAAe,cAAc,SAAS,IAC1D,KAAK,aAAa;AAGtB,QAAI,KAAK,IAAI,IAAI,aAAa,IAAI,WAAW;AAC3C,sBAAgB;AAChB,sBAAgB;AAAA,IAClB;AAEA,aAAS,aAAa;AACtB,eAAW,aAAa;AAExB,QAAI,kBAAkB,GAAG;AACvB,YAAM;AACN,4BAAsB,MAAM,SAAS,aAAa,CAAC;AAAA,IACrD;AAEA,WAAO;AAAA,EACT;AAKA,WAAS,KAAK,OAAyB;AACrC,aAAS,QAAQ,IAAI,MAAM,MAAM,WAAW,SAAS,GAAG,CAAC,CAAC,CAAC;AAAA,EAC7D;AAEA,WAAS,eAAe;AACtB,WAAO,YAAY,IAAI,IAAI;AAAA,EAC7B;AAEA,WAAS,WAAW,MAAc;AAChC,WAAO,WAAW,kBAAkB,MAAM,CAAC,IAAI,OAAO;AAAA,EACxD;AAKA,WAAS,QAAQ;AACf,YAAQ,CAAC;AACT,gBAAY,aAAa;AACzB,cAAU,WAAW,SAAS;AAC9B,oBAAgB;AAChB,oBAAgB;AAChB,gBAAY;AAEZ,QAAI,IAAI,KAAK,IAAI;AAAA,EACnB;AAKA,WAAS,OAAO;AACd,QAAI,WAAW;AACb;AAAA,IACF;AAEA,gBAAY,aAAa,IAAI,KAAK,GAAG,UAAU,aAAa;AAC5D,cAAU,WAAW,SAAS;AAC9B,gBAAY;AAEZ,QAAI,IAAI,KAAK,IAAI;AAAA,EACnB;AAEA,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,MAAM,SAAS,CAAC;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|