@bbki.ng/components 1.5.29 → 1.5.32

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, EventHandler, ReactElement, CSSProperties, Ref, ReactNode } from 'react';
+import React, { FunctionComponent, EventHandler, ReactElement, ReactNode, CSSProperties, Ref } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 
 declare type ArticleProps = {
@@ -82,7 +82,7 @@ declare const Panel: (props: PanelProps) => JSX.Element;
 declare type PageProps = {
     nav: ReactElement;
     main: ReactElement;
-    footer: ReactElement;
+    footer: ReactNode;
 };
 declare const Page: (props: PageProps) => JSX.Element;
 declare const NotFound: (props: {
@@ -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 */};
   }
@@ -1110,27 +1119,27 @@ var scaleIndex = (multiplier, max) => (index) => {
   return index / (multiplier / max);
 };
 var scaleIndex2ang = (multiplier) => scaleIndex(multiplier, 360);
-var getRandom = (value, index = 1) => {
-  return value + Math.random() * value * 0.04 * index;
-};
 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: 15e4,
+  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 */,
@@ -1140,14 +1149,19 @@ var createOptions = (opt = DEFAULT_OPT) => {
         const B = spiralConstB;
         const xPos = A * Math.pow(Math.E, B * ang) * Math.cos(ang);
         const yPos = A * Math.pow(Math.E, B * ang) * Math.sin(ang);
-        return [getRandom(xPos), getRandom(yPos), 1];
+        return [xPos, yPos, 1];
       },
       size: 3
     },
     {
       name: "aColor" /* COLOR */,
-      data: () => randOpacityRgb(color),
+      data: () => rgba(color),
       size: 3
+    },
+    {
+      name: "aOffsetY" /* OFFSET_Y */,
+      data: () => [offset],
+      size: 1
     }
   ];
   return {
@@ -1160,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)(() => {
@@ -1171,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}`);
   }, []);
@@ -1183,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 */};
   }
@@ -1052,27 +1061,27 @@ var scaleIndex = (multiplier, max) => (index) => {
   return index / (multiplier / max);
 };
 var scaleIndex2ang = (multiplier) => scaleIndex(multiplier, 360);
-var getRandom = (value, index = 1) => {
-  return value + Math.random() * value * 0.04 * index;
-};
 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: 15e4,
+  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 */,
@@ -1082,14 +1091,19 @@ var createOptions = (opt = DEFAULT_OPT) => {
         const B = spiralConstB;
         const xPos = A * Math.pow(Math.E, B * ang) * Math.cos(ang);
         const yPos = A * Math.pow(Math.E, B * ang) * Math.sin(ang);
-        return [getRandom(xPos), getRandom(yPos), 1];
+        return [xPos, yPos, 1];
       },
       size: 3
     },
     {
       name: "aColor" /* COLOR */,
-      data: () => randOpacityRgb(color),
+      data: () => rgba(color),
       size: 3
+    },
+    {
+      name: "aOffsetY" /* OFFSET_Y */,
+      data: () => [offset],
+      size: 1
     }
   ];
   return {
@@ -1102,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(() => {
@@ -1113,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}`);
   }, []);
@@ -1125,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.29",
+  "version": "1.5.32",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",