How to add a new Inspector(apart from the Inspector of elements and links) in jointJS - Rappid

Question

I want to add a 3rd Inspector which will open only for an element(not a link) of specific type, for example only for basic.Rect in Rappid.

So far, there are 2 Inspectors.For elements and for links.

Is there any way it can be done?

The following code is a part of the KitchenSkink version of Rappid.

Here is function createInspector:

createInspector: function(cellView) {

    var cell = cellView.model || cellView;

    // No need to re-render inspector if the cellView didn't change.
    if (!this.inspector || this.inspector.options.cell !== cell) {

        // Is there an inspector that has not been removed yet.
        // Note that an inspector can be also removed when the underlying cell is removed.
        if (this.inspector && this.inspector.el.parentNode) {

            this.inspectorClosedGroups[this.inspector.options.cell.id] = _.map(app.inspector.$('.group.closed'), function(g) {
        return $(g).attr('data-name');
    });

            // Clean up the old inspector if there was one.
            this.inspector.updateCell();
            this.inspector.remove();
        }

        var inspectorDefs = InspectorDefs[cell.get('type')];

        this.inspector = new joint.ui.Inspector({
            inputs: inspectorDefs ? inspectorDefs.inputs : CommonInspectorInputs,
            groups: inspectorDefs ? inspectorDefs.groups : CommonInspectorGroups,
            cell: cell
        });

        this.initializeInspectorTooltips();

        this.inspector.render();
        $('.inspector-container').html(this.inspector.el);

        if (this.inspectorClosedGroups[cell.id]) {

    _.each(this.inspectorClosedGroups[cell.id], this.inspector.closeGroup, this.inspector);

        } else {
            this.inspector.$('.group:not(:first-child)').addClass('closed');
        }
    }
}

Answer 1

If you use joint.ui.Inspector.create('#path', inspectorProperties) any previous instance of the Inspector in a specific DOM element is removed and new one is created and rendered into the DOM automatically (it avoids creating a new instance of joint.ui.Inspector(), rendering it, adding the rendered result manually and removing the previous instance).

It also keeps track on open/closed groups and restore them based on the last used state.

Besides this, you may always have several different inspectorProperties objects previously defined when you are about to create() the inspector. So following the code you pasted, you could perform the tests you need first and then create the appropriate inspector:

if(cell instanceof joint.basic.Rect){

  var customInputs = _.clone(CommonInspectorInputs);
  // extend more inputs into `customInputs` from a variable previously defined
  // OR modify the default rectangle's inspector directly, example:
  customInputs.attrs.text = {
    type: 'textarea',
    label: 'Multiline text',
    text: 'Type\nhere!',
    group: joint.util.getByPath(CommonInspectorInputs.attrs, 'text/group', '/');
  };

  joint.ui.Inspector.create('.extra-inspector-container', {
    cell: cell
    inputs: customInputs,
    groups: CommonInspectorGroups,
  });
} // if only ONE inspector needs to be loaded add an ELSE block here
  // and use '.inspector-container' in the `create()` above

// If `InspectorDefs` is a global variable with all the cells inspectors properties
// create and load the default inspector
joint.ui.Inspector.create('.inspector-container', _.extend({cell: cell},
  InspectorDefs[cell.get('type')])
);