时间戳

首页 > 解决方案 > 如何使用检查器joinjs获取有关文本属性更改的事件

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

问题描述

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

我已经使用 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);
}

但是现在我已经使用 typescript 将实现更新为 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() 给出错误。

试图寻找解决方案，但没有通过。

标签： typescriptjointjsrappid

解决方案

那里没有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);
})

推荐阅读