Question

在用于从检查器更改文本的回调处理程序中，我想对在检查器文本字段中输入的文本执行一些逻辑，然后再将其应用于纸张上的所选单元格。为此，我必须阻止默认操作。

我已经使用rappid 2.0.0的Backbone事件成功实现了它。这是较早的实现-

'change [data-attribute="attrs/text/text"]': function(evt) {

    evt.preventDefault();
    var editedText = $(evt.target).text();
    var convertedText = my.workflow.getApiName(editedText);
    var selectedElement = this.selection.collection.toArray()[0];
    var selectedElementId = selectedElement.id;
    var selectedCell = this.graph.getCell(selectedElementId);
    selectedCell.attributes.apiName = editedText;
    selectedCell.attr("text/text", convertedText);
}

但是现在我已经使用打字稿将实现更新为angular 6组件，

const graph = this.graph = new joint.dia.Graph;
graph.on('change [data-attribute="attrs/text/text"]', (cell: joint.dia.Cell, evt: any) => {
 evt.preventDefault();
});

这是evt.preventDefault（）给出错误消息。

试图寻找解决方案，但没有成功。

Answer 1

那里没有evt参数。

在这里https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#dia.Graph.events

但是，在检查器中，可能是一些有用的选项：

validateInput，getFieldValue（https://resources.jointjs.com/docs/rappid/v2.3/ui.html#ui.Inspector）：

createInspector：函数（单元格）{

var inspector = joint.ui.Inspector.create('.inspector-container', _.extend({
    cell: cell,
    /**
     * @param {HTMLElement} element
     * @param {string} path - field path e.g `attrs/label/text`
     * @param {string} type - text, content-editable, range ...
     * @returns {boolean}
     */
    validateInput: function(element, path, type) {
        // ... validations
        console.log('validate', arguments);
        return true; // `false` - prevent propagate changes to the cell
    },
    /**
     * @param {HTMLElement} element
     * @param {string} type - text, content-editable, range ...
     */
    getFieldValue: function(element, type) {
        console.log('getFieldValue', arguments);
    }
}, App.config.inspector[cell.get('type')]));

return inspector;

}，

您还可以记录所有事件：

// also possible as `graph.on('all'...`, `paper.on('all' ... `
inspector.on('all', function() {
    console.log('Inspector event - ', arguments);
})

如何使用检查器JointJS获取有关文本属性更改的事件

1 个答案: