atomic-spinner - npm Package Compare versions

Comparing version 1.0.14 to 1.0.15

dist/AtomicSpinner.d.ts

@@ -12,9 +12,12 @@ import * as React from 'react';
     electronSize?: number;
+    electronSpeed?: number;
     nucleusParticleFillColor?: string;
     nucleusParticleBorderColor?: string;
+    nucleusParticleBorderWidth?: number;
     nucleusParticleCount?: number;
     nucleusParticleSize?: number;
     nucleusDistanceFromCenter?: number;
+    nucleusSpeed?: number;
 };
 declare const _default: React.NamedExoticComponent<AtomicSpinnerProps>;
 export default _default;

dist/AtomicSpinner.js

@@ -18,3 +18,3 @@ "use strict";
 const Nucleus_1 = __importDefault(require("./Nucleus"));
-const AtomicSpinner = ({ atomSize = 200, displayElectronPaths = true, displayNucleus = true, electronColorPalette = ['#0081C9', '#5BC0F8', '#86E5FF'], electronPathCount = 3, electronPathColor = '#707070', electronPathWidth = 0.5, electronsPerPath = 2, electronSize = 1.5, nucleusParticleFillColor = '#707070', nucleusParticleBorderColor = '#999', nucleusParticleCount = 6, nucleusParticleSize = 2.5, nucleusDistanceFromCenter = 2.5 }) => {
+const AtomicSpinner = ({ atomSize = 200, displayElectronPaths = true, displayNucleus = true, electronColorPalette = ['#0081C9', '#5BC0F8', '#86E5FF'], electronPathCount = 3, electronPathColor = '#707070', electronPathWidth = 0.5, electronsPerPath = 2, electronSize = 1.5, electronSpeed = 0.5, nucleusParticleFillColor = '#707070', nucleusParticleBorderColor = '#999', nucleusParticleBorderWidth = 0.3, nucleusParticleCount = 6, nucleusParticleSize = 2.5, nucleusDistanceFromCenter = 2.5, nucleusSpeed = 0.5 }) => {
     const electronPaths = Array.from({ length: electronPathCount })
@@ -24,3 +24,3 @@ .map((_, i) => ({
         electronCount: electronsPerPath,
-        electronOrbitTime: 2 + Math.random() * 1
+        electronOrbitTime: 1 / electronSpeed + Math.random() * (0.2 / electronSpeed)
     }));
@@ -34,3 +34,3 @@ const electronPathDefinitionId = 'electronPath';
         displayNucleus
-            && (React.createElement(Nucleus_1.default, { particleCount: nucleusParticleCount, particleSize: nucleusParticleSize, distanceFromCenter: nucleusDistanceFromCenter, particleFillColor: nucleusParticleFillColor, particleBorderColor: nucleusParticleBorderColor })),
+            && (React.createElement(Nucleus_1.default, { particleCount: nucleusParticleCount, particleSize: nucleusParticleSize, distanceFromCenter: nucleusDistanceFromCenter, particleFillColor: nucleusParticleFillColor, particleBorderColor: nucleusParticleBorderColor, particleBorderWidth: nucleusParticleBorderWidth, orbitTime: 10 / nucleusSpeed })),
         displayElectronPaths
@@ -54,2 +54,3 @@ && electronPaths.map(({ rotationAngle }) => (React.createElement(ElectronPath_1.default, { key: `electron-path-${rotationAngle}`, pathDefinitionId: electronPathDefinitionId, color: electronPathColor, width: electronPathWidth, rotationAngle: rotationAngle }))),
     electronSize: prop_types_1.default.number,
+    electronSpeed: prop_types_1.default.number,
     nucleusParticleFillColor: prop_types_1.default.string,
@@ -59,4 +60,6 @@ nucleusParticleBorderColor: prop_types_1.default.string,
     nucleusParticleSize: prop_types_1.default.number,
-    nucleusDistanceFromCenter: prop_types_1.default.number
+    nucleusDistanceFromCenter: prop_types_1.default.number,
+    nucleusParticleBorderWidth: prop_types_1.default.number,
+    nucleusSpeed: prop_types_1.default.number
 };
 exports.default = React.memo(AtomicSpinner);

dist/Electron.js

@@ -11,12 +11,12 @@ "use strict";
 const React = __importStar(require("react"));
+let unusedColors = [];
 const Electron = ({ pathDefinitionId, rotationAngle, orbitTime, spacetimeOffset, size, colorPalette }) => {
-    let unusedColors = [];
-    const getRandomElectronColor = () => {
+    const getNextElectronColor = () => {
         if (!unusedColors.length) {
             unusedColors = [...colorPalette];
         }
-        return unusedColors.splice(Math.floor(Math.random() * (unusedColors.length)), 1)[0];
+        return unusedColors.pop();
     };
     return (React.createElement("g", { transform: `rotate(${rotationAngle} 50 50)` },
-        React.createElement("circle", { cx: "50", cy: "15", r: size, fill: getRandomElectronColor() },
+        React.createElement("circle", { cx: "50", cy: "15", r: size, fill: getNextElectronColor() },
             React.createElement("animateMotion", { dur: `${orbitTime}s`, repeatCount: "indefinite", begin: `${spacetimeOffset}s` },
@@ -23,0 +23,0 @@ React.createElement("mpath", { href: `#${pathDefinitionId}` })))));

dist/Nucleus.d.ts

@@ -5,7 +5,9 @@ /// <reference types="react" />
     particleBorderColor: string;
+    particleBorderWidth: number;
     particleCount: number;
     particleSize: number;
     distanceFromCenter: number;
+    orbitTime: number;
 };
-declare const Nucleus: ({ particleFillColor, particleBorderColor, particleCount, particleSize, distanceFromCenter }: NucleusProps) => JSX.Element;
+declare const Nucleus: ({ particleFillColor, particleBorderColor, particleBorderWidth, particleCount, particleSize, distanceFromCenter, orbitTime }: NucleusProps) => JSX.Element;
 export default Nucleus;

dist/Nucleus.js

@@ -11,4 +11,4 @@ "use strict";
 const React = __importStar(require("react"));
-const Nucleus = ({ particleFillColor, particleBorderColor, particleCount, particleSize, distanceFromCenter }) => {
-    const startingAngle = Math.random() * 2 * Math.PI;
+const Nucleus = ({ particleFillColor, particleBorderColor, particleBorderWidth, particleCount, particleSize, distanceFromCenter, orbitTime }) => {
+    const startingAngle = 0;
     const particles = Array.from({ length: particleCount })
@@ -19,8 +19,18 @@ .map((_, i) => {
         const offsetY = particleCount > 1 ? distanceFromCenter * Math.sin(rotationAngle) : 0;
-        return (React.createElement("g", { key: `particle-${rotationAngle}` },
-            React.createElement("circle", { cx: 50 + offsetX, cy: 50 + offsetY, r: particleSize, fill: particleFillColor, stroke: particleBorderColor, strokeWidth: 0.3 })));
+        const particleDimensions = {
+            cx: 50 + offsetX,
+            cy: 50 + offsetY
+        };
+        const effectiveBorderWidth = Math.min(particleBorderWidth, particleSize / 3);
+        return (React.createElement(React.Fragment, { key: `particle-${rotationAngle}` },
+            effectiveBorderWidth > 0 && i === particleCount - 1 && (React.createElement("mask", { id: `bottom-particle` },
+                React.createElement("rect", { x: "0", y: "0", width: "100", height: "100", fill: "white" }),
+                React.createElement("circle", Object.assign({}, particleDimensions, { r: particleSize + effectiveBorderWidth / 2 })))),
+            React.createElement("circle", Object.assign({}, particleDimensions, { r: particleSize, fill: particleFillColor, stroke: particleBorderColor, strokeWidth: effectiveBorderWidth, mask: i < Math.floor(particleCount / 2) ? `url('#bottom-particle')` : undefined }))));
     });
     particles.sort(({ key }) => (Number(key) % (particleCount / 3) ? 1 : -1));
-    return React.createElement(React.Fragment, null, particles);
+    return (React.createElement("g", null,
+        React.createElement("animateTransform", { attributeName: "transform", begin: "0s", dur: `${orbitTime}s`, type: "rotate", from: "0 50 50", to: "360 50 50", repeatCount: "indefinite" }),
+        particles));
 };
 exports.default = Nucleus;

package.json

 {
   "name": "atomic-spinner",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Loading spinner that looks like an atom",
@@ -5,0 +5,0 @@ "author": "David Lounsbrough",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14602

increased by10.06%

Lines of code

199

increased by10.56%

No dependency changes