@bbki.ng/components 1.5.27 → 1.5.28

package/dist/index.d.ts

@@ -276,7 +276,9 @@ interface IOpt {
 }
 
 interface LoadingSpiralProps extends IOpt, ISettings {
-    className?: "string";
+    className?: string;
+    maxWidth?: number;
+    offset?: number;
 }
 declare const LoadingSpiral: (props?: LoadingSpiralProps | undefined) => JSX.Element;
 

package/dist/index.js

@@ -1081,8 +1081,16 @@ var VERTEX_SHADER = `
       0.0, 0.0, 0.0, 1.0
     );
   }
+  mat4 translate(float _angle){
+    return mat4(
+      1.0, 0.0, 0.0, sin(_angle) * 0.04,
+      0.0, 1.0, 0.0, cos(_angle) * 0.04,
+      0.0, 0.0, 1.0, 0.0,
+      0.0, 0.0, 0.0, 1.0
+    );
+  }
   void main(){
-    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0);
+    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress);
     gl_PointSize = 2.0;
     vColor = ${"aColor" /* COLOR */};
   }
@@ -1149,7 +1157,7 @@ var createOptions = (opt = DEFAULT_OPT) => {
 
 // src/loading-spiral/useCanvasRef.ts
 var import_react22 = require("react");
-var useResizedCanvasRef = () => {
+var useResizedCanvasRef = (maxSize, offset) => {
   const canvasRef = (0, import_react22.useRef)(null);
   const containerRef = (0, import_react22.useRef)(null);
   (0, import_react22.useEffect)(() => {
@@ -1159,8 +1167,10 @@ var useResizedCanvasRef = () => {
       return;
     const { width, height } = container.getBoundingClientRect();
     const canvasSize = Math.max(width, height);
-    canvas.setAttribute("width", `${canvasSize}`);
-    canvas.setAttribute("height", `${canvasSize}`);
+    const size = Math.min(canvasSize, maxSize);
+    canvas.style.top = `${offset}px`;
+    canvas.setAttribute("width", `${size}`);
+    canvas.setAttribute("height", `${size}`);
   }, []);
   return {
     canvasRef,
@@ -1170,8 +1180,20 @@ var useResizedCanvasRef = () => {
 
 // src/loading-spiral/LoadingSpiral.tsx
 var LoadingSpiral = (props) => {
-  const { canvasRef, containerRef } = useResizedCanvasRef();
-  const _a = props || {}, { className, canvas, step } = _a, rest = __objRest(_a, ["className", "canvas", "step"]);
+  const _a = props || {}, {
+    className,
+    canvas,
+    step,
+    maxWidth = 1e3,
+    offset = -100
+  } = _a, rest = __objRest(_a, [
+    "className",
+    "canvas",
+    "step",
+    "maxWidth",
+    "offset"
+  ]);
+  const { canvasRef, containerRef } = useResizedCanvasRef(maxWidth, offset);
   (0, import_react23.useEffect)(() => {
     if (!canvasRef.current) {
       return;
@@ -1185,7 +1207,8 @@ var LoadingSpiral = (props) => {
     className: (0, import_classnames13.default)("fixed h-full w-full overflow-hidden flex justify-center items-center", className),
     ref: containerRef
   }, /* @__PURE__ */ import_react23.default.createElement("canvas", {
-    ref: canvasRef
+    ref: canvasRef,
+    className: "relative"
   }));
 };
 module.exports = __toCommonJS(src_exports);

package/dist/index.mjs

@@ -1023,8 +1023,16 @@ var VERTEX_SHADER = `
       0.0, 0.0, 0.0, 1.0
     );
   }
+  mat4 translate(float _angle){
+    return mat4(
+      1.0, 0.0, 0.0, sin(_angle) * 0.04,
+      0.0, 1.0, 0.0, cos(_angle) * 0.04,
+      0.0, 0.0, 1.0, 0.0,
+      0.0, 0.0, 0.0, 1.0
+    );
+  }
   void main(){
-    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0);
+    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress);
     gl_PointSize = 2.0;
     vColor = ${"aColor" /* COLOR */};
   }
@@ -1091,7 +1099,7 @@ var createOptions = (opt = DEFAULT_OPT) => {
 
 // src/loading-spiral/useCanvasRef.ts
 import { useEffect as useEffect3, useRef as useRef2 } from "react";
-var useResizedCanvasRef = () => {
+var useResizedCanvasRef = (maxSize, offset) => {
   const canvasRef = useRef2(null);
   const containerRef = useRef2(null);
   useEffect3(() => {
@@ -1101,8 +1109,10 @@ var useResizedCanvasRef = () => {
       return;
     const { width, height } = container.getBoundingClientRect();
     const canvasSize = Math.max(width, height);
-    canvas.setAttribute("width", `${canvasSize}`);
-    canvas.setAttribute("height", `${canvasSize}`);
+    const size = Math.min(canvasSize, maxSize);
+    canvas.style.top = `${offset}px`;
+    canvas.setAttribute("width", `${size}`);
+    canvas.setAttribute("height", `${size}`);
   }, []);
   return {
     canvasRef,
@@ -1112,8 +1122,20 @@ var useResizedCanvasRef = () => {
 
 // src/loading-spiral/LoadingSpiral.tsx
 var LoadingSpiral = (props) => {
-  const { canvasRef, containerRef } = useResizedCanvasRef();
-  const _a = props || {}, { className, canvas, step } = _a, rest = __objRest(_a, ["className", "canvas", "step"]);
+  const _a = props || {}, {
+    className,
+    canvas,
+    step,
+    maxWidth = 1e3,
+    offset = -100
+  } = _a, rest = __objRest(_a, [
+    "className",
+    "canvas",
+    "step",
+    "maxWidth",
+    "offset"
+  ]);
+  const { canvasRef, containerRef } = useResizedCanvasRef(maxWidth, offset);
   useEffect4(() => {
     if (!canvasRef.current) {
       return;
@@ -1127,7 +1149,8 @@ var LoadingSpiral = (props) => {
     className: classNames7("fixed h-full w-full overflow-hidden flex justify-center items-center", className),
     ref: containerRef
   }, /* @__PURE__ */ React21.createElement("canvas", {
-    ref: canvasRef
+    ref: canvasRef,
+    className: "relative"
   }));
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/components",
-  "version": "1.5.27",
+  "version": "1.5.28",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",