hotspot draggable

[dariocavada]

Hello, congratulations and thanks for this component. Is there a release date for the hotspots draggable functionality?

I would like to integrate your component in a pano editor, but I need this feature to allow the user to add delete and move hotSpots.

Any other hints, tips, workaround or alternatives for this feature?

Thank you

[mpetroff]

Is there a release date for the hotspots draggable functionality?

When I have time to put together and do the necessary testing for a new release. Nothing's stopping you from using the current Git master branch.

[dariocavada]

Thank you for the suggestion. I've tried, but with current version I don't know how to retrieve the new hotspot parameters after dragging. So I've modified the pannellum.js in order to have one more parameter in dragHandlerFunc with the draggingHotSpot:

/**
 * Event handler for mouse up events. Stops panning.
 * @private
 */
function onDocumentMouseUp(event) {
    if (draggingHotSpot && draggingHotSpot.dragHandlerFunc)
        draggingHotSpot.dragHandlerFunc(event, draggingHotSpot.dragHandlerArgs, draggingHotSpot);
    draggingHotSpot = null;

// ...

}

So in my code now I have:

function dragHandlerFunc(e, args, hs) {
    if (e.type == "mouseup") {
        // Here I can update the hotSpot in my database by using args.id and hs.yaw, hs.pitch for the new position
        console.log(args.id, hs.yaw, hs.pitch);
    }
}

pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "./examplepano.jpg",
    "hotSpots": [
        {
            "pitch": 14.1,
            "yaw": 1.5,
            "type": "info",
            "text": "Test 1",
            "draggable": true,
            "dragHandlerFunc": dragHandlerFunc,
            "dragHandlerArgs": {id: 0}
        },
        {
            "pitch": -9.4,
            "yaw": 222.6,
            "type": "info",
            "text": "Test 2",
            "draggable": true,
            "dragHandlerFunc": dragHandlerFunc,
            "dragHandlerArgs": {id: 1}
        }

    ]
});

Is there another way to do this without changing your code ?

[mpetroff]

You can use the viewer's .getConfig() method to retrieve the full configuration and extract the hot spot information from there.