How To Make a Context Manager

Context Manager

A context manager can be used to add special features accessible via a location-based context menu. (On mobile phone browsers, a tap-and-hold gesture will trigger the context menu for the crosshairs location.)

To add a context manager, include the contextManager parameter:

params["contextManager"] = new myCtxManager();

In the example below, using the context menu, a user is given the option of logging points and clearing logged points. In this example, a logged point is represented as a persistent red dot.

var ctxManager = function() {
    this.loggedPoints = [];
};


/**
 * Menu data (can contain submenus).
 * @type {{label: string, items: *[]}}
 */
ctxManager.menudata = {"label": "Test",
    "items": [
        {"label": "Log Point", "action": "Context-Log"},
        {"label": "Clear Points", "action": "Context-Clear"}
    ]
};

/**
 * Returns menu options at image position.
 * @param x
 * @param y
 * @param z
 * @returns {{label: string, items: *[]}|*}
 */
ctxManager.prototype.getContextAtImagePosition = function(x, y, z) {
    return ctxManager.menudata;
};

/**
 * Callback when menu option is selected.
 * @param action
 */
ctxManager.prototype.actionPerformed = function(action) {
    if (action === "Log") {
        var currentCoor = papayaContainers[0].viewer.cursorPosition;
        var coor = new papaya.core.Coordinate(currentCoor.x, currentCoor.y, currentCoor.z);
        this.loggedPoints.push(coor);
    } else if (action === "Clear") {
        this.loggedPoints = [];
    }

    papayaContainers[0].viewer.drawViewer();
};

/**
 * This provides an opportunity for the context manager to draw to the viewer canvas.
 * @param ctx
 */
ctxManager.prototype.drawToViewer = function(ctx) {
    for (var ctr = 0; ctr < this.loggedPoints.length; ctr += 1) {
        if (papayaContainers[0].viewer.intersectsMainSlice(this.loggedPoints[ctr])) {
            var screenCoor = papayaContainers[0].viewer.convertCoordinateToScreen(this.loggedPoints[ctr]);
            ctx.fillStyle = "rgb(255, 0, 0)";
            ctx.fillRect(screenCoor.x, screenCoor.y, 5, 5);

            // some more examples of converting coordinates
            var originalCoord = papayaContainers[0].viewer.convertScreenToImageCoordinate(screenCoor.x, screenCoor.y);
            var world = new papaya.core.Coordinate();
            papayaContainers[0].viewer.getWorldCoordinateAtIndex(originalCoord.x, originalCoord.y, originalCoord.z, world);
            console.log(originalCoord.toString() + " " + world.toString());
        }
    }
};

/**
 * Called when image position changes.
 */
ctxManager.prototype.clearContext = function() {
    // do nothing
};