tgui-core 4.2.3 → 4.3.0

package/dist/components/InfinitePlane.d.ts

@@ -12,6 +12,25 @@ type Props = {
     initialTop: number;
     /** Padding applied to the right of the zoom controls */
     zoomPadding: number;
+    /**
+     * Minimum level of zoom possible
+     * @default 0.5
+     */
+    minimumZoom: number;
+    /**
+     * Maximum level of zoom possible
+     * @default 1.5
+     */
+    maximumZoom: number;
+    /**
+     * Increments by which zoom level changes every scroll/button click
+     * @default 0.1
+     */
+    zoomIncrement: number;
+    /** X position to snap to. When this value is changed, the element will snap to said position */
+    zoomToX: number;
+    /** Y position to snap to. When this value is changed, the element will snap to said position */
+    zoomToY: number;
     /** A callback function that is called when the background image is moved. */
     onBackgroundMoved: (newX: number, newY: number) => void;
     /** A callback function that is called when the zoom value changes. */

package/dist/components/InfinitePlane.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import{computeBoxProps as t}from"../common/ui.js";import{useEffect as i,useState as o}from"react";import{Button as r}from"./Button.js";import{ProgressBar as l}from"./ProgressBar.js";import{Stack as s}from"./Stack.js";function a(r){let{backgroundImage:l,children:s,imageWidth:a,zoomPadding:d=0,initialLeft:u=0,initialTop:m=0,onBackgroundMoved:p,onZoomChange:f,...h}=r,[g,v]=o(0),[w,b]=o(0),[x,k]=o(0),[M,$]=o(!1),[j,y]=o(0),[I,Y]=o(1);function C(e){v(e.clientX-x),b(e.clientY-j),$(!0)}function D(e){if(!M)return;let n=e.clientX-g,t=e.clientY-w;p?.(n+u,t+m),k(n),y(t)}function P(){$(!1)}function z(e){if("increase"===e&&I>=1.5||"decrease"===e&&I<=.5)return;let n=Math.round((I+("increase"===e?.1:-.1))*10)/10;Y(n),f?.(n)}i(()=>(window.addEventListener("mouseup",P),()=>{window.removeEventListener("mouseup",P)}),[]);let B=u+x,E=m+j;return n("div",{...t({...h,style:{...h.style,height:"100%",overflow:"hidden",position:"relative",width:"100%"}}),children:[e("div",{onMouseDown:C,onMouseMove:D,onWheel:function(e){0!==e.deltaY&&(e.preventDefault(),z(e.deltaY<0?"increase":"decrease"))},style:{backgroundImage:`url("${l}")`,backgroundPosition:`${B}px ${E}px`,backgroundRepeat:"repeat",backgroundSize:`${I*a}px`,height:"100%",inset:0,position:"absolute",width:"100%"}}),e("div",{onMouseDown:C,onMouseMove:D,style:{height:"100%",inset:0,position:"absolute",transform:`translate(${B}px, ${E}px) scale(${I})`,transformOrigin:"top left",width:"100%"},children:s}),e(c,{padding:d,onZoomClick:z,zoom:I})]})}function c(t){let{zoom:i,padding:o,onZoomClick:a}=t;return e("div",{style:{left:5,position:"absolute",right:5+o,top:5},children:n(s,{children:[e(s.Item,{children:e(r,{disabled:i<=.5,icon:"minus",onClick:()=>a("decrease")})}),e(s.Item,{grow:!0,children:n(l,{maxValue:1.5,minValue:.5,value:i,children:[i,"x"]})}),e(s.Item,{children:e(r,{disabled:i>=1.5,icon:"plus",onClick:()=>a("increase")})})]})})}export{a as InfinitePlane};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{computeBoxProps as n}from"../common/ui.js";import{useEffect as i,useRef as o,useState as r}from"react";import{Button as s}from"./Button.js";import{ProgressBar as l}from"./ProgressBar.js";import{Stack as a}from"./Stack.js";function c(s){let{backgroundImage:l,children:a,imageWidth:c,zoomPadding:d=0,initialLeft:m=0,initialTop:f=0,minimumZoom:p=.5,maximumZoom:h=1.5,zoomIncrement:v=.1,zoomToX:g=m,zoomToY:w=f,onBackgroundMoved:x,onZoomChange:b,...$}=s,[k,M]=r(m),[Y,j]=r(f),[y,I]=r(m),[z,E]=r(f),[X,C]=r(!1),[D,P]=r(1),Z=o(null);function B(e){M(e.clientX-y),j(e.clientY-z),C(!0)}function L(e){if(!X)return;let t=e.clientX-k,n=e.clientY-Y;x?.(t,n),I(t),E(n)}function S(){C(!1)}function V(e,t,n){if("increase"===e&&D>=h||"decrease"===e&&D<=p)return;let i=Math.round((D+("increase"===e?v:-v))*10)/10;P(i),I((y-t)/D*i+t),E((z-n)*i+n),b?.(i)}return i(()=>(window.addEventListener("mouseup",S),()=>{window.removeEventListener("mouseup",S)}),[]),i(()=>{void 0!==g&&void 0!==w&&(I(g),E(w))},[g,w]),t("div",{...n({...$,style:{...$.style,height:"100%",overflow:"hidden",position:"relative",width:"100%"}}),ref:Z,children:[e("div",{onMouseDown:B,onMouseMove:L,onWheel:function(e){0!==e.deltaY&&(e.preventDefault(),V(e.deltaY<0?"increase":"decrease",e.nativeEvent.offsetX,e.nativeEvent.offsetY))},style:{backgroundImage:`url("${l}")`,backgroundPosition:`${y}px ${z}px`,backgroundRepeat:"repeat",backgroundSize:`${D*c}px`,transition:`${X?"0s":"0.075s"} linear`,height:"100%",inset:0,position:"absolute",width:"100%"}}),e("div",{onMouseDown:B,onMouseMove:L,style:{height:"100%",inset:0,position:"absolute",transform:`translate(${y}px, ${z}px) scale(${D})`,transition:`${X?"0s":"0.075s"} linear`,transformOrigin:"top left",width:"100%"},children:a}),e(u,{padding:d,minimumZoom:p,maximumZoom:h,zoomX:(Z.current?.offsetWidth||0)/2,zoomY:(Z.current?.offsetHeight||0)/2,onZoomClick:V,zoom:D})]})}function u(n){let{zoom:i,padding:o,onZoomClick:r,minimumZoom:c,maximumZoom:u,zoomX:d,zoomY:m}=n;return e("div",{style:{left:5,position:"absolute",right:5+o,top:5},children:t(a,{children:[e(a.Item,{children:e(s,{disabled:i<=c,icon:"minus",onClick:()=>r("decrease",d,m)})}),e(a.Item,{grow:!0,children:t(l,{maxValue:u,minValue:c,value:i,children:[i,"x"]})}),e(a.Item,{children:e(s,{disabled:i>=u,icon:"plus",onClick:()=>r("increase",d,m)})})]})})}export{c as InfinitePlane};

package/package.json

@@ -69,5 +69,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "4.2.3"
+  "version": "4.3.0"
 }