@react-three/drei 9.112.0 → 9.113.0

package/README.md

@@ -779,24 +779,6 @@ https://pmndrs.github.io/drei
 
 [Documentation has moved here](https://pmndrs.github.io/drei/staging/use-environment)
 
-In order to preload you do this:
-
-```jsx
-useEnvironment.preload({ preset: 'city' })
-useEnvironment.preload({ files: 'model.hdr' })
-useEnvironment.preload({ files: ['px', 'nx', 'py', 'ny', 'pz', 'nz'].map((n) => `${n}.png`) })
-```
-
-Keep in mind that preloading [gainmaps](https://github.com/MONOGRID/gainmap-js) is not possible, because their loader requires access to the renderer.
-
-You can also clear your environment map from the cache:
-
-```jsx
-useEnvironment.clear({ preset: 'city' })
-useEnvironment.clear({ files: 'model.hdr' })
-useEnvironment.clear({ files: ['px', 'nx', 'py', 'ny', 'pz', 'nz'].map((n) => `${n}.png`) })
-```
-
 #### MatcapTexture / useMatcapTexture
 
 [Documentation has moved here](https://pmndrs.github.io/drei/staging/matcap-texture-use-matcap-texture)

package/core/GradientTexture.d.ts

@@ -13,6 +13,6 @@ type Props = {
     type?: GradientType;
     innerCircleRadius?: number;
     outerCircleRadius?: string | number;
-} & JSX.IntrinsicElements['texture'];
+} & Omit<JSX.IntrinsicElements['texture'], 'type'>;
 export declare function GradientTexture({ stops, colors, size, width, type, innerCircleRadius, outerCircleRadius, ...props }: Props): React.JSX.Element;
 export {};

package/core/GradientTexture.js

@@ -13,7 +13,6 @@ function GradientTexture({
   colors,
   size = 1024,
   width = 16,
-  //@ts-ignore - weird error about type never, although the type is clearly defined
   type = GradientType.Linear,
   innerCircleRadius = 0,
   outerCircleRadius = 'auto',

package/core/Line.d.ts

@@ -1,10 +1,10 @@
-import { Vector2, Vector3, Color, ColorRepresentation } from 'three';
-import { ReactThreeFiber } from '@react-three/fiber';
+import { Color, ColorRepresentation } from 'three';
+import { ReactThreeFiber, Vector2 as FiberVector2, Vector3 as FiberVector3 } from '@react-three/fiber';
 import { LineMaterial, LineMaterialParameters, Line2, LineSegments2 } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
 export type LineProps = {
-    points: Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>;
-    vertexColors?: Array<Color | [number, number, number] | [number, number, number, number]>;
+    points: ReadonlyArray<FiberVector2 | FiberVector3>;
+    vertexColors?: ReadonlyArray<Color | [number, number, number] | [number, number, number, number]>;
     lineWidth?: number;
     segments?: boolean;
 } & Omit<LineMaterialParameters, 'vertexColors' | 'color'> & Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args'> & Omit<ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>, 'color' | 'vertexColors' | 'args'> & {

package/core/StatsGl.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("stats-gl");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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 l=u(e),c=n(r);exports.StatsGl=function({className:e,parent:r,...n}){const u=t.useThree((e=>e.gl)),o=l.useMemo((()=>{const e=new c.default({...n});return e.init(u),e}),[u]);return l.useEffect((()=>{if(o){const n=r&&r.current||document.body;null==n||n.appendChild(o.dom);const u=(null!=e?e:"").split(" ").filter((e=>e));u.length&&o.dom.classList.add(...u);const l=t.addAfterEffect((()=>o.update()));return()=>{u.length&&o.dom.classList.remove(...u),null==n||n.removeChild(o.dom),l()}}}),[r,o,e]),null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),t=require("react"),r=require("stats-gl");function o(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 o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=l(t),u=o(r);const s=n.forwardRef((({className:t,parent:r,id:o,clearStatsGlStyle:l,...s},a)=>{const c=e.useThree((e=>e.gl)),d=n.useMemo((()=>{const e=new u.default({...s});return e.init(c),e}),[c]);return n.useImperativeHandle(a,(()=>d.dom)),n.useEffect((()=>{if(d){const n=r&&r.current||document.body;null==n||n.appendChild(d.dom),d.dom.querySelectorAll("canvas").forEach((e=>{e.style.removeProperty("position")})),o&&(d.dom.id=o),l&&d.dom.removeAttribute("style"),d.dom.removeAttribute("style");const u=(null!=t?t:"").split(" ").filter((e=>e));u.length&&d.dom.classList.add(...u);const s=e.addAfterEffect((()=>d.update()));return()=>{u.length&&d.dom.classList.remove(...u),null==n||n.removeChild(d.dom),s()}}}),[r,d,t,o,l]),null}));s.displayName="StatsGl",exports.StatsGl=s;

package/core/StatsGl.d.ts

@@ -1,9 +1,13 @@
+import { ForwardRefComponent } from '../helpers/ts-utils';
 import * as React from 'react';
 import Stats from 'stats-gl';
 type Props = Partial<Stats> & {
+    id?: string;
+    clearStatsGlStyle?: boolean;
     showPanel?: number;
     className?: string;
     parent?: React.RefObject<HTMLElement>;
+    ref?: React.RefObject<HTMLElement>;
 };
-export declare function StatsGl({ className, parent, ...props }: Props): null;
+export declare const StatsGl: ForwardRefComponent<Props, HTMLDivElement>;
 export {};

package/core/StatsGl.js

@@ -1,12 +1,14 @@
-import * as React from 'react';
 import { useThree, addAfterEffect } from '@react-three/fiber';
+import * as React from 'react';
 import Stats from 'stats-gl';
 
-function StatsGl({
+const StatsGl = /* @__PURE__ */React.forwardRef(({
   className,
   parent,
+  id,
+  clearStatsGlStyle,
   ...props
-}) {
+}, fref) => {
   const gl = useThree(state => state.gl);
   const stats = React.useMemo(() => {
     const stats = new Stats({
@@ -15,10 +17,17 @@ function StatsGl({
     stats.init(gl);
     return stats;
   }, [gl]);
+  React.useImperativeHandle(fref, () => stats.dom);
   React.useEffect(() => {
     if (stats) {
       const node = parent && parent.current || document.body;
       node == null || node.appendChild(stats.dom);
+      stats.dom.querySelectorAll('canvas').forEach(canvas => {
+        canvas.style.removeProperty('position');
+      });
+      if (id) stats.dom.id = id;
+      if (clearStatsGlStyle) stats.dom.removeAttribute('style');
+      stats.dom.removeAttribute('style');
       const classNames = (className !== null && className !== void 0 ? className : '').split(' ').filter(cls => cls);
       if (classNames.length) stats.dom.classList.add(...classNames);
       const end = addAfterEffect(() => stats.update());
@@ -28,8 +37,9 @@ function StatsGl({
         end();
       };
     }
-  }, [parent, stats, className]);
+  }, [parent, stats, className, id, clearStatsGlStyle]);
   return null;
-}
+});
+StatsGl.displayName = 'StatsGl';
 
 export { StatsGl };