diff --git a/lib/aligning_guidelines.js b/lib/aligning_guidelines.js index a4dad1de..f6c76e7a 100644 --- a/lib/aligning_guidelines.js +++ b/lib/aligning_guidelines.js @@ -57,11 +57,16 @@ function initAligningGuidelines(canvas) { var activeObject = e.target, canvasObjects = canvas.getObjects(), - activeObjectLeft = activeObject.get('left'), - activeObjectTop = activeObject.get('top'), + activeObjectCenter = activeObject.getCenterPoint(), + activeObjectLeft = activeObjectCenter.x, + activeObjectTop = activeObjectCenter.y, activeObjectHeight = activeObject.getHeight(), activeObjectWidth = activeObject.getWidth(), - noneInTheRange = true; + horizontalInTheRange = false, + verticalInTheRange = false, + transform = canvas._currentTransform; + + if (!transform) return; // It should be trivial to DRY this up by encapsulating (repeating) creation of x1, x2, y1, and y2 into functions, // but we're not doing it here for perf. reasons -- as this a function that's invoked on every mouse move @@ -70,14 +75,15 @@ function initAligningGuidelines(canvas) { if (canvasObjects[i] === activeObject) continue; - var objectLeft = canvasObjects[i].get('left'), - objectTop = canvasObjects[i].get('top'), + var objectCenter = canvasObjects[i].getCenterPoint(), + objectLeft = objectCenter.x, + objectTop = objectCenter.y, objectHeight = canvasObjects[i].getHeight(), objectWidth = canvasObjects[i].getWidth(); // snap by the horizontal center line if (isInRange(objectLeft, activeObjectLeft)) { - noneInTheRange = false; + verticalInTheRange = true; verticalLines.push({ x: objectLeft, y1: (objectTop < activeObjectTop) @@ -87,12 +93,12 @@ function initAligningGuidelines(canvas) { ? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset) : (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset) }); - activeObject.set('left', objectLeft); + activeObject.setPositionByOrigin(new fabric.Point(objectLeft, activeObjectTop), transform.originX, transform.originY); } // snap by the left edge if (isInRange(objectLeft - objectWidth / 2, activeObjectLeft - activeObjectWidth / 2)) { - noneInTheRange = false; + verticalInTheRange = true; verticalLines.push({ x: objectLeft - objectWidth / 2, y1: (objectTop < activeObjectTop) @@ -102,12 +108,12 @@ function initAligningGuidelines(canvas) { ? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset) : (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset) }); - activeObject.set('left', objectLeft - objectWidth / 2 + activeObjectWidth / 2); + activeObject.setPositionByOrigin(new fabric.Point(objectLeft - objectWidth / 2 + activeObjectWidth / 2, activeObjectTop), transform.originX, transform.originY); } // snap by the right edge if (isInRange(objectLeft + objectWidth / 2, activeObjectLeft + activeObjectWidth / 2)) { - noneInTheRange = false; + verticalInTheRange = true; verticalLines.push({ x: objectLeft + objectWidth / 2, y1: (objectTop < activeObjectTop) @@ -117,12 +123,12 @@ function initAligningGuidelines(canvas) { ? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset) : (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset) }); - activeObject.set('left', objectLeft + objectWidth / 2 - activeObjectWidth / 2); + activeObject.setPositionByOrigin(new fabric.Point(objectLeft + objectWidth / 2 - activeObjectWidth / 2, activeObjectTop), transform.originX, transform.originY); } // snap by the vertical center line if (isInRange(objectTop, activeObjectTop)) { - noneInTheRange = false; + horizontalInTheRange = true; horizontalLines.push({ y: objectTop, x1: (objectLeft < activeObjectLeft) @@ -132,12 +138,12 @@ function initAligningGuidelines(canvas) { ? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset) : (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset) }); - activeObject.set('top', objectTop); + activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop), transform.originX, transform.originY); } // snap by the top edge if (isInRange(objectTop - objectHeight / 2, activeObjectTop - activeObjectHeight / 2)) { - noneInTheRange = false; + horizontalInTheRange = true; horizontalLines.push({ y: objectTop - objectHeight / 2, x1: (objectLeft < activeObjectLeft) @@ -147,12 +153,12 @@ function initAligningGuidelines(canvas) { ? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset) : (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset) }); - activeObject.set('top', objectTop - objectHeight / 2 + activeObjectHeight / 2); + activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop - objectHeight / 2 + activeObjectHeight / 2), transform.originX, transform.originY); } // snap by the bottom edge if (isInRange(objectTop + objectHeight / 2, activeObjectTop + activeObjectHeight / 2)) { - noneInTheRange = false; + horizontalInTheRange = true; horizontalLines.push({ y: objectTop + objectHeight / 2, x1: (objectLeft < activeObjectLeft) @@ -162,16 +168,21 @@ function initAligningGuidelines(canvas) { ? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset) : (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset) }); - activeObject.set('top', objectTop + objectHeight / 2 - activeObjectHeight / 2); + activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop + objectHeight / 2 - activeObjectHeight / 2), transform.originX, transform.originY); } } - if (noneInTheRange) { - verticalLines.length = horizontalLines.length = 0; + if (!horizontalInTheRange) { + horizontalLines.length = 0; + } + + if (!verticalInTheRange) { + verticalLines.length = 0; } }); canvas.on('after:render', function() { + canvas.clearContext(canvas.contextTop); for (var i = verticalLines.length; i--; ) { drawVerticalLine(verticalLines[i]); } @@ -184,4 +195,4 @@ function initAligningGuidelines(canvas) { verticalLines.length = horizontalLines.length = 0; canvas.renderAll(); }); -} \ No newline at end of file +}