Class HTMLInfo

HTMLInfo is used to show and hide custom HTML page elements, such as a context menu, tooltip, or text editor made of HTML.

Properties that can be set to an HTMLInfo include:

When a context menu is set to an instance of HTMLInfo, ContextMenuTool.showContextMenu and ContextMenuTool.hideContextMenu call show and hide respectively. You may define mainElement instead of hide in order to automatically use a default hide method.

When a tooltip is set to an instance of HTMLInfo, ToolManager.showToolTip and ToolManager.hideToolTip call show and hide respectively.

When a text editor is set to an instance of HTMLInfo, TextEditingTool.doActivate calls show and TextEditingTool.doDeactivate calls hide.

For HTMLInfo to work, you must define show and either hide or mainElement. Typical usage will also stop the ContextMenuTool once the desired context action occurs, typically by calling diagram.currentTool.stopTool();.

Example usage of HTMLInfo can be found in the Custom Context Menu and HTML LightBox Context Menu samples, the Custom TextEditingTool sample, and the Text Editor implementation extension.

Here is the outline for typical usage of HTMLInfo as a context menu: 

// Assign an HTMLInfo to the Diagram:
myDiagram.contextMenu = $(go.HTMLInfo, {
  show: showContextMenu,
  hide: hideContextMenu
});

function showContextMenu(obj, diagram, tool) {
  // Show the context menu HTML element:
  SomeDOMElement.style.display = "block";

  // Also show relevant buttons given the current state
  // and the GraphObject obj; if null, the context menu is for the whole Diagram
}

function hideContextMenu() {
  SomeDOMElement.style.display = "none";
}

function buttonClick() {
  // do some action when a context menu button is clicked

  // then:
  myDiagram.currentTool.stopTool();
}

By default, TextEditingTool.defaultTextEditor is an instance of HTMLInfo. You can see its default implementation details here.

Constructor Summary Details

Name Description
HTMLInfo()

A newly constructed HTMLInfo can be assigned as a value of TextEditingTool.defaultTextEditor, TextBlock.textEditor GraphObject.contextMenu, Diagram.contextMenu, GraphObject.toolTip, or Diagram.toolTip.

Properties Summary Details

Name, Value Type Description
hide
{function(Diagram, Tool) | null}

Gets or sets the function to call when an HTMLInfo is to be hidden.More... The function should "hide" the HTMLInfo, either by removing any traces of it or otherwise returning the page state to one where the HTMLInfo content is no longer considered active.

Setting this is not strictly necessary, if no action is to be taken when hiding the HTMLInfo.

If this is called by:

See also:
mainElement
{HTMLElement | null}

Gets or sets the primary HTML Element that represents this HTMLInfo.More... In a context menu, this would be the outermost HTML element, the one which typically shows and hides. If this is set and hide is not, HTMLInfo will automatically execute: 

  tool.mainElement.style.display = "none";

when hide would typically be called.

This is set only for convenience; the default value for this property is null.

See also:
show
{function(GraphObject, Diagram, Tool) | null}

Gets or sets the function to call when an HTMLInfo is to be shown, such as when used as the GraphObject.contextMenu or Diagram.toolTip or TextBlock.textEditor.More...

If this is called by:

  • ContextMenuTool.showContextMenu, the first argument is the GraphObject for which the context menu is being shown, or null for the diagram background.
  • ToolManager.showToolTip, the first argument is the GraphObject for which the tooltip is being shown, or null for the diagram background.
  • TextEditingTool.doActivate, the first argument is the TextBlock for which the text editor is being shown.

      • If you need access to any bound data for the first argument, if it is non-null, you can get it via: obj.part.data and then you can look at any of the properties you have put on that data.

      When used as a context menu, typically shown elements, such as buttons, should call diagram.currentTool.stopTool(); when their action is completed.
valueFunction
{function(): * | null}

Gets or sets a function that returns the primary value associated with this HTMLInfo, such as the string value of a text editor, which would be solicited by the TextEditingTool.More...

This typically returns a string.