Skip to content

Commit c445fc3

Browse files
willemarcelwillemarcel
authored
Merge pull request #511 from mapbox/all-features-box
List geometry changes, modified relations, created and deleted features
2 parents 513009d + 08b4e25 commit c445fc3

File tree

8 files changed

+372
-19
lines changed

8 files changed

+372
-19
lines changed

‎src/assets/index.css

-4
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,6 @@ img {
7575
min-height: 55px !important;
7676
}
7777

78-
.hmin186 {
79-
min-height: 186px !important;
80-
}
81-
8278
.hfull-55 {
8379
height: calc(100% - 55px);
8480
}

‎src/components/changeset/box.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ import React from 'react';
22

33
export const Box = ({ children, pullDown, pullUp, className, style, bg }) => (
44
<div className={`mb3 z4 bg-gray-faint ${className} `} style={style}>
5-
<div className={`${bg} scroll-styled scroll-auto hmax360 hmin186`}>
5+
<div
6+
className={`${bg} scroll-styled scroll-auto hmax360`}
7+
style={{ minHeight: '248px' }}
8+
>
69
{children}
710
</div>
811
</div>

‎src/components/changeset/control_layout.js

+26-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {
77
CHANGESET_DETAILS_DETAILS,
88
CHANGESET_DETAILS_SUSPICIOUS,
99
CHANGESET_DETAILS_TAGS,
10+
CHANGESET_DETAILS_GEOMETRY_CHANGES,
11+
CHANGESET_DETAILS_OTHER_FEATURES,
1012
CHANGESET_DETAILS_USER,
1113
CHANGESET_DETAILS_DISCUSSIONS,
1214
CHANGESET_DETAILS_MAP
@@ -18,6 +20,8 @@ export function ControlLayout({
1820
discussions,
1921
toggleDetails,
2022
toggleFeatures,
23+
toggleOtherFeatures,
24+
toggleGeometryChanges,
2125
toggleTags,
2226
toggleDiscussions,
2327
toggleUser,
@@ -48,7 +52,7 @@ export function ControlLayout({
4852
>
4953
<svg
5054
className={`icon h18 w18 inline-block align-middle ${
51-
features && features.size == 0 ? 'color-darken25' : 'color-black'
55+
features && features.size === 0 ? 'color-darken25' : 'color-black'
5256
}`}
5357
>
5458
<use xlinkHref="#icon-alert" />
@@ -64,6 +68,26 @@ export function ControlLayout({
6468
<use xlinkHref="#icon-hash" />
6569
</svg>
6670
</Control>
71+
<Control
72+
active={bindingsState.get(CHANGESET_DETAILS_GEOMETRY_CHANGES.label)}
73+
onClick={toggleGeometryChanges}
74+
bg={'gray-faint'}
75+
className="unround"
76+
>
77+
<svg className="icon h18 w18 inline-block align-middle">
78+
<use xlinkHref="#icon-point-line" />
79+
</svg>
80+
</Control>
81+
<Control
82+
active={bindingsState.get(CHANGESET_DETAILS_OTHER_FEATURES.label)}
83+
onClick={toggleOtherFeatures}
84+
bg={'gray-faint'}
85+
className="unround"
86+
>
87+
<svg className="icon h18 w18 inline-block align-middle">
88+
<use xlinkHref="#icon-plus" />
89+
</svg>
90+
</Control>
6791
<Control
6892
active={bindingsState.get(CHANGESET_DETAILS_DISCUSSIONS.label)}
6993
onClick={toggleDiscussions}
@@ -72,7 +96,7 @@ export function ControlLayout({
7296
>
7397
<svg
7498
className={`icon h18 w18 inline-block align-middle ${
75-
discussions.size == 0 ? 'color-darken25' : 'color-black'
99+
discussions.size === 0 ? 'color-darken25' : 'color-black'
76100
}`}
77101
>
78102
<use xlinkHref="#icon-contact" />

‎src/components/changeset/geometry_changes.js

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
// @flow
2+
import React from 'react';
3+
import { connect } from 'react-redux';
4+
5+
import { is } from 'immutable';
6+
7+
import type { RootStateType } from '../store';
8+
import { selectFeature } from '../../views/map';
9+
import { getFeatures } from './tag_changes';
10+
11+
function processFeatures(features) {
12+
const finalReport = new Map();
13+
const keys = ['node', 'way', 'relation'];
14+
keys.map(key =>
15+
finalReport.set(
16+
key,
17+
features
18+
.filter(item => item[0].properties.action === 'modify')
19+
.filter(item => item[0].properties.type === key)
20+
.filter(
21+
item =>
22+
JSON.stringify(item[0].geometry) !==
23+
JSON.stringify(item[1].geometry)
24+
)
25+
.map(item => ({ id: item[0].properties.id }))
26+
)
27+
);
28+
return finalReport;
29+
}
30+
31+
function GeometryChangesListItem({ id }) {
32+
return (
33+
<li>
34+
<span className="pointer" onClick={() => selectFeature(id)}>
35+
{id}
36+
</span>
37+
</li>
38+
);
39+
}
40+
41+
class GeometryChangesItem extends React.PureComponent {
42+
constructor(props) {
43+
super(props);
44+
this.state = {
45+
opened: false
46+
};
47+
this.tag = props.action[0];
48+
this.value = props.action[1];
49+
this.handleChange = this.handleChange.bind(this);
50+
}
51+
handleChange() {
52+
this.setState({ opened: !this.state.opened });
53+
}
54+
render() {
55+
const titles = { node: 'Nodes', way: 'Ways', relation: 'Relations' };
56+
return (
57+
<div>
58+
<span className="pointer" onClick={this.handleChange}>
59+
{this.state.opened ? (
60+
<svg
61+
className="icon h18 w18 inline-block"
62+
style={{ verticalAlign: 'text-bottom' }}
63+
>
64+
<use xlinkHref={'#icon-chevron-down'} />
65+
</svg>
66+
) : (
67+
<svg
68+
className="icon h18 w18 inline-block"
69+
style={{ verticalAlign: 'text-bottom' }}
70+
>
71+
<use xlinkHref={'#icon-chevron-right'} />
72+
</svg>
73+
)}
74+
<span>{titles[this.tag]}</span>
75+
<strong className="bg-blue-faint color-blue-dark mx6 px6 py3 txt-s round">
76+
{this.value.length}
77+
</strong>
78+
</span>
79+
<ul
80+
className="cmap-vlist"
81+
style={{
82+
display: this.state.opened ? 'block' : 'none'
83+
}}
84+
>
85+
{this.value.map((item, k) => (
86+
<GeometryChangesListItem id={item.id} key={k} />
87+
))}
88+
</ul>
89+
</div>
90+
);
91+
}
92+
}
93+
94+
type propsType = {|
95+
changesetId: string,
96+
changes: Object
97+
|};
98+
99+
class GeometryChanges extends React.PureComponent<void, propsType> {
100+
state = {
101+
changesetId: this.props.changesetId,
102+
changes: this.props.changes
103+
};
104+
105+
componentWillReceiveProps(nextProps: propsType) {
106+
if (!is(this.props.changes, nextProps.changes)) {
107+
this.setState({
108+
changes: nextProps.changes
109+
});
110+
}
111+
}
112+
113+
render() {
114+
const changeReport = [];
115+
if (
116+
this.state &&
117+
this.state.changes &&
118+
this.state.changes.get(this.props.changesetId)
119+
) {
120+
const changes = this.state.changes.get(this.props.changesetId)[
121+
'featureMap'
122+
];
123+
processFeatures(getFeatures(changes)).forEach((featureIDs, tag) =>
124+
changeReport.push([tag, featureIDs])
125+
);
126+
}
127+
return (
128+
<div className="px12 py6">
129+
<h2 className="txt-m txt-uppercase txt-bold mr6 mb3">
130+
Geometry Changes
131+
</h2>
132+
{changeReport.length ? (
133+
changeReport
134+
.filter(changeType => changeType[1].length)
135+
.map((changeType, k) => (
136+
<GeometryChangesItem key={k} action={changeType} />
137+
))
138+
) : (
139+
<span>No geometry changes in this changeset.</span>
140+
)}
141+
</div>
142+
);
143+
}
144+
}
145+
146+
GeometryChanges = connect((state: RootStateType, props) => ({
147+
changes: state.changeset.get('changesetMap')
148+
}))(GeometryChanges);
149+
150+
export { GeometryChanges };

‎src/components/changeset/index.js

+26
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { Header } from './header';
1010
import { User } from './user';
1111
import { Features } from './features';
1212
import { TagChanges } from './tag_changes';
13+
import { OtherFeatures } from './other_features';
14+
import { GeometryChanges } from './geometry_changes';
1315
import { Box } from './box';
1416
import { Discussions } from './discussions';
1517
import { MapOptions } from './map_options';
@@ -23,6 +25,8 @@ import {
2325
CHANGESET_DETAILS_DETAILS,
2426
CHANGESET_DETAILS_SUSPICIOUS,
2527
CHANGESET_DETAILS_TAGS,
28+
CHANGESET_DETAILS_GEOMETRY_CHANGES,
29+
CHANGESET_DETAILS_OTHER_FEATURES,
2630
CHANGESET_DETAILS_USER,
2731
CHANGESET_DETAILS_DISCUSSIONS,
2832
CHANGESET_DETAILS_MAP
@@ -120,6 +124,16 @@ export class _Changeset extends React.PureComponent<*, propsType, *> {
120124
<TagChanges changesetId={changesetId} />
121125
</Box>
122126
)}
127+
{bindingsState.get(CHANGESET_DETAILS_GEOMETRY_CHANGES.label) && (
128+
<Box key={5} className=" responsive-box round-tr round-br">
129+
<GeometryChanges changesetId={changesetId} />
130+
</Box>
131+
)}
132+
{bindingsState.get(CHANGESET_DETAILS_OTHER_FEATURES.label) && (
133+
<Box key={5} className=" responsive-box round-tr round-br">
134+
<OtherFeatures changesetId={changesetId} />
135+
</Box>
136+
)}
123137
{bindingsState.get(CHANGESET_DETAILS_DISCUSSIONS.label) && (
124138
<Box key={1} className=" responsive-box round-tr round-br">
125139
<Discussions
@@ -183,10 +197,18 @@ export class _Changeset extends React.PureComponent<*, propsType, *> {
183197
this.props.exclusiveKeyToggle &&
184198
this.props.exclusiveKeyToggle(CHANGESET_DETAILS_SUSPICIOUS.label);
185199
};
200+
toggleOtherFeatures = () => {
201+
this.props.exclusiveKeyToggle &&
202+
this.props.exclusiveKeyToggle(CHANGESET_DETAILS_OTHER_FEATURES.label);
203+
};
186204
toggleTags = () => {
187205
this.props.exclusiveKeyToggle &&
188206
this.props.exclusiveKeyToggle(CHANGESET_DETAILS_TAGS.label);
189207
};
208+
toggleGeometryChanges = () => {
209+
this.props.exclusiveKeyToggle &&
210+
this.props.exclusiveKeyToggle(CHANGESET_DETAILS_GEOMETRY_CHANGES.label);
211+
};
190212
toggleDiscussions = () => {
191213
this.props.exclusiveKeyToggle &&
192214
this.props.exclusiveKeyToggle(CHANGESET_DETAILS_DISCUSSIONS.label);
@@ -212,7 +234,9 @@ export class _Changeset extends React.PureComponent<*, propsType, *> {
212234
<ControlLayout
213235
toggleDetails={this.toggleDetails}
214236
toggleFeatures={this.toggleFeatures}
237+
toggleOtherFeatures={this.toggleOtherFeatures}
215238
toggleTags={this.toggleTags}
239+
toggleGeometryChanges={this.toggleGeometryChanges}
216240
toggleDiscussions={this.toggleDiscussions}
217241
toggleUser={this.toggleUser}
218242
toggleMapOptions={this.toggleMapOptions}
@@ -234,6 +258,8 @@ let Changeset = keyboardToggleEnhancer(
234258
CHANGESET_DETAILS_DETAILS,
235259
CHANGESET_DETAILS_SUSPICIOUS,
236260
CHANGESET_DETAILS_TAGS,
261+
CHANGESET_DETAILS_GEOMETRY_CHANGES,
262+
CHANGESET_DETAILS_OTHER_FEATURES,
237263
CHANGESET_DETAILS_USER,
238264
CHANGESET_DETAILS_DISCUSSIONS,
239265
CHANGESET_DETAILS_MAP

0 commit comments

Comments
 (0)