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>