function createMenuItems()

in frontend/src/lib/cytoscape-cxtmenu/cxtmenu.js [87:145]


  function createMenuItems() {
    removeEles('.cxtmenu-item', parent);
    const dtheta = 2 * Math.PI / (commands.length);
    let theta1 = Math.PI / 2;
    let theta2 = theta1 + dtheta;

    for (let i = 0; i < commands.length; i++) {
      const command = commands[i];

      const midtheta = (theta1 + theta2) / 2;
      const rx1 = 0.66 * r * Math.cos(midtheta);
      const ry1 = 0.66 * r * Math.sin(midtheta);

      const item = createElement({ class: 'cxtmenu-item' });
      setStyles(item, {
        color: options.itemColor,
        cursor: 'default',
        display: 'table',
        'text-align': 'center',
        // background: 'red',
        position: 'absolute',
        'text-shadow': `-1px -1px 2px ${options.itemTextShadowColor}, 1px -1px 2px ${options.itemTextShadowColor}, -1px 1px 2px ${options.itemTextShadowColor}, 1px 1px 1px ${options.itemTextShadowColor}`,
        left: '50%',
        top: '50%',
        'min-height': `${r * 0.66}px`,
        width: `${r * 0.66}px`,
        height: `${r * 0.66}px`,
        marginLeft: `${rx1 - r * 0.33}px`,
        marginTop: `${-ry1 - r * 0.33}px`,
      });

      const content = createElement({ class: 'cxtmenu-content' });

      if (command.content instanceof HTMLElement) {
        content.appendChild(command.content);
      } else {
        content.innerHTML = command.content;
      }

      setStyles(content, {
        width: `${r * 0.66}px`,
        height: `${r * 0.66}px`,
        'vertical-align': 'middle',
        display: 'table-cell',
      });

      setStyles(content, command.contentStyle || {});

      if (command.disabled === true || command.enabled === false) {
        content.setAttribute('class', 'cxtmenu-content cxtmenu-disabled');
      }

      parent.appendChild(item);
      item.appendChild(content);

      theta1 += dtheta;
      theta2 += dtheta;
    }
  }