index.html

<!--
Copyright (c) 2006-2013, JGraph Ltd

Windows example for mxGraph. This example demonstrates using
the mxWindow class for displaying windows.

元にしたソース: mxgraph\javascript\examples\windows.html

$ npm install

$ npm run build
または
$ npm run watch

http://localhost/.../mxgraph-sample/index.html

-->
<html>
<head>
<meta charset="utf-8" />
<title>mxGraph sample for FlowGraph</title>

<style>
  label {
    font-size: 14px;
  }
  .short {
    width: 32px;
  }
</style>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">

<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
  // ベースパスの設定
  mxBasePath = './'
  // リソースはロードしない
  let mxLoadResources = false
</script>

<!-- <script type="text/javascript" src="src/mxClient.js"></script> -->
<script type="text/javascript" src="src/mxClient.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="dist/app.bundle.js"></script>
</head>

<!-- Page passes the container for the graph to the program -->
<body>
  <div class="container-fluid">
    <div class="form-inline mt-2">
      <label class="sr-only" for="span-label">Label</label>
      <input type="text" id="span-label" class="form-control form-control-sm mr-sm-2" placeholder="Label">

      <label class="sr-only" for="span-text">Text</label>
      <input type="text" id="span-text" class="form-control form-control-sm mr-sm-2" placeholder="Text">
      <select id="shape" class="form-control form-control-sm mr-sm-2">
        <option value="0" selected>Select span shape</option>
      </select>

      <button id="add-span" class="btn btn-primary btn-sm mr-sm-2">add span</button>
      <button id='export-xml' class="btn btn-primary btn-sm mr-sm-2">save</button>
    
      <label id="import-xml" class="btn btn-primary btn-sm mr-sm-2">
        load<input type="file" style="display: none;" accept=".xml">
      </label>

      <label id="import-pdfanno" class="btn btn-primary btn-sm mr-sm-2">
        import pdfanno<input type="file" style="display: none;" accept=".pdfanno">
      </label>

      <button id="fast-organic-layout" class="btn btn-success btn-sm mr-sm-2">FastOrganic</button>
      <button id="compact-tree-layout" class="btn btn-success btn-sm mr-sm-2">CompactTree</button>
      <button id="radial-tree-layout" class="btn btn-success btn-sm mr-sm-2">RadialTree</button>

      <div class="btn-group-sm btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary mr-sm-2">
          <input type="checkbox" id="flag-edges" autocomplete="off"><span>Cannot create edge</span>
        </label>
      </div>

      <button id='action' class="btn btn-danger btn-sm mr-sm-2">action</button>
    </div>
  </div>
  
  <!-- Creates a container for the graph with a grid wallpaper -->
  <div id="graphContainer" style="overflow:auto;position:absolute;width:100%;height:100%;background:white;cursor:default;"></div>
  <!-- <div id="outlineContainer" style="z-index:10;position:absolute;overflow:hidden;top:0px;right:0px;width:160px;height:120px;background:transparent;border-style:solid;border-color:lightgray;"> -->
	<div id="outlineContainer" style="z-index:10;position:absolute;overflow:hidden;top:0px;right:0px;width:160px;height:120px;background:white;border-style:solid;border-color:lightgray;"></div>
</body>

</html>