Skip to content

Commit

Permalink
Merge pull request leforthomas#1 from bmcallis/draggable-circles
Browse files Browse the repository at this point in the history 
Make circles draggable
  • Loading branch information
Jed Fong committed Jan 27, 2016
2 parents e81b306 + 25d5481 commit 0fd2e69
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 14 deletions.
108 changes: 95 additions & 13 deletions DrawHelper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1954,17 +1954,17 @@ var DrawHelper = (function() {
// create the markers and handlers for the editing
if(this._markers == null) {
var markers = new _.BillboardGroup(drawHelper, dragBillboard);
function getMarkerPositions() {
_self._getMarkerPositions = function() {
return _self.getCircleCartesianCoordinates(Cesium.Math.PI_OVER_TWO);
}
};
function onEdited() {
circle.executeListeners({name: 'onEdited', center: circle.getCenter(), radius: circle.getRadius()});
}
var handleMarkerChanges = {
dragHandlers: {
onDrag: function(index, position) {
circle.setRadius(Cesium.Cartesian3.distance(circle.getCenter(), position));
markers.updateBillboardsPositions(getMarkerPositions());
markers.updateBillboardsPositions(_self._getMarkerPositions());
},
onDragEnd: function(index, position) {
onEdited();
Expand All @@ -1974,17 +1974,99 @@ var DrawHelper = (function() {
return "Drag to change the radius";
}
};
markers.addBillboards(getMarkerPositions(), handleMarkerChanges);
markers.addBillboards(_self._getMarkerPositions(), handleMarkerChanges);
this._markers = markers;
// add a handler for clicking in the globe
this._globeClickhandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
this._globeClickhandler.setInputAction(
function (movement) {
var pickedObject = scene.pick(movement.position);
if(!(pickedObject && pickedObject.primitive)) {
_self.setEditMode(false);

var handlePrimitiveChanges = {
dragHandlers: {
onDragStart: function onDragStart(position) {
//// INTIALIZE DRAGGING-OPERATION

// setup dragging-operation
_self._handlingDragOperation = true;
_self._initialPrimitiveDragPosition = position;

scene.screenSpaceCameraController.enableInputs = false;

_self._screenSpaceEventHandler.setInputAction(function _handleMouseMove(movement) {
var position = scene.camera.pickEllipsoid(movement.endPosition, ellipsoid);
if (position) {
position = ellipsoid.cartesianToCartographic(position);
handlePrimitiveChanges.dragHandlers.onDrag(position);
} else {
handlePrimitiveChanges.dragHandlers.onDragEnd();
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

_self._screenSpaceEventHandler.setInputAction(function _handleMouseUp(movement) {
var position = scene.camera.pickEllipsoid(movement.position, ellipsoid);
position = ellipsoid.cartesianToCartographic(position);
handlePrimitiveChanges.dragHandlers.onDragEnd(position);
}, Cesium.ScreenSpaceEventType.LEFT_UP);
},
onDrag: function onDrag(position) {
//// UPDATE DRAGGING-OPERATION
var translation = new Cesium.Cartesian2(position.longitude - _self._initialPrimitiveDragPosition.longitude, position.latitude - _self._initialPrimitiveDragPosition.latitude);

var centerCart = new Cesium.Cartographic();
ellipsoid.cartesianToCartographic(_self.center, centerCart);
centerCart.longitude += translation.x;
centerCart.latitude += translation.y;
ellipsoid.cartographicToCartesian(centerCart, _self.center);

markers.updateBillboardsPositions(_self._getMarkerPositions());

_self._createPrimitive = true;

onEdited();

_self._initialPrimitiveDragPosition = position;
},
onDragEnd: function onDragEnd(position) {
//// FINALIZE DRAGGING-OPERATION
var translation = new Cesium.Cartesian2(position.longitude - _self._initialPrimitiveDragPosition.longitude, position.latitude - _self._initialPrimitiveDragPosition.latitude);

var centerCart = new Cesium.Cartographic();
ellipsoid.cartesianToCartographic(_self.center, centerCart);
centerCart.longitude += translation.x;
centerCart.latitude += translation.y;
ellipsoid.cartographicToCartesian(centerCart, _self.center);

markers.updateBillboardsPositions(_self._getMarkerPositions());

_self._createPrimitive = true;

onEdited();

_self._screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
_self._screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);

scene.screenSpaceCameraController.enableInputs = true;

//// cleanup dragging-operation
delete _self._handlingDragOperation;
delete _self._initialPrimitiveDragPosition;
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
}

// add a handler for ...
this._screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
this._screenSpaceEventHandler.setInputAction(function _handleMouseDown(movement) {
var pickedObject = scene.pick(movement.position);
if (pickedObject && pickedObject.primitive && pickedObject.primitive === _self && !_self._handlingDragOperation) {
var position = ellipsoid.cartesianToCartographic(scene.camera.pickEllipsoid(movement.position, ellipsoid));
handlePrimitiveChanges.dragHandlers.onDragStart(position);
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

this._screenSpaceEventHandler.setInputAction(function (movement) {
var pickedObject = scene.pick(movement.position);
if (!(pickedObject && pickedObject.primitive)) {
// user clicked the globe; cancel the edit mode
_self.setEditMode(false);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

// set on top of the polygon
markers.setOnTop();
Expand All @@ -1994,7 +2076,7 @@ var DrawHelper = (function() {
if(this._markers != null) {
this._markers.remove();
this._markers = null;
this._globeClickhandler.destroy();
this._screenSpaceEventHandler.destroy();
}
this._editMode = false;
}
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@
scene.primitives.add(circle);
circle.setEditable();
circle.addListener('onEdited', function(event) {
loggingMessage('Circle edited: radius is ' + event.radius.toFixed(1) + ' meters');
loggingMessage('Circle edited: center is ' + event.center.toString() + ' and radius is ' + event.radius.toFixed(1) + ' meters');
});
});
toolbar.addListener('extentCreated', function(event) {
Expand Down

0 comments on commit 0fd2e69

Please sign in to comment.