Skip to content

Commit

Permalink
Geolines and grids in Cesium
Browse files Browse the repository at this point in the history 
#272 prevents some geolines from being properly cleared
  • Loading branch information
@landswellsong
landswellsong committed Aug 8, 2017
1 parent dbb720a commit 9cbf33c
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 138 deletions.
23 changes: 22 additions & 1 deletion frontend/app/components/BaseMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export default class BaseContainer extends Component {
visible: false
};
}
window.geolines = this.geolineMapping.handles;

}

Expand Down Expand Up @@ -99,13 +100,16 @@ export default class BaseContainer extends Component {

componentWillReceiveProps(newProps) {
/* check if the state has stuff that the map doesn't know */
let needsRepaint = false;

/* new geolines */
newProps.options.geolines.forEach(function(geoline) {
/* indexOf compares by reference (===) */
if(this.geolineMapping.keys.indexOf(geoline) < 0) {
this.geolineMapping.keys.push(geoline);
this.geolineMapping.handles.push(this.makeGeolineSet(geoline));

needsRepaint = true;
}
}.bind(this));

Expand All @@ -115,20 +119,24 @@ export default class BaseContainer extends Component {
let geoline = this.geolineMapping.keys[i];

if(newProps.options.geolines.indexOf(geoline) < 0) {
/* #272: 3D geolines are messed up and don't clear up correctly */
this.cascade(this.geolineMapping.handles[i], this.clearHandle);

this.geolineMapping.keys.splice(i, 1);
this.geolineMapping.handles.splice(i, 1);

/* retry the same position since the array has shifted */
i--;

needsRepaint = true;
}
}

/* grid isolines and visibility */
for (let gridkey in GridTypes) {
let gridtype = GridTypes[gridkey];
let grid = newProps.options.grid[gridtype];
let forceVisibilityChange = false;

/* create/remove the handle if data changed */
if(grid.data != this.gridMapping[gridtype].data) {
Expand All @@ -137,29 +145,42 @@ export default class BaseContainer extends Component {
this.cascade(this.gridMapping[gridtype].handles, this.clearHandle);
this.gridMapping[gridtype].handles = null;
this.gridMapping[gridtype].visible = false;

needsRepaint = true;
}

/* if the new data is real, create isolines */
if(grid.data != null) {
/* TODO: regular non-isoline grid */
this.gridMapping[gridtype].handles = this.makeIsolines(grid.data);
/* make sure the visibility state matches what the grid expects */
forceVisibilityChange = true;

needsRepaint = true;
}

this.gridMapping[gridtype].data = grid.data;
}

/* hide/show */
if(grid.visible != this.gridMapping[gridtype].visible) {
if(grid.visible != this.gridMapping[gridtype].visible || forceVisibilityChange) {
/* only change visibility if we have anything to show */
if(this.gridMapping[gridtype].handles) {
this.cascade(this.gridMapping[gridtype].handles, function(handles) {
this.setVisible(handles, grid.visible);
}.bind(this));

needsRepaint = true;
}

/* update internal state anyway */
this.gridMapping[gridtype].visible = grid.visible;
}
}

/* If anything visibly changed, update the view */
if(needsRepaint) {
this.repaint();
}
}
};
75 changes: 14 additions & 61 deletions frontend/app/components/CesiumMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export default class CesiumContainer extends BaseContainer {
this.previewShape = this.previewShape.bind(this);
this.pointToRadius = this.pointToRadius.bind(this);
this.makeSelectionPoint = this.makeSelectionPoint.bind(this);
this.clearHandle = this.clearHandle.bind(this);

/* enable render on this events */
this.eventHandler = null;
Expand All @@ -104,6 +105,8 @@ export default class CesiumContainer extends BaseContainer {

/* materials */
this.previewMaterial = Material.fromType('Stripe');

window.cesium = this;
}

/* update only for fullscreen toggling */
Expand All @@ -113,7 +116,7 @@ export default class CesiumContainer extends BaseContainer {
this.props.options.dims.height !== nextProps.options.dims.height);
}

componentWillReceiveProps(nextProps) {
componentWillReceivePropsXXX(nextProps) {
this.updateMap(nextProps);
this.repaint();
}
Expand Down Expand Up @@ -499,39 +502,20 @@ export default class CesiumContainer extends BaseContainer {
});
}

/* remove the marker by handle */
clearHandle(handle) {
this.viewer.entities.remove(handle);
}

/* change visibility of a marker */
setVisible(handle, visible) {
handle.show = visible;
}

updateMap(maybeProps) {
let props = maybeProps !== undefined ? maybeProps : this.props;

if(! props.selection.active) {
for (let gridkey in GridTypes) {
let gridtype = GridTypes[gridkey];
let grid = props.options.grid[gridtype];

/* TODO: refactor */
if(Array.isArray(grid.data) && this.magGridHandle[gridtype] == null) {
this.magGridHandle[gridtype] = this.makeIsolines(grid.data);
} else if (grid.data == null && this.magGridHandle[gridtype] != null) {
this.magGridHandle[gridtype].forEach(function(handle) {
this.clearShape(handle);
}.bind(this));
this.magGridHandle[gridtype] = null;
}

/* visibility control */
// TODO: constantly adding/removing might be excessive, general fix coming in #244
if(this.magGridHandle[gridtype]) {
if(grid.visible) {
this.magGridHandle[gridtype].forEach(function(shape) {
shape.show = true;
}.bind(this));
} else {
this.magGridHandle[gridtype].forEach(function(shape) {
shape.show = false;
}.bind(this));
}
}
}

/* clear preview */
this.previewHandle && this.viewer.scene.primitives.remove(this.previewHandle);

Expand Down Expand Up @@ -578,37 +562,6 @@ export default class CesiumContainer extends BaseContainer {
this.geolineHandles.forEach(function(handle) {
this.clearShape(handle);
}.bind(this));

/* draw new geolines if they're present */
if(Array.isArray(props.options.geolines) && props.options.geolines.length > 0) {
this.geolineHandles = new Array();

props.options.geolines.forEach(function(geoline){
// TODO generalise to UniversalMap
// TODO stub code
let last = 0;
geoline.selection.forEach(function(segment) {
let seg = { start: segment.start - geoline.offset,
end: segment.end - geoline.offset };

// +1 to include seg.start and seg.end
if(seg.start - last > 0) {
this.geolineHandles.push(this.makeGeoline(geoline.geo_line.slice(last, seg.start + 1), MapStyle.SessionLeftovers));
}

if(seg.end - seg.start > 0) {
this.geolineHandles.push(this.makeGeoline(geoline.geo_line.slice(seg.start, seg.end + 1), MapStyle.Session));
}

last = seg.end;
}.bind(this));

if(geoline.geo_line.length - 1 - last > 0) {
this.geolineHandles.push(this.makeGeoline(geoline.geo_line.slice(last), MapStyle.SessionLeftovers));
}
// TODO end of stub code
}.bind(this));
}
}
}

Expand Down
85 changes: 9 additions & 76 deletions frontend/app/components/LeafletMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,11 @@ export default class LeafletContainer extends BaseContainer {
this.props.options.dims.height !== nextProps.options.dims.height);
}

repaint() {
if(this.map) {
this.map.invalidateSize();
}
}
// repaint() {
// if(this.map) {
// this.map.invalidateSize();
// }
// }

componentWillReceivePropsZZ(nextProps) {
//console.log('new propz');
Expand Down Expand Up @@ -192,6 +192,10 @@ export default class LeafletContainer extends BaseContainer {
}
}

/* leaflet auto-updates, so no need to do anything */
repaint() {
}

/* remove given shape from map */
// TODO: death mark
/* TODO: is assigning to null necessary? */
Expand Down Expand Up @@ -306,77 +310,6 @@ export default class LeafletContainer extends BaseContainer {
let props = maybeProps !== undefined ? maybeProps : this.props;

if(! props.selection.active) {
for (let gridkey in GridTypes) {
let gridtype = GridTypes[gridkey];
let grid = props.options.grid[gridtype];

/* TODO: refactor */
if(Array.isArray(grid.data) && this.magGridHandle[gridtype] == null) {
this.magGridHandle[gridtype] = this.makeIsolines(grid.data);
} else if (grid.data == null && this.magGridHandle[gridtype] != null) {
this.magGridHandle[gridtype].forEach(function(handle) {
this.clearShape(handle);
}.bind(this));
this.magGridHandle[gridtype] = null;
}

/* visibility control */
// TODO: constantly adding/removing might be excessive, general fix coming in #244
if(this.magGridHandle[gridtype]) {
if(grid.visible) {
this.magGridHandle[gridtype].forEach(function(shape) {
shape.addTo(this.map);
}.bind(this));
} else {
this.magGridHandle[gridtype].forEach(function(shape) {
shape.removeFrom(this.map);
}.bind(this));
}
}
}

/* clear geolines */
this.geolineHandles.forEach(function(handle) {
this.clearShape(handle);
}.bind(this));

/* draw new geolines if they're present */
if(Array.isArray(props.options.geolines) && props.options.geolines.length > 0) {
this.geolineHandles = new Array();

props.options.geolines.forEach(function(geoline) {
// TODO generalise to UniversalMap
// TODO stub code
let last = 0;
geoline.selection.forEach(function(segment) {
let seg = { start: segment.start - geoline.offset,
end: segment.end - geoline.offset };

// +1 to include seg.start and seg.end
if(seg.start - last > 0) {
this.makeGeoline(geoline.geo_line.slice(last, seg.start + 1), MapStyle.SessionLeftovers).forEach(function(handle) {
this.geolineHandles.push(handle);
}.bind(this));
}

if(seg.end - seg.start > 0) {
this.makeGeoline(geoline.geo_line.slice(seg.start, seg.end + 1), MapStyle.Session).forEach(function(handle) {
this.geolineHandles.push(handle);
}.bind(this));
}

last = seg.end;
}.bind(this));

if(geoline.geo_line.length - 1 - last > 0) {
this.makeGeoline(geoline.geo_line.slice(last), MapStyle.SessionLeftovers).forEach(function(handle) {
this.geolineHandles.push(handle);
}.bind(this));
}
}.bind(this));
// TODO end of stub code
}

/* clear old shapes */
this.clearShapes(this.previewHandles);

Expand Down

0 comments on commit 9cbf33c

Please sign in to comment.