@react-three/drei 10.7.7 → 10.8.0-alpha.1

package/web/Loader.js

@@ -1,101 +0,0 @@
-import * as React from 'react';
-import { useProgress } from '../core/Progress.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/web/PresentationControls.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),o=require("@use-gesture/react"),n=require("maath");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=u(e),i=s(t);exports.PresentationControls=function({enabled:e=!0,snap:t,global:u,domElement:s,cursor:c=!0,children:d,speed:m=1,rotation:f=[0,0,0],zoom:p=1,polar:g=[0,Math.PI/2],azimuth:h=[-1/0,1/0],damping:b=.25}){const y=a.useThree((e=>e.events)),M=a.useThree((e=>e.gl)),v=s||y.connected||M.domElement,{size:E}=a.useThree(),j=i.useMemo((()=>[f[0]+g[0],f[0]+g[1]]),[f[0],g[0],g[1]]),O=i.useMemo((()=>[f[1]+h[0],f[1]+h[1]]),[f[1],h[0],h[1]]),P=i.useMemo((()=>[r.MathUtils.clamp(f[0],...j),r.MathUtils.clamp(f[1],...O),f[2]]),[f[0],f[1],f[2],j,O]);i.useEffect((()=>{if(u&&c&&e)return v.style.cursor="grab",M.domElement.style.cursor="",()=>{v.style.cursor="default",M.domElement.style.cursor="default"}}),[u,c,v,e]);const[q]=i.useState({scale:1,rotation:P,damping:b}),z=i.useRef(null);a.useFrame(((e,t)=>{n.easing.damp3(z.current.scale,q.scale,q.damping,t),n.easing.dampE(z.current.rotation,q.rotation,q.damping,t)}));const U=o.useGesture({onHover:({last:t})=>{c&&!u&&e&&(v.style.cursor=t?"auto":"grab")},onDrag:({down:a,delta:[o,n],memo:[u,s]=q.rotation||P})=>e?(c&&(v.style.cursor=a?"grabbing":"grab"),o=r.MathUtils.clamp(s+o/E.width*Math.PI*m,...O),n=r.MathUtils.clamp(u+n/E.height*Math.PI*m,...j),q.scale=a&&n>j[1]/2?p:1,q.rotation=t&&!a?P:[n,o,0],q.damping=t&&!a&&"boolean"!=typeof t?t:b,[n,o]):[n,o]},{target:u?v:void 0});return i.createElement("group",l.default({ref:z},null==U?void 0:U()),d)};

package/web/PresentationControls.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-export type PresentationControlProps = {
-    snap?: Boolean | number;
-    global?: boolean;
-    cursor?: boolean;
-    speed?: number;
-    zoom?: number;
-    rotation?: [number, number, number];
-    polar?: [number, number];
-    azimuth?: [number, number];
-    damping?: number;
-    enabled?: boolean;
-    children?: React.ReactNode;
-    domElement?: HTMLElement;
-};
-export declare function PresentationControls({ enabled, snap, global, domElement, cursor, children, speed, rotation, zoom, polar, azimuth, damping, }: PresentationControlProps): React.JSX.Element;

package/web/PresentationControls.js

@@ -1,79 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import * as React from 'react';
-import { MathUtils } from 'three';
-import { useThree, useFrame } from '@react-three/fiber';
-import { useGesture } from '@use-gesture/react';
-import { easing } from 'maath';
-
-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],
-  damping = 0.25
-}) {
-  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]);
-  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 [animation] = React.useState({
-    scale: 1,
-    rotation: rInitial,
-    damping
-  });
-  const ref = React.useRef(null);
-  useFrame((state, delta) => {
-    easing.damp3(ref.current.scale, animation.scale, animation.damping, delta);
-    easing.dampE(ref.current.rotation, animation.rotation, animation.damping, delta);
-  });
-  const bind = useGesture({
-    onHover: ({
-      last
-    }) => {
-      if (cursor && !global && enabled) explDomElement.style.cursor = last ? 'auto' : 'grab';
-    },
-    onDrag: ({
-      down,
-      delta: [x, y],
-      memo: [oldY, oldX] = animation.rotation || 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);
-      animation.scale = down && y > rPolar[1] / 2 ? zoom : 1;
-      animation.rotation = snap && !down ? rInitial : [y, x, 0];
-      animation.damping = snap && !down && typeof snap !== 'boolean' ? snap : damping;
-      return [y, x];
-    }
-  }, {
-    target: global ? explDomElement : undefined
-  });
-  return /*#__PURE__*/React.createElement("group", _extends({
-    ref: ref
-  }, bind == null ? void 0 : bind()), children);
-}
-
-export { PresentationControls };

package/web/ScreenVideoTexture.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("suspend-react"),u=require("../core/VideoTexture.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three"),require("@react-three/fiber"),require("hls.js");var n=c(e),o=i(r);const a=r.forwardRef((({options:e={video:!0},...c},i)=>{const a=t.suspend((()=>navigator.mediaDevices.getDisplayMedia(e)),[]);return r.useEffect((()=>()=>{null==a||a.getTracks().forEach((e=>e.stop())),t.clear([])}),[a]),o.createElement(u.VideoTexture,n.default({ref:i},c,{src:a}))}));exports.ScreenVideoTexture=a;

package/web/ScreenVideoTexture.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import * as THREE from 'three';
-import { VideoTextureProps } from '../core/VideoTexture';
-export type ScreenVideoTextureProps = Omit<VideoTextureProps, 'src'> & {
-    options?: DisplayMediaStreamOptions;
-};
-export declare const ScreenVideoTexture: React.ForwardRefExoticComponent<Omit<{
-    children?: (texture: THREE.VideoTexture) => React.ReactNode;
-    src: string | MediaProvider | null;
-} & {
-    unsuspend?: keyof HTMLVideoElementEventMap;
-    start?: boolean;
-    hls?: Parameters<(userConfig?: Partial<import("hls.js").HlsConfig> | undefined) => Promise<import("hls.js").default | null>>[0];
-    onVideoFrame?: VideoFrameRequestCallback;
-} & Partial<Omit<HTMLVideoElement, "children" | "src" | "srcObject">>, "src"> & {
-    options?: DisplayMediaStreamOptions;
-} & React.RefAttributes<THREE.VideoTexture>>;

package/web/ScreenVideoTexture.js

@@ -1,30 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import * as React from 'react';
-import { forwardRef, useEffect } from 'react';
-import { suspend, clear } from 'suspend-react';
-import { VideoTexture } from '../core/VideoTexture.js';
-
-/**
- * Create a video texture from [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia)
- */
-const ScreenVideoTexture = /* @__PURE__ */forwardRef(({
-  options = {
-    video: true
-  },
-  ...props
-}, fref) => {
-  const mediaStream = suspend(() => navigator.mediaDevices.getDisplayMedia(options), []);
-  useEffect(() => {
-    return () => {
-      mediaStream == null || mediaStream.getTracks().forEach(track => track.stop());
-      clear([]);
-    };
-  }, [mediaStream]);
-  return /*#__PURE__*/React.createElement(VideoTexture, _extends({
-    ref: fref
-  }, props, {
-    src: mediaStream
-  }));
-});
-
-export { ScreenVideoTexture };

package/web/ScrollControls.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("react-dom/client"),n=require("@react-three/fiber"),o=require("maath");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=s(e),c=l(t),a=l(r);const f=c.createContext(null);function u(){return c.useContext(f)}const d=c.forwardRef((({children:e},t)=>{const r=c.useRef(null);c.useImperativeHandle(t,(()=>r.current),[]);const o=u(),{width:s,height:l}=n.useThree((e=>e.viewport));return n.useFrame((()=>{r.current.position.x=o.horizontal?-s*(o.pages-1)*o.offset:0,r.current.position.y=o.horizontal?0:l*(o.pages-1)*o.offset})),c.createElement("group",{ref:r},e)})),p=c.forwardRef((({children:e,style:t,...r},o)=>{const s=u(),l=c.useRef(null);c.useImperativeHandle(o,(()=>l.current),[]);const{width:d,height:p}=n.useThree((e=>e.size)),h=c.useContext(n.context),m=c.useMemo((()=>a.createRoot(s.fixed)),[s.fixed]);return n.useFrame((()=>{s.delta>s.eps&&(l.current.style.transform=`translate3d(${s.horizontal?-d*(s.pages-1)*s.offset:0}px,${s.horizontal?0:p*(s.pages-1)*-s.offset}px,0)`)})),m.render(c.createElement("div",i.default({ref:l,style:{...t,position:"absolute",top:0,left:0,willChange:"transform"}},r),c.createElement(f.Provider,{value:s},c.createElement(n.context.Provider,{value:h},e)))),null})),h=c.forwardRef((({html:e,...t},r)=>{const n=e?p:d;return c.createElement(n,i.default({ref:r},t))}));exports.Scroll=h,exports.ScrollControls=function({eps:e=1e-5,enabled:t=!0,infinite:r,horizontal:s,pages:l=1,distance:i=1,damping:a=.25,maxSpeed:u=1/0,prepend:d=!1,style:p={},children:h}){const{get:m,setEvents:v,gl:g,size:y,invalidate:x,events:w}=n.useThree(),[E]=c.useState((()=>document.createElement("div"))),[b]=c.useState((()=>document.createElement("div"))),[z]=c.useState((()=>document.createElement("div"))),C=g.domElement.parentNode,L=c.useRef(0),R=c.useMemo((()=>{const t={el:E,eps:e,fill:b,fixed:z,horizontal:s,damping:a,offset:0,delta:0,scroll:L,pages:l,range(e,t,r=0){const n=e-r,o=n+t+2*r;return this.offset<n?0:this.offset>o?1:(this.offset-n)/(o-n)},curve(e,t,r=0){return Math.sin(this.range(e,t,r)*Math.PI)},visible(e,t,r=0){const n=e-r,o=n+t+2*r;return this.offset>=n&&this.offset<=o}};return t}),[e,a,s,l]);c.useEffect((()=>{E.style.position="absolute",E.style.width="100%",E.style.height="100%",E.style[s?"overflowX":"overflowY"]="auto",E.style[s?"overflowY":"overflowX"]="hidden",E.style.top="0px",E.style.left="0px";for(const e in p)E.style[e]=p[e];z.style.position="sticky",z.style.top="0px",z.style.left="0px",z.style.width="100%",z.style.height="100%",z.style.overflow="hidden",E.appendChild(z),b.style.height=s?"100%":l*i*100+"%",b.style.width=s?l*i*100+"%":"100%",b.style.pointerEvents="none",E.appendChild(b),d?C.prepend(E):C.appendChild(E),E[s?"scrollLeft":"scrollTop"]=1;const e=w.connected||g.domElement;requestAnimationFrame((()=>null==w.connect?void 0:w.connect(E)));const t=m().events.compute;return v({compute(e,t){const{left:r,top:n}=C.getBoundingClientRect(),o=e.clientX-r,s=e.clientY-n;t.pointer.set(o/t.size.width*2-1,-s/t.size.height*2+1),t.raycaster.setFromCamera(t.pointer,t.camera)}}),()=>{C.removeChild(E),v({compute:t}),null==w.connect||w.connect(e)}}),[l,i,s,E,b,z,C]),c.useEffect((()=>{if(w.connected===E){const e=y[s?"width":"height"],n=E[s?"scrollWidth":"scrollHeight"],o=n-e;let l=0,i=!0,c=!0;const a=()=>{if(t&&!c&&(x(),l=E[s?"scrollLeft":"scrollTop"],L.current=l/o,r)){if(!i)if(l>=o){const e=1-R.offset;E[s?"scrollLeft":"scrollTop"]=1,L.current=R.offset=-e,i=!0}else if(l<=0){const e=1+R.offset;E[s?"scrollLeft":"scrollTop"]=n,L.current=R.offset=e,i=!0}i&&setTimeout((()=>i=!1),40)}};E.addEventListener("scroll",a,{passive:!0}),requestAnimationFrame((()=>c=!1));const f=e=>E.scrollLeft+=e.deltaY/2;return s&&E.addEventListener("wheel",f,{passive:!0}),()=>{E.removeEventListener("scroll",a),s&&E.removeEventListener("wheel",f)}}}),[E,w,y,r,R,x,s,t]);let T=0;return n.useFrame(((t,r)=>{T=R.offset,o.easing.damp(R,"offset",L.current,a,r,u,void 0,e),o.easing.damp(R,"delta",Math.abs(T-R.offset),a,r,u,void 0,e),R.delta>e&&x()})),c.createElement(f.Provider,{value:R},h)},exports.useScroll=u;

package/web/ScrollControls.d.ts

@@ -1,45 +0,0 @@
-import * as THREE from 'three';
-import * as React from 'react';
-import { ForwardRefComponent } from '../helpers/ts-utils';
-export type ScrollControlsProps = {
-    eps?: number;
-    horizontal?: boolean;
-    infinite?: boolean;
-    pages?: number;
-    distance?: number;
-    damping?: number;
-    maxSpeed?: number;
-    prepend?: boolean;
-    enabled?: boolean;
-    style?: React.CSSProperties;
-    children: React.ReactNode;
-};
-export type ScrollControlsState = {
-    el: HTMLDivElement;
-    eps: number;
-    fill: HTMLDivElement;
-    fixed: HTMLDivElement;
-    horizontal: boolean | undefined;
-    damping: number;
-    offset: number;
-    delta: number;
-    pages: number;
-    range(from: number, distance: number, margin?: number): number;
-    curve(from: number, distance: number, margin?: number): number;
-    visible(from: number, distance: number, margin?: number): boolean;
-};
-export declare function useScroll(): ScrollControlsState;
-export declare function ScrollControls({ eps, enabled, infinite, horizontal, pages, distance, damping, maxSpeed, prepend, style, children, }: ScrollControlsProps): React.JSX.Element;
-interface ScrollPropsWithFalseHtml {
-    children?: React.ReactNode;
-    html?: false;
-    style?: never;
-}
-interface ScrollPropsWithTrueHtml {
-    children?: React.ReactNode;
-    html: true;
-    style?: React.CSSProperties;
-}
-export type ScrollProps = ScrollPropsWithFalseHtml | ScrollPropsWithTrueHtml;
-export declare const Scroll: ForwardRefComponent<ScrollProps, THREE.Group & HTMLDivElement>;
-export {};

package/web/ScrollControls.js

@@ -1,237 +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 { 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,
-  prepend = false,
-  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);
-    if (prepend) target.prepend(el);else 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 || 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);
-  React.useImperativeHandle(ref, () => group.current, []);
-  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: group
-  }, children);
-});
-const ScrollHtml = /*#__PURE__*/React.forwardRef(({
-  children,
-  style,
-  ...props
-}, ref) => {
-  const state = useScroll();
-  const group = React.useRef(null);
-  React.useImperativeHandle(ref, () => group.current, []);
-  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: 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/web/Select.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),n=require("three"),r=require("three-stdlib"),o=require("@react-three/fiber"),i=require("zustand/shallow");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=l(e),u=s(t),a=s(n);const d=u.createContext([]);exports.Select=function({box:e,multiple:t,children:n,onChange:l,onChangePointerUp:s,border:f="1px solid #55aaff",backgroundColor:p="rgba(75, 160, 255, 0.1)",filter:h=e=>e,...v}){const[b,y]=u.useState(!1),{setEvents:m,camera:x,raycaster:E,gl:g,controls:w,size:j,get:C}=o.useThree(),[P,O]=u.useState(!1),[M,k]=u.useReducer(((e,{object:t,shift:n})=>void 0===t?[]:Array.isArray(t)?t:n?e.includes(t)?e.filter((e=>e!==t)):[t,...e]:e[0]===t?[]:[t]),[]);u.useEffect((()=>{b?null==l||l(M):null==s||s(M)}),[M,b]);const q=u.useCallback((e=>{e.stopPropagation(),k({object:h([e.object])[0],shift:t&&e.shiftKey})}),[]),L=u.useCallback((e=>!P&&k({})),[P]),S=u.useRef(null);return u.useEffect((()=>{if(!e||!t)return;const n=new r.SelectionBox(x,S.current),o=document.createElement("div");o.style.pointerEvents="none",o.style.border=f,o.style.backgroundColor=p,o.style.position="fixed";const l=new a.Vector2,s=new a.Vector2,c=new a.Vector2,u=C().events.enabled,d=null==w?void 0:w.enabled;let v=!1;function b(e,t){const{offsetX:n,offsetY:r}=e,{width:o,height:i}=j;t.set(n/o*2-1,-r/i*2+1)}function E(e){e.shiftKey&&(!function(e){var t;w&&(w.enabled=!1),m({enabled:!1}),y(v=!0),null==(t=g.domElement.parentElement)||t.appendChild(o),o.style.left=`${e.clientX}px`,o.style.top=`${e.clientY}px`,o.style.width="0px",o.style.height="0px",l.x=e.clientX,l.y=e.clientY}(e),b(e,n.startPoint))}let P=[];function O(e){if(v){!function(e){c.x=Math.max(l.x,e.clientX),c.y=Math.max(l.y,e.clientY),s.x=Math.min(l.x,e.clientX),s.y=Math.min(l.y,e.clientY),o.style.left=`${s.x}px`,o.style.top=`${s.y}px`,o.style.width=c.x-s.x+"px",o.style.height=c.y-s.y+"px"}(e),b(e,n.endPoint);const t=n.select().sort((e=>e.uuid)).filter((e=>e.isMesh));i.shallow(t,P)||(P=t,k({object:h(t)}))}}function M(e){var t;v&&v&&(w&&(w.enabled=d),m({enabled:u}),y(v=!1),null==(t=o.parentElement)||t.removeChild(o))}return document.addEventListener("pointerdown",E,{passive:!0}),document.addEventListener("pointermove",O,{passive:!0,capture:!0}),document.addEventListener("pointerup",M,{passive:!0}),()=>{document.removeEventListener("pointerdown",E),document.removeEventListener("pointermove",O,!0),document.removeEventListener("pointerup",M)}}),[j.width,j.height,E,x,w,g]),u.createElement("group",c.default({ref:S,onClick:q,onPointerOver:()=>O(!0),onPointerOut:()=>O(!1),onPointerMissed:L},v),u.createElement(d.Provider,{value:M},n))},exports.useSelect=function(){return u.useContext(d)};

package/web/Select.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import * as THREE from 'three';
-import { ThreeElements } from '@react-three/fiber';
-export type SelectProps = Omit<ThreeElements['group'], 'ref'> & {
-    multiple?: boolean;
-    box?: boolean;
-    border?: string;
-    backgroundColor?: string;
-    onChange?: (selected: THREE.Object3D[]) => void;
-    onChangePointerUp?: (selected: THREE.Object3D[]) => void;
-    filter?: (selected: THREE.Object3D[]) => THREE.Object3D[];
-};
-export declare function Select({ box, multiple, children, onChange, onChangePointerUp, border, backgroundColor, filter: customFilter, ...props }: SelectProps): React.JSX.Element;
-export declare function useSelect(): THREE.Object3D[];