diff --git a/frontend/app/components/BaseMap.js b/frontend/app/components/BaseMap.js index 6ef5243..9a99772 100644 --- a/frontend/app/components/BaseMap.js +++ b/frontend/app/components/BaseMap.js @@ -53,6 +53,7 @@ export default class BaseContainer extends Component { visible: false }; } + window.geolines = this.geolineMapping.handles; } @@ -99,6 +100,7 @@ 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) { @@ -106,6 +108,8 @@ export default class BaseContainer extends Component { if(this.geolineMapping.keys.indexOf(geoline) < 0) { this.geolineMapping.keys.push(geoline); this.geolineMapping.handles.push(this.makeGeolineSet(geoline)); + + needsRepaint = true; } }.bind(this)); @@ -115,6 +119,7 @@ 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); @@ -122,6 +127,8 @@ export default class BaseContainer extends Component { /* retry the same position since the array has shifted */ i--; + + needsRepaint = true; } } @@ -129,6 +136,7 @@ export default class BaseContainer extends Component { 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) { @@ -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(); + } } }; diff --git a/frontend/app/components/CesiumMap.js b/frontend/app/components/CesiumMap.js index 8bd56fb..70c7b3f 100644 --- a/frontend/app/components/CesiumMap.js +++ b/frontend/app/components/CesiumMap.js @@ -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; @@ -104,6 +105,8 @@ export default class CesiumContainer extends BaseContainer { /* materials */ this.previewMaterial = Material.fromType('Stripe'); + + window.cesium = this; } /* update only for fullscreen toggling */ @@ -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(); } @@ -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); @@ -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)); - } } } diff --git a/frontend/app/components/LeafletMap.js b/frontend/app/components/LeafletMap.js index 0dc02c0..6d3c8da 100644 --- a/frontend/app/components/LeafletMap.js +++ b/frontend/app/components/LeafletMap.js @@ -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'); @@ -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? */ @@ -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);