add hotkey for historical view
This commit is contained in:
parent
fe0e5dc596
commit
35f1a7787c
|
@ -32,6 +32,7 @@ const HelpModal = () => (
|
|||
<p className="modaltext">Click a color in palette to select</p>
|
||||
<p className="modaltext">Press <kbd>G</kbd> to toggle grid</p>
|
||||
<p className="modaltext">Press <kbd>X</kbd> to toggle showing of pixel activity</p>
|
||||
<p className="modaltext">Press <kbd>H</kbd> to toggle historical view</p>
|
||||
<p className="modaltext">Press <kbd>R</kbd> to copy coordinates</p>
|
||||
<p className="modaltext">Press <kbd>Q</kbd> or <kbd>E</kbd> to zoom</p>
|
||||
<p className="modaltext">Press <kbd>W</kbd>,<kbd>A</kbd>,<kbd>S</kbd>, <kbd>D</kbd> to move</p>
|
||||
|
@ -45,6 +46,7 @@ const HelpModal = () => (
|
|||
<h3 className="modaltitle">3D Controls</h3>
|
||||
<p className="modaltext">Press <kbd>W</kbd>,<kbd>A</kbd>,<kbd>S</kbd>, <kbd>D</kbd> to move</p>
|
||||
<p className="modaltext">Press <kbd>↑</kbd>,<kbd>←</kbd>,<kbd>↓</kbd>, <kbd>→</kbd> to move</p>
|
||||
<p className="modaltext">Press <kbd>E</kbd> and <kbd>C</kbd> to fly up and down</p>
|
||||
<p className="modaltext">Scroll mouse wheel to zoom</p>
|
||||
<p className="modaltext">Left click and drag mouse to rotate</p>
|
||||
<p className="modaltext">Middle click and drag mouse to zoom</p>
|
||||
|
|
|
@ -14,10 +14,18 @@ function dateToString(date) {
|
|||
// YYYYMMDD
|
||||
return timeString;
|
||||
}
|
||||
function stringToDate(timeString) {
|
||||
// YYYYMMDD
|
||||
// eslint-disable-next-line max-len
|
||||
const date = `${timeString.substr(0, 4)}-${timeString.substr(4, 2)}-${timeString.substr(6, 2)}`;
|
||||
// YYYY-MM-DD
|
||||
return date;
|
||||
}
|
||||
|
||||
async function getTimes(day, canvasId) {
|
||||
try {
|
||||
const response = await fetch(`./api/history?day=${day}&id=${canvasId}`);
|
||||
const date = dateToString(day);
|
||||
const response = await fetch(`./api/history?day=${date}&id=${canvasId}`);
|
||||
if (response.status !== 200) {
|
||||
return [];
|
||||
}
|
||||
|
@ -48,6 +56,7 @@ class HistorySelect extends React.Component {
|
|||
submitting: false,
|
||||
selectedDate: null,
|
||||
selectedTime: null,
|
||||
times: [],
|
||||
max,
|
||||
};
|
||||
this.dateSelect = null;
|
||||
|
@ -75,7 +84,7 @@ class HistorySelect extends React.Component {
|
|||
canvasId,
|
||||
setTime,
|
||||
} = this.props;
|
||||
const date = dateToString(evt.target.value);
|
||||
const date = evt.target.value;
|
||||
const times = await getTimes(date, canvasId);
|
||||
if (times.length === 0) {
|
||||
this.setState({
|
||||
|
@ -117,6 +126,7 @@ class HistorySelect extends React.Component {
|
|||
if (!selectedTime || times.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const {
|
||||
setTime,
|
||||
canvasId,
|
||||
|
@ -129,7 +139,7 @@ class HistorySelect extends React.Component {
|
|||
} else {
|
||||
this.dateSelect.stepUp(1);
|
||||
}
|
||||
selectedDate = dateToString(this.dateSelect.value);
|
||||
selectedDate = this.dateSelect.value;
|
||||
this.setState({
|
||||
submitting: true,
|
||||
times: [],
|
||||
|
@ -162,18 +172,42 @@ class HistorySelect extends React.Component {
|
|||
const {
|
||||
canvasStartDate,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
submitting,
|
||||
max,
|
||||
} = this.state;
|
||||
let {
|
||||
times,
|
||||
selectedDate,
|
||||
selectedTime,
|
||||
max,
|
||||
} = this.state;
|
||||
|
||||
if (!selectedDate) {
|
||||
const {
|
||||
historicalDate,
|
||||
historicalTime,
|
||||
} = this.props;
|
||||
|
||||
if (historicalDate && historicalTime) {
|
||||
selectedDate = stringToDate(historicalDate);
|
||||
selectedTime = historicalTime;
|
||||
times = [historicalTime];
|
||||
|
||||
this.setState({
|
||||
selectedDate,
|
||||
selectedTime,
|
||||
times,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="historyselect">
|
||||
<input
|
||||
type="date"
|
||||
requiredPattern="\d{4}-\d{2}-\d{2}"
|
||||
value={selectedDate}
|
||||
min={canvasStartDate}
|
||||
max={max}
|
||||
ref={(ref) => { this.dateSelect = ref; }}
|
||||
|
@ -193,7 +227,12 @@ class HistorySelect extends React.Component {
|
|||
onChange={this.handleTimeChange}
|
||||
>
|
||||
{times.map((value) => (
|
||||
<option value={value}>{value}</option>
|
||||
<option
|
||||
value={value}
|
||||
selected={value === selectedTime}
|
||||
>
|
||||
{value}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
|
@ -217,7 +256,8 @@ function mapDispatchToProps(dispatch) {
|
|||
return {
|
||||
setTime(date: string, time: string) {
|
||||
const timeString = time.substr(0, 2) + time.substr(-2, 2);
|
||||
dispatch(selectHistoricalTime(date, timeString));
|
||||
const dateString = dateToString(date);
|
||||
dispatch(selectHistoricalTime(dateString, timeString));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
@ -226,8 +266,12 @@ function mapStateToProps(state: State) {
|
|||
const {
|
||||
canvasId,
|
||||
canvasStartDate,
|
||||
historicalDate,
|
||||
historicalTime,
|
||||
} = state.canvas;
|
||||
return { canvasId, canvasStartDate };
|
||||
return {
|
||||
canvasId, canvasStartDate, historicalDate, historicalTime,
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(HistorySelect);
|
||||
|
|
|
@ -178,6 +178,7 @@ function SettingsModal({
|
|||
title="Historical View"
|
||||
description="Check out past versions of the canvas."
|
||||
value={isHistoricalView}
|
||||
keyBind="H"
|
||||
onToggle={onToggleHistoricalView}
|
||||
/>
|
||||
) : null }
|
||||
|
|
|
@ -8,6 +8,7 @@ import store from '../ui/store';
|
|||
import copy from '../utils/clipboard';
|
||||
import {
|
||||
toggleGrid,
|
||||
toggleHistoricalView,
|
||||
togglePixelNotify,
|
||||
toggleMute,
|
||||
notify,
|
||||
|
@ -26,6 +27,9 @@ function onKeyPress(event: KeyboardEvent) {
|
|||
case 'g':
|
||||
store.dispatch(toggleGrid());
|
||||
break;
|
||||
case 'h':
|
||||
store.dispatch(toggleHistoricalView());
|
||||
break;
|
||||
case 'x':
|
||||
store.dispatch(togglePixelNotify());
|
||||
break;
|
||||
|
|
Loading…
Reference in New Issue
Block a user