From 25d5481bdf59d97d0e3479b5892f6fa11eeb69a9 Mon Sep 17 00:00:00 2001 From: Brandon McAllister Date: Mon, 25 Jan 2016 16:05:11 -0600 Subject: [PATCH] Make circles draggable --- DrawHelper.js | 108 ++++++++++++++++++++++++++++++++++++++++++++------ index.html | 2 +- 2 files changed, 96 insertions(+), 14 deletions(-) diff --git a/DrawHelper.js b/DrawHelper.js index 581bb95..2156c67 100644 --- a/DrawHelper.js +++ b/DrawHelper.js @@ -1954,9 +1954,9 @@ 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()}); } @@ -1964,7 +1964,7 @@ var DrawHelper = (function() { 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(); @@ -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(); @@ -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; } diff --git a/index.html b/index.html index fbdde5e..e50d597 100644 --- a/index.html +++ b/index.html @@ -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) {