hammerjs

document.addEventListener('DOMContentLoaded', () => { const stage = document.getElementById('stage'); if (!stage) { console.error('Element with ID "stage" not found.'); return; } // Create a manager for that element const mc = new Hammer.Manager(stage); // Create a recognizer for rotation const rotateRecognizer = new Hammer.Rotate(); // Add the recognizer to the manager and enable it (pinch and rotate are often disabled by default) mc.add(rotateRecognizer); mc.get('rotate').set({ enable: true }); // Subscribe to the rotate event mc.on('rotate', function(e) { const rotation = Math.round(e.rotation); stage.style.transform = `rotate(${rotation}deg)`; console.log(`Rotation: ${rotation} degrees`); }); // Example for a simple tap recognizer const tapRecognizer = new Hammer.Tap(); mc.add(tapRecognizer); mc.on('tap', function(e) { console.log('Tap detected!', e.target); e.target.style.backgroundColor = 'lightblue'; setTimeout(() => e.target.style.backgroundColor = 'transparent', 200); }); // Enable pinch and pan for demonstration, if desired mc.get('pinch').set({ enable: true }); mc.get('pan').set({ direction: Hammer.DIRECTION_ALL }); console.log('Hammer.js initialized on #stage.'); });