update

zumerlab · Jul 21, 2024 · fcff4cb · fcff4cb
1 parent 3007a99
commit fcff4cb
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 27 deletions.
diff --git a/src/js/orbit-label.js b/src/js/orbit-label.js
@@ -23,18 +23,21 @@ export class OrbitLabel extends HTMLElement {
           pointer-events: none;
           
         }
-        svg > * {
+        svg * {
           pointer-events: stroke;
         }
+        text {
+          font-size: inherit;
+        }
         path {
           fill: transparent;
           stroke: var(--color, transparent);
           transition: stroke 0.3s;
         }
        
         :host(:hover) path {
-          stroke: var(--hover-color, transparent);
-          cursor: pointer;
+          stroke: var(--hover-color, var(--color));
+          
         }
       
         
@@ -49,13 +52,11 @@ export class OrbitLabel extends HTMLElement {
 
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
-        if (mutation.type === 'attributes') {
           this.update();
-        }
       });
     });
 
-    observer.observe(this, { attributes: true });
+    observer.observe(this, { attributes: true, childList: true });
 
   }
 
@@ -86,7 +87,7 @@ export class OrbitLabel extends HTMLElement {
       textPath.parentElement.setAttribute('textLength', path.getTotalLength());
     }
 
-    text.style.fontSize = `calc(${fontSize} / (100 / (${length} / var(--o-orbit-number))))`
+    text.style.fontSize = `calc(${fontSize} * (100 / (${length}) * (12 /  var(--o-orbit-number) ))`
 
 
     textPath.textContent = this.textContent.trim();

diff --git a/src/js/orbit-progress.js b/src/js/orbit-progress.js
@@ -1,8 +1,5 @@
 
 export class OrbitProgress extends HTMLElement {
-  static get observedAttributes() {
-    return ['value', 'shape', 'bar-color', 'bg-color', 'max', 'width', 'height'];
-  }
 
   constructor() {
     super();
@@ -19,7 +16,7 @@ export class OrbitProgress extends HTMLElement {
           overflow: visible;
           pointer-events: none;
         }
-        svg > * {
+        svg * {
           pointer-events: stroke;
         }
         .progress-bar {
@@ -31,8 +28,8 @@ export class OrbitProgress extends HTMLElement {
           stroke: var(--bgcolor, transparent);
         }
         :host(:hover) .progress-bar {
-          stroke: var(--hover-color, var(--o-cyan-light));
-          cursor: pointer;
+          stroke: var(--hover-color, var(--color));
+          
         }
       </style>
       <svg viewBox="0 0 100 100">
@@ -41,14 +38,22 @@ export class OrbitProgress extends HTMLElement {
         <path class="progress-bar"></path>
       </svg>
     `;
+
+
   }
 
+
+
   connectedCallback() {
     this.update();
-  }
 
-  attributeChangedCallback() {
-    this.update();
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+          this.update();
+      });
+    });
+
+    observer.observe(this, { attributes: true, childList: true });
   }
 
   update() {

diff --git a/src/js/orbit-sector.js b/src/js/orbit-sector.js
@@ -10,14 +10,17 @@
        overflow: visible;
        pointer-events: none;
      }
+       svg * {
+          pointer-events: stroke;
+        }
        .sector {
           stroke: var(--color, var(--o-cyan-light));
           transition: stroke 0.3s;
         }
         
         :host(:hover) .sector {
-          stroke: var(--hover-color, var(--o-cyan-light));
-          cursor: pointer;
+          stroke: var(--hover-color, var(--color));
+          
         }
    </style>
    <svg viewBox="0 0 100 100">
@@ -37,14 +40,13 @@
      this.update();
 
      const observer = new MutationObserver((mutations) => {
-       mutations.forEach((mutation) => {
-         if (mutation.type === 'attributes') {
-           this.update();
-         }
-       });
-     });
-
-     observer.observe(this, { attributes: true });
+      mutations.forEach((mutation) => {
+          this.update();
+      });
+    });
+
+    observer.observe(this, { attributes: true, childList: true });
+
    }
 
    update() {

diff --git a/src/scss/_satellite.scss b/src/scss/_satellite.scss
@@ -20,6 +20,7 @@
   justify-content: center;
   align-items: center;
   border-radius: 50%; /* Circle by default */
+  pointer-events: all;
 }
 
 .satellite.at-center {

diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
@@ -220,5 +220,5 @@ o-progress.rounded,o-label.rounded {
 }
 
 .dev-orbit * {
-  border: 1px dashed var(--o-cyan) !important;
+  border: 0.2px solid var(--o-cyan) !important;
 }