When displaying a context menu in GoJS, it can happen that said menu exeeds the viewport.
The following image shows this case, the upper edge of the image is the border of the canvas GoJS draws on.
When this happens, is it possible to programmatically move the whole diagram down so the menu is visible again?
Yeah, use Diagram.centerRect or Diagram.scrollToRect
var node = myDiagram.findNodeForKey(someKey);
myDiagram.centerRect(node.actualBounds);
See an example on the Initial Viewport intro page.
Related
I have a Go.js flowchart where you can drag&drop nodes from a palette and create links between them. My problem is that when I try to move a node outside the viewport bounds the diagram doesn't scroll. The same happens when I try to draw a link to a node which is outside the viewport, the diagram doesn't scroll but the link just runs out of the viewport.
Is there any implemented solution for that? When I try to drag a node from the palette to the diagram and I move it close to the viewport bounds, the diagram scrolls, I would need something similar.
Anyway, congrats on the product because it has a lot of cool functionality.
Unless you have explicitly disabled it, the GoJS Diagram supports auto-scrolling for dragging and for linking and for relinking.
Just hold the mouse/finger down just inside the edge of the viewport. The closer to the edge you are the faster it will scroll.
I'm using jQuery.kinetic to allow a div to be scrolled within its parent div by dragging the mouse, much like the demo on the author's site. By default, when the page loads, the upper left corner of the inner div is aligned with the upper left corner of the parent div (meaning it's scrolled as far up and left as possible). Like this:
I would like to "pre-scroll" when the page loads a specific number of pixels over so that the inner div is roughly centered. Something like this:
I'm not seeing anything in the documentation about being able to specify a starting position for the inner div but it looks like the author of jQuery.kinetic built in a way to extend the plugin beyond the default functionality like this:
$.Kinetic.prototype.newFeature = function(options){
// define the task
};
Then I can call that functionality:
// use the method
$('#elem').kinetic('newFeature', { options });
Is there a way to set a position on page load that I'm missing? If not, how can I extend the plugin to do what I want?
Thanks!
It took me forever to figure out that the Kinetic plugin has built-in abilities to manually scroll the container. It's not anywhere in the documentation, but through inspecting the plugin code I noticed that it has methods to control the x and y-axis scroll position.
In the file jquery.kinetic.js from line 458 to 475 (at the time of writing) the scrollLeft and scrollTop methods are defined. https://github.com/davetayls/jquery.kinetic/blob/master/jquery.kinetic.js#L458
You can use them on a container with an already active instance of Kinetic by calling the following methods:
$("container-selector").kinetic("scrollLeft", 50);
$("container-selector").kinetic("scrollTop", 480);
It's worthwhile to go through the Kinetic code and figure out how it works and what functionalities are available to use en lieu of a more fully fleshed-out documentation.
I'm trying to write something that draws on an image. I have a flow chart that's in a .png and I want to draw a circle around a specific step in the chart based on the page that the user is on. I would normally just head for HTML5 and use the <canvas> element, but it has to work on IE8, which doesn't support <canvas>. I can use jQuery, but that's the only external library that I can use. Also, the user can scroll up and down the page, so things that I've seen that use absolute positioning end up looking bad since I don't always want the image there. Any tips? Thanks.
How about a DIV containing the flowchart as a background image with another image (which would be a transparent circle outline image) sitting inside the DIV, positioned absolutely (relative to it's parent DIV) which is moved to the correct position within the div based on which page the user is on. Should be simple enough to do.
I am utilizing jQuery's draggable functionality. The viewport div is the entire window size. There is a draggable container div within the viewport which is much larger than the viewport itself giving the feel of looking through a window to see small portions of the container. The container holds object divs which are also draggable.
Currently, I have the container div dragging properly and I have the object divs dragging around the viewport div properly as well. The issue I am having is I want to "push" the viewport around if an object div comes within a particular pixel range of the edge of the viewport div.
JQuery's draggable function has a drag event which I have been trying to utilize on the objects. I can get the viewport to scroll but, it requires the mouse keep the object moving at all times to keep the scroll going. I am looking to have the object get within the pixel range and be able to not move the mouse but, still scroll. I am at a loss at the moment as I cannot seem to find any solution that really fits my requirements. Any help would be greatly appreciated and rewarded with my gratitude.
To see an example of what I am doing, please visit http://jsfiddle.net/trVZA/10/. When the red box is dragged, the black object will drag around. I have commented out my code on the drag event for the object as it will completely freeze the browser but, it is there for you to see my mistake. When the object gets close to a wall I want the background water image to scroll around.
Here's a canvas app I come across : canvasphoto (uses YUI 2 I believe, which I haven't used before). It displays images on a canvas and it lets you resize/move the images across the canvas. What I want to do is to add a close button on the top right side of the images drawn on the canvas and have it trigger an onclick event when clicked (I'd display a confirm button asking the user if he/she wants to remove the image).
Is this possible? If so, can you help me get started on this (resource/link for drawing an image on top of another image drawn on a canvas, basic canvas manipulation, etc.) Thanks!
Edit: solved the part where the image rendered will respond to click (on top right corner only). So, the only problem left is drawing the close button on the top right corner of the image.
There is no way for something drawn into a canvas to respond to events without additional work. Either you can store the position of the close box and have an onclick event on the canvas check if the click occurs within the rectangle, or you could place an element over the canvas where the rectangle has been drawn and use that to handle the click. A relatively positioned div with no contents would work.
Instead of drawing on the corkboard, a div with an image is rendered on the page above the top right corner of the image by setting a higher z-index than the canvas and and absolute position (with the coordinates of the top right corner, of course).