Как получить событие по изменению текста или атрибута с помощью инспектора соединения - PullRequest
Новая
       9

Как получить событие по изменению текста или атрибута с помощью инспектора соединения

0 голосов
/ 26 июня 2018

В обработчике обратного вызова для изменения текста из инспектора я хочу выполнить некоторую логику над введенным текстом в текстовом поле инспектора, прежде чем он будет применен к выбранной ячейке на бумаге.Для этого я должен предотвратить действие по умолчанию.

Я успешно реализовал его, используя событие Backbone с rappid 2.0.0.Это более ранняя реализация - 

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

Но теперь я обновил реализацию до углового компонента 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 () выдает ошибку.

Пытался найти решение, но не смог.

1 Ответ

0 голосов
/ 03 июля 2018

Там нет 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: function (cell) {

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);
})
...