Skip to content

Commit c20bea1

Browse files
istarkovistarkov
committed
seems all done
1 parent 35a0e74 commit c20bea1

File tree

5 files changed

+91
-52
lines changed

5 files changed

+91
-52
lines changed

‎web/flux/actions/map_actions.js

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
MARKER_HOVER_INDEX_CHANGE_MAP,
99
SHOW_BALLON_MAP} from '../consts/map_actions_types.js';
1010

11-
import genMarkersData from 'components/examples/data/gen_markers_data.js';
11+
import genMarkersData from '../components/examples/data/gen_markers_data.js';
1212

1313
// to emulate server async call
1414
const getDataAsync = (ms = 0, data = null) => new Promise(r => setTimeout(() => r(data), ms));
@@ -45,17 +45,29 @@ export function changeBounds({center, zoom, bounds, marginBounds}) {
4545
}
4646

4747
export function tableVisibleRowsChange(params) {
48-
return asyncActions.tableVisibleRowsChange(params);
48+
return {
49+
types: [null, TABLE_VISIBLE_ROWS_CHANGE_MAP, null],
50+
promise: asyncActions.tableVisibleRowsChange(params)
51+
};
4952
}
5053

51-
export function tableHoveredRowIndexChange(index) {
52-
return index;
54+
export function tableHoveredRowIndexChange(hoveredRowIndex) {
55+
return {
56+
type: TABLE_HOVERED_ROWS_INDEX_CHANGE_MAP,
57+
hoveredRowIndex
58+
};
5359
}
5460

55-
export function markerHoverIndexChange(index) {
56-
return index;
61+
export function markerHoverIndexChange(hoverMarkerIndex) {
62+
return {
63+
type: MARKER_HOVER_INDEX_CHANGE_MAP,
64+
hoverMarkerIndex
65+
};
5766
}
5867

59-
export function showBallon(index) {
60-
return index;
68+
export function showBallon(openBalloonIndex) {
69+
return {
70+
type: SHOW_BALLON_MAP,
71+
openBalloonIndex
72+
};
6173
}

‎web/flux/components/examples/x_main/main_map_block.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import {getScale, getRealFromTo} from '../helpers/calc_markers_visibility.js';
99
import markerDescriptions from '../constants/marker_descriptions.js';
1010
import {customDistanceToMouse} from '../helpers/custom_distance.js';
1111

12+
import {List} from 'immutable';
13+
1214
const K_MARGIN_TOP = 30;
1315
const K_MARGIN_RIGHT = 30;
1416
const K_MARGIN_BOTTOM = 30;
@@ -35,7 +37,7 @@ export default class MainMapBlock extends Component {
3537
}
3638

3739
static defaultProps = {
38-
center: [59.744465, 30.042834],
40+
center: new List([59.744465, 30.042834]),
3941
zoom: 10,
4042
visibleRowFirst: -1,
4143
visibleRowLast: -1,

‎web/flux/components/examples/x_main/main_map_page.jsx

Lines changed: 33 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,22 @@ import MainMapLayout from './main_map_layout.jsx';
55
import IceTable from 'components/controls/fixed_table_examples/ice_table.jsx';
66
import MainMapBlock from './main_map_block.jsx';
77

8-
import {Connector} from 'redux/react';
8+
import { Connector } from 'redux/react';
99
import { bindActionCreators } from 'redux';
1010

11+
import * as allMapActions from 'actions/map_actions.js';
12+
13+
// slice actions to support map and table interfaces
14+
const mapActions = (({ changeBounds: onBoundsChange, markerHoverIndexChange: onMarkerHover, showBallon: onChildClick}) => ({
15+
onBoundsChange, onMarkerHover, onChildClick
16+
}))(allMapActions);
17+
18+
19+
const tableActions = (({ tableHoveredRowIndexChange: onHoveredRowIndexChange, tableVisibleRowsChange: onVisibleRowsChange, showBallon: onRowClick}) => ({
20+
onHoveredRowIndexChange, onVisibleRowsChange, onRowClick
21+
}))(allMapActions);
22+
23+
1124
export default class MainMapPage extends Component {
1225
static propTypes = {
1326
layout: PropTypes.string
@@ -21,46 +34,30 @@ export default class MainMapPage extends Component {
2134

2235
_renderMap() {
2336
return (
24-
<FluxComponent connectToStores={{
25-
map: (store) => ({
26-
center: store.getMapInfo().get('center'),
27-
zoom: store.getMapInfo().get('zoom'),
28-
markers: store.getMarkers(),
29-
visibleRowFirst: store.getTableRowsInfo().get('visibleRowFirst'),
30-
visibleRowLast: store.getTableRowsInfo().get('visibleRowLast'),
31-
maxVisibleRows: store.getTableRowsInfo().get('maxVisibleRows'),
32-
hoveredRowIndex: store.getTableRowsInfo().get('hoveredRowIndex'),
33-
openBallonIndex: store.getOpenBalloonIndex()
34-
})}}
35-
injectActions={{
36-
map: (actions) => ({
37-
onBoundsChange: actions.changeBounds,
38-
onMarkerHover: actions.markerHoverIndexChange,
39-
onChildClick: actions.showBallon
40-
})
41-
}}>
42-
<MainMapBlock />
43-
</FluxComponent>
37+
<Connector select={state => ({
38+
center: state.map.get('mapInfo').get('center'),
39+
zoom: state.map.get('mapInfo').get('zoom'),
40+
markers: state.map.get('dataFiltered'),
41+
visibleRowFirst: state.map.get('tableRowsInfo').get('visibleRowFirst'),
42+
visibleRowLast: state.map.get('tableRowsInfo').get('visibleRowLast'),
43+
maxVisibleRows: state.map.get('tableRowsInfo').get('maxVisibleRows'),
44+
hoveredRowIndex: state.map.get('tableRowsInfo').get('hoveredRowIndex'),
45+
openBallonIndex: state.map.get('openBalloonIndex')
46+
})}>
47+
{({dispatch, ...mapProps}) => (<MainMapBlock {...mapProps} {...bindActionCreators(mapActions, dispatch)} />)}
48+
</Connector>
4449
);
4550
}
4651

4752
_renderTable() {
4853
return (
49-
<FluxComponent connectToStores={{
50-
map: (store) => ({
51-
markers: store.getMarkers(),
52-
hoveredMapRowIndex: store.getHoverMarkerIndex(),
53-
resetToStartObj: store.getMapInfo()
54-
})}}
55-
injectActions={{
56-
map: (actions) => ({
57-
onHoveredRowIndexChange: actions.tableHoveredRowIndexChange,
58-
onVisibleRowsChange: actions.tableVisibleRowsChange,
59-
onRowClick: actions.showBallon
60-
})
61-
}}>
62-
<IceTable />
63-
</FluxComponent>
54+
<Connector select={state => ({
55+
markers: state.map.get('dataFiltered'),
56+
hoveredMapRowIndex: state.map.get('hoverMarkerIndex'),
57+
resetToStartObj: state.map.get('mapInfo')
58+
})}>
59+
{({dispatch, ...tableProps}) => (<IceTable {...tableProps} {...bindActionCreators(tableActions, dispatch)} />)}
60+
</Connector>
6461
);
6562
}
6663

‎web/flux/components/main.jsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ import * as routeNames from 'actions/user_routes.js';
44
import {examples} from 'consts/example_defs.js';
55
import {Connector} from 'redux/react';
66

7-
/*
87
import MainMapPage from './examples/x_main/main_map_page.jsx';
9-
*/
108

119
import SimpleMapPage from './examples/x_simple/simple_map_page.jsx';
1210
import OptionsMapPage from './examples/x_options/options_map_page.jsx';
@@ -32,7 +30,7 @@ export default class Main extends Component {
3230

3331
_selectExample(exampleName, props) {
3432
switch (exampleName) {
35-
/*
33+
3634
case examples.main:
3735
return (
3836
<MainMapPage />
@@ -42,7 +40,7 @@ export default class Main extends Component {
4240
return (
4341
<MainMapPage layout="R" />
4442
);
45-
*/
43+
4644
case examples.simple:
4745
return (
4846
<SimpleMapPage />

‎web/flux/stores/map_store.js

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {
22
QUERY_MAP,
3-
TABLE_VISIBLE_ROWS_CHANGE_MAP,
43
CHANGE_BOUNDS_MAP,
4+
TABLE_VISIBLE_ROWS_CHANGE_MAP,
55
TABLE_HOVERED_ROWS_INDEX_CHANGE_MAP,
66
MARKER_HOVER_INDEX_CHANGE_MAP,
77
SHOW_BALLON_MAP} from '../consts/map_actions_types.js';
@@ -21,6 +21,7 @@ function ptInRect(pt, rect) {
2121
// use rbush https://github.com/mourner/rbush if you have really big amount of points
2222
function calcFilteredAndSortedMarkers(data, mapInfo) {
2323
const marginBounds = mapInfo && mapInfo.get('marginBounds');
24+
2425
if (!data || !marginBounds) {
2526
return new List();
2627
}
@@ -32,6 +33,7 @@ function calcFilteredAndSortedMarkers(data, mapInfo) {
3233
function defaultMapState() {
3334
return immutable.fromJS({
3435
data: [],
36+
dataFiltered: [],
3537

3638
mapInfo: {
3739
center: [59.938043, 30.337157],
@@ -58,10 +60,38 @@ export default function map(state = defaultMapState(), {type: exampleActionType,
5860
switch (exampleActionType) {
5961
case QUERY_MAP:
6062
const {markersData} = data;
61-
return state.set('data', markersData);
63+
return state
64+
.set('data', markersData)
65+
.update(s => s.set('dataFiltered', calcFilteredAndSortedMarkers(s.get('data'), s.get('mapInfo'))));
66+
6267
case CHANGE_BOUNDS_MAP:
6368
const {center, zoom, bounds, marginBounds} = data;
64-
return state.set('mapInfo', new Map({center, zoom, bounds, marginBounds}));
69+
return state
70+
.update('mapInfo', mapInfo => mapInfo.merge({center, zoom, bounds, marginBounds}))
71+
.set('openBalloonIndex', -1)
72+
.update(s => s.set('dataFiltered', calcFilteredAndSortedMarkers(s.get('data'), s.get('mapInfo'))));
73+
74+
case TABLE_VISIBLE_ROWS_CHANGE_MAP:
75+
const {visibleRowFirst, visibleRowLast, maxVisibleRows} = data;
76+
return state
77+
.update('tableRowsInfo', tableRowsInfo => tableRowsInfo.merge({visibleRowFirst, visibleRowLast, maxVisibleRows}))
78+
.set('openBalloonIndex', -1);
79+
80+
case TABLE_HOVERED_ROWS_INDEX_CHANGE_MAP:
81+
const {hoveredRowIndex} = data;
82+
return state
83+
.update('tableRowsInfo', tableRowsInfo => tableRowsInfo.merge({hoveredRowIndex}));
84+
85+
case MARKER_HOVER_INDEX_CHANGE_MAP:
86+
const {hoverMarkerIndex} = data;
87+
return state
88+
.set('hoverMarkerIndex', hoverMarkerIndex);
89+
90+
case SHOW_BALLON_MAP:
91+
const {openBalloonIndex} = data;
92+
return state
93+
.set('openBalloonIndex', openBalloonIndex === state.get('openBalloonIndex') ? -1 : openBalloonIndex);
94+
6595
default:
6696
return state;
6797
}

0 commit comments

Comments
 (0)