diff --git a/background-move/src/components/background.tsx b/background-move/src/components/background.tsx
index c2ae928..38b4eba 100644
--- a/background-move/src/components/background.tsx
+++ b/background-move/src/components/background.tsx
@@ -5,7 +5,7 @@ import '../theme/background.css';
const Background: react.FC<{ shift: { x: number; y: number } }> = (props: {
shift: { x: number; y: number };
}) => {
- console.log('rendering background');
+ console.log(`--- Rendering background, props: ${JSON.stringify(props)} ---`);
return (
= (props: {}) => {
- console.log('rendering viewport');
+ console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
+
const [shift, setShift] = useState({ x: 1000, y: 1000 });
const initialMouseState = {
@@ -16,50 +17,64 @@ const Viewport: react.FC<{}> = (props: {}) => {
};
const [mouseState, setMouseState] = useState(initialMouseState);
- console.log('mouseState: ' + JSON.stringify(mouseState));
+ console.log('viewport, mouseState: ' + JSON.stringify(mouseState));
const genericHandler = (event: any) => {
console.log('Log - Event: ' + event.type);
+ console.log(`Mouse : ${event.pageX}, ${event.pageY}`);
+ console.log('mouseState: ' + JSON.stringify(mouseState));
};
+ // TODO: implement resize and focusout or blur events
+ // TODO: check boundaries
+
const mouseDownHandler = (event: any) => {
+ genericHandler(event);
event.preventDefault();
setMouseState({
down: true,
starting: { x: event.pageX, y: event.pageY },
});
- genericHandler(event);
};
const mouseUpHandler = (event: any) => {
- event.preventDefault();
- console.log('Log - Up, now do something ! ');
- setMouseState(initialMouseState);
genericHandler(event);
+ event.preventDefault();
+ setMouseState(initialMouseState);
};
const mouseMoveHandler = (event: any) => {
event.preventDefault();
if (mouseState.down) {
- console.log('Log - Moving...' + event.pageX);
genericHandler(event);
- setShift((shift) => ({
+ // setShift((shift) => ({
+ // x: shift.x + (mouseState.starting.x - event.pageX),
+ // y: shift.y + (mouseState.starting.y - event.pageY),
+ // }));
+ // setMouseState((mouseState) => ({
+ // down: true,
+ // starting: {
+ // x: event.pageX,
+ // y: event.pageY,
+ // },
+ // }));
+ setShift({
x: shift.x + (mouseState.starting.x - event.pageX),
y: shift.y + (mouseState.starting.y - event.pageY),
- }));
- setMouseState((mouseState) => ({
+ });
+ setMouseState({
down: true,
starting: {
x: event.pageX,
y: event.pageY,
},
- }));
+ });
}
};
- const throtteledMouseMoveHandler = useMemo(
- () => _.throttle(mouseMoveHandler, 100),
- undefined
+ const throtteledMouseMoveHandler = useCallback(
+ _.throttle(mouseMoveHandler, 50),
+ [mouseState.down]
);
return (