Bagan with Extended js-sequence-diagrams | Chetabahana Project

Skema Bagan using Extended SVG sequence diagrams from representation | Chetabahana Project - A Way To Win The Market | GitHub Page

by Chetabahana

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js"></script>
<script src="https://chetabahana.github.io/skema/js/webfont.js"></script>
<script src="https://chetabahana.github.io/skema/js/snap.svg-min.js"></script>
<script src="https://chetabahana.github.io/skema/js/underscore-min.js"></script>
<script src="https://chetabahana.github.io/skema/js/svginnerhtml.min.js"></script>
<link rel="stylesheet" href="https://chetabahana.github.io/skema/css/sequence-diagram-min.css">
<script src="https://chetabahana.github.io/skema/js/sequence-diagram-snap-min.js"></script>
<div id="chetabahana-skema">
<div>
Status: 
<select class="theme">
<option value="hand" selected>Hand</option>
<option value="simple">Typed</option>
<option value="printed">Printed</option>
</select>									   
</div>

<div>
<div class="diagram"></div>
</div>

<div class="editor-wrapper">
<div class="editor">Title: Bagan Eksekusi
Buka Toko-->Stok Barang: Optimasi
Stok Barang->Google Merchant Center: Google-Content-API
Google Merchant Center->Peluang Terbaik: Google-AdWords-API
Peluang Terbaik->>Portfolio: Google-Site-API
Portfolio-->>Publikasi: Shop SEO
Portfolio->>Stok Barang: Google-AppEngine                       </div>
</div>
<a href="#" class="download">download</a><br>
</div>

JavaScript

$(document).ready(function() {
	// Setup the editor
	setup_editor($('#chetabahana-skema'));
});

// Setup the editor diagram
function setup_editor(div) {
	
	var editor_div = div.find(".editor");
	var diagram_div = div.find(".diagram");
	var theme_div = div.find(".theme");
	var download_link = div.find('.download');
	
	//editor_div.replace(/\t/g, '');
	var editor = ace.edit(editor_div.get(0));
	editor.setTheme("ace/theme/crimson_editor");
	editor.getSession().setMode("ace/mode/asciidoc");
	editor.getSession().on('change', _.debounce(on_change, 100));

	function on_change() {
  	var val = theme_div.val();
    
    if (val != 'printed') {
    
    	trydrawSVG(val);
      
		} else {
    
    	var svgobj = diagram_div.find('svg')[0].children;
    
			for (i = 0; i < svgobj.length; i++) {
      	element = svgobj[i];
				element.style = "cursor: pointer;";
      	$(element).click(function(evt){console.log($(this))});
			}   
    
    
  		
   	}    
  }

	function trydrawSVG(val) {
		try {
      var diagram = Diagram.parse(editor.getValue());

      editor.getSession().setAnnotations([]);

      // Clear out old diagram
      diagram_div.html('');

      var options = {
        theme: val,
        'font-size': 12,
      };

      // Draw
      diagram.drawSVG(diagram_div.get(0), options);

	  }catch(err) {
      var annotation = {
        type: "error", // also warning and information
        column: 0,
        row: 0,
        text: err.message
      };
      if (err instanceof Diagram.ParseError) {
        annotation.row    = err.loc.first_line - 1;
        annotation.column = err.loc.first_column;
      }
      editor.getSession().setAnnotations([annotation]);
      throw err;
	  }
	}
  
	// setup download link
	download_link.click(function(ev) {
	  var svg = diagram_div.find('svg')[0];
	  var width = parseInt(svg.width.baseVal.value);
	  var height = parseInt(svg.height.baseVal.value);
	  var data = editor.getValue();
	  var xml = '<?xml version="1.0"...