|
|
@@ -1,32 +1,34 @@
|
|
|
-import React, { useEffect } from 'react';
|
|
|
+import React, { useEffect, useState } from 'react';
|
|
|
|
|
|
-import Cursor from '../components/Cursor';
|
|
|
-import useCursorPosition from '../hooks/useCursorPosition';
|
|
|
+import CursorImage from '../components/Cursor';
|
|
|
|
|
|
import useStore from '../store';
|
|
|
|
|
|
const InsertCursor = () => {
|
|
|
const [{ toolState }] = useStore();
|
|
|
- const [cursorPosition, setRef] = useCursorPosition(25);
|
|
|
+ const [position, setPosition] = useState({ x: 0, y: 0 });
|
|
|
+
|
|
|
+ const getMousePosition = (event: any) => {
|
|
|
+ setPosition({
|
|
|
+ x: event.clientX,
|
|
|
+ y: event.clientY,
|
|
|
+ });
|
|
|
+ };
|
|
|
|
|
|
useEffect(() => {
|
|
|
const viewer = document.getElementById('pdf_viewer') as HTMLDivElement;
|
|
|
|
|
|
if (toolState && viewer) {
|
|
|
- setRef(viewer);
|
|
|
+ viewer.addEventListener('mousemove', getMousePosition);
|
|
|
viewer.style.cursor = 'crosshair';
|
|
|
} else if (viewer) {
|
|
|
- setRef(null);
|
|
|
+ viewer.removeEventListener('mousemove', getMousePosition);
|
|
|
viewer.style.cursor = 'auto';
|
|
|
}
|
|
|
}, [toolState]);
|
|
|
|
|
|
return ['textfield', 'checkbox', 'radio'].includes(toolState) ? (
|
|
|
- <Cursor
|
|
|
- x={cursorPosition.clientX || -1000}
|
|
|
- y={cursorPosition.clientY || -1000}
|
|
|
- appearance={toolState}
|
|
|
- />
|
|
|
+ <CursorImage x={position.x} y={position.y} appearance={toolState} />
|
|
|
) : null;
|
|
|
};
|
|
|
|
