8. Network diagram

Demonstrates a canvas with boxes and lines between them

• Copy boxes from top row by dragging by left mouse button. Move boxes in the canvas by left mouse button.
• Resize resizable boxes by dragging box edge by left mouse button. Create resizable box by dragging on empty space.
• Delete boxes by ctrl + click or from popup menu.
• Change the box text by double click or from popup menu.
• Create standard dependency by dragging from source box to destination box by right mouse button.
• Create different shape dependency by dragging from source box to destination box by ctrl + right mouse button.
• Delete dependency by ctrl + click to the dependency line or from popup menu.
• If one box edge has more lines, they get different colors to be more highlighted, it is set by XML attribute GanttAssignDependencies.
• Permitted only one line per two same box edges, can be changed by XML attribute GanttDragDependenciesMore.
• The canvas size is in this example relativelly fixed, but this behavior can be changed in many ways.
• The top row with boxes can be placed also to another grid to not be scrolled with the canvas.
• All mouse and key controls, behavior and features can be easily changed in XML configuration or by dynamically by JavaScript API.