UI Workflow Editor with the Web Audio API
This sample demonstrates a UI workflow style editor built on top of the
Web Audio API
that gives a user the ability to design and edit processes with this API without writing any code.
Each GoJS node represents a Web Audio AudioNode and each Link represents a call to AudioNode.connect().
Drag various node types from the Palette and link them using the LinkingTool to edit the audio graph.
Click on a Link and drag its ends to invoke the RelinkingTool and relink existing links.
A Model ChangedEvent listener listens for single nodes being added from the palette and then automatically interlinks
them if their ports are placed over the middle of an existing link.
Connect either a sample Node or oscillator Nodes to an output Node and press the play button to hear results. Each node can by bypassed with a toggle button on their top right and collapsed by pressing their glyph on the top left. Press Ctrl-G to invoke CommandHandler.groupSelection to create a Group of selected nodes, which can then be bypassed and collapsed together. Press the bounce audio "Bounce to WAV" button to bounce an audio file with the processing applied.
The Diagram.model is the single source of truth for the Diagram and audio patch. A function called by a listener for structural model changes walks through the model and builds a matching Web Audio graph. Sliders on each node control parameters and live-update them to make changes while audio is playing. Parameters can also be manually changed by an override to the TextEditingTool. This model is stored and loaded from JSON displayed below the diagram.
This sample is meant as a starting point to add custom nodes and properties via a common node-type object and a function to add such nodes to a Diagram.nodeTemplateMap. It demonstrates how GoJS can be used to visualize workflows and create diagrams that are editable, data-bound, and provide a JSON serializable model usable as a source of truth for other API.
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.
Ports in Nodes
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 learn pages.
Links
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 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.