@zumer/orbit 1.4.5 → 1.4.10

package/dist/orbit.js

@@ -1,27 +1,14 @@
-
 /*
 * orbit
-* v.1.4.5
+* v.1.4.10
 * Author Juan Martin Muda - Zumerlab
 * License MIT
-**/
-
+*/
 (() => {
   // src/js/orbit-base.js
   var OrbitBase = class extends HTMLElement {
     constructor() {
       super();
-      this.commonProperties = {
-        orbitRadius: 0,
-        arcHeight: 0,
-        realRadius: 0,
-        arcAngle: 0,
-        shape: "none",
-        arcHeightPercentage: 0,
-        orbitNumber: 1,
-        size: 1,
-        strokeWidth: 1
-      };
     }
     getCommonAttributes(element) {
       const orbitRadius = parseFloat(getComputedStyle(element).getPropertyValue("r") || 0);
@@ -30,7 +17,7 @@
       const strokeWidth = parseFloat(getComputedStyle(element).getPropertyValue("--o-stroke-width") || 1);
       const shape = element.getAttribute("shape") || "none";
       const arcHeight = orbitRadius / orbitNumber * size - strokeWidth + 0.3;
-      const arcHeightPercentage = arcHeight / 2 * 100 / orbitRadius / 2;
+      const arcHeightPercentage = orbitRadius > 0 ? arcHeight / 2 * 100 / orbitRadius / 2 : 0;
       let innerOuter = 0;
       if (element.classList.contains("outer-orbit")) {
         innerOuter = arcHeightPercentage;
@@ -158,15 +145,11 @@
       const Q2 = this.getControlPoint(newInnerStart.x, newInnerStart.y, innerPointStart.x, innerPointStart.y);
       const Q3 = this.getControlPoint(upperPointStart.x, upperPointStart.y, newUpperStart.x, newUpperStart.y);
       let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
-      d += `Q ${Q.xc}, ${Q.yc} ${upperPointEnd.x} ${upperPointEnd.y} `;
-      d += `L ${upperPointEnd.x} ${upperPointEnd.y}`;
-      d += `L ${innerPointEnd.x} ${innerPointEnd.y}`;
-      d += `Q ${Q1.xc}, ${Q1.yc} ${newInnerEnd.x} ${newInnerEnd.y} `;
+      d += `Q ${Q.xc},${Q.yc} ${upperPointEnd.x},${upperPointEnd.y} L ${innerPointEnd.x},${innerPointEnd.y}`;
+      d += `Q ${Q1.xc},${Q1.yc} ${newInnerEnd.x},${newInnerEnd.y}`;
       d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
-      d += `Q ${Q2.xc}, ${Q2.yc} ${innerPointStart.x} ${innerPointStart.y} `;
-      d += `L ${innerPointStart.x} ${innerPointStart.y}`;
-      d += `L ${upperPointStart.x} ${upperPointStart.y}`;
-      d += ` Q ${Q3.xc}, ${Q3.yc} ${newUpperStart.x} ${newUpperStart.y} `;
+      d += `Q ${Q2.xc},${Q2.yc} ${innerPointStart.x},${innerPointStart.y} L ${upperPointStart.x},${upperPointStart.y}`;
+      d += ` Q ${Q3.xc},${Q3.yc} ${newUpperStart.x},${newUpperStart.y}`;
       d += ` Z`;
       return d;
     }
@@ -220,12 +203,13 @@
     }
     generateZigzagPath(params, arcHeight, orbitNumber) {
       const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlag, radius } = params;
-      const s2 = this.arcPoint(radius, params.upperAngleStart, -arcHeight / orbitNumber / 2, 3);
-      const s3 = this.arcPoint(radius, params.upperAngleStart, 0 / orbitNumber / 2, 0);
-      const s4 = this.arcPoint(radius, params.upperAngleStart, arcHeight / orbitNumber / 2, 3);
-      const e2 = this.arcPoint(radius, params.innerAngleEnd, arcHeight / orbitNumber / 2, 3);
-      const e3 = this.arcPoint(radius, params.innerAngleEnd, 0 / orbitNumber / 2, 0);
-      const e4 = this.arcPoint(radius, params.innerAngleEnd, -arcHeight / orbitNumber / 2, 3);
+      const h2 = arcHeight / orbitNumber / 2;
+      const s2 = this.arcPoint(radius, params.upperAngleStart, -h2, 3);
+      const s3 = this.arcPoint(radius, params.upperAngleStart, 0, 0);
+      const s4 = this.arcPoint(radius, params.upperAngleStart, h2, 3);
+      const e2 = this.arcPoint(radius, params.innerAngleEnd, h2, 3);
+      const e3 = this.arcPoint(radius, params.innerAngleEnd, 0, 0);
+      const e4 = this.arcPoint(radius, params.innerAngleEnd, -h2, 3);
       let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
       d += `L ${e2.x} ${e2.y}`;
       d += `L ${e3.x} ${e3.y}`;
@@ -312,14 +296,11 @@
       this.observer.observe(this, { attributes: true, childList: true });
     }
     update() {
-      const progressBg = this.shadowRoot.querySelector(".progress-bg");
-      const progressBar = this.shadowRoot.querySelector(".progress-bar");
-      this.updateArc(progressBg, true);
-      this.updateArc(progressBar, false);
-    }
-    updateArc(arc, full) {
-      const { d } = this.calculateArcParameters(full);
-      arc.setAttribute("d", d);
+      const attrs = this.getAttributes();
+      const dBg = this.calculateArcParameters(attrs, true);
+      const dBar = this.calculateArcParameters(attrs, false);
+      this.shadowRoot.querySelector(".progress-bg").setAttribute("d", dBg);
+      this.shadowRoot.querySelector(".progress-bar").setAttribute("d", dBar);
     }
     getAttributes() {
       const common = super.getCommonAttributes(this);
@@ -333,13 +314,13 @@
         maxValue
       };
     }
-    getProgressAngle(full) {
-      const { range, progress, maxValue } = this.getAttributes();
+    getProgressAngle(attrs, full) {
+      const { range, progress, maxValue } = attrs;
       return full ? (maxValue - 1e-5) / maxValue * range : progress / maxValue * range;
     }
-    calculateArcParameters(full) {
-      const { shape, realRadius, arcHeightPercentage, orbitNumber, strokeWidth, arcHeight } = this.getAttributes();
-      const arcAngle = this.getProgressAngle(full);
+    calculateArcParameters(attrs, full) {
+      const { shape, realRadius, arcHeightPercentage, orbitNumber, strokeWidth, arcHeight } = attrs;
+      const arcAngle = this.getProgressAngle(attrs, full);
       const params = super.calculateCommonArcParameters(
         arcAngle,
         realRadius,
@@ -349,8 +330,7 @@
         strokeWidth,
         arcHeight
       );
-      const d = super.generatePathData(shape, params, arcHeight, orbitNumber);
-      return { d };
+      return super.generatePathData(shape, params, arcHeight, orbitNumber);
     }
   };
 
@@ -413,8 +393,8 @@
       this.setupObservers();
     }
     disconnectedCallback() {
-      this.observer?.disconnect();
-      this.textObserver?.disconnect();
+      if (this.observer) this.observer.disconnect();
+      if (this.textObserver) this.textObserver.disconnect();
     }
     setupObservers() {
       this.observer = new MutationObserver((mutations) => {
@@ -430,15 +410,13 @@
       this.textObserver.observe(this, { characterData: true, subtree: true });
     }
     update() {
-      const { length, fontSize, textAnchor, fitRange } = this.getAttributes();
-      const orbitPath = this.shadowRoot.getElementById("orbitPath");
-      const orbitShape = this.shadowRoot.getElementById("orbitShape");
-      const text = this.shadowRoot.querySelector("text");
+      const attrs = this.getAttributes();
+      const { length, fontSize, textAnchor, fitRange } = attrs;
+      const orbitPath = this.shadowRoot.querySelector("#orbitPath");
+      const orbitShape = this.shadowRoot.querySelector("#orbitShape");
       const textPath = this.shadowRoot.querySelector("textPath");
-      const { dShape } = this.calculateArcParameters();
-      const { dPath } = this.calculateTextArcParameters();
-      orbitShape.setAttribute("d", dShape);
-      orbitPath.setAttribute("d", dPath);
+      orbitShape.setAttribute("d", this.calculateArcParameters(attrs).dShape);
+      orbitPath.setAttribute("d", this.calculateTextArcParameters(attrs).dPath);
       if (textAnchor === "start") {
         textPath.setAttribute("startOffset", "0%");
         textPath.setAttribute("text-anchor", "start");
@@ -452,7 +430,7 @@
       if (fitRange) {
         textPath.parentElement.setAttribute("textLength", orbitPath.getTotalLength());
       }
-      text.style.fontSize = `calc(${fontSize} * (100 / (${length}) * (12 / var(--o-orbit-number)))`;
+      textPath.parentElement.style.fontSize = `calc(${fontSize} * (100 / (${length}) * (12 / var(--o-orbit-number)))`;
       textPath.textContent = this.textContent;
     }
     getAttributes() {
@@ -460,12 +438,12 @@
       let arcAngle;
       const flip = this.hasAttribute("flip") || this.classList.contains("flip");
       const fitRange = this.hasAttribute("fit-range") || this.classList.contains("fit-range") || false;
-      const length = parseFloat(getComputedStyle(this).getPropertyValue("--o-force"));
+      const length = parseFloat(getComputedStyle(this).getPropertyValue("--o-force")) || 100;
       const textAnchor = this.getAttribute("text-anchor") || "middle";
       const fontSize = getComputedStyle(this).getPropertyValue("font-size") || getComputedStyle(this).getPropertyValue("--font-size");
       const range = parseFloat(getComputedStyle(this).getPropertyValue("--o-range") || 360);
       const value = parseFloat(this.getAttribute("value"));
-      const gap = parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"));
+      const gap = parseFloat(getComputedStyle(this).getPropertyValue("--o-gap")) || 1;
       if (value) {
         arcAngle = super.getProgressAngle(range, value);
         const prevElement = this.previousElementSibling;
@@ -492,8 +470,8 @@
         textAnchor
       };
     }
-    calculateArcParameters() {
-      const { arcAngle, realRadius, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight, gap } = this.getAttributes();
+    calculateArcParameters(attrs) {
+      const { arcAngle, realRadius, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight, gap } = attrs;
       const params = super.calculateCommonArcParameters(
         arcAngle,
         realRadius,
@@ -507,8 +485,8 @@
       const dShape = super.generatePathData(shape, params, arcHeight, orbitNumber);
       return { dShape };
     }
-    calculateTextArcParameters() {
-      const { arcAngle, realRadius, gap, flip } = this.getAttributes();
+    calculateTextArcParameters(attrs) {
+      const { arcAngle, realRadius, gap, flip } = attrs;
       const adjustedGap = gap * 0.5;
       const sweepFlag = flip ? 0 : 1;
       const largeArcFlag = arcAngle <= 180 ? 0 : 1;
@@ -534,39 +512,35 @@
   };
 
   // src/js/orbit-resize.js
-  var Orbit = {};
-  Orbit = {
-    resize: (parentElementSelector) => {
-      const parentElement = document.querySelector(parentElementSelector);
-      if (!parentElement) {
-        console.error(`Not found: ${parentElementSelector}`);
+  var Orbit = {
+    resize(parentElementSelector) {
+      const parent = document.querySelector(parentElementSelector);
+      if (!parent) {
+        console.error("Orbit.resize: element not found:", parentElementSelector);
         return;
       }
-      const resizeObserver = new ResizeObserver((entries) => {
-        for (let entry of entries) {
-          const { width } = entry.contentRect;
-          const childElements = parentElement.querySelectorAll(".gravity-spot");
-          if (childElements) {
-            childElements.forEach((childElement) => {
-              let gravityForce = getComputedStyle(childElement).getPropertyValue("--o-force");
-              let forceRatio = width / 500;
-              childElement.style.setProperty("--o-force-ratio", `${forceRatio}`);
-            });
-          } else {
-            console.error("No gravity-spot found");
-          }
+      const applyRatio = (width) => {
+        parent.querySelectorAll(".gravity-spot").forEach((el) => {
+          el.style.setProperty("--o-force-ratio", String(width / 500));
+        });
+      };
+      let w = parent.offsetWidth || parent.getBoundingClientRect().width;
+      if (w > 0) applyRatio(w);
+      else requestAnimationFrame(() => {
+        w = parent.offsetWidth || parent.getBoundingClientRect().width;
+        if (w > 0) applyRatio(w);
+      });
+      const ro = new ResizeObserver((entries) => {
+        for (const e of entries) {
+          if (e.contentRect.width > 0) applyRatio(e.contentRect.width);
         }
       });
-      resizeObserver.observe(parentElement);
+      ro.observe(parent);
     }
   };
 
   // src/orbit.js
-  if (!customElements.get("o-progress")) {
-    customElements.define("o-progress", OrbitProgress);
-  }
-  if (!customElements.get("o-arc")) {
-    customElements.define("o-arc", OrbitArc);
-  }
+  if (!customElements.get("o-progress")) customElements.define("o-progress", OrbitProgress);
+  if (!customElements.get("o-arc")) customElements.define("o-arc", OrbitArc);
   window.Orbit = Orbit;
 })();