@bbki.ng/components 1.5.27 → 1.5.30

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,9 +1081,17 @@ 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.02,
+      0.0, 1.0, 0.0, cos(_angle) * 0.02,
+      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_PointSize = 2.0;
+    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress);
+    gl_PointSize = 1.0;
     vColor = ${"aColor" /* COLOR */};
   }
 `;
@@ -1106,14 +1114,10 @@ var rgba = (val) => {
   const [r, g, b, a] = val;
   return [r / 255, g / 255, b / 255, a];
 };
-var randOpacityRgb = (val) => {
-  const [r, g, b] = val;
-  return rgba([r, g, b, Math.random()]);
-};
 
 // src/loading-spiral/createOptions.ts
 var DEFAULT_OPT = {
-  multiplier: 3e4,
+  multiplier: 1e4,
   color: [209, 213, 219, 1],
   spiralConstA: 0.04,
   spiralConstB: 0.16
@@ -1135,7 +1139,7 @@ var createOptions = (opt = DEFAULT_OPT) => {
     },
     {
       name: "aColor" /* COLOR */,
-      data: () => randOpacityRgb(color),
+      data: () => rgba(color),
       size: 3
     }
   ];
@@ -1149,7 +1153,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 +1163,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 +1176,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 +1203,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,9 +1023,17 @@ 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.02,
+      0.0, 1.0, 0.0, cos(_angle) * 0.02,
+      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_PointSize = 2.0;
+    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress);
+    gl_PointSize = 1.0;
     vColor = ${"aColor" /* COLOR */};
   }
 `;
@@ -1048,14 +1056,10 @@ var rgba = (val) => {
   const [r, g, b, a] = val;
   return [r / 255, g / 255, b / 255, a];
 };
-var randOpacityRgb = (val) => {
-  const [r, g, b] = val;
-  return rgba([r, g, b, Math.random()]);
-};
 
 // src/loading-spiral/createOptions.ts
 var DEFAULT_OPT = {
-  multiplier: 3e4,
+  multiplier: 1e4,
   color: [209, 213, 219, 1],
   spiralConstA: 0.04,
   spiralConstB: 0.16
@@ -1077,7 +1081,7 @@ var createOptions = (opt = DEFAULT_OPT) => {
     },
     {
       name: "aColor" /* COLOR */,
-      data: () => randOpacityRgb(color),
+      data: () => rgba(color),
       size: 3
     }
   ];
@@ -1091,7 +1095,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 +1105,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 +1118,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 +1145,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.30",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",