browser.actions().dragAndDrop(elem, target).perform();
I can clearly understand the above code but I cannot get how to specify this element and target.
Take this example
browser.actions().dragAndDrop(slider,{x:100, y:0}).perform();
In the website in which I'm working on, I cannot find any x, y or anything I can match with that and develop.
So it will be helpful if someone explains with some example for x and y so that I can relate to it and make I work.
The dragAndDrop() has two ways to work.
One starts with the element to drag. Here elem works as normal ElementFinder, so something like dragAndDrop(element(by.css('div.my-class')), target).perform();.
Now the target works in two ways: Either as another ElementFinder like in elem or as coordinates to move, starting from the position of elem, moving x pixels horizontally and y pixels vertically (plus to the right or top, minus to the left or bottom). So {x:100, y:0} will move your slider 100 pixels to the right from the starting position.
dragAndDrop(element(by.css('div.my-class')), {x:100, y:0}).perform(); will therefore move the element(by.css('div.my-class')) 100 pixels to the right.
Related
I've been working on this problem for days. I am trying to implement a "free transform" tool for svgs. Similar to that of Raphael.FreeTransform or how you would move/rotate/scale images in MS Word. (Yes, I am aware there are libraries) The following jSFiddle displays my problem: https://jsfiddle.net/hLjvrep7/12/
There are 5 functions in the jsFiddle: rotate-t. shrink-t, grow-t, shrink, grow. The functions suffixed with '-t' also apply the current rotation transformation. e.g.:
grow-t
rect.attr({height : height * 1.25, width : width * 1.25}).transform('r' + degree);
grow
rect.attr({height : height * 1.25, width : width * 1.25});
Once an svg is rotated, then scaled. If you try to rotate the svg again (after scale), the svg jumps. To see this, go top the fiddle:
Hit rotate-t twice. Svg should rotate a total of 30 degrees from the rectangles origin.
Hit grow (not grow-t) twice. Note the top left position of the svg stays the same.
Hit rotate-t once. Note the svg jumps to a different position, then rotates.
Note hitting rotate-t subsequent times will continue to rotate the image around the origin (which is what I want the first time rotate-t is clicked)
One solution I had was to apply the current rotation transformation whenever changing the height and width. This fixes my previous problem, but introduces another problem. To see an example of this, go to the fiddle, and:
Hit rotate-t twice.
Hit grow-t a couple times. Notice the svg grows, but the top left position of the rectangle moves. That's a problem for me. I want the svg to grow without the top left corner to move.
Notes on using the jsFiddle:
Any combination of rotate-t, grow-t, shrink-t will exhibit the ideal rotation behavior (about the origin, no jumping). But this also demonstrates the undesired growing and shrinking (top left position moved when svg is on angle).
Any combination pf rotate-t, grow, shrink will exhibit the ideal scaling behavior (top left corner of svg doesn't move). But this also demonstrates the undesired rotation property (will jump around after different rotations and scales).
Bottom line: I want to be able to the svg rotate around the origin. Then grow the image, while the top left position remains the same. Then rotate the svg again, around the origin without any jumping.
I am aware the how the transform function impacts the local coordinate system of the svg. I'm leaning towards using rotate-t, grow, shrink combo and simply apply some x-y offsets to remove the "jumping" effect. I would imagine there must be some sort of offset I could apply to avoid jumping or shifting during rotation or scaling, but its not clear to me how to calculate such offsets. Any help would be appreciated.
Please don't hesitate to ask anymore questions. Like I said, I've been digging into this for days. Clearly, I don't understand it all, but am somewhat intimate with what's happening and happy to explain anything in more detail.
My solutions for scale, rotate, move back and front etc:
$scope.back = function () {
if($scope.currentImage !==null) {
if($scope.currentImage.prev!=undefined) {
var bot = $scope.currentImage.prev;
$scope.currentImage.insertBefore(bot);
ft.apply();
}
}
};
//Function for moving front
$scope.front = function () {
if($scope.currentImage !==null) {
if($scope.currentImage.next!=undefined) {
var top = $scope.currentImage.next;
if($scope.currentImage.next.node.localName == "image")
$scope.currentImage.insertAfter(top);
ft.apply();
}
}
};
//ZOOM
$scope.zoomIn = function () {
if ($scope.currentImage!= null) {
var ft = paper.freeTransform($scope.currentImage);
if(ft.attrs.scale.y<4) {
$scope.currentImage.toFront();
ft.attrs.scale.y = ft.attrs.scale.y *(1.1);
ft.attrs.scale.x = ft.attrs.scale.x *(1.1);
ft.apply();
ft.updateHandles();
}
}
};
I am having an issue with draggable. When you start dragging, the cursors' position is measured relative to [0,0] of the window, not the parent <div> of the draggable elements.
For example, if the parent container is offset by a margin-left:200px, when you try to drag-right an element that is sitting against the left border of the container, it will only start moving once the cursor is 200 pixel to the right of this left border.
For an actual demo please see (I couldn't replicate this on JSFiddle): Demo
I imagine this requires some modification to the draggable source. It's just a little complicated for me.
Any ideas?
You could get the parents offset by using $(element).offsetParent(). Especially handy when parent elements are positioned absolute.
You could write a loop to go over all parent elements and compound their offsets.
And FYI your demo doesnt work on touch-enabled devices ;)
Update
I took a look at your demo, (finally on a pc again). If you remove the 'position:relative' of the div.container the draggables work as expected (or at least as I think you expect them to behave :D ).
I also had this issue and was able to solve it by first calculating the offset of the bounding box to the window, both left and right. Next I updated the containment x1, y1, x2, y2 positions to reflect the position of the bounding box.
Before reading on, my issue is to know what are the optimal methods to find an objects height/width/position as there seems to be some conflict about this.
After that I'll need help with how to use the previously obtained data to do number 4 in the following list. And after that I'll need help with number 5. I was hoping to do this gradually so please bear with me.
I found code for how to divide a square into two equal triangular clickable areas (Two triangular clickable area within a square). I didn't really understand much of what the code was doing to be honest. My question was about subdividing the rectangle that represents the visible screen area into four clickable areas, imagine its diagonals are drawn.
I did find this very useful (pseudo)-pseudocode :
Create a div and style it to be a square. Use a background image to illustrate the triangles
Create a variable, square, in javascript to hold the square element
Get the position, height, and width of square in your js
Do some math to determine the coordinates of each triangle's vertices
Write a function, getQuadrant(), that determines which triangle any given point within the square is in
Add an event listener to click events on the square. The event listener should call the getQuadrant function
Use a switch/case to execute whatever code you need to call conditional upon which quadrant the click lands in
I'm not going to ask for the full code right away, I'd like to learn in the process. Could someone please help in just pointing me towards which methods to use for numbers 3 and 4? And I'll most probably need help with number 5 as well.
Thanks a for the help! =)
K
If you translate everything so that the center of the square is the origin, then the borders of the triangle are defined by the lines x == y and x == -y. You can base your quadrant classification on that relationship:
If x > Math.abs(y), then you are in the right triangle
If y > Math.abs(x), then you are in the top triangle
If -x > Math.abs(y), then you are in the left triangle
If -y > Math.abs(x), then you are in the bottom triangle
Ties can be resolved arbitrarily between the two (or four, if x == y == 0) closest triangles.
I would appreciate your help with the following issue: I want to use CSS3 transforms in order to center the view-port of the browser around the position of a mouse click.
Please have a look at my commented example at http://jsfiddle.net/XjpdU/.
The problem that I have is that the translation works fine only on the first click. After the first click the distance between the center of the view-port and the mouse click position seems to be computed correctly, but the translation seems to jump just anywhere.
I have tried to explicitly set 'transform-origin' (-webkit-translate-origin in my example) to the position of the last click (i.e., the current center of the view-port) but it seems that with 'translate' the 'transform-origin' directive simply gets ignored.
Thanks for helping out!y
Yep, transform-origin has no effect on the translation. It works like this:
Start with the identity matrix.
Translate by the computed X, Y and Z values of ‘transform-origin’
Multiply by each of the transform functions in ‘transform’ property in turn
Translate by the negated computed X, Y and Z values of ‘transform-origin’
http://www.w3.org/TR/css3-transforms/#transform-rendering
What you could do is remember the translate, and add the newly calculated one to it, this will cause a relative translation starting from the previous point.
x = prevX = prevX + newX
y = prevY = prevY + newY
http://jsfiddle.net/XjpdU/1/
I'm working on a web app where I don't really have web hooks for hovers (think touch device). I can get x coords of exactly where the mouse is at all times.
I need to check to see if the x coords of the mouse is over top of an image, and then grab that image I'm over top of.
What I'm doing
I'm using jQuery right now, and what I do is setup an array (imgCoords) of the offset.left value of each image. I then use
imgCoords.indexOf(mousePosition.x);
(mousePosition.x) is made up, but you get the idea.
I use the above code to grab the image that matches that returned index
fingerCoordToImgIndex = imgCoords.indexOf(mousePosition.x);
$('img').eq(fingerCoordToImgIndex).css({'stuff'});
This only works for the initial entry of mouse over image though (finger x only matches image x, not image x + width), and seems inefficient. I think I could thrash around a little longer to get it right, but I'd love it if one of you pro's could rescue me =p
Thanks tons!
-Ken