Making the Canvas Fullscreen

GoJS
1

Is there a quick way to make the canvas fullscreen? For example, if the user types F11 and the canvas is currently selected, I would like it to open the canvas in fullscreen.

2

That’s not built-in, but you can use the Fullscreen API for that:

    function viewFullScreen(show) {
      if (show === undefined) show = !isFullScreen();
      if (show) {
        if (document.body.requestFullscreen) document.body.requestFullscreen();
        else if (document.body.webkitRequestFullScreen) document.body.webkitRequestFullScreen();
        else if (document.body.mozRequestFullScreen) document.body.mozRequestFullScreen();
        else if (document.body.msRequestFullscreen) document.body.msRequestFullscreen();
      } else {
        if (document.exitFullscreen) document.exitFullscreen();
        else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
        else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
        else if (document.msExitFullscreen) document.msExitFullscreen();
      }
    }

    function isFullScreen() {
      return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
    }

Just call viewFullScreen() repeatedly to toggle.

3

Thank you! I got it working with the following modification:

// shows the canvas in fullscreen
function viewFullScreen(show) {
	if (show === undefined) show = !isFullScreen();
	canvas = document.getElementById("diagram");
	if (show) {
		if (canvas.requestFullscreen) canvas.requestFullscreen();
		else if (canvas.webkitRequestFullScreen) canvas.webkitRequestFullScreen();
		else if (canvas.mozRequestFullScreen) canvas.mozRequestFullScreen();
		else if (canvas.msRequestFullscreen) canvas.msRequestFullscreen();
	} else {
		if (document.exitFullscreen) document.exitFullscreen();
		else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
		else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
		else if (document.msExitFullscreen) document.msExitFullscreen();
	}
}
1 Like
4

I am working on the same functionality in angular and I need to show the diagram to full screen when I click on a button. I am unable to do that in angular. i need to write in type script by using full screen api. Help me

5

Showing a diagram fullscreen really doesn’t have anything to do with GoJS. But the above code shows how to do it.

6

adding to this we are using
this.fullScreenElement.addEventListener(“fullscreenchange”, () => {})
for full screen the gojs graph div

but the context menu is not visible in full screen, although the context menu is being written inside the full screen div itself.

7

So your context menu is implemented in HTML, not as a GoJS Adornment. You must not modify the contents of the Div that you give to the Diagram. Instead make fullscreen the DOM element that contains both the Diagram Div and your context menu.