@bbki.ng/components 1.5.30 → 1.5.31

package/dist/index.d.ts

@@ -273,6 +273,7 @@ interface IOpt {
     color: number[];
     spiralConstA: number;
     spiralConstB: number;
+    offset?: number;
 }
 
 interface LoadingSpiralProps extends IOpt, ISettings {

package/dist/index.js

@@ -1068,6 +1068,7 @@ var createSettings = (settings) => {
 var VERTEX_SHADER = `
   attribute vec3 ${"aPositionStart" /* POSITION_START */};
   attribute vec3 ${"aColor" /* COLOR */};
+  attribute float ${"aOffsetY" /* OFFSET_Y */};
   uniform mat4 uProjectionMatrix;
   uniform mat4 uModelMatrix;
   uniform mat4 uViewMatrix;
@@ -1081,6 +1082,14 @@ var VERTEX_SHADER = `
       0.0, 0.0, 0.0, 1.0
     );
   }
+  mat4 translateY(float _offset){
+    return mat4(
+      1.0, 0.0, 0.0, 0.0,
+      0.0, 1.0, 0.0, -1.0 * _offset,
+      0.0, 0.0, 1.0, 0.0,
+      0.0, 0.0, 0.0, 1.0
+    );
+  }
   mat4 translate(float _angle){
     return mat4(
       1.0, 0.0, 0.0, sin(_angle) * 0.02,
@@ -1090,7 +1099,7 @@ var VERTEX_SHADER = `
     );
   }
   void main(){
-    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress);
+    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress) * translateY(${"aOffsetY" /* OFFSET_Y */});
     gl_PointSize = 1.0;
     vColor = ${"aColor" /* COLOR */};
   }
@@ -1120,10 +1129,17 @@ var DEFAULT_OPT = {
   multiplier: 1e4,
   color: [209, 213, 219, 1],
   spiralConstA: 0.04,
-  spiralConstB: 0.16
+  spiralConstB: 0.16,
+  offset: -0.3
 };
 var createOptions = (opt = DEFAULT_OPT) => {
-  const { multiplier, spiralConstA, spiralConstB, color } = opt;
+  const {
+    multiplier,
+    spiralConstA,
+    spiralConstB,
+    color,
+    offset = -1 * 0.3
+  } = opt;
   const attributes = [
     {
       name: "aPositionStart" /* POSITION_START */,
@@ -1141,6 +1157,11 @@ var createOptions = (opt = DEFAULT_OPT) => {
       name: "aColor" /* COLOR */,
       data: () => rgba(color),
       size: 3
+    },
+    {
+      name: "aOffsetY" /* OFFSET_Y */,
+      data: () => [offset],
+      size: 1
     }
   ];
   return {
@@ -1153,7 +1174,7 @@ var createOptions = (opt = DEFAULT_OPT) => {
 
 // src/loading-spiral/useCanvasRef.ts
 var import_react22 = require("react");
-var useResizedCanvasRef = (maxSize, offset) => {
+var useResizedCanvasRef = (maxSize) => {
   const canvasRef = (0, import_react22.useRef)(null);
   const containerRef = (0, import_react22.useRef)(null);
   (0, import_react22.useEffect)(() => {
@@ -1164,7 +1185,6 @@ var useResizedCanvasRef = (maxSize, offset) => {
     const { width, height } = container.getBoundingClientRect();
     const canvasSize = Math.max(width, height);
     const size = Math.min(canvasSize, maxSize);
-    canvas.style.top = `${offset}px`;
     canvas.setAttribute("width", `${size}`);
     canvas.setAttribute("height", `${size}`);
   }, []);
@@ -1176,20 +1196,8 @@ var useResizedCanvasRef = (maxSize, offset) => {
 
 // src/loading-spiral/LoadingSpiral.tsx
 var LoadingSpiral = (props) => {
-  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);
+  const _a = props || {}, { className, canvas, step, maxWidth = 1e3 } = _a, rest = __objRest(_a, ["className", "canvas", "step", "maxWidth"]);
+  const { canvasRef, containerRef } = useResizedCanvasRef(maxWidth);
   (0, import_react23.useEffect)(() => {
     if (!canvasRef.current) {
       return;

package/dist/index.mjs

@@ -1010,6 +1010,7 @@ var createSettings = (settings) => {
 var VERTEX_SHADER = `
   attribute vec3 ${"aPositionStart" /* POSITION_START */};
   attribute vec3 ${"aColor" /* COLOR */};
+  attribute float ${"aOffsetY" /* OFFSET_Y */};
   uniform mat4 uProjectionMatrix;
   uniform mat4 uModelMatrix;
   uniform mat4 uViewMatrix;
@@ -1023,6 +1024,14 @@ var VERTEX_SHADER = `
       0.0, 0.0, 0.0, 1.0
     );
   }
+  mat4 translateY(float _offset){
+    return mat4(
+      1.0, 0.0, 0.0, 0.0,
+      0.0, 1.0, 0.0, -1.0 * _offset,
+      0.0, 0.0, 1.0, 0.0,
+      0.0, 0.0, 0.0, 1.0
+    );
+  }
   mat4 translate(float _angle){
     return mat4(
       1.0, 0.0, 0.0, sin(_angle) * 0.02,
@@ -1032,7 +1041,7 @@ var VERTEX_SHADER = `
     );
   }
   void main(){
-    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress);
+    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress) * translateY(${"aOffsetY" /* OFFSET_Y */});
     gl_PointSize = 1.0;
     vColor = ${"aColor" /* COLOR */};
   }
@@ -1062,10 +1071,17 @@ var DEFAULT_OPT = {
   multiplier: 1e4,
   color: [209, 213, 219, 1],
   spiralConstA: 0.04,
-  spiralConstB: 0.16
+  spiralConstB: 0.16,
+  offset: -0.3
 };
 var createOptions = (opt = DEFAULT_OPT) => {
-  const { multiplier, spiralConstA, spiralConstB, color } = opt;
+  const {
+    multiplier,
+    spiralConstA,
+    spiralConstB,
+    color,
+    offset = -1 * 0.3
+  } = opt;
   const attributes = [
     {
       name: "aPositionStart" /* POSITION_START */,
@@ -1083,6 +1099,11 @@ var createOptions = (opt = DEFAULT_OPT) => {
       name: "aColor" /* COLOR */,
       data: () => rgba(color),
       size: 3
+    },
+    {
+      name: "aOffsetY" /* OFFSET_Y */,
+      data: () => [offset],
+      size: 1
     }
   ];
   return {
@@ -1095,7 +1116,7 @@ var createOptions = (opt = DEFAULT_OPT) => {
 
 // src/loading-spiral/useCanvasRef.ts
 import { useEffect as useEffect3, useRef as useRef2 } from "react";
-var useResizedCanvasRef = (maxSize, offset) => {
+var useResizedCanvasRef = (maxSize) => {
   const canvasRef = useRef2(null);
   const containerRef = useRef2(null);
   useEffect3(() => {
@@ -1106,7 +1127,6 @@ var useResizedCanvasRef = (maxSize, offset) => {
     const { width, height } = container.getBoundingClientRect();
     const canvasSize = Math.max(width, height);
     const size = Math.min(canvasSize, maxSize);
-    canvas.style.top = `${offset}px`;
     canvas.setAttribute("width", `${size}`);
     canvas.setAttribute("height", `${size}`);
   }, []);
@@ -1118,20 +1138,8 @@ var useResizedCanvasRef = (maxSize, offset) => {
 
 // src/loading-spiral/LoadingSpiral.tsx
 var LoadingSpiral = (props) => {
-  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);
+  const _a = props || {}, { className, canvas, step, maxWidth = 1e3 } = _a, rest = __objRest(_a, ["className", "canvas", "step", "maxWidth"]);
+  const { canvasRef, containerRef } = useResizedCanvasRef(maxWidth);
   useEffect4(() => {
     if (!canvasRef.current) {
       return;

package/package.json

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