remember preview position on canvases when switching
This commit is contained in:
parent
4801472be3
commit
1f70d78fae
|
@ -38,17 +38,14 @@ export type CanvasState = {
|
||||||
historicalTime: string,
|
historicalTime: string,
|
||||||
// object with all canvas informations from all canvases like colors and size
|
// object with all canvas informations from all canvases like colors and size
|
||||||
canvases: Object,
|
canvases: Object,
|
||||||
|
// last canvas view, scale and viewscale
|
||||||
|
// just used to get back to the previous coordinates when switching
|
||||||
|
// between canvases an back
|
||||||
|
// { 0: {scale: 12, viewscale: 12, view: [122, 1232]}, ... }
|
||||||
|
prevCanvasCoords: Object,
|
||||||
showHiddenCanvases: boolean,
|
showHiddenCanvases: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
|
||||||
* check if we got coords from index.html
|
|
||||||
*/
|
|
||||||
function getGivenCoords() {
|
|
||||||
// if (window.ssv.coordx && window.ssv.coordy) return [window.ssv.coordx, window.ssv.coordy];
|
|
||||||
return [0, 0, 0];
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* parse url hash and sets view to coordinates
|
* parse url hash and sets view to coordinates
|
||||||
* @param canvases Object with all canvas informations
|
* @param canvases Object with all canvas informations
|
||||||
|
@ -130,7 +127,7 @@ function getViewFromURL(canvases: Object) {
|
||||||
palette: new Palette(canvasd.colors, 0),
|
palette: new Palette(canvasd.colors, 0),
|
||||||
clrIgnore: canvasd.cli,
|
clrIgnore: canvasd.cli,
|
||||||
selectedColor: canvasd.cli,
|
selectedColor: canvasd.cli,
|
||||||
view: getGivenCoords(),
|
view: [0, 0, 0],
|
||||||
viewscale: DEFAULT_SCALE,
|
viewscale: DEFAULT_SCALE,
|
||||||
scale: DEFAULT_SCALE,
|
scale: DEFAULT_SCALE,
|
||||||
canvases,
|
canvases,
|
||||||
|
@ -144,6 +141,7 @@ const initialState: CanvasState = {
|
||||||
historicalDate: null,
|
historicalDate: null,
|
||||||
historicalTime: null,
|
historicalTime: null,
|
||||||
showHiddenCanvases: false,
|
showHiddenCanvases: false,
|
||||||
|
prevCanvasCoords: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
@ -268,13 +266,26 @@ export default function canvasReducer(
|
||||||
|
|
||||||
case 'SELECT_CANVAS': {
|
case 'SELECT_CANVAS': {
|
||||||
let { canvasId } = action;
|
let { canvasId } = action;
|
||||||
const { canvases } = state;
|
const { canvases, prevCanvasCoords, canvasId: prevCanvasId } = state;
|
||||||
|
if (canvasId === prevCanvasId) {
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
|
||||||
let canvas = canvases[canvasId];
|
let canvas = canvases[canvasId];
|
||||||
if (!canvas) {
|
if (!canvas) {
|
||||||
canvasId = DEFAULT_CANVAS_ID;
|
canvasId = DEFAULT_CANVAS_ID;
|
||||||
canvas = canvases[DEFAULT_CANVAS_ID];
|
canvas = canvases[DEFAULT_CANVAS_ID];
|
||||||
}
|
}
|
||||||
|
// get previous view, scale and viewscale if possible
|
||||||
|
let viewscale = DEFAULT_SCALE;
|
||||||
|
let scale = DEFAULT_SCALE;
|
||||||
|
let view = [0, 0, 0];
|
||||||
|
if (prevCanvasCoords[canvasId]) {
|
||||||
|
view = prevCanvasCoords[canvasId].view;
|
||||||
|
viewscale = prevCanvasCoords[canvasId].viewscale;
|
||||||
|
scale = prevCanvasCoords[canvasId].scale;
|
||||||
|
}
|
||||||
|
//---
|
||||||
const {
|
const {
|
||||||
size: canvasSize,
|
size: canvasSize,
|
||||||
sd: canvasStartDate,
|
sd: canvasStartDate,
|
||||||
|
@ -290,10 +301,14 @@ export default function canvasReducer(
|
||||||
canvas.historicalSizes,
|
canvas.historicalSizes,
|
||||||
);
|
);
|
||||||
const palette = new Palette(colors, 0);
|
const palette = new Palette(colors, 0);
|
||||||
const view = (canvasId === 0) ? getGivenCoords() : [0, 0, 0];
|
|
||||||
if (!is3D) {
|
if (!is3D) {
|
||||||
view.length = 2;
|
view.length = 2;
|
||||||
}
|
}
|
||||||
|
const {
|
||||||
|
view: prevView,
|
||||||
|
scale: prevScale,
|
||||||
|
viewscale: prevViewscale,
|
||||||
|
} = state;
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
canvasId,
|
canvasId,
|
||||||
|
@ -305,10 +320,19 @@ export default function canvasReducer(
|
||||||
palette,
|
palette,
|
||||||
clrIgnore,
|
clrIgnore,
|
||||||
view,
|
view,
|
||||||
viewscale: DEFAULT_SCALE,
|
viewscale,
|
||||||
scale: DEFAULT_SCALE,
|
scale,
|
||||||
isHistoricalView,
|
isHistoricalView,
|
||||||
historicalCanvasSize,
|
historicalCanvasSize,
|
||||||
|
// rember view, scale and viewscale
|
||||||
|
prevCanvasCoords: {
|
||||||
|
...state.prevCanvasCoords,
|
||||||
|
[prevCanvasId]: {
|
||||||
|
view: prevView,
|
||||||
|
scale: prevScale,
|
||||||
|
viewscale: prevViewscale,
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -55,12 +55,9 @@ const css = [
|
||||||
* @param lang language code
|
* @param lang language code
|
||||||
* @return html of mainpage
|
* @return html of mainpage
|
||||||
*/
|
*/
|
||||||
function generateMainPage(countryCoords: Cell, lang: string): string {
|
function generateMainPage(lang: string): string {
|
||||||
const [x, y] = countryCoords;
|
|
||||||
const ssvR = {
|
const ssvR = {
|
||||||
...ssv,
|
...ssv,
|
||||||
coordx: x,
|
|
||||||
coordy: y,
|
|
||||||
lang: lang === 'default' ? 'en' : lang,
|
lang: lang === 'default' ? 'en' : lang,
|
||||||
};
|
};
|
||||||
const scripts = (assets[`client-${lang}`])
|
const scripts = (assets[`client-${lang}`])
|
||||||
|
|
|
@ -33,7 +33,6 @@ import generateMainPage from './ssr-components/Main';
|
||||||
import { SECOND, MONTH } from './core/constants';
|
import { SECOND, MONTH } from './core/constants';
|
||||||
import { PORT, HOST, GUILDED_INVITE } from './core/config';
|
import { PORT, HOST, GUILDED_INVITE } from './core/config';
|
||||||
|
|
||||||
import { ccToCoords } from './utils/location';
|
|
||||||
import { startAllCanvasLoops } from './core/tileserver';
|
import { startAllCanvasLoops } from './core/tileserver';
|
||||||
|
|
||||||
startAllCanvasLoops();
|
startAllCanvasLoops();
|
||||||
|
@ -183,12 +182,7 @@ app.get('/', async (req, res) => {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// get start coordinates based on cloudflare header country
|
res.status(200).send(generateMainPage(req.lang));
|
||||||
const country = req.headers['cf-ipcountry'];
|
|
||||||
|
|
||||||
const countryCoords = (country) ? ccToCoords(country) : [0, 0];
|
|
||||||
|
|
||||||
res.status(200).send(generateMainPage(countryCoords, req.lang));
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user