From cb8d3e357414220c058e752e68ac2234e0f6341d Mon Sep 17 00:00:00 2001
From: Juan Martin <martinmuda@gmail.com>
Date: Fri, 4 Oct 2024 13:53:10 +0300
Subject: [PATCH] Changes o-slice by o-arc

---
 src/js/{orbit-slice.js => orbit-arc.js} | 26 ++++++++++++-------------
 src/orbit.js                            |  6 +++---
 2 files changed, 16 insertions(+), 16 deletions(-)
 rename src/js/{orbit-slice.js => orbit-arc.js} (90%)

diff --git a/src/js/orbit-slice.js b/src/js/orbit-arc.js
similarity index 90%
rename from src/js/orbit-slice.js
rename to src/js/orbit-arc.js
index e5f54db..99cc5d9 100644
--- a/src/js/orbit-slice.js
+++ b/src/js/orbit-arc.js
@@ -13,24 +13,24 @@
        svg * {
           pointer-events: stroke;
         }
-       .slice {
+       .arc {
           stroke: var(--o-arc-color, var(--o-cyan-light));
           stroke-width:  calc(var(--o-radius) / var(--o-orbit-number) * var(--o-size-ratio, 1));
           transition: stroke 0.3s;
         }
         
-        :host(:hover) .slice {
-          stroke: var(--o-hover-slice-color, var(--o-arc-color));
+        :host(:hover) .arc {
+          stroke: var(--o-hover-arc-color, var(--o-arc-color));
           
         }
    </style>
    <svg viewBox="0 0 100 100">
      <defs></defs>
-     <path class="slice" vector-effect="non-scaling-stroke" fill="transparent"></path>
+     <path class="arc" vector-effect="non-scaling-stroke" fill="transparent"></path>
    </svg>
  `;
  
- export class OrbitSlice extends HTMLElement {
+ export class OrbitArc extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
@@ -64,12 +64,12 @@
        path.setAttribute('marker-start', 'url(#tail)');
      }
  
-     const { realRadius, sliceColor, gap } = this.getAttributes();
+     const { realRadius, arcColor, gap } = this.getAttributes();
      const angle = this.calculateAngle();
      const { d } = this.calculateArcParameters(angle, realRadius, gap);
  
      path.setAttribute('d', d);
-     path.setAttribute('stroke', sliceColor);
+     path.setAttribute('stroke', arcColor);
      // path.setAttribute('stroke-width', strokeWidth);
    }
  
@@ -77,7 +77,7 @@
      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 sliceColor = this.getAttribute('slice-color');
+     const arcColor = this.getAttribute('arc-color');
      const rawAngle = getComputedStyle(this).getPropertyValue('--o-angle');
      const strokeWidth = parseFloat(getComputedStyle(this).getPropertyValue('stroke-width') || 1);
      const strokeWithPercentage = ((strokeWidth / 2) * 100) / orbitRadius / 2;
@@ -97,22 +97,22 @@
      }
  
      const realRadius = 50 + innerOuter - strokeWithPercentage;
-     const sliceAngle = calcularExpresionCSS(rawAngle);
+     const arcAngle = calcularExpresionCSS(rawAngle);
  
      return {
        orbitRadius,
        strokeWidth,
        realRadius,
-       sliceColor,
+       arcColor,
        gap,
-       sliceAngle,
+       arcAngle,
        shape,
      };
    }
  
    calculateAngle() {
-     const { sliceAngle, gap } = this.getAttributes();
-     return sliceAngle - gap;
+     const { arcAngle, gap } = this.getAttributes();
+     return arcAngle - gap;
    }
  
    calculateArcParameters(angle, realRadius) {
diff --git a/src/orbit.js b/src/orbit.js
index 74379c9..ce32388 100644
--- a/src/orbit.js
+++ b/src/orbit.js
@@ -1,10 +1,10 @@
 import { OrbitProgress } from './js/orbit-progress.js'
-import { OrbitSlice } from './js/orbit-slice.js'
+import { OrbitArc } from './js/orbit-arc.js'
 import { OrbitText } from './js/orbit-text.js'
 import { Orbit } from './js/orbit-resize.js'
 
 customElements.define('o-progress', OrbitProgress)
-customElements.define('o-arc', OrbitSlice)
+customElements.define('o-arc', OrbitArc)
 customElements.define('o-text', OrbitText)
 
-window.Orbit = Orbit
\ No newline at end of file
+window.Orbit = Orbit