Skip to content

Commit

Permalink
WIP fix left/right timeline on slider
Browse files Browse the repository at this point in the history 
Not fully working yet, useCallback do not seem to update on props changes
  • Loading branch information
@jo-chemla
jo-chemla committed Jul 19, 2024
1 parent 05cbf6e commit 2cbe38a
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 23 deletions.
11 changes: 8 additions & 3 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ function App() {
const newCanvas = document.getElementById('leftMapCanvasClone')
if (oldCanvas && newCanvas) cloneCanvas(oldCanvas as HTMLCanvasElement, newCanvas as HTMLCanvasElement)
// App in prod wont set hash auto although it was working in dev, so do it onMoveEnd
window.location.hash = `${viewState.zoom}/${viewState.latitude.toFixed(4)}/${viewState.longitude.toFixed(4)}-jojo`
window.location.hash = `${viewState.zoom.toFixed(2)}/${viewState.latitude.toFixed(4)}/${viewState.longitude.toFixed(4)}`
},
10,
false
Expand Down Expand Up @@ -401,7 +401,10 @@ function App() {
// Left/Right Maps Sync
id="left-map"
ref={leftMapRef}
onClick={() => setClickedMap("left")}
onClick={() => {
setClickedMap("left")
// setLeftMa
}}
onMoveStart={onLeftMoveStart}
// onMove={activeMap === "left" ? onMove : () => ({})}
onMove={activeMap === "left" ? onMoveDebounce : () => ({})}
Expand Down Expand Up @@ -583,14 +586,16 @@ function App() {
clickedMap == "left" ? setLeftTimelineDate : setRightTimelineDate
}
selectedTms={clickedMap == "left" ? leftSelectedTms : rightSelectedTms}
leftSelectedTms={leftSelectedTms}
rightSelectedTms={rightSelectedTms}
setSelectedTms={
clickedMap == "left" ? setLeftSelectedTms : setRightSelectedTms
}
swapMapSources={() => {setLeftSelectedTms(rightSelectedTms); setRightSelectedTms(leftSelectedTms)}}
splitScreenMode={splitScreenMode}
setSplitScreenMode={setSplitScreenMode}
setSplitPanelSizesPercent={setSplitPanelSizesPercent}
mapRef={leftMapRef}
mapRef={clickedMap == "left" ? leftMapRef : rightMapRef}
// Additional
setLeftSelectedTms= {setLeftSelectedTms}
setRightSelectedTms= {setRightSelectedTms}
Expand Down
68 changes: 48 additions & 20 deletions src/control-panel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useCallback } from "react";
import { useState, useCallback, useEffect } from "react";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs from "dayjs";
Expand Down Expand Up @@ -249,6 +249,11 @@ function ControlPanelDrawer(props: any) {
// Component: ControlPanel
// ------------------------------------------------------
function ControlPanel(props:any) {


useEffect(() => {
console.log('yo rightSelectedTms changed', props.rightSelectedTms)
}, [props.rightSelectedTms])
// ---------------------------
// Slider control
// For slider play/pause loops
Expand All @@ -258,25 +263,37 @@ function ControlPanel(props:any) {
2
);
const handleSliderChange = (_: Event, newValue: number) => {
props.setTimelineDate(sliderValToDate(newValue, minDate));
props.setTimelineDate(sliderValToDate(newValue, validMinDate));
};

// const [minDate, setMinDate] = useState<Date>(MIN_PLANET_DATE);
// const [maxDate, setMaxDate] = useState<Date>(MAX_PLANET_DATE);
const [minDate, setMinDate] = useLocalStorage("export_minDate", MIN_PLANET_DATE);
const [maxDate, setMaxDate] = useLocalStorage("export_maxDate", MAX_PLANET_DATE);
const validMinDate = minDate && isValid(minDate) ? minDate : MIN_PLANET_DATE;
const validMaxDate = maxDate && isValid(maxDate) ? maxDate : MAX_PLANET_DATE;
const monthsCount = differenceInMonths(validMaxDate, validMinDate);
const [leftMarks, setLeftMarks] = useState(getSliderMarksEveryYear(validMinDate, validMaxDate));
const [rightMarks, setRightMarks] = useState(getSliderMarksEveryYear(validMinDate, validMaxDate));
const [minLeftDate, setLeftMinDate] = useLocalStorage("export_minDate", MIN_PLANET_DATE);
const [maxLeftDate, setLeftMaxDate] = useLocalStorage("export_maxDate", MAX_PLANET_DATE);
const [minRightDate, setRightMinDate] = useLocalStorage("export_minDate", MIN_PLANET_DATE);
const [maxRightDate, setRightMaxDate] = useLocalStorage("export_maxDate", MAX_PLANET_DATE);
const [collectionDateStr, setCollectionDateStr] = useState('?');

const validLeftMinDate = minLeftDate && isValid(minLeftDate) ? minLeftDate : MIN_PLANET_DATE;
const validLeftMaxDate = maxLeftDate && isValid(maxLeftDate) ? maxLeftDate : MAX_PLANET_DATE;
const validRightMinDate = minRightDate && isValid(minRightDate) ? minRightDate : MIN_PLANET_DATE;
const validRightMaxDate = maxRightDate && isValid(maxRightDate) ? maxRightDate : MAX_PLANET_DATE;
const monthsCountLeft = differenceInMonths(validLeftMaxDate, validLeftMinDate);
const monthsCountRight = differenceInMonths(validRightMaxDate, validRightMinDate);
const [leftMarks, setLeftMarks] = useState(getSliderMarksEveryYear(validLeftMinDate, validLeftMaxDate));
const [rightMarks, setRightMarks] = useState(getSliderMarksEveryYear(validRightMinDate, validRightMaxDate));

const validMinDate = props.clickedMap == "left" ? validLeftMinDate : validRightMinDate
const validMaxDate = props.clickedMap == "left" ? validLeftMaxDate : validRightMaxDate
const marks = props.clickedMap == "left" ? leftMarks : rightMarks
const monthsCount = props.clickedMap == "left" ? monthsCountLeft : monthsCountRight
const setMinDate = props.clickedMap == "left" ? setLeftMinDate : setRightMinDate
const setMaxDate = props.clickedMap == "left" ? setLeftMaxDate : setRightMaxDate

const collectionDateRetrievable: BasemapsIds[] = [BasemapsIds.Bing, BasemapsIds.PlanetMonthly]
async function getCollectionDateViewport(selectedTms: BasemapsIds) {
setCollectionDateStr('')
let collectionDate = {minDate: '?', maxDate: '?'};
let collectionDate = {validMinDate: '?', maxDate: '?'};
const map = props.mapRef?.current?.getMap() as any;

switch (+selectedTms) {
Expand Down Expand Up @@ -319,6 +336,7 @@ function ControlPanel(props:any) {


const onMoveEnd_esriWaybackMarks = useCallback((e) => {
// const onMoveEnd_esriWaybackMarks = (e) => {
// event type: boxzoomstart
const map = e.target

Expand Down Expand Up @@ -351,17 +369,29 @@ function ControlPanel(props:any) {
const waybackMinDate = subMonths(localChangesDates[0], 12);
const waybackMaxDate = addMonths(localChangesDates[localChangesDates.length - 1], 12);
const esriWaybackMarks = getSliderMarks(localChangesDates, waybackMinDate)
setMinDate(waybackMinDate)
setMaxDate(waybackMaxDate)
props.clickedMap == "left" ? setLeftMarks(esriWaybackMarks) : setRightMarks(esriWaybackMarks)
console.log('onMoveEnd_esriWaybackMarks ', center, map.getZoom(), esriWaybackMarks, localChangesDates, props.leftSelectedTms, props.rightSelectedTms)
if (props.leftSelectedTms == BasemapsIds.ESRIWayback) {
console.log('leftSelectedTms == ESRIWayback')
setLeftMinDate(waybackMinDate)
setLeftMaxDate(waybackMaxDate)
setLeftMarks(esriWaybackMarks)
}
if (props.rightSelectedTms == BasemapsIds.ESRIWayback) {
// TODO props.rightSelectedTms won't get changed since useCallback when changing selectedTms afterwards
console.log('rightSelectedTms == ESRIWayback')
setRightMinDate(waybackMinDate)
setRightMaxDate(waybackMaxDate)
setRightMarks(esriWaybackMarks)
}
}
);
}, [])
}
, [props.clickedMap, props.rightSelectedTms, props.leftSelectedTms])

const handleBasemapChange = (event: SelectChangeEvent) => {
const selectedTms = event.target.value as BasemapsIds
props.setSelectedTms(selectedTms); // as string
const map = props.leftMapRef.current?.getMap()
const map = props.mapRef.current?.getMap()
map.off('moveend', onMoveEnd_esriWaybackMarks)

// TODO setSliderDatesArr (setMinDate and setMarkers)
Expand Down Expand Up @@ -675,9 +705,9 @@ function ControlPanel(props:any) {
<SettingsModal
playbackSpeedFPS={playbackSpeedFPS}
setPlaybackSpeedFPS={setPlaybackSpeedFPS}
minDate={minDate}
minDate={validMinDate}
setMinDate={setMinDate}
maxDate={maxDate}
maxDate={validMaxDate}
setMaxDate={setMaxDate}
exportInterval={exportInterval}
setExportInterval={setExportInterval}
Expand Down Expand Up @@ -733,9 +763,7 @@ function ControlPanel(props:any) {
//
min={0}
max={monthsCount}
marks={
props.clickedMap == "left" ? leftMarks : rightMarks
}
marks={ marks }
//
value={dateToSliderVal(props.timelineDate, validMinDate)}
onChange={handleSliderChange}
Expand Down

0 comments on commit 2cbe38a

Please sign in to comment.