jarek-foksa/full_example.html

## full_example.html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="node_modules/xel/themes/material.css">
    <script src="node_modules/xel/xel.min.js"></script>
    <style>
        body, html{
          height: 100%;
          width: 100%;
        }
    </style>
    <title>Test</title>
</head>
<body>
  <x-menu id="context-menu">
    <x-menuitem value="undo">
        <x-label>Undo</x-label>
    </x-menuitem>

    <x-menuitem value="redo">
        <x-label>Redo</x-label>
    </x-menuitem>
  </x-menu>
  <canvas id="canvas"></canvas>
  <script>
      let canvas = document.querySelector("#canvas");
      let contextMenu = document.querySelector("#context-menu");

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      canvas.addEventListener("contextmenu", (event) => {
        event.preventDefault();
        contextMenu.openAtPoint(event.clientX, event.clientY);
      });

      canvas.addEventListener("click", () => {
        if (contextMenu.opened) {
          contextMenu.close();
        }
      });

      contextMenu.addEventListener("click", async (event) => {
        let item = event.target.closest("x-menuitem");

        if (item) {
          console.log("Clicked menu item: ", item.value);
          await item.whenTriggerEnd;
          contextMenu.close();
        }
      });

      canvas.addEventListener("pointermove", () => {
        console.log("Moved pointer");
      });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="node_modules/xel/themes/material.css">
	<script src="node_modules/xel/xel.min.js"></script>
	<style>
	body, html{
	height: 100%;
	width: 100%;
	}
	</style>
	<title>Test</title>
	</head>
	<body>
	<x-menu id="context-menu">
	<x-menuitem value="undo">
	<x-label>Undo</x-label>
	</x-menuitem>

	<x-menuitem value="redo">
	<x-label>Redo</x-label>
	</x-menuitem>
	</x-menu>
	<canvas id="canvas"></canvas>
	<script>
	let canvas = document.querySelector("#canvas");
	let contextMenu = document.querySelector("#context-menu");

	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	canvas.addEventListener("contextmenu", (event) => {
	event.preventDefault();
	contextMenu.openAtPoint(event.clientX, event.clientY);
	});

	canvas.addEventListener("click", () => {
	if (contextMenu.opened) {
	contextMenu.close();
	}
	});

	contextMenu.addEventListener("click", async (event) => {
	let item = event.target.closest("x-menuitem");

	if (item) {
	console.log("Clicked menu item: ", item.value);
	await item.whenTriggerEnd;
	contextMenu.close();
	}
	});

	canvas.addEventListener("pointermove", () => {
	console.log("Moved pointer");
	});
	</script>
	</body>
	</html>