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(700);

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

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: -width / 2,
      width,
      top: newTop
    });
    
    newTop += p.height + pageData.paragraphMarginBottom;
    newPageHeight += p.height + pageData.paragraphMarginBottom;
  });
  this.set({
    height: newPageHeight
  });
//  this.setCoords();
  canvas.renderAll();
});

canvas.renderAll();