Question

我正在使用流程图编辑器，我希望ui.inspector能够编辑链接上的标签。

我做了以下事情：

function createInspector(cellView) {


    if (!inspector || inspector.options.cellView !== cellView) {

        if (inspector) {

            inspector.remove();
        }

inspector = new joint.ui.Inspector({
            inputs: {

                labels: 
             attrs: {
            text:{

          text: { type: 'textarea', group: 'Labels', label: 'Label', index: 2 },

                 }
                }

                        },

            },

            },
            groups: {

               labels:[ { label: 'Labels', index: 1 },
            }],
            cellView: cellView
        });
        $('#inspector-holder-create').html(inspector.render().el);
    }
}

paper.on('cell:pointerdown', function(cellView) {
    createInspector(cellView);
});

但是，当我编辑一个链接时，它会显示在JSON输出中：

"labels": {
            "0": {
                "attrs": {
                    "text": {
                        "text": "Text I entered"
                    }
                }
            }
        },

但实际上并未在模板中的链接上呈现。

我认为问题出在检查员添加的 {“0”：部分。我想删除它并用它替换[]所以输出将是

 labels: [
    { attrs: { text: { text: 'label' } } }
]

我该怎么办？

Answer 1

inspector = new joint.ui.Inspector({
inputs: {
    'labels': [
        {attrs: {
            text: {
                text: {
                    type: 'text',
                    group: 'someGroup',
                    index: 1,
                    label: "Label"
                }
            }
        }}
    ]
}});

Answer 2

可以用inputs定义检查器paths。

'labels/0/attrs/text/text': {
    type: 'text',
    group: 'Text',
    index: 1,
    label: 'Label'
}

或作为属性嵌套和路径的组合。

'labels/0/attrs': {
    text: {
        text: {
            type: 'text',
            group: 'Text',
            index: 1,
            label: 'Label'
        },
        fontSize: {
            type: 'number',
            group: 'Text',
            index: 2,
            label: 'Font Size'
        }
    }
}

这对Rappid v2.4.0 +有效。

JointJS：Inspector不编辑链接标签？

2 个答案: