如何在jointJS中添加一个新的Inspector（除了元素和链接的Inspector） - Rappid答案

【问题标题】：How to add a new Inspector(apart from the Inspector of elements and links) in jointJS - Rappid如何在jointJS中添加一个新的Inspector（除了元素和链接的Inspector） - Rappid
【发布时间】：2018-03-01 20:20:54
【问题描述】：

我想添加一个仅针对特定类型的元素（不是链接）打开的第三个检查器，例如仅针对 Rappid 中的 basic.Rect。

到目前为止，有 2 个 Inspectors。用于元素和用于链接。

有什么办法可以做到吗？

以下代码是 Rappid KitchenSkink 版本的一部分。

这里是函数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');
        }
    }
}

【问题讨论】：

有什么办法可以做到吗？
我不是我正确理解这个问题。如何将basic.Rect 检查器定义添加到您的InspectorDefs 对象中。
Roman 我不明白我应该在函数 createInspector 中编写什么代码来为这个特定元素打开一个新的检查器，比如说 basic.Rect。我想要一个具有不同检查器字段的第三个检查器，专门为此 basic.Rect 定义

标签： javascript jointjs inspector rappid

【解决方案1】：

如果您使用joint.ui.Inspector.create('#path', inspectorProperties)，则特定 DOM 元素中的任何先前的 Inspector 实例都会被删除，并会自动创建新实例并将其渲染到 DOM 中（它避免创建 joint.ui.Inspector() 的新实例，渲染它，添加手动渲染结果并删除前一个实例）。

它还跟踪打开/关闭的组，并根据上次使用的状态恢复它们。

除此之外，您可能总是有几个不同的inspectorProperties 对象，当您即将create() 检查器时，之前定义了这些对象。因此，按照您粘贴的代码，您可以先执行所需的测试，然后创建适当的检查器：

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')])
);

【讨论】：