@react-three/drei 9.65.2 → 9.65.4

package/README.md

@@ -363,7 +363,7 @@ PointerLockControls additionally supports a `selector` prop, which enables the b
 #### CameraControls
 
 <p>
-  <a href="https://codesandbox.io/s/sew669"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/sew669/screenshot.png?v2" alt="CameraControls"/></a>
+  <a href="https://codesandbox.io/s/us6ipl"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/us6ipl/screenshot.png" alt="CameraControls"/></a>
 </p>
 
 This is an implementation of the [camera-controls](https://github.com/yomotsu/camera-controls) library.
@@ -2441,13 +2441,13 @@ return (
     <meshBasicMaterial map={texture} toneMapped={false} />
 ```
 
-It also accepts a [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) from eg. [`.getDisplayMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia):
+It also accepts a [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) from eg. [`.getDisplayMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) or [`.getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia):
 
 ```jsx
 const [stream, setStream] = useState()
 
 return (
-  <mesh onClick={() => setStream(await navigator.mediaDevices.getDisplayMedia({ video: true })}>
+  <mesh onClick={async () => setStream(await navigator.mediaDevices.getDisplayMedia({ video: true }))}>
     <React.Suspense fallback={<meshBasicMaterial wireframe />}>
       <VideoMaterial src={stream} />
     </React.Suspense>

package/core/CameraControls.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("camera-controls");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 u=s(e),c=a(t),l=a(r),d=s(o);const f=r.forwardRef(((e,t)=>{r.useMemo((()=>{d.default.install({THREE:c}),n.extend({CameraControlsImpl:d.default})}),[]);const{camera:o,domElement:s,makeDefault:a,onStart:f,onEnd:i,onChange:m,regress:v,...E}=e,p=n.useThree((e=>e.camera)),b=n.useThree((e=>e.gl)),h=n.useThree((e=>e.invalidate)),T=n.useThree((e=>e.events)),g=n.useThree((e=>e.setEvents)),j=n.useThree((e=>e.set)),O=n.useThree((e=>e.get)),L=n.useThree((e=>e.performance)),q=o||p,y=s||T.connected||b.domElement,C=r.useMemo((()=>new d.default(q)),[q]);return n.useFrame(((e,t)=>{C.enabled&&C.update(t)}),-1),r.useEffect((()=>(C.connect(y),()=>{C.disconnect()})),[y,C]),l.useEffect((()=>{const e=e=>{h(),v&&L.regress(),m&&m(e)},t=e=>{f&&f(e)},r=e=>{i&&i(e)};return C.addEventListener("update",e),C.addEventListener("controlstart",t),C.addEventListener("controlend",r),()=>{C.removeEventListener("update",e),C.removeEventListener("controlstart",t),C.removeEventListener("controlend",r)}}),[C,f,i,h,g,v,m]),r.useEffect((()=>{if(a){const e=O().controls;return j({controls:C}),()=>j({controls:e})}}),[a,C]),l.createElement("primitive",u.default({ref:t,object:C},E))}));exports.CameraControls=f;
+"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("camera-controls");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 u=s(e),c=a(t),i=a(r),d=s(o);const l=r.forwardRef(((e,t)=>{r.useMemo((()=>{d.default.install({THREE:c}),n.extend({CameraControlsImpl:d.default})}),[]);const{camera:o,domElement:s,makeDefault:a,onStart:l,onEnd:f,onChange:v,regress:m,...E}=e,p=n.useThree((e=>e.camera)),b=n.useThree((e=>e.gl)),h=n.useThree((e=>e.invalidate)),L=n.useThree((e=>e.events)),T=n.useThree((e=>e.setEvents)),g=n.useThree((e=>e.set)),j=n.useThree((e=>e.get)),O=n.useThree((e=>e.performance)),q=o||p,w=s||L.connected||b.domElement,y=r.useMemo((()=>new d.default(q)),[q]);return n.useFrame(((e,t)=>{y.enabled&&y.update(t)}),-1),r.useEffect((()=>(y.connect(w),()=>{y.disconnect()})),[w,y]),i.useEffect((()=>{const e=e=>{h(),m&&O.regress(),v&&v(e)},t=e=>{l&&l(e)},r=e=>{f&&f(e)};return y.addEventListener("update",e),y.addEventListener("controlstart",t),y.addEventListener("controlend",r),y.addEventListener("control",e),y.addEventListener("transitionstart",e),y.addEventListener("wake",e),()=>{y.removeEventListener("update",e),y.removeEventListener("controlstart",t),y.removeEventListener("controlend",r),y.removeEventListener("control",e),y.removeEventListener("transitionstart",e),y.removeEventListener("wake",e)}}),[y,l,f,h,T,m,v]),r.useEffect((()=>{if(a){const e=j().controls;return g({controls:y}),()=>g({controls:e})}}),[a,y]),i.createElement("primitive",u.default({ref:t,object:y},E))}));exports.CameraControls=l;

package/core/CameraControls.js

@@ -60,10 +60,16 @@ const CameraControls = /*#__PURE__*/forwardRef((props, ref) => {
     controls.addEventListener('update', callback);
     controls.addEventListener('controlstart', onStartCb);
     controls.addEventListener('controlend', onEndCb);
+    controls.addEventListener('control', callback);
+    controls.addEventListener('transitionstart', callback);
+    controls.addEventListener('wake', callback);
     return () => {
       controls.removeEventListener('update', callback);
       controls.removeEventListener('controlstart', onStartCb);
       controls.removeEventListener('controlend', onEndCb);
+      controls.removeEventListener('control', callback);
+      controls.removeEventListener('transitionstart', callback);
+      controls.removeEventListener('wake', callback);
     };
   }, [controls, onStart, onEnd, invalidate, setEvents, regress, onChange]);
   useEffect(() => {

package/core/Float.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("react-merge-refs"),n=require("three");function o(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 u=a(e),i=o(r),c=a(n);const l=u.forwardRef((({children:e,speed:r=1,rotationIntensity:n=1,floatIntensity:o=1,floatingRange:a=[-.1,.1],...l},f)=>{const s=u.useRef(null),d=u.useRef(1e4*Math.random());return t.useFrame((e=>{var t,u;const i=d.current+e.clock.getElapsedTime();s.current.rotation.x=Math.cos(i/4*r)/8*n,s.current.rotation.y=Math.sin(i/4*r)/8*n,s.current.rotation.z=Math.sin(i/4*r)/20*n;let l=Math.sin(i/4*r)/10;l=c.MathUtils.mapLinear(l,-.1,.1,null!==(t=null==a?void 0:a[0])&&void 0!==t?t:-.1,null!==(u=null==a?void 0:a[1])&&void 0!==u?u:.1),s.current.position.y=l*o})),u.createElement("group",l,u.createElement("group",{ref:i.default([s,f])},e))}));exports.Float=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("react-merge-refs"),n=require("three");function a(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 o=u(e),i=a(r),c=u(n);const l=o.forwardRef((({children:e,enabled:r=!0,speed:n=1,rotationIntensity:a=1,floatIntensity:u=1,floatingRange:l=[-.1,.1],...f},s)=>{const d=o.useRef(null),p=o.useRef(1e4*Math.random());return t.useFrame((e=>{var t,o;if(!r||0===n)return;const i=p.current+e.clock.getElapsedTime();d.current.rotation.x=Math.cos(i/4*n)/8*a,d.current.rotation.y=Math.sin(i/4*n)/8*a,d.current.rotation.z=Math.sin(i/4*n)/20*a;let f=Math.sin(i/4*n)/10;f=c.MathUtils.mapLinear(f,-.1,.1,null!==(t=null==l?void 0:l[0])&&void 0!==t?t:-.1,null!==(o=null==l?void 0:l[1])&&void 0!==o?o:.1),d.current.position.y=f*u,d.current.updateMatrix()})),o.createElement("group",f,o.createElement("group",{ref:i.default([d,s]),matrixAutoUpdate:!1},e))}));exports.Float=l;

package/core/Float.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import * as THREE from 'three';
 export declare type FloatProps = JSX.IntrinsicElements['group'] & {
+    enabled?: boolean;
     speed?: number;
     rotationIntensity?: number;
     floatIntensity?: number;
     children?: React.ReactNode;
     floatingRange?: [number?, number?];
 };
-export declare const Float: React.ForwardRefExoticComponent<Pick<FloatProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getObjectsByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "speed" | "rotationIntensity" | "floatIntensity" | "floatingRange"> & React.RefAttributes<THREE.Group>>;
+export declare const Float: React.ForwardRefExoticComponent<Pick<FloatProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getObjectsByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "enabled" | "speed" | "rotationIntensity" | "floatIntensity" | "floatingRange"> & React.RefAttributes<THREE.Group>>;

package/core/Float.js

@@ -5,6 +5,7 @@ import * as THREE from 'three';
 
 const Float = /*#__PURE__*/React.forwardRef(({
   children,
+  enabled = true,
   speed = 1,
   rotationIntensity = 1,
   floatIntensity = 1,
@@ -16,6 +17,7 @@ const Float = /*#__PURE__*/React.forwardRef(({
   useFrame(state => {
     var _floatingRange$, _floatingRange$2;
 
+    if (!enabled || speed === 0) return;
     const t = offset.current + state.clock.getElapsedTime();
     ref.current.rotation.x = Math.cos(t / 4 * speed) / 8 * rotationIntensity;
     ref.current.rotation.y = Math.sin(t / 4 * speed) / 8 * rotationIntensity;
@@ -23,9 +25,11 @@ const Float = /*#__PURE__*/React.forwardRef(({
     let yPosition = Math.sin(t / 4 * speed) / 10;
     yPosition = THREE.MathUtils.mapLinear(yPosition, -0.1, 0.1, (_floatingRange$ = floatingRange == null ? void 0 : floatingRange[0]) !== null && _floatingRange$ !== void 0 ? _floatingRange$ : -0.1, (_floatingRange$2 = floatingRange == null ? void 0 : floatingRange[1]) !== null && _floatingRange$2 !== void 0 ? _floatingRange$2 : 0.1);
     ref.current.position.y = yPosition * floatIntensity;
+    ref.current.updateMatrix();
   });
   return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("group", {
-    ref: mergeRefs([ref, forwardRef])
+    ref: mergeRefs([ref, forwardRef]),
+    matrixAutoUpdate: false
   }, children));
 });
 

package/core/Text.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("troika-three-text"),n=require("@react-three/fiber"),o=require("suspend-react");function c(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 a=c(e),i=u(t);const f=i.forwardRef((({anchorX:e="center",anchorY:t="middle",font:c,fontSize:u=1,children:f,characters:s,onSync:d,...l},p)=>{const h=n.useThree((({invalidate:e})=>e)),[b]=i.useState((()=>new r.Text)),[y,j]=i.useMemo((()=>{const e=[];let t="";return i.Children.forEach(f,(r=>{"string"==typeof r||"number"==typeof r?t+=r:e.push(r)})),[e,t]}),[f]);return o.suspend((()=>new Promise((e=>r.preloadFont({font:c,characters:s},e)))),["troika-text",c,s]),i.useLayoutEffect((()=>{b.sync((()=>{h(),d&&d(b)}))})),i.useEffect((()=>()=>b.dispose()),[b]),i.createElement("primitive",a.default({object:b,ref:p,font:c,text:j,anchorX:e,anchorY:t,fontSize:u},l),y)}));exports.Text=f;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("troika-three-text"),n=require("@react-three/fiber"),o=require("suspend-react");function c(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 a=c(e),i=u(t);const f=i.forwardRef((({sdfGlyphSize:e=64,anchorX:t="center",anchorY:c="middle",font:u,fontSize:f=1,children:s,characters:d,onSync:l,...p},h)=>{const b=n.useThree((({invalidate:e})=>e)),[y]=i.useState((()=>new r.Text)),[j,m]=i.useMemo((()=>{const e=[];let t="";return i.Children.forEach(s,(r=>{"string"==typeof r||"number"==typeof r?t+=r:e.push(r)})),[e,t]}),[s]);return o.suspend((()=>new Promise((e=>r.preloadFont({font:u,characters:d},e)))),["troika-text",u,d]),i.useLayoutEffect((()=>{y.sync((()=>{b(),l&&l(y)}))})),i.useEffect((()=>()=>y.dispose()),[y]),i.createElement("primitive",a.default({object:y,ref:h,font:u,text:m,anchorX:t,anchorY:c,fontSize:f,sdfGlyphSize:e},p),j)}));exports.Text=f;

package/core/Text.d.ts

@@ -45,6 +45,7 @@ export declare const Text: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeF
     strokeColor?: ReactThreeFiber.Color | undefined;
     strokeOpacity?: number | undefined;
     fillOpacity?: number | undefined;
+    sdfGlyphSize?: number | undefined;
     debugSDF?: boolean | undefined;
     onSync?: ((troika: any) => void) | undefined;
-}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getObjectsByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "geometry" | "font" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "getVertexPosition" | "direction" | "fontSize" | "letterSpacing" | "lineHeight" | "maxWidth" | "outlineColor" | "outlineWidth" | "overflowWrap" | "textAlign" | "whiteSpace" | "fillOpacity" | "strokeOpacity" | "strokeWidth" | "anchorX" | "anchorY" | "characters" | "onSync" | "clipRect" | "depthOffset" | "outlineOffsetX" | "outlineOffsetY" | "outlineBlur" | "outlineOpacity" | "strokeColor" | "debugSDF"> & React.RefAttributes<any>>;
+}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getObjectsByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "geometry" | "font" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "getVertexPosition" | "direction" | "fontSize" | "letterSpacing" | "lineHeight" | "maxWidth" | "outlineColor" | "outlineWidth" | "overflowWrap" | "textAlign" | "whiteSpace" | "fillOpacity" | "strokeOpacity" | "strokeWidth" | "sdfGlyphSize" | "anchorX" | "anchorY" | "characters" | "onSync" | "clipRect" | "depthOffset" | "outlineOffsetX" | "outlineOffsetY" | "outlineBlur" | "outlineOpacity" | "strokeColor" | "debugSDF"> & React.RefAttributes<any>>;

package/core/Text.js

@@ -6,6 +6,7 @@ import { suspend } from 'suspend-react';
 
 // eslint-disable-next-line prettier/prettier
 const Text = /*#__PURE__*/React.forwardRef(({
+  sdfGlyphSize = 64,
   anchorX = 'center',
   anchorY = 'middle',
   font,
@@ -49,7 +50,8 @@ const Text = /*#__PURE__*/React.forwardRef(({
     text: text,
     anchorX: anchorX,
     anchorY: anchorY,
-    fontSize: fontSize
+    fontSize: fontSize,
+    sdfGlyphSize: sdfGlyphSize
   }, props), nodes);
 });