Question

我试图双击形状中的文本，然后将文本包装到形状的当前宽度，同时自动增加高度。基本上，我希望双击文字进行编辑时自动换行。

我正在使用各种示例代码，并进行了最小的更改来尝试实现我的追求，所以大部分不是我的代码。

当前，我有一个带有双击侦听器的自定义形状，然后它会调用一个函数来更改文本，该函数使用joint.util.breakText函数：

            this.textEditor = new joint.ui.TextEditor({ text: text });
            this.textEditor.render(this.paper.el);

            this.textEditor.on('text:change', function(newText) {

                var cell = cellViewUnderEdit.model;
                cell.prop(cellViewUnderEdit.textEditPath, joint.util.breakText(newText, { width: cell.attributes.size.width }));

                if (cellViewUnderEdit.optionId) {
                    this.textEditor.options.text = cellViewUnderEdit.$('.option.option-' + cellViewUnderEdit.optionId + ' .option-text')[0];
                }

            }, this);

            cellViewUnderEdit = cellView;
            // Prevent dragging during inline editing.
            cellViewUnderEdit.setInteractivity(false);

我还有一个自定义形状的侦听器，它会根据更改触发并相应调整大小：

    joint.shapes.special.MyShape = joint.dia.ElementView.extend({

    initialize: function() {

        joint.dia.ElementView.prototype.initialize.apply(this, arguments);
        this.autoresize();
        this.listenTo(this.model, 'change:details', this.autoresize, this);
    },

    autoresize: function() {

        var dim = joint.util.measureText(this.model.get('details'), {
            fontSize: this.model.attr('text/fontSize')
        });
        this.model.resize(dim.width + 5, dim.height + 5);
    }
});

我得到一些非常奇怪的行为，其中第一行的空格被忽略了，我自己也无法添加新行。文本光标也会跳到文本的左上角，并且永远不会位于正确的位置...否则它将正常工作！：）

感谢您的帮助！

在进行内联编辑和换行文本时，JointJS的行为异常

0 个答案: