@bbki.ng/components 1.5.26 → 1.5.29

package/dist/index.d.ts

@@ -264,7 +264,7 @@ interface GalleryProps extends Omit<RandomRowsLayoutProps, "classNames" | "cells
 declare const Gallery: (props: GalleryProps) => JSX.Element;
 
 interface ISettings {
-    canvas: HTMLCanvasElement;
+    canvas?: HTMLCanvasElement;
     step?: number;
 }
 
@@ -276,8 +276,10 @@ interface IOpt {
 }
 
 interface LoadingSpiralProps extends IOpt, ISettings {
-    className?: "string";
+    className?: string;
+    maxWidth?: number;
+    offset?: number;
 }
-declare const LoadingSpiral: (props: LoadingSpiralProps) => JSX.Element;
+declare const LoadingSpiral: (props?: LoadingSpiralProps | undefined) => JSX.Element;
 
 export { Article, ArticleProps, ArticleSkeleton, ArticleSkeletonProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, Error, ErrorBoundary, Gallery, GalleryProps, ImageDropProps, ImagePreviewerProps, ImageRenderer, Img, Link, LinkColor, LinkList, LinkListProps, LinkListSkeleton, LinkListSkeletonProps, LinkProps, List, LoadingSpiral, LoadingSpiralProps, Logo, LogoProps, Nav, NavProps, NoiseCover, NoiseCoverProps, NotFound, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, TitledList, TitledListProps, listProps, threeColLayoutProps };

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 */};
   }
 `;
@@ -1102,6 +1110,9 @@ 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];
@@ -1113,7 +1124,7 @@ var randOpacityRgb = (val) => {
 
 // src/loading-spiral/createOptions.ts
 var DEFAULT_OPT = {
-  multiplier: 3e4,
+  multiplier: 15e4,
   color: [209, 213, 219, 1],
   spiralConstA: 0.04,
   spiralConstB: 0.16
@@ -1129,7 +1140,7 @@ 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 [xPos, yPos, 1];
+        return [getRandom(xPos), getRandom(yPos), 1];
       },
       size: 3
     },
@@ -1149,7 +1160,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 +1170,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 +1183,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 +1210,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 */};
   }
 `;
@@ -1044,6 +1052,9 @@ 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];
@@ -1055,7 +1066,7 @@ var randOpacityRgb = (val) => {
 
 // src/loading-spiral/createOptions.ts
 var DEFAULT_OPT = {
-  multiplier: 3e4,
+  multiplier: 15e4,
   color: [209, 213, 219, 1],
   spiralConstA: 0.04,
   spiralConstB: 0.16
@@ -1071,7 +1082,7 @@ 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 [xPos, yPos, 1];
+        return [getRandom(xPos), getRandom(yPos), 1];
       },
       size: 3
     },
@@ -1091,7 +1102,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 +1112,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 +1125,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 +1152,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.26",
+  "version": "1.5.29",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",