I have a GoJs diagram similar to an organizational chart, which has a dropdown menu as HTML content wrapped in diagram.toolManager.textEditingTool.
Now for bottom-most nodes, when dropdown menu is opened, some part of menu moves out of viewport and diagram is not automatically scrolled down.
How to handle this scenario?
Just to confirm – you’ve implemented a custom text editor in HTML, and the display of that editor causes something(s) to move in a way that you don’t want.
Could you please post some before-and-after screenshots?
Hi @walter ,
Sorry, I was not able to explain it better.
The issue is I have this dropdown menu, on select button, but the other half of the menu goes below the current viewport. I want that as soon as the menu is opened, diagram should be automatically scrolled down.
My intital thinking was to wrap this dropdown in some gojs part, and use scrollToPart method, but I am not able to do it since this menu is an HTML element wrapped as a custom editor.
this.diagram.toolManager.textEditingTool.defaultTextEditor = this.customEditor();
this.customEditor() is the function which contains this HTML element.
So that “Select ^” button in your Node causes some TextBlock to be edited, presumably by calling CommandHandler.editTextBlock. That causes your HTMLInfo’s HTMLInfo.show function to be called, which makes the HTML visible and positions it as you desire. (Did you adapt the TextEditorSelectBox extension?)
When you position your HTML, you can do so anywhere you want – it won’t be clipped by the viewport. You can see that in the sample Custom Select Box and Radio Button Text Editors for In-Place Editing of Text | GoJS Diagramming Library. So your question involves scrolling the diagram within the viewport – thereby appearing to shift the node whose text is being edited. How did you want that node to appear to be moved – i.e. how did you want the diagram to be scrolled? If you want to show the whole node, why not position the HTML so that it’s not overlapping where the node is?
Actually, I want to scroll the diagram down, and show the complete node. Also, I cannot position this HTML dropdown anywhere up, it should be below the Select text block.
So as soon as this dropdown menu is open, I want the diagram to scroll down to display the complete node.
You can get a Node’s bounds in document coordinates from its GraphObject.actualBounds. From that Rect you can determine a Point that you can call Diagram.transformDocToView in order to get a Point in viewport coordinates – i.e. within the hosting Div element.
Once you have calculated how far to scroll in viewport coordinates, you’ll need to convert those distances to document coordinates by multiplying by the Diagram.scale. Then you can set Diagram.position by shifting that point by the distances in document coordinates.
Hi @walter, thanks for your response.
While implementing your solution, I realized that main problem lies that diagram height is not increasing when dropdown menu is opened.
Here, in this image as you can see the diagram section ends with that gray line. And the dropdown menu is overflowing out of diagram.
How to increase height of diagram in this case, I have already set allowResize to true for diagram property.
I am new to GoJs, it would be better if you could provide me some code reference for this case.
Thanks.
The Diagram.allow… control permissions for the user to perform certain actions. User Permissions | GoJS In the case of Diagram.allowResize, that permits the user to resize Parts if they have Part.resizable set to true, using the ResizingTool. So that property has nothing to do with the user resizing the Diagram, neither its Diagram.documentBounds nor its Div element size (i.e. viewport size).
No HTML elements have any bearing on the Diagram.documentSize, because no HTML elements are in any Diagram document. I’m guessing that you do not want to increase the size of the Node for which you are showing some HTML elements. You merely want to allow the diagram to be scrolled when that Node is at the bottom of the documentBounds. Is that correct?
If so, then I suppose you could increase the Diagram.scrollMargin Margin.bottom so as to allow the whole HTML element to be moved up on the page without overlapping with the Node. Is that what you are trying to achieve? If so, then as a sufficient solution it might be enough to temporarily set the Diagram.scrollMargin to new go.Margin(0, 0, h, 0), where h is the HTML dropdown’s height in document coordinates. That can be computed by getting the HTML element’s bounds’ height and dividing by the Diagram.scale. Something like htmlDropdown.getBoundingClientRect().height / myDiagram.scale
Don’t bother to set Diagram.scrollMargin when your dropdown isn’t showing beyond the viewport. Remember to set Diagram.scrollMargin back to zero when your dropdown isn’t showing any more…
