HTML5-based Topology Diagram editor (2)

Continue to the requirements of the editor, the previous introduction of the drag-and-drop creation node, and the method of connection, and added to the following Qunee class library, the actual application needs more functions, Qunee topology Diagram editor is also gradually improved, on the one hand to add a variety of editing interaction, on the one hand to provide data import and export, I'm also groping for the overall interface design and front-end development framework of the editor.Drag-and-drop to create the functionality provided before the node continuation, add more configurable options (you can set node types, styles, and properties), support holding down the shift shortcut, and drag directly into the groupAdded multiple interactive modesCreate a wired interaction

Q.consts.interaction_mode_create_simple_edge = "Create.simple.edge"; Q.consts.interaction_mode_create_edge = "Create.edge"; Q.consts.interaction_mode_create_shape = "Create.shape"; Q.consts.interaction_mode_create_line = "Create.line";

You can drag and drop directly from one node to another node, or you can create a connection to the middle inflection point

Graph.interactionmode = Q.consts.interaction_mode_create_edge;

Wired edit Normal mode, set graph to editable, click Editable entity to enter edit mode

graph.editable = True;graph.interactionmode = Q.consts.interaction_mode_default;

Creating polygons

Graph.interactionmode = Q.consts.interaction_mode_create_shape;

Create multi-segment

Graph.interactionmode = Q.consts.interaction_mode_create_line;

Edit Polygon

graph.editable = True;graph.interactionmode = Q.consts.interaction_mode_default;

Adjusting the width and height improves the q.resizeinteractionMove inflection point added inflection point edit q.pointsinteraction, default edit state, double-click Polygon to enter edit modeRight-click menu interaction through the right-click menu (the Mobile platform can select Long Press), clicking on different types of entities, pop up different settings menu items

Graph.html.oncontextmenu = function (evt) {    q.stopevent (evt);    ShowMenu (evt, graph);} Graph.addcustominteraction ({    onstart:function (evt) {        menu.hide ();    }});

Data import and export through extension, implement Exportjson and Parsejson method, realize the import and export of topology diagram, easy to storeOnline Sample Demo http://demo.qunee.com/editor/Editor1.6.html

HTML5-based Topology Diagram editor (2)