Andreas Hocevar
637 lines
22 KiB
JavaScript
637 lines
22 KiB
JavaScript
// Copyright 2008 The Closure Library Authors. All Rights Reserved.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS-IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
goog.provide('goog.fx.AbstractDragDropTest');
|
|
goog.setTestOnly('goog.fx.AbstractDragDropTest');
|
|
|
|
goog.require('goog.array');
|
|
goog.require('goog.events.EventType');
|
|
goog.require('goog.functions');
|
|
goog.require('goog.fx.AbstractDragDrop');
|
|
goog.require('goog.fx.DragDropItem');
|
|
goog.require('goog.math.Box');
|
|
goog.require('goog.math.Coordinate');
|
|
goog.require('goog.style');
|
|
goog.require('goog.testing.events');
|
|
goog.require('goog.testing.jsunit');
|
|
|
|
var targets = [
|
|
{ box_: new goog.math.Box(0, 3, 1, 1) },
|
|
{ box_: new goog.math.Box(0, 7, 2, 6) },
|
|
{ box_: new goog.math.Box(2, 2, 3, 1) },
|
|
{ box_: new goog.math.Box(4, 1, 6, 1) },
|
|
{ box_: new goog.math.Box(4, 9, 7, 6) },
|
|
{ box_: new goog.math.Box(9, 9, 10, 1) }
|
|
];
|
|
|
|
var targets2 = [
|
|
{ box_: new goog.math.Box(10, 50, 20, 10) },
|
|
{ box_: new goog.math.Box(20, 50, 30, 10) },
|
|
{ box_: new goog.math.Box(60, 50, 70, 10) },
|
|
{ box_: new goog.math.Box(70, 50, 80, 10) }
|
|
];
|
|
|
|
var targets3 = [
|
|
{ box_: new goog.math.Box(0, 4, 1, 1) },
|
|
{ box_: new goog.math.Box(1, 6, 4, 5) },
|
|
{ box_: new goog.math.Box(5, 5, 6, 2) },
|
|
{ box_: new goog.math.Box(2, 1, 5, 0) }
|
|
];
|
|
|
|
|
|
/**
|
|
* Test the utility function which tells how two one dimensional ranges
|
|
* overlap.
|
|
*/
|
|
function testRangeOverlap() {
|
|
assertEquals(RangeOverlap.LEFT, rangeOverlap(1, 2, 3, 4));
|
|
assertEquals(RangeOverlap.LEFT, rangeOverlap(2, 3, 3, 4));
|
|
assertEquals(RangeOverlap.LEFT_IN, rangeOverlap(1, 3, 2, 4));
|
|
assertEquals(RangeOverlap.IN, rangeOverlap(1, 3, 1, 4));
|
|
assertEquals(RangeOverlap.IN, rangeOverlap(2, 3, 1, 4));
|
|
assertEquals(RangeOverlap.IN, rangeOverlap(3, 4, 1, 4));
|
|
assertEquals(RangeOverlap.RIGHT_IN, rangeOverlap(2, 4, 1, 3));
|
|
assertEquals(RangeOverlap.RIGHT, rangeOverlap(2, 3, 1, 2));
|
|
assertEquals(RangeOverlap.RIGHT, rangeOverlap(3, 4, 1, 2));
|
|
assertEquals(RangeOverlap.CONTAINS, rangeOverlap(1, 4, 2, 3));
|
|
}
|
|
|
|
|
|
/**
|
|
* An enum describing how two ranges overlap (non-symmetrical relation).
|
|
* @enum {number}
|
|
*/
|
|
RangeOverlap = {
|
|
LEFT: 1, // First range is placed to the left of the second.
|
|
LEFT_IN: 2, // First range overlaps on the left side of the second.
|
|
IN: 3, // First range is completely contained in the second.
|
|
RIGHT_IN: 4, // First range overlaps on the right side of the second.
|
|
RIGHT: 5, // First range is placed to the right side of the second.
|
|
CONTAINS: 6 // First range contains the second.
|
|
};
|
|
|
|
|
|
/**
|
|
* Computes how two one dimentional ranges overlap.
|
|
*
|
|
* @param {number} left1 Left inclusive bound of the first range.
|
|
* @param {number} right1 Right exclusive bound of the first range.
|
|
* @param {number} left2 Left inclusive bound of the second range.
|
|
* @param {number} right2 Right exclusive bound of the second range.
|
|
* @return {RangeOverlap} The enum value describing the type of the overlap.
|
|
*/
|
|
function rangeOverlap(left1, right1, left2, right2) {
|
|
if (right1 <= left2) return RangeOverlap.LEFT;
|
|
if (left1 >= right2) return RangeOverlap.RIGHT;
|
|
var leftIn = left1 >= left2;
|
|
var rightIn = right1 <= right2;
|
|
if (leftIn && rightIn) return RangeOverlap.IN;
|
|
if (leftIn) return RangeOverlap.RIGHT_IN;
|
|
if (rightIn) return RangeOverlap.LEFT_IN;
|
|
return RangeOverlap.CONTAINS;
|
|
}
|
|
|
|
|
|
/**
|
|
* Tells whether two boxes overlap.
|
|
*
|
|
* @param {goog.math.Box} box1 First box in question.
|
|
* @param {goog.math.Box} box2 Second box in question.
|
|
* @return {boolean} Whether boxes overlap in any way.
|
|
*/
|
|
function boxOverlaps(box1, box2) {
|
|
var horizontalOverlap = rangeOverlap(
|
|
box1.left, box1.right, box2.left, box2.right);
|
|
var verticalOverlap = rangeOverlap(
|
|
box1.top, box1.bottom, box2.top, box2.bottom);
|
|
return horizontalOverlap != RangeOverlap.LEFT &&
|
|
horizontalOverlap != RangeOverlap.RIGHT &&
|
|
verticalOverlap != RangeOverlap.LEFT &&
|
|
verticalOverlap != RangeOverlap.RIGHT;
|
|
}
|
|
|
|
|
|
/**
|
|
* Tests if the utility function to compute box overlapping functions properly.
|
|
*/
|
|
function testBoxOverlaps() {
|
|
// Overlapping tests.
|
|
var box2 = new goog.math.Box(1, 4, 4, 1);
|
|
|
|
// Corner overlaps.
|
|
assertTrue('NW overlap', boxOverlaps(new goog.math.Box(0, 2, 2, 0), box2));
|
|
assertTrue('NE overlap', boxOverlaps(new goog.math.Box(0, 5, 2, 3), box2));
|
|
assertTrue('SE overlap', boxOverlaps(new goog.math.Box(3, 5, 5, 3), box2));
|
|
assertTrue('SW overlap', boxOverlaps(new goog.math.Box(3, 2, 5, 0), box2));
|
|
|
|
// Inside.
|
|
assertTrue('Inside overlap',
|
|
boxOverlaps(new goog.math.Box(2, 3, 3, 2), box2));
|
|
|
|
// Around.
|
|
assertTrue('Outside overlap',
|
|
boxOverlaps(new goog.math.Box(0, 5, 5, 0), box2));
|
|
|
|
// Edge overlaps.
|
|
assertTrue('N overlap', boxOverlaps(new goog.math.Box(0, 3, 2, 2), box2));
|
|
assertTrue('E overlap', boxOverlaps(new goog.math.Box(2, 5, 3, 3), box2));
|
|
assertTrue('S overlap', boxOverlaps(new goog.math.Box(3, 3, 5, 2), box2));
|
|
assertTrue('W overlap', boxOverlaps(new goog.math.Box(2, 2, 3, 0), box2));
|
|
|
|
assertTrue('N-in overlap', boxOverlaps(new goog.math.Box(0, 5, 2, 0), box2));
|
|
assertTrue('E-in overlap', boxOverlaps(new goog.math.Box(0, 5, 5, 3), box2));
|
|
assertTrue('S-in overlap', boxOverlaps(new goog.math.Box(3, 5, 5, 0), box2));
|
|
assertTrue('W-in overlap', boxOverlaps(new goog.math.Box(0, 2, 5, 0), box2));
|
|
|
|
// Does not overlap.
|
|
var box2 = new goog.math.Box(3, 6, 6, 3);
|
|
|
|
// Along the edge - shorter.
|
|
assertFalse('N-in no overlap',
|
|
boxOverlaps(new goog.math.Box(1, 5, 2, 4), box2));
|
|
assertFalse('E-in no overlap',
|
|
boxOverlaps(new goog.math.Box(4, 8, 5, 7), box2));
|
|
assertFalse('S-in no overlap',
|
|
boxOverlaps(new goog.math.Box(7, 5, 8, 4), box2));
|
|
assertFalse('N-in no overlap',
|
|
boxOverlaps(new goog.math.Box(4, 2, 5, 1), box2));
|
|
|
|
// By the corner.
|
|
assertFalse('NE no overlap',
|
|
boxOverlaps(new goog.math.Box(1, 8, 2, 7), box2));
|
|
assertFalse('SE no overlap',
|
|
boxOverlaps(new goog.math.Box(7, 8, 8, 7), box2));
|
|
assertFalse('SW no overlap',
|
|
boxOverlaps(new goog.math.Box(7, 2, 8, 1), box2));
|
|
assertFalse('NW no overlap',
|
|
boxOverlaps(new goog.math.Box(1, 2, 2, 1), box2));
|
|
|
|
// Perpendicular to an edge.
|
|
assertFalse('NNE no overlap',
|
|
boxOverlaps(new goog.math.Box(1, 7, 2, 5), box2));
|
|
assertFalse('NEE no overlap',
|
|
boxOverlaps(new goog.math.Box(2, 8, 4, 7), box2));
|
|
assertFalse('SEE no overlap',
|
|
boxOverlaps(new goog.math.Box(5, 8, 7, 7), box2));
|
|
assertFalse('SSE no overlap',
|
|
boxOverlaps(new goog.math.Box(7, 7, 8, 5), box2));
|
|
assertFalse('SSW no overlap',
|
|
boxOverlaps(new goog.math.Box(7, 4, 8, 2), box2));
|
|
assertFalse('SWW no overlap',
|
|
boxOverlaps(new goog.math.Box(5, 2, 7, 1), box2));
|
|
assertFalse('NWW no overlap',
|
|
boxOverlaps(new goog.math.Box(2, 2, 4, 1), box2));
|
|
assertFalse('NNW no overlap',
|
|
boxOverlaps(new goog.math.Box(1, 4, 2, 2), box2));
|
|
|
|
// Along the edge - longer.
|
|
assertFalse('N no overlap',
|
|
boxOverlaps(new goog.math.Box(0, 7, 1, 2), box2));
|
|
assertFalse('E no overlap',
|
|
boxOverlaps(new goog.math.Box(2, 9, 7, 8), box2));
|
|
assertFalse('S no overlap',
|
|
boxOverlaps(new goog.math.Box(8, 7, 9, 2), box2));
|
|
assertFalse('W no overlap',
|
|
boxOverlaps(new goog.math.Box(2, 1, 7, 0), box2));
|
|
}
|
|
|
|
|
|
/**
|
|
* Checks whether a given box overlaps any of given DnD target boxes.
|
|
*
|
|
* @param {goog.math.Box} box The box to check.
|
|
* @param {Array<Object>} targets The array of targets with boxes to check
|
|
* if they overlap with the given box.
|
|
* @return {boolean} Whether the box overlaps any of the target boxes.
|
|
*/
|
|
function boxOverlapsTargets(box, targets) {
|
|
return goog.array.some(targets, function(target) {
|
|
return boxOverlaps(box, target.box_);
|
|
});
|
|
}
|
|
|
|
|
|
function testMaybeCreateDummyTargetForPosition() {
|
|
var testGroup = new goog.fx.AbstractDragDrop();
|
|
testGroup.targetList_ = targets;
|
|
testGroup.targetBox_ = new goog.math.Box(0, 9, 10, 1);
|
|
|
|
var target = testGroup.maybeCreateDummyTargetForPosition_(3, 3);
|
|
assertFalse(boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
assertTrue(testGroup.isInside(3, 3, target.box_));
|
|
|
|
target = testGroup.maybeCreateDummyTargetForPosition_(2, 4);
|
|
assertFalse(boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
assertTrue(testGroup.isInside(2, 4, target.box_));
|
|
|
|
target = testGroup.maybeCreateDummyTargetForPosition_(2, 7);
|
|
assertFalse(boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
assertTrue(testGroup.isInside(2, 7, target.box_));
|
|
|
|
testGroup.targetList_.push({ box_: new goog.math.Box(5, 6, 6, 0) });
|
|
|
|
target = testGroup.maybeCreateDummyTargetForPosition_(3, 3);
|
|
assertFalse(boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
assertTrue(testGroup.isInside(3, 3, target.box_));
|
|
|
|
target = testGroup.maybeCreateDummyTargetForPosition_(2, 7);
|
|
assertFalse(boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
assertTrue(testGroup.isInside(2, 7, target.box_));
|
|
|
|
target = testGroup.maybeCreateDummyTargetForPosition_(6, 3);
|
|
assertFalse(boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
assertTrue(testGroup.isInside(6, 3, target.box_));
|
|
|
|
target = testGroup.maybeCreateDummyTargetForPosition_(0, 3);
|
|
assertNull(target);
|
|
target = testGroup.maybeCreateDummyTargetForPosition_(9, 0);
|
|
assertNull(target);
|
|
}
|
|
|
|
|
|
function testMaybeCreateDummyTargetForPosition2() {
|
|
var testGroup = new goog.fx.AbstractDragDrop();
|
|
testGroup.targetList_ = targets2;
|
|
testGroup.targetBox_ = new goog.math.Box(10, 50, 80, 10);
|
|
|
|
var target = testGroup.maybeCreateDummyTargetForPosition_(30, 40);
|
|
assertFalse(boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
assertTrue(testGroup.isInside(30, 40, target.box_));
|
|
|
|
target = testGroup.maybeCreateDummyTargetForPosition_(45, 40);
|
|
assertFalse(boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
assertTrue(testGroup.isInside(45, 40, target.box_));
|
|
|
|
testGroup.targetList_.push({ box_: new goog.math.Box(40, 50, 50, 40) });
|
|
|
|
target = testGroup.maybeCreateDummyTargetForPosition_(30, 40);
|
|
assertFalse(boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
target = testGroup.maybeCreateDummyTargetForPosition_(45, 35);
|
|
assertFalse(boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
}
|
|
|
|
|
|
function testMaybeCreateDummyTargetForPosition3BoxHasDecentSize() {
|
|
var testGroup = new goog.fx.AbstractDragDrop();
|
|
testGroup.targetList_ = targets3;
|
|
testGroup.targetBox_ = new goog.math.Box(0, 6, 6, 0);
|
|
|
|
var target = testGroup.maybeCreateDummyTargetForPosition_(3, 3);
|
|
assertFalse(boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
assertTrue(testGroup.isInside(3, 3, target.box_));
|
|
assertEquals('(1t, 5r, 5b, 1l)', target.box_.toString());
|
|
}
|
|
|
|
|
|
function testMaybeCreateDummyTargetForPosition4() {
|
|
var testGroup = new goog.fx.AbstractDragDrop();
|
|
testGroup.targetList_ = targets;
|
|
testGroup.targetBox_ = new goog.math.Box(0, 9, 10, 1);
|
|
|
|
for (var x = testGroup.targetBox_.left;
|
|
x < testGroup.targetBox_.right;
|
|
x++) {
|
|
for (var y = testGroup.targetBox_.top;
|
|
y < testGroup.targetBox_.bottom;
|
|
y++) {
|
|
var inRealTarget = false;
|
|
for (var i = 0; i < testGroup.targetList_.length; i++) {
|
|
if (testGroup.isInside(x, y, testGroup.targetList_[i].box_)) {
|
|
inRealTarget = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!inRealTarget) {
|
|
var target = testGroup.maybeCreateDummyTargetForPosition_(x, y);
|
|
if (target) {
|
|
assertFalse('Fake target for point(' + x + ',' + y + ') should ' +
|
|
'not overlap any real targets.',
|
|
boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
assertTrue(testGroup.isInside(x, y, target.box_));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function testMaybeCreateDummyTargetForPosition_NegativePositions() {
|
|
var negTargets = [
|
|
{ box_: new goog.math.Box(-20, 10, -5, 1) },
|
|
{ box_: new goog.math.Box(20, 10, 30, 1) }
|
|
];
|
|
|
|
var testGroup = new goog.fx.AbstractDragDrop();
|
|
testGroup.targetList_ = negTargets;
|
|
testGroup.targetBox_ = new goog.math.Box(-20, 10, 30, 1);
|
|
|
|
var target = testGroup.maybeCreateDummyTargetForPosition_(1, 5);
|
|
assertFalse(boxOverlapsTargets(target.box_, testGroup.targetList_));
|
|
assertTrue(testGroup.isInside(1, 5, target.box_));
|
|
}
|
|
|
|
function testMaybeCreateDummyTargetOutsideScrollableContainer() {
|
|
var targets = [
|
|
{ box_: new goog.math.Box(0, 3, 10, 1) },
|
|
{ box_: new goog.math.Box(20, 3, 30, 1) }
|
|
];
|
|
var target = targets[0];
|
|
|
|
var testGroup = new goog.fx.AbstractDragDrop();
|
|
testGroup.targetList_ = targets;
|
|
testGroup.targetBox_ = new goog.math.Box(0, 3, 30, 1);
|
|
|
|
testGroup.addScrollableContainer(document.getElementById('container1'));
|
|
var container = testGroup.scrollableContainers_[0];
|
|
container.containedTargets_.push(target);
|
|
container.box_ = new goog.math.Box(0, 3, 5, 1); // shorter than target
|
|
target.scrollableContainer_ = container;
|
|
|
|
// mouse cursor is below scrollable target but not the actual target
|
|
var dummyTarget = testGroup.maybeCreateDummyTargetForPosition_(2, 7);
|
|
// dummy target should not overlap the scrollable container
|
|
assertFalse(boxOverlaps(dummyTarget.box_, container.box_));
|
|
// but should overlap the actual target, since not all of it is visible
|
|
assertTrue(boxOverlaps(dummyTarget.box_, target.box_));
|
|
}
|
|
|
|
function testMaybeCreateDummyTargetInsideScrollableContainer() {
|
|
var targets = [
|
|
{ box_: new goog.math.Box(0, 3, 10, 1) },
|
|
{ box_: new goog.math.Box(20, 3, 30, 1) }
|
|
];
|
|
var target = targets[0];
|
|
|
|
var testGroup = new goog.fx.AbstractDragDrop();
|
|
testGroup.targetList_ = targets;
|
|
testGroup.targetBox_ = new goog.math.Box(0, 3, 30, 1);
|
|
|
|
testGroup.addScrollableContainer(document.getElementById('container1'));
|
|
var container = testGroup.scrollableContainers_[0];
|
|
container.containedTargets_.push(target);
|
|
container.box_ = new goog.math.Box(0, 3, 20, 1); // longer than target
|
|
target.scrollableContainer_ = container;
|
|
|
|
// mouse cursor is below both the scrollable and the actual target
|
|
var dummyTarget = testGroup.maybeCreateDummyTargetForPosition_(2, 15);
|
|
// dummy target should overlap the scrollable container
|
|
assertTrue(boxOverlaps(dummyTarget.box_, container.box_));
|
|
// but not overlap the actual target
|
|
assertFalse(boxOverlaps(dummyTarget.box_, target.box_));
|
|
}
|
|
|
|
function testCalculateTargetBox() {
|
|
var testGroup = new goog.fx.AbstractDragDrop();
|
|
testGroup.targetList_ = [];
|
|
goog.array.forEach(targets, function(target) {
|
|
testGroup.targetList_.push(target);
|
|
testGroup.calculateTargetBox_(target.box_);
|
|
});
|
|
assertTrue(goog.math.Box.equals(testGroup.targetBox_,
|
|
new goog.math.Box(0, 9, 10, 1)));
|
|
|
|
testGroup = new goog.fx.AbstractDragDrop();
|
|
testGroup.targetList_ = [];
|
|
goog.array.forEach(targets2, function(target) {
|
|
testGroup.targetList_.push(target);
|
|
testGroup.calculateTargetBox_(target.box_);
|
|
});
|
|
assertTrue(goog.math.Box.equals(testGroup.targetBox_,
|
|
new goog.math.Box(10, 50, 80, 10)));
|
|
|
|
testGroup = new goog.fx.AbstractDragDrop();
|
|
testGroup.targetList_ = [];
|
|
goog.array.forEach(targets3, function(target) {
|
|
testGroup.targetList_.push(target);
|
|
testGroup.calculateTargetBox_(target.box_);
|
|
});
|
|
assertTrue(goog.math.Box.equals(testGroup.targetBox_,
|
|
new goog.math.Box(0, 6, 6, 0)));
|
|
}
|
|
|
|
|
|
function testIsInside() {
|
|
var add = new goog.fx.AbstractDragDrop();
|
|
// The box in question.
|
|
// 10,20+++++20,20
|
|
// + |
|
|
// 10,30-----20,30
|
|
var box = new goog.math.Box(20, 20, 30, 10);
|
|
|
|
assertTrue('A point somewhere in the middle of the box should be inside.',
|
|
add.isInside(15, 25, box));
|
|
|
|
assertTrue('A point in top-left corner should be inside the box.',
|
|
add.isInside(10, 20, box));
|
|
|
|
assertTrue('A point on top border should be inside the box.',
|
|
add.isInside(15, 20, box));
|
|
|
|
assertFalse('A point in top-right corner should be outside the box.',
|
|
add.isInside(20, 20, box));
|
|
|
|
assertFalse('A point on right border should be outside the box.',
|
|
add.isInside(20, 25, box));
|
|
|
|
assertFalse('A point in bottom-right corner should be outside the box.',
|
|
add.isInside(20, 30, box));
|
|
|
|
assertFalse('A point on bottom border should be outside the box.',
|
|
add.isInside(15, 30, box));
|
|
|
|
assertFalse('A point in bottom-left corner should be outside the box.',
|
|
add.isInside(10, 30, box));
|
|
|
|
assertTrue('A point on left border should be inside the box.',
|
|
add.isInside(10, 25, box));
|
|
|
|
add.dispose();
|
|
}
|
|
|
|
|
|
function testAddingRemovingScrollableContainers() {
|
|
var group = new goog.fx.AbstractDragDrop();
|
|
var el1 = document.createElement('div');
|
|
var el2 = document.createElement('div');
|
|
|
|
assertEquals(0, group.scrollableContainers_.length);
|
|
|
|
group.addScrollableContainer(el1);
|
|
assertEquals(1, group.scrollableContainers_.length);
|
|
|
|
group.addScrollableContainer(el2);
|
|
assertEquals(2, group.scrollableContainers_.length);
|
|
|
|
group.removeAllScrollableContainers();
|
|
assertEquals(0, group.scrollableContainers_.length);
|
|
}
|
|
|
|
|
|
function testScrollableContainersCalculation() {
|
|
var group = new goog.fx.AbstractDragDrop();
|
|
var target = new goog.fx.AbstractDragDrop();
|
|
|
|
group.addTarget(target);
|
|
group.addScrollableContainer(document.getElementById('container1'));
|
|
var container = group.scrollableContainers_[0];
|
|
|
|
var item1 = new goog.fx.DragDropItem(document.getElementById('child1'));
|
|
var item2 = new goog.fx.DragDropItem(document.getElementById('child2'));
|
|
|
|
target.items_.push(item1);
|
|
group.recalculateDragTargets();
|
|
group.recalculateScrollableContainers();
|
|
|
|
assertEquals(1, container.containedTargets_.length);
|
|
assertEquals(container, group.targetList_[0].scrollableContainer_);
|
|
|
|
target.items_.push(item2);
|
|
group.recalculateDragTargets();
|
|
assertEquals(1, container.containedTargets_.length);
|
|
assertNull(group.targetList_[0].scrollableContainer_);
|
|
|
|
group.recalculateScrollableContainers();
|
|
assertEquals(2, container.containedTargets_.length);
|
|
assertEquals(container, group.targetList_[1].scrollableContainer_);
|
|
}
|
|
|
|
// See http://b/7494613.
|
|
function testMouseUpOutsideElement() {
|
|
var group = new goog.fx.AbstractDragDrop();
|
|
var target = new goog.fx.AbstractDragDrop();
|
|
group.addTarget(target);
|
|
var item1 = new goog.fx.DragDropItem(document.getElementById('child1'));
|
|
group.items_.push(item1);
|
|
item1.setParent(group);
|
|
group.init();
|
|
|
|
group.startDrag = goog.functions.error('startDrag should not be called.');
|
|
|
|
goog.testing.events.fireMouseDownEvent(item1.element);
|
|
goog.testing.events.fireMouseUpEvent(item1.element.parentNode);
|
|
// This should have no effect (not start a drag) since the previous event
|
|
// should have cleared the listeners.
|
|
goog.testing.events.fireMouseOutEvent(item1.element);
|
|
|
|
group.dispose();
|
|
target.dispose();
|
|
}
|
|
|
|
function testScrollBeforeMoveDrag() {
|
|
var group = new goog.fx.AbstractDragDrop();
|
|
var target = new goog.fx.AbstractDragDrop();
|
|
|
|
group.addTarget(target);
|
|
var container = document.getElementById('container1');
|
|
group.addScrollableContainer(container);
|
|
|
|
var childEl = document.getElementById('child1');
|
|
var item = new goog.fx.DragDropItem(childEl);
|
|
item.currentDragElement_ = childEl;
|
|
|
|
target.items_.push(item);
|
|
group.recalculateDragTargets();
|
|
group.recalculateScrollableContainers();
|
|
|
|
// Simulare starting a drag.
|
|
var moveEvent = {
|
|
'clientX': 8,
|
|
'clientY': 10,
|
|
'type': goog.events.EventType.MOUSEMOVE,
|
|
'relatedTarget': childEl,
|
|
'preventDefault': function() {}
|
|
};
|
|
group.startDrag(moveEvent, item);
|
|
|
|
// Simulate scrolling before the first move drag event.
|
|
var scrollEvent = {
|
|
'target': container
|
|
};
|
|
assertNotThrows(goog.bind(group.containerScrollHandler_, group, scrollEvent));
|
|
}
|
|
|
|
|
|
function testMouseMove_mouseOutBeforeThreshold() {
|
|
// Setup dragdrop and item
|
|
var itemEl = document.createElement('div');
|
|
var childEl = document.createElement('div');
|
|
itemEl.appendChild(childEl);
|
|
var add = new goog.fx.AbstractDragDrop();
|
|
var item = new goog.fx.DragDropItem(itemEl);
|
|
item.setParent(add);
|
|
add.items_.push(item);
|
|
|
|
// Simulate maybeStartDrag
|
|
item.startPosition_ = new goog.math.Coordinate(10, 10);
|
|
item.currentDragElement_ = itemEl;
|
|
|
|
// Test
|
|
var draggedItem = null;
|
|
add.startDrag = function(event, item) {
|
|
draggedItem = item;
|
|
};
|
|
|
|
var event = {'clientX': 8, 'clientY': 10, // Drag distance is only 2
|
|
'type': goog.events.EventType.MOUSEOUT, 'target': childEl};
|
|
item.mouseMove_(event);
|
|
assertEquals('DragStart should not be fired for mouseout on child element.',
|
|
null, draggedItem);
|
|
|
|
var event = {'clientX': 8, 'clientY': 10, // Drag distance is only 2
|
|
'type': goog.events.EventType.MOUSEOUT, 'target': itemEl};
|
|
item.mouseMove_(event);
|
|
assertEquals('DragStart should be fired for mouseout on main element.',
|
|
item, draggedItem);
|
|
}
|
|
|
|
|
|
function testGetDragElementPosition() {
|
|
var testGroup = new goog.fx.AbstractDragDrop();
|
|
var sourceEl = document.createElement('div');
|
|
document.body.appendChild(sourceEl);
|
|
|
|
var pageOffset = goog.style.getPageOffset(sourceEl);
|
|
var pos = testGroup.getDragElementPosition(sourceEl);
|
|
assertEquals('Drag element position should be source element page offset',
|
|
pageOffset.x, pos.x);
|
|
assertEquals('Drag element position should be source element page offset',
|
|
pageOffset.y, pos.y);
|
|
|
|
sourceEl.style.marginLeft = '5px';
|
|
sourceEl.style.marginTop = '7px';
|
|
pageOffset = goog.style.getPageOffset(sourceEl);
|
|
pos = testGroup.getDragElementPosition(sourceEl);
|
|
assertEquals('Drag element position should be adjusted for source element ' +
|
|
'margins', pageOffset.x - 10, pos.x);
|
|
assertEquals('Drag element position should be adjusted for source element ' +
|
|
'margins', pageOffset.y - 14, pos.y);
|
|
}
|
|
|
|
|
|
// Helper function for manual debugging.
|
|
function drawTargets(targets, multiplier) {
|
|
var colors = ['green', 'blue', 'red', 'lime', 'pink', 'silver', 'orange'];
|
|
var cont = document.getElementById('cont');
|
|
cont.innerHTML = '';
|
|
for (var i = 0; i < targets.length; i++) {
|
|
var box = targets[i].box_;
|
|
var el = document.createElement('div');
|
|
el.style.top = (box.top * multiplier) + 'px';
|
|
el.style.left = (box.left * multiplier) + 'px';
|
|
el.style.width = ((box.right - box.left) * multiplier) + 'px';
|
|
el.style.height = ((box.bottom - box.top) * multiplier) + 'px';
|
|
el.style.backgroundColor = colors[i];
|
|
cont.appendChild(el);
|
|
}
|
|
}
|