@react-three/drei 9.74.13 → 9.74.15

package/src/web/ScrollControls.js

@@ -1,246 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
-import { useThree, useFrame, context as context$1 } from '@react-three/fiber';
-import mergeRefs from 'react-merge-refs';
-import { easing } from 'maath';
-
-const context = /*#__PURE__*/React.createContext(null);
-function useScroll() {
-  return React.useContext(context);
-}
-function ScrollControls({
-  eps = 0.00001,
-  enabled = true,
-  infinite,
-  horizontal,
-  pages = 1,
-  distance = 1,
-  damping = 0.25,
-  maxSpeed = Infinity,
-  style = {},
-  children
-}) {
-  const {
-    get,
-    setEvents,
-    gl,
-    size,
-    invalidate,
-    events
-  } = useThree();
-  const [el] = React.useState(() => document.createElement('div'));
-  const [fill] = React.useState(() => document.createElement('div'));
-  const [fixed] = React.useState(() => document.createElement('div'));
-  const target = gl.domElement.parentNode;
-  const scroll = React.useRef(0);
-  const state = React.useMemo(() => {
-    const state = {
-      el,
-      eps,
-      fill,
-      fixed,
-      horizontal,
-      damping,
-      offset: 0,
-      delta: 0,
-      scroll,
-      pages,
-
-      // 0-1 for a range between from -> from + distance
-      range(from, distance, margin = 0) {
-        const start = from - margin;
-        const end = start + distance + margin * 2;
-        return this.offset < start ? 0 : this.offset > end ? 1 : (this.offset - start) / (end - start);
-      },
-
-      // 0-1-0 for a range between from -> from + distance
-      curve(from, distance, margin = 0) {
-        return Math.sin(this.range(from, distance, margin) * Math.PI);
-      },
-
-      // true/false for a range between from -> from + distance
-      visible(from, distance, margin = 0) {
-        const start = from - margin;
-        const end = start + distance + margin * 2;
-        return this.offset >= start && this.offset <= end;
-      }
-
-    };
-    return state;
-  }, [eps, damping, horizontal, pages]);
-  React.useEffect(() => {
-    el.style.position = 'absolute';
-    el.style.width = '100%';
-    el.style.height = '100%';
-    el.style[horizontal ? 'overflowX' : 'overflowY'] = 'auto';
-    el.style[horizontal ? 'overflowY' : 'overflowX'] = 'hidden';
-    el.style.top = '0px';
-    el.style.left = '0px';
-
-    for (const key in style) {
-      el.style[key] = style[key];
-    }
-
-    fixed.style.position = 'sticky';
-    fixed.style.top = '0px';
-    fixed.style.left = '0px';
-    fixed.style.width = '100%';
-    fixed.style.height = '100%';
-    fixed.style.overflow = 'hidden';
-    el.appendChild(fixed);
-    fill.style.height = horizontal ? '100%' : `${pages * distance * 100}%`;
-    fill.style.width = horizontal ? `${pages * distance * 100}%` : '100%';
-    fill.style.pointerEvents = 'none';
-    el.appendChild(fill);
-    target.appendChild(el); // Init scroll one pixel in to allow upward/leftward scroll
-
-    el[horizontal ? 'scrollLeft' : 'scrollTop'] = 1;
-    const oldTarget = events.connected || gl.domElement;
-    requestAnimationFrame(() => events.connect == null ? void 0 : events.connect(el));
-    const oldCompute = get().events.compute;
-    setEvents({
-      compute(event, state) {
-        // we are using boundingClientRect because we could not rely on target.offsetTop as canvas could be positioned anywhere in dom
-        const {
-          left,
-          top
-        } = target.getBoundingClientRect();
-        const offsetX = event.clientX - left;
-        const offsetY = event.clientY - top;
-        state.pointer.set(offsetX / state.size.width * 2 - 1, -(offsetY / state.size.height) * 2 + 1);
-        state.raycaster.setFromCamera(state.pointer, state.camera);
-      }
-
-    });
-    return () => {
-      target.removeChild(el);
-      setEvents({
-        compute: oldCompute
-      });
-      events.connect == null ? void 0 : events.connect(oldTarget);
-    };
-  }, [pages, distance, horizontal, el, fill, fixed, target]);
-  React.useEffect(() => {
-    if (events.connected === el) {
-      const containerLength = size[horizontal ? 'width' : 'height'];
-      const scrollLength = el[horizontal ? 'scrollWidth' : 'scrollHeight'];
-      const scrollThreshold = scrollLength - containerLength;
-      let current = 0;
-      let disableScroll = true;
-      let firstRun = true;
-
-      const onScroll = () => {
-        // Prevent first scroll because it is indirectly caused by the one pixel offset
-        if (!enabled || firstRun) return;
-        invalidate();
-        current = el[horizontal ? 'scrollLeft' : 'scrollTop'];
-        scroll.current = current / scrollThreshold;
-
-        if (infinite) {
-          if (!disableScroll) {
-            if (current >= scrollThreshold) {
-              const damp = 1 - state.offset;
-              el[horizontal ? 'scrollLeft' : 'scrollTop'] = 1;
-              scroll.current = state.offset = -damp;
-              disableScroll = true;
-            } else if (current <= 0) {
-              const damp = 1 + state.offset;
-              el[horizontal ? 'scrollLeft' : 'scrollTop'] = scrollLength;
-              scroll.current = state.offset = damp;
-              disableScroll = true;
-            }
-          }
-
-          if (disableScroll) setTimeout(() => disableScroll = false, 40);
-        }
-      };
-
-      el.addEventListener('scroll', onScroll, {
-        passive: true
-      });
-      requestAnimationFrame(() => firstRun = false);
-
-      const onWheel = e => el.scrollLeft += e.deltaY / 2;
-
-      if (horizontal) el.addEventListener('wheel', onWheel, {
-        passive: true
-      });
-      return () => {
-        el.removeEventListener('scroll', onScroll);
-        if (horizontal) el.removeEventListener('wheel', onWheel);
-      };
-    }
-  }, [el, events, size, infinite, state, invalidate, horizontal, enabled]);
-  let last = 0;
-  useFrame((_, delta) => {
-    last = state.offset;
-    easing.damp(state, 'offset', scroll.current, damping, delta, maxSpeed, undefined, eps);
-    easing.damp(state, 'delta', Math.abs(last - state.offset), damping, delta, maxSpeed, undefined, eps);
-    if (state.delta > eps) invalidate();
-  });
-  return /*#__PURE__*/React.createElement(context.Provider, {
-    value: state
-  }, children);
-}
-const ScrollCanvas = /*#__PURE__*/React.forwardRef(({
-  children
-}, ref) => {
-  const group = React.useRef(null);
-  const state = useScroll();
-  const {
-    width,
-    height
-  } = useThree(state => state.viewport);
-  useFrame(() => {
-    group.current.position.x = state.horizontal ? -width * (state.pages - 1) * state.offset : 0;
-    group.current.position.y = state.horizontal ? 0 : height * (state.pages - 1) * state.offset;
-  });
-  return /*#__PURE__*/React.createElement("group", {
-    ref: mergeRefs([ref, group])
-  }, children);
-});
-const ScrollHtml = /*#__PURE__*/React.forwardRef(({
-  children,
-  style,
-  ...props
-}, ref) => {
-  const state = useScroll();
-  const group = React.useRef(null);
-  const {
-    width,
-    height
-  } = useThree(state => state.size);
-  const fiberState = React.useContext(context$1);
-  const root = React.useMemo(() => ReactDOM.createRoot(state.fixed), [state.fixed]);
-  useFrame(() => {
-    if (state.delta > state.eps) {
-      group.current.style.transform = `translate3d(${state.horizontal ? -width * (state.pages - 1) * state.offset : 0}px,${state.horizontal ? 0 : height * (state.pages - 1) * -state.offset}px,0)`;
-    }
-  });
-  root.render( /*#__PURE__*/React.createElement("div", _extends({
-    ref: mergeRefs([ref, group]),
-    style: { ...style,
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      willChange: 'transform'
-    }
-  }, props), /*#__PURE__*/React.createElement(context.Provider, {
-    value: state
-  }, /*#__PURE__*/React.createElement(context$1.Provider, {
-    value: fiberState
-  }, children))));
-  return null;
-});
-const Scroll = /*#__PURE__*/React.forwardRef(({
-  html,
-  ...props
-}, ref) => {
-  const El = html ? ScrollHtml : ScrollCanvas;
-  return /*#__PURE__*/React.createElement(El, _extends({
-    ref: ref
-  }, props));
-});
-
-export { Scroll, ScrollControls, useScroll };

package/src/web/Select.js

@@ -1,175 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import * as React from 'react';
-import * as THREE from 'three';
-import { SelectionBox } from 'three-stdlib';
-import { useThree } from '@react-three/fiber';
-import shallow from 'zustand/shallow';
-
-const context = /*#__PURE__*/React.createContext([]);
-function Select({
-  box,
-  multiple,
-  children,
-  onChange,
-  onChangePointerUp,
-  border = '1px solid #55aaff',
-  backgroundColor = 'rgba(75, 160, 255, 0.1)',
-  filter: customFilter = item => item,
-  ...props
-}) {
-  const [downed, down] = React.useState(false);
-  const {
-    setEvents,
-    camera,
-    raycaster,
-    gl,
-    controls,
-    size,
-    get
-  } = useThree();
-  const [hovered, hover] = React.useState(false);
-  const [active, dispatch] = React.useReducer((state, {
-    object,
-    shift
-  }) => {
-    if (object === undefined) return [];else if (Array.isArray(object)) return object;else if (!shift) return state[0] === object ? [] : [object];else if (state.includes(object)) return state.filter(o => o !== object);else return [object, ...state];
-  }, []);
-  React.useEffect(() => {
-    if (downed) onChange == null ? void 0 : onChange(active);else onChangePointerUp == null ? void 0 : onChangePointerUp(active);
-  }, [active, downed]);
-  const onClick = React.useCallback(e => {
-    e.stopPropagation();
-    dispatch({
-      object: customFilter([e.object])[0],
-      shift: multiple && e.shiftKey
-    });
-  }, []);
-  const onPointerMissed = React.useCallback(e => !hovered && dispatch({}), [hovered]);
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (!box || !multiple) return;
-    const selBox = new SelectionBox(camera, ref.current);
-    const element = document.createElement('div');
-    element.style.pointerEvents = 'none';
-    element.style.border = border;
-    element.style.backgroundColor = backgroundColor;
-    element.style.position = 'fixed';
-    const startPoint = new THREE.Vector2();
-    const pointTopLeft = new THREE.Vector2();
-    const pointBottomRight = new THREE.Vector2();
-    const oldRaycasterEnabled = get().events.enabled;
-    const oldControlsEnabled = controls == null ? void 0 : controls.enabled;
-    let isDown = false;
-
-    function prepareRay(event, vec) {
-      const {
-        offsetX,
-        offsetY
-      } = event;
-      const {
-        width,
-        height
-      } = size;
-      vec.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
-    }
-
-    function onSelectStart(event) {
-      var _gl$domElement$parent;
-
-      if (controls) controls.enabled = false;
-      setEvents({
-        enabled: false
-      });
-      down(isDown = true);
-      (_gl$domElement$parent = gl.domElement.parentElement) == null ? void 0 : _gl$domElement$parent.appendChild(element);
-      element.style.left = `${event.clientX}px`;
-      element.style.top = `${event.clientY}px`;
-      element.style.width = '0px';
-      element.style.height = '0px';
-      startPoint.x = event.clientX;
-      startPoint.y = event.clientY;
-    }
-
-    function onSelectMove(event) {
-      pointBottomRight.x = Math.max(startPoint.x, event.clientX);
-      pointBottomRight.y = Math.max(startPoint.y, event.clientY);
-      pointTopLeft.x = Math.min(startPoint.x, event.clientX);
-      pointTopLeft.y = Math.min(startPoint.y, event.clientY);
-      element.style.left = `${pointTopLeft.x}px`;
-      element.style.top = `${pointTopLeft.y}px`;
-      element.style.width = `${pointBottomRight.x - pointTopLeft.x}px`;
-      element.style.height = `${pointBottomRight.y - pointTopLeft.y}px`;
-    }
-
-    function onSelectOver() {
-      if (isDown) {
-        var _element$parentElemen;
-
-        if (controls) controls.enabled = oldControlsEnabled;
-        setEvents({
-          enabled: oldRaycasterEnabled
-        });
-        down(isDown = false);
-        (_element$parentElemen = element.parentElement) == null ? void 0 : _element$parentElemen.removeChild(element);
-      }
-    }
-
-    function pointerDown(event) {
-      if (event.shiftKey) {
-        onSelectStart(event);
-        prepareRay(event, selBox.startPoint);
-      }
-    }
-
-    let previous = [];
-
-    function pointerMove(event) {
-      if (isDown) {
-        onSelectMove(event);
-        prepareRay(event, selBox.endPoint);
-        const allSelected = selBox.select().sort(o => o.uuid).filter(o => o.isMesh);
-
-        if (!shallow(allSelected, previous)) {
-          previous = allSelected;
-          dispatch({
-            object: customFilter(allSelected)
-          });
-        }
-      }
-    }
-
-    function pointerUp(event) {
-      if (isDown) onSelectOver();
-    }
-
-    document.addEventListener('pointerdown', pointerDown, {
-      passive: true
-    });
-    document.addEventListener('pointermove', pointerMove, {
-      passive: true,
-      capture: true
-    });
-    document.addEventListener('pointerup', pointerUp, {
-      passive: true
-    });
-    return () => {
-      document.removeEventListener('pointerdown', pointerDown);
-      document.removeEventListener('pointermove', pointerMove);
-      document.removeEventListener('pointerup', pointerUp);
-    };
-  }, [size.width, size.height, raycaster, camera, controls, gl]);
-  return /*#__PURE__*/React.createElement("group", _extends({
-    ref: ref,
-    onClick: onClick,
-    onPointerOver: () => hover(true),
-    onPointerOut: () => hover(false),
-    onPointerMissed: onPointerMissed
-  }, props), /*#__PURE__*/React.createElement(context.Provider, {
-    value: active
-  }, children));
-}
-function useSelect() {
-  return React.useContext(context);
-}
-
-export { Select, useSelect };

package/src/web/View.js

@@ -1,206 +0,0 @@
-import * as React from 'react';
-import * as THREE from 'three';
-import { useThree, createPortal, useFrame } from '@react-three/fiber';
-
-const isOrthographicCamera = def => def && def.isOrthographicCamera;
-
-const col = new THREE.Color();
-/**
- * In `@react-three/fiber` after `v8.0.0` but prior to `v8.1.0`, `state.size` contained only dimension
- * information. After `v8.1.0`, position information (`top`, `left`) was added
- *
- * @todo remove this when drei supports v9 and up
- */
-
-function isNonLegacyCanvasSize(size) {
-  return 'top' in size;
-}
-
-function computeContainerPosition(canvasSize, trackRect) {
-  const {
-    right,
-    top,
-    left: trackLeft,
-    bottom: trackBottom,
-    width,
-    height
-  } = trackRect;
-  const isOffscreen = trackRect.bottom < 0 || top > canvasSize.height || right < 0 || trackRect.left > canvasSize.width;
-
-  if (isNonLegacyCanvasSize(canvasSize)) {
-    const canvasBottom = canvasSize.top + canvasSize.height;
-    const bottom = canvasBottom - trackBottom;
-    const left = trackLeft - canvasSize.left;
-    return {
-      position: {
-        width,
-        height,
-        left,
-        top,
-        bottom,
-        right
-      },
-      isOffscreen
-    };
-  } // Fall back on old behavior if r3f < 8.1.0
-
-
-  const bottom = canvasSize.height - trackBottom;
-  return {
-    position: {
-      width,
-      height,
-      top,
-      left: trackLeft,
-      bottom,
-      right
-    },
-    isOffscreen
-  };
-}
-
-function Container({
-  canvasSize,
-  scene,
-  index,
-  children,
-  frames,
-  rect,
-  track
-}) {
-  const get = useThree(state => state.get);
-  const camera = useThree(state => state.camera);
-  const virtualScene = useThree(state => state.scene);
-  const setEvents = useThree(state => state.setEvents);
-  let frameCount = 0;
-  useFrame(state => {
-    if (frames === Infinity || frameCount <= frames) {
-      var _track$current;
-
-      rect.current = (_track$current = track.current) == null ? void 0 : _track$current.getBoundingClientRect();
-      frameCount++;
-    }
-
-    if (rect.current) {
-      const {
-        position: {
-          left,
-          bottom,
-          width,
-          height
-        },
-        isOffscreen
-      } = computeContainerPosition(canvasSize, rect.current);
-      const aspect = width / height;
-
-      if (isOrthographicCamera(camera)) {
-        if (camera.left !== width / -2 || camera.right !== width / 2 || camera.top !== height / 2 || camera.bottom !== height / -2) {
-          Object.assign(camera, {
-            left: width / -2,
-            right: width / 2,
-            top: height / 2,
-            bottom: height / -2
-          });
-          camera.updateProjectionMatrix();
-        }
-      } else if (camera.aspect !== aspect) {
-        camera.aspect = aspect;
-        camera.updateProjectionMatrix();
-      }
-
-      state.gl.setViewport(left, bottom, width, height);
-      state.gl.setScissor(left, bottom, width, height);
-      state.gl.setScissorTest(true);
-
-      if (isOffscreen) {
-        state.gl.getClearColor(col);
-        state.gl.setClearColor(col, state.gl.getClearAlpha());
-        state.gl.clear(true, true);
-      } else {
-        // When children are present render the portalled scene, otherwise the default scene
-        state.gl.render(children ? virtualScene : scene, camera);
-      } // Restore the default state
-
-
-      state.gl.setScissorTest(true);
-    }
-  }, index);
-  React.useEffect(() => {
-    // Connect the event layer to the tracking element
-    const old = get().events.connected;
-    setEvents({
-      connected: track.current
-    });
-    return () => setEvents({
-      connected: old
-    });
-  }, []);
-  React.useEffect(() => {
-    if (isNonLegacyCanvasSize(canvasSize)) {
-      return;
-    }
-
-    console.warn('Detected @react-three/fiber canvas size does not include position information. <View /> may not work as expected. ' + 'Upgrade to @react-three/fiber ^8.1.0 for support.\n See https://github.com/pmndrs/drei/issues/944');
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-}
-
-const View = ({
-  track,
-  index = 1,
-  frames = Infinity,
-  children
-}) => {
-  var _rect$current, _rect$current2;
-
-  const rect = React.useRef(null);
-  const {
-    size,
-    scene
-  } = useThree();
-  const [virtualScene] = React.useState(() => new THREE.Scene());
-  const compute = React.useCallback((event, state) => {
-    if (rect.current && track.current && event.target === track.current) {
-      const {
-        width,
-        height,
-        left,
-        top
-      } = rect.current;
-      const x = event.clientX - left;
-      const y = event.clientY - top;
-      state.pointer.set(x / width * 2 - 1, -(y / height) * 2 + 1);
-      state.raycaster.setFromCamera(state.pointer, state.camera);
-    }
-  }, [rect, track]);
-  const [ready, toggle] = React.useReducer(() => true, false);
-  React.useEffect(() => {
-    var _track$current2;
-
-    // We need the tracking elements bounds beforehand in order to inject it into the portal
-    rect.current = (_track$current2 = track.current) == null ? void 0 : _track$current2.getBoundingClientRect(); // And now we can proceed
-
-    toggle();
-  }, [track]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, ready && createPortal( /*#__PURE__*/React.createElement(Container, {
-    canvasSize: size,
-    frames: frames,
-    scene: scene,
-    track: track,
-    rect: rect,
-    index: index
-  }, children, /*#__PURE__*/React.createElement("group", {
-    onPointerOver: () => null
-  })), virtualScene, {
-    events: {
-      compute,
-      priority: index
-    },
-    size: {
-      width: (_rect$current = rect.current) == null ? void 0 : _rect$current.width,
-      height: (_rect$current2 = rect.current) == null ? void 0 : _rect$current2.height
-    }
-  }));
-};
-
-export { View };