bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-12 13:28:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

Nicer arrows on timeline when zoomed in

Browse Source
This commit is contained in:
Lachlan Kermode
2022-03-06 21:43:13 -05:00
parent a84fd55e62
commit c1c3c1a2db
3 changed files with 51 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Layout.js
View File

@@ -70,6 +70,11 @@ class Dashboard extends React.Component {
}
handleSelect(selected, axis) {
if (selected.length <= 0) {
this.props.actions.updateSelected([]);
return;
}
const matchedEvents = [];
const TIMELINE_AXIS = 0;
if (axis === TIMELINE_AXIS) {

30
src/components/time/Timeline.js
View File

@@ -68,6 +68,11 @@ class Timeline extends React.Component {
) {
this.computeDims();
}
// nextProps.domain.events.forEach(e => {
// console.log(e.datetime)
// });
// this.props.methods.onSelect()
}
addEventListeners() {
@@ -165,7 +170,7 @@ class Timeline extends React.Component {
const extent = this.getTimeScaleExtent();
const newCentralTime = d3.timeMinute.offset(
this.state.scaleX.domain()[0],
extent / 2
extent
);
// if forward
@@ -174,13 +179,12 @@ class Timeline extends React.Component {
// if backwards
if (direction === "backwards") {
domain0 = d3.timeMinute.offset(newCentralTime, -extent);
domainF = newCentralTime;
domain0 = d3.timeMinute.offset(newCentralTime, -(2 * extent));
domainF = d3.timeMinute.offset(newCentralTime, -extent);
}
this.setState({ timerange: [domain0, domainF] }, () => {
this.props.methods.onUpdateTimerange(this.state.timerange);
});
this.props.methods.onUpdateTimerange([domain0, domainF]);
this.props.methods.onSelect([]);
}
onCenterTime(newCentralTime) {
@@ -417,12 +421,14 @@ class Timeline extends React.Component {
.default_categories_label
}
/>
<Handles
dims={dims}
onMoveTime={(dir) => {
this.onMoveTime(dir);
}}
/>
{app.timeline.dimensions.ticks == 1 && (
<Handles
dims={dims}
onMoveTime={(dir) => {
this.onMoveTime(dir);
}}
/>
)}
<ZoomControls
extent={this.getTimeScaleExtent()}
zoomLevels={this.props.app.timeline.zoomLevels}

57
src/components/time/atoms/Handles.js
View File

@@ -3,35 +3,34 @@ import React from "react";
const TimelineHandles = ({ dims, onMoveTime }) => {
const transform = "scale(1.5,1.5)";
const size = 45;
return null;
// return (
// <g className="time-controls-inline">
// <g
// transform={`translate(${dims.marginLeft - 20}, ${
// dims.contentHeight - 10
// })`}
// onClick={() => onMoveTime("backwards")}
// >
// <circle r={size} />
// <path
// d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"
// transform={`rotate(270) ${transform}`}
// />
// </g>
// <g
// transform={`translate(${dims.width - dims.width_controls + 20}, ${
// dims.contentHeight - 10
// })`}
// onClick={() => onMoveTime("forward")}
// >
// <circle r={size} />
// <path
// d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"
// transform={`rotate(90) ${transform}`}
// />
// </g>
// </g>
// );
return (
<g className="time-controls-inline">
<g
transform={`translate(${dims.marginLeft - 20}, ${
dims.contentHeight - 10
})`}
onClick={() => onMoveTime("backwards")}
>
<circle r={size} />
<path
d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"
transform={`rotate(270) ${transform}`}
/>
</g>
<g
transform={`translate(${dims.width - dims.width_controls + 20}, ${
dims.contentHeight - 10
})`}
onClick={() => onMoveTime("forward")}
>
<circle r={size} />
<path
d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"
transform={`rotate(90) ${transform}`}
/>
</g>
</g>
);
};
export default TimelineHandles;