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

const canvas = new fabric.Canvas('paper');
canvas.setHeight(500);
canvas.setWidth(500);

const pageData = { 
	y: 20,  
  x: 50,
  width: 300,
  paragraphMarginBottom: 0
};

const paragraphOne = new fabric.Textbox('This is the first paragraph text aligned left.', {
  width: pageData.width,
  top: pageData.y,
//  originX: 'left',
 // originY: 'top',
});

const paragraphTwo = new fabric.Textbox('This is the second paragraph text aligned right.', {
  width: pageData.width,
  textAlign:'right',
//  originX: 'left',
//  originY: 'top',
  top: pageData.y + paragraphOne.height + pageData.paragraphMarginBottom
});

const page = new fabric.Group([paragraphOne, paragraphTwo],{
  subTargetCheck: true,
  left: pageData.x,
  top: pageData.y,
//  originX: 'left',
//  originY: 'top',
});

canvas.add(page);

page.on('scaling', function(){
	const width = this.getScaledWidth();
  const height = this.getScaledHeight();
  
  this.scale(1);
	this.set({
  	width,
    height
  });

  //this.setCoords();
  canvas.renderAll();
  
  const paragraphs = page.getObjects();
  let newTop = this.top - this.height / 2;
  let newPageHeight = 0;
	paragraphs.forEach((p)=>{
	  p.scale(1);
  	p.set({
      left: 0 - width / 2,
    	width,
      top: newTop
    });
    newTop += p.height + pageData.paragraphMarginBottom;
    newPageHeight += p.height;
  });
  this.set({
  	height: newPageHeight
  });
//  this.setCoords();
  canvas.renderAll();
});

canvas.renderAll();