117 lines
5.7 KiB
HTML
117 lines
5.7 KiB
HTML
<head>
|
|
<link rel="STYLESHEET" type="text/css" href="./editor.css">
|
|
<meta charset="utf-8">
|
|
|
|
<!-- <script src="//unpkg.com/force-graph"></script> -->
|
|
<script src="https://unpkg.com/force-graph@1.43.0/dist/force-graph.min.js"></script>
|
|
<!-- <script src="./force-graph-master/src/force-graph.js"></script> -->
|
|
<!--<script src="../../dist/force-graph.js"></script>-->
|
|
</head>
|
|
|
|
<body>
|
|
<div id="editor">
|
|
<div id="settings"> <!--Horizontal bar on top for selecting highlighting modes-->
|
|
<div>
|
|
<label for="actor">Highlight actor: </label>
|
|
<select name="actor" id="actor" onchange="selectActor();"></select>
|
|
</div>
|
|
<div>
|
|
<label for="viewer">Highlight viewer: </label>
|
|
<select name="viewer" id="viewer" onchange="selectViewer();"></select>
|
|
</div>
|
|
</div>
|
|
<div id="sidepanel"> <!--Pop-up panel on the right side for displaying/editing the selected state/action-->
|
|
<div id="sideheader">
|
|
<h1 id="sideheading">Hello</h1>
|
|
<svg height="15" width="15" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
|
|
<polyline points="1,1 14,14" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
|
|
<polyline points="14,1 1,14" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
|
|
X
|
|
</svg>
|
|
</div>
|
|
<div id="sidecontent"></div>
|
|
<div id="sidebuttons">
|
|
<button type="submit" disabled="disabled">Save</button>
|
|
<button type="reset" disabled="disabled">Cancel</button>
|
|
</div>
|
|
</div>
|
|
<div id="ctmenubg" class="contextmenu"> <!--Context menu displayed after right-clicking the background-->
|
|
<div class="menutop" onclick="addState()">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="5" cy="5" r="4" stroke="rgb(63, 63, 63)" stroke-width="2" fill="none" />
|
|
</svg>
|
|
New State
|
|
</div>
|
|
<div class="menubottom">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="1,1 9,9" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
New Edge
|
|
</div>
|
|
</div>
|
|
<div id="ctmenust" class="contextmenu"> <!--Context menu displayed after right-clicking a state-->
|
|
<div class="menutop">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="1,1 9,9" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
New Edge from here
|
|
</div>
|
|
<div class="menucenter">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="1,9 9,1" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
New Edge to here
|
|
</div>
|
|
<div class="menucenter" onclick="rightSelect()">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="1,9 9,1" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:4" />
|
|
<polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
Edit
|
|
</div>
|
|
<div class="menucenter">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="5" height="5" x="1" y="4" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2"/>
|
|
<polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" />
|
|
<!-- <polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" /> -->
|
|
</svg>
|
|
Duplicate
|
|
</div>
|
|
<div class="menubottom" onclick="removeRightSelection()">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="1,1 9,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
|
|
<polyline points="9,1 1,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
Delete
|
|
</div>
|
|
</div>
|
|
<div id="ctmenued" class="contextmenu"> <!--Context menu displayed after right-clicking an edge-->
|
|
<div class="menutop" onclick="rightSelect()">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="1,9 9,1" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:4" />
|
|
<polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
Edit
|
|
</div>
|
|
<div class="menucenter">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="5" height="5" x="1" y="4" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2"/>
|
|
<polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" />
|
|
<!-- <polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" /> -->
|
|
</svg>
|
|
Duplicate
|
|
</div>
|
|
<div class="menubottom" onclick="removeRightSelection()">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="1,1 9,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
|
|
<polyline points="9,1 1,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
Delete
|
|
</div>
|
|
</div>
|
|
<div id="graph"></div> <!--The graph canvas-->
|
|
</div>
|
|
|
|
<script src="./workflow.js"></script>
|
|
<script src="./editor.js"></script>
|
|
</body> |