From 12e309ed8aace3e49756226e36a852ff277f7bcc Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Mon, 8 Jun 2020 16:47:34 +0200 Subject: [PATCH] enable modifying event radius from config --- src/common/global.js | 7 +------ src/components/Map.jsx | 4 +++- src/components/Timeline.jsx | 8 +++++--- src/components/presentational/Map/Events.jsx | 5 +++-- src/components/presentational/Timeline/Events.js | 14 ++++++++------ src/components/presentational/Timeline/Markers.js | 5 +++-- src/components/presentational/Timeline/Project.js | 4 ++-- src/selectors/index.js | 7 ++++--- src/store/initial.js | 3 ++- 9 files changed, 31 insertions(+), 26 deletions(-) diff --git a/src/common/global.js b/src/common/global.js index f6a2800..9ba06d0 100644 --- a/src/common/global.js +++ b/src/common/global.js @@ -5,14 +5,9 @@ export const colors = { white: '#fff' } -export const sizes = { - eventDotR: 8 -} - export default { fallbackEventColor: colors.fa_red, darkBackground: colors.black, primaryHighlight: colors.yellow, - secondaryHighlight: colors.white, - sizes + secondaryHighlight: colors.white } diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 843693f..319c0fe 100644 --- a/src/components/Map.jsx +++ b/src/components/Map.jsx @@ -215,6 +215,7 @@ class Map extends React.Component { onSelect={this.props.methods.onSelect} onSelectNarrative={this.props.methods.onSelectNarrative} getCategoryColor={this.props.methods.getCategoryColor} + eventRadius={this.props.ui.eventRadius} /> ) } @@ -286,7 +287,8 @@ function mapStateToProps (state) { dom: state.ui.dom, narratives: state.ui.style.narratives, mapSelectedEvents: state.ui.style.selectedEvents, - shapes: state.ui.style.shapes + shapes: state.ui.style.shapes, + eventRadius: state.ui.eventRadius }, features: selectors.getFeatures(state) } diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index 3c0bd4a..5f3fdc3 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -51,7 +51,6 @@ class Timeline extends React.Component { if ((hash(nextProps.domain.categories) !== hash(this.props.domain.categories)) || hash(nextProps.dimensions) !== hash(this.props.dimensions)) { const { trackHeight, marginTop } = nextProps.dimensions - console.log(nextProps.domain.categories) this.setState({ scaleY: this.makeScaleY(nextProps.domain.categories, trackHeight, marginTop) }) @@ -283,7 +282,7 @@ class Timeline extends React.Component { const { category, project } = event if (GRAPH_NONLOCATED && GRAPH_NONLOCATED.categories.includes(category)) { - return this.state.dims.marginTop + domain.projects[project].offset + sizes.eventDotR + return this.state.dims.marginTop + domain.projects[project].offset + this.props.ui.eventRadius } return this.state.scaleY(category) } @@ -364,6 +363,7 @@ class Timeline extends React.Component { transitionDuration={this.state.transitionDuration} styles={this.props.ui.styles} features={this.props.features} + eventRadius={this.props.ui.eventRadius} /> @@ -412,7 +413,8 @@ function mapStateToProps (state) { }, ui: { dom: state.ui.dom, - styles: state.ui.style.selectedEvents + styles: state.ui.style.selectedEvents, + eventRadius: state.ui.eventRadius }, features: selectors.getFeatures(state) } diff --git a/src/components/presentational/Map/Events.jsx b/src/components/presentational/Map/Events.jsx index 33e949d..33fb734 100644 --- a/src/components/presentational/Map/Events.jsx +++ b/src/components/presentational/Map/Events.jsx @@ -12,7 +12,8 @@ function MapEvents ({ narrative, onSelect, svg, - locations + locations, + eventRadius }) { function getCoordinatesForPercent (radius, percent) { const x = radius * Math.cos(2 * Math.PI * percent) @@ -55,7 +56,7 @@ function MapEvents ({ return ( {colorSlices.map((color, idx) => { - const r = 10 + const r = eventRadius // Based on the number of events in each location, // create a slice per event filled with its category color diff --git a/src/components/presentational/Timeline/Events.js b/src/components/presentational/Timeline/Events.js index deb3145..d6c55eb 100644 --- a/src/components/presentational/Timeline/Events.js +++ b/src/components/presentational/Timeline/Events.js @@ -5,7 +5,6 @@ import DatetimeSquare from './DatetimeSquare' import DatetimeStar from './DatetimeStar' import Project from './Project' import { calcOpacity } from '../../../common/utilities' -import { sizes } from '../../../common/global' function renderDot (event, styles, props) { return } @@ -30,7 +29,7 @@ function renderBar (event, styles, props) { events={[event]} x={props.x} y={props.dims.marginTop} - width={sizes.eventDotR / 4} + width={props.eventRadius / 4} height={props.dims.trackHeight} styleProps={{ ...styles, fillOpacity }} highlights={props.highlights} @@ -42,7 +41,7 @@ function renderDiamond (event, styles, props) { onSelect={props.onSelect} x={props.x} y={props.y} - r={1.8 * sizes.eventDotR} + r={1.8 * props.eventRadius} styleProps={styles} /> } @@ -52,7 +51,7 @@ function renderStar (event, styles, props) { onSelect={props.onSelect} x={props.x} y={props.y} - r={1.8 * sizes.eventDotR} + r={1.8 * props.eventRadius} styleProps={{ ...styles, fillRule: 'nonzero' }} transform='rotate(90)' /> @@ -71,7 +70,8 @@ const TimelineEvents = ({ dims, features, setLoading, - setNotLoading + setNotLoading, + eventRadius }) => { const narIds = narrative ? narrative.steps.map(s => s.id) : [] @@ -107,6 +107,7 @@ const TimelineEvents = ({ return renderShape(event, styles, { x: getDatetimeX(event.datetime), y: eventY, + eventRadius, onSelect: () => onSelect(event), dims, highlights: features.HIGHLIGHT_GROUPS ? getHighlights(event.filters[features.HIGHLIGHT_GROUPS.filterIndexIndicatingGroup]) : [], @@ -120,6 +121,7 @@ const TimelineEvents = ({ return {Object.values(projects).map(project => console.log(project)} getX={getDatetimeX} dims={dims} diff --git a/src/components/presentational/Timeline/Markers.js b/src/components/presentational/Timeline/Markers.js index dbd0dee..0099245 100644 --- a/src/components/presentational/Timeline/Markers.js +++ b/src/components/presentational/Timeline/Markers.js @@ -3,6 +3,7 @@ import colors, { sizes } from '../../../common/global' const TimelineMarkers = ({ styles, + eventRadius, getEventX, getEventY, transitionDuration, @@ -27,7 +28,7 @@ const TimelineMarkers = ({ '-moz-transition': 'none', 'opacity': 0.9 }} - r={sizes.eventDotR * 2} + r={eventRadius * 2} /> } function renderBar () { @@ -35,7 +36,7 @@ const TimelineMarkers = ({ className='timeline-marker' x={0} y={0} - width={sizes.eventDotR / 3} + width={eventRadius / 3} height={dims.contentHeight - 55} stroke={styles ? styles.stroke : colors.primaryHighlight} stroke-opacity='1' diff --git a/src/components/presentational/Timeline/Project.js b/src/components/presentational/Timeline/Project.js index e162aa0..1574076 100644 --- a/src/components/presentational/Timeline/Project.js +++ b/src/components/presentational/Timeline/Project.js @@ -1,5 +1,4 @@ import React from 'react' -import { sizes } from '../../../common/global' export default ({ offset, @@ -10,6 +9,7 @@ export default ({ y, dims, colour, + eventRadius, onClick }) => { const length = getX(end) - getX(start) @@ -21,6 +21,6 @@ export default ({ y={dims.marginTop + offset} width={length} style={{ fill: colour, fillOpacity: 0.2 }} - height={2 * sizes.eventDotR} + height={2 * eventRadius} /> } diff --git a/src/selectors/index.js b/src/selectors/index.js index 4a66352..d52c430 100644 --- a/src/selectors/index.js +++ b/src/selectors/index.js @@ -21,6 +21,7 @@ export const getTimeRange = state => state.app.timeline.range export const getTimelineDimensions = state => state.app.timeline.dimensions export const selectNarrative = state => state.app.narrative export const getFeatures = state => state.features +export const getEventRadius = state => state.ui.eventRadius export const selectSites = createSelector([getSites, getFeatures], (sites, features) => { if (features.USE_SITES) { @@ -158,12 +159,12 @@ export const selectLocations = createSelector( ) export const selectEventsWithProjects = createSelector( - [selectEvents, getFeatures], - (events, features) => { + [selectEvents, getFeatures, getEventRadius], + (events, features, eventRadius) => { if (!features.GRAPH_NONLOCATED) { return [events, []] } - const projSize = 2 * sizes.eventDotR + const projSize = 2 * eventRadius const projectIdx = features.GRAPH_NONLOCATED.projectIdx || 0 const getProject = ev => ev.filters[projectIdx] const projects = {} diff --git a/src/store/initial.js b/src/store/initial.js index 7a11c5a..8976525 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -127,7 +127,8 @@ const initial = { timeline: 'timeline', timeslider: 'timeslider', map: 'map' - } + }, + eventRadius: 8 }, features: {