@react-three/drei 7.20.4 → 7.20.5

package/core/Segments.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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=a(t),u=a(r);const l=u.createContext(null),f=e=>e instanceof c.Vector3?e.toArray():e,d=u.forwardRef(((e,t)=>{const{limit:r=1e3,lineWidth:s=1,children:a,...d}=e,[m,b]=u.useState([]),[g]=u.useState((()=>new o.Line2)),[h]=u.useState((()=>new o.LineMaterial)),[p]=u.useState((()=>new o.LineSegmentsGeometry)),[v]=u.useState((()=>new c.Vector2(512,512))),[j]=u.useState((()=>Array(r).fill(0))),[y]=u.useState((()=>Array(r).fill(1))),S=u.useMemo((()=>({subscribe:e=>(b((t=>[...t,e])),()=>b((t=>t.filter((t=>t.current!==e.current)))))})),[]);return n.useFrame((()=>{j.length=6*m.length,y.length=6*m.length,m.forEach(((e,t)=>{const r=e.current;if(r){const e=f(r.start),s=f(r.end),a=(o=r.color)instanceof c.Color?o.toArray():o;for(var n=0;n<3;n++)j[6*t+n]=e[n],j[6*t+n+3]=s[n],y[6*t+n]=a[n],y[6*t+n+3]=a[n]}var o})),p.setColors(y),p.setPositions(j),g.computeLineDistances()})),u.createElement("primitive",{object:g,ref:t},u.createElement("primitive",{object:p,attach:"geometry"}),u.createElement("primitive",i.default({object:h,attach:"material",vertexColors:!0,resolution:v,linewidth:s},d)),u.createElement(l.Provider,{value:S},a))})),m=u.forwardRef(((e,t)=>{const{start:r,end:n,color:o}=e,s=u.useContext(l);if(!s)throw"Segment must used inside Segments component.";const a=u.useRef({start:[0,0,0],end:[0,0,0],color:[1,1,1]});return u.useLayoutEffect((()=>s.subscribe(t||a)),[]),u.useLayoutEffect((()=>{var e=t||a;r&&Object.assign(e.current,{start:r}),n&&Object.assign(e.current,{end:n}),o&&Object.assign(e.current,{color:o})}),[r,n,o]),null}));exports.Segment=m,exports.Segments=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("react-merge-refs"),o=require("@react-three/fiber"),i=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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 c=s(e),u=a(t),l=a(r),f=s(n);const m=l.createContext(null),d=e=>e instanceof u.Vector3?e.toArray():e,b=l.forwardRef(((e,t)=>{const{limit:r=1e3,lineWidth:n=1,children:s,...a}=e,[f,b]=l.useState([]),[h]=l.useState((()=>new i.Line2)),[v]=l.useState((()=>new i.LineMaterial)),[p]=l.useState((()=>new i.LineSegmentsGeometry)),[w]=l.useState((()=>new u.Vector2(512,512))),[S]=l.useState((()=>Array(6*r).fill(0))),[g]=l.useState((()=>Array(6*r).fill(0))),j=l.useMemo((()=>({subscribe:e=>(b((t=>[...t,e])),()=>b((t=>t.filter((t=>t.current!==e.current)))))})),[]);return o.useFrame((()=>{for(let o=0;o<r;o++){var e;const r=null==(e=f[o])?void 0:e.current,i=r?d(r.start):[0,0,0],s=r?d(r.end):[0,0,0],a=r?(n=r.color)instanceof u.Color?n.toArray():n:[1,1,1];for(var t=0;t<3;t++)S[6*o+t]=i[t],S[6*o+t+3]=s[t],g[6*o+t]=a[t],g[6*o+t+3]=a[t]}var n;p.setColors(g),p.setPositions(S),h.computeLineDistances()})),l.createElement("primitive",{object:h,ref:t},l.createElement("primitive",{object:p,attach:"geometry"}),l.createElement("primitive",c.default({object:v,attach:"material",vertexColors:!0,resolution:w,linewidth:n},a)),l.createElement(m.Provider,{value:j},s))}));class h{constructor(){this.color=new u.Color("white"),this.start=new u.Vector3(0,0,0),this.end=new u.Vector3(0,0,0)}}const v=l.forwardRef(((e,t)=>{const r=l.useContext(m);if(!r)throw"Segment must used inside Segments component.";const n=l.useRef();return l.useMemo((()=>o.extend({SegmentObject:h})),[]),l.useLayoutEffect((()=>r.subscribe(n)),[]),l.createElement("segmentObject",c.default({ref:f.default([n,t])},e))}));exports.Segment=v,exports.Segments=b;

package/core/Segments.d.ts

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 import * as React from 'react';
+import { ReactThreeFiber } from '@react-three/fiber';
 import { Line2 } from 'three-stdlib';
 declare type SegmentsProps = {
     limit?: number;
@@ -7,10 +8,24 @@ declare type SegmentsProps = {
     children: React.ReactNode;
 };
 declare type Segment = {
-    start: THREE.Vector3 | [number, number, number];
-    end: THREE.Vector3 | [number, number, number];
-    color?: THREE.Color | [number, number, number];
+    start: THREE.Vector3;
+    end: THREE.Vector3;
+    color?: THREE.Color;
 };
+declare type SegmentProps = JSX.IntrinsicElements['segmentObject'] & Segment;
 declare const Segments: React.ForwardRefExoticComponent<SegmentsProps & React.RefAttributes<Line2>>;
-declare const Segment: React.ForwardRefExoticComponent<Segment & React.RefAttributes<Segment>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            segmentObject: ReactThreeFiber.Object3DNode<SegmentObject, typeof SegmentObject>;
+        }
+    }
+}
+declare class SegmentObject {
+    color: THREE.Color;
+    start: THREE.Vector3;
+    end: THREE.Vector3;
+    constructor();
+}
+declare const Segment: React.ForwardRefExoticComponent<Pick<SegmentProps, "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "color" | "onClick" | "onContextMenu" | "onDoubleClick" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOut" | "onWheel" | "onPointerMissed" | "end" | "start"> & React.RefAttributes<Segment>>;
 export { Segments, Segment };

package/core/Segments.js

@@ -1,7 +1,8 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as THREE from 'three';
 import * as React from 'react';
-import { useFrame } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+import { useFrame, extend } from '@react-three/fiber';
 import { Line2, LineMaterial, LineSegmentsGeometry } from 'three-stdlib';
 
 const context = /*#__PURE__*/React.createContext(null);
@@ -22,8 +23,8 @@ const Segments = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
   const [material] = React.useState(() => new LineMaterial());
   const [geometry] = React.useState(() => new LineSegmentsGeometry());
   const [resolution] = React.useState(() => new THREE.Vector2(512, 512));
-  const [positions] = React.useState(() => Array(limit).fill(0));
-  const [colors] = React.useState(() => Array(limit).fill(1));
+  const [positions] = React.useState(() => Array(limit * 6).fill(0));
+  const [colors] = React.useState(() => Array(limit * 6).fill(0));
   const api = React.useMemo(() => ({
     subscribe: ref => {
       setSegments(segments => [...segments, ref]);
@@ -31,24 +32,22 @@ const Segments = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     }
   }), []);
   useFrame(() => {
-    positions.length = segments.length * 6;
-    colors.length = segments.length * 6;
-    segments.forEach((segmentRef, i) => {
-      const segment = segmentRef.current;
+    for (let i = 0; i < limit; i++) {
+      var _segments$i;
 
-      if (segment) {
-        const segmentStart = arrPos(segment.start);
-        const segmentEnd = arrPos(segment.end);
-        const segmentColor = arrColor(segment.color);
+      const segment = (_segments$i = segments[i]) == null ? void 0 : _segments$i.current;
+      const segmentStart = segment ? arrPos(segment.start) : [0, 0, 0];
+      const segmentEnd = segment ? arrPos(segment.end) : [0, 0, 0];
+      const segmentColor = segment ? arrColor(segment.color) : [1, 1, 1]; //console.log(segmentStart, segmentEnd, segmentColor)
 
-        for (var j = 0; j < 3; j++) {
-          positions[i * 6 + j] = segmentStart[j];
-          positions[i * 6 + j + 3] = segmentEnd[j];
-          colors[i * 6 + j] = segmentColor[j];
-          colors[i * 6 + j + 3] = segmentColor[j];
-        }
+      for (var j = 0; j < 3; j++) {
+        positions[i * 6 + j] = segmentStart[j];
+        positions[i * 6 + j + 3] = segmentEnd[j];
+        colors[i * 6 + j] = segmentColor[j];
+        colors[i * 6 + j + 3] = segmentColor[j];
       }
-    });
+    }
+
     geometry.setColors(colors);
     geometry.setPositions(positions);
     line.computeLineDistances();
@@ -69,33 +68,27 @@ const Segments = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     value: api
   }, children));
 });
+
+class SegmentObject {
+  constructor() {
+    this.color = new THREE.Color('white');
+    this.start = new THREE.Vector3(0, 0, 0);
+    this.end = new THREE.Vector3(0, 0, 0);
+  }
+
+}
+
 const Segment = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
-  const {
-    start,
-    end,
-    color
-  } = props;
   const api = React.useContext(context);
   if (!api) throw 'Segment must used inside Segments component.';
-  const ref = React.useRef({
-    start: [0, 0, 0],
-    end: [0, 0, 0],
-    color: [1, 1, 1]
-  });
-  React.useLayoutEffect(() => api.subscribe(forwardedRef || ref), []);
-  React.useLayoutEffect(() => {
-    var currRef = forwardedRef || ref;
-    start && Object.assign(currRef.current, {
-      start
-    });
-    end && Object.assign(currRef.current, {
-      end
-    });
-    color && Object.assign(currRef.current, {
-      color
-    });
-  }, [start, end, color]);
-  return null;
+  const ref = React.useRef();
+  React.useMemo(() => extend({
+    SegmentObject
+  }), []);
+  React.useLayoutEffect(() => api.subscribe(ref), []);
+  return /*#__PURE__*/React.createElement("segmentObject", _extends({
+    ref: mergeRefs([ref, forwardedRef])
+  }, props));
 });
 
 export { Segment, Segments };