seimin
/
itsm-pc-handle


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<html>
<head>
  <title>bpmn-js modeler demo</title>

  <link rel="stylesheet" href="css/diagram-js.css" />
  <link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
  <link rel="stylesheet" href="css/app.css" />
</head>
<body>
  <div class="content" id="js-drop-zone">

    <div class="message intro">
      <div class="note">
        Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
      </div>
    </div>

    <div class="message error">
      <div class="note">
        <p>Ooops, we could not display the BPMN 2.0 diagram.</p>

        <div class="details">
          <span>cause of the problem</span>
          <pre></pre>
        </div>
      </div>
    </div>

    <div class="canvas" id="js-canvas"></div>
    <div id="js-properties-panel"></div>
  </div>

  <ul class="buttons">
    <li>
      download
    </li>
    <li>
      <a id="js-download-diagram" href title="download BPMN diagram">
        BPMN diagram
      </a>
    </li>
    <li>
      <a id="js-download-svg" href title="download as SVG image">
        SVG image
      </a>
    </li>
  </ul>
  
  <script src="index.js"></script>
  <script>
    var bpmnJS = new BpmnJS({
      container:$('#js-drop-zone'),
      canvas:$('#js-canvas'),
      propertiesPanel: $('#js-properties-panel')
    });
    //var container = $('#js-drop-zone');
    // function openDiagram(xml) {

    //   renderer.importXML(xml, function(err) {

    //     if (err) {
    //       container
    //         .removeClass('with-diagram')
    //         .addClass('with-error');

    //       container.find('.error pre').text(err.message);

    //       console.error(err);
    //     } else {
    //       container
    //         .removeClass('with-error')
    //         .addClass('with-diagram');
    //     }
    //   });
    // }
    // function createNewDiagram() {
    //   openDiagram(newDiagramXML);
    // }
    $('#js-create-diagram').click(function(e) {
      e.stopPropagation();
      e.preventDefault();
      bpmnJS.createNewDiagram();
    });

    function setEncoded(link, name, data) {
      var encodedData = encodeURIComponent(data);

      if (data) {
        link.addClass('active').attr({
          'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
          'download': name
        });
      } else {
        link.removeClass('active');
      }
    }

    $('#js-download-diagram').click(function(e) {
      e.stopPropagation();
      e.preventDefault();

      bpmnJS.saveDiagram(function(err, xml) {
        setEncoded($('#js-download-diagram'), 'diagram.bpmn', err ? null : xml);
      });
    })

    if (!window.FileList || !window.FileReader) {
      window.alert(
        'Looks like you use an older browser that does not support drag and drop. ' +
        'Try using Chrome, Firefox or the Internet Explorer > 10.');
    } else {
      bpmnJS.registerFileDrop($('#js-drop-zone'), bpmnJS.openDiagram);
    }


  </script>
</html>