Java Diagram Editor Example

This is an example of a simple diagraming editor written entirely in Java using the GlgBean and GLG Extended API. It may be run inside a browser or as a stand-alone Java application.

The user interface of the editor was built using the GLG Graphics Builder. For more complex application, this  may be changed to use any standard Java GUI builders and IDEs, with the GlgBean used to handle just the graphics in the drawing area.

Click here for the description of features and details of the User Interaction.

Click here to view the source code of the diagram editor.

The C/C++ implementation of the Diagram Editor Demo is provided in the GLG Demo Download.

Source Code

Feature Description and User Interaction

The Diagram Editor provides a sample implementation of the following features:
 
  • Object Palette
  • Node and Edge Objects
  • Modality
  • Connectivity Information
  • Object Selection and Editing
  • Selection Feedback
  • Prompt Area
  • Properties Editing and Attaching Custom Data
  • Cut and Paste
  • Drill Down and Up
  • Zooming, Scrolling and ZoomTo Features
  • Changing Drawing Extent
  • Automatic Tooltips
  • Saving the Drawing and Traversing Object Data
  • PostScript Printing

    • Object Palette

    Allows creating objects by selecting them from a palette. To create objects, click on the icons in the palette, then click in the drawing to position an object.

    Modality

    Object creation mode stays on to allow creating several objects in a row (click several times to create several objects).  The Selection icon may be used to switch to the editing mode. The current mode is indicated by highlighting a button in the object palette.

    Node and Edge Objects

    Two kinds of objects are provided: node objects and edge (connector) objects. To connect two nodes, select the edge type from the palette, then select two nodes in the drawing. Keep selecting nodes to create more then one connector object.

    Connectivity Information

    The demo uses custom data to keep track of what nodes are connected. This may be used for traversing connected nodes, etc.

    Object Selection and Editing

    Press the Select button in the Object palette to activate editing mode. In editing mode, you can move the object with the mouse, edit its properties and perform other editing operations using the toolbar buttons. Both nodes and edges can be edited in this example.

    Selection Feedback

    The name (or other properties) of the selected objects are displayed in the selection display area at the bottom.

    Prompt Area

    Prompts and error messages are displayed in the message area at the bottom.

    Properties Editing and Attaching Custom Data

    The Properties toolbar button can be used to popup the property panel. In this demo custom data properties associated with the objects are edited, but the graphical properties (colors, etc.) may be edited in the same way using color palettes, etc. The custom data are attached to the object and are automatically saved with the drawing.

    Cut and Paste (Cut and Paste toolbar buttons)

    Drill Down and Up (Drill Down and Up toolbar buttons)

    When an object is selected, you can drill down into it and create a few objects that will represent the internals of the selected node. When you drill up, the drill-down drawing will be stored with the object by using custom data feature. This can be used to associate a more detailed drawing with each top-level node. This drawing will be displayed next time you drill down into this node. Recursive drill-down with unlimited drill-down depth is allowed. All drill-down information is automatically saved with the Glg drawing.

    Zooming, Scrolling and ZoomTo Features

  • The ZoomIn/ZoomOut buttons and a zoom slider can be used for  zooming.
  • The 100% button restores initial zooming.
  • To zoom to an area, press the ZoomTo button, then select a rectangle to zoom to (click, drag, then release the mouse).
  • Scrollbars on the side of the drawing can be used for scrolling.

    • Changing Drawing Extent

    The Drawing Extent button toggles between two pre-set drawing area sizes.

    Automatic Tooltips

    Position a mouse over any button to display a tooltip

    Saving the Drawing and Traversing Object Data (Save toolbar button)

    The demo source code shows two ways of saving the drawing:
  • Saving the drawing file
  • Traversing all objects and saving only the data associated with the objects (the default in the demo). In the demo, saved information is printed on the Java Console.

    • Loading or Inserting a Drawing (Insert toolbar button)

    PostScript Printing (Print toolbar button)

    Generates a PostScript file. Java printing may also be used.

    Exit (Exit toolbar button)