Fabric JS - objects snapping, no overlap

by Vijay Gujar

HTML

<canvas id="canvas" width="800" height="500" style="border:1px solid #ccc"></canvas>

JavaScript

var canvas = new fabric.Canvas('canvas'),
canvasWidth = document.getElementById('canvas').width,
canvasHeight = document.getElementById('canvas').height,
counter = 0,
rectLeft = 0,
snap = 20; //Pixels to snap

canvas.selection = false;
plusrect(0.45,0,100.3242,100.3242);
plusrect(0.45,100.3242,100.3242,100.3242);
plusrect(0.45, 200.6484, 100.7242,100.7242);

/* plusrect(0,0,100,100);
plusrect(0,100,100,100);
plusrect(0, 200, 100,100); */

function plusrect(top, left, width, height, fill) {
//width = 50.453
	var rect = new fabric.Rect({
		top: top,
		name: 'rectangle ' + counter,
		left: left,
		width: width,
		height: height,
		fill: '#ff00ff',
    stroke: '#ff00ff',
     strokeWidth: null,
		lockRotation: true,
		originX: 'left',
		originY: 'top',
		cornerSize: 15,
		hasRotatingPoint: false,
		perPixelTargetFind: true,
		minScaleLimit: 1,
		maxWidth: canvasWidth,
		maxHeight: canvasHeight
	});

	rect.custom = {};
	rect.custom.counter = counter;

	canvas.add(rect);
	counter++;
	//rectLeft += width;
  console.log(rect.strokeWidth, rect.stroke)
}

function findNewPos(distX, distY, target, obj) {
	// See whether to focus on X or Y axis
	if(Math.abs(distX) > Math.abs(distY)) {
		if (distX > 0) {
			target.setLeft(obj.getLeft() - target.getWidth());
		} else {
			target.setLeft(obj.getLeft() + obj.getWidth());
		}
	} else {
		if (distY > 0) {
			target.setTop(obj.getTop() - target.getHeight());
		} else {
			target.setTop(obj.getTop() + obj.getHeight());
		}
	}
}

canvas.on('object:moving', function (options) {
return
	// Sets corner position coordinates based on current angle, width and height
	options.target.setCoords();

	// Don't allow objects off the canvas
	if(options.target.getLeft() < snap) {
		options.target.setLeft(0);
	}

	if(options.target.getTop() < snap) {
		options.target.setTop(0);
	}

	if((options.target.getWidth() + options.target.getLeft()) > (canvasWidth - snap)) {
		options.target.setLeft(canvasWidth -...