Question

我想添加一个第3个Inspector，它只会打开特定类型的元素（不是链接），例如仅适用于Rappid中的basic.Rect。

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

有什么方法可以做到吗？

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

这是函数 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

如果您使用joint.ui.Inspector.create('#path', inspectorProperties)任何先前的Inspector实例，则会删除特定DOM元素，并自动创建新的实例并将其呈现到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')])
);

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

1 个答案: