Business Process Model and Notation (BPMN) Editor
This sample demonstrates a BPMN (Business Process Model and Notation) diagram editor that uses resizable swimlane Groups (see Swim Lanes) within pool Groups. Pools can be snapped to dynamic grid-like layout on demand via a custom Layout that organizes them in reading order and snaps them to the nearby non-conflicting cells relative to the first one. Lanes are laid out in the pools with another custom Layout that also ensures their size and BPMN Nodes in the lanes are laid out with the Swim Lane Compact Layout extension. It also features expandable Sub-Process Group nodes that arrange their member Nodes with their own LayeredDigraphLayout to integrate smaller processes into the larger layout flow. Nodes stay within their lane via a custom Part.dragComputation.
It also uses a custom LinkingTool class that chooses one of three different LinkTemplates depending on the nodes the user linked based on standard BPMN specifications (sequence flow within the same pool, message flow between pools, associations from artifacts). This tool also has a predicate LinkingBaseTool.linkValidation function that prevents disallowed BPMN sequence flow (only flow objects, no flow out of end events, no flow into boundary or start events) and message flow links (message eligible objects only). A Link Label on the temporary link shows which type of flow is being drawn.
The sample features an accordion of Palettes that each contain different types of BPMN element Nodes. New pools can also be dragged from the Palette, and new lanes can be right clicking a pool and using the GraphObject.contextMenu. Users can layout Nodes within a single pool by using this context menu as well or layout the whole Diagram via either the Diagram.contextMenu or the HTML button below. The model can be saved and loaded from a JSON text area.
GoJS Features in this sample
Palette
A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.
More information can be found in the GoJS learn pages.
Groups
The Group class is used to treat a collection of Nodes and Links as if they were a single Node. Those nodes and links are members of the group; together they constitute a subgraph.
A subgraph is not another Diagram, so there is no separate HTML div element for the subgraph of a group. All of the Parts that are members of a Group belong to the same Diagram as the Group. There can be links between member nodes and nodes outside of the group as well as links between the group itself and other nodes. There can even be links between member nodes and the containing group itself.
More information can be found in the GoJS learn pages.
Table Panels
The "Table" Panel, Panel.Table, arranges objects in rows and columns. Each object in a Table Panel is put into the cell indexed by the value of GraphObject.row and GraphObject.column. The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have. More information can be found in the GoJS learn pages.
Custom Layouts
GoJS allows for the creation of custom layouts to meet specific needs.
There are also many layouts that are extensions -- not predefined in the
go.js or go-debug.js library, but available as source code in
one of the three extension directories, with some documentation and corresponding
samples. More information can be found in the
GoJS learn pages.
Tools
Tools handle all input events, such as mouse and keyboard interactions, in a Diagram. There are many kinds of predefined Tool classes that implement all of the common operations that users do.
For flexibility and simplicity, all input events are canonicalized as InputEvents and redirected by the diagram to go to the Diagram.currentTool. By default the Diagram.currentTool is an instance of ToolManager held as the Diagram.toolManager. The ToolManager implements support for all mode-less tools. The ToolManager is responsible for finding another tool that is ready to run and then making it the new current tool. This causes the new tool to process all of the input events (mouse, keyboard, and touch) until the tool decides that it is finished, at which time the diagram's current tool reverts back to the Diagram.defaultTool, which is normally the ToolManager, again.
More information can be found in the GoJS learn pages.
Extensions
GoJS can be extended in a variety of ways. The most common way to change the standard behavior is to set properties on the GraphObject, Diagram, CommandHandler, Tool, or Layout. But when the desired property does not exist, you might need to override methods of CommandHandler, Tool, Layout, Link, or Node. Methods that you can override are documented in the API reference. Various features of GoJS can be overriden, either by replacing a method on an instance (a feature of JavaScript) or by defining a subclass. You should not modify the prototypes of any of the GoJS classes.
In addition to our samples, GoJS provides an
extensions gallery, showcasing the creation of custom tools and layouts. Those classes and samples are
written in TypeScript, available at ../extensionsJSM/, as
ECMAScript/JavaScript modules -- these use the
../release/go-module.js library. We recommend that you copy the files that
you need into your project, so that you can adjust how they refer to the GoJS library
that you choose and so that you can include them into your own building and packaging
procedures.
More information can be found in the GoJS learn pages.