Skip to main content
  1. Index

HTML interaction

This page explains how to use GoJS Diagrams alongside other HTML elements in a webapp.

For custom Text Editors, Context Menus, and ToolTips invoked or hidden via GoJS tool operations, see the section on HTMLInfo.

Using HTML alongside GoJS

Editing Parts with the HTML data Inspector

Generally, GoJS can interact with the rest of the page via JavaScript that programmatically moves and modifies GoJS objects and the Diagram. If you have not read about programmatically interacting with Parts and the Model, there is a GraphObject Manipulation tutorial for this purpose.

To help programmers get started with HTML controls we have implemented a simple Data Inspector Extension, an HTML-based property editor that displays and allows editing of data for the selected Part.

The Data Inspector chiefly works via a "ChangedSelection" Diagram Listener. When triggered, it populates HTML Fields. Editing those fields and clicking away then update the selected Part by calling diagram.model.setDataProperty to update the model.

HTML Focus on Diagrams

When a browser element gets focus, some browsers scroll that element into view. Because this behavior may be unwelcome in some web apps, Diagram.scrollsPageOnFocus defaults to false. To get the default browser behavior, set this to true.

Additionally, browsers may outline selected elements. This is from CSS, not GoJS, and can be removed by removing the CSS outline from all HTML elements inside the Diagram div:

css

The HTMLInfo class

The HTMLInfo class allows certain GoJS elements to be replaced by HTML elements. This is done by setting any of the following properties to an instance of HTMLInfo:

Usage

When replacing GoJS elements with custom HTML elements, the main concerns are when to show and hide the custom element and the positioning of the element. GoJS does not handle this automatically; HTMLInfo requires two functions to be provided:

  • HTMLInfo.show, called by GoJS when custom HTML content should be displayed, such as when activating a ToolTip, ContextMenuTool, or TextEditingTool.
  • HTMLInfo.hide, called by GoJS when the custom HTML content should be hidden, such as when cancelling tool usages.

In lieu of setting HTMLInfo.hide, you can set the HTMLInfo.mainElement property to the primary HTML Element that you are showing/hiding, and HTMLInfo will automatically hide the provided element by setting mainElement.style.display to "none".

For positioning your element, a simple strategy is to programatically select the element and set its position according to Diagram.lastInput's InputEvent.viewPoint, which can be seen in the examples below.

HTMLInfo samples

Tooltips

For tooltips, if a GraphObject.toolTip or Diagram.toolTip is set to an instance of HTMLInfo, GoJS calls HTMLInfo.show in ToolManager.showToolTip. After the tooltip delay, GoJS will call HTMLInfo.hide in ToolManager.hideToolTip.

What follows is an example using HTMLInfo.show and HTMLInfo.hide, but the HTMLInfo.hide is simple enough that setting the HTMLInfo.mainElement to the tooltip div instead would be sufficient.

html

Context Menus

For context menus, ContextMenuTool.showContextMenu will call HTMLInfo.show. ContextMenuTool.hideContextMenu will call HTMLInfo.hide.

This example adds a button by setting a container div's innerHTML, selecting the button with document.getElementById, and adding an onClick closure that will call the event handler on click. The container div is defined as:

html

In this example, the Context Menu on a Node uses a button element, and so receives the same styling as defined in the site's CSS. In this case, it creates an odd look, but for other purposes, such as matching your app's existing buttons, this can be quite convenient.

Text Editors

For custom text editors, TextEditingTool.doActivate will call HTMLInfo.show. TextEditingTool.doDeactivate will call HTMLInfo.hide.

HTMLInfos used as text editors must also define a HTMLInfo.valueFunction. When TextEditingTool.acceptText is called, GoJS will call HTMLInfo.valueFunction and use the return value as the value for the TextEditingTool completion.

The example below constructs an HTMLInfo that uses HTMLInfo.show and HTMLInfo.hide to dynamically add, populate, and remove HTML elements from the page. This example does not need extra divs to be declared like the previous two examples.