CocoRoboLabs
/
CocoRoboDesktop


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
							<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>课程框架设计工具</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="Gang Tao">

  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="./css/bootstrap-treeview.min.css" />
  <link rel="stylesheet" type="text/css" href="./css/jsplumb.css" />

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

  <style type="text/css">

    html,

    body {

      /* padding-top: 60px;

          padding-bottom: 40px; */

      float: center;

      width: 100%;

      height: 99%;

    }


    .btn.active.focus,

    .btn.active:focus,

    .btn.focus,

    .btn:active.focus,

    .btn:active:focus,

    .btn:focus {

      outline: none;

    }


    .button {

      outline: none;

    }

  </style>
</head>

<body onselectstart = "return false" style="-moz-user-select : none">
  <div class="flow-fluid" style="height: 100%;">
    <div class="row" style="margin-top: 10px;margin-left: 0;margin-right: 0;">
      <button class="btn btn-primary button" style="margin-left:140px;" data-toggle="modal"

        data-target="#Modal">+</button>
    </div>
    <div class="row" style="margin: 0;height: 80%;">
      <!-- <div class="col-md-2">

          <div class="panel panel-default" style="margin:2px;height:400px">

            <div class="panel-body">

              <div id="control-panel">

              </div>

            </div>

          </div>

        </div> -->
      <div class="col-md-12" style="height:100%">
        <div class="panel1 panel-default" style="margin:0px;height:100%">
          <div class="panel-body" style="padding: 0;">
            <div id="flow-panel" class='col-md-12' style="height:100%">
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="col-md-4">

          <div class="panel panel-default" style="margin:2px;height:400px">

            <div class="panel-body">

              Data Preview

            </div>

          </div>

        </div> -->
    </div>
  </div>

  <!-- 添加节点类别模态框（Modal） -->
  <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true"

    data-backdrop="static">
    <div class="modal-dialog" style="z-index: 1060;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="ModalLabel">添加节点类别</h4>
        </div>
        <div class="modal-body">
          <form role="form" id="bbb" onsubmit="return false">
            <!-- <div class="form-group">

              <input type="text" id="columns" class="form-control" placeholder="请输入第几列">


            </div> -->

            <div class="form-group">
              <label style="vertical-align: middle;display:inline-block;width: 100%;">1
                <input type="text" id="types1" class="form-control" placeholder="请输入节点类别名字"

                  style="width: 92%;display:inline-block;" onkeydown="addTypeInput()">
              </label>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="SubmitType">添加</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>

  <!-- 添加节点模态框（Modal） -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"

    data-backdrop="static">
    <div class="modal-dialog" style="z-index: 1060;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">添加节点</h4>
        </div>
        <div class="modal-body">
          <div>
            <input type="text" id="column" class="form-control" placeholder="请输入第几列" style="display:none" />
          </div>
          <form role="form" id="aaa" onsubmit="return false">
            <!-- <div class="row" style="margin-top: 10px;margin-left: 0;margin-right: 0;margin-bottom: 20px;">

              <button class="btn btn-primary button" onclick="addInput()">+</button>

            </div> -->
            <div class="form-group">
              <label style="vertical-align: middle;display:inline-block;width: 100%;">1
                <input type="text" id="names1" class="form-control" placeholder="请输入节点名字"

                  style="width: 92%;display:inline-block;" onkeydown="addInput()">
              </label>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="SubmitNode">添加</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>

  <!-- 追加节点模态框（Modal） -->
  <div class="modal fade" id="appendModal" tabindex="-1" role="dialog" aria-labelledby="appendModalLabel" aria-hidden="true"

    data-backdrop="static">
    <div class="modal-dialog" style="z-index: 1060;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="appendModalLabel">追加节点</h4>
        </div>
        <div class="modal-body">
          <div>
            <input type="text" id="appendNode" class="form-control" placeholder="请输入第几列" style="display:none" />
          </div>
          <form role="form" id="ccc" onsubmit="return false">
            <div class="form-group">
              <label style="vertical-align: middle;display:inline-block;width: 100%;">1
                <input type="text" id="appendnames1" class="form-control" placeholder="请输入节点名字"

                  style="width: 92%;display:inline-block;" onkeydown="addAppendInput()">
              </label>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="SubmitAppend">追加</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>

  <!-- 修改节点模态框（Modal） -->
  <div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="modifyModalLabel" aria-hidden="true"

    data-backdrop="static">
    <div class="modal-dialog" style="z-index: 1060;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="modifyModalLabel">修改节点</h4>
        </div>
        <div class="modal-body">
          <div>
            <input type="text" id="modifyNode" class="form-control" placeholder="请输入第几列" style="display:none" />
          </div>
          <form role="form" onsubmit="return false">
            <div class="form-group">
              <label style="vertical-align: middle;display:inline-block;width: 100%;">
                <input type="text" id="Node" class="form-control" placeholder="请输入节点名字"

                  style="width: 92%;display:inline-block;">
              </label>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="SubmitModify">修改</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>
  <!-- <hr> -->
  <!-- <div class="footer">

      <div class="container">

        <p>Make Data Collecting Interesting :)</p>

      </div>

    </div> -->

  <script type='text/javascript'></script>
  <script type="text/javascript" src="./libs/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="./libs/jquery-ui-1.9.2.min.js"></script>
  <script type="text/javascript" src="./libs/d3.min.js"></script>
  <script type="text/javascript" src="./libs/bootstrap.min.js"></script>
  <script type="text/javascript" src="./libs/bootstrap-treeview.min.js"></script>
  <script type="text/javascript" src="./libs/json2.js"></script>
  <script type="text/javascript" src="./libs/jquery.jsPlumb-1.7.2.js"></script>
  <script type="text/javascript" src="./libs/biltong-0.2.js"></script>
  <script type="text/javascript" src="./libs/jsBezier-0.6.js"></script>

  <script>

    // 扩展jQuery-UI功能，draggable在移动端浏览器不起作用解决方案，同时支持点击

    // This is a fix for mobile devices

    var moveFlag = 0;

    // 判断是不是iPad|iPhone|Android，判断是不是微软平板Surface

    (/iPad|iPhone|Android/.test(navigator.userAgent) || window.matchMedia('(pointer: coarse)').matches) && (function ($) {

      var proto = $.ui.mouse.prototype,

        _mouseInit = proto._mouseInit;

      $.extend(proto, {

        _mouseInit: function () {

          this.element

            .bind("touchstart." + this.widgetName, $.proxy(this, "_touchStart"));

          _mouseInit.apply(this, arguments);

        },

        _touchStart: function (event) {

          this.element

            .bind("touchmove." + this.widgetName, $.proxy(this, "_touchMove"))

            .bind("touchend." + this.widgetName, $.proxy(this, "_touchEnd"));


          this._modifyEvent(event);


          $(document).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse

          this._mouseDown(event);


          //return false;           

        },

        _touchMove: function (event) {

          moveFlag = 1;

          this._modifyEvent(event);

          this._mouseMove(event);


        },

        _touchEnd: function (event) {

          // dispatch the click event

          if (moveFlag == 0) {

            var evt = document.createEvent('Event');

            evt.initEvent('click', true, true);

            // this.handleElement[0].dispatchEvent(evt);

            event.target.dispatchEvent(evt);

          };


          this.element

            .unbind("touchmove." + this.widgetName)

            .unbind("touchend." + this.widgetName);

          this._mouseUp(event);


          moveFlag = 0;

        },

        _modifyEvent: function (event) {

          event.which = 1;

          var target = event.originalEvent.targetTouches[0];

          event.pageX = target.clientX;

          event.pageY = target.clientY;

        }

      });

    })(jQuery);

  </script>

  <script type="text/javascript" src="./main.js"></script>
</body>

</html>