<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Example - example-example52-production</title>
    <script data-require="lodash.js@*" data-semver="3.8.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script src="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>
    <script src="http://stepplus.co.il/images/svg2png.js"></script>
    <link rel="stylesheet" href="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Widgets/widgets.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="cesiumApp">
    <div ng-controller="appCtrl as appCtrl">
      <div cesium-directive="" id="cesium1" class="cesiumContainer"></div>
    </div>
    <script src="app.js"></script>
  </body>

</html>
"use strict";
    
  angular.module('cesiumApp', [])
  
  .directive('cesiumDirective', function($interval, $timeout){
    return {
      restrict: "EA",
      controllerAs: "cesiumCtrl",
      scope: {
        data: "="
      },
      controller: function($scope){
        
      },
      link: function(scope, element, attr, ctrl){
        
        var vm = ctrl;
        
        vm.viewer = new Cesium.Viewer(element[0], {
          baseLayerPicker: false,
          homeButton: false,
          sceneModePicker: false,
          navigationHelpButton: false
        });
    
        var scene = vm.viewer.scene;
        
        

function disableCameraMotion(state){
    vm.viewer.scene.screenSpaceCameraController.enableRotate = state;
    vm.viewer.scene.screenSpaceCameraController.enableZoom = state;
    vm.viewer.scene.screenSpaceCameraController.enableLook = state;
    vm.viewer.scene.screenSpaceCameraController.enableTilt = state;
    vm.viewer.scene.screenSpaceCameraController.enableTranslate = state;
}

function moveEllipse(){
      var position = Cesium.Cartesian3.fromDegrees(-115.0, 37.0);
      var positionCBP = function(){
        return position;
      };

      var myEllipse = vm.viewer.entities.add({
        name : 'Red Ellipse on surface',
        position: new Cesium.CallbackProperty(positionCBP, false),
        ellipse : {
          semiMajorAxis: 50000,
          semiMinorAxis: 50000
        }
      });
      
      var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
      
      handler.setInputAction(function(click) {
        var pickedObject = scene.pick(click.position);
        if (Cesium.defined(pickedObject) && pickedObject.id === myEllipse){
          vm.picked = true;
          disableCameraMotion(false);
          console.log('here');
        }
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

      handler.setInputAction(function(movement) {
        // move the myEllipse around
        //console.log('Start: (' + movement.startPosition.x + ',' + movement.startPosition.y + '). End: (' + movement.endPosition.x + ',' + movement.endPosition.y +')');
        if (!vm.picked){
          return;
        }

        position = vm.viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);;
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      handler.setInputAction(function(movement) {
        // if picked
        vm.picked = false;
        disableCameraMotion(true);
      }, Cesium.ScreenSpaceEventType.LEFT_UP);

      vm.viewer.zoomTo(vm.viewer.entities);
    }
    moveEllipse();

    function movePolygon(){
      var positions = Cesium.Cartesian3.fromDegreesArray([
        -115.0, 37.0,
        -115.0, 32.0,
        -107.0, 33.0,
        -102.0, 31.0,
        -102.0, 35.0]);
      var positionCBP = function(){
        return positions;
      };

      var myPolygon = vm.viewer.entities.add({
        name : 'Red polygon',
        polygon : {
          hierarchy: new Cesium.CallbackProperty(positionCBP, false),
          material: Cesium.Color.RED
        }
      });

      
      var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
      

      handler.setInputAction(function(click) {
        var pickedObject = scene.pick(click.position);
        if (Cesium.defined(pickedObject) && pickedObject.id === myPolygon){
          vm.pickedPolygon = true;
          disableCameraMotion(false);
          console.log('here');
        }
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

      handler.setInputAction(function(movement) {
        // move the myEllipse around
        if (!vm.pickedPolygon){
          return;
        }

        var endPoint = vm.viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
        var startPoint = vm.viewer.camera.pickEllipsoid(movement.startPosition, scene.globe.ellipsoid);
        var distances = {
          x: endPoint.x-startPoint.x,
          y: endPoint.y-startPoint.y,
          z: endPoint.z-startPoint.z
        };
        
        positions.forEach(function(position){
          position.x += distances.x;
          position.y += distances.y;
          position.z += distances.z;
        });

      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      handler.setInputAction(function(movement) {
        // if picked
        vm.pickedPolygon = false;
        disableCameraMotion(true);
      }, Cesium.ScreenSpaceEventType.LEFT_UP);

      vm.viewer.zoomTo(vm.viewer.entities);
    }

    movePolygon();   
      }
    };
  })
  
  .controller('appCtrl', ['$scope', function($scope) {
    
  }])
.cesiumContainer{
  height: 50%;
  width: 100%;
}