@bbki.ng/components 1.5.44 → 1.5.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +34 -22
  2. package/dist/index.mjs +34 -22
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -893,6 +893,7 @@ var Img = (props) => {
893
893
  width: "initial",
894
894
  height: "initial",
895
895
  backgroundSize: "cover",
896
+ backgroundColor: avgColor || "#f1f1f1",
896
897
  backgroundPosition: "0% 0%",
897
898
  backgroundImage: `url(${thumbnailSrc ? thumbnailSrc : addOssWebpProcessStyle(src, "thumbnail" /* THUMBNAIL */)})`
898
899
  };
@@ -1086,32 +1087,40 @@ var VERTEX_SHADER = `
1086
1087
  uniform mat4 uViewMatrix;
1087
1088
  uniform float uProgress;
1088
1089
  varying vec3 vColor;
1089
- mat4 rotate(float _angle){
1090
+ mat4 rotateX(float _angle){
1090
1091
  return mat4(
1091
- cos(_angle),-sin(_angle), 0.0, 0.0,
1092
- sin(_angle),cos(_angle), 0.0, 0.0,
1093
- 0.0, 0.0, 0.0, 0.0,
1092
+ 1.0, 0.0, 0.0, 0.0,
1093
+ 0.0, cos(_angle), -sin(_angle), 0.0,
1094
+ 0.0, sin(_angle), cos(_angle), 0.0,
1094
1095
  0.0, 0.0, 0.0, 1.0
1095
1096
  );
1096
1097
  }
1097
- mat4 translateY(float _offset){
1098
+ mat4 rotateY(float _angle){
1098
1099
  return mat4(
1099
- 1.0, 0.0, 0.0, 0.0,
1100
- 0.0, 1.0, 0.0, -1.0 * _offset,
1100
+ cos(_angle), 0.0, sin(_angle), 0.0,
1101
+ 0.0, 1.0, 0.0, 0.0,
1102
+ -sin(_angle), 0.0, cos(_angle), 0.0,
1103
+ 0.0, 0.0, 0.0, 1.0
1104
+ );
1105
+ }
1106
+ mat4 rotateZ(float _angle){
1107
+ return mat4(
1108
+ cos(_angle), -sin(_angle), 0.0, 0.0,
1109
+ sin(_angle), cos(_angle), 0.0, 0.0,
1101
1110
  0.0, 0.0, 1.0, 0.0,
1102
1111
  0.0, 0.0, 0.0, 1.0
1103
1112
  );
1104
1113
  }
1105
- mat4 translate(float _angle){
1114
+ mat4 translateY(float _offset){
1106
1115
  return mat4(
1107
- 1.0, 0.0, 0.0, sin(_angle) * 0.02,
1108
- 0.0, 1.0, 0.0, cos(_angle) * 0.02,
1116
+ 1.0, 0.0, 0.0, 0.0,
1117
+ 0.0, 1.0, 0.0, -1.0 * _offset,
1109
1118
  0.0, 0.0, 1.0, 0.0,
1110
1119
  0.0, 0.0, 0.0, 1.0
1111
1120
  );
1112
1121
  }
1113
1122
  void main(){
1114
- gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress) * translateY(${"aOffsetY" /* OFFSET_Y */});
1123
+ gl_Position = uProjectionMatrix * uModelMatrix * uViewMatrix * rotateX(uProgress) * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translateY(${"aOffsetY" /* OFFSET_Y */});
1115
1124
  gl_PointSize = 1.0;
1116
1125
  vColor = ${"aColor" /* COLOR */};
1117
1126
  }
@@ -1127,10 +1136,6 @@ var FRAGMENT_SHADER = `
1127
1136
  `;
1128
1137
 
1129
1138
  // src/loading-spiral/utils.ts
1130
- var scaleIndex = (multiplier, max) => (index) => {
1131
- return index / (multiplier / max);
1132
- };
1133
- var scaleIndex2ang = (multiplier) => scaleIndex(multiplier, 360);
1134
1139
  var rgba = (val) => {
1135
1140
  const [r, g, b, a] = val;
1136
1141
  return [r / 255, g / 255, b / 255, a];
@@ -1155,13 +1160,20 @@ var createOptions = (opt = DEFAULT_OPT) => {
1155
1160
  const attributes = [
1156
1161
  {
1157
1162
  name: "aPositionStart" /* POSITION_START */,
1158
- data: (index) => {
1159
- const ang = scaleIndex2ang(multiplier)(index);
1160
- const A = spiralConstA;
1161
- const B = spiralConstB;
1162
- const xPos = A * Math.pow(Math.E, B * ang) * Math.cos(ang);
1163
- const yPos = A * Math.pow(Math.E, B * ang) * Math.sin(ang);
1164
- return [xPos, yPos, 1];
1163
+ data: (index, total) => {
1164
+ const percent = index / total;
1165
+ const length = 0.28;
1166
+ const radius = 0.056;
1167
+ const pi2 = Math.PI * 2;
1168
+ let x = length * Math.sin(pi2 * percent), y = radius * Math.cos(pi2 * 3 * percent), z, t;
1169
+ t = percent % 0.25 / 0.25;
1170
+ t = percent % 0.25 - (2 * (1 - t) * t * -0.0185 + t * t * 0.25);
1171
+ if (Math.floor(percent / 0.25) == 0 || Math.floor(percent / 0.25) == 2) {
1172
+ console.log("neg t");
1173
+ t *= -1;
1174
+ }
1175
+ z = radius * Math.sin(pi2 * 2 * (percent - t));
1176
+ return [x, y, z];
1165
1177
  },
1166
1178
  size: 3
1167
1179
  },
package/dist/index.mjs CHANGED
@@ -835,6 +835,7 @@ var Img = (props) => {
835
835
  width: "initial",
836
836
  height: "initial",
837
837
  backgroundSize: "cover",
838
+ backgroundColor: avgColor || "#f1f1f1",
838
839
  backgroundPosition: "0% 0%",
839
840
  backgroundImage: `url(${thumbnailSrc ? thumbnailSrc : addOssWebpProcessStyle(src, "thumbnail" /* THUMBNAIL */)})`
840
841
  };
@@ -1028,32 +1029,40 @@ var VERTEX_SHADER = `
1028
1029
  uniform mat4 uViewMatrix;
1029
1030
  uniform float uProgress;
1030
1031
  varying vec3 vColor;
1031
- mat4 rotate(float _angle){
1032
+ mat4 rotateX(float _angle){
1032
1033
  return mat4(
1033
- cos(_angle),-sin(_angle), 0.0, 0.0,
1034
- sin(_angle),cos(_angle), 0.0, 0.0,
1035
- 0.0, 0.0, 0.0, 0.0,
1034
+ 1.0, 0.0, 0.0, 0.0,
1035
+ 0.0, cos(_angle), -sin(_angle), 0.0,
1036
+ 0.0, sin(_angle), cos(_angle), 0.0,
1036
1037
  0.0, 0.0, 0.0, 1.0
1037
1038
  );
1038
1039
  }
1039
- mat4 translateY(float _offset){
1040
+ mat4 rotateY(float _angle){
1040
1041
  return mat4(
1041
- 1.0, 0.0, 0.0, 0.0,
1042
- 0.0, 1.0, 0.0, -1.0 * _offset,
1042
+ cos(_angle), 0.0, sin(_angle), 0.0,
1043
+ 0.0, 1.0, 0.0, 0.0,
1044
+ -sin(_angle), 0.0, cos(_angle), 0.0,
1045
+ 0.0, 0.0, 0.0, 1.0
1046
+ );
1047
+ }
1048
+ mat4 rotateZ(float _angle){
1049
+ return mat4(
1050
+ cos(_angle), -sin(_angle), 0.0, 0.0,
1051
+ sin(_angle), cos(_angle), 0.0, 0.0,
1043
1052
  0.0, 0.0, 1.0, 0.0,
1044
1053
  0.0, 0.0, 0.0, 1.0
1045
1054
  );
1046
1055
  }
1047
- mat4 translate(float _angle){
1056
+ mat4 translateY(float _offset){
1048
1057
  return mat4(
1049
- 1.0, 0.0, 0.0, sin(_angle) * 0.02,
1050
- 0.0, 1.0, 0.0, cos(_angle) * 0.02,
1058
+ 1.0, 0.0, 0.0, 0.0,
1059
+ 0.0, 1.0, 0.0, -1.0 * _offset,
1051
1060
  0.0, 0.0, 1.0, 0.0,
1052
1061
  0.0, 0.0, 0.0, 1.0
1053
1062
  );
1054
1063
  }
1055
1064
  void main(){
1056
- gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress) * translateY(${"aOffsetY" /* OFFSET_Y */});
1065
+ gl_Position = uProjectionMatrix * uModelMatrix * uViewMatrix * rotateX(uProgress) * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translateY(${"aOffsetY" /* OFFSET_Y */});
1057
1066
  gl_PointSize = 1.0;
1058
1067
  vColor = ${"aColor" /* COLOR */};
1059
1068
  }
@@ -1069,10 +1078,6 @@ var FRAGMENT_SHADER = `
1069
1078
  `;
1070
1079
 
1071
1080
  // src/loading-spiral/utils.ts
1072
- var scaleIndex = (multiplier, max) => (index) => {
1073
- return index / (multiplier / max);
1074
- };
1075
- var scaleIndex2ang = (multiplier) => scaleIndex(multiplier, 360);
1076
1081
  var rgba = (val) => {
1077
1082
  const [r, g, b, a] = val;
1078
1083
  return [r / 255, g / 255, b / 255, a];
@@ -1097,13 +1102,20 @@ var createOptions = (opt = DEFAULT_OPT) => {
1097
1102
  const attributes = [
1098
1103
  {
1099
1104
  name: "aPositionStart" /* POSITION_START */,
1100
- data: (index) => {
1101
- const ang = scaleIndex2ang(multiplier)(index);
1102
- const A = spiralConstA;
1103
- const B = spiralConstB;
1104
- const xPos = A * Math.pow(Math.E, B * ang) * Math.cos(ang);
1105
- const yPos = A * Math.pow(Math.E, B * ang) * Math.sin(ang);
1106
- return [xPos, yPos, 1];
1105
+ data: (index, total) => {
1106
+ const percent = index / total;
1107
+ const length = 0.28;
1108
+ const radius = 0.056;
1109
+ const pi2 = Math.PI * 2;
1110
+ let x = length * Math.sin(pi2 * percent), y = radius * Math.cos(pi2 * 3 * percent), z, t;
1111
+ t = percent % 0.25 / 0.25;
1112
+ t = percent % 0.25 - (2 * (1 - t) * t * -0.0185 + t * t * 0.25);
1113
+ if (Math.floor(percent / 0.25) == 0 || Math.floor(percent / 0.25) == 2) {
1114
+ console.log("neg t");
1115
+ t *= -1;
1116
+ }
1117
+ z = radius * Math.sin(pi2 * 2 * (percent - t));
1118
+ return [x, y, z];
1107
1119
  },
1108
1120
  size: 3
1109
1121
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbki.ng/components",
3
- "version": "1.5.44",
3
+ "version": "1.5.47",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",