Fabric JS v 2.3.6 после вызова insertChars установка позиции каретки отменяется при нажатии любой клавиши - PullRequest
Новая
       8

Fabric JS v 2.3.6 после вызова insertChars установка позиции каретки отменяется при нажатии любой клавиши

0 голосов
/ 17 сентября 2018

Я пытаюсь вставить латинские символы в текстовое поле с помощью кнопки.Когда я набираю несколько слов, а затем нажимаю кнопку, чтобы вставить символ, он вставляется нормально, и курсор устанавливается правильно.Проблема в том, что при попытке продолжить ввод каретки переходит на 2 символа влево, помещая новый набранный символ слева от того, что было вставлено, вместо того, чтобы помнить, где я поместил каретку после вставленного символа.

Слышатьjsfiddle для демонстрации проблемы: https://jsfiddle.net/Larry_Robertson/6u1smL0d/

Вот мой код: HTML 

<div class="characters text_tool_item">
  <div class="editor_toolbar_item latin_character">Á</div>
  <div class="editor_toolbar_item latin_character">á</div>
  <div class="editor_toolbar_item latin_character">É</div>
  <div class="editor_toolbar_item latin_character">é</div>
  <div class="editor_toolbar_item latin_character">Í</div>
  <div class="editor_toolbar_item latin_character">í</div>
  <div class="editor_toolbar_item latin_character">Ó</div>
  <div class="editor_toolbar_item latin_character">ó</div>
  <div class="editor_toolbar_item latin_character">Ú</div>
  <div class="editor_toolbar_item latin_character">ú</div>
  <div class="editor_toolbar_item latin_character">Ñ</div>
  <div class="editor_toolbar_item latin_character">ñ</div>
  <div class="editor_toolbar_item latin_character">Ü</div>
  <div class="editor_toolbar_item latin_character">ü</div>
  <div class="editor_toolbar_item latin_character">¿</div>
  <div class="editor_toolbar_item latin_character">¡</div>
 </div>

<input type="radio" name="arrowQuestion" id="text" value="Text">Add Text
<canvas id="canvas" width="500" height="200" style="border:2px solid black"></canvas>

CSS: 

.latin_character {
  text-align: center;
  vertical-align: top;
  font-size: 24px;
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Geneva, sans-serif;
}

.characters {
  margin: 0px;
  padding: 0px;
}

.editor_toolbar_item {
  /*position: relative;*/
  display: inline-block !important;
  cursor: pointer;
}

JS: 

var canvas = new fabric.Canvas('canvas');
var canvasHeight = canvas.height;
var canvasWidth = canvas.width;


$('.latin_character').on(("click"), function(el) {
  var activeObject = canvas.getActiveObject();
  if (activeObject) {
    var caretPositionStart = activeObject.selectionStart;
    var caretPositionEnd = activeObject.selectionEnd;
    var char = $(this).html();
    activeObject.enterEditing();
    activeObject.insertChars(char, null, caretPositionStart, caretPositionEnd);
    activeObject.exitEditing();
    activeObject.enterEditing();
    activeObject.selectionStart = caretPositionStart + 1;
    activeObject.selectionEnd = caretPositionStart + 1;
  }
});


canvas.renderAll();

canvas.on('mouse:down', function(event) {
  if (canvas.getActiveObject()) {
    //alert(event.target);
  }

})


canvas.on('mouse:down', function(options) {
  useText = document.getElementById("text").checked;
  if (useText) {
    addTextBox(options.e.clientX, options.e.clientY);
    useText = false;
    document.getElementById("text").checked = false;
  } else
    return;
});

function addTextBox(arrowLeft, arrowTop) {
  textBox = new fabric.Textbox("Enter Text", {
    fontSize: 30,
    fontFamily: 'Verdana',
    textAlign: 'left',
    width: 400, // for 20 characters
    top: arrowTop-61,
    left: arrowLeft-0
  });

  canvas.add(textBox);
  canvas.renderAll();

  textBox.on('selected', function(e) {
    console.log(textBox);
    console.log('selected Textbox');
    canvas.renderAll();

  });

  textBox.on("editing:entered", function(e) {
    //canvas.setActiveObject(textBox);
    var obj = canvas.getActiveObject();
    console.log("entered editing");
    if (obj.text == "Enter Text") {
      obj.selectAll();
      obj.removeChars();
    }
  });

  textBox.on("editing:exited", function(e) {
    console.log("exited editing");
  });
  var left = arrowLeft;


}

1 Ответ

0 голосов
/ 20 сентября 2018

Я новичок в ткани JS и после многих часов разочарования я наконец понял это.

Моя проблема была очень простой. Я не устанавливал selectionStart и selectionEnd перед вызовом «exitEditing» в событии щелчка латинского символа.

Старый код 

    $('.latin_character').on(("click"), function(el) {
        var activeObject = canvas.getActiveObject();
        if (activeObject) {
            var caretPositionStart = activeObject.selectionStart;
            var caretPositionEnd = activeObject.selectionEnd;
            var char = $(this).html();
            activeObject.enterEditing();
            activeObject.insertChars(char, null, caretPositionStart, caretPositionEnd);
            activeObject.exitEditing();
            activeObject.enterEditing();
            activeObject.selectionStart = caretPositionStart + 1;
            activeObject.selectionEnd = caretPositionStart + 1;
        }
    });

Новый код 

    $('.latin_character').on(("click"), function(el) {
        var activeObject = canvas.getActiveObject();
        if (activeObject) {
            var caretPositionStart = activeObject.selectionStart;
            var caretPositionEnd = activeObject.selectionEnd;
            var char = $(this).text();
            activeObject.enterEditing();
            activeObject.insertChars(char, null, caretPositionStart, caretPositionEnd);
            activeObject.selectionStart = caretPositionStart + char.length;
            activeObject.selectionEnd = caretPositionStart + char.length + 1;
            activeObject.exitEditing();
            canvas.renderAll();
            activeObject.enterEditing();
        }
    });

Вот фиксированный jsfiddle: https://jsfiddle.net/Larry_Robertson/08yxpz35/

...