Fix totalLenght()

zumerlab · Jan 28, 2025 · 15a5aa0 · 15a5aa0
1 parent 0987bb0
commit 15a5aa0
Showing 1 changed file with 52 additions and 48 deletions.
diff --git a/src/js/orbit-arc.js b/src/js/orbit-arc.js
@@ -1,54 +1,58 @@
+
+const template = document.createElement('template')
+template.innerHTML = `
+   <style>
+      :host {
+        --o-fill: var(--o-gray-light);
+        --o-stroke: var(--o-fill);
+        --o-stroke-width: 1;
+        --o-color: currentcolor;
+      }
+      :host(:hover){
+        --o-fill: var(--o-gray-light);
+        --o-stroke: var(--o-fill);
+        --o-stroke-width: 1;
+        --o-color: currentcolor;
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+        pointer-events: none;
+      }
+      svg * {
+        pointer-events: visiblePainted;
+      }
+      #orbitShape {
+        fill: var(--o-fill);
+        stroke: var(--o-stroke);
+        stroke-width: var(--o-stroke-width);
+        transition: all 0.3s;
+        stroke-linejoin: round;
+      }
+      text {
+       fill: var(--o-color);
+      }
+      #orbitPath {
+        fill: transparent;
+        stroke: none;
+        stroke-width: 0;
+      }
+   </style>
+   <svg viewBox="0 0 100 100">
+     <path id="orbitShape" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
+     <path id="orbitPath"  shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke" ></path>
+     <text>
+        <textPath href="#orbitPath"  alignment-baseline="middle"></textPath>
+      </text>
+   </svg>
+ `
+
 export class OrbitArc extends HTMLElement {
   constructor() {
     super()
     this.attachShadow({ mode: 'open' })
-    this.shadowRoot.innerHTML = `
-    <style>
-        :host {
-          --o-fill: var(--o-gray-light);
-          --o-stroke: var(--o-fill);
-          --o-stroke-width: 1;
-          --o-color: currentcolor;
-        }
-        :host(:hover){
-          --o-fill: var(--o-gray-light);
-          --o-stroke: var(--o-fill);
-          --o-stroke-width: 1;
-          --o-color: currentcolor;
-        }
-        svg {
-          width: 100%;
-          height: 100%;
-          overflow: visible;
-          pointer-events: none;
-        }
-        svg * {
-          pointer-events: visiblePainted;
-        }
-        #orbitShape {
-          fill: var(--o-fill);
-          stroke: var(--o-stroke);
-          stroke-width: var(--o-stroke-width);
-          transition: all 0.3s;
-          stroke-linejoin: round;
-        }
-        text {
-        fill: var(--o-color);
-        }
-        #orbitPath {
-          fill: transparent;
-          stroke: none;
-          stroke-width: 0;
-        }
-    </style>
-    <svg viewBox="0 0 100 100">
-      <path id="orbitShape" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
-      <path id="orbitPath"  shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke" ></path>
-      <text>
-          <textPath href="#orbitPath"  alignment-baseline="middle"></textPath>
-        </text>
-    </svg>
-    `
+    this.shadowRoot.appendChild(template.content.cloneNode(true))
   }
 
   connectedCallback() {
@@ -88,7 +92,7 @@ export class OrbitArc extends HTMLElement {
       textPath.setAttribute('text-anchor', 'end')
     }
 
-    if (fitRange) textPath.parentElement.setAttribute('textLength', textPath.getTotalLength())
+    if (fitRange) textPath.parentElement.setAttribute('textLength', orbitPath.getTotalLength())
 
     text.style.fontSize = `calc(${fontSize} * (100 / (${length}) * (12 /  var(--o-orbit-number) ))`
     textPath.textContent = this.textContent