I'm using jointjs to make diagrams which will be user-editable. The user may drag them around and relocate each cell. However, when a cell is dragged to the edge, it overflows and becomes cut off. I want to prevent this from happening, instead the cell to stop before it gets to the edge of the paper and not be allowed to cross the edge, thus always staying completely within the paper. The behavior can be seen in jointjs' very own demos here:
http://www.jointjs.com/tutorial/ports
Try dragging the cell to the edge and you'll see that it eventually becomes hidden as it crosses the edge of the paper element.
Secondly, I'm using the plugin for directed graph layout, found here:
http://jointjs.com/rappid/docs/layout/directedGraph
As you can see, the tree position automatically moves to the upper left of the paper element whenever your click layout. How can I modify these default positions? The only options I see for the provided function are space between ranks and space between nodes, no initial position. Say I wanted the tree to appear in the middle of the paper upon clicking 'layout', where would I have to make changes? Thanks in advance for any help.
As an addition to Roman's answer, restrictTranslate can also be configured as true to restrict movement of elements to the boundary of the paper area.
Example:
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 600,
height: 400,
model: graph,
restrictTranslate: true
})
I. To prevent elements from overflowing the paper you might use restrictTranslate paper option (JointJS v0.9.7+).
paper.options.restrictTranslate = function(cellView) {
// move element inside the bounding box of the paper element only
return cellView.paper.getArea();
}
http://jointjs.com/api#joint.dia.Paper:options
II. Use marginX and marginY DirectedGraph layout options to move the left-top corner of the resulting graph i.e. add margin to the left and top.
http://jointjs.com/rappid/docs/layout/directedGraph#configuration
I think my previous answer is still feasible, but this is how I implemented it in my project. It has an advantage over the other answer in that it doesn't require you to use a custom elementView and seems simpler (to me).
(Working jsfiddle: http://jsfiddle.net/pL68gs2m/2/)
On the paper, handle the cell:pointermove event. In the event handler, work out the bounding box of the cellView on which the event was triggered and use that to constrain the movement.
var graph = new joint.dia.Graph;
var width = 400;
var height = 400;
var gridSize = 1;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: width,
height: height,
model: graph,
gridSize: gridSize
});
paper.on('cell:pointermove', function (cellView, evt, x, y) {
var bbox = cellView.getBBox();
var constrained = false;
var constrainedX = x;
if (bbox.x <= 0) { constrainedX = x + gridSize; constrained = true }
if (bbox.x + bbox.width >= width) { constrainedX = x - gridSize; constrained = true }
var constrainedY = y;
if (bbox.y <= 0) { constrainedY = y + gridSize; constrained = true }
if (bbox.y + bbox.height >= height) { constrainedY = y - gridSize; constrained = true }
//if you fire the event all the time you get a stack overflow
if (constrained) { cellView.pointermove(evt, constrainedX, constrainedY) }
});
Edit: I think this approach is still feasible,but I now think my other answer is simpler/better.
The JointJS docs provide a sample where the movement of a shape is contrained to lie on an ellipse:
http://www.jointjs.com/tutorial/constraint-move-to-circle
It works by
Defining a new view for your element, extending joint.dia.ElementView
Overiding the pointerdown and pointermove event in the view to implement the constraint. This is done by calculating a new position, based on the mouse position and the constraint, and then passing this to the base ElementView event handler
Forcing the paper to use your custom element view
This approach can be easily adapted to prevent a shape being dragged off the edge of your paper. In step 2, instead of calculating the intersection with the ellipse as in the tutorial, you would use Math.min() or Math.max() to calculate a new position.
Related
I am developing a VueJS project and have created a set of cards appearing on the page, when one of these cards is selected, I wish for it to move to centre screen but keep the position it has moved from in the list of options.
I know that by changing the position from 'unset' to 'relative' the card now has move functionality with 'left', 'top' etc. but I still need to find a way to automatically move the card to centre screen regardless of where on the screen the card is moving from.
Does anyone know how to achieve this with the use of JS?
I imagine there is a way of receiving the current location of the node and moving it to the center of the screen, but I am not sure on the specifics of how to achieve it...
Image for context:
CardsProject
EDIT: I have for now gone with rendering an absolute position for the card which means there's no CSS transition from the card's original place to the centre of the screen and the card also temporarily loses its place within the deck.
Before click: click here for image
After click: click here for image
I found the answer after many, many hours of scouring the internet and deepfrying my code.
The answer: Don't use 'relative' positioning!
There's a far nice option to hold the position the element is moving from, but allow for the item to move freely with the use of CSS' top or left etc. and this option is position:sticky;!
With this and the use of JavaScript's coordinates documentation
.getBoundingClientRect()
...I managed to solve the mystery. The function I made to pull a vector between the current object and it the centre of the screen can be found here, returning an array of size 2 of X and Y vectors respectively.
function calcCenterMove(element){
/*
X and Y are the current position of the element to be moved (top left corner).
Width and Height are the width and height of the element to be moved.
CX and CY are the X and Y coordinates of the centre of the screen.
*/
var x = element.getBoundingClientRect().x;
var y = element.getBoundingClientRect().y;
var width = element.getBoundingClientRect().width;
var height = element.getBoundingClientRect().height;
var cx = window.innerWidth / 2;
var cy = window.innerHeight / 2;
var xVector = cx-(width/2)-x;
var yVector = cy-(height/2)-y;
return [xVector, yVector];
}
var xAxisMove = calcCenterMove(element)[0];
var yAxisMove = calcCenterMove(element)[1];
element.style = "transform: translate("+xAxisMove+"px,"+yAxisMove+"px);";
I have paired the above code with a z-index to place the element above all others, and a screen dimming cover, to prevent the user from scrolling elsewhere or interacting with any other options.
Issues still arise here if the user resizes the screen, but I believe that is a different issue to address, possibly by using an event listener to assess a window resize and translate the element from the previous centre to the new centre using the same cx and cy properties above (or perhaps even the entire function!).
Nevertheless, I have come to the answer I was looking for, anyone feel free to use the code above, if needed!
Here are images for reference:
Before click
After click
Regards!
Ok, I feel incredibly stupid, but after trying for half an hour or so, I give up.
How do I resize a rectangle via the onResize() event in paper.js?
I am trying with this example, which comes with a onResize() function already, but I am having no success (you can edit the sample by clicking on the Source button on the top right).
The current resize function looks like this:
function onResize() {
text.position = view.center + [0, 200];
square.position = view.center;
}
Now, I tried to make the square 80 % of the viewport height on resize by adding:
square.size = [view.size.height / 100 * 80, view.size.height / 100 * 80];
(I tried the same with static numbers, just to be sure).
I tried
square.size = new Size(width, height);
square.set(new Point(view.center), new Size(width, height)
square.height = height;
square.width = width;
and probably 20 more version that I cannot remember now.
When I console.logged the square.size it did show me the newly assigned values (sometimes?), but it still left the size of the rectangle unchanged.
What can I do to actually change the size of rectangle?
Just to make sure, the onResize() function gets called whenever the window's dimensions change. That's not the only place you can change the rectangle's size / it has nothing to do with the rectangle per se.
To change the rectangle's sizes, you have to check the documentation. There's a scale(amount) and an expand(amount) method attached to the Rectangle object. size is just a property, and it doesn't seem to come with a setter.
Hence, if you want to keep a ratio in between the square and the view, I guess you could save the previous view width, see what the difference is and scale the rectangle accordingly – see how in this this answer to a previous question.
Alternatively, you could just reinitialise the square and set the size property to 80% of the view's width on each view resize:
square = new Path.Rectangle({
position: view.center,
size: view.bounds.width * 0.8,
parent: originals,
fillColor: 'white'
});
The label on the left most node disappears if the node is partially displayed on the canvas.
How do I resolve this?
Thanks
InfoVis tries to hide the node labels when it asserts that the label would fall off the canvas, if it were to be displayed on the node.
It basically computes the canvas position and dimensions, the node position and dimensions, and tries to see if the label's position is out of the canvas.
This can be seen on placeLabeland fitsInCanvas functions, around lines 9683 and 7669 of the final jit.js file, respectively.
I faced this problem too, while working with SpaceTree visualizations. This became an issue when we tried present a decent experience in mobile, where I could not find a way to put the canvas panning to work (so, when a node label partially disappeared, I had no way to select that node and centre the whole tree by consequence, to allow the further exploration of other nodes...).
What I did was change the function fitsInCanvas:
fitsInCanvas: function(pos, canvas, nodeW, nodeH) {
var size = canvas.getSize();
if(pos.x >= size.width || (pos.x + nodeW) < 0
|| pos.y >= size.height || pos.y + nodeH < 0) return false;
return true;
}
And called it accordingly on placeLabel:
placeLabel: function(tag, node, controller) {
...
...
...
var style = tag.style;
style.left = labelPos.x + 'px';
style.top = labelPos.y + 'px';
// Now passing on the node's width and heigh
style.display = this.fitsInCanvas(labelPos, canvas, w, h)? '' : 'none';
controller.onPlaceLabel(tag, node);
}
However, this is no solution.
You now will probably see your labels falling off the canvas, in a weird effect, until the whole node disappears.
And, obviously, I changed the source directly... a ticket should be filled on github.
EDIT:
Actually, it seems that I was working with an old version of the lib. The discussed behaviour changed to something similar to what I was describing. So, there is no need to change the code. Just download again your files. Specifically, the following link should give you these changes:
https://github.com/philogb/jit/blob/3d51899b51a17fa630e1af64d5393def589f874e/Jit/jit.js
There is a much simpler way to fix this although it might not be as elegant.
First, use the CSS 3 overflow attribute on the div associated with the Spacetree. For example, if the div in your HTML page that is being used by infovis is
<div id="infovis"> </div>
Then, you want some CSS that makes sure that your canvas does not allow overflow.
#infovis {
position:relative;
width:inherit;
height:inherit;
margin:auto;
overflow:hidden;
}
Next, in your your space tree definition, you probably have a placeLabel : function defined. At the end of it, simply set the style.display = "";. This force the label to be shown if the node is placed onto the canvas. For example:
onPlaceLabel: function(label, node, controllers){
//override label styles
var style = label.style;
if (node.selected) {
style.color = '#ccc';
}
else {
style.color = '#fff';
}
// show the label and let the canvas clip it
style.display = '';
}
Thus, you are displaying the text and turning it over to the browser to clip any part of the node or the label that extend off the canvas.
I am using CSS transform scale to create a smooth zoom on a div. The problem is that I want to be able to get the correct mouse position in relation to div even when scaled up, but I can seem figure out the correct algorithm to get this data. I am retrieving the current scale factor from:
var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform);
scale = transform.a;
When I read the position of the div at various scale settings it seems to report the correct position, i.e. when I scale the div until is is larger the the screen the position left and top values are negative and appear to be correct, as does the returned scale value:
$("#zoom_div").position().left
$("#zoom_div").position().top
To get the current mouse position I am reading the x and y position from the click event and taking away the offset. This works correctly at a scale value of 1 (no scale) but not when the div is scaled up. Here is my basic code:
$("#zoom_div").on("click", function(e){
var org = e.originalEvent;
var pos = $("#zoom_div").position();
var offset = {
x:org.changedTouches[0].pageX - pos.left,
y:org.changedTouches[0].pageY - pos.top
}
var rel_x_pos = org.changedTouches[0].pageX - offset.x;
var rel_y_pos = org.changedTouches[0].pageY - offset.y;
var rel_pos = [rel_x_pos, rel_y_pos];
return rel_pos;
});
I have made several attempts at multiplying dividing adding and subtracting the scale factor to/from from the pageX / Y but without any luck. Can anyone help me figure out how to get the correct value.
(I have simplified my code from the original to hopefully make my question clearer, any errors you may find in the above code is due to that editing down. My original code with the exception for the mouse position issue).
To illustrate what I am talking about I have made a quick jsfiddle example that allows the dragging of a div using translate3d. When the scale is normal (1) the div is dragged at the point where it is clicked. When the div is scales up (2) it no longer drags correctly from the point clicked.
http://jsfiddle.net/6EsYG/12/
You need to set the webkit transform origin. Basically, when you scale up it will originate from the center. This means the offset will be wrong. 0,0 will start in the center of the square. However, if you set the origin to the top left corner, it will keep the correct coordinates when scaling it. This is how you set the origin:
#zoom_div{
-webkit-transform-origin: 0 0;
}
This combined with multiplying the offset by the scale worked for me:
offset = {
"x" : x * scale,
"y" : y * scale
}
View jsFiddle Demo
dont use event.pageX - pos.left, but event.offsetX (or for some browser: event.originalEvent.layerX
div.on('click',function(e) {
var x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX;
var y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY;
});
see my jsFiddle exemple: http://jsfiddle.net/Yukulele/LdLZg/
You may embed the scaled content within an iframe. Scale outside the iframe to enable scaled mouse events within the iframe as mouse events are document scope.
I'm writing a 2D game in html5 using Canvas which requires mouse click and hover events to be detected. There are 3 problems with this: detections must be pixel-perfect, objects are not rectangular (houses, weird-shaped UI buttons...), and it is required to be fast and responsive. (Obviously brute force is not an option)
So what I want to ask is how do I find out which object the mouse is on, and what are the possible optimizations.
P.S: I did some investigation and found a guy who used QuadTree here.
I have a (dated) tutorial that explains the concept of a ghost canvas which is decent for pixel-perfect hit detection. The tutorial is here. Ignore the warning about a newer tutorial, the newer one does not use the ghost canvas concept.
The idea is to draw the image in question to an in-memory canvas and then use getImageData to get the single pixel of the mouse click. Then you see if that single pixel is fully transparent or not.
If its not fully transparent, well, you've got your target.
If it is fully transparent, draw the next object to the in-memory canvas and repeat.
You only have to clear the in-memory canvas at the end.
getImageData is slow but it is your only option if you want pixel-perfect hit detection and aren't pre-computing anything.
Alternatively you could precompute a path or else an array of pixels with an offset. This would be a lot of work but might be faster. For instance if you have a 40x20 image with some transparency you'd compute an array[40][20] that would have true or false corresponding to transparent or not. Then you'd test that against the mouse position, with some offset, if the image is drawn at (25, 55) you'd want to subtract that from the mouse position and then test if the new position is true when you look at array[posx][posy].
That's my answer to your question. My Suggestion? Forget pixel-perfect detection if this is a game.
Seriously.
Instead make paths (not in canvas, in plain javascript code) that represent the objects but are not pixel perfect, for instance a house might be a square with a triangle on the top that is a very close approximation of the image but is used in its stead when it comes to hit testing. It is comparatively extremely fast to compute if a point is inside a path than it is to do pixel-perfect detection. Look up point in polygon winding number rule detection. That's your best bet, honestly.
The common solution in traditional game development is to build a click mask. You can re-render everything onto a separate off-screen canvas in a solid color (the rendering should be very quick). When you want to figure out what was clicked on, you simply sample the color at the x/y co-ordinate on the off-screen canvas. You end up building a color-->obj hash, akin to:
var map = {
'#000000' : obj1
, '#000001' : obj2
, ...
};
You can also optimize the rendering to the secondary canvas to only happen when the user clicks on something. And using various techniques, you can further optimize it to only draw the part of the canvas that the user has clicked on (for example, you can split you canvas into an NxN grid, e.g. a grid of 20x20 pixel squares, and flag all of the objects in that square -- you'd then only need to re-draw a small number of objects)
HTML5 Canvas is just a drawing plane, where you can set different transforms before calling each drawing API function. Objects cannot be created and there is no display list. So you have to build these features yourself or you can use different libraries available for this.
http://www.kineticjs.com/
http://easeljs.com/
A few months before I got interested in this and even wrote a library for this purpose. You can see it here : http://exsprite.com. Ended up facing a lot of performance issues, but because of lack of time I couldn't optimize it. It was really interesting, so waiting for some time to make it perfect.
I believe the comments should suffice. This is how I determine user intention in my 2d isometric scroller, currently located at http://untitled.servegame.com
var lastUp = 0;
function mouseUp(){
mousedown = false; //one of my program globals.
var timeNow = new Date().getTime();
if(mouseX == xmouse && mouseY == ymouse && timeNow > lastUp + 100){//if it was a centralized click. (mouseX = click down point, xmouse = mouse's most recent x) and is at least 1/10th of a second after the previous click.
lastUp = new Date().getTime();
var elem = document.elementFromPoint(mouseX, mouseY); //get the element under the mouse.
var url = extractUrl($(elem).css('background-image')); // function I found here: http://webdevel.blogspot.com/2009/07/jquery-quick-tip-extract-css-background.html
imgW = $("#hiddenCanvas").width(); //EVERY art file is 88px wide. thus my canvas element is set to 88px wide.
imgH = $(elem).css('height').split('p')[0]; //But they vary in height. (currently up to 200);
hiddenCanvas.clearRect(0, 0, imgW, imgH); //so only clear what is necessary.
var img = new Image();
img.src = url;
img.onload = function(){
//draw this elements image to the canvas at 0,0
hiddenCanvas.drawImage(img,0,0);
///This computes where the mouse is clicking the element.
var left = $(elem).css('left').split('p')[0]; //get this element's css absolute left.
var top = $(elem).css('top').split('p')[0];
offX = left - offsetLeft; //left minus the game rendering element's absolute left. gives us the element's position relative of document 0,0
offY = top - offsetTop;
offX = mouseX - offX; //apply the difference of the click point's x and y
offY = mouseY - offY;
var imgPixel = hiddenCanvas.getImageData(offX, offY, 1, 1); //Grab that pixel. Start at it's relative X and it's relative Y and only grab one pixel.
var opacity = imgPixel.data[3]; //get the opacity value of this pixel.
if(opacity == 0){//if that pixel is fully transparent
$(elem).hide();
var temp = document.elementFromPoint(mouseX, mouseY); //set the element right under this one
$(elem).show();
elem = temp;
}
//draw a circle on our hiddenCanvas so when it's not hidden we can see it working!
hiddenCanvas.beginPath();
hiddenCanvas.arc(offX, offY, 10, 0, Math.PI*2, true);
hiddenCanvas.closePath();
hiddenCanvas.fill();
$(elem).css("top", "+=1"); //apply something to the final element.
}
}
}
In conjunction with this:
<canvas id="hiddenCanvas" width="88" height="200"></canvas>
Set the CSS positioning absolute and x = -(width) to hide;