From c543b3b16a0da09b76a7a5f514235a4bc200f43d Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 11 Sep 2016 20:22:05 +0200 Subject: [PATCH] Fabric2include (#3253) * move backgroundColor to all classes (#3248) * add custom properties to bg and overlay (#3250) * update function and test * fix interset with object and overlap * Update canvas_static.js --- src/mixins/object_geometry.mixin.js | 17 ++++--- test/unit/canvas_static.js | 15 ++++++- test/unit/object.js | 70 ++++++++++++++++++----------- 3 files changed, 69 insertions(+), 33 deletions(-) diff --git a/src/mixins/object_geometry.mixin.js b/src/mixins/object_geometry.mixin.js index b2e47d37a69..30c771b584a 100644 --- a/src/mixins/object_geometry.mixin.js +++ b/src/mixins/object_geometry.mixin.js @@ -48,7 +48,9 @@ getCoords(other.oCoords) ); - return intersection.status === 'Intersection'; + return intersection.status === 'Intersection' + || other.isContainedWithinObject(this) + || this.isContainedWithinObject(other); }, /** @@ -57,11 +59,14 @@ * @return {Boolean} true if object is fully contained within area of another object */ isContainedWithinObject: function(other) { - var boundingRect = other.getBoundingRect(), - point1 = new fabric.Point(boundingRect.left, boundingRect.top), - point2 = new fabric.Point(boundingRect.left + boundingRect.width, boundingRect.top + boundingRect.height); - - return this.isContainedWithinRect(point1, point2); + var points = getCoords(this.oCoords), + i = 0; + for (; i < 4; i++) { + if (!other.containsPoint(points[i])) { + return false; + } + } + return true; }, /** diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index 4ec8cc8963d..9787c5683f3 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -170,12 +170,23 @@ ok('backgroundObject' in canvas); ok('overlayObject' in canvas); ok('clipTo' in canvas); + ok('includeDefaultValues' in canvas); + ok('stateful' in canvas); + ok('automaticRender' in canvas); + ok('controlsAboveOverlay' in canvas); + ok('allowTouchScrolling' in canvas); + ok('imageSmoothingEnabled' in canvas); + ok('backgroundVpt' in canvas); + ok('overlayVpt' in canvas); equal(canvas.includeDefaultValues, true); equal(canvas.stateful, true); equal(canvas.automaticRender, true); equal(canvas.controlsAboveOverlay, false); + equal(canvas.allowTouchScrolling, false); equal(canvas.imageSmoothingEnabled, true); + equal(canvas.backgroundVpt, true); + equal(canvas.overlayVpt, true); notStrictEqual(canvas.viewportTransform, canvas2.viewportTransform); }); @@ -766,7 +777,7 @@ }); }); - asyncTest('toJSON backgroundImage with custom props', function() { + asyncTest('toJSON backgroundObject with custom props', function() { createImageObject(function(image) { canvas.backgroundObject = image; image.custom = 'yes'; @@ -793,7 +804,7 @@ }); }); - asyncTest('toJSON backgroundImage with custom props', function() { + asyncTest('toJSON overlayObject with custom props', function() { createImageObject(function(image) { canvas.overlayObject = image; image.custom = 'yes'; diff --git a/test/unit/object.js b/test/unit/object.js index 0f6c70859fa..2cc5658eebf 100644 --- a/test/unit/object.js +++ b/test/unit/object.js @@ -714,17 +714,22 @@ test('intersectsWithObject', function() { var cObj = new fabric.Object({ left: 50, top: 50, width: 100, height: 100 }); cObj.setCoords(); - ok(typeof cObj.intersectsWithObject == 'function'); + ok(typeof cObj.intersectsWithObject == 'function', 'has intersectsWithObject method'); var cObj2 = new fabric.Object({ left: -150, top: -150, width: 200, height: 200 }); cObj2.setCoords(); - ok(cObj.intersectsWithObject(cObj2)); - ok(cObj2.intersectsWithObject(cObj)); + ok(cObj.intersectsWithObject(cObj2), 'cobj2 does intersect with cobj'); + ok(cObj2.intersectsWithObject(cObj), 'cobj2 does intersect with cobj'); var cObj3 = new fabric.Object({ left: 392.5, top: 339.5, width: 13, height: 33 }); cObj3.setCoords(); - ok(!cObj.intersectsWithObject(cObj3)); - ok(!cObj3.intersectsWithObject(cObj)); + ok(!cObj.intersectsWithObject(cObj3), 'cobj3 does not intersect with cobj (external)'); + ok(!cObj3.intersectsWithObject(cObj), 'cobj3 does not intersect with cobj (external)'); + + var cObj4 = new fabric.Object({ left: 0, top: 0, width: 200, height: 200 }); + cObj4.setCoords(); + ok(cObj4.intersectsWithObject(cObj), 'overlapping objects are considered intersecting'); + ok(cObj.intersectsWithObject(cObj4), 'overlapping objects are considered intersecting'); }); test('isContainedWithinRect', function() { @@ -1324,31 +1329,46 @@ object2.set({ originX: 'center', originY: 'center' }).setCoords(); object3.set({ originX: 'center', originY: 'center' }).setCoords(); - // object and object1 intersects - equal(object.intersectsWithObject(object1), true); - // object2 is contained in object (no intersection) - equal(object.intersectsWithObject(object2), false); - // object3 is outside of object (no intersection) - equal(object.intersectsWithObject(object3), false); + equal(object.intersectsWithObject(object1), true, 'object and object1 intersects'); + equal(object.intersectsWithObject(object2), true, 'object2 is contained in object'); + equal(object.intersectsWithObject(object3), false, 'object3 is outside of object (no intersection)'); }); test('isContainedWithinObject', function() { - var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 230 }), - object1 = new fabric.Object({ left: 25, top: 35, width: 20, height: 20, angle: 50 }), - object2 = new fabric.Object({ left: 20, top: 30, width: 60, height: 30, angle: 10 }), - object3 = new fabric.Object({ left: 50, top: 50, width: 20, height: 20, angle: 0 }); + var object = new fabric.Object({ left: 0, top: 0, width: 40, height: 40, angle: 0 }), + object1 = new fabric.Object({ left: 1, top: 1, width: 38, height: 38, angle: 0 }), + object2 = new fabric.Object({ left: 20, top: 20, width: 40, height: 40, angle: 0 }), + object3 = new fabric.Object({ left: 50, top: 50, width: 40, height: 40, angle: 0 }); - object.set({ originX: 'center', originY: 'center' }).setCoords(); - object1.set({ originX: 'center', originY: 'center' }).setCoords(); - object2.set({ originX: 'center', originY: 'center' }).setCoords(); - object3.set({ originX: 'center', originY: 'center' }).setCoords(); + object.setCoords(); + object1.setCoords(); + object2.setCoords(); + object3.setCoords(); + + equal(object1.isContainedWithinObject(object), true, 'object1 is fully contained within object'); + equal(object2.isContainedWithinObject(object), false, 'object2 intersects object (not fully contained)'); + equal(object3.isContainedWithinObject(object), false, 'object3 is outside of object (not fully contained)'); + object1.angle = 45; + object1.setCoords(); + equal(object1.isContainedWithinObject(object), false, 'object1 rotated is not contained within object'); + + var rect1 = new fabric.Rect({ + width: 50, + height: 50, + left: 50, + top: 50 + }); - // object1 is fully contained within object - equal(object1.isContainedWithinObject(object), true); - // object2 intersects object (not fully contained) - equal(object2.isContainedWithinObject(object), false); - // object3 is outside of object (not fully contained) - equal(object3.isContainedWithinObject(object), false); + var rect2 = new fabric.Rect({ + width: 100, + height: 100, + left: 100, + top: 0, + angle: 45, + }); + rect1.setCoords(); + rect2.setCoords(); + equal(rect1.isContainedWithinObject(rect2), false, 'rect1 rotated is not contained within rect2'); }); test('isContainedWithinRect', function() {