HTML5 component - drag and drop canvas

We're looking for a freelance web designer/developer w. strong HTML 5 skills to become part of our virtual team. The first task is to develop a HTML5 based UI component for creating and editing simple processes. All backend code will be developed by gluu. This "blackbox" solution should scale when more diagram visualization options is required. We require a visual presentation similar to a table where the user can add/edit/delete/drag and drop activity boxes to new predefined locations (similar to fields in a table). When switching to presentation mode, then arrows will link the different activity boxes sequentially. (See the attached spec). The component should be build around Ember.JS or using the principles of MVVM architecture in the needed javascript for this blackbox functionality. This allows us to easily integrate a REST API with this UI component. We have been advised that a good strategy may be to split this into separate components: It is suggested that one component (widget) with three sub-components (roleEdit, activityEdit, diagram) be implemented. The activityEdit and diagram sub-components have the same size. but are on different layers. The diagram size is the component's size. The componet would expose APIs such as addRole, addActivity, previewDiagram as well as event APIs. The buttons (addRole etc) and associated dialog boxes will not be included into the component. This is a common practice with its advangates. For example, a spreadsheet component will not have its add/delete/update buttons and dialog boxes. The integrator will implement the buttons and dialog boxes to accept user inputs and call the component's related APIs. Stylesheet should be built so that colors and fonts can change easily. Please write a few lines on how you would implement - and feel free to suggest small improvements in the user experience that you could do.