ibm_ilog.diagram.widget
Method Summary
- DataConnector() The Data Connector class encapsulates the relationship between data stores, nodes and links.
- Diagram() Activates or deactivates the link layout specified by setLinkLayout().
- DivViewport() This is a Viewport class based on an HTML <div> which overflows with scrollbars.
- GfxViewport() This is a Viewport class based on an HTML <div> which overflows with scrollbars.
- HudComponent(viewport) Superclass for Viewport overlaid components.
- OverviewHudComponent(viewport, content, renderer, size) A Viewport component holding an overview.
- ScrollbarHudComponent(viewport, horizontal)
- ScrollbarInteractor()
- Viewport() A viewport window to a rectangular area of the diagram that is drawn on the browser. The drawn area is usually controlled by two scrollbars, horizontal and vertical.
- ZoomHudComponent(viewport) A viewport component that displays the current zoom factor.
Attached Objects
Methods
Based on information provided through setters, the Data Connector reads in information from one or two data stores, then builds a model of the relationship between the items. When the model is complete, the Data Connector creates Subgraphs, Nodes and Links as appropriate.
There may be up to two stores involved. - A nodesStore whose items represent subgraphs or nodes. - A linksStore whose items describe the relationship between nodeStore items. Both stores must, at least, support both dojo.data.api.Read and dojo.data.api.Identity data store features, as defined at http://docs.dojocampus.org/dojo/data
The basic flow is as follows: 1.Based on the nodesStore query and queryOptions provided, load all matching items into the model. 2.If defined, load in items from the linksStore. Each item will then be examined for attributes "start" and "end". The values of these attributes are the identities of items in the nodesStore. This inter-item relationship information is added to the model. If any the items referred to has not already been loaded from the nodesStore it is done so now. 3.Based on any to/from relationship functions or fields defined, add inter-item relationship information to the model.If any the items referred to has not already been loaded from the nodesStore it is done so now. Repeat step 3 until all items that have been loaded have had there inter-item relationships resolved. 4.Now the model is fully populated, any final information needed can be deduced directly from the model. 5.Based on information in the model, and options provided to the class instance, Subgraphs Nodes and links are created.
unit test:
The associated unit testcase is ibm_diagram/tests/widget/DataConnector.html
The purpose of the Dojo Diagrammer component is to display graphs (or diagrams) (that is, graphical representations consisting of nodes connected by links) in a Web browser page. The Dojo Diagrammer component is fully implemented in JavaScript and is based on the Dojo Toolkit. Dojo Diagrammer uses DojoX GFX to render the diagram.
The Diagram widget is the Dijit widget that is commonly used as an entry point to Dojo Diagrammer, and provides the following main features:
- Data store connection The Diagram widget can load a Dojo data store that implements the dojo.data.api.Read interface. For this, the data store must be set as the 'nodesStore' attribute of the Diagram. Each item of the data store will typically be displayed as a node in the graph. The appearance of the nodes is defined by a template, specified using the 'nodeTemplate' attribute (or the nodeTemplateFunction to define different templates according to each item). The Diagram widget will also create links to represent the relationships between nodes. These relationships must be defined by specifying one or several of the following attributes: childBinding, parentBinding, successorsBinding, predecessorsBinding. For example, if successorsBinding attribute is set to "nextItems", the value if the "nextItems" property of the data items is expected to be an array of identifiers that define the set of items to which the current item should be connected by links.
- Viewport (scrolling and zooming) If the diagram is larger than the client area of the Diagram, it can be scrolled using the scrollbars or using the mouse (the default interaction for panning is Shift-drag). The diagram can also be zoomed or unzoomed (the default interaction is Control-mouse wheel). Alternately, all viewport actions can be done by code through the viewport object, accessible by the getViewport() method.
- Selection Nodes and links in the diagram can be selected. The set of selected objects can be accessed and modified through the selection object accessible by the getSelection() method. The appearance of selected objects can be customized through their template.
- Event handling The Diagram handles mouse and keyboard events through objects called "interactors". Examples of interactors are the SelectionInteractor, the PanInteractor, the ZoomInteractor, etc. The predefined interactors can be enabled or disabled using attributes of the Diagram widget: 'select', 'zoom', 'pan', etc. In addition, the Diagram widget provides events to easily connect to mouse or key events on all the nodes or links of the diagram: onNodeClick, onNodeMouseDown, onLinkClick, etc.
- Accessibility The Diagram widget provides accessibility services: the diagram can be described by a screen reader, and the user can navigate through the nodes and links using the keyboard.
- Touch-enablement and mobile support The Diagram widget reacts to touch events on mobile platforms (or other touch-enabled devices): single touch-and-scroll pans the diagram, two-fingers pinch zooms the diagram. Dojo Diagrammer can be used with dojox.mobile. In addition, to optimize download size, some features are disabled on mobile: key events, focus adorners, accessibility, etc. You can explicitly disable these features by setting the 'diagramForMobile' flag to true in djConfig/dojoConfig. If diagramForMobile is not defined, the Diagram widget tries to auto-detect some well-known mobile user agents. Note that diagramForMobile is also set to true if the dojox.mobile module is loaded before the Diagram widget is loaded. You can set diagramForMobile to false explicitly to enable all features even on mobiles.
- Graph (class ibm_ilog.diagram.Graph): A subclass of dojox.gfx.Group that contains nodes and links.
- Node (class ibm_ilog.diagram.Node): Represents a node in a Graph, the contents of a Node are defined by a template.
- Link (class ibm_ilog.diagram.Link): Represents a link between two nodes.
- Subgraph (ibm_ilog.diagram.Subgraph): Represents a Node that contains a nested Graph.
DivViewport depends on a div declared at Diagram.html with attachPoint=scrollbarsNode. This div encloses the diagram Surface.
The diagram Surface is extended to enclose the whole diagram tightly. The div is constrained to the desired client size using its width and height properties. The view rectangle is then associated with the div scroll positions, scrollTop and scrollLeft. Setting the view rectangle then updates scrollTop and scrollLeft.
The zoom level is derived from the view rectangle, but is mapped entirely different than its position. Instead, the zoom controls a scale transformation of the entire Diagram. If the view rectangle is small, the Diagram is zoomed in to fit the requested portion into the viewport window. With this also the Surface is scaled, as it is required that the entire Graph fits the surface exactly so that the scrollTop/scrollLeft properties work.
note: the zooming service required from the Diagram object should be at a UI level and should not affect, for example, the bouding box of the the Graph objects. One option is to define an intermediate node between the Surface root and the Graph node, which controls this transformation.
DivViewport depends on a div declared at Diagram.html with attachPoint=scrollbarsNode. This div encloses the diagram Surface.
The diagram Surface is extended to enclose the whole diagram tightly. The div is constrained to the desired client size using its width and height properties. The view rectangle is then associated with the div scroll positions, scrollTop and scrollLeft. Setting the view rectangle then updates scrollTop and scrollLeft.
The zoom level is derived from the view rectangle, but is mapped entirely different than its position. Instead, the zoom controls a scale transformation of the entire Diagram. If the view rectangle is small, the Diagram is zoomed in to fit the requested portion into the viewport window. With this also the Surface is scaled, as it is required that the entire Graph fits the surface exactly so that the scrollTop/scrollLeft properties work.
note: the zooming service required from the Diagram object should be at a UI level and should not affect, for example, the bouding box of the the Graph objects. One option is to define an intermediate node between the Surface root and the Graph node, which controls this transformation.
Parameter | Type | Description |
---|---|---|
viewport | ||
content | ||
renderer | ||
size |
The Viewport class is an abstract class that provides basic infrastructure over which to construct concrete Diagram viewports.
A Viewport object is a collaborator of the Diagram widget that abstracts this notion of viewport. The Diagram widget can then deal with the the viewport independently of how it is actually implemented.
The main responsibility of the viewport object is to control the current viewable rectangle of the Diagram and report updates to it.
The following concept definitions help understand the Viewport API:
Content Rectangle The area inside which the viewport can move, mostly based on the content bounding box.
View Rectangle The rectangular portion of the content that is currently visible in the viewport.
Client Size The size of the UI space that allows the contents to be viewed.
authors: AV