change names and fix utility bus

src/js/orbit-resize.js

@@ -12,9 +12,9 @@ Orbit = {
         const resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
             const { width } = entry.contentRect;
-            const childElement = parentElement.querySelector('.orbit-zone');
+            const childElement = parentElement.querySelector('.gravity-spot');
             if (childElement) {
-            childElement.style.setProperty('--o-length', `${width}px`);
+            childElement.style.setProperty('--o-force', `${width}px`);
             } else {
             console.error('No se encontró ningún elemento hijo con la clase .child-element');
             }

src/js/orbit-sector.js → src/js/orbit-slice.js

@@ -13,23 +13,23 @@
        svg * {
           pointer-events: stroke;
         }
-       .sector {
-          stroke: var(--o-sector-color, var(--o-cyan-light));
+       .slice {
+          stroke: var(--o-slice-color, var(--o-cyan-light));
           transition: stroke 0.3s;
         }
         
-        :host(:hover) .sector {
-          stroke: var(--o-hover-sector-color, var(--o-sector-color));
+        :host(:hover) .slice {
+          stroke: var(--o-hover-slice-color, var(--o-slice-color));
           
         }
    </style>
    <svg viewBox="0 0 100 100">
      <defs></defs>
-     <path class="sector" vector-effect="non-scaling-stroke" fill="transparent"></path>
+     <path class="slice" vector-effect="non-scaling-stroke" fill="transparent"></path>
    </svg>
  `;
 
- export class OrbitSector extends HTMLElement {
+ export class OrbitSlice extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
@@ -63,20 +63,20 @@
        path.setAttribute('marker-start', 'url(#tail)');
      }
 
-     const { strokeWidth, realRadius, sectorColor, gap } = this.getAttributes();
+     const { strokeWidth, realRadius, sliceColor, gap } = this.getAttributes();
      const angle = this.calculateAngle();
      const { d } = this.calculateArcParameters(angle, realRadius, gap);
 
      path.setAttribute('d', d);
-     path.setAttribute('stroke', sectorColor);
+     path.setAttribute('stroke', sliceColor);
      path.setAttribute('stroke-width', strokeWidth);
    }
 
    getAttributes() {
      const orbitRadius = parseFloat(getComputedStyle(this).getPropertyValue('r') || 0);
      const gap = parseFloat(getComputedStyle(this).getPropertyValue('--o-gap') || 0.001);
      const shape = this.getAttribute('shape') || 'none';
-     const sectorColor = this.getAttribute('sector-color');
+     const sliceColor = this.getAttribute('slice-color');
      const rawAngle = getComputedStyle(this).getPropertyValue('--o-angle');
      const strokeWidth = parseFloat(getComputedStyle(this).getPropertyValue('stroke-width') || 1);
      const strokeWithPercentage = ((strokeWidth / 2) * 100) / orbitRadius / 2;
@@ -96,22 +96,22 @@
      }
 
      const realRadius = 50 + innerOuter - strokeWithPercentage;
-     const sectorAngle = calcularExpresionCSS(rawAngle);
+     const sliceAngle = calcularExpresionCSS(rawAngle);
 
      return {
        orbitRadius,
        strokeWidth,
        realRadius,
-       sectorColor,
+       sliceColor,
        gap,
-       sectorAngle,
+       sliceAngle,
        shape,
      };
    }
 
    calculateAngle() {
-     const { sectorAngle, gap } = this.getAttributes();
-     return sectorAngle - gap;
+     const { sliceAngle, gap } = this.getAttributes();
+     return sliceAngle - gap;
    }
 
    calculateArcParameters(angle, realRadius, gap) {

src/js/orbit-label.js → src/js/orbit-text.js

@@ -1,4 +1,4 @@
-export class OrbitLabel extends HTMLElement {
+export class OrbitText extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
@@ -29,12 +29,12 @@ export class OrbitLabel extends HTMLElement {
         
         path {
           fill: transparent;
-          stroke: var(--o-label-color);
+          stroke: var(--o-text-color);
           transition: stroke 0.3s;
         }
        
         :host(:hover) path {
-          stroke: var(--o-hover-label-color, var(--o-label-color));
+          stroke: var(--o-hover-text-color, var(--o-text-color));
           
         }
       
@@ -93,10 +93,10 @@ export class OrbitLabel extends HTMLElement {
   }
 
   getPathAttributes() {
-    const { realRadius, gap, labelBgColor, flip, lineCap, strokeWidth } = this.getAttributes();
+    const { realRadius, gap, textBgColor, flip, lineCap, strokeWidth } = this.getAttributes();
     const angle = this.calculateAngle();
     const { d } = this.calculateArcParameters(angle, realRadius, gap, flip);
-    return { d, strokeWidth, labelBgColor, lineCap };
+    return { d, strokeWidth, textBgColor, lineCap };
   }
 
   getTextAttributes() {
@@ -110,7 +110,7 @@ export class OrbitLabel extends HTMLElement {
     const fitRange = this.hasAttribute('fit-range');
     const lineCap = getComputedStyle(this).getPropertyValue('--o-linecap') || 'butt';
     const gap = parseFloat(getComputedStyle(this).getPropertyValue('--o-gap') || 0.001);
-    const length = parseFloat(getComputedStyle(this).getPropertyValue('--o-length'));
+    const length = parseFloat(getComputedStyle(this).getPropertyValue('--o-force'));
     const textAnchor = this.getAttribute('text-anchor') || 'start';
     const fontSize = getComputedStyle(this).getPropertyValue('font-size') ||  getComputedStyle(this).getPropertyValue('--font-size');
     const rawAngle = getComputedStyle(this).getPropertyValue('--o-angle');
@@ -131,7 +131,7 @@ export class OrbitLabel extends HTMLElement {
       innerOuter = strokeWithPercentage * 0.75;
     }
     const realRadius = 50 + innerOuter - strokeWithPercentage;
-    const labelAngle = calcularExpresionCSS(rawAngle);
+    const textAngle = calcularExpresionCSS(rawAngle);
 
     return {
       orbitRadius,
@@ -140,7 +140,7 @@ export class OrbitLabel extends HTMLElement {
       length,
       fontSize,
       gap,
-      labelAngle,
+      textAngle,
       flip,
       textAnchor,
       lineCap,
@@ -149,8 +149,8 @@ export class OrbitLabel extends HTMLElement {
   }
 
   calculateAngle() {
-    const { labelAngle, gap } = this.getAttributes();
-    return labelAngle - gap;
+    const { textAngle, gap } = this.getAttributes();
+    return textAngle - gap;
   }
 
   calculateArcParameters(angle, realRadius, gap, flip) {
@@ -188,4 +188,3 @@ function calcularExpresionCSS(cssExpression) {
   }
 }
 
-//customElements.define('orbit-label', OrbitLabel);

src/orbit.js

@@ -1,10 +1,10 @@
 import { OrbitProgress } from './js/orbit-progress.js'
-import { OrbitSector } from './js/orbit-sector.js'
-import { OrbitLabel } from './js/orbit-label.js'
+import { OrbitSlice } from './js/orbit-slice.js'
+import { OrbitText } from './js/orbit-text.js'
 import { Orbit } from './js/orbit-resize.js'
 
 customElements.define('o-progress', OrbitProgress)
-customElements.define('o-sector', OrbitSector)
-customElements.define('o-label', OrbitLabel)
+customElements.define('o-slice', OrbitSlice)
+customElements.define('o-text', OrbitText)
 
 window.Orbit = Orbit

src/orbit.scss

@@ -2,20 +2,21 @@
     ORBIT CORE
 ==================*/
 @import './scss/_settings.scss';
-@import './scss/_orbit-zone.scss';
+@import './scss/_radial-layout.scss';
+@import './scss/_bigbang.scss';
+@import './scss/_gravity-spot.scss';
 @import './scss/_orbit-class.scss';
 @import './scss/_satellite.scss';
-@import './scss/_spoke.scss';
-@import './scss/_segment.scss';
-@import './scss/_sector.scss';
-@import './scss/_label.scss';
+@import './scss/_vector.scss';
+@import './scss/_side.scss';
+@import './scss/_slice.scss';
+@import './scss/_text.scss';
 @import './scss/_progress.scss';
-@import './scss/_radial-layout.scss';
 @import './scss/_capsule.scss';
 @import './scss/_utilities.scss';
 
 /*================
-    ORBIT SUPPORTS
+    ORBIT SUPPORT
 ==================*/
 @import './scss/_support.scss';
 

src/scss/_bigbang.scss

@@ -0,0 +1,9 @@
+
+.bigbang {
+  //position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}

src/scss/_gravity-spot.scss

@@ -0,0 +1,20 @@
+
+.gravity-spot {
+  container-name: gravityspot;
+  /* Reset to defaults everytime gravity-spot is used */
+  --o-force: 500px;
+  --o-from: 0deg;
+  --o-range: 360deg;
+  --o-ellipse-x: 1;
+  --o-ellipse-y: 1;
+  --o-fit-range: 0;
+  --o-direction: 1;
+  --o-size-ratio: 1;
+  width: 0;
+  aspect-ratio: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none; 
+}

src/scss/_orbit-class.scss

@@ -1,9 +1,9 @@
 @use './variables' as *;
 
-.orbit, [class*='orbit-']:not(.orbit-zone) {
+.orbit, [class*='orbit-'] {
   container-name: orbit;
-  --o-base-diameter: var(--o-orbit-number) * var(--o-length) / #{$max-orbits};
-  --o-prev-diameter: (var(--o-orbit-number) - 1) * var(--o-length) / #{$max-orbits};
+  --o-base-diameter: (var(--o-initial-orbit, 0) + var(--o-orbit-number)) * var(--o-force) / (#{$max-orbits} + var(--o-initial-orbit, 0));
+  --o-prev-diameter: ((var(--o-initial-orbit, 0) + var(--o-orbit-number)) - 1) * var(--o-force) / (#{$max-orbits} + var(--o-initial-orbit, 0));
   --o-diameter: calc(var(--o-base-diameter) - ((var(--o-base-diameter) - var(--o-prev-diameter)) * var(--o-orbit-ratio, 0)));
   --o-radius: calc(var(--o-diameter) / 2);
   width: calc(var(--o-diameter) / var(--o-ellipse-x));

src/scss/_radial-layout.scss

@@ -4,35 +4,35 @@
 .orbit-0 {
   --o-orbit-number: 0.01;
 }
-@for $i from 1 through $max-orbits {
+@for $i from 1 through $extra-orbits {
     :nth-child(#{$i} of .orbit), .orbit-#{$i} {
     --o-orbit-number: #{$i};
     }
 }
 
-/* Satellites, sectors, label, segment, and spokes layout */
+/* Satellites, sectors, label, side, and vectors layout */
 @for $i from 1 through $max-orbiters {
- :nth-child(#{$i} of .segment){
+ :nth-child(#{$i} of .side){
     --o-orbit-child-number: #{$i - 2}; // Uses - 1 to start from 0 deg.
     }
 }
 
 @for $i from 1 through $max-orbiters {
-  :nth-child(#{$i} of .satellite),:nth-child(#{$i} of o-sector), :nth-child(#{$i} of .spoke) ,:nth-child(#{$i} of o-label) {
+  :nth-child(#{$i} of .satellite),:nth-child(#{$i} of o-slice), :nth-child(#{$i} of .vector) ,:nth-child(#{$i} of o-text) {
     --o-orbit-child-number: #{$i - 1}; // Uses - 1 to start from 0 deg.
     }
 }
 
 @for $i from 1 through $max-orbiters {
-    .orbit:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .spoke), > :nth-child(#{$i} of .segment), > :nth-child(#{$i} of o-label)), 
-    [class*='orbit-']:not(.orbit-zone):has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .spoke), > :nth-child(#{$i} of .segment), > :nth-child(#{$i} of o-label)) {
+    .orbit:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-slice), > :nth-child(#{$i} of .vector), > :nth-child(#{$i} of .side), > :nth-child(#{$i} of o-text)), 
+    [class*='orbit-']:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-slice), > :nth-child(#{$i} of .vector), > :nth-child(#{$i} of .side), > :nth-child(#{$i} of o-text)) {
     --o-angle: calc(var(--o-range) / (#{$i} - var(--o-fit-range, 0)));
     }
 }
 
 @for $i from 1 through $max-orbiters {
-  .orbit:has(> :nth-child(#{$i} of .segment)), 
-  [class*='orbit-']:not(.orbit-zone):has(> :nth-child(#{$i} of .segment)) {
+  .orbit:has(> :nth-child(#{$i} of .side)), 
+  [class*='orbit-']:has(> :nth-child(#{$i} of .side)) {
   --o-angle: calc(var(--o-range) / #{$i });
   }
 }

src/scss/_settings.scss

@@ -2,7 +2,7 @@
 
 /* Orbit basic reset */
 
-.orbit-zone * {
+.gravity-spot * {
   ::before, ::after {
     box-sizing: border-box;
   }

src/scss/_segment.scss → src/scss/_side.scss

@@ -1,7 +1,7 @@
 
 
-.segment {
-  container-name: segment;
+.side {
+  container-name: side;
   --o-angle-composite: (var(--o-angle) * var(--o-orbit-child-number) var(--o-offset, + 270deg)) * var(--o-direction, 1);
   --o-y: calc(var(--o-radius) * sin(90deg - var(--o-angle) / 2));
   --o-x: calc(var(--o-radius) * cos(90deg - var(--o-angle) / 2) * 2);
@@ -17,7 +17,7 @@
   background: rgb(0, 0, 0);
 }
 
-.segment.outer-orbit{
+.side.outer-orbit{
   --o-y: calc(var(--o-radius));
   width: calc(var(--o-radius) * tan(var(--o-angle) / 2) * 2);
   /* cateto adyacente = cateto opuesto * tan(angulo) */

src/scss/_sector.scss → src/scss/_slice.scss

@@ -1,8 +1,8 @@
 @use './variables' as *;
 
-o-sector {
+o-slice {
   --o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1);
-  container-name: osector;
+  container-name: oslice;
   display: flex;
   justify-content: center;
   align-items: center;