javascript - termometro - Guarde y cargue el diagrama de flujo jsPlumb, incluidos los anclajes exactos y las conexiones

graficos estadisticos en javascript

Question

Este es el jsFiddle del editor de diagramas de flujo que estoy construyendo.

Este es un ejemplo de lo que se puede crear fácilmente con "Agregar decisión" + "Agregar tarea", conectando y moviendo los elementos.

Ahora, para la parte difícil: quiero poder guardar y cargar el diagrama de flujo exacto. Para esto comencé a trabajar con un hilo similar aquí en Stackoverflow.

Para esto, agregué los botones "Guardar" y "Cargar" que exportan / importan el diagrama de flujo a / desde JSON (que se muestra en una forma de texto en el archivo jsFiddle después de guardar - la misma forma de texto se puede usar para cargar).

La función de guardar :

function saveFlowchart(){
var nodes = []
$(".node").each(function (idx, elem) {
var $elem = $(elem);
var endpoints = jsPlumb.getEndpoints($elem.attr(''id''));
console.log(''endpoints of ''+$elem.attr(''id''));
console.log(endpoints);
nodes.push({
blockId: $elem.attr(''id''),
nodetype: $elem.attr(''data-nodetype''),
positionX: parseInt($elem.css("left"), 10),
positionY: parseInt($elem.css("top"), 10)
});
});
var connections = [];
$.each(jsPlumb.getConnections(), function (idx, connection) {
connections.push({
connectionId: connection.id,
pageSourceId: connection.sourceId,
pageTargetId: connection.targetId
});
});
var flowChart = {};
flowChart.nodes = nodes;
flowChart.connections = connections;
flowChart.numberOfElements = numberOfElements;
var flowChartJson = JSON.stringify(flowChart);
//console.log(flowChartJson);
$(''#jsonOutput'').val(flowChartJson);
}

El JSON resultante del ejemplo anterior:

{"nodos": [{"blockId": "startpoint", "nodetype": "startpoint", "positionX": 273, "positionY": 8}, {"blockId": "endpoint", "nodetype": " punto final "," positionX ": 310," positionY ": 385}, {" blockId ":" taskcontainer1 "," nodetype ":" task "," positionX ": 381," positionY ": 208}, {" blockId " : "decisioncontainer2", "nodetype": "decision", "positionX": 261, "positionY": 103}], "connections": [{"connectionId": "con_18", "pageSourceId": "decisioncontainer2", " pageTargetId ":" taskcontainer1 "}, {" connectionId ":" con_25 "," pageSourceId ":" taskcontainer1 "," pageTargetId ":" endpoint "}, {" connectionId ":" con_32 "," pageSourceId ":" decisioncontainer2 " , "pageTargetId": "endpoint"}, {"connectionId": "con_46", "pageSourceId": "startpoint", "pageTargetId": "decisioncontainer2"}], "numberOfElements": 2}

Con eso puedo guardar la posición de los elementos, así como parte de la información de las conexiones. Aquí la función de carga :

function loadFlowchart(){
var flowChartJson = $(''#jsonOutput'').val();
var flowChart = JSON.parse(flowChartJson);
var nodes = flowChart.nodes;
$.each(nodes, function( index, elem ) {
if(elem.nodetype === ''startpoint''){
repositionElement(''startpoint'', elem.positionX, elem.positionY);
}else if(elem.nodetype === ''endpoint''){
repositionElement(''endpoint'', elem.positionX, elem.positionY);
}else if(elem.nodetype === ''task''){
var id = addTask(elem.blockId);
repositionElement(id, elem.positionX, elem.positionY);
}else if(elem.nodetype === ''decision''){
var id = addDecision(elem.blockId);
repositionElement(id, elem.positionX, elem.positionY);
}else{
}
});
var connections = flowChart.connections;
$.each(connections, function( index, elem ) {
var connection1 = jsPlumb.connect({
source: elem.pageSourceId,
target: elem.pageTargetId,
anchors: ["BottomCenter", [0.75, 0, 0, -1]]
});
});
numberOfElements = flowChart.numberOfElements;
}

Sin embargo, la posición exacta de los anclajes y conexiones se pierden. El mismo ejemplo de nuevo, el resultado después de eliminar los elementos y luego cargar el JSON exportado:

Esto no es una gran sorpresa ya que aún no he almacenado la información. Pero estoy atascado en este punto.

Mi pregunta es: ¿ qué información sobre la posición de los anclajes / conectores necesito guardar para todo el diseño del diagrama de flujo y cómo puedo extraerlo (y cargarlo de nuevo) jsPlumb?

Answer 1

Ver este JSFiddle para una solución.

Debe guardar los detalles del ancla de la siguiente manera. Esto se ajusta a la representación de anclaje definida here . Tenga en cuenta el anidamiento doble para evitar que JQuery se aplane automáticamente en el mapa.

 $.each(jsPlumb.getConnections(), function (idx, connection) {
connections.push({
connectionId: connection.id,
pageSourceId: connection.sourceId,
pageTargetId: connection.targetId,
anchors: $.map(connection.endpoints, function(endpoint) {
return [[endpoint.anchor.x,
endpoint.anchor.y,
endpoint.anchor.orientation[0],
endpoint.anchor.orientation[1],
endpoint.anchor.offsets[0],
endpoint.anchor.offsets[1]]];
})
});
});

... y cargarlos, como sigue:

 $.each(connections, function( index, elem ) {
var connection1 = jsPlumb.connect({
source: elem.pageSourceId,
target: elem.pageTargetId,
anchors: elem.anchors
});
});

Tenga en cuenta que esta solución no conserva los detalles del punto final, incluida la forma y el tipo de punto final. Solo conserva los detalles del ancla, según lo solicite.