<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/@mulsense/xnew@0.2.x/dist/xnew.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="relative m-0 p-0 w-full h-screen overflow-hidden">
<div id="main" class="relative w-full h-full"></div>
<script>
xnew('#main', (unit) => {
const screen = xnew(xnew.basics.Screen, { width: 512, height: 512 });
const button = xnew('<button class="absolute top-0 m-2 px-2 border rounded-lg cursor-pointer hover:bg-gray-300">', 'reset');
const canvas = screen.canvas;
const context = canvas.getContext('2d');
button.on('click', () => {
context.fillStyle = "rgb(0,0,0)";
context.fillRect(0, 0, canvas.width, canvas.height);
});
context.fillStyle = "rgb(0,0,0)";
context.fillRect(0, 0, canvas.width, canvas.height);
const pointer = xnew(screen.element, xnew.basics.PointerEvent);
pointer.on('-dragstart -dragmove', ({ position, delta }) => {
const scaleX = canvas.width / canvas.clientWidth;
const scaleY = canvas.height / canvas.clientHeight;
context.beginPath();
context.fillStyle = 'white';
if (delta) {
const length = Math.sqrt(delta.x * delta.x + delta.y * delta.y);
for (let i = 0; i < length; i++) {
context.arc((position.x - delta.x * i / length) * scaleX, (position.y - delta.y * i / length) * scaleY, 1, 0, Math.PI * 2, true);
}
} else {
context.arc(position.x * scaleX, position.y * scaleY, 1, 0, Math.PI * 2, true);
}
context.fill();
});
xnew('<div class="absolute bottom-0 left-0 right-0">', () => {
const text1 = xnew('<div class="text-white text-lg text-center">', 'mouse over/out');
const text2 = xnew('<div class="text-white text-lg text-center">', 'pointer');
const text3 = xnew('<div class="text-white text-lg text-center">', 'drag');
pointer.on('-mouseover', ({ position }) => {
text1.element.textContent = `-mouseover {x:${position.x}, y:${position.y}}`;
});
pointer.on('-mouseout', ({ position }) => {
text1.element.textContent = `-mouseout {x:${position.x}, y:${position.y}}`;
});
pointer.on('-pointerdown', ({ position }) => {
text2.element.textContent = `-pointerdown {x:${Math.floor(position.x)}, y:${Math.floor(position.y)}}`;
});
pointer.on('-pointermove', ({ position }) => {
text2.element.textContent = `-pointermove {x:${Math.floor(position.x)}, y:${Math.floor(position.y)}}`;
});
pointer.on('-pointerup', ({ position }) => {
text2.element.textContent = `-pointerup {x:${Math.floor(position.x)}, y:${Math.floor(position.y)}}`;
});
pointer.on('-dragstart', ({ position }) => {
text3.element.textContent = `-dragstart {x:${Math.floor(position.x)}, y:${Math.floor(position.y)}}`;
});
pointer.on('-dragmove', ({ position, delta }) => {
text3.element.textContent = `-dragmove: {x:${Math.floor(position.x)}, y:${Math.floor(position.y)}} delta {x:${Math.floor(delta.x)}, y:${Math.floor(delta.y)}}`;
});
pointer.on('-dragend', ({ position }) => {
text3.element.textContent = `-dragend: {x:${Math.floor(position.x)}, y:${Math.floor(position.y)}}`;
});
})
});
</script>
</body>
</html>