Skip to content

JQuery >= 1.9 - Event.clientX/event.clientY moved to event.originalEvent #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
upmauro wants to merge 2 commits into
base: master
Choose a base branch
from
Open

JQuery >= 1.9 - Event.clientX/event.clientY moved to event.originalEvent #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
986b81e
JQuery >= 1.9 - Event.clientX/event.clientY moved to event.originalEvent
Jul 8, 2016
9626a83
JQuery >= 1.9 - event.dataTransfer moved to event.originalEvent.dataT…
Jul 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions app/flowchart/edgedragging-service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,14 @@
dragOffset.y = -canvas.getBoundingClientRect().top;

edgeDragging.dragPoint2 = {
x: event.clientX + dragOffset.x,
y: event.clientY + dragOffset.y
x: event.originalEvent.originalEvent.clientX + dragOffset.x,
y: event.originalEvent.originalEvent.clientY + dragOffset.y
};

event.dataTransfer.setData('Text', 'Just to support firefox');
if (event.dataTransfer.setDragImage) {
event.originalEvent.dataTransfer.setData('Text', 'Just to support firefox');
if (event.originalEvent.dataTransfer.setDragImage) {
var invisibleDiv = angular.element('<div></div>')[0]; // This divs stays invisible, because it is not in the dom.
event.dataTransfer.setDragImage(invisibleDiv, 0, 0);
event.originalEvent.dataTransfer.setDragImage(invisibleDiv, 0, 0);
} else {
destinationHtmlElement = event.target;
oldDisplayStyle = destinationHtmlElement.style.display;
Expand Down Expand Up @@ -109,8 +109,8 @@
}

edgeDragging.dragPoint2 = {
x: event.clientX + dragOffset.x,
y: event.clientY + dragOffset.y
x: event.originalEvent.originalEvent.clientX + dragOffset.x,
y: event.originalEvent.originalEvent.clientY + dragOffset.y
};

edgeDragging.pathElement.attr('d', Edgedrawingservice.getEdgeDAttribute(edgeDragging.dragPoint1, edgeDragging.dragPoint2, edgeStyle));
Expand All @@ -125,8 +125,8 @@
}

edgeDragging.dragPoint2 = {
x: event.clientX + dragOffset.x,
y: event.clientY + dragOffset.y
x: event.originalEvent.originalEvent.clientX + dragOffset.x,
y: event.originalEvent.originalEvent.clientY + dragOffset.y
};
});
}
Expand Down
14 changes: 7 additions & 7 deletions app/flowchart/edgedragging-service_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ describe('edgedragging-service_test', function() {
function createEvent(name, clientX, clientY) {
var event = jasmine.createSpyObj(name, ['stopPropagation', 'preventDefault']);
event.target = angular.element('<div></div>')[0];
event.dataTransfer = jasmine.createSpyObj('datatransfer', ['setDragImage', 'setData']);
event.clientX = clientX;
event.clientY = clientY;
event.originalEvent.dataTransfer = jasmine.createSpyObj('datatransfer', ['setDragImage', 'setData']);
event.originalEvent.originalEvent.clientX = clientX;
event.originalEvent.originalEvent.clientY = clientY;
return event;
}

Expand Down Expand Up @@ -71,8 +71,8 @@ describe('edgedragging-service_test', function() {
expect(this.edgeDragging.isDragging).toBe(true);
expect(this.edgeDragging.dragPoint1).toEqual(this.connectorCoords);
expect(this.edgeDragging.dragPoint2).toEqual(this.connectorCoords);
//expect(this.startEvent.dataTransfer.setDragImage).toHaveBeenCalled();
expect(this.startEvent.dataTransfer.setData).toHaveBeenCalled();
//expect(this.startevent.originalEvent.dataTransfer.setDragImage).toHaveBeenCalled();
expect(this.startevent.originalEvent.dataTransfer.setData).toHaveBeenCalled();
expect(this.startEvent.stopPropagation).toHaveBeenCalled();
});

Expand Down Expand Up @@ -148,7 +148,7 @@ describe('edgedragging-service_test', function() {
});

it('should fix the internet explorer setDragImage bug', function() {
this.startEvent.dataTransfer.setDragImage = null;
this.startevent.originalEvent.dataTransfer.setDragImage = null;
this.edgedraggingService.dragstart(this.connector)(this.startEvent);

expect(this.startEvent.target.style.display).toEqual('none');
Expand All @@ -160,7 +160,7 @@ describe('edgedragging-service_test', function() {
it('dragover and drop should perform modelvalidation', function() {
var that = this;

this.startEvent.dataTransfer.setDragImage = null;
this.startevent.originalEvent.dataTransfer.setDragImage = null;
this.edgedraggingService.dragstart(this.connector)(this.startEvent);

this.Modelvalidation.validateEdges.and.throwError(new this.Modelvalidation.ModelvalidationError());
Expand Down
24 changes: 12 additions & 12 deletions app/flowchart/nodedragging-service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,22 +44,22 @@
draggedElement = event.target;

var element = angular.element(event.target);
dragOffset.x = parseInt(element.css('left')) - event.clientX;
dragOffset.y = parseInt(element.css('top')) - event.clientY;
dragOffset.x = parseInt(element.css('left')) - event.originalEvent.originalEvent.clientX;
dragOffset.y = parseInt(element.css('top')) - event.originalEvent.originalEvent.clientY;

if (dragAnimation == flowchartConstants.dragAnimationShadow) {
var shadowElement = angular.element('<div style="position: absolute; opacity: 0.7; top: '+ getYCoordinate(dragOffset.y + event.clientY) +'px; left: '+ getXCoordinate(dragOffset.x + event.clientX) +'px; "><div class="innerNode"><p style="padding: 0 15px;">'+ nodeDraggingScope.draggedNode.name +'</p> </div></div>');
var shadowElement = angular.element('<div style="position: absolute; opacity: 0.7; top: '+ getYCoordinate(dragOffset.y + event.originalEvent.originalEvent.clientY) +'px; left: '+ getXCoordinate(dragOffset.x + event.originalEvent.originalEvent.clientX) +'px; "><div class="innerNode"><p style="padding: 0 15px;">'+ nodeDraggingScope.draggedNode.name +'</p> </div></div>');
var targetInnerNode = angular.element(event.target).children()[0];
shadowElement.children()[0].style.backgroundColor = targetInnerNode.style.backgroundColor;
nodeDraggingScope.shadowElement = shadowElement;
var canvasElement = modelservice.getCanvasHtmlElement();
canvasElement.appendChild(nodeDraggingScope.shadowElement[0]);
}

event.dataTransfer.setData('Text', 'Just to support firefox');
if (event.dataTransfer.setDragImage) {
event.originalEvent.dataTransfer.setData('Text', 'Just to support firefox');
if (event.originalEvent.dataTransfer.setDragImage) {
var invisibleDiv = angular.element('<div></div>')[0]; // This divs stays invisible, because it is not in the dom.
event.dataTransfer.setDragImage(invisibleDiv, 0, 0);
event.originalEvent.dataTransfer.setDragImage(invisibleDiv, 0, 0);
} else {
destinationHtmlElement = event.target;
oldDisplayStyle = destinationHtmlElement.style.display;
Expand All @@ -76,8 +76,8 @@
drop: function(event) {
if (nodeDraggingScope.draggedNode) {
return applyFunction(function() {
nodeDraggingScope.draggedNode.x = getXCoordinate(dragOffset.x + event.clientX);
nodeDraggingScope.draggedNode.y = getYCoordinate(dragOffset.y + event.clientY);
nodeDraggingScope.draggedNode.x = getXCoordinate(dragOffset.x + event.originalEvent.originalEvent.clientX);
nodeDraggingScope.draggedNode.y = getYCoordinate(dragOffset.y + event.originalEvent.originalEvent.clientY);
event.preventDefault();
return false;
})
Expand All @@ -88,8 +88,8 @@
if (dragAnimation == flowchartConstants.dragAnimationRepaint) {
if (nodeDraggingScope.draggedNode) {
return applyFunction(function() {
nodeDraggingScope.draggedNode.x = getXCoordinate(dragOffset.x + event.clientX);
nodeDraggingScope.draggedNode.y = getYCoordinate(dragOffset.y + event.clientY);
nodeDraggingScope.draggedNode.x = getXCoordinate(dragOffset.x + event.originalEvent.originalEvent.clientX);
nodeDraggingScope.draggedNode.y = getYCoordinate(dragOffset.y + event.originalEvent.originalEvent.clientY);
resizeCanvas(nodeDraggingScope.draggedNode, draggedElement);
event.preventDefault();
return false;
Expand All @@ -103,8 +103,8 @@
nodeDraggingScope.shadowDragStarted = false;
});
}
nodeDraggingScope.shadowElement.css('left', getXCoordinate(dragOffset.x + event.clientX) + 'px');
nodeDraggingScope.shadowElement.css('top', getYCoordinate(dragOffset.y + event.clientY) + 'px');
nodeDraggingScope.shadowElement.css('left', getXCoordinate(dragOffset.x + event.originalEvent.originalEvent.clientX) + 'px');
nodeDraggingScope.shadowElement.css('top', getYCoordinate(dragOffset.y + event.originalEvent.originalEvent.clientY) + 'px');
resizeCanvas(nodeDraggingScope.draggedNode, draggedElement);
event.preventDefault();
}
Expand Down
20 changes: 10 additions & 10 deletions app/flowchart/nodedragging-service_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,14 @@ describe('test the nodedragging service', function() {
var innerDragStart = nodedragging.dragstart(this.node);
innerDragStart(this.fakeEvent);

expect(this.fakeEvent.dataTransfer.setData).toHaveBeenCalled();
expect(this.fakeevent.originalEvent.dataTransfer.setData).toHaveBeenCalled();
});

it('should drop the defaultNode under the mousepointer and prevent default', function() {
var clientX = 100;
var clientY = 100;
this.fakeEvent.clientX = clientX;
this.fakeEvent.clientY = clientY;
this.fakeEvent.originalEvent.clientX = clientX;
this.fakeEvent.originalEvent.clientY = clientY;

nodedragging.dragstart(this.node)(this.fakeEvent);
expect(nodedragging.drop(this.fakeEvent)).toBe(false);
Expand All @@ -98,8 +98,8 @@ describe('test the nodedragging service', function() {
it('dragover should preventdefault, update node coordinates and prevent dragging outside of the canvas', function() {
var clientX = 100;
var clientY = 100;
this.fakeEvent.clientX = clientX;
this.fakeEvent.clientY = clientY;
this.fakeEvent.originalEvent.clientX = clientX;
this.fakeEvent.originalEvent.clientY = clientY;

nodedragging.dragstart(this.node)(this.fakeEvent);
expect(nodedragging.dragover(this.fakeEvent)).toBe(false);
Expand All @@ -110,16 +110,16 @@ describe('test the nodedragging service', function() {

clientX = -2;
clientY = -2;
this.fakeEvent.clientX = clientX;
this.fakeEvent.clientY = clientY;
this.fakeEvent.originalEvent.clientX = clientX;
this.fakeEvent.originalEvent.clientY = clientY;
expect(nodedragging.dragover(this.fakeEvent)).toBe(false);
expect(this.node.x).toEqual(0);
expect(this.node.y).toEqual(0);

clientX = CANVAS_LENGTH + 1;
clientY = CANVAS_LENGTH + 1;
this.fakeEvent.clientX = clientX;
this.fakeEvent.clientY = clientY;
this.fakeEvent.originalEvent.clientX = clientX;
this.fakeEvent.originalEvent.clientY = clientY;
expect(nodedragging.dragover(this.fakeEvent)).toBe(false);
expect(this.node.x).toEqual(CANVAS_LENGTH);
expect(this.node.y).toEqual(CANVAS_LENGTH);
Expand Down Expand Up @@ -152,7 +152,7 @@ describe('test the nodedragging service', function() {
});

it('should fix the internet explorer setDragImage bug', function() {
this.fakeEvent.dataTransfer.setDragImage = null;
this.fakeevent.originalEvent.dataTransfer.setDragImage = null;
nodedragging.dragstart(this.node)(this.fakeEvent);

expect(this.fakeEvent.target.style.display).toEqual('none');
Expand Down