Hi,
I am not defined any layout in template,
while moving the top node to bottom, other node should remains in the same place but for me other nodes are moved to top. Same as right side also, while moving the right node to left ,other nodes or moved to right side
Could you please show us some small screenshots demonstrating the problem?
And how did you declare your Diagram?
Diagram
(go.Diagram, “messageFlowDiv”, {
“animationManager.isEnabled”: false,
initialPosition: new go.Point(0, 0)
})
Initial Layout (Demo diagram)
after moving the start to bottom
then step is moved to top
same as when left node moved to right ,whole diagram moved to left
The nodes are not being moved – if you looked at their Node.locations you would see that they had not changed. (Other than for the node that the user is moving manually.)
Instead, the diagram is automatically scrolled, because the policy is to always have the area of the viewport be covered by as much of the document as is available at the current scale. This prevents the viewport from accidentally being far away from the contents and only showing a blank area, which can be disconcerting to users. The same or similar policy is used in document editors and in web browsers. For example, the user cannot scroll the web page so the start of the page is at the bottom of the window or completely out of the window.
You might want to read GoJS Coordinate Systems-- Northwoods Software Maybe you want to set either Diagram.scrollMargin or Diagram.scrollMode.
I will look on it ,
if there is any example it will be easy.
how can i make Document Coordinates and Viewport Coordinates to same point
In this image viewport coordinates start from (300,250) in document coordinates but what i need is ,viewport should start from (0,0) document coordinates
I need the source code for this diagram .
Programmatically, you can set myDiagram.position = myDiagram.documentBounds.position.
When initializing a diagram, including when setting the Diagram.model, set Diagram.initialPosition to the Point that you want.
The source code for that diagram is in that page.
ya, I did this after rendering its working properly. while moving the cursor to the canvas its again back to the same issue
How have you set up your Diagram?
const diagramRef = useRef<go.Diagram>()
useEffect(() => {
const populateModel = async () => {
let flowData = await getData(props.messageflow)
let model = new go.GraphLinksModel()
model.nodeDataArray = flowData[0]
model.linkDataArray = flowData[1]
....
diagramRef.current.model = model
diagramRef.current.documentBounds.position = new go.Point(0, 0)
}
useEffect(() => {
let localDig = $(go.Diagram, “messageFlowDiv”, {
“animationManager.isEnabled”: false,
‘initialPosition’: new go.Point(0, 0),
})
…
diagramRef.current = localDig
}, [])
It is unclear to me what the problem is and how to reproduce it. Are you talking about the behavior in most any sample?
So let’s try Minimal GoJS Sample. Select the “Alpha” node and drag it out of the viewport a short distance to the left. When the user drops the node, the diagram automatically scrolls to fit as much of the whole document into the viewport as possible. Is this behavior what you do not want? Do you want the moved node to remain outside of the viewport?
Yes ,I want the moved node to remain outside of the viewport.
Try setting Diagram.scrollMode to go.Diagram.InfiniteScroll.
You can play with it in the example at GoJS Coordinate Systems-- Northwoods Software
Node shouldn’t go out of the view port in left and top side ,but in the right and bottom it can move out of the view port means it should enable the vertical and horizontal scroll bar
You could try setting the Diagram.padding to be at least half the width or height of the viewport. Or the Diagram.scrollMargin.
By the way, you probably also want to set Diagram.autoScrollRegion to zero.
Hi, I encountered the same problem as you. Have you solved this problem?