@react-three/drei 9.74.11 → 9.74.13

package/src/web/ScrollControls.js

@@ -0,0 +1,246 @@
+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

@@ -0,0 +1,175 @@
+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

@@ -0,0 +1,206 @@
+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 };