Custom start angle

[squirelo]

Hi,

I would like to know if there is a way to define a custom start angle to set the position of the first item at a specific radius.

Thx a lot for your work

[spaceymonk]

Hi, Unfortunately, you cannot give custom start angles. Best you can do is that apply rotation to menu and re-order the MenuItem components.

You can implement rotation using CSS:

:root {
  --__reactRadialMenu__rotate: 45deg;
}
.__rrm-menu {
  rotate: var(--__reactRadialMenu__rotate);
}
.__rrm-content {
  rotate: calc(-1 * var(--__reactRadialMenu__rotate));
}

Results in:

Then, if necessary, you can handle the amount of rotation programmatically:

document.documentElement.style.setProperty("--__reactRadialMenu__rotate", "60deg");

Here is an another example using display: hide on certain MenuItem and rotation of -90deg to customize the look of the menu:

.hide {
  display: none;
}

 <Menu
    centerX={position.x}
    centerY={position.y}
    innerRadius={40}
    outerRadius={150}
    show={show}
    animation={["fade", "scale"]}
    animationTimeout={300}
    theme="dark"
    drawBackground
    animateSubMenuChange
    >
    <MenuItem onItemClick={handleItemClick} data="1. Item"> 1. Item </MenuItem>
    <MenuItem onItemClick={handleItemClick} data="dummy" className="hide">
      Dummy item will not show up
    </MenuItem>

    <SubMenu
      onDisplayClick={handleDisplayClick}
      onItemClick={handleSubMenuClick}
      itemView="2. Sub Menu"
      data="2. Sub Menu"
      displayPosition="center"
    >
    {/* ... */}

[squirelo]

Awesome thank you!