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">Click a color in palette to select</p>
|
||||||
<p className="modaltext">Press <kbd>G</kbd> to toggle grid</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>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>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>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>
|
<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>
|
<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>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>↑</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">Scroll mouse wheel to zoom</p>
|
||||||
<p className="modaltext">Left click and drag mouse to rotate</p>
|
<p className="modaltext">Left click and drag mouse to rotate</p>
|
||||||
<p className="modaltext">Middle click and drag mouse to zoom</p>
|
<p className="modaltext">Middle click and drag mouse to zoom</p>
|
||||||
|
|
|
@ -14,10 +14,18 @@ function dateToString(date) {
|
||||||
// YYYYMMDD
|
// YYYYMMDD
|
||||||
return timeString;
|
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) {
|
async function getTimes(day, canvasId) {
|
||||||
try {
|
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) {
|
if (response.status !== 200) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
@ -48,6 +56,7 @@ class HistorySelect extends React.Component {
|
||||||
submitting: false,
|
submitting: false,
|
||||||
selectedDate: null,
|
selectedDate: null,
|
||||||
selectedTime: null,
|
selectedTime: null,
|
||||||
|
times: [],
|
||||||
max,
|
max,
|
||||||
};
|
};
|
||||||
this.dateSelect = null;
|
this.dateSelect = null;
|
||||||
|
@ -75,7 +84,7 @@ class HistorySelect extends React.Component {
|
||||||
canvasId,
|
canvasId,
|
||||||
setTime,
|
setTime,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const date = dateToString(evt.target.value);
|
const date = evt.target.value;
|
||||||
const times = await getTimes(date, canvasId);
|
const times = await getTimes(date, canvasId);
|
||||||
if (times.length === 0) {
|
if (times.length === 0) {
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -117,6 +126,7 @@ class HistorySelect extends React.Component {
|
||||||
if (!selectedTime || times.length === 0) {
|
if (!selectedTime || times.length === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const {
|
const {
|
||||||
setTime,
|
setTime,
|
||||||
canvasId,
|
canvasId,
|
||||||
|
@ -129,7 +139,7 @@ class HistorySelect extends React.Component {
|
||||||
} else {
|
} else {
|
||||||
this.dateSelect.stepUp(1);
|
this.dateSelect.stepUp(1);
|
||||||
}
|
}
|
||||||
selectedDate = dateToString(this.dateSelect.value);
|
selectedDate = this.dateSelect.value;
|
||||||
this.setState({
|
this.setState({
|
||||||
submitting: true,
|
submitting: true,
|
||||||
times: [],
|
times: [],
|
||||||
|
@ -162,18 +172,42 @@ class HistorySelect extends React.Component {
|
||||||
const {
|
const {
|
||||||
canvasStartDate,
|
canvasStartDate,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
submitting,
|
submitting,
|
||||||
|
max,
|
||||||
|
} = this.state;
|
||||||
|
let {
|
||||||
times,
|
times,
|
||||||
selectedDate,
|
selectedDate,
|
||||||
selectedTime,
|
selectedTime,
|
||||||
max,
|
|
||||||
} = this.state;
|
} = 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 (
|
return (
|
||||||
<div id="historyselect">
|
<div id="historyselect">
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
requiredPattern="\d{4}-\d{2}-\d{2}"
|
requiredPattern="\d{4}-\d{2}-\d{2}"
|
||||||
|
value={selectedDate}
|
||||||
min={canvasStartDate}
|
min={canvasStartDate}
|
||||||
max={max}
|
max={max}
|
||||||
ref={(ref) => { this.dateSelect = ref; }}
|
ref={(ref) => { this.dateSelect = ref; }}
|
||||||
|
@ -193,7 +227,12 @@ class HistorySelect extends React.Component {
|
||||||
onChange={this.handleTimeChange}
|
onChange={this.handleTimeChange}
|
||||||
>
|
>
|
||||||
{times.map((value) => (
|
{times.map((value) => (
|
||||||
<option value={value}>{value}</option>
|
<option
|
||||||
|
value={value}
|
||||||
|
selected={value === selectedTime}
|
||||||
|
>
|
||||||
|
{value}
|
||||||
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
<button
|
<button
|
||||||
|
@ -217,7 +256,8 @@ function mapDispatchToProps(dispatch) {
|
||||||
return {
|
return {
|
||||||
setTime(date: string, time: string) {
|
setTime(date: string, time: string) {
|
||||||
const timeString = time.substr(0, 2) + time.substr(-2, 2);
|
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 {
|
const {
|
||||||
canvasId,
|
canvasId,
|
||||||
canvasStartDate,
|
canvasStartDate,
|
||||||
|
historicalDate,
|
||||||
|
historicalTime,
|
||||||
} = state.canvas;
|
} = state.canvas;
|
||||||
return { canvasId, canvasStartDate };
|
return {
|
||||||
|
canvasId, canvasStartDate, historicalDate, historicalTime,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(HistorySelect);
|
export default connect(mapStateToProps, mapDispatchToProps)(HistorySelect);
|
||||||
|
|
|
@ -178,6 +178,7 @@ function SettingsModal({
|
||||||
title="Historical View"
|
title="Historical View"
|
||||||
description="Check out past versions of the canvas."
|
description="Check out past versions of the canvas."
|
||||||
value={isHistoricalView}
|
value={isHistoricalView}
|
||||||
|
keyBind="H"
|
||||||
onToggle={onToggleHistoricalView}
|
onToggle={onToggleHistoricalView}
|
||||||
/>
|
/>
|
||||||
) : null }
|
) : null }
|
||||||
|
|
|
@ -8,6 +8,7 @@ import store from '../ui/store';
|
||||||
import copy from '../utils/clipboard';
|
import copy from '../utils/clipboard';
|
||||||
import {
|
import {
|
||||||
toggleGrid,
|
toggleGrid,
|
||||||
|
toggleHistoricalView,
|
||||||
togglePixelNotify,
|
togglePixelNotify,
|
||||||
toggleMute,
|
toggleMute,
|
||||||
notify,
|
notify,
|
||||||
|
@ -26,6 +27,9 @@ function onKeyPress(event: KeyboardEvent) {
|
||||||
case 'g':
|
case 'g':
|
||||||
store.dispatch(toggleGrid());
|
store.dispatch(toggleGrid());
|
||||||
break;
|
break;
|
||||||
|
case 'h':
|
||||||
|
store.dispatch(toggleHistoricalView());
|
||||||
|
break;
|
||||||
case 'x':
|
case 'x':
|
||||||
store.dispatch(togglePixelNotify());
|
store.dispatch(togglePixelNotify());
|
||||||
break;
|
break;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user