# Entity Dragging and Editing

**URL:** <https://community.cesium.com/t/entity-dragging-and-editing/30895>\
**Category:** CesiumJS\
**Created:** [March 20, 2024, 11:48am UTC](https://community.cesium.com/t/entity-dragging-and-editing/30895 "2024-03-20T11:48:51Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![McKay\_Mower](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/mckay_mower/32/16165_2.png) [@McKay\_Mower](https://community.cesium.com/u/McKay_Mower)\
**Post date:** [March 20, 2024, 11:48am UTC](https://community.cesium.com/t/entity-dragging-and-editing/30895/1 "2024-03-20T11:48:51Z")

</div>

Hello all,

I am trying to reproduce the dragging functionality as seen in this cesium angular sandbox: [Angular Cesium Circle Editor Example - StackBlitz](https://stackblitz.com/edit/angular-cesium-circle-editor-example?embed=1&file=src/app/circle-editor-example/circle-eidtor-example.component.ts)

I can draw an entity with a center point and i have the radius and a ‘handle’ that follows my mouse. However, I am looking for some help with the drag and edit functionality. Specifically, i want to be able to drag the entity by either the center point, or the circle area. I also want to be able to edit the area of the circle by dragging on the handle after i have created the object. The code i have thus far is as follows (the dragging does not work, but it is in the process):

const radiusMax = 3e6 // max radius of an incident  
let centerPosition: Cartesian3 | undefined = undefined  
let mousePosition = new Cartesian3();  
let mousePositionProperty = new CallbackProperty(function(time, result){  
var position = viewer.scene.camera.pickEllipsoid(mousePosition, undefined, result);

```
var cartographic = Ellipsoid.WGS84.cartesianToCartographic(position!);
cartographic.height = 300000.0;
return Ellipsoid.WGS84.cartographicToCartesian(cartographic);

```

}, false);

let creatingCircle = false  
let distance = 1e-3  
let preview: Entity | undefined = undefined  
let dragHandle: Entity | undefined = undefined

let dragging = false

```
const circleHandler = new ScreenSpaceEventHandler(viewer.scene.canvas);

circleHandler.setInputAction(
  (position: ScreenSpaceEventHandler.PositionedEvent) => {
    // put a point at the center of the circle
    if (!creatingCircle) {
      creatingCircle = true;

      const ray = viewer.scene.camera.getPickRay(position.position);
      if (!ray) return console.error("no ray found in drawing");

      const newCenter = viewer.scene.globe.pick(ray, viewer.scene);
      centerPosition = newCenter
      if (!centerPosition) return console.error("no newCenter found in drawing");
      
      const centerPoint = viewer.entities.add({
        position: new CallbackProperty(() => { return newCenter }, true),
        point: {
          pixelSize: 10,
          color: Color.WHITE,
        },
        name: selectedIncident.name
      })

      preview = viewer.entities.add({
        position: new CallbackProperty(() => { return centerPosition }, true),
        ellipse: {
          semiMajorAxis: new CallbackProperty(() => { return Math.min(distance, radiusMax) }, false),
          semiMinorAxis: new CallbackProperty(() => { return Math.min(distance, radiusMax) }, false),
          material: Color.BLACK.withAlpha(0.5)
        },
      })

      // drag handle
      dragHandle = viewer.entities.add({
        position: new CallbackProperty(() => { return mousePosition }, true),
        point: {
          pixelSize: 10,
          color: Color.WHITE,
        }
      })

    } else {
      if(!preview || !dragHandle) return 
      
      // clone preview, and then remove it
      viewer.entities.add({
        position: new ConstantPositionProperty(centerPosition),
        ellipse: {
          semiMajorAxis: Math.min(distance, radiusMax),
          semiMinorAxis: Math.min(distance, radiusMax),
          material: Color.RED.withAlpha(0.5)
        },
        name: selectedIncident.name
      })

      viewer.entities.removeById(preview.id)
      viewer.entities.removeById(dragHandle.id)
      // reset temporary vars
      mousePosition = new Cartesian3()
      creatingCircle = false;
      distance = 1e-3
      centerPosition = undefined
      preview = undefined
      dragHandle = undefined
    }
  },
  ScreenSpaceEventType.LEFT_CLICK
);

circleHandler.setInputAction((position: ScreenSpaceEventHandler.PositionedEvent) => {
    let pickedObject = viewer.scene.pick(position.position)
    if(defined(pickedObject) && pickedObject.id === preview) {
      dragging = true
      viewer.scene.screenSpaceCameraController.enableRotate = false
      preview.position = mousePositionProperty
    }
}, ScreenSpaceEventType.LEFT_DOWN)

circleHandler.setInputAction((position: ScreenSpaceEventHandler.PositionedEvent) => {
  if(dragging) {
    dragging = false
    viewer.scene.screenSpaceCameraController.enableRotate = true
    
  }
}, ScreenSpaceEventType.LEFT_UP)

circleHandler.setInputAction(
  (position: ScreenSpaceEventHandler.MotionEvent) => {
    if (!creatingCircle || !centerPosition) return;

    const ray = viewer.camera.getPickRay(position.endPosition);

    if(!ray) return console.error("no ray found when moving handle")

    const earthPosition = viewer.scene.globe.pick(ray, viewer.scene);

    if(!earthPosition) return console.error("no earth position found from ray when moving handle")

    mousePosition = earthPosition

    // calculate distance between the two points
    distance = Cartesian3.distance(mousePosition, centerPosition)
  },
  ScreenSpaceEventType.MOUSE_MOVE
);

```