Home | Demos | Products

GLG Diagram Editor Web Demo (HTML5 & JavaScript)

This is an example of a custom diagraming editor written entirely in JavaScript using the GLG Extended API. The user interface of the diagram editor was built using the GLG Graphics Builder. The resulting drawing was saved into a file which is then loaded in a JavaScript program on a web page. The GLG API is used to handle user interaction with the drawing.

The JavaScript version of the demo provides the same functionality as the desktop versions written in C/C++, C# and Java. The GLG drawing and the programming logic are shared between all versions of the demo, with only syntax differences between the source code of different versions. The GLG Demo Download includes the desktop versions of this demo.

User Interaction and Features
Touch Screen Interaction



User Interaction and Features

The Diagram Editor provides a sample implementation of the following features:

Object Palette

The Object Palette contains custom icons created in the GLG Graphics Builder. To create a diagram node, click on a desired node icon in the palette, then click in the drawing to position the node.

The palette also contains link buttons for connecting nodes with links as described below.

Connecting Nodes with Links

To connect two nodes with a link, click on a link icon in the Object Palette, then click on two nodes in the drawing to be connected.

Some nodes have more than one connection point; connection points are highlighed when the mouse moves over them.

Touch Screen Interaction

On mobile devices with a touch screen, single finger dragging may be used to select a connection point of icons with multiple connection points. To create a link between two nodes with multiple connection points, touch and drag over the desired connection point of the first node. When the touch moves over the connection point, the point is highlighted with a large green circle, which makes it possible to select the desired point. Releasing the touch over the selected point connects the start point of the link.

Repeat touch and drag for the second node to select the end point of the link.

Two finger touch may be used to scroll and zoom the page while in the link creation mode.

Modality

There are two modes for creating nodes and links. In the default creation mode, the editing mode is restored to the Selection mode after creating each node or link. To create several nodes, the user has to click on a node icon each time before clicking in the drawing to position the node.

The Creation Mode toolbar button toggles between the default creation mode and the "sticky" creation mode.

In the "sticky" mode, the creation mode stays active to allow the user to create several nodes or links in a row by repeatedly clicking in the drawing area, without a need to click on the node or link icon each time. To exit object creation mode, click on the Select icon in the Object Palette or disable the "sticky" mode using the Creation Mode toolbar button.

Connectivity Information

The demo uses custom data to keep track of what nodes are connected. This may be used by an application for traversing connected nodes. The connectivity information is stored when the diagram is saved and restored when the saved diagram is loaded.

The diagram editor can be extended by adding custom connectivity rules and other application-specific features. More information

Object Selection and Editing

The editing mode is activated by pressing the Select button in the Object Palette. In the editing mode, you can move nodes and connecting links with the mouse, edit their properties and perform other editing operations using the toolbar buttons.

Selection Feedback

In the demo, the name of the selected object is displayed in the selection display area at the bottom. In an application, a custom handling can be performed when an object is selected or unselected.

Prompt Area

Prompts and error messages are displayed in the message area at the bottom of the diagram. The errors are also displayed in an alert dialog and logged to the broser console.

Properties Editing and Attaching Custom Data

The Properties toolbar button may be used to popup the Properties Dialog for the selected object. In this demo, the dialog is used for editing custom data properties associated with the object, but the graphical properties (such as colors, etc.) may be edited the same way using either a color palette or a text box. The custom data are attached to the object: they are saved when the diagram is saved and restored when the saved diagram is loaded.

Cut and Paste

The Cut toolbar button may be used to delete a node or link, and the Paste button may be used to undo the Cut action.

Zooming, Scrolling and ZoomTo Features

Integrated Tooltips

Hover a mouse over any button to display a tooltip. On mobile devices, touch and hold a button to display its description.

Saving the Diagram

The Save toolbar button demonstrates saving the created diagram as a JSON string. This string can be sent to a server for persistent storage. The JSON string is also printed to the console for information and debugging.

Loading a Previously Saved Drawing

The Load toolbar button loads a previously saved diagram. In the demo, it loads a diagram from the JSON string generated by the Save action. In an application, the JSON string containing a previously saved diagram can be loaded from a server.

Printing

The Print toolbar button can be used to print the diagram web page using the browser's native print dialog.