Wheel Menu - Dynamically rows-CodePudding

I have a wheel menu in css/js and currently I have 8 menu elements. But I want 6 or 12 menu elements. I am tried few hours, but it's not working perfectly, when I add more or delete some div elements, it's buggy. How I can do it?

https://jsfiddle.net/b9f4x8d2/

I need help with this

function onm ouseMove({ clientX: x, clientY: y }) {
                    if (!showing) return;
    
                    let dx = x - anchorX;
                    let dy = y - anchorY;
                    let mag = Math.sqrt(dx * dx   dy * dy);
                    let index = 0;
    
                    if (mag >= min) {
                        let deg = Math.atan2(dy, dx)   0.625 * Math.PI;
                        while (deg < 0) deg  = Math.PI * 2;
                        index = Math.floor(deg / Math.PI * 4)   1;
                    }
    
                    wheel.setAttribute('data-chosen', index);
                }

and this part:

-webkit-clip-path: polygon(0 0, 0 99%, 99% 0);
                    clip-path: polygon(0 0, 0 99%, 99% 0);

CodePudding user response：

This suggestion requires additional modifications, but it may provide a start. It changes from 8 selections to 6.

The following are modifications to your fiddle code and are NOT intended to be executed here.

  const listeners = {
    1: () => {

    },
    2: () => {
            
    },
    3: () => {
            
    },
    4: () => {
            
    },
    5: () => {
            
    },
    6: () => {
            
    }
  };

 .wheel .arc:nth-child(1) img {
   --rotation: 30deg;
   transform: scale(1) rotate(var(--rotation)) !important;
 }
    
 .wheel .arc:nth-child(2) img {
   --rotation: -30deg;
   transform: scale(1) rotate(var(--rotation)) !important;
 }
    
 .wheel .arc:nth-child(3) img {
   --rotation: -90deg;
   transform: scale(1) rotate(var(--rotation)) !important;
 }
    
 .wheel .arc:nth-child(4) img {
   --rotation: -150deg;
   transform: scale(1) rotate(var(--rotation)) !important;
 }
    
 .wheel .arc:nth-child(5) img {
   --rotation: -210deg;
   transform: scale(1) rotate(var(--rotation)) !important;
 }
    
 .wheel .arc:nth-child(6) img {
   --rotation: -270deg;
   transform: scale(1) rotate(var(--rotation)) !important;
 }
    
 .wheel[data-chosen="1"] .arc:nth-child(1),
 .wheel[data-chosen="2"] .arc:nth-child(2),
 .wheel[data-chosen="3"] .arc:nth-child(3),
 .wheel[data-chosen="4"] .arc:nth-child(4),
 .wheel[data-chosen="5"] .arc:nth-child(5),
 .wheel[data-chosen="6"] .arc:nth-child(6) {
   opacity: 1;
   transform: scale(1.1) rotate(var(--rotation)) !important;
   filter: brightness(150%);
 }

 .wheel .arc:nth-child(1) {   --rotation: -30deg; }
 .wheel .arc:nth-child(2) {   --rotation:  30deg; }
 .wheel .arc:nth-child(3) {   --rotation:  90deg; }
 .wheel .arc:nth-child(4) {   --rotation: 150deg; }
 .wheel .arc:nth-child(5) {   --rotation: 210deg; }
 .wheel .arc:nth-child(6) {   --rotation: 270deg; }

<div >
  <div > Directory <br>Listing
  </div>
  <div > Test 2
  </div>
  <div > Test 3
  </div>
  <div > Test 4
  </div>
  <div > Test 5
  </div>
  <div > Test 6
  </div>
</div>