HTML5-based Topology Diagram editor (2)

continue to the needs of the editor,Frontintroduced 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 to create a node

Add more configurable options (you can set node types, styles, and properties) before continuing with the functionality provided, and support holding down the shift shortcut and dragging directly into the group

Added multiple interactive modes to create line interactions

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;

Adjust the width and height

Improved the Q.resizeinteraction

Mobile inflection point

Added inflection point editor (q.pointsinteraction), default edit state, double-click Polygon to enter edit mode

Right-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 store online sample demonstration http://demo.qunee.com/editor/Editor1.6.html

HTML5-based Topology Diagram editor (2)