Using Redux to provide application wise slippy context.
This commit is contained in:
parent
716d05fb3e
commit
3421686f1f
|
|
@ -20,6 +20,7 @@
|
|||
"@capacitor/status-bar": "4.0.1",
|
||||
"@ionic/react": "^6.2.6",
|
||||
"@ionic/react-router": "^6.2.6",
|
||||
"@reduxjs/toolkit": "^1.8.5",
|
||||
"@testing-library/jest-dom": "^5.11.9",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
|
|
@ -36,6 +37,7 @@
|
|||
"lodash": "^4.17.21",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-redux": "^8.0.2",
|
||||
"react-router": "^6.3.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "^5.0.0",
|
||||
|
|
@ -3156,6 +3158,29 @@
|
|||
"prettier": ">=2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz",
|
||||
"integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==",
|
||||
"dependencies": {
|
||||
"immer": "^9.0.7",
|
||||
"redux": "^4.1.2",
|
||||
"redux-thunk": "^2.4.1",
|
||||
"reselect": "^4.1.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17.0.0 || ^18",
|
||||
"react-redux": "^7.2.1 || ^8.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
|
|
@ -4016,6 +4041,15 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
|
||||
"integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
|
||||
},
|
||||
"node_modules/@types/hoist-non-react-statics": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
|
||||
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
|
||||
"dependencies": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/html-minifier-terser": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
|
||||
|
|
@ -4265,6 +4299,11 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
|
||||
"integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
|
||||
},
|
||||
"node_modules/@types/use-sync-external-store": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
|
||||
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
|
||||
|
|
@ -9225,6 +9264,19 @@
|
|||
"@babel/runtime": "^7.7.6"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
|
|
@ -14235,6 +14287,49 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "8.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz",
|
||||
"integrity": "sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"@types/use-sync-external-store": "^0.0.3",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"react-is": "^18.0.0",
|
||||
"use-sync-external-store": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.8 || ^17.0 || ^18.0",
|
||||
"@types/react-dom": "^16.8 || ^17.0 || ^18.0",
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-native": ">=0.59",
|
||||
"redux": "^4"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
},
|
||||
"redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-redux/node_modules/react-is": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
|
|
@ -14547,6 +14642,22 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/redux": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
|
||||
"integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
|
||||
"integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
|
||||
"peerDependencies": {
|
||||
"redux": "^4"
|
||||
}
|
||||
},
|
||||
"node_modules/regenerate": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
|
||||
|
|
@ -14938,6 +15049,11 @@
|
|||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz",
|
||||
"integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ=="
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
|
||||
|
|
@ -16797,6 +16913,14 @@
|
|||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
|
@ -20104,6 +20228,17 @@
|
|||
"prettier": ">=2.3"
|
||||
}
|
||||
},
|
||||
"@reduxjs/toolkit": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz",
|
||||
"integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==",
|
||||
"requires": {
|
||||
"immer": "^9.0.7",
|
||||
"redux": "^4.1.2",
|
||||
"redux-thunk": "^2.4.1",
|
||||
"reselect": "^4.1.5"
|
||||
}
|
||||
},
|
||||
"@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
|
|
@ -20753,6 +20888,15 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
|
||||
"integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
|
||||
},
|
||||
"@types/hoist-non-react-statics": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
|
||||
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
|
||||
"requires": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"@types/html-minifier-terser": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
|
||||
|
|
@ -20998,6 +21142,11 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
|
||||
"integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
|
||||
},
|
||||
"@types/use-sync-external-store": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
|
||||
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
|
||||
},
|
||||
"@types/ws": {
|
||||
"version": "8.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
|
||||
|
|
@ -24610,6 +24759,21 @@
|
|||
"@babel/runtime": "^7.7.6"
|
||||
}
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
|
|
@ -28101,6 +28265,26 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"react-redux": {
|
||||
"version": "8.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz",
|
||||
"integrity": "sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"@types/use-sync-external-store": "^0.0.3",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"react-is": "^18.0.0",
|
||||
"use-sync-external-store": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
|
|
@ -28343,6 +28527,20 @@
|
|||
"strip-indent": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"redux": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
|
||||
"integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"redux-thunk": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
|
||||
"integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
|
||||
"requires": {}
|
||||
},
|
||||
"regenerate": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
|
||||
|
|
@ -28646,6 +28844,11 @@
|
|||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
|
||||
},
|
||||
"reselect": {
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz",
|
||||
"integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
|
||||
|
|
@ -30007,6 +30210,12 @@
|
|||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
|
||||
"requires": {}
|
||||
},
|
||||
"util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"@capacitor/status-bar": "4.0.1",
|
||||
"@ionic/react": "^6.2.6",
|
||||
"@ionic/react-router": "^6.2.6",
|
||||
"@reduxjs/toolkit": "^1.8.5",
|
||||
"@testing-library/jest-dom": "^5.11.9",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
|
|
@ -31,6 +32,7 @@
|
|||
"lodash": "^4.17.21",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-redux": "^8.0.2",
|
||||
"react-router": "^6.3.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "^5.0.0",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { IonApp, setupIonicReact } from '@ionic/react';
|
||||
import store from './store/index';
|
||||
import { Provider } from 'react-redux';
|
||||
|
||||
/* Core CSS required for Ionic components to work properly */
|
||||
import '@ionic/react/css/core.css';
|
||||
|
|
@ -25,7 +27,9 @@ setupIonicReact();
|
|||
|
||||
const App: React.FC = () => (
|
||||
<IonApp>
|
||||
<Map />
|
||||
<Provider store={store}>
|
||||
<Map />
|
||||
</Provider>
|
||||
</IonApp>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import react, { useCallback, useState } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import _ from 'lodash';
|
||||
|
||||
import { Transformation } from './viewport';
|
||||
import { slippyActions } from '../store/slippy';
|
||||
|
||||
interface DoubleTouchHandlerProps {
|
||||
applyTransformations: (transformations: Transformation[]) => void;
|
||||
children: any;
|
||||
}
|
||||
|
||||
const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
|
||||
props: DoubleTouchHandlerProps
|
||||
) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const initialTouchState = {
|
||||
state: 'up',
|
||||
touches: [
|
||||
|
|
@ -19,7 +21,7 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
|
|||
{ x: -1, y: -1 },
|
||||
],
|
||||
distance: -1,
|
||||
initialZoom: 1,
|
||||
timestamp: 0,
|
||||
};
|
||||
|
||||
const [touchState, setTouchState] = useState(initialTouchState);
|
||||
|
|
@ -41,7 +43,6 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
|
|||
};
|
||||
const touchCancelHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
throtteledTouchMoveHandler.cancel();
|
||||
setTouchState(initialTouchState);
|
||||
};
|
||||
|
||||
|
|
@ -58,7 +59,7 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
|
|||
(event.touches[0].pageX - event.touches[1].pageX) ** 2 +
|
||||
(event.touches[0].pageY - event.touches[1].pageY) ** 2
|
||||
),
|
||||
initialZoom: 1,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -66,11 +67,13 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
|
|||
const touchEndHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
setTouchState(initialTouchState);
|
||||
throtteledTouchMoveHandler.cancel();
|
||||
};
|
||||
};
|
||||
|
||||
const touchMoveHandler = (event: any) => {
|
||||
if (touchState.state === 'double') {
|
||||
if (
|
||||
(touchState.state === 'double') &&
|
||||
((Date.now() - touchState.timestamp) > 50)
|
||||
) {
|
||||
if (event.touches.length === 2) {
|
||||
genericHandler(event);
|
||||
const newDistance = Math.sqrt(
|
||||
|
|
@ -85,8 +88,8 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
|
|||
{ x: event.touches[0].pageX, y: event.touches[0].pageY },
|
||||
{ x: event.touches[1].pageX, y: event.touches[1].pageY },
|
||||
],
|
||||
distance: touchState.distance,
|
||||
initialZoom: 1,
|
||||
distance: newDistance,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
const previousCenter = {
|
||||
x: (touchState.touches[0].x + touchState.touches[1].x) / 2,
|
||||
|
|
@ -96,34 +99,28 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
|
|||
x: (event.touches[0].pageX + event.touches[1].pageX) / 2,
|
||||
y: (event.touches[0].pageY + event.touches[1].pageY) / 2,
|
||||
};
|
||||
props.applyTransformations([
|
||||
{
|
||||
scale: {
|
||||
factor: factor,
|
||||
center: currentCenter,
|
||||
},
|
||||
},
|
||||
{
|
||||
translate: {
|
||||
x: currentCenter.x - previousCenter.x,
|
||||
y: currentCenter.y - previousCenter.y,
|
||||
},
|
||||
},
|
||||
]);
|
||||
dispatch(
|
||||
slippyActions.scale({
|
||||
factor: factor,
|
||||
center: currentCenter,
|
||||
})
|
||||
);
|
||||
dispatch(
|
||||
slippyActions.translate({
|
||||
x: currentCenter.x - previousCenter.x,
|
||||
y: currentCenter.y - previousCenter.y,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const throtteledTouchMoveHandler = useCallback(
|
||||
_.throttle(touchMoveHandler, 100),
|
||||
[touchState.state]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className='viewport double-touch-handler'
|
||||
onTouchStart={touchStartHandler}
|
||||
onTouchMove={throtteledTouchMoveHandler}
|
||||
onTouchMove={touchMoveHandler}
|
||||
onTouchEnd={touchEndHandler}
|
||||
onTouchCancel={touchCancelHandler}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,100 +1,121 @@
|
|||
import react, { useCallback, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import _ from 'lodash';
|
||||
|
||||
import { Transformation } from './viewport';
|
||||
import { slippyActions } from '../store/slippy';
|
||||
import { mouseHandlerActions } from '../store/mouse-handler';
|
||||
|
||||
interface MouseHandlerProps {
|
||||
applyTransformations: (transformations: Transformation[]) => void;
|
||||
children: any;
|
||||
}
|
||||
|
||||
const MouseHandler: react.FC<MouseHandlerProps> = (
|
||||
props: MouseHandlerProps
|
||||
) => {
|
||||
const initialMouseState = {
|
||||
down: false,
|
||||
starting: { x: -1, y: -1 },
|
||||
};
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [mouseState, setMouseState] = useState(initialMouseState);
|
||||
interface MouseState {
|
||||
down: boolean;
|
||||
starting: { x: number; y: number };
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
const mouseState = useSelector(
|
||||
(state: { mouseHandler: MouseState }) => state.mouseHandler
|
||||
);
|
||||
|
||||
console.log('MouseHandler, mouseState: ' + JSON.stringify(mouseState));
|
||||
|
||||
const genericHandler = (event: any) => {
|
||||
console.log('Log - Event: ' + event.type);
|
||||
console.log(`Log - Event: ${event.type}`);
|
||||
if (event.pageX !== undefined) {
|
||||
console.log(`Mouse : ${event.pageX}, ${event.pageY}`);
|
||||
console.log('mouseState: ' + JSON.stringify(mouseState));
|
||||
console.log(
|
||||
`mouseState: ' ${JSON.stringify(mouseState)} (+${
|
||||
Date.now() - mouseState.timestamp
|
||||
}ms) `
|
||||
);
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const mouseLeaveHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
throtteledMouseMoveHandler.cancel();
|
||||
setMouseState(initialMouseState);
|
||||
// throtteledMouseMoveHandler.cancel();
|
||||
dispatch(mouseHandlerActions.init());
|
||||
};
|
||||
|
||||
const mouseDownHandler = (event: any) => {
|
||||
event.preventDefault();
|
||||
genericHandler(event);
|
||||
setMouseState({
|
||||
down: true,
|
||||
starting: { x: event.pageX, y: event.pageY },
|
||||
});
|
||||
dispatch(
|
||||
mouseHandlerActions.set({
|
||||
down: true,
|
||||
starting: { x: event.pageX, y: event.pageY },
|
||||
timestamp: Date.now(),
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const mouseUpHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
event.preventDefault();
|
||||
setMouseState(initialMouseState);
|
||||
dispatch(mouseHandlerActions.init());
|
||||
};
|
||||
|
||||
const mouseMoveHandler = (event: any) => {
|
||||
event.preventDefault();
|
||||
if (mouseState.down) {
|
||||
if (mouseState.down && (Date.now() - mouseState.timestamp) > 50 ) {
|
||||
genericHandler(event);
|
||||
props.applyTransformations([
|
||||
{
|
||||
translate: {
|
||||
x: event.pageX - mouseState.starting.x,
|
||||
y: event.pageY - mouseState.starting.y,
|
||||
console.log(
|
||||
`dispatch ${JSON.stringify({
|
||||
x: event.pageX - mouseState.starting.x,
|
||||
y: event.pageY - mouseState.starting.y,
|
||||
})}`
|
||||
);
|
||||
dispatch(
|
||||
slippyActions.translate({
|
||||
x: event.pageX - mouseState.starting.x,
|
||||
y: event.pageY - mouseState.starting.y,
|
||||
})
|
||||
);
|
||||
|
||||
dispatch(
|
||||
mouseHandlerActions.set({
|
||||
down: true,
|
||||
starting: {
|
||||
x: event.pageX,
|
||||
y: event.pageY,
|
||||
},
|
||||
},
|
||||
]);
|
||||
setMouseState({
|
||||
down: true,
|
||||
starting: {
|
||||
x: event.pageX,
|
||||
y: event.pageY,
|
||||
},
|
||||
});
|
||||
timestamp: Date.now(),
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const throtteledMouseMoveHandler = useCallback(
|
||||
_.throttle(mouseMoveHandler, 50),
|
||||
[mouseState.down]
|
||||
);
|
||||
// const throtteledMouseMoveHandler = useCallback(
|
||||
// _.throttle(mouseMoveHandler, 50),
|
||||
// [mouseState.down, mouseState.starting.x, mouseState.starting.y]
|
||||
// );
|
||||
|
||||
|
||||
|
||||
const doubleClickHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
props.applyTransformations([
|
||||
{
|
||||
scale: {
|
||||
factor: 2,
|
||||
center: { x: event.pageX, y: event.pageY },
|
||||
},
|
||||
},
|
||||
]);
|
||||
dispatch(
|
||||
slippyActions.scale({
|
||||
factor: 2,
|
||||
center: { x: event.pageX, y: event.pageY },
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className='viewport mouse-handler'
|
||||
onMouseDown={mouseDownHandler}
|
||||
onMouseMove={throtteledMouseMoveHandler}
|
||||
onMouseMove={mouseMoveHandler}
|
||||
onMouseUp={mouseUpHandler}
|
||||
onMouseLeave={mouseLeaveHandler}
|
||||
onDoubleClick={doubleClickHandler}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import react, { useCallback, useState } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import _ from 'lodash';
|
||||
|
||||
import { Transformation } from './viewport';
|
||||
import { slippyActions } from '../store/slippy';
|
||||
|
||||
interface SingleTouchHandlerProps {
|
||||
applyTransformations: (transformations: Transformation[]) => void;
|
||||
children: any;
|
||||
}
|
||||
|
||||
|
|
@ -15,8 +15,11 @@ const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
|
|||
const initialTouchState = {
|
||||
state: 'up',
|
||||
touch: { x: -1, y: -1 },
|
||||
timestamp: 0,
|
||||
};
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [touchState, setTouchState] = useState(initialTouchState);
|
||||
|
||||
console.log('SingleTouchHandler, touchState: ' + JSON.stringify(touchState));
|
||||
|
|
@ -47,6 +50,7 @@ const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
|
|||
setTouchState({
|
||||
state: 'pointer',
|
||||
touch: { x: event.touches[0].pageX, y: event.touches[0].pageY },
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -60,23 +64,22 @@ const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
|
|||
|
||||
const touchMoveHandler = (event: any) => {
|
||||
// event.preventDefault();
|
||||
if (touchState.state === 'pointer') {
|
||||
if (touchState.state === 'pointer' && (Date.now() - touchState.timestamp) > 50) {
|
||||
if (event.touches.length === 1) {
|
||||
genericHandler(event);
|
||||
props.applyTransformations([
|
||||
{
|
||||
translate: {
|
||||
x: event.touches[0].pageX - touchState.touch.x,
|
||||
y: event.touches[0].pageY - touchState.touch.y,
|
||||
},
|
||||
},
|
||||
]);
|
||||
dispatch(
|
||||
slippyActions.translate({
|
||||
x: event.touches[0].pageX - touchState.touch.x,
|
||||
y: event.touches[0].pageY - touchState.touch.y,
|
||||
})
|
||||
);
|
||||
setTouchState({
|
||||
state: 'pointer',
|
||||
touch: {
|
||||
x: event.touches[0].pageX,
|
||||
y: event.touches[0].pageY,
|
||||
},
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -91,7 +94,7 @@ const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
|
|||
<div
|
||||
className='viewport single-touch-handler'
|
||||
onTouchStart={touchStartHandler}
|
||||
onTouchMove={throtteledTouchMoveHandler}
|
||||
onTouchMove={touchMoveHandler}
|
||||
onTouchEnd={touchEndHandler}
|
||||
onTouchCancel={touchCancelHandler}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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<ViewportProps> = (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 (
|
||||
<div className='viewport'>
|
||||
<MouseHandler applyTransformations={applyTransformations}>
|
||||
<SingleTouchHandler applyTransformations={applyTransformations}>
|
||||
<DoubleTouchHandler applyTransformations={applyTransformations}>
|
||||
<MouseHandler>
|
||||
<SingleTouchHandler>
|
||||
<DoubleTouchHandler>
|
||||
<Layer viewportState={state}>{props.children}</Layer>
|
||||
</DoubleTouchHandler>
|
||||
</SingleTouchHandler>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue