From 4a5694ae00d95b1b01e8f31805df8c1c2c5ae13d Mon Sep 17 00:00:00 2001
From: Juan Martin <martinmuda@gmail.com>
Date: Wed, 18 Oct 2023 22:52:55 -0300
Subject: [PATCH] labels fixed

---
 examples/generic.html           | 30 +++++++++++++++++++++----
 src/components/_label-base.scss | 39 ++++++++++++++++++++++++++++++---
 src/utilities/_content.scss     |  5 +++--
 3 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/examples/generic.html b/examples/generic.html
index 7de1a64..cd84b9b 100644
--- a/examples/generic.html
+++ b/examples/generic.html
@@ -47,7 +47,7 @@
         </div>
       </div>
       
-      <div class="o-orbit o-limit-90">
+      <div class="o-orbit o-limit-270">
        
          <div class="o-orbiter o-md ">
           <div class="o-orbit ">
@@ -60,16 +60,38 @@
 
         </div>
         <div class="o-orbiter o-md">
+          <div class="o-label o-offset-45">
+            <div class="o-content">Tactic sat intel <br> 45</div>
+          </div>
         </div> 
         <div class="o-orbiter o-md">
+          <div class="o-label o-offset-90">
+            <div class="o-content">Tactic sat intel <br> 90</div>
+          </div>
         </div>
-        <div class="o-orbiter o-md ">
+        <div class="o-orbiter o-md">
+          <div class="o-label o-offset-135">
+            <div class="o-content">Tactic sat intel <br> 135</div>
+          </div>
         </div>
         <div class="o-orbiter o-md">
+          <div class="o-label o-offset-180">
+            <div class="o-content">Tactic sat intel <br> 180</div>
+          </div>
         </div> 
         <div class="o-orbiter o-md">
-          <div class="o-label o-offset-45">
-            <div class="o-content">Tactic sat intel <br> trino</div>
+          <div class="o-label o-offset-225">
+            <div class="o-content">Tactic sat intel <br> 225</div>
+          </div>
+        </div>
+        <div class="o-orbiter o-md">
+          <div class="o-label o-offset-270">
+            <div class="o-content">Tactic sat intel <br> 270</div>
+          </div>
+        </div>
+        <div class="o-orbiter o-md">
+          <div class="o-label o-offset-315">
+            <div class="o-content">Tactic sat intel <br> 315</div>
           </div>
         </div>
       </div>
diff --git a/src/components/_label-base.scss b/src/components/_label-base.scss
index 4e548cf..ca0a87c 100644
--- a/src/components/_label-base.scss
+++ b/src/components/_label-base.scss
@@ -6,6 +6,7 @@
   display: block;
   border: 1px solid;
   border-radius: 50%;
+  background-color: inherit;
   width: 4px;
   height: 4px;
   --o-x-coords: calc(var(--o-size) / 1.8);
@@ -31,12 +32,44 @@
 /* Set size variable for each orbiter */
 @each $pos, $angle in $offsets {
   .o-label#{$pos} {
-      --o-label-angle: calc(#{$angle} * 1deg);
+      
       @if $pos == '.o-offset-180' {
         --o-label-box: -5px;
-      } @else {
+        --o-len: 100%;
+        --o-label-dir: 1;
+        --o-label-angle: calc(#{$angle} * 1deg);
+      } @else if $pos == '.o-offset-45' {
         --o-label-box: 5px;
-      }
+        --o-len: 0%;
+        --o-label-dir: 1;
+        --o-label-angle: calc(#{$angle} * 1deg);
+      } @else if $pos == '.o-offset-90' {
+        --o-label-box: 5px;
+        --o-len: 0%;
+        --o-label-dir: -58;
+        --o-label-angle: 91deg;
+      } @else if $pos == '.o-offset-135' {
+        --o-label-box: 5px;
+        --o-len: 100%;
+        --o-label-dir: -1;
+        --o-label-angle: calc(#{$angle} * 1deg);
+      } @else if $pos == '.o-offset-225' {
+        --o-label-box: 5px;
+        --o-len: 100%;
+        --o-label-dir: 2;
+        --o-label-angle: calc(#{$angle} * 1deg);
+      } @else if $pos == '.o-offset-270' {
+        --o-label-box: 5px;
+        --o-len: 100%;
+        --o-label-dir: -125;
+        --o-label-angle: 271deg;
+      }  @else if $pos == '.o-offset-315' {
+        --o-label-box: 5px;
+        --o-len: 0%;
+        --o-label-dir: -3;
+        --o-label-angle: calc(#{$angle} * 1deg);
+      } 
+      
   }    
 }
 
diff --git a/src/utilities/_content.scss b/src/utilities/_content.scss
index ec480dd..33d3524 100644
--- a/src/utilities/_content.scss
+++ b/src/utilities/_content.scss
@@ -14,6 +14,7 @@
     z-index: 10;
 }
 
+
 //sector o-cont.o-content
 .o-sector > .o-content {
     display: grid;
@@ -54,7 +55,7 @@
     min-width: 100px;
     height:auto;
     --o-label-box: 5px;
-    transform: translate(calc(var(--o-connector-width) - 5px), var(--o-label-box))
-      rotate(calc(var(--o-label-angle) * -1));
+    rotate: (calc(var(--o-label-angle) * -1));
+    transform: translate(calc(var(--o-connector-width) * cos(var(--o-label-angle)) - var(--o-len)), calc(cos(var(--o-label-angle)) * var(--o-connector-width) * var(--o-label-dir)));
 }
   
\ No newline at end of file