@react-three/drei 9.74.11 → 9.74.13

package/src/web/Html.js

@@ -0,0 +1,417 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { Vector3, DoubleSide, OrthographicCamera, PerspectiveCamera } from 'three';
+import { useThree, useFrame } from '@react-three/fiber';
+
+const v1 = new Vector3();
+const v2 = new Vector3();
+const v3 = new Vector3();
+
+function defaultCalculatePosition(el, camera, size) {
+  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+  objectPos.project(camera);
+  const widthHalf = size.width / 2;
+  const heightHalf = size.height / 2;
+  return [objectPos.x * widthHalf + widthHalf, -(objectPos.y * heightHalf) + heightHalf];
+}
+
+function isObjectBehindCamera(el, camera) {
+  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+  const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
+  const deltaCamObj = objectPos.sub(cameraPos);
+  const camDir = camera.getWorldDirection(v3);
+  return deltaCamObj.angleTo(camDir) > Math.PI / 2;
+}
+
+function isObjectVisible(el, camera, raycaster, occlude) {
+  const elPos = v1.setFromMatrixPosition(el.matrixWorld);
+  const screenPos = elPos.clone();
+  screenPos.project(camera);
+  raycaster.setFromCamera(screenPos, camera);
+  const intersects = raycaster.intersectObjects(occlude, true);
+
+  if (intersects.length) {
+    const intersectionDistance = intersects[0].distance;
+    const pointDistance = elPos.distanceTo(raycaster.ray.origin);
+    return pointDistance < intersectionDistance;
+  }
+
+  return true;
+}
+
+function objectScale(el, camera) {
+  if (camera instanceof OrthographicCamera) {
+    return camera.zoom;
+  } else if (camera instanceof PerspectiveCamera) {
+    const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+    const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
+    const vFOV = camera.fov * Math.PI / 180;
+    const dist = objectPos.distanceTo(cameraPos);
+    const scaleFOV = 2 * Math.tan(vFOV / 2) * dist;
+    return 1 / scaleFOV;
+  } else {
+    return 1;
+  }
+}
+
+function objectZIndex(el, camera, zIndexRange) {
+  if (camera instanceof PerspectiveCamera || camera instanceof OrthographicCamera) {
+    const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+    const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
+    const dist = objectPos.distanceTo(cameraPos);
+    const A = (zIndexRange[1] - zIndexRange[0]) / (camera.far - camera.near);
+    const B = zIndexRange[1] - A * camera.far;
+    return Math.round(A * dist + B);
+  }
+
+  return undefined;
+}
+
+const epsilon = value => Math.abs(value) < 1e-10 ? 0 : value;
+
+function getCSSMatrix(matrix, multipliers, prepend = '') {
+  let matrix3d = 'matrix3d(';
+
+  for (let i = 0; i !== 16; i++) {
+    matrix3d += epsilon(multipliers[i] * matrix.elements[i]) + (i !== 15 ? ',' : ')');
+  }
+
+  return prepend + matrix3d;
+}
+
+const getCameraCSSMatrix = (multipliers => {
+  return matrix => getCSSMatrix(matrix, multipliers);
+})([1, -1, 1, 1, 1, -1, 1, 1, 1, -1, 1, 1, 1, -1, 1, 1]);
+
+const getObjectCSSMatrix = (scaleMultipliers => {
+  return (matrix, factor) => getCSSMatrix(matrix, scaleMultipliers(factor), 'translate(-50%,-50%)');
+})(f => [1 / f, 1 / f, 1 / f, 1, -1 / f, -1 / f, -1 / f, -1, 1 / f, 1 / f, 1 / f, 1, 1, 1, 1, 1]);
+
+function isRefObject(ref) {
+  return ref && typeof ref === 'object' && 'current' in ref;
+}
+
+const Html = /*#__PURE__*/React.forwardRef(({
+  children,
+  eps = 0.001,
+  style,
+  className,
+  prepend,
+  center,
+  fullscreen,
+  portal,
+  distanceFactor,
+  sprite = false,
+  transform = false,
+  occlude,
+  onOcclude,
+  castShadow,
+  receiveShadow,
+  material,
+  geometry,
+  zIndexRange = [16777271, 0],
+  calculatePosition = defaultCalculatePosition,
+  as = 'div',
+  wrapperClass,
+  pointerEvents = 'auto',
+  ...props
+}, ref) => {
+  const {
+    gl,
+    camera,
+    scene,
+    size,
+    raycaster,
+    events,
+    viewport
+  } = useThree();
+  const [el] = React.useState(() => document.createElement(as));
+  const root = React.useRef();
+  const group = React.useRef(null);
+  const oldZoom = React.useRef(0);
+  const oldPosition = React.useRef([0, 0]);
+  const transformOuterRef = React.useRef(null);
+  const transformInnerRef = React.useRef(null); // Append to the connected element, which makes HTML work with views
+
+  const target = (portal == null ? void 0 : portal.current) || events.connected || gl.domElement.parentNode;
+  const occlusionMeshRef = React.useRef(null);
+  const isMeshSizeSet = React.useRef(false);
+  const isRayCastOcclusion = React.useMemo(() => {
+    return occlude && occlude !== 'blending' || Array.isArray(occlude) && occlude.length && isRefObject(occlude[0]);
+  }, [occlude]);
+  React.useLayoutEffect(() => {
+    const el = gl.domElement;
+
+    if (occlude && occlude === 'blending') {
+      el.style.zIndex = `${Math.floor(zIndexRange[0] / 2)}`;
+      el.style.position = 'absolute';
+      el.style.pointerEvents = 'none';
+    } else {
+      el.style.zIndex = null;
+      el.style.position = null;
+      el.style.pointerEvents = null;
+    }
+  }, [occlude]);
+  React.useLayoutEffect(() => {
+    if (group.current) {
+      const currentRoot = root.current = ReactDOM.createRoot(el);
+      scene.updateMatrixWorld();
+
+      if (transform) {
+        el.style.cssText = `position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;`;
+      } else {
+        const vec = calculatePosition(group.current, camera, size);
+        el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
+      }
+
+      if (target) {
+        if (prepend) target.prepend(el);else target.appendChild(el);
+      }
+
+      return () => {
+        if (target) target.removeChild(el);
+        currentRoot.unmount();
+      };
+    }
+  }, [target, transform]);
+  React.useLayoutEffect(() => {
+    if (wrapperClass) el.className = wrapperClass;
+  }, [wrapperClass]);
+  const styles = React.useMemo(() => {
+    if (transform) {
+      return {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: size.width,
+        height: size.height,
+        transformStyle: 'preserve-3d',
+        pointerEvents: 'none'
+      };
+    } else {
+      return {
+        position: 'absolute',
+        transform: center ? 'translate3d(-50%,-50%,0)' : 'none',
+        ...(fullscreen && {
+          top: -size.height / 2,
+          left: -size.width / 2,
+          width: size.width,
+          height: size.height
+        }),
+        ...style
+      };
+    }
+  }, [style, center, fullscreen, size, transform]);
+  const transformInnerStyles = React.useMemo(() => ({
+    position: 'absolute',
+    pointerEvents
+  }), [pointerEvents]);
+  React.useLayoutEffect(() => {
+    isMeshSizeSet.current = false;
+
+    if (transform) {
+      var _root$current;
+
+      (_root$current = root.current) == null ? void 0 : _root$current.render( /*#__PURE__*/React.createElement("div", {
+        ref: transformOuterRef,
+        style: styles
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: transformInnerRef,
+        style: transformInnerStyles
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: ref,
+        className: className,
+        style: style,
+        children: children
+      }))));
+    } else {
+      var _root$current2;
+
+      (_root$current2 = root.current) == null ? void 0 : _root$current2.render( /*#__PURE__*/React.createElement("div", {
+        ref: ref,
+        style: styles,
+        className: className,
+        children: children
+      }));
+    }
+  });
+  const visible = React.useRef(true);
+  useFrame(gl => {
+    if (group.current) {
+      camera.updateMatrixWorld();
+      group.current.updateWorldMatrix(true, false);
+      const vec = transform ? oldPosition.current : calculatePosition(group.current, camera, size);
+
+      if (transform || Math.abs(oldZoom.current - camera.zoom) > eps || Math.abs(oldPosition.current[0] - vec[0]) > eps || Math.abs(oldPosition.current[1] - vec[1]) > eps) {
+        const isBehindCamera = isObjectBehindCamera(group.current, camera);
+        let raytraceTarget = false;
+
+        if (isRayCastOcclusion) {
+          if (occlude !== 'blending') {
+            raytraceTarget = [scene];
+          } else if (Array.isArray(occlude)) {
+            raytraceTarget = occlude.map(item => item.current);
+          }
+        }
+
+        const previouslyVisible = visible.current;
+
+        if (raytraceTarget) {
+          const isvisible = isObjectVisible(group.current, camera, raycaster, raytraceTarget);
+          visible.current = isvisible && !isBehindCamera;
+        } else {
+          visible.current = !isBehindCamera;
+        }
+
+        if (previouslyVisible !== visible.current) {
+          if (onOcclude) onOcclude(!visible.current);else el.style.display = visible.current ? 'block' : 'none';
+        }
+
+        const halfRange = Math.floor(zIndexRange[0] / 2);
+        const zRange = occlude ? isRayCastOcclusion //
+        ? [zIndexRange[0], halfRange] : [halfRange - 1, 0] : zIndexRange;
+        el.style.zIndex = `${objectZIndex(group.current, camera, zRange)}`;
+
+        if (transform) {
+          const [widthHalf, heightHalf] = [size.width / 2, size.height / 2];
+          const fov = camera.projectionMatrix.elements[5] * heightHalf;
+          const {
+            isOrthographicCamera,
+            top,
+            left,
+            bottom,
+            right
+          } = camera;
+          const cameraMatrix = getCameraCSSMatrix(camera.matrixWorldInverse);
+          const cameraTransform = isOrthographicCamera ? `scale(${fov})translate(${epsilon(-(right + left) / 2)}px,${epsilon((top + bottom) / 2)}px)` : `translateZ(${fov}px)`;
+          let matrix = group.current.matrixWorld;
+
+          if (sprite) {
+            matrix = camera.matrixWorldInverse.clone().transpose().copyPosition(matrix).scale(group.current.scale);
+            matrix.elements[3] = matrix.elements[7] = matrix.elements[11] = 0;
+            matrix.elements[15] = 1;
+          }
+
+          el.style.width = size.width + 'px';
+          el.style.height = size.height + 'px';
+          el.style.perspective = isOrthographicCamera ? '' : `${fov}px`;
+
+          if (transformOuterRef.current && transformInnerRef.current) {
+            transformOuterRef.current.style.transform = `${cameraTransform}${cameraMatrix}translate(${widthHalf}px,${heightHalf}px)`;
+            transformInnerRef.current.style.transform = getObjectCSSMatrix(matrix, 1 / ((distanceFactor || 10) / 400));
+          }
+        } else {
+          const scale = distanceFactor === undefined ? 1 : objectScale(group.current, camera) * distanceFactor;
+          el.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(${scale})`;
+        }
+
+        oldPosition.current = vec;
+        oldZoom.current = camera.zoom;
+      }
+    }
+
+    if (!isRayCastOcclusion && occlusionMeshRef.current && !isMeshSizeSet.current) {
+      if (transform) {
+        if (transformOuterRef.current) {
+          const el = transformOuterRef.current.children[0];
+
+          if (el != null && el.clientWidth && el != null && el.clientHeight) {
+            const {
+              isOrthographicCamera
+            } = camera;
+
+            if (isOrthographicCamera || geometry) {
+              if (props.scale) {
+                if (!Array.isArray(props.scale)) {
+                  occlusionMeshRef.current.scale.setScalar(1 / props.scale);
+                } else if (props.scale instanceof Vector3) {
+                  occlusionMeshRef.current.scale.copy(props.scale.clone().divideScalar(1));
+                } else {
+                  occlusionMeshRef.current.scale.set(1 / props.scale[0], 1 / props.scale[1], 1 / props.scale[2]);
+                }
+              }
+            } else {
+              const ratio = (distanceFactor || 10) / 400;
+              const w = el.clientWidth * ratio;
+              const h = el.clientHeight * ratio;
+              occlusionMeshRef.current.scale.set(w, h, 1);
+            }
+
+            isMeshSizeSet.current = true;
+          }
+        }
+      } else {
+        const ele = el.children[0];
+
+        if (ele != null && ele.clientWidth && ele != null && ele.clientHeight) {
+          const ratio = 1 / viewport.factor;
+          const w = ele.clientWidth * ratio;
+          const h = ele.clientHeight * ratio;
+          occlusionMeshRef.current.scale.set(w, h, 1);
+          isMeshSizeSet.current = true;
+        }
+
+        occlusionMeshRef.current.lookAt(gl.camera.position);
+      }
+    }
+  });
+  const shaders = React.useMemo(() => ({
+    vertexShader: !transform ?
+    /* glsl */
+    `
+          /*
+            This shader is from the THREE's SpriteMaterial.
+            We need to turn the backing plane into a Sprite
+            (make it always face the camera) if "transfrom" 
+            is false. 
+          */
+          #include <common>
+
+          void main() {
+            vec2 center = vec2(0., 1.);
+            float rotation = 0.0;
+            
+            // This is somewhat arbitrary, but it seems to work well
+            // Need to figure out how to derive this dynamically if it even matters
+            float size = 0.03;
+
+            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
+            vec2 scale;
+            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
+            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );
+
+            bool isPerspective = isPerspectiveMatrix( projectionMatrix );
+            if ( isPerspective ) scale *= - mvPosition.z;
+
+            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;
+            vec2 rotatedPosition;
+            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
+            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
+            mvPosition.xy += rotatedPosition;
+
+            gl_Position = projectionMatrix * mvPosition;
+          }
+      ` : undefined,
+    fragmentShader:
+    /* glsl */
+    `
+        void main() {
+          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+        }
+      `
+  }), [transform]);
+  return /*#__PURE__*/React.createElement("group", _extends({}, props, {
+    ref: group
+  }), occlude && !isRayCastOcclusion && /*#__PURE__*/React.createElement("mesh", {
+    castShadow: castShadow,
+    receiveShadow: receiveShadow,
+    ref: occlusionMeshRef
+  }, geometry || /*#__PURE__*/React.createElement("planeGeometry", null), material || /*#__PURE__*/React.createElement("shaderMaterial", {
+    side: DoubleSide,
+    vertexShader: shaders.vertexShader,
+    fragmentShader: shaders.fragmentShader
+  })));
+});
+
+export { Html };

package/src/web/KeyboardControls.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import create from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+
+const context = /*@__PURE__*/React.createContext(null);
+function KeyboardControls({
+  map,
+  children,
+  onChange,
+  domElement
+}) {
+  const key = map.map(item => item.name + item.keys).join('-');
+  const useControls = React.useMemo(() => {
+    return create(subscribeWithSelector(() => map.reduce((prev, cur) => ({ ...prev,
+      [cur.name]: false
+    }), {})));
+  }, [key]);
+  const api = React.useMemo(() => [useControls.subscribe, useControls.getState, useControls], [key]);
+  const set = useControls.setState;
+  React.useEffect(() => {
+    const config = map.map(({
+      name,
+      keys,
+      up
+    }) => ({
+      keys,
+      up,
+      fn: value => {
+        // Set zustand state
+        set({
+          [name]: value
+        }); // Inform callback
+
+        if (onChange) onChange(name, value, api[1]());
+      }
+    }));
+    const keyMap = config.reduce((out, {
+      keys,
+      fn,
+      up = true
+    }) => {
+      keys.forEach(key => out[key] = {
+        fn,
+        pressed: false,
+        up
+      });
+      return out;
+    }, {});
+
+    const downHandler = ({
+      key,
+      code
+    }) => {
+      const obj = keyMap[key] || keyMap[code];
+      if (!obj) return;
+      const {
+        fn,
+        pressed,
+        up
+      } = obj;
+      obj.pressed = true;
+      if (up || !pressed) fn(true);
+    };
+
+    const upHandler = ({
+      key,
+      code
+    }) => {
+      const obj = keyMap[key] || keyMap[code];
+      if (!obj) return;
+      const {
+        fn,
+        up
+      } = obj;
+      obj.pressed = false;
+      if (up) fn(false);
+    };
+
+    const source = domElement || window;
+    source.addEventListener('keydown', downHandler, {
+      passive: true
+    });
+    source.addEventListener('keyup', upHandler, {
+      passive: true
+    });
+    return () => {
+      source.removeEventListener('keydown', downHandler);
+      source.removeEventListener('keyup', upHandler);
+    };
+  }, [domElement, key]);
+  return /*#__PURE__*/React.createElement(context.Provider, {
+    value: api,
+    children: children
+  });
+}
+function useKeyboardControls(sel) {
+  const [sub, get, store] = React.useContext(context);
+  if (sel) return store(sel);else return [sub, get];
+}
+
+export { KeyboardControls, useKeyboardControls };

package/src/web/Loader.js

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { useProgress } from '../core/useProgress.js';
+
+const defaultDataInterpolation = p => `Loading ${p.toFixed(2)}%`;
+
+function Loader({
+  containerStyles,
+  innerStyles,
+  barStyles,
+  dataStyles,
+  dataInterpolation = defaultDataInterpolation,
+  initialState = active => active
+}) {
+  const {
+    active,
+    progress
+  } = useProgress();
+  const progressRef = React.useRef(0);
+  const rafRef = React.useRef(0);
+  const progressSpanRef = React.useRef(null);
+  const [shown, setShown] = React.useState(initialState(active));
+  React.useEffect(() => {
+    let t;
+    if (active !== shown) t = setTimeout(() => setShown(active), 300);
+    return () => clearTimeout(t);
+  }, [shown, active]);
+  const updateProgress = React.useCallback(() => {
+    if (!progressSpanRef.current) return;
+    progressRef.current += (progress - progressRef.current) / 2;
+    if (progressRef.current > 0.95 * progress || progress === 100) progressRef.current = progress;
+    progressSpanRef.current.innerText = dataInterpolation(progressRef.current);
+    if (progressRef.current < progress) rafRef.current = requestAnimationFrame(updateProgress);
+  }, [dataInterpolation, progress]);
+  React.useEffect(() => {
+    updateProgress();
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [updateProgress]);
+  return shown ? /*#__PURE__*/React.createElement("div", {
+    style: { ...styles.container,
+      opacity: active ? 1 : 0,
+      ...containerStyles
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: { ...styles.inner,
+      ...innerStyles
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: { ...styles.bar,
+      transform: `scaleX(${progress / 100})`,
+      ...barStyles
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    ref: progressSpanRef,
+    style: { ...styles.data,
+      ...dataStyles
+    }
+  })))) : null;
+}
+const styles = {
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    background: '#171717',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'opacity 300ms ease',
+    zIndex: 1000
+  },
+  inner: {
+    width: 100,
+    height: 3,
+    background: '#272727',
+    textAlign: 'center'
+  },
+  bar: {
+    height: 3,
+    width: '100%',
+    background: 'white',
+    transition: 'transform 200ms',
+    transformOrigin: 'left center'
+  },
+  data: {
+    display: 'inline-block',
+    position: 'relative',
+    fontVariantNumeric: 'tabular-nums',
+    marginTop: '0.8em',
+    color: '#f0f0f0',
+    fontSize: '0.6em',
+    fontFamily: `-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, Roboto, Ubuntu, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+    whiteSpace: 'nowrap'
+  }
+};
+
+export { Loader };

package/src/web/PresentationControls.js

@@ -0,0 +1,86 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { MathUtils } from 'three';
+import { useThree } from '@react-three/fiber';
+import { useSpring, a } from '@react-spring/three';
+import { useGesture } from '@use-gesture/react';
+
+function PresentationControls({
+  enabled = true,
+  snap,
+  global,
+  domElement,
+  cursor = true,
+  children,
+  speed = 1,
+  rotation = [0, 0, 0],
+  zoom = 1,
+  polar = [0, Math.PI / 2],
+  azimuth = [-Infinity, Infinity],
+  config = {
+    mass: 1,
+    tension: 170,
+    friction: 26
+  }
+}) {
+  const events = useThree(state => state.events);
+  const gl = useThree(state => state.gl);
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const {
+    size
+  } = useThree();
+  const rPolar = React.useMemo(() => [rotation[0] + polar[0], rotation[0] + polar[1]], [rotation[0], polar[0], polar[1]]);
+  const rAzimuth = React.useMemo(() => [rotation[1] + azimuth[0], rotation[1] + azimuth[1]], [rotation[1], azimuth[0], azimuth[1]]);
+  const rInitial = React.useMemo(() => [MathUtils.clamp(rotation[0], ...rPolar), MathUtils.clamp(rotation[1], ...rAzimuth), rotation[2]], [rotation[0], rotation[1], rotation[2], rPolar, rAzimuth]);
+  const [spring, api] = useSpring(() => ({
+    scale: 1,
+    rotation: rInitial,
+    config
+  }));
+  React.useEffect(() => void api.start({
+    scale: 1,
+    rotation: rInitial,
+    config
+  }), [rInitial]);
+  React.useEffect(() => {
+    if (global && cursor && enabled) {
+      explDomElement.style.cursor = 'grab';
+      gl.domElement.style.cursor = '';
+      return () => {
+        explDomElement.style.cursor = 'default';
+        gl.domElement.style.cursor = 'default';
+      };
+    }
+  }, [global, cursor, explDomElement, enabled]);
+  const bind = useGesture({
+    onHover: ({
+      last
+    }) => {
+      if (cursor && !global && enabled) explDomElement.style.cursor = last ? 'auto' : 'grab';
+    },
+    onDrag: ({
+      down,
+      delta: [x, y],
+      memo: [oldY, oldX] = spring.rotation.animation.to || rInitial
+    }) => {
+      if (!enabled) return [y, x];
+      if (cursor) explDomElement.style.cursor = down ? 'grabbing' : 'grab';
+      x = MathUtils.clamp(oldX + x / size.width * Math.PI * speed, ...rAzimuth);
+      y = MathUtils.clamp(oldY + y / size.height * Math.PI * speed, ...rPolar);
+      const sConfig = snap && !down && typeof snap !== 'boolean' ? snap : config;
+      api.start({
+        scale: down && y > rPolar[1] / 2 ? zoom : 1,
+        rotation: snap && !down ? rInitial : [y, x, 0],
+        config: n => n === 'scale' ? { ...sConfig,
+          friction: sConfig.friction * 3
+        } : sConfig
+      });
+      return [y, x];
+    }
+  }, {
+    target: global ? explDomElement : undefined
+  });
+  return /*#__PURE__*/React.createElement(a.group, _extends({}, bind == null ? void 0 : bind(), spring), children);
+}
+
+export { PresentationControls };