javascript - Sebastien 的 jquery.flowchart 如何手动添加运算符连接器、重命名运算符连接器、保存

Question

我正在使用 Sebastien 的这个 jquery 插件

https://github.com/sdrdis/jquery.flowchart

它是一个开源 ui 插件，我可以用它来绘制我正在开发的系统的流程。问题是我想做一些调整，但我对 jquery 的了解不足以自己开发它。

这是我必须做的。

1. 如何编辑操作连接器。
2. 手动重命名连接器。
3. 完成所有方法后。保存流程图。

这是我到目前为止所拥有的。

HTML

<div class="col-md-12">
    <div class="demo" id="example_8"></div>
    <button class="btn btn-primary" id="create_operator">Create A Start Operation</button>
    <button class="btn btn-danger" id="delete_selected_button">Delete Selected Operation</button>

    <div id="operator_properties">
        <label for="operator_title">Operator's title: </label><input type="text" id="operator_title">
        <label for="operator_input">Input: <input type="text" id="operator_input" /></label>
    </div>
</div>

jquery

$(document).ready(function () {
var data = {
    operators: {
        operator1: {
            top: 20,
            left: 20,
            properties: {
                title: 'Operator 1',
                inputs: {},
                outputs: {
                    output_1: {
                        label: 'Output 1',
                    }
                }
            }
        },
        operator2: {
            top: 80,
            left: 300,
            properties: {
                title: 'Operator 2',
                inputs: {
                    input_1: {
                        label: 'Input 1',
                    },
                    input_2: {
                        label: 'Input 2',
                    },
                },
                outputs: {}
            }
        },
    },
    links: {
        link_1: {
            fromOperator: 'operator1',
            fromConnector: 'output_1',
            toOperator: 'operator2',
            toConnector: 'input_2',
        },
    }
};

var $operatorProperties = $('#operator_properties');
var $linkProperties = $('#link_properties');
var $operatorTitle = $('#operator_title');
var $linkColor = $('#link_color');

// Apply the plugin on a standard, empty div...
var $flowchart = $('#example_8');
$flowchart.flowchart({
    data: data,
    onOperatorSelect: function (operatorId) {
        $operatorTitle.val($flowchart.flowchart('getOperatorTitle', operatorId));
        return true;
    },
    onOperatorUnselect: function () {
        $operatorProperties.hide();
        return true;
    }
});

$operatorTitle.keyup(function () {
    var selectedOperatorId = $flowchart.flowchart('getSelectedOperatorId');
    if (selectedOperatorId != null) {
        $flowchart.flowchart('setOperatorTitle', selectedOperatorId, $operatorTitle.val());
    }
});

var operatorI = 0;
$flowchart.siblings('#create_operator').click(function () {
    var operatorId = 'created_operator_' + operatorI;
    var operatorData = {
        top: 60,
        left: 500,
        properties: {
            title: 'Operator ' + (operatorI + 3),
            inputs: {
                input_1: {
                    label: 'Input 1',
                }
            },
            outputs: {
                output_1: {
                    label: 'Output 1',
                }
            }
        }
    };

    $operatorProperties.show();

    operatorI++;

    $flowchart.flowchart('createOperator', operatorId, operatorData);
});

$flowchart.siblings('#delete_selected_button').click(function () {
    $flowchart.flowchart('deleteSelected');
});


});

Answer 1

我的解决方案是:

function create(nname, inC, outC) {
                var inp = '';
                var outp = '';
                if (inC < 0) {
                    inp = '"ins":{"label":"Input (:i)","multiple":true}';
                } else if (inC > 0) {
                    for (i = 0; i < inC; i++) {
                        inp += '"input_' + i + '":{"label":"Input (:i)"}';
                        if ((inC - 1) > i)
                            inp += ',';
                    }
                }
                if (outC < 0) {
                    outp = '"outs":{"label":"Output (:i)","multiple":true}';
                } else if (outC > 0) {
                    for (i = 0; i < outC; i++) {
                        outp += '"output_' + i + '":{"label":"Output (:i)"}';
                        if ((outC - 1) > i)
                            outp += ',';
                    }
                }
                var operatorId = 'nname' + operatorI;
                var operatorData = '{"top":200,"left":200,"properties":{"title":"'+nname+'","inputs":{' + inp + '},"outputs":{' + outp + '}}}';

                operatorI++;

                $flowchart.flowchart('createOperator', operatorId, JSON.parse(operatorData));
            }