diff --git a/src/components/Flippable.tsx b/src/components/Flippable.tsx index 8376dc6..4ad2c6d 100644 --- a/src/components/Flippable.tsx +++ b/src/components/Flippable.tsx @@ -53,7 +53,6 @@ export const Flippable: React.FC = ({ width: 100%; height: 100%; transform-style: preserve-3d; - cursor: pointer; transition: rotate 0.6s cubic-bezier(0.4, 0, 0.2, 1); rotate: ${isFlipped ? "y 180deg" : "y 0deg"}; diff --git a/src/draggable.attempts/6/Draggable.ts b/src/draggable.attempts/6/Draggable.ts index 37044d9..d0f3480 100644 --- a/src/draggable.attempts/6/Draggable.ts +++ b/src/draggable.attempts/6/Draggable.ts @@ -88,6 +88,7 @@ export function makeDraggable(card: HTMLElement, opts: DraggableOpts = {}) { state.dragging = true; activePointerId = e.pointerId; card.style.cursor = "grabbing"; + document.body.style.cursor = "grabbing"; velocity = { x: 0, y: 0 }; const dx = e.pageX - center.x; @@ -153,6 +154,7 @@ export function makeDraggable(card: HTMLElement, opts: DraggableOpts = {}) { const cancel = () => { state.dragging = false; activePointerId = null; + document.body.style.cursor = ""; card.style.cursor = "grab"; document.body.style.userSelect = "auto"; document.body.style.webkitUserSelect = "auto"; @@ -246,27 +248,25 @@ export function makeDraggable(card: HTMLElement, opts: DraggableOpts = {}) { card.style.touchAction = "none"; card.style.transform = `translate(0px, 0px) rotate(${rotation}rad)`; + card.style.willChange = "transform"; - card.addEventListener("pointerdown", down, { passive: true }); - window.addEventListener("pointermove", move, { passive: true }); - window.addEventListener("pointerup", up, { passive: true }); - window.addEventListener("pointercancel", up, { passive: true }); - window.addEventListener("blur", up, { passive: true }); - window.addEventListener("keydown", up, { passive: true }); + const abort = new AbortController(); + const evtOpts = { passive: true, signal: abort.signal }; + + card.addEventListener("pointerdown", down, evtOpts); + window.addEventListener("pointermove", move, evtOpts); + window.addEventListener("pointerup", up, evtOpts); + window.addEventListener("pointercancel", up, evtOpts); + window.addEventListener("blur", up, evtOpts); + window.addEventListener("keydown", up, evtOpts); window.addEventListener("resize", handleResize); render(); return function cleanup() { + abort.abort(); if (animationFrameId !== null) cancelAnimationFrame(animationFrameId); - card.removeEventListener("pointerdown", down); - window.removeEventListener("pointermove", move); - window.removeEventListener("pointerup", up); - window.removeEventListener("pointercancel", up); - window.removeEventListener("blur", up); - window.removeEventListener("keydown", up); - window.removeEventListener("resize", handleResize); - card.style.cursor = ""; + document.body.style.cursor = ""; card.style.touchAction = ""; card.style.userSelect = ""; };