title: Sebastien's jquery.flowchart how to manually add operator connector, renaming operator connector, saving
body: <p>I am using this jquery plugin by <code>Sebastien</code></p>
  
  <p><a href="https://github.com/sdrdis/jquery.flowchart" rel="nofollow noreferrer">https://github.com/sdrdis/jquery.flowchart</a></p>
  
  <p>It is an open source ui plugin that I can use to diagram the flow of the system i am developing. the problem is there are some tweaks that I would like to do but my knowledge on jquery is not sufficient enough to develop it on my own.</p>
  
  <p>here is what I have to do.</p>
  
  <ol>
  <li>how to edit the operation connector.</li>
  <li>manually renaming the connector.</li>
  <li>after all the method has been done. saving the flowchart.</li>
  </ol>
  
  <p>here is what i have so far.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
      &lt;div class="demo" id="example_8"&gt;&lt;/div&gt;
      &lt;button class="btn btn-primary" id="create_operator"&gt;Create A Start Operation&lt;/button&gt;
      &lt;button class="btn btn-danger" id="delete_selected_button"&gt;Delete Selected Operation&lt;/button&gt;
  
      &lt;div id="operator_properties"&gt;
          &lt;label for="operator_title"&gt;Operator's title: &lt;/label&gt;&lt;input type="text" id="operator_title"&gt;
          &lt;label for="operator_input"&gt;Input: &lt;input type="text" id="operator_input" /&gt;&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jquery</strong></p>
  
  <pre><code>$(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');
  });
  
  
  });
  </code></pre>