demo/menu.htm

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Context menu tests</title>
      <link rel="shortcut icon" href="../img/RootIcon.ico"/>
   </head>
   <body>
      <div id="drawing" style="width:800px; height:600px"></div>
   </body>
   <script type='module'>
      import { createMenu } from '../modules/gui/menu.mjs';

      function showMenu(evnt) {
         if (evnt?.preventDefault)
            evnt.preventDefault();

         createMenu(evnt).then(menu => {
            for (let ncol = 0; ncol < 3; ncol++) {

               menu.add('column:');

               for (let n = 0; n < 10; n++)
                  menu.add(`item_${ncol}_${n}`, arg => console.log(`click ${arg}`));

               menu.add('endcolumn:');
            }

            menu.show();
         });

      }

      showMenu({ clientX: 20, clientY: 20 });

      document.addEventListener('contextmenu', showMenu);

   </script>
</html>