labels fixed

zumerlab · Oct 19, 2023 · 4a5694a · 4a5694a
1 parent c9c80bf
commit 4a5694a
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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)));
 }