fix bug arc shape and arc angle

zumerlab · May 18, 2023 · dbd25cf · dbd25cf
1 parent 1f7c14a
commit dbd25cf
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/examples/arcgrid.html b/examples/arcgrid.html
@@ -15,9 +15,9 @@
   <body>
     <div class="z-container" >
       <div class="core items-1">
-        <div class="item s" style="transform: translate(-50%, -50%);"></div>
+        <div class="item xs" style="transform: translate(-50%, -50%);"></div>
       </div>
-      <div class="ring-2 items-6">
+      <div class="ring-2 items-6 arc-90">
         <div class="arc"></div>
         <div class="arc"></div> 
         <div class="arc"></div>
@@ -40,8 +40,23 @@
         <div class="arc"></div>
         <div class="arc"></div>
         <div class="arc"></div> 
-        <div class="arc"><span>hola kjh kjh kjh k kjh kjh kjh </span></div>
+        <div class="arc"></div>
+      </div>
+    </div>
+    <div class="z-container" >
+      <div class="core items-1">
+        <div class="item xs" style="transform: translate(-50%, -50%);"></div>
+      </div>
+      <div class="ring-1 items-6">
+        <div class="arc"></div>
+        <div class="arc"></div> 
+        <div class="arc"></div>
+        <div class="arc"></div>
+        <div class="arc"></div> 
+        <div class="arc"></div>
       </div>
+
+
     </div>
   </body>
 

diff --git a/src/_radial-grid.scss b/src/_radial-grid.scss
@@ -66,7 +66,8 @@
   @each $arc,
   $value in $arcs {
     .items-#{$i}.#{$arc}>.arc {
-      --angle: calc((var(--arc) / #{$i - 1})  * var(--direction));
+      // No hay que restar un angulo debido a la forma del arco
+      --angle: calc((var(--arc) / #{$i})  * var(--direction));
     }
   }
 }
@@ -120,7 +121,8 @@
     --length: calc(var(--radius-#{$i})*2);
     --half: calc(var(--length)/2);
     --quarter: calc(var(--half)/2);
-    transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(var(--quarter), 0);
+    // ademas del offset el angulo debe dividirse por 2, distinto de item
+    transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - (var(--angle)/2)) * 1deg)) translate(var(--quarter), 0);
     --semi: calc(var(--angle) / 2 * 1deg);
     --arc-gap: 1px;
     --length-percent: calc(var(--half) + var(--arc-gap) - var(--half) * tan(var(--semi)));