288 lines
13 KiB
HTML
288 lines
13 KiB
HTML
<head>
|
|
<meta charset="utf-8">
|
|
<title>Editor</title>
|
|
<!-- <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>-->
|
|
<script src="https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@0.7.31/dist/flexsearch.bundle.js"></script>
|
|
<link rel="STYLESHEET" type="text/css" href="./editor.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="editor">
|
|
<div id="curtain" onclick="closeFileDisplay()"></div> <!--Backdrop behind the file menu-->
|
|
<div id="submenu-backdrop"></div>
|
|
<div id="mainmenu" class="menu-lightmode"> <!--Horizontal main menu-->
|
|
<div class="menuitem" onclick="openFileMenu(this)">
|
|
<div class="menubutton">File</div>
|
|
<div id="filemenu" class="submenu" onclick="event.stopPropagation()">
|
|
<div class="menutop menu-lightmode">New Workflow</div>
|
|
<div class="menucenter menu-lightmode" onclick="openFileDisplay()">Open</div>
|
|
<div class="menucenter menu-lightmode">Save</div>
|
|
<div class="menucenter menu-lightmode">Save As</div>
|
|
<div class="menubottom menu-lightmode">Export</div>
|
|
</div>
|
|
</div>
|
|
<div class="menuitem" onclick="openEditMenu(this)">
|
|
<div class="menubutton">Edit</div>
|
|
<div id="editmenu" class="submenu" onclick="event.stopPropagation()">
|
|
<div class="menutop menu-lightmode">Undo</div>
|
|
<div class="menucenter menu-lightmode">Redo</div>
|
|
<div class="menucenter menu-lightmode">Edit Description</div>
|
|
<div class="menubottom menu-lightmode">Run Linter</div>
|
|
</div>
|
|
</div>
|
|
<div class="menuitem" onclick="openViewMenu(this)">
|
|
<div class="menubutton">View</div>
|
|
<div class="submenu menu-lightmode" onclick="event.stopPropagation()">
|
|
<table id="view-table">
|
|
<tr>
|
|
<td>
|
|
<label for="actor">Highlight actor:</label>
|
|
</td>
|
|
<td>
|
|
<select name="actor" id="actor" onchange="selectActor();"></select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label for="viewer">Highlight viewer:</label>
|
|
</td>
|
|
<td>
|
|
<select name="viewer" id="viewer" onchange="selectViewer();"></select>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="menuitem" onclick="openSettingsMenu(this)">
|
|
<div class="menubutton">Settings</div> <!--Main settings menu-->
|
|
<div class="submenu menu-lightmode" onclick="event.stopPropagation()">
|
|
<table id="settings-table">
|
|
<tr>
|
|
<th colspan="2">
|
|
General
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label class="toggle" title="Dark Mode">
|
|
<input type="checkbox">
|
|
<span class="toggle-slider" onclick="toggleTheme()"></span>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
Dark Mode
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label class="toggle" title="Foo">
|
|
<input type="checkbox" disabled>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
Language
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th colspan="2">
|
|
Visualisation
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label class="toggle" title="Foo">
|
|
<input type="checkbox" disabled>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
draw @@init or not
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label class="toggle" title="Foo">
|
|
<input type="checkbox" disabled>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
collapse all edges between 2 states
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menuitem" onclick="openAboutMenu(this)">
|
|
<div class="menubutton">About</div>
|
|
<div class="submenu menu-lightmode">Visualiser & editor for Uni2work workflows</div>
|
|
</div>
|
|
<div class="menuitem" onclick="openSearchMenu(this)">
|
|
<div id="search-container">
|
|
<input id="search-input" type="text" placeholder="Search" onclick="showSearchResults()" oninput="search(this.value)">
|
|
<span class="search-button">
|
|
<svg id="search-icon" class="search-icon-lightmode" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="11" cy="7" r="6" stroke-width="2" fill="none" />
|
|
<polyline points="6,12 2,16" style="fill:none;stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div id="search-results" class="submenu menu-lightmode" onclick="event.stopPropagation()">
|
|
<div id="search-options">
|
|
<label class="checkbox" title="Nodes">
|
|
<input id="search-option-states" type="checkbox" checked="checked">
|
|
Nodes
|
|
</label>
|
|
<label class="checkbox" title="Edges">
|
|
<input id="search-option-edges" type="checkbox" checked="checked">
|
|
Edges
|
|
</label>
|
|
<label class="checkbox" title="Roles">
|
|
<input id="search-option-roles" type="checkbox">
|
|
Roles
|
|
</label>
|
|
</div>
|
|
<div id="search-result-list"></div>
|
|
</div>
|
|
</div>
|
|
<div class="menuitem">
|
|
<div id="filename" class="contenttype-lightmode"></div>
|
|
</div>
|
|
</div>
|
|
<div id="sidepanel" class="menu-lightmode"> <!--Pop-up panel on the right side for displaying/editing the selected state/action-->
|
|
<div id="sideheader">
|
|
<div id="sidecontentedge" class="sidecontenttype contenttype-lightmode">
|
|
<svg height="10" width="28" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="4" cy="4" r="3" stroke-width="2" fill="none" />
|
|
<polyline points="8,4 18,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
|
|
<circle cx="22" cy="4" r="3" stroke-width="2" fill="none" />
|
|
</svg>
|
|
Edge
|
|
</div>
|
|
<div id="sidecontentnode" class="sidecontenttype contenttype-lightmode">
|
|
<svg height="10" width="22" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="2,4 7,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
|
|
<circle cx="11" cy="4" r="3" stroke-width="2" fill="none" />
|
|
<polyline points="15,4 20,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
Node
|
|
</div>
|
|
<h1 id="sideheading">Hello</h1>
|
|
<svg class="close" height="15" width="15" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
|
|
<polyline points="1,1 14,14" style="fill:none;stroke:rgb(120, 120, 120);stroke-width:2" stroke-linecap="round" />
|
|
<polyline points="14,1 1,14" style="fill:none;stroke:rgb(120, 120, 120);stroke-width:2" stroke-linecap="round" />
|
|
X
|
|
</svg>
|
|
</div>
|
|
<div id="sidecontent"></div>
|
|
<div id="sidebuttons">
|
|
<button type="submit">Apply</button>
|
|
<button type="reset" onclick="deselect()">Cancel</button>
|
|
<button type="submit" onclick="focusSelection()">Focus</button>
|
|
<button type="submit" onclick="removeSelection()" style="position: absolute; right: 0px;">Delete</button>
|
|
</div>
|
|
</div>
|
|
<div id="filepanel" class="menu-lightmode"> <!--Pop-up panel covering the center of the screen for file interactions-->
|
|
<div id="fileheader">
|
|
<h2 id="fileheading">Hello</h2>
|
|
<svg class="close" height="15" width="15" xmlns="http://www.w3.org/2000/svg" onclick="closeFileDisplay()">
|
|
<polyline points="1,1 14,14" style="fill:none;stroke:rgb(120, 120, 120);stroke-width:2" stroke-linecap="round" />
|
|
<polyline points="14,1 1,14" style="fill:none;stroke:rgb(120, 120, 120);stroke-width:2" stroke-linecap="round" />
|
|
X
|
|
</svg>
|
|
</div>
|
|
<div id="filecontent"></div>
|
|
<div id="filebuttons">
|
|
<!-- <button type="submit">Load</button> -->
|
|
<button type="reset" onclick="closeFileDisplay()">Cancel</button>
|
|
</div>
|
|
</div>
|
|
<div id="ctmenubg" class="contextmenu"> <!--Context menu displayed after right-clicking the background-->
|
|
<div class="menutop menu-lightmode" onclick="addState()">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="5" cy="5" r="4" stroke-width="2" fill="none" />
|
|
</svg>
|
|
New State
|
|
</div>
|
|
<div class="menubottom menu-lightmode">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="1,1 9,9" style="fill:none;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 menu-lightmode" onclick="markEdgeFrom()">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="1,1 9,9" style="fill:none;stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
New Edge from here
|
|
</div>
|
|
<div class="menucenter menu-lightmode" onclick="markEdgeTo()">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="1,9 9,1" style="fill:none;stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
New Edge to here
|
|
</div>
|
|
<div class="menucenter menu-lightmode" onclick="rightSelect()">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="1,9 9,1" style="fill:none;stroke-width:4" />
|
|
<polyline points="1,9 8,2" style="fill:none;stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
Edit
|
|
</div>
|
|
<div class="menucenter menu-lightmode">
|
|
<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-width:2"/>
|
|
<polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke-width:2" />
|
|
<!-- <polyline points="1,9 8,2" style="fill:none;stroke-width:2" stroke-linecap="round" /> -->
|
|
</svg>
|
|
Duplicate
|
|
</div>
|
|
<div class="menubottom menu-lightmode" 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 menu-lightmode" onclick="rightSelect()">
|
|
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="1,9 9,1" style="fill:none;stroke-width:4" />
|
|
<polyline points="1,9 8,2" style="fill:none;stroke-width:2" stroke-linecap="round" />
|
|
</svg>
|
|
Edit
|
|
</div>
|
|
<div class="menucenter menu-lightmode">
|
|
<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-width:2"/>
|
|
<polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke-width:2" />
|
|
<!-- <polyline points="1,9 8,2" style="fill:none;stroke-width:2" stroke-linecap="round" /> -->
|
|
</svg>
|
|
Duplicate
|
|
</div>
|
|
<div class="menubottom menu-lightmode" 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>
|
|
<script src="./keyboard.js"></script>
|
|
</body> |