Skip to content

Commit 0832846

Browse files
author
hpinkos
committed
Merge pull request #2 from mramato/balloon-tweaks
Clean up Viewer balloon usage
2 parents 7c0132f + 8950ad5 commit 0832846

7 files changed

+69
-48
lines changed

‎Source/DynamicScene/GeoJsonDataSource.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.geoJsonDataSourceTable tr:nth-child(even) {
2+
background: #EEEEEE;
3+
}
4+
5+
.geoJsonDataSourceTable tr:nth-child(odd) {
6+
background: #CCCCCC;
7+
}

‎Source/DynamicScene/GeoJsonDataSource.js

+22-13
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,13 @@ define([
5454
return value;
5555
};
5656

57+
ConstantPositionProperty.prototype.getValueCartographic = function(time, result) {
58+
if (Array.isArray(this._value)) {
59+
return Ellipsoid.WGS84.cartesianArrayToCartographicArray(this._value, result);
60+
}
61+
return Ellipsoid.WGS84.cartesianToCartographic(this._value, result);
62+
};
63+
5764
//GeoJSON specifies only the Feature object has a usable id property
5865
//But since "multi" geometries create multiple dynamicObject,
5966
//we can't use it for them either.
@@ -70,23 +77,25 @@ define([
7077
}
7178
id = finalId;
7279
}
80+
7381
var dynamicObject = dynamicObjectCollection.getOrCreateObject(id);
7482
dynamicObject.geoJson = geoJson;
75-
76-
//TODO Generate the HTML on demand rather than up-front to save memory and processing time.
77-
var balloonHtml = '';
78-
var properties = geoJson.properties;
79-
if (typeof properties !== 'undefined') {
80-
balloonHtml = '<table border="1">';
81-
for ( var key in properties) {
82-
if (properties.hasOwnProperty(key)) {
83-
balloonHtml += '<tr><td>' + key + '</td><td>' + properties[key] + '</td></tr>';
83+
dynamicObject.balloon = {
84+
getValue : function() {
85+
var html;
86+
var properties = geoJson.properties;
87+
if (typeof properties !== 'undefined') {
88+
html = '<table class="geoJsonDataSourceTable">';
89+
for ( var key in properties) {
90+
if (properties.hasOwnProperty(key)) {
91+
html += '<tr><td>' + key + '</td><td>' + properties[key] + '</td></tr>';
92+
}
93+
}
94+
html += '</table>';
8495
}
96+
return html;
8597
}
86-
balloonHtml += '</table>';
87-
}
88-
89-
dynamicObject.balloon = new ConstantProperty(balloonHtml);
98+
};
9099
return dynamicObject;
91100
}
92101

‎Source/Widgets/Balloon/BalloonViewModel.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ define([
2727
var containerWidth = viewModel._container.clientWidth;
2828
var containerHeight = viewModel._container.clientHeight;
2929

30-
viewModel._maxWidth = Math.floor(viewModel._container.clientWidth*0.95) + 'px';
30+
viewModel._maxWidth = Math.floor(viewModel._container.clientWidth*0.50) + 'px';
3131
viewModel._maxHeight = Math.floor(viewModel._container.clientHeight*0.50) + 'px';
3232
var pointMaxY = containerHeight - 15;
3333
var pointMaxX = containerWidth - 16;
@@ -371,4 +371,4 @@ define([
371371
});
372372

373373
return BalloonViewModel;
374-
});
374+
});

‎Source/Widgets/Viewer/Viewer.css

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@import url(../HomeButton/HomeButton.css);
77
@import url(../SceneModePicker/SceneModePicker.css);
88
@import url(../Timeline/Timeline.css);
9+
@import url(../../DynamicScene/GeoJsonDataSource.css);
910

1011
.cesium-viewer {
1112
font-family: sans-serif;

‎Source/Widgets/Viewer/viewerDragDropMixin.js

+8
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,14 @@ define([
149149

150150
if (clearOnDrop) {
151151
viewer.dataSources.removeAll();
152+
153+
if (viewer.hasOwnProperty('balloonedObject')) {
154+
viewer.balloonedObject = undefined;
155+
}
156+
157+
if (viewer.hasOwnProperty('trackedObject')) {
158+
viewer.trackedObject = undefined;
159+
}
152160
}
153161

154162
var files = event.dataTransfer.files;

‎Source/Widgets/Viewer/viewerDynamicObjectMixin.js

+26-32
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,9 @@ define([
6161
var balloonContainer = document.createElement('div');
6262
balloonContainer.className = 'cesium-viewer-balloonContainer';
6363
viewer._viewerContainer.appendChild(balloonContainer);
64-
var balloon = new Balloon(balloonContainer, viewer.scene);
6564

65+
var balloon = new Balloon(balloonContainer, viewer.scene);
66+
var balloonViewModel = balloon.viewModel;
6667
viewer._balloon = balloon;
6768

6869
var eventHelper = new EventHelper();
@@ -71,50 +72,44 @@ define([
7172
var balloonedObject;
7273

7374
//Subscribe to onTick so that we can update the view each update.
74-
function updateView(clock) {
75+
function onTick(clock) {
7576
if (typeof dynamicObjectView !== 'undefined') {
7677
dynamicObjectView.update(clock.currentTime);
7778
}
78-
var viewModel = viewer._balloon.viewModel;
79-
if (typeof trackedObject === 'undefined' && typeof balloonedObject !== 'undefined' &&
80-
typeof balloonedObject.position !== 'undefined' && viewModel.showBalloon) {
81-
viewModel.position = balloonedObject.position.getValueCartesian(clock.currentTime);
82-
viewModel.update();
83-
} else {
84-
viewModel.showBalloon = false;
79+
if (typeof balloonedObject !== 'undefined' && typeof balloonedObject.position !== 'undefined') {
80+
balloonViewModel.position = balloonedObject.position.getValueCartesian(clock.currentTime);
81+
balloonViewModel.update();
8582
}
8683
}
87-
eventHelper.add(viewer.clock.onTick, updateView);
84+
eventHelper.add(viewer.clock.onTick, onTick);
8885

8986
function pickAndTrackObject(e) {
9087
var pickedPrimitive = viewer.scene.pick(e.position);
91-
if (typeof pickedPrimitive !== 'undefined' &&
92-
typeof pickedPrimitive.dynamicObject !== 'undefined' &&
93-
typeof pickedPrimitive.dynamicObject.position !== 'undefined') {
88+
if (typeof pickedPrimitive !== 'undefined' && typeof pickedPrimitive.dynamicObject !== 'undefined' && typeof pickedPrimitive.dynamicObject.position !== 'undefined') {
9489
viewer.trackedObject = pickedPrimitive.dynamicObject;
9590
}
9691
}
9792

98-
function showBalloon(e) {
93+
function pickAndShowBalloon(e) {
9994
var pickedPrimitive = viewer.scene.pick(e.position);
10095
if (typeof pickedPrimitive !== 'undefined' && typeof pickedPrimitive.dynamicObject !== 'undefined') {
10196
viewer.balloonedObject = pickedPrimitive.dynamicObject;
10297
}
10398
}
10499

105-
function clearTrackedObject() {
100+
function onHomeButtonClicked() {
106101
viewer.trackedObject = undefined;
107102
viewer.balloonedObject = undefined;
108103
}
109104

110-
//Subscribe to the home button click if it exists, so that we can
111-
//clear the trackedObject when it is clicked.
105+
//Subscribe to the home button beforeExecute event if it exists,
106+
// so that we can clear the trackedObject and balloon.
112107
if (typeof viewer.homeButton !== 'undefined') {
113-
eventHelper.add(viewer.homeButton.viewModel.command.beforeExecute, clearTrackedObject);
108+
eventHelper.add(viewer.homeButton.viewModel.command.beforeExecute, onHomeButtonClicked);
114109
}
115110

116111
//Subscribe to left clicks and zoom to the picked object.
117-
viewer.screenSpaceEventHandler.setInputAction(showBalloon, ScreenSpaceEventType.LEFT_CLICK);
112+
viewer.screenSpaceEventHandler.setInputAction(pickAndShowBalloon, ScreenSpaceEventType.LEFT_CLICK);
118113
viewer.screenSpaceEventHandler.setInputAction(pickAndTrackObject, ScreenSpaceEventType.RIGHT_CLICK);
119114

120115
defineProperties(viewer, {
@@ -131,13 +126,11 @@ define([
131126
if (trackedObject !== value) {
132127
trackedObject = value;
133128
dynamicObjectView = typeof value !== 'undefined' ? new DynamicObjectView(value, viewer.scene, viewer.centralBody.getEllipsoid()) : undefined;
134-
135-
if (balloonedObject !== trackedObject) {
136-
viewer._balloon.viewModel.showBalloon = false;
137-
}
129+
//Hide the balloon if it's not the object we are following.
130+
balloonViewModel.showBalloon = balloonedObject === trackedObject;
138131
}
139-
var sceneMode = viewer.scene.getFrameState().mode;
140132

133+
var sceneMode = viewer.scene.getFrameState().mode;
141134
if (sceneMode === SceneMode.COLUMBUS_VIEW || sceneMode === SceneMode.SCENE2D) {
142135
viewer.scene.getScreenSpaceCameraController().enableTranslate = typeof value === 'undefined';
143136
}
@@ -158,24 +151,25 @@ define([
158151
return balloonedObject;
159152
},
160153
set : function(value) {
161-
var viewModel = viewer._balloon.viewModel;
162154
var content;
155+
var position;
163156
if (typeof value !== 'undefined') {
164-
if (typeof value.dynamicObject !== 'undefined' && typeof value.dynamicObject.position !== 'undefined') {
165-
viewModel.position = value.dynamicObject.position.getValue(viewer.clock.currentTime);
157+
if (typeof value.position !== 'undefined') {
158+
position = value.position.getValueCartesian(viewer.clock.currentTime);
166159
}
160+
167161
if (typeof value.balloon !== 'undefined') {
168162
content = value.balloon.getValue(viewer.clock.currentTime);
169-
} else {
170-
content = value.id;
171163
}
172164

173-
if (value !== balloonedObject) {
174-
viewModel.content = content;
165+
if (typeof content === 'undefined') {
166+
content = value.id;
175167
}
168+
balloonViewModel.content = content;
176169
}
177170
balloonedObject = value;
178-
viewModel.showBalloon = typeof content !== 'undefined';
171+
balloonViewModel.position = position;
172+
balloonViewModel.showBalloon = typeof content !== 'undefined';
179173
}
180174
}
181175
});

‎Source/Widgets/widgets.css

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
@import url(./Animation/Animation.css);
2+
@import url(./Balloon/Balloon.css);
23
@import url(./BaseLayerPicker/BaseLayerPicker.css);
34
@import url(./CesiumWidget/CesiumWidget.css);
45
@import url(./checkForChromeFrame.css);
56
@import url(./FullscreenButton/FullscreenButton.css);
67
@import url(./HomeButton/HomeButton.css);
78
@import url(./SceneModePicker/SceneModePicker.css);
89
@import url(./Timeline/Timeline.css);
9-
@import url(./Viewer/Viewer.css);
10+
@import url(./Viewer/Viewer.css);
11+
@import url(../DynamicScene/GeoJsonDataSource.css);

0 commit comments

Comments
 (0)