@bbki.ng/components 1.5.45 → 1.5.48

package/dist/index.d.ts

@@ -275,9 +275,9 @@ interface ISettings {
 interface IOpt {
     multiplier: number;
     color: number[];
-    spiralConstA: number;
-    spiralConstB: number;
     offset?: number;
+    length: number;
+    radius: number;
 }
 
 interface LoadingSpiralProps extends IOpt, ISettings {
@@ -287,4 +287,4 @@ interface LoadingSpiralProps extends IOpt, ISettings {
 }
 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 };
+export { Article, ArticleProps, ArticleSkeleton, ArticleSkeletonProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, Error, ErrorBoundary, Gallery, GalleryProps, ImageDropProps, ImagePreviewerProps, ImageRenderer, Img, ImgProps, Link, LinkColor, LinkList, LinkListProps, LinkListSkeleton, LinkListSkeletonProps, LinkProps, List, LoadingSpiral, LoadingSpiralProps, Logo, LogoProps, Nav, NavProps, NoiseCover, NoiseCoverProps, NotFound, Page, Panel, PanelProps, PathObj, Photo, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, TitledList, TitledListProps, listProps, ossProcessType, threeColLayoutProps };

package/dist/index.js

@@ -88,7 +88,8 @@ __export(src_exports, {
   Tag: () => Tag,
   Tags: () => Tags,
   ThreeColLayout: () => ThreeColLayout,
-  TitledList: () => TitledList
+  TitledList: () => TitledList,
+  ossProcessType: () => ossProcessType
 });
 
 // src/article/Article.tsx
@@ -851,6 +852,16 @@ var ThreeColLayout = (props) => {
 var import_classnames10 = __toESM(require("classnames"));
 var import_react19 = __toESM(require("react"));
 
+// src/img/types.ts
+var ossProcessType = /* @__PURE__ */ ((ossProcessType2) => {
+  ossProcessType2["THUMBNAIL"] = "thumbnail";
+  ossProcessType2["WEBP"] = "webp";
+  ossProcessType2["NULL"] = "null";
+  ossProcessType2["oWEBP"] = "owebp";
+  ossProcessType2["PROG"] = "prog";
+  return ossProcessType2;
+})(ossProcessType || {});
+
 // src/img/utils.ts
 var addOssWebpProcessStyle = (originUrl, style) => {
   const OSS_ADDRESS = "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com";
@@ -893,8 +904,8 @@ var Img = (props) => {
     width: "initial",
     height: "initial",
     backgroundSize: "cover",
+    backgroundColor: avgColor || "#f1f1f1",
     backgroundPosition: "0% 0%",
-    boxShadow: "inset 1px 1px #f1f1f1, inset -1px -1px #f1f1f1",
     backgroundImage: `url(${thumbnailSrc ? thumbnailSrc : addOssWebpProcessStyle(src, "thumbnail" /* THUMBNAIL */)})`
   };
   const dynamicWrapperStyle = loaded && removeBlurBgAfterLoad ? { backgroundImage: "none" } : {};
@@ -1087,32 +1098,40 @@ var VERTEX_SHADER = `
   uniform mat4 uViewMatrix;
   uniform float uProgress;
   varying vec3 vColor;
-  mat4 rotate(float _angle){
+  mat4 rotateX(float _angle){
     return mat4(
-      cos(_angle),-sin(_angle), 0.0, 0.0,
-      sin(_angle),cos(_angle), 0.0, 0.0,
-      0.0, 0.0, 0.0, 0.0,
+      1.0, 0.0, 0.0, 0.0,
+      0.0, cos(_angle), -sin(_angle), 0.0,
+      0.0, sin(_angle), cos(_angle), 0.0,
       0.0, 0.0, 0.0, 1.0
     );
   }
-  mat4 translateY(float _offset){
+  mat4 rotateY(float _angle){
     return mat4(
-      1.0, 0.0, 0.0, 0.0,
-      0.0, 1.0, 0.0, -1.0 * _offset,
+      cos(_angle), 0.0, sin(_angle), 0.0,
+      0.0, 1.0, 0.0, 0.0,
+      -sin(_angle), 0.0, cos(_angle), 0.0,
+      0.0, 0.0, 0.0, 1.0
+    );
+  }
+  mat4 rotateZ(float _angle){
+    return mat4(
+      cos(_angle), -sin(_angle), 0.0, 0.0,
+      sin(_angle), cos(_angle), 0.0, 0.0,
       0.0, 0.0, 1.0, 0.0,
       0.0, 0.0, 0.0, 1.0
     );
   }
-  mat4 translate(float _angle){
+  mat4 translateY(float _offset){
     return mat4(
-      1.0, 0.0, 0.0, sin(_angle) * 0.02,
-      0.0, 1.0, 0.0, cos(_angle) * 0.02,
+      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
     );
   }
   void main(){
-    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress) * translateY(${"aOffsetY" /* OFFSET_Y */});
+    gl_Position = uProjectionMatrix * uModelMatrix * uViewMatrix * rotateX(uProgress) * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translateY(${"aOffsetY" /* OFFSET_Y */});
     gl_PointSize = 1.0;
     vColor = ${"aColor" /* COLOR */};
   }
@@ -1128,10 +1147,6 @@ var FRAGMENT_SHADER = `
 `;
 
 // src/loading-spiral/utils.ts
-var scaleIndex = (multiplier, max) => (index) => {
-  return index / (multiplier / max);
-};
-var scaleIndex2ang = (multiplier) => scaleIndex(multiplier, 360);
 var rgba = (val) => {
   const [r, g, b, a] = val;
   return [r / 255, g / 255, b / 255, a];
@@ -1139,30 +1154,34 @@ var rgba = (val) => {
 
 // src/loading-spiral/createOptions.ts
 var DEFAULT_OPT = {
-  multiplier: 1e4,
+  multiplier: 5e4,
   color: [209, 213, 219, 1],
-  spiralConstA: 0.04,
-  spiralConstB: 0.16,
-  offset: -0.3
+  offset: -0.3,
+  length: 0.15,
+  radius: 0.028
 };
 var createOptions = (opt = DEFAULT_OPT) => {
   const {
     multiplier,
-    spiralConstA,
-    spiralConstB,
     color,
+    length,
+    radius,
     offset = -1 * 0.3
   } = opt;
   const attributes = [
     {
       name: "aPositionStart" /* POSITION_START */,
-      data: (index) => {
-        const ang = scaleIndex2ang(multiplier)(index);
-        const A = spiralConstA;
-        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];
+      data: (index, total) => {
+        const percent = index / total;
+        const pi2 = Math.PI * 2;
+        let x = length * Math.sin(pi2 * percent), y = radius * Math.cos(pi2 * 3 * percent), z, t;
+        t = percent % 0.25 / 0.25;
+        t = percent % 0.25 - (2 * (1 - t) * t * -0.0185 + t * t * 0.25);
+        if (Math.floor(percent / 0.25) == 0 || Math.floor(percent / 0.25) == 2) {
+          t *= -1;
+        }
+        z = radius * Math.sin(pi2 * 2 * (percent - t));
+        return [x, y, z];
       },
       size: 3
     },
@@ -1216,7 +1235,11 @@ var LoadingSpiral = (props) => {
       return;
     }
     const phenomenon = new import_phenomenon.default({
-      settings: createSettings({ canvas: canvasRef.current, step })
+      settings: createSettings({ canvas: canvasRef.current, step }),
+      context: {
+        alpha: true,
+        antialias: true
+      }
     });
     phenomenon.add("spiral", createOptions(Object.assign({}, DEFAULT_OPT, rest)));
   }, []);
@@ -1261,5 +1284,6 @@ module.exports = __toCommonJS(src_exports);
   Tag,
   Tags,
   ThreeColLayout,
-  TitledList
+  TitledList,
+  ossProcessType
 });

package/dist/index.mjs

@@ -793,6 +793,16 @@ var ThreeColLayout = (props) => {
 import classnames from "classnames";
 import React18, { useState as useState5 } from "react";
 
+// src/img/types.ts
+var ossProcessType = /* @__PURE__ */ ((ossProcessType2) => {
+  ossProcessType2["THUMBNAIL"] = "thumbnail";
+  ossProcessType2["WEBP"] = "webp";
+  ossProcessType2["NULL"] = "null";
+  ossProcessType2["oWEBP"] = "owebp";
+  ossProcessType2["PROG"] = "prog";
+  return ossProcessType2;
+})(ossProcessType || {});
+
 // src/img/utils.ts
 var addOssWebpProcessStyle = (originUrl, style) => {
   const OSS_ADDRESS = "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com";
@@ -835,8 +845,8 @@ var Img = (props) => {
     width: "initial",
     height: "initial",
     backgroundSize: "cover",
+    backgroundColor: avgColor || "#f1f1f1",
     backgroundPosition: "0% 0%",
-    boxShadow: "inset 1px 1px #f1f1f1, inset -1px -1px #f1f1f1",
     backgroundImage: `url(${thumbnailSrc ? thumbnailSrc : addOssWebpProcessStyle(src, "thumbnail" /* THUMBNAIL */)})`
   };
   const dynamicWrapperStyle = loaded && removeBlurBgAfterLoad ? { backgroundImage: "none" } : {};
@@ -1029,32 +1039,40 @@ var VERTEX_SHADER = `
   uniform mat4 uViewMatrix;
   uniform float uProgress;
   varying vec3 vColor;
-  mat4 rotate(float _angle){
+  mat4 rotateX(float _angle){
     return mat4(
-      cos(_angle),-sin(_angle), 0.0, 0.0,
-      sin(_angle),cos(_angle), 0.0, 0.0,
-      0.0, 0.0, 0.0, 0.0,
+      1.0, 0.0, 0.0, 0.0,
+      0.0, cos(_angle), -sin(_angle), 0.0,
+      0.0, sin(_angle), cos(_angle), 0.0,
       0.0, 0.0, 0.0, 1.0
     );
   }
-  mat4 translateY(float _offset){
+  mat4 rotateY(float _angle){
     return mat4(
-      1.0, 0.0, 0.0, 0.0,
-      0.0, 1.0, 0.0, -1.0 * _offset,
+      cos(_angle), 0.0, sin(_angle), 0.0,
+      0.0, 1.0, 0.0, 0.0,
+      -sin(_angle), 0.0, cos(_angle), 0.0,
+      0.0, 0.0, 0.0, 1.0
+    );
+  }
+  mat4 rotateZ(float _angle){
+    return mat4(
+      cos(_angle), -sin(_angle), 0.0, 0.0,
+      sin(_angle), cos(_angle), 0.0, 0.0,
       0.0, 0.0, 1.0, 0.0,
       0.0, 0.0, 0.0, 1.0
     );
   }
-  mat4 translate(float _angle){
+  mat4 translateY(float _offset){
     return mat4(
-      1.0, 0.0, 0.0, sin(_angle) * 0.02,
-      0.0, 1.0, 0.0, cos(_angle) * 0.02,
+      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
     );
   }
   void main(){
-    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress) * translateY(${"aOffsetY" /* OFFSET_Y */});
+    gl_Position = uProjectionMatrix * uModelMatrix * uViewMatrix * rotateX(uProgress) * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translateY(${"aOffsetY" /* OFFSET_Y */});
     gl_PointSize = 1.0;
     vColor = ${"aColor" /* COLOR */};
   }
@@ -1070,10 +1088,6 @@ var FRAGMENT_SHADER = `
 `;
 
 // src/loading-spiral/utils.ts
-var scaleIndex = (multiplier, max) => (index) => {
-  return index / (multiplier / max);
-};
-var scaleIndex2ang = (multiplier) => scaleIndex(multiplier, 360);
 var rgba = (val) => {
   const [r, g, b, a] = val;
   return [r / 255, g / 255, b / 255, a];
@@ -1081,30 +1095,34 @@ var rgba = (val) => {
 
 // src/loading-spiral/createOptions.ts
 var DEFAULT_OPT = {
-  multiplier: 1e4,
+  multiplier: 5e4,
   color: [209, 213, 219, 1],
-  spiralConstA: 0.04,
-  spiralConstB: 0.16,
-  offset: -0.3
+  offset: -0.3,
+  length: 0.15,
+  radius: 0.028
 };
 var createOptions = (opt = DEFAULT_OPT) => {
   const {
     multiplier,
-    spiralConstA,
-    spiralConstB,
     color,
+    length,
+    radius,
     offset = -1 * 0.3
   } = opt;
   const attributes = [
     {
       name: "aPositionStart" /* POSITION_START */,
-      data: (index) => {
-        const ang = scaleIndex2ang(multiplier)(index);
-        const A = spiralConstA;
-        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];
+      data: (index, total) => {
+        const percent = index / total;
+        const pi2 = Math.PI * 2;
+        let x = length * Math.sin(pi2 * percent), y = radius * Math.cos(pi2 * 3 * percent), z, t;
+        t = percent % 0.25 / 0.25;
+        t = percent % 0.25 - (2 * (1 - t) * t * -0.0185 + t * t * 0.25);
+        if (Math.floor(percent / 0.25) == 0 || Math.floor(percent / 0.25) == 2) {
+          t *= -1;
+        }
+        z = radius * Math.sin(pi2 * 2 * (percent - t));
+        return [x, y, z];
       },
       size: 3
     },
@@ -1158,7 +1176,11 @@ var LoadingSpiral = (props) => {
       return;
     }
     const phenomenon = new Phenomenon({
-      settings: createSettings({ canvas: canvasRef.current, step })
+      settings: createSettings({ canvas: canvasRef.current, step }),
+      context: {
+        alpha: true,
+        antialias: true
+      }
     });
     phenomenon.add("spiral", createOptions(Object.assign({}, DEFAULT_OPT, rest)));
   }, []);
@@ -1201,5 +1223,6 @@ export {
   Tag,
   Tags,
   ThreeColLayout,
-  TitledList
+  TitledList,
+  ossProcessType
 };

package/package.json

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