I have gojs canvas with left and right html panels panels are sliding in out on to canvas How can i figure out canvas dynamic size to zoom to fit when I zoom to fit canvas stand behind panels so node elements
The diagram can only draw something within the area of the diagram’s HTMLDivElement.
So I do not understand how the user could ever see anything like the orange node outside of the canvas/diagram Div CANVAS where you show Div DIV1 to be. Are you sure that the Divs DIV1 and CANVAS do not overlap?
yes it does overlap sorry for bad drawing
so when we set to zoomtofit it does overlap node we dont want that we want zoom to fit to only in center area as i said canvas but not really correct to say center as canvas Our main objective we have div center our diagram to that div
OK, just make sure no element like DIV1 overlaps with the diagram’s Div unless you want it to.
yes thats correct we dont want overlap just zoomtofit workspace class but we have overlap panel opening and closing to on to canvas
The GoJS library does not pay attention to any DOM element other than the HTMLDivElement that you provide to it as the “host” element for it to draw in. If there are any DOM elements overlapping that Div, the library could not guess whether it was intended or not. So zoomToFit can only depend on the size of the Diagram.div to determine how big the viewport is.
diagram nodes align left it doesnt stay still on position
Could you please explain in more detail what you mean? Could you please show before and after screenshots the way that you want it to be, rather than the current behavior that I believe you have shown above in your second post?
you can see on the gif group node also moving with it should stay still on position why when resizing adjusting location of parts Actually you have similar things happening on on of samples i couldnt find but parts are aligning on left side i didnt understand why its aligment on left
OK, then why don’t you implement your expansion of that bar on the left so that it doesn’t change the size of the HTMLDivElement that is hosting the Diagram? That way the diagram’s Div won’t change size or position in the page.
Alternatively, you could change the Diagram.position so that the viewport is shifted towards the left, in addition to getting narrower.
How can i change diagram.position when panel is changing I did the other one but this time zoomtofit problem arise
Maybe something like:
const pos = myDiagram.position.copy();
pos.x -= (...shift_in_pixels...) / myDiagram.scale;
myDiagram.position = pos;
this is one of your example named planogram as you can see left and top resize moving item but right and bottom resize kept in the same place I did faced same situation my groups also so i found here not changing parts location code and applied that code now i am facing again but this time i cannot really move whole diagram left and right I applied what you suggest looks very chunky move 300px left then if i close move 300px right and its not really performant at all
I dont understand why nodes are moving resize canvas or group or whatever It should anchor on same place is there better way not move things around but keep in the same place?
In the earlier posts in this forum topic it seemed clear to me that you were talking about changing the width and left/position of the Div. When that happened you didn’t want to change the apparent x position of the nodes in the diagram, even though the Diagram’s Div had changed position. I suggested two possible solutions.
You are now talking about resizing a node (maybe a group) in a diagram. That is a completely different scenario. If you want to ask about that, start a new topic that is just about that. Otherwise continue talking about changing HTMLDivElements in this topic.
Actually its not so different i gave example of behavior we are facing when we change diagram canvas size diagram parts nodes whatever you called its moving we dont want that similar behavior its happening on groups also i know its different but resizing issue same I am asking this We have canvas when we change size diagram moving to left You said you have two alternative moving diagram I did and performance is very bad second alternative where we started move div over canvas in this scenario our overview shows different area and zoomtofit doesnt really align and panel overlap the diagram
thats why I asked you about how can i make zoomtofit target to div if you look carefully you can see watermark gojs logo one is in the gif other ones you cannot see it because its under div and has a issue with zoomtofit and overview window
zoomToFit always changes the Diagram.scale and Diagram.position so that the Diagram.documentBounds fits within the Diagram.div. It cannot consider any other DOM elements that may or may not be occluding the diagram’s Div.
Ok I understand we cannot do much about it but how about zoomtoRect
zoomToRect(r: Rect, scaling?: EnumValue): void
if I do document.getElementById(‘workspace’).getBoundingClients()
how can i transform those points into to zoomToRect?
DOMRect { x: 300, y: 50, width: 1590, height: 407, top: 50, right: 1890, bottom: 457, left: 300 }
there should be some connection between canvas and hosting div points
I’m unclear what you are trying to say. The coordinate system used by HTML Elements is independent of the coordinate system (“document coordinates”) used by Parts in a Diagram. GoJS Coordinate Systems-- Northwoods Software
But if you have a point in the diagram’s Div’s coordinate system, where the top-left corner of the Div is at (0,0), you can call Diagram.transformViewToDoc to get a point in the diagram’s document coordinate system. Diagram | GoJS API