@react-three/drei 7.22.2 → 7.22.3

package/core/GizmoViewport.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("./GizmoHelper.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(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)}require("@react-three/fiber"),require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useCamera.cjs.js");var l=o(e),i=n(t);function c({color:e,rotation:t}){return i.createElement("group",{rotation:t},i.createElement("mesh",{position:[.4,0,0]},i.createElement("boxGeometry",{args:[.8,.05,.05]}),i.createElement("meshBasicMaterial",{color:e,toneMapped:!1})))}function s({onClick:e,font:t,disabled:a,arcStyle:o,label:n,labelColor:c,axisHeadScale:s=1,...u}){const f=i.useMemo((()=>{const e=document.createElement("canvas");e.width=64,e.height=64;const a=e.getContext("2d");return a.beginPath(),a.arc(32,32,16,0,2*Math.PI),a.closePath(),a.fillStyle=o,a.fill(),n&&(a.font=t,a.textAlign="center",a.fillStyle=c,a.fillText(n,32,41)),new r.CanvasTexture(e)}),[o,n,c,t]),[d,m]=i.useState(!1),p=(n?1:.75)*(d?1.2:1)*s;return i.createElement("sprite",l.default({scale:p,onPointerOver:a?void 0:e=>{e.stopPropagation(),m(!0)},onPointerOut:a?void 0:e||(e=>{e.stopPropagation(),m(!1)})},u),i.createElement("spriteMaterial",{map:f,alphaTest:.3,opacity:n?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,hideAxisHeads:t,disabled:r,font:o="18px Inter var, Arial, sans-serif",axisColors:n=["#ff3653","#0adb50","#2c8fdf"],axisHeadScale:u=1,labels:f=["X","Y","Z"],labelColor:d="#000",onClick:m,...p})=>{const[b,E,h]=n,{tweenCamera:g,raycast:y}=a.useGizmoContext(),x={font:o,disabled:r,labelColor:d,raycast:y,onClick:m,axisHeadScale:u,onPointerDown:r?void 0:e=>{g(e.object.position),e.stopPropagation()}};return i.createElement("group",l.default({scale:40},p),i.createElement(c,{color:b,rotation:[0,0,0]}),i.createElement(c,{color:E,rotation:[0,0,Math.PI/2]}),i.createElement(c,{color:h,rotation:[0,-Math.PI/2,0]}),!t&&i.createElement(i.Fragment,null,i.createElement(s,l.default({arcStyle:b,position:[1,0,0],label:f[0]},x)),i.createElement(s,l.default({arcStyle:E,position:[0,1,0],label:f[1]},x)),i.createElement(s,l.default({arcStyle:h,position:[0,0,1],label:f[2]},x)),!e&&i.createElement(i.Fragment,null,i.createElement(s,l.default({arcStyle:b,position:[-1,0,0]},x)),i.createElement(s,l.default({arcStyle:E,position:[0,-1,0]},x)),i.createElement(s,l.default({arcStyle:h,position:[0,0,-1]},x)))),i.createElement("ambientLight",{intensity:.5}),i.createElement("pointLight",{position:[10,10,10],intensity:.5}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("./GizmoHelper.cjs.js");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 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)}require("@react-three/fiber"),require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useCamera.cjs.js");var n=o(e),i=l(t);function c({scale:e=[.8,.05,.05],color:t,rotation:r}){return i.createElement("group",{rotation:r},i.createElement("mesh",{position:[.4,0,0]},i.createElement("boxGeometry",{args:e}),i.createElement("meshBasicMaterial",{color:t,toneMapped:!1})))}function s({onClick:e,font:t,disabled:a,arcStyle:o,label:l,labelColor:c,axisHeadScale:s=1,...u}){const f=i.useMemo((()=>{const e=document.createElement("canvas");e.width=64,e.height=64;const a=e.getContext("2d");return a.beginPath(),a.arc(32,32,16,0,2*Math.PI),a.closePath(),a.fillStyle=o,a.fill(),l&&(a.font=t,a.textAlign="center",a.fillStyle=c,a.fillText(l,32,41)),new r.CanvasTexture(e)}),[o,l,c,t]),[d,m]=i.useState(!1),p=(l?1:.75)*(d?1.2:1)*s;return i.createElement("sprite",n.default({scale:p,onPointerOver:a?void 0:e=>{e.stopPropagation(),m(!0)},onPointerOut:a?void 0:e||(e=>{e.stopPropagation(),m(!1)})},u),i.createElement("spriteMaterial",{map:f,alphaTest:.3,opacity:l?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,hideAxisHeads:t,disabled:r,font:o="18px Inter var, Arial, sans-serif",axisColors:l=["#ff3653","#0adb50","#2c8fdf"],axisHeadScale:u=1,axisScale:f,labels:d=["X","Y","Z"],labelColor:m="#000",onClick:p,...b})=>{const[E,h,g]=l,{tweenCamera:y,raycast:x}=a.useGizmoContext(),j={font:o,disabled:r,labelColor:m,raycast:x,onClick:p,axisHeadScale:u,onPointerDown:r?void 0:e=>{y(e.object.position),e.stopPropagation()}};return i.createElement("group",n.default({scale:40},b),i.createElement(c,{color:E,rotation:[0,0,0],scale:f}),i.createElement(c,{color:h,rotation:[0,0,Math.PI/2],scale:f}),i.createElement(c,{color:g,rotation:[0,-Math.PI/2,0],scale:f}),!t&&i.createElement(i.Fragment,null,i.createElement(s,n.default({arcStyle:E,position:[1,0,0],label:d[0]},j)),i.createElement(s,n.default({arcStyle:h,position:[0,1,0],label:d[1]},j)),i.createElement(s,n.default({arcStyle:g,position:[0,0,1],label:d[2]},j)),!e&&i.createElement(i.Fragment,null,i.createElement(s,n.default({arcStyle:E,position:[-1,0,0]},j)),i.createElement(s,n.default({arcStyle:h,position:[0,-1,0]},j)),i.createElement(s,n.default({arcStyle:g,position:[0,0,-1]},j)))),i.createElement("ambientLight",{intensity:.5}),i.createElement("pointLight",{position:[10,10,10],intensity:.5}))};

package/core/GizmoViewport.d.ts

@@ -2,6 +2,7 @@
 import { Event } from 'three';
 declare type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
     axisColors?: [string, string, string];
+    axisScale?: [number, number, number];
     labels?: [string, string, string];
     axisHeadScale?: number;
     labelColor?: string;
@@ -11,5 +12,5 @@ declare type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
     font?: string;
     onClick?: (e: Event) => null;
 };
-export declare const GizmoViewport: ({ hideNegativeAxes, hideAxisHeads, disabled, font, axisColors, axisHeadScale, labels, labelColor, onClick, ...props }: GizmoViewportProps) => JSX.Element;
+export declare const GizmoViewport: ({ hideNegativeAxes, hideAxisHeads, disabled, font, axisColors, axisHeadScale, axisScale, labels, labelColor, onClick, ...props }: GizmoViewportProps) => JSX.Element;
 export {};

package/core/GizmoViewport.js

@@ -4,6 +4,7 @@ import { CanvasTexture } from 'three';
 import { useGizmoContext } from './GizmoHelper.js';
 
 function Axis({
+  scale = [0.8, 0.05, 0.05],
   color,
   rotation
 }) {
@@ -12,7 +13,7 @@ function Axis({
   }, /*#__PURE__*/React.createElement("mesh", {
     position: [0.4, 0, 0]
   }, /*#__PURE__*/React.createElement("boxGeometry", {
-    args: [0.8, 0.05, 0.05]
+    args: scale
   }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
     color: color,
     toneMapped: false
@@ -81,6 +82,7 @@ const GizmoViewport = ({
   font = '18px Inter var, Arial, sans-serif',
   axisColors = ['#ff3653', '#0adb50', '#2c8fdf'],
   axisHeadScale = 1,
+  axisScale,
   labels = ['X', 'Y', 'Z'],
   labelColor = '#000',
   onClick,
@@ -107,13 +109,16 @@ const GizmoViewport = ({
     scale: 40
   }, props), /*#__PURE__*/React.createElement(Axis, {
     color: colorX,
-    rotation: [0, 0, 0]
+    rotation: [0, 0, 0],
+    scale: axisScale
   }), /*#__PURE__*/React.createElement(Axis, {
     color: colorY,
-    rotation: [0, 0, Math.PI / 2]
+    rotation: [0, 0, Math.PI / 2],
+    scale: axisScale
   }), /*#__PURE__*/React.createElement(Axis, {
     color: colorZ,
-    rotation: [0, -Math.PI / 2, 0]
+    rotation: [0, -Math.PI / 2, 0],
+    scale: axisScale
   }), !hideAxisHeads && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisHead, _extends({
     arcStyle: colorX,
     position: [1, 0, 0],