enhance: use cursor

tldraw/packages/react/src/hooks/useCursor.ts

@@ -1,5 +1,4 @@
 import { GeomUtils, TLCursor } from '@tldraw/core'
-import { useApp } from './useApp'
 import * as React from 'react'
 
 
@@ -45,11 +44,9 @@ const CURSORS: Record<TLCursor, (r: number, f?: boolean) => string> = {
 }
 
 export function useCursor(ref: React.RefObject<HTMLDivElement>, cursor: TLCursor, rotation = 0) {
-  const app = useApp()
-
   React.useEffect(() => {
     const elm = ref.current
-    if (!elm || app.currentState.id === 'move') return
-    elm.style.setProperty('--tl-cursor', CURSORS[cursor](GeomUtils.radiansToDegrees(rotation)))
+    if (!elm) return
+    elm.style.cursor = CURSORS[cursor](GeomUtils.radiansToDegrees(rotation))
   }, [cursor, rotation])
 }

tldraw/packages/react/src/hooks/useStylesheet.ts

@@ -79,7 +79,6 @@ const defaultTheme: TLTheme = {
 
 const tlcss = css`
   .tl-container {
-    --tl-cursor: inherit;
     --tl-zoom: 1;
     --tl-scale: calc(1 / var(--tl-zoom));
     --tl-padding: 64px;
@@ -116,7 +115,7 @@ const tlcss = css`
     touch-action: none;
     overscroll-behavior: none;
     background-color: var(--tl-background);
-    cursor: var(--tl-cursor) !important;
+    cursor: inherit;
     box-sizing: border-box;
     color: var(--tl-foreground);
     -webkit-user-select: none;