atomic-spinner - npm Package Compare versions

Comparing version 1.0.17 to 1.0.18

dist/AtomicSpinner.d.ts

@@ -13,6 +13,7 @@ import * as React from 'react';
     electronSpeed?: number;
+    nucleusLayerCount?: number;
+    nucleusParticlesPerLayer?: number;
     nucleusParticleFillColor?: string;
     nucleusParticleBorderColor?: string;
     nucleusParticleBorderWidth?: number;
-    nucleusParticleCount?: number;
     nucleusParticleSize?: number;
@@ -19,0 +20,0 @@ nucleusDistanceFromCenter?: number;

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, electronSpeed = 0.5, nucleusParticleFillColor = '#707070', nucleusParticleBorderColor = '#999', nucleusParticleBorderWidth = 0.3, nucleusParticleCount = 6, nucleusParticleSize = 2.5, nucleusDistanceFromCenter = 2.5, nucleusSpeed = 0.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, nucleusLayerCount = 2, nucleusParticlesPerLayer = 3, nucleusParticleFillColor = '#707070', nucleusParticleBorderColor = '#999', nucleusParticleBorderWidth = 0.3, nucleusParticleSize = 2.5, nucleusDistanceFromCenter = 2.5, nucleusSpeed = 0.5 }) => {
     const electronPaths = Array.from({ length: electronPathCount })
@@ -33,3 +33,3 @@ .map((_, i) => ({
         displayNucleus
-            && (React.createElement(Nucleus_1.default, { particleCount: nucleusParticleCount, particleSize: nucleusParticleSize, distanceFromCenter: nucleusDistanceFromCenter, particleFillColor: nucleusParticleFillColor, particleBorderColor: nucleusParticleBorderColor, particleBorderWidth: nucleusParticleBorderWidth, orbitTime: 10 / nucleusSpeed })),
+            && (React.createElement(Nucleus_1.default, { layerCount: nucleusLayerCount, particlesPerLayer: nucleusParticlesPerLayer, particleSize: nucleusParticleSize, distanceFromCenter: nucleusDistanceFromCenter, particleFillColor: nucleusParticleFillColor, particleBorderColor: nucleusParticleBorderColor, particleBorderWidth: nucleusParticleBorderWidth, orbitTime: 10 / nucleusSpeed })),
         displayElectronPaths
@@ -57,5 +57,6 @@ && electronPaths.map(({ rotationAngle }) => (React.createElement(ElectronPath_1.default, { key: `electron-path-${rotationAngle}`, pathDefinitionId: electronPathDefinitionId, color: electronPathColor, width: electronPathWidth, rotationAngle: rotationAngle }))),
     electronSpeed: prop_types_1.default.number,
+    nucleusLayerCount: prop_types_1.default.number,
+    nucleusParticlesPerLayer: prop_types_1.default.number,
     nucleusParticleFillColor: prop_types_1.default.string,
     nucleusParticleBorderColor: prop_types_1.default.string,
-    nucleusParticleCount: prop_types_1.default.number,
     nucleusParticleSize: prop_types_1.default.number,
@@ -62,0 +63,0 @@ nucleusDistanceFromCenter: prop_types_1.default.number,

dist/Nucleus.d.ts

 /// <reference types="react" />
 export declare type NucleusProps = {
+    layerCount: number;
+    particlesPerLayer: number;
     particleFillColor: string;
     particleBorderColor: string;
     particleBorderWidth: number;
-    particleCount: number;
     particleSize: number;
@@ -11,3 +12,13 @@ distanceFromCenter: number;
 };
-declare const Nucleus: ({ particleFillColor, particleBorderColor, particleBorderWidth, particleCount, particleSize, distanceFromCenter, orbitTime }: NucleusProps) => JSX.Element;
+export declare type NucleusLayerProps = NucleusProps & {
+    particlesPerLayer: number;
+    startingAngle: number;
+    particleFillColor: string;
+    particleBorderColor: string;
+    particleBorderWidth: number;
+    particleSize: number;
+    distanceFromCenter: number;
+    orbitTime: number;
+};
+declare const Nucleus: (props: NucleusProps) => JSX.Element;
 export default Nucleus;

dist/Nucleus.js

@@ -11,9 +11,8 @@ "use strict";
 const React = __importStar(require("react"));
-const Nucleus = ({ particleFillColor, particleBorderColor, particleBorderWidth, particleCount, particleSize, distanceFromCenter, orbitTime }) => {
-    const startingAngle = 0;
-    const particles = Array.from({ length: particleCount })
+const NucleusLayer = ({ particleFillColor, particleBorderColor, particleBorderWidth, particlesPerLayer, particleSize, distanceFromCenter, orbitTime, startingAngle }) => {
+    const particles = Array.from({ length: particlesPerLayer })
         .map((_, i) => {
-        const rotationAngle = startingAngle + i * ((2 * Math.PI) / particleCount);
-        const offsetX = particleCount > 1 ? distanceFromCenter * Math.cos(rotationAngle) : 0;
-        const offsetY = particleCount > 1 ? distanceFromCenter * Math.sin(rotationAngle) : 0;
+        const rotationAngle = startingAngle + i * ((2 * Math.PI) / particlesPerLayer);
+        const offsetX = particlesPerLayer > 1 ? distanceFromCenter * Math.cos(rotationAngle) : 0;
+        const offsetY = particlesPerLayer > 1 ? distanceFromCenter * Math.sin(rotationAngle) : 0;
         const particleDimensions = {
@@ -25,6 +24,6 @@ cx: 50 + offsetX,
         return (React.createElement(React.Fragment, { key: `particle-${rotationAngle}` },
-            effectiveBorderWidth > 0 && i === 0 && (React.createElement("mask", { id: `bottom-particle` },
+            effectiveBorderWidth > 0 && i === 0 && (React.createElement("mask", { id: `layer-${startingAngle}-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 }))));
+            React.createElement("circle", Object.assign({}, particleDimensions, { r: particleSize, fill: particleFillColor, stroke: particleBorderColor, strokeWidth: effectiveBorderWidth, mask: i > Math.floor(particlesPerLayer / 2) ? `url('#layer-${startingAngle}-bottom-particle')` : undefined }))));
     });
@@ -35,2 +34,11 @@ return (React.createElement("g", null,
 };
+const Nucleus = (props) => {
+    const angleIncrement = props.particlesPerLayer % 2 === 0
+        ? Math.PI / 2 / Math.max(1, (props.layerCount - 1))
+        : Math.PI / Math.max(1, (props.layerCount - 1));
+    return (React.createElement(React.Fragment, null, Array.from({ length: props.layerCount }).map((_, index) => {
+        const startingAngle = index * angleIncrement;
+        return React.createElement(NucleusLayer, Object.assign({ key: `nucleus-layer-${startingAngle}` }, props, { particlesPerLayer: props.particlesPerLayer, startingAngle: startingAngle }));
+    })));
+};
 exports.default = Nucleus;

package.json

 {
   "name": "atomic-spinner",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "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

15652

increased by6.88%

Lines of code

223

increased by10.95%

No dependency changes