UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

github.com/motiondivision/motion

motiondivision/motion

1 lines • 4.51 kB
1
{"version":3,"file":"pinch.mjs","sources":["../../../src/gestures/pinch.ts"],"sourcesContent":["import {\n addPinchListeners,\n Feature,\n type OnPinchEvent,\n type PinchProps,\n type PinchValues,\n} from \"motion-dom\"\nimport type { MotionProps } from \"../motion/types\"\n\nconst valueKeys = [\"scale\", \"rotate\", \"x\", \"y\"]\n\nexport class PinchGesture extends Feature<Element> {\n private touchAction = \"\"\n\n mount() {\n const { current } = this.node\n if (!current) return\n\n this.touchAction = (current as HTMLElement).style.touchAction\n this.update()\n\n /**\n * The latest enabled options. addPinchListeners reads them before\n * each step of a gesture, so they're current when a callback runs,\n * and a pinch disabled mid-way still calls its `onEnd`.\n */\n let options: PinchProps = {}\n\n /**\n * Call the prop's `onStart`, `onMove` or `onEnd`, so each can\n * change mid-gesture.\n */\n const call =\n (key: \"onStart\" | \"onMove\" | \"onEnd\"): OnPinchEvent =>\n (event, info) =>\n options[key]?.(event, info)\n\n this.unmount = addPinchListeners(\n current,\n () =>\n valueKeys.map((key) =>\n this.node.getValue(key, key === \"scale\" ? 1 : 0)\n ) as PinchValues,\n () => {\n const { pinch } = this.node.getProps()\n return pinch && (options = pinch === true ? {} : pinch)\n },\n (_element, event, info) => {\n const setActive = (isActive: boolean) =>\n this.node.animationState?.setActive(\"whilePinch\", isActive)\n\n setActive(true)\n call(\"onStart\")(event, info)\n\n return {\n onPinch: call(\"onMove\"),\n onComplete: (event, info) => {\n setActive(false)\n call(\"onEnd\")(event, info)\n },\n }\n }\n )\n }\n\n /**\n * Stop touches panning or zooming the page while pinch is on, unless\n * `style` sets a `touchAction` (like \"pan-y\" for a list that scrolls\n * with one finger). Set here rather than when rendering, so the default\n * bundle doesn't pay for it, and on every update, as React rewrites it\n * when drag's axis changes.\n */\n update() {\n const style = (this.node.current as HTMLElement | null)?.style\n if (style) {\n const { pinch, style: props } = this.node.getProps() as MotionProps\n style.touchAction = pinch\n ? (props?.touchAction as string) || \"none\"\n : this.touchAction\n }\n }\n\n unmount() {}\n}\n"],"names":[],"mappings":";;AASA,MAAM,SAAS,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC;AAEzC,MAAO,YAAa,SAAQ,OAAgB,CAAA;AAAlD,IAAA,WAAA,GAAA;;QACY,IAAA,CAAA,WAAW,GAAG,EAAE;IAuE5B;IArEI,KAAK,GAAA;AACD,QAAA,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI;AAC7B,QAAA,IAAI,CAAC,OAAO;YAAE;QAEd,IAAI,CAAC,WAAW,GAAI,OAAuB,CAAC,KAAK,CAAC,WAAW;QAC7D,IAAI,CAAC,MAAM,EAAE;AAEb;;;;AAIG;QACH,IAAI,OAAO,GAAe,EAAE;AAE5B;;;AAGG;QACH,MAAM,IAAI,GACN,CAAC,GAAmC,KACpC,CAAC,KAAK,EAAE,IAAI,KACR,OAAO,CAAC,GAAG,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC;AAEnC,QAAA,IAAI,CAAC,OAAO,GAAG,iBAAiB,CAC5B,OAAO,EACP,MACI,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,KACd,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CACpC,EACpB,MAAK;YACD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACtC,YAAA,OAAO,KAAK,KAAK,OAAO,GAAG,KAAK,KAAK,IAAI,GAAG,EAAE,GAAG,KAAK,CAAC;QAC3D,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAI;AACtB,YAAA,MAAM,SAAS,GAAG,CAAC,QAAiB,KAChC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,YAAY,EAAE,QAAQ,CAAC;YAE/D,SAAS,CAAC,IAAI,CAAC;YACf,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC;YAE5B,OAAO;AACH,gBAAA,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC;AACvB,gBAAA,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,KAAI;oBACxB,SAAS,CAAC,KAAK,CAAC;oBAChB,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC;gBAC9B,CAAC;aACJ;AACL,QAAA,CAAC,CACJ;IACL;AAEA;;;;;;AAMG;IACH,MAAM,GAAA;QACF,MAAM,KAAK,GAAI,IAAI,CAAC,IAAI,CAAC,OAA8B,EAAE,KAAK;QAC9D,IAAI,KAAK,EAAE;AACP,YAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAiB;YACnE,KAAK,CAAC,WAAW,GAAG;AAChB,kBAAG,KAAK,EAAE,WAAsB,IAAI;AACpC,kBAAE,IAAI,CAAC,WAAW;QAC1B;IACJ;AAEA,IAAA,OAAO,KAAI;AACd;;;;"}