Listener

A listener is an object that allows you to listen for events triggered by other objects and, if needed, remove them all at once.

// Example setup for switching between display mode and edit mode

class ViewController extends mvc.Listener {

    startListening() {
        const [{ paper }] = this.callbackArguments;
        this.listenTo(paper, 'element:mouseenter', (_appContext, elementView) => {
            joint.highlighters.mask.add(elementView, 'body', 'highlighted-element');
        });
        this.listenTo(paper, 'element:mouseleave', (_appContext, elementView) => {
            joint.highlighters.mask.remove(elementView, 'highlighted-element');
        });
    }
}

class EditController extends mvc.Listener {

    startListening() {
        const [{ paper }] = this.callbackArguments;
        this.listenTo(paper, 'element:pointerdblclick', (appContext, elementView) => {
            const { model } = elementView;
            if (appContext.graph.getConnectedLinks(model).length > 0) return;
            model.remove();
        });
    }
}

const appContext = { paper, graph };

const viewController = new ViewController(appContext);
const editController = new EditController(appContext);

let editMode = false;
function toggleEditMode(canEdit = !editMode) {
    editMode = canEdit;
    if (editMode) {
        editController.startListening();
        viewController.stopListening();
    } else {
        viewController.startListening();
        editController.stopListening();
    }
}

// start app in view mode
toggleEditMode(false);

Properties

callbackArguments

listener.callbackArguments

An array of constructor arguments.

const listener = new mvc.Listener(callbackArg1, callbackArg2);
listener.callbackArguments; // [callbackArg1, callbackArg2]

Methods

listenTo()

listener.listenTo(object, event, callback [, context])

Tell the listener to listen to a particular event on an object.

listener.listenTo(model, 'change', onModelChangeCallback);

To supply a context value for this when the callback is invoked, pass the optional last argument:

listener.listenTo(object, this.update, this);

The arguments of the constructor are passed to the callback when it is invoked.

const listener = new mvc.Listener();
listener.listenTo(paper, 'element:pointerclick', (elementView) => {});

const listener = new mvc.Listener(callbackArgument);
listener.listenTo(paper, 'element:pointerclick', (callbackArgument, elementView) => {});

const listener = new mvc.Listener(callbackArg1, callbackArg2);
listener.listenTo(paper, 'element:pointerclick', (callbackArg1, callbackArg2, elementView) => {});

listener.listenTo(object, eventMap, [, context])

Tell the listener to listen to multiple events on an object (using event map syntax).

const listener = new mvc.Listener(callbackArgument);
listener.listenTo(graph, {
  'remove': (callbackArgument, cell) => {},
  'add': (callbackArgument, cell) => {}
});

stopListening()

listener.stopListening()

Tell the listener to remove all of its registered callbacks.