Entity Dragging and Editing

CesiumJS
1

Hello all,

I am trying to reproduce the dragging functionality as seen in this cesium angular sandbox: Angular Cesium Circle Editor Example - StackBlitz

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
);