master

分支 (1)

管理

管理

master

plantuml
/
index.html

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <link rel="shortcut icon" href="src/favicon.png" />
    <title>plantuml F2</title>
    <style>
      * {
        margin: 0;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
      }

      body {
        overflow-x: hidden;
      }

      #code-box,
      #uml-box {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: 0;
      }

      #code-box {
        width: 35%;
        position: fixed;
      }

      #code {
        height: 100%;
      }

      #uml-box {
        overflow-x: auto;
        text-align: center;
        background-color: #fcfcfc;
        right: 0;
        padding: 15px 10px 15px 105px;
        width: 65%;
      }

      #uml-box img {
        display: block;
      }

      #uml-box :not(:first-child) {
        margin-top: 20px;
      }

      #toolbar {
        position: fixed;
        z-index: 100;
        top: 0;
        bottom: 0;
        left: 35%;
        overflow-x: hidden;
        overflow-y: auto;
        width: 90px;
        /* 必须要设定宽度 */
        background-color: #dcdcdc;
        font-size: 0.86rem;
      }

      a {
        text-decoration: none;
        color: #333;
        margin: 0 auto;
        text-align: center;
      }

      #nav {
        list-style: none;
        margin: 1px;
        padding: 0;
        width: 88px;
        background-color: #dcdcdc;
      }

      #nav li a {
        height: 24px;
        width: 100%;
        line-height: 24px;
        margin-bottom: 1px;
        background-color: #efefef;
        display: block;
      }

      #nav li a:hover {
        background-color: #f66;
        color: #fff;
      }

      #nav .active {
        background-color: #f66;
        color: #fff;
      }

      @media screen and (max-width: 800px) {
        #box {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }

        #code-box {
          width: -moz-calc(100vw - 85px);
          width: -webkit-calc(100vw - 85px);
          width: calc(100vw - 85px);
          position: absolute;
          left: 0;
          top: 0;
          bottom: 50%;
        }

        #uml-box {
          width: 100%;
          z-index: 101;
          left: 0;
          right: 0;
          top: 50%;
          bottom: 0;
          padding: 5px 10px;
          overflow-x: auto;
          overflow-y: auto;
          box-shadow: 10px 0 6px 0 rgba(0, 0, 0, 0.12);
        }

        #code {
          font-size: 0.86rem !important;
        }

        #toolbar {
          left: auto;
          right: 0;
          bottom: 50%;
        }
      }
    </style>
  </head>

  <body>
    <div id="box">
      <div id="code-box">
        <pre id="code"></pre>
      </div>
      <div id="toolbar">
        <ul id="nav"></ul>
      </div>
      <div id="uml-box"></div>
    </div>
    <script src="src/jquery.min.js"></script>
    <script src="src/ace.js"></script>
    <script src="src/rawdeflate.js"></script>
    <script src="src/encode.js"></script>
    <script src="src/setting.js"></script>
    <script>
      $(function () {
        // 键盘绑定状态
        var isBindKey = false;

        // 初始化对象
        var editor = ace.edit("code");

        // 字体大小
        editor.setFontSize(18);

        // 自动换行,设置为off关闭
        editor.setOption("wrap", "free");

        editor.getSession().setTabSize(2);

        // 给编辑器添加键盘绑定
        editor.commands.addCommand({
          name: "myCommand",
          bindKey: { win: "F2", mac: "F2" }, // mac: 'Command-M'
          exec: function (editor) {
            bindKey();
          },
          readOnly: false, // 如果不需要使用只读模式，这里设置false
        });

        // 监听ace编辑器的改变事件，实时修改uml的src
        editor.getSession().on("change", function (e) {
          var v = editor.getValue();
          v = v.replace(/\n：/g, "\n:");
          v = v.replace(/；\n/g, ";\n");
          localStorage.setItem("plantumlData", v);
          setUmlBox(v);
        });

        // 初始化列表内容
        for (var i = 0; i < SNIPPETS.length; i++) {
          var item = "<li>";
          item += '<a index="' + i + '" href="javascript:;">';
          item += SNIPPETS[i].n;
          item += "</a>";
          item += "</li>";
          $("#nav").append(item);
        }

        // 列表jq对象
        $li = $("#nav>li a");

        // 列表点击事件
        $("#nav a").on("click", function () {
          var i = $(this).attr("index");
          $li.removeClass("active");
          insertSnippet(SNIPPETS[i].v, SNIPPETS[i].c);
        });

        //全局键盘绑定
        $(document).on("keydown", function (e) {
          // 按 F2 进入键盘模式
          if (e.keyCode == "120") {
            insertSnippet(":^!;", 1);
          }
          // 按 F2 进入键盘模式
          else if (e.keyCode == "113") {
            bindKey();
          } else if (isBindKey) {
            if (e.keyCode == "38") {
              //Up
              selectSnippet("up");
            } else if (e.keyCode == "40") {
              //Down
              selectSnippet("down");
            } else if (e.keyCode == "13") {
              //Enter
              var i = getSnippetIndex();
              insertSnippet(SNIPPETS[i].v, SNIPPETS[i].c);
              unBindKey();
              return false;
            } else {
              unBindKey();
            }
          }
        });

        // 设置初始值（尝试从浏览器取值）
        editor.setValue(localStorage.getItem("plantumlData") || INIT_UML);

        function bindKey() {
          if (!isBindKey) {
            isBindKey = true;
          }
          $li.removeClass("active");
          $li.eq(0).addClass("active").focus();
          $("body").css({ "overflow-y": "hidden" });
        }
        function unBindKey() {
          isBindKey = false;
          $li.removeClass("active");
          editor.focus();
          $("body").css({ "overflow-y": "auto" });
        }

        // 获取选中的图形代码块索引
        function getSnippetIndex() {
          var i = $(".active").attr("index");
          return parseInt(i);
        }

        // 选择图形代码块
        function selectSnippet(direction) {
          var i = getSnippetIndex();
          if (direction == "up") {
            i = i <= 0 ? 0 : i - 1;
          } else {
            var len = SNIPPETS.length - 1;
            i = i >= len ? len : i + 1;
          }
          $li.removeClass("active");
          $li.eq(i).addClass("active");
        }

        // 插入图形代码块 ^!
        function insertSnippet(snippet, column) {
          editor.focus();
          snippet = snippet.replace("^!", editor.getSelectedText());
          var range = editor.getSelectionRange();
          editor.session.replace(range, snippet);
          if (/^(0|[1-9][0-9]*)$/.test(column)) {
            editor.moveCursorTo(range.start.row, column);
            editor.clearSelection();
          }
        }
        // function insertSnippet(snippet) {
        //   editor.focus();
        //   let cur = editor.selection.getCursor();
        //   editor.gotoLine(cur.row + 1, cur.column);
        //   editor.insert(snippet);
        // }

        function setUmlBox(editorValue) {
          var re = new RegExp("(?\<\=" + PLANTUML_PREFIX + ")([\\s\\S]*?)(?\=" + PLANTUML_SUFFIX + ")", "gm");
          var umlArr = editorValue.match(re);
          if (umlArr === null) {
            var v = encodeUml(editorValue);
            $("#uml-box").html('<img src="' + PLANTUML_SERVER + v + '" />');
          } else {
            $("#uml-box").html("");
            for (var i = 0; i < umlArr.length; i++) {
              var v = encodeUml(umlArr[i]);
              $("#uml-box").append('<img src="' + PLANTUML_SERVER + v + '" />');
            }
          }
        }
      });
    </script>
  </body>
</html>