diff --git a/src/components/viewport.tsx b/src/components/viewport.tsx
index 456db18..db7a547 100644
--- a/src/components/viewport.tsx
+++ b/src/components/viewport.tsx
@@ -1,6 +1,5 @@
-import react, { useCallback, useState } from 'react';
-
-import _, { constant } from 'lodash';
+import react from 'react';
+import { useSelector } from 'react-redux';
import MouseHandler from './mouse-handler';
import Layer from './layer';
@@ -25,12 +24,6 @@ export interface Scale {
};
}
-export type Transformation = Translation | Scale;
-
-// const transform1: Transformation = { translate: { x: 0, y: 1 } };
-// const transform2: Transformation = {
-// scale: { center: { x: 10, y: 20 }, factor: 2 },
-// };
interface ViewportProps {
children: any;
@@ -44,51 +37,15 @@ export interface ViewportState {
const Viewport: react.FC
= (props: ViewportProps) => {
//console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
- const initialState: ViewportState = { scale: 1, translation: { x: 0, y: 0 } };
-
- const [state, setState] = useState(initialState);
-
- const genericHandler = (event: any) => {
- console.log('Log - Event: ' + event.type);
- return;
- };
-
- const applyTransformations = (transformations: Transformation[]) => {
- const newState = transformations.reduce(
- (previousState: ViewportState, transformation): ViewportState => {
- if ('scale' in transformation) {
- return {
- scale: previousState.scale * transformation.scale.factor,
- translation: {
- x:
- previousState.translation.x +
- (previousState.translation.x - transformation.scale.center.x) *
- (transformation.scale.factor - 1),
- y:
- previousState.translation.y +
- (previousState.translation.y - transformation.scale.center.y) *
- (transformation.scale.factor - 1),
- },
- };
- }
- return {
- scale: previousState.scale,
- translation: {
- x: previousState.translation.x + transformation.translate.x,
- y: previousState.translation.y + transformation.translate.y,
- },
- };
- },
- state
- );
- setState(newState);
- };
+ const state = useSelector(
+ (globalState: { slippy: ViewportState }) => globalState.slippy
+ );
return (
-
-
-
+
+
+
{props.children}
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..4ce069e
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+import slippyReducer from './slippy';
+import mouseHandlerReducer from './mouse-handler';
+
+const store = configureStore({
+ reducer: { slippy: slippyReducer, mouseHandler: mouseHandlerReducer },
+});
+
+export default store;
diff --git a/src/store/mouse-handler.ts b/src/store/mouse-handler.ts
new file mode 100644
index 0000000..d9631e5
--- /dev/null
+++ b/src/store/mouse-handler.ts
@@ -0,0 +1,25 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+
+const initialMouseState = {
+ down: false,
+ starting: { x: -1, y: -1 },
+ timestamp:0,
+ };
+
+const mouseHandlerSlice = createSlice({
+ name: 'mouseHandler',
+ initialState: initialMouseState,
+ reducers: {
+ init(state) {
+ return initialMouseState;
+ },
+ set(state, action) {
+ return action.payload;
+ },
+ },
+});
+
+export const mouseHandlerActions = mouseHandlerSlice.actions;
+
+export default mouseHandlerSlice.reducer;
\ No newline at end of file
diff --git a/src/store/slippy.ts b/src/store/slippy.ts
new file mode 100644
index 0000000..cdaf9f7
--- /dev/null
+++ b/src/store/slippy.ts
@@ -0,0 +1,35 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import { ViewportState } from '../components/viewport';
+
+const initialSlippyState: ViewportState = {
+ scale: 1,
+ translation: { x: 0, y: 0 },
+};
+
+const slippySlice = createSlice({
+ name: 'slippy',
+ initialState: initialSlippyState,
+ reducers: {
+ scale(state, action) {
+ state.scale = state.scale * action.payload.factor;
+ state.translation.x =
+ state.translation.x +
+ (state.translation.x - action.payload.center.x) *
+ (action.payload.factor - 1);
+ state.translation.y =
+ state.translation.y +
+ (state.translation.y - action.payload.center.y) *
+ (action.payload.factor - 1);
+ },
+ translate(state, action) {
+ console.log(`translate: action=${JSON.stringify(action)}`);
+ state.translation.x = state.translation.x + action.payload.x;
+ state.translation.y = state.translation.y + action.payload.y;
+ },
+ },
+});
+
+export const slippyActions = slippySlice.actions;
+
+export default slippySlice.reducer;