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.
Related
Is there a way to allow the canvas object to be scrolled beyond content.
Example:
A canvas created with 1000*1000. And Enabled PAN and Zoom on the canvas. Draw a rectangle on the canvas and move the rectangle with mouse to the edge of the boundaries( top,right, bottom, left) it should scroll the the rectangle to the end of the canvas.
Right now my issue is I can drag the rectangle till the browser boundaries. I need to allow the rectangle to drag beyond the content so that I can use the full canvas. I can PAN the canvas to move around the browser.
Thanks
PIXI is just a rendering engine that draws things on canvas. PIXI does not have any mechanics to control canvas position on the web page.
Probably the most efficient way to address your use case is to:
Make canvas fit on the screen entirely (do not extend it beyond the screen bondary, never pan nor zoom canvas as DOM object).
Make "content" PIXI.Container that holds your content (stage -> content -> rectangles), and change "content" container position as needed to scroll the content inside the canvas.
If you insist on manipulating canvas position, you can position it absolutely on the webpage and manipulate it as DOM object.
Whatever approach you take, you will have to detect that drag and drop approaches the edge and do panning manually in your code. There's nothing in PIXI, as far as I am aware, that would facilitate this.
I'm working with svg files and some processing.js code to create a homepage.
It has some animation and static elements but the idea is to have everything the same but with different colours - Like an alternative homepage. I want this alternative to "peek" through as the mouse moves around. Only a small area around the mouse.
Does anyone have any idea how to do that?
since it isn't an image file it's a bit tricky.
I tried doing it by using the an image and the "drawing" element of processing.js thinking it could paint the alternative homepage, however it repeats the image everywhere the mouse go and what i want is for everything to remain in the same position only show the different colours in that spot.
You might consider superimposing two versions of your site, the "top" one completely covering the "bottom" one (make sure all backgrounds are opaque). Then you could try applying an SVG mask to the top page, making it transparent at a specific area and causing the bottom page to shine through. You could modify the mask as the mouse moves.
The other way round - i.e. clipping the top layer - is also thinkable.
I see the risk that this approach is slow and not consistent across browsers - you'd have to give it a try. Speed may differ depending on whether you clip/mask the top or the bottom layer.
W3C SVG Clipping, Masking and Compositing specs
MDN page on clipping and masking
MDN page on applying SVG effects to HTML content
If one version of the page can be converted to other by swapping out colors, SVG filters might be an option as well.
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.
I am trying to draw some guide lines via fabric.js like the online editor app on printio.ru.
So far, I placed 2 canvases with the same size in one page, the top one is to be a static workcanvas which used to draw some guide lines and the bottom canvas will contain some interactive objects. This seems to be how they do it in the page on the link above.
However, I can't work with those objects on the bottom canvas because the top canvas interrupts mouse events. Is there a way to let the mouse events to pass through to the bottom canvas? I am thinking of something like canvas.mouseenabled=false on the top canvas - is that possible?
I have thought of an alternative solution: place the guide lines and other objects in one single canvas. I don't like that solution because it adds things that I don't want to the bottom canvas and, in that case, I have to add some line instances instead of just draw line by context2d, which I think will give me low performance
Apply css-property
pointer-events:none
to upper elements, mouse events can through.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
It will be work for modern browser.
http://caniuse.com/#feat=pointer-events
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.