相关疑难解决方法(0)

这是我正在构建的流程图编辑器的jsFiddle.

这是使用"添加决策"+"添加任务",连接和移动元素可以轻松创建的示例.

现在是困难的部分:我希望能够保存并加载确切的流程图.为此,我开始在Stackoverflow 上使用类似的线程.

为此,我添加了"保存"和"加载"按钮,用于将流程图导出/导入JSON(在保存后显示在jsFiddle中的textform中 - 相同的textform可用于加载).

该保存功能:

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; …