update

zumerlab · Jul 20, 2024 · 4177153 · 4177153
1 parent 6a13049
commit 4177153
Show file tree

Hide file tree

Showing 12 changed files with 268 additions and 258 deletions.
diff --git a/assets/css/orbit.min.css b/assets/css/orbit.min.css
diff --git a/assets/css/orbit.min.css.map b/assets/css/orbit.min.css.map
diff --git a/examples/orbit/index.html b/examples/orbit/index.html
@@ -1,141 +1,105 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../../dist/css/orbit.css">
-    <title>Document</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="../../dist/css/orbit.css">
+  <title>Document</title>
+  <style>
+    [class*="orbit-"] {
+     border: none
+    }
+    .connector[class*="orbit-"], .connector [class*="orbit-"] {
+      border: none !important
+    }
+    .connector  .label {
+      justify-content: flex-start;
+    }
+    .connector .satellite {
+      border: none;
+      background: none;
+
+    }
+    .connector .title {
+      border: 1px solid black;
+      background: none;
+      border-radius: 5%;
+      width: fit-content;
+      height: auto;
+    }
+  </style>
 </head>
+
 <body>
+
     <div class="orbital-zone">
-        <div class="orbit-6">
-          <div class="vector x5"></div>
-
-          <div class="vector "></div>
-          <div class="vector "></div>
-          <div class="vector "></div>
-          <div class="vector"></div>
-          <div class="vector"></div>
-
-          <div class="vector"></div>
-          <div class="vector"></div>
-          <div class="vector"></div>
-          <div class="vector"></div>
-          <div class="vector"></div>
-          <div class="vector"></div>
-        </div>
-        <div class="orbit-9 ">
-          <o-sector class=""></o-sector>
-          <o-sector class=""></o-sector>
-          <o-sector></o-sector>
-          <o-sector></o-sector>
-          <o-sector></o-sector>
-          <o-sector></o-sector>
-          <o-sector class=" "></o-sector>
-          <o-sector class=" "></o-sector>
-          <o-sector class=" "></o-sector>
-          <o-sector class=" "></o-sector>
-          <o-sector></o-sector>
-          <o-sector></o-sector>
-        </div>
-
-        <div class="orbit-5"></div>
-        <div class="orbit-9 " style="border: none;">
-          <div class="satellite">
-
-            <div class="orbital-zone">
-              <div class="orbit-12 "></div>
-            </div>
-          </div>
-          <div class="satellite ">
-            <div class="orbital-zone">
-              <div class="orbit-12 "></div>
-            </div>
-          </div>
-          <div class="satellite ">
-            <div class="orbital-zone">
-              <div class="orbit-12 "></div>
-            </div>
-          </div>
-          <div class="satellite ">
-            <div class="orbital-zone">
-              <div class="orbit-12 "></div>
-            </div>
-          </div>
-          <div class="satellite ">
-            <div class="orbital-zone">
-              <div class="orbit-12 "></div>
-            </div>
-          </div>
-          <div class="satellite ">
-            <div class="orbital-zone">
-              <div class="orbit-12 "></div>
-            </div>
-          </div>
-          <div class="satellite ">
-            <div class="orbital-zone">
-              <div class="orbit-12 "></div>
-            </div>
-          </div>
-          <div class="satellite ">
-            <div class="orbital-zone">
-              <div class="orbit-12 "></div>
-            </div>
-          </div>
-          <div class="satellite ">
-            <div class="orbital-zone">
-              <div class="orbit-12 "></div>
-            </div>
-          </div>
-          <div class="satellite ">
-            <div class="orbital-zone">
-              <div class="orbit-12 "></div>
-            </div>
-          </div>
-          <div class="satellite ">
-            <div class="orbital-zone">
-              <div class="orbit-12 "></div>
-            </div>
-          </div>
-          <div class="satellite ">
-            <div class="orbital-zone">
-              <div class="orbit-12 "></div>
+      <div class="orbit-4">
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="satellite">
+          <div class="orbital-zone">
+            <div class="orbit-12  connector">
+              <div class="vector x11"></div>
+              <div class="satellite" >
+                <div class="orbital-zone">
+                  <div class="orbit-1">
+                    <div class="satellite label">
+                      <div class="title">hola</div>
+                    </div>
+                  </div>
+               </div>
+              </div>
             </div>
           </div>
         </div>
-        <div class="orbit-8"></div>
-        <div class="orbit-10"></div>
+        <div class="satellite"></div>
+        <div class="satellite"></div>
+        <div class="satellite"></div>
+        <div class="satellite"></div>
+      </div>
+      <div class="orbit-6">
+        <div class="satellite"></div>
+        <div class="satellite"></div>
+        <div class="satellite angle-20"></div>
+        <div class="satellite"></div>
+        <div class="satellite"></div>
+      </div>
+      <div class="orbit-9 ">
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+        <div class="vector"></div>
+      </div>
+      <div class="orbit-9 range-180">
+        <o-sector></o-sector>
+        <o-sector class="gap5"></o-sector>
+
+        <o-sector></o-sector>
+        <o-sector></o-sector>
+      </div>
+      <div class="orbit-11">
+        <o-progress value="12.999" max="50" max-angle="45"></o-progress>
 
-        <div class="orbit-11">
-          <o-progress class="x2 rounded" style="--o-progress: 20"></o-progress>
-        </div>
-        <div class="orbit-12">
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-          <div class="satellite"></div>
-        </div>
       </div>
-      <script src="../../src/components.js"></script>
+    </div>
+
+
+  <script src="../../src/components.js"></script>
 </body>
+
 </html>
diff --git a/src/_orbit.scss b/src/_orbit.scss
@@ -6,8 +6,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  --o-diameter: calc(var(--orbit-nth) * var(--o-lenght) / var(--max-orbits));
+  --o-diameter: calc(var(--orbit-nth) * var(--o-lenght) / var(--o-max-orbits));
   --o-radius: calc(var(--o-diameter) / 2);
-  width: calc(var(--o-diameter) / var(--ellipse-ratio-x));
-  height: calc(var(--o-diameter) / var(--ellipse-ratio-y));
+  width: calc(var(--o-diameter) / var(--o-ellipse-x));
+  height: calc(var(--o-diameter) / var(--o-ellipse-y));
 }
diff --git a/src/_orbital-zone.scss b/src/_orbital-zone.scss
@@ -1,6 +1,6 @@
 /* Orbital zone class */
 .orbital-zone {
-  --o-lenght: 300px;
+  --o-lenght: 500px;
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/src/_radial-layout.scss b/src/_radial-layout.scss
@@ -9,28 +9,22 @@
   border: 1px solid red;
 }
 @for $i from 1 through $max-orbits {
-    .orbit:nth-child(#{$i}), .orbit-#{$i} {
+    :nth-child(#{$i} of .orbit), .orbit-#{$i} {
     --orbit-nth: #{$i};
     }
 }
 
 /* Satellites, sectors and vectors layout */
 
 @for $i from 1 through $max-orbiters {
-    .satellite:nth-child(#{$i}), o-sector:nth-child(#{$i}), .vector:nth-child(#{$i}) {
-    --sat-number: #{$i};
+    :nth-child(#{$i} of .satellite), :nth-child(#{$i} of o-sector), :nth-child(#{$i} of .vector) {
+    --o-position: #{$i};
     }
 }
 
 @for $i from 1 through $max-orbiters {
-    .satellite:nth-child(#{$i}), o-sector:nth-child(#{$i}), .vector:nth-child(#{$i}) {
-    --sat-number: #{$i};
-    }
-}
-
-@for $i from 1 through $max-orbiters {
-    .orbit:has(> .satellite:nth-child(#{$i}), > o-sector:nth-child(#{$i}), > .vector:nth-child(#{$i})),
-    [class*='orbit-']:has(> .satellite:nth-child(#{$i}), > o-sector:nth-child(#{$i}), > .vector:nth-child(#{$i})) {
-    --angle: calc(var(--range) / #{$i});
+    .orbit:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .vector)),
+    [class*='orbit-']:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .vector)) {
+    --o-angle: calc(var(--o-range) / #{$i});
     }
 }
diff --git a/src/_satellite.scss b/src/_satellite.scss
@@ -1,5 +1,6 @@
 /* Satellite class */
 .satellite {
+  --o-angle-composite: var(--o-angle) * var(--o-position);
   width: 5px; /* Adjust satellite size */
   height: 5px; /* Adjust satellite size */
   background-color: yellow; /* Adjust satellite color */
@@ -11,12 +12,12 @@
   align-items: center;
   transform: translate(
     calc(
-      var(--o-radius) / var(--ellipse-ratio-x) *
-        cos(var(--begin-at) + var(--angle) * var(--sat-number))
+      var(--o-radius) / var(--o-ellipse-x) *
+        cos(var(--o-begin-at) + var(--o-angle-composite))
     ),
     calc(
-      var(--o-radius) / var(--ellipse-ratio-y) *
-        sin(var(--begin-at) + var(--angle) * var(--sat-number))
+      var(--o-radius) / var(--o-ellipse-y) *
+        sin(var(--o-begin-at) + var(--o-angle-composite))
     )
   );
 }

diff --git a/src/_sector.scss b/src/_sector.scss
@@ -1,6 +1,8 @@
 @use './variables' as *;
 /* Sector class */
 o-sector {
+  --o-angle-composite: var(--o-angle) * var(--o-position);
+  ---o-width-factor: 1;
   container-name: sectors;
   display: flex;
   justify-content: center;
@@ -9,14 +11,13 @@ o-sector {
   position: absolute;
   pointer-events: none;
   width: 100%;
-  transform: rotate(calc((var(--begin-at) + var(--angle) * var(--sat-number))));
-  ---o-width-factor: 1;
+  transform: rotate(calc(var(--o-begin-at) + var(--o-angle-composite)));
 }
 
 o-sector svg path {
   display: none;
 }
-@container sectors style(--ellipse-ratio-x: 1) and style(--ellipse-ratio-y: 1) {
+@container sectors style(--o-ellipse-x: 1) and style(--o-ellipse-y: 1) {
   /* Conditional render sector if ratio equals 1*/
   o-sector svg path {
     display: block;
@@ -40,3 +41,4 @@ o-sector path:hover {
   stroke: red;
   cursor: pointer;
 }
+
diff --git a/src/_settings.scss b/src/_settings.scss
@@ -1,10 +1,10 @@
 @use './variables'  as *;
 :root {
-  --max-orbits: #{$max-orbits};
-  --begin-at: 0deg;
-  --range: 360deg;
-  --ellipse-ratio-x: 1;
-  --ellipse-ratio-y: 1;
+  --o-max-orbits: #{$max-orbits};
+  --o-begin-at: 0deg;
+  --o-range: 360deg;
+  --o-ellipse-x: 1;
+  --o-ellipse-y: 1;
 }
 
 * {