Insert Chars Bug

FabricJS

by Eugene Vilder

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

JavaScript

fabric.DdpTextParagraph = fabric.util.createClass(fabric.Textbox, {
    type: 'ddp-text-paragraph',
    initialize: function(element, options) {
        this.callSuper('initialize', element, options);
    },
  	
    _getCursorBoundariesOffsets: function(position) {
        if (this.cursorOffsetCache && "top" in this.cursorOffsetCache) {
            return this.cursorOffsetCache;
        }
        var lineLeftOffset, lineIndex = 0, charIndex = 0, topOffset = 0, leftOffset = 0, boundaries, 
        		cursorPosition = this.get2DCursorLocation(position);
        for (var i = 0; i < cursorPosition.lineIndex; i++) {
            topOffset += this.getHeightOfLine(i);
        }

        topOffset += this.paragraphSpaceBefore[cursorPosition.lineIndex];

        lineLeftOffset = this._getLineLeftOffset(cursorPosition.lineIndex);
        var bound = this.__charBounds[cursorPosition.lineIndex][cursorPosition.charIndex];

        bound && (leftOffset = bound.left);
        if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) {
            leftOffset -= this._getWidthOfCharSpacing();
        }
        boundaries = {
            top: topOffset,
            left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0)
        };
        this.cursorOffsetCache = boundaries;
        return this.cursorOffsetCache;
		},
    
    _getSpaceBeofreByLineIndex: function(lineIndex){
	    return this.paragraphSpaceBefore.filter((v, i)=>{
    		return i<=lineIndex;
    	}).reduce((a, b) => a + b, 0);
    },
    
    _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) {
      var decl = this._getStyleDeclaration(lineIndex, charIndex), 
          fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex), 
          shouldFill = method === "fillText" && fullDecl.fill, 
          shouldStroke = method === "strokeText" && fullDecl.stroke && fullDecl.strokeWidth;
      if (!shouldStroke && !shouldFill) {
        return;
      }
      decl &&...