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

narrative movement fully redux-ized

Browse Source
This commit is contained in:
Lachlan Kermode
2019-01-03 17:17:50 +00:00
parent 1126d54def
commit 58b37105f5
3 changed files with 96 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/MapNarratives.jsx
View File

@@ -1,42 +1,42 @@
import React from 'react';
import { Portal } from 'react-portal';
import React from 'react'
import { Portal } from 'react-portal'
class MapNarratives extends React.Component {
projectPoint(location) {
const latLng = new L.LatLng(location[0], location[1]);
const latLng = new L.LatLng(location[0], location[1])
return {
x: this.props.map.latLngToLayerPoint(latLng).x + this.props.mapTransformX,
y: this.props.map.latLngToLayerPoint(latLng).y + this.props.mapTransformY
};
}
}
getNarrativeStyle(narrativeId) {
const styleName = (narrativeId && narrativeId in this.props.narrativeProps)
? narrativeId
: 'default';
return this.props.narrativeProps[styleName];
: 'default'
return this.props.narrativeProps[styleName]
}
getStrokeWidth(narrative, step) {
if (!step) return 0;
return this.getNarrativeStyle(narrative.id).strokeWidth;
if (!step) return 0
return this.getNarrativeStyle(narrative.id).strokeWidth
}
getStrokeDashArray(narrative, step) {
if (!step) return 'none';
return (this.getNarrativeStyle(narrative.id).style === 'dotted') ? "2px 5px" : 'none';
if (!step) return 'none'
return (this.getNarrativeStyle(narrative.id).style === 'dotted') ? "2px 5px" : 'none'
}
getStroke(narrative, step) {
if (!step || this.props.narrative === null) return 'none';
return this.getNarrativeStyle(narrative.id).stroke;
if (!step || this.props.narrative === null) return 'none'
return this.getNarrativeStyle(narrative.id).stroke
}
getStrokeOpacity(narrative, step) {
if (this.props.narrative === null) return 0;
if (!step || narrative.id !== this.props.narrative.id) return 0.1;
return 1;
if (this.props.narrative === null) return 0
if (!step || narrative.id !== this.props.narrative.id) return 0.1
return 1
}
hasNoLocation(step) {
@@ -44,14 +44,14 @@ class MapNarratives extends React.Component {
}
renderNarrativeStep(allSteps, step, idx, n) {
const { x, y } = this.projectPoint([step.latitude, step.longitude]);
const step2 = allSteps[idx + 1];
const { x, y } = this.projectPoint([step.latitude, step.longitude])
const step2 = allSteps[idx + 1]
// don't draw if one of the steps has no location
if (this.hasNoLocation(step) || this.hasNoLocation(step2))
return null
const p2 = this.projectPoint([step2.latitude, step2.longitude]);
const p2 = this.projectPoint([step2.latitude, step2.longitude])
return (
<line
@@ -70,30 +70,28 @@ class MapNarratives extends React.Component {
}}
>
</line>
);
)
}
renderNarrative(n) {
// TODO: representation for narrative lines
// const steps = n.steps.slice(0, n.steps.length - 1);
//
// return (
// <g id={`narrative-${n.id.replace(/ /g,"_")}`} className="narrative">
// {steps.map((s, idx) => this.renderNarrativeStep(n.steps, s, idx, n))}
// </g>
// )
return null
const steps = n.steps.slice(0, n.steps.length - 1)
return (
<g id={`narrative-${n.id.replace(/ /g,"_")}`} className="narrative">
{steps.map((s, idx) => this.renderNarrativeStep(n.steps, s, idx, n))}
</g>
)
}
render() {
if (this.props.narrative === null) return (<div />);
if (this.props.narrative === null) return (<div />)
return (
<Portal node={this.props.svg}>
{this.props.narratives.map(n => this.renderNarrative(n))}
</Portal>
);
)
}
}
export default MapNarratives;
export default MapNarratives