Click and drag?

[Sai Asuka]

I see you can click on entity/cube drawn. Is it possible to click and drag a cube so it changes its position based on where you drag and release it with your mouse?

[Matthew Amato]

While there's no out-of-the-box "mode" for doing this, it's easy enough to do using existing functionality.  Below is an example that you can post into Sandcastle and play with.  It's not perfect (I just wrote it 5 minutes ago) but it will hopefully get you started in the right direction.

var viewer = new Cesium.Viewer('cesiumContainer', {infoBox : false, selectionIndicator : false});

var entity = viewer.entities.add({

    name : 'Red box with black outline',

    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),

    box : {

        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),

        material : Cesium.Color.RED,

        outline : true,

        outlineColor : Cesium.Color.BLACK

    }

});

var mousePosition = new Cesium.Cartesian2();

var mousePositionProperty = new Cesium.CallbackProperty(function(time, result){

    var position = scene.camera.pickEllipsoid(mousePosition, undefined, result);

    var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);

    cartographic.height = 300000.0;

    return Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);

}, false);

var scene = viewer.scene;

var dragging = false;

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

handler.setInputAction(

    function(click) {

        var pickedObject = scene.pick(click.position);

        if (Cesium.defined(pickedObject) && (pickedObject.id === entity)) {

            dragging = true;

            scene.screenSpaceCameraController.enableRotate = false;

            Cesium.Cartesian2.clone(click.position, mousePosition);

            entity.position = mousePositionProperty;

        }

    },

    Cesium.ScreenSpaceEventType.LEFT_DOWN

);

handler.setInputAction(

    function(movement) {

        if (dragging) {

            Cesium.Cartesian2.clone(movement.endPosition, mousePosition);

        }

    },

    Cesium.ScreenSpaceEventType.MOUSE_MOVE

);

handler.setInputAction(

    function(click) {

        if(dragging) {

          dragging = false;

          scene.screenSpaceCameraController.enableRotate = true;

          entity.position = scene.camera.pickEllipsoid(click.position);

        }

    },

    Cesium.ScreenSpaceEventType.LEFT_UP

);

On Mon, Feb 23, 2015 at 7:18 PM, Sai Asuka <asuka...@gmail.com> wrote:

I see you can click on entity/cube drawn. Is it possible to click and drag a cube so it changes its position based on where you drag and release it with your mouse?

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Hyper Sonic]

After dragging the box I noticed that as you move the camera the box appears to slide around, not keeping up with the terrain. I couldn't figure out why though. Using console logs I can tell it's not executing the handler functions anymore.

It would be neat if entities had a property called draggable.

[Matthew Amato]

The reason is because it sets the final position using click.position without re-adjusting the height like it does in the CallbackProperty, it would be an easy fix (in reality this was a quick and dirty example so I would abstract functionality into a class.  There's also issues with the code if you double click on the box (you can disable this easy enough though).

The problem with adding something like entity.draggable is that it's way too high-level and needs to make too many assumptions about the nature of the data.  For example, if the position isn't a constant, non-time-dynamic value the dragging makes little sense.  That's not to say that object editing can't be done in a generic opt-in sort of way.  In the long term I'm sure we'll have something, (and it may be a plug-in) but there are way to many other core things that need work first.  There is the DrawHelper plug-in already, but I've never tried it: https://github.com/leforthomas/cesium-drawhelper

On Mon, Feb 23, 2015 at 9:34 PM, Hyper Sonic <gman...@gmail.com> wrote:

After dragging the box I noticed that as you move the camera the box appears to slide around, not keeping up with the terrain. I couldn't figure out why though. Using console logs I can tell it's not executing the handler functions anymore.

It would be neat if entities had a property called draggable.

--

[Hyper Sonic]

Ah, so that's what's causing it. Changing the last setInputAction to the following fixes it.

handler.setInputAction(
    function(click) {
        if(dragging) {
          dragging = false;
          scene.screenSpaceCameraController.enableRotate = true;

          var mypos = scene.camera.pickEllipsoid(click.position);
          var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(mypos);
          cartographic.height = 300000.0;
          var mypos = Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);
          entity.position = mypos;
        }
    },
    Cesium.ScreenSpaceEventType.LEFT_UP
);

Perhaps someone could make a Cesium editor plugin sometime in the future, with the ability of not only dragging entire entities, but moving vertices around as well. That drawhelper app does this, but for now limited to very basic geometries. I wonder if it can output the resulting drawing to entity code.

[dic...@gmail.com]

Just wanted to add that I also need the ability to drag entire entities as well as moving the vertices.

[Hyper Sonic]

Maybe the author of https://github.com/leforthomas/cesium-drawhelper might continue their work if there's enough interest, it's been 7 months since the last update to the project. Be sure to check out the live demo at http://pad.geocento.com/DrawHelper/

[dic...@gmail.com]

I actually found that a while ago and was planning to use it for as much as I can. That's a great idea though, I think I might contact the author and let him know there is interest in this so he's aware.

[chris.m...@gmail.com]

On Tuesday, 24 February 2015 19:11:20 UTC+1, dic...@gmail.com wrote:
> I actually found that a while ago and was planning to use it for as much as I can. That's a great idea though, I think I might contact the author and let him know there is interest in this so he's aware.

This is crazy late, but I've created my own set of shape creation tools to be used with the latest versions of Cesium.
Drawhelper project was a great reference but hasn't been updated in quite a long time.

I will post back once I have everything ready for sharing.
Its still a bit rough at the moment but works very similarly.

[Ryan Hickman]

Chris,

I look forward to your follow-up. Drawing tools in Cesium would be extremely helpful for my project.

[Rachel Hwang]

Sounds great, Chris! Keep us posted! We're interested in what solutions you come up with.

Best,

- Rachel

[Cris Lacumba]

Hi,

Is it possible to improve the drag & drop solution allowing only moving the object in a certain axis? Or to rotate the object over itself?

Thanks in advance

Best regards

[Rachel Hwang]

Hi,

Yep! Just modify the code to only set the movement in the axis you want. For rotation, you can check how far the mouse has moved from some original position, convert that distance into degrees of rotation and update the entity's orientation accordingly. Shouldn't been too hard.

Unfortunately, I don't currently have the bandwidth to make you a code example, but I'll come back to this thread if I get the chance later.

Best,

- Rachel

[sergei...@gmail.com]

Hi Rachel,

Are you succeed with your drag questions? 

I am working on a problem to move a model around a map using gizmo. 

So I think I need your advice how to implement movement along certain axis.

[Omar Shehata]

Hey Sergei,

Heads up that the forum has transitioned over to Discourse and this Google Group will be put into read-only mode today. Details about the transition here.