This GoJS diagram shows an interactive circuit schematic designer. The sample shown is an application circuit of a steam train sound with a whistle using the Texas Instruments SN76477 sound chip (see Wikipedia for more information). The chip was used primarily for arcade game sound effects, and it is shown here used with a 555 Timer and a speaker to create a steam train sound effect for circuit production.
This sample allows users to construct descriptive circuit schematics using integrated circuits with between 4 and 98 pins and a variety of standard circuit components of various types. Users can add customized integrated circuits with the menu below the diagram, group components using Group (double click to change colors), and mark ports that are unused. Users can also edit the text on the components to change their names or values. Developing new parts uses a reusable Diagram.nodeTemplate with text and one, or optionally two, geometries that takes data from a partType binding in the model data and constructs a part node. It has several optional bindings for further customization as well.
A Palette to the left of the diagram allows the user to drag and drop new circuit component nodes. Click and drag between the ports on each node to draw new links, and double click the nodes to rotate them (or right click them to use the GraphObject.contextMenu). The switch can also be opened by right clicking it. Selecting any of the nodes or individual pins on the integrated circuits will highlight links going into and out of that node's ports with the Node.findLinksConnected method.
The wire paths are created manually by either dragging between ports or clicking along the desired path with the PolylineLinkingTool.js extension. They can be reshaped and adjusted with LinkReshapingTool and the OrthogonalLinkReshapingTool.js extension. The paths are saved in the JSON model by saving the Link.points along each wire. Hover over any component to see a description with GraphObject.toolTip.
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 Intro.
The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.
One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.
More information can be found in the GoJS Intro.
The Link class is used to implement a visual relationship between nodes. Links are normally created by the presence of link data objects in the GraphLinksModel.linkDataArray or by a parent key reference as the value of the TreeModel.nodeParentKeyProperty of a node data object in a TreeModel. More information can be found in the GoJS Intro.
Specific elements of a Node at which links may connect are called ports. There may be any number of ports in a node. By default there is just one port, the whole node, which results in the effect of having the whole node act as the port. Port-like GraphObjects can only be in Nodes or Groups, not in Links or Adornments or simple Parts.
More information can be found in the GoJS Intro.
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 Intro.
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 Intro.