Fabric Snap Prototype

by gcollect

HTML

<script src="http://americanfootball-kassel.de/ma-test/test-0124-2/js/event.js"></script>
<canvas id="testcanvas" width="700" height="500" style="border:1px solid #ccc"></canvas>

CSS

.canvas-container {
            display: inline-block;
            vertical-align: top;
        }
        canvas {
            border: 1px solid #eee !important;
            float: left;
        }

JavaScript

var canvas = this.__canvas = new fabric.Canvas('testcanvas', {
    hoverCursor: 'pointer',
    selection: true
});
canvas.selection = false;
var rect1 = new fabric.Rect({
    width: 100,
    height: 100,
    top: 300,
    left: 0,
    minScaleLimit: 1,
    fill: 'rgba(255,0,0,1)',
    hasRotatingPoint: false,
    perPixelTargetFind: true,
    lockRotation: true,
    originX: 'left',
    originY: 'bottom'
});
var rect2 = new fabric.Rect({
    width: 100,
    height: 100,
    top: 300,
    left: 200,
    minScaleLimit: 1,
    fill: 'rgba(0,0,255,1)',
    hasRotatingPoint: false,
    perPixelTargetFind: true,
    lockRotation: true,
    originX: 'left',
    originY: 'bottom'
});
var rect3 = new fabric.Rect({
    width: 100,
    height: 100,
    top: 300,
    left: 350,
    minScaleLimit: 1,
    fill: 'rgba(0,255,0,1)',
    hasRotatingPoint: false,
    perPixelTargetFind: true,
    lockRotation: true,
    originX: 'left',
    originY: 'bottom'
});

canvas.add(rect1, rect2, rect3);

canvas.on({
    'object:moving': onChange,
        'object:scaling': onChange,
        'object:modified': onChange
});

function onChange(options) {
    canvas.renderAll();
    options.target.setCoords();
    canvas.forEachObject(function (obj) {
        if (obj === options.target) return;

        if (options.target.isContainedWithinObject(obj) || options.target.intersectsWithObject(obj) || obj.isContainedWithinObject(options.target)) {
            obj.right = obj.left + obj.width;
            obj.bottom = obj.top + obj.height;
            options.target.right = options.target.left + options.target.width;
            options.target.bottom = options.target.top + options.target.height;

            var distx = ((obj.left + obj.width) / 2) - ((options.target.left + options.target.width) / 2);
            var disty = ((obj.top + obj.height) / 2) - ((options.target.top + options.target.height) / 2);


            if (disty > 0) {
                options.target.top = obj.top -...