Node connection tool

A tool to quickly create HTML/CSS markup for connecting nodes (ie text blocks). When finished, a user will be able to position and connect nodes as desired within the main view. Then they can access the HTML/CSS produced which will be able to be inserted directly into a HTML document without further editing.

This tool is currently unfinished. It allows the user to add nodes and will connect any two nodes.
There are a bunch of obvious updates/functions/features that are still required.
Current list is:

  • Add re-dimensioning to drag and drop event for when connected nodes are moved
  • Fix the bug where node selection controls are refreshing after nodes are connected
  • Node heading should show node id and heading name rather than just the text ‘Name:’
  • Nodes should allow inner text to be added in the ‘name’ box and in the node body
  • A ‘remove node’ control is required
  • Selection controls are required so attribute selection can be loaded with a double click and multiple nodes can be selected within a group
  • More styling options should be available to node groups and individual nodes
  • HTML, CSS should be outputed in window further down the page so it is quick and easy to copy that to where it is required. It would also be good to be able to load or edit that markup directly
  • Disconnect and group controls are still not functioning
  • Connections currently do not handle node connections when the edges are under the body of the connecting node
Node control
Connections
Attribute Settings
Dimensions
Width:  Height: 
Position
Left:  Top: 
CSS & HTML: