add transitions to cursors for smoothing

This commit is contained in:
KDSBrowne 2023-11-08 00:20:59 +00:00
parent 693183291d
commit c7149c931b

View File

@ -25,19 +25,22 @@ const Cursor = (props) => {
_y = (y + tldrawCamera?.point[1]) * tldrawCamera?.zoom; _y = (y + tldrawCamera?.point[1]) * tldrawCamera?.zoom;
} }
const transitionStyle = owner ? { transition: 'left 0.3s ease-out, top 0.3s ease-out' } : {};
return ( return (
<> <>
<div <div
style={{ style={{
zIndex: z, zIndex: z,
position: 'absolute', position: 'absolute',
left: (_x || x) - pointerDiameter/2, left: (_x || x) - pointerDiameter / 2,
top: (_y || y) - pointerDiameter/2, top: (_y || y) - pointerDiameter / 2,
width: pointerDiameter, width: pointerDiameter,
height: pointerDiameter, height: pointerDiameter,
borderRadius: '50%', borderRadius: '50%',
background: `${color}`, background: `${color}`,
pointerEvents: 'none', pointerEvents: 'none',
...transitionStyle,
}} }}
/> />
@ -57,6 +60,7 @@ const Cursor = (props) => {
color: '#FFF', color: '#FFF',
backgroundColor: color, backgroundColor: color,
border: `1px solid ${color}`, border: `1px solid ${color}`,
...transitionStyle,
}} }}
data-test="whiteboardCursorIndicator" data-test="whiteboardCursorIndicator"
> >