Add feature to existing HTML5 based simple flow tool - project for Muhamed

We have an html5 based page graphic tool that can read a json file and format some components per our requirements (See [login to view URL]) We need to add the following features: (1) ability to add additional components can. (See [login to view URL]). In this image you should notice that 3 new components were added (i.e. Context C1, Context C2, and Outcome C). When we add a component, we should be asked for label of the component, right where the component is added. (See [login to view URL]) (2) In the previous image, notice also that OutcomeC is currently hovered and is why it showing the 4 connection points. This feature needs to be added, that is that when a component or line is hovered, connection points appear. (3) ability to connect components and create Event connection (notice orange boxes). This should be done by first, by hovering over a component (see [login to view URL]). Notice how hovered component shows 4 connection points. When one of the connection points is dragged and dropped on a separate component, for example Outcome C, an event connection box will be added connecting the components. (See [login to view URL]). When we add a connection, we need to be able to enter the label of the connection (see [login to view URL]) We should be able to add connections between components as needed. (See [login to view URL]) (4) We should be able to move a connection from one connection to another. First we should be able to highlight a connection by hovering (see [login to view URL]) Notice the two end points show up. We can then take the end point and move it to another point. (See [login to view URL]) (5) Notice how a connection that no longer had any connections to it automatically disappeared. (See [login to view URL]) (6) All the above, must be updated in the JSON that is kept in memory.

CSS HTML5 JavaScript jQuery/プロトタイプ JSON

プロジェクトID: #15902074

プロジェクトについて