= (props: {}) => {
+ console.log('rendering viewport');
+ const [shift, setShift] = useState({ x: 1000, y: 1000 });
+
+ const initialMouseState = {
+ down: false,
+ starting: { x: -1, y: -1 },
+ };
+ const [mouseState, setMouseState] = useState(initialMouseState);
+
+ console.log('mouseState: ' + JSON.stringify(mouseState));
+
+ const genericHandler = (event: any) => {
+ console.log('Log - Event: ' + event.type);
+ };
+
+ const mouseDownHandler = (event: any) => {
+ 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);
+ };
+
+ const mouseMoveHandler = (event: any) => {
+ event.preventDefault();
+ if (mouseState.down) {
+ console.log('Log - Moving...' + event.pageX);
+ genericHandler(event);
+ 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,
+ },
+ }));
+ }
+ };
+
+ const throtteledMouseMoveHandler = useMemo(
+ () => _.throttle(mouseMoveHandler, 100),
+ undefined
+ );
+
+ return (
+
+
+
+ );
+};
+
+export default Viewport;
diff --git a/background-move/src/theme/viewport.css b/background-move/src/theme/viewport.css
new file mode 100644
index 0000000..a5b031e
--- /dev/null
+++ b/background-move/src/theme/viewport.css
@@ -0,0 +1,5 @@
+.viewport {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+}
\ No newline at end of file