uni2work.workflows.visualiser/editor.html
2023-08-29 16:45:07 +02:00

1292 lines
50 KiB
HTML

<!--
SPDX-FileCopyrightText: 2023 David Mosbach <david.mosbach@campus.lmu.de>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<head>
<meta charset="utf-8">
<title>Editor</title>
<link rel="STYLESHEET" type="text/css" href="./editor.css">
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
</head>
<body>
<div id="editor">
<div id="curtain"></div> <!--Backdrop behind the file menu-->
<div id="submenu-backdrop"></div>
<div id="mainmenu" class="menu-lightmode"> <!--Horizontal main menu-->
<div id="logo">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100%"
height="100%"
viewBox="0 0 16 16"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="logo.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="true"
inkscape:zoom="32"
inkscape:cx="6.34375"
inkscape:cy="6.9375"
inkscape:window-width="1620"
inkscape:window-height="1018"
inkscape:window-x="-6"
inkscape:window-y="-6"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<inkscape:grid
id="grid1"
units="px"
originx="0"
originy="0"
spacingx="1"
spacingy="1"
empcolor="#0099e5"
empopacity="0.30196078"
color="#0099e5"
opacity="0.14901961"
empspacing="5"
dotted="false"
gridanglex="30"
gridanglez="30"
visible="true" />
</sodipodi:namedview>
<defs
id="defs1">
<inkscape:path-effect
effect="bspline"
id="path-effect14"
is_visible="true"
lpeversion="1.3"
weight="33.333333"
steps="2"
helper_size="0"
apply_no_weight="true"
apply_with_weight="true"
only_selected="false"
uniform="false" />
<inkscape:path-effect
effect="bspline"
id="path-effect12"
is_visible="true"
lpeversion="1.3"
weight="33.333333"
steps="2"
helper_size="0"
apply_no_weight="true"
apply_with_weight="true"
only_selected="false"
uniform="false" />
<inkscape:path-effect
effect="spiro"
id="path-effect11"
is_visible="true"
lpeversion="1" />
<inkscape:path-effect
effect="bspline"
id="path-effect10"
is_visible="true"
lpeversion="1.3"
weight="33.333333"
steps="2"
helper_size="0"
apply_no_weight="true"
apply_with_weight="true"
only_selected="false"
uniform="false" />
<inkscape:path-effect
effect="bspline"
id="path-effect9"
is_visible="true"
lpeversion="1.3"
weight="33.333333"
steps="2"
helper_size="0"
apply_no_weight="true"
apply_with_weight="true"
only_selected="false"
uniform="false" />
<inkscape:path-effect
effect="bspline"
id="path-effect8"
is_visible="true"
lpeversion="1.3"
weight="33.333333"
steps="2"
helper_size="0"
apply_no_weight="true"
apply_with_weight="true"
only_selected="false"
uniform="false" />
<inkscape:path-effect
effect="spiro"
id="path-effect7"
is_visible="true"
lpeversion="1" />
<inkscape:path-effect
effect="spiro"
id="path-effect6"
is_visible="true"
lpeversion="1" />
<inkscape:path-effect
effect="spiro"
id="path-effect5"
is_visible="true"
lpeversion="1" />
<inkscape:path-effect
effect="bspline"
id="path-effect4"
is_visible="true"
lpeversion="1.3"
weight="33.333333"
steps="2"
helper_size="0"
apply_no_weight="true"
apply_with_weight="true"
only_selected="false"
uniform="false" />
<inkscape:path-effect
effect="bspline"
id="path-effect3"
is_visible="true"
lpeversion="1.3"
weight="33.333333"
steps="2"
helper_size="0"
apply_no_weight="true"
apply_with_weight="true"
only_selected="false"
uniform="false" />
<inkscape:path-effect
effect="spiro"
id="path-effect2"
is_visible="true"
lpeversion="1" />
<inkscape:path-effect
effect="skeletal"
id="path-effect1"
is_visible="true"
lpeversion="1"
pattern="M 0,18.867925 C 0,8.4528302 8.4528302,0 18.867925,0 c 10.415094,0 18.867924,8.4528302 18.867924,18.867925 0,10.415094 -8.45283,18.867924 -18.867924,18.867924 C 8.4528302,37.735849 0,29.283019 0,18.867925 Z"
copytype="single_stretched"
prop_scale="1"
scale_y_rel="false"
spacing="0"
normal_offset="0"
tang_offset="0"
prop_units="false"
vertical_pattern="false"
hide_knot="false"
fuse_tolerance="0" />
<inkscape:path-effect
effect="bspline"
id="path-effect12-8"
is_visible="true"
lpeversion="1.3"
weight="33.333333"
steps="2"
helper_size="0"
apply_no_weight="true"
apply_with_weight="true"
only_selected="false"
uniform="false" />
</defs>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<path
id="path11"
style="fill:none;fill-rule:evenodd;stroke:rgb(75, 151, 151);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;paint-order:normal"
d="M 8,4 C 5.6666223,4 3.0075451,5.9986617 2,8 c 1.0062047,2.006585 3.6666221,4 6,4 2.333378,0 5.006969,-1.997206 6,-4 C 13.001735,5.9986618 10.333378,4 8,4 Z"
sodipodi:nodetypes="scscs" />
<ellipse
style="fill:rgb(75, 151, 151);fill-opacity:1;fill-rule:evenodd;stroke:rgb(75, 151, 151);stroke-width:0.902538;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="path13"
cx="8"
cy="7.9999995"
rx="2.9237309"
ry="2.9237306" />
<circle
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.36;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;stroke-dasharray:none;paint-order:normal"
id="path12"
cx="6.3000002"
cy="8"
r="0.75" />
<circle
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.36;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;stroke-dasharray:none;paint-order:normal"
id="path12-2"
cx="7.75"
cy="6.25"
r="0.75" />
<circle
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.36;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;stroke-dasharray:none;paint-order:normal"
id="path12-0"
cx="7.75"
cy="9.75"
r="0.75" />
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.26;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="M 7.75,6.25 6.3,8 7.75,9.75"
id="path14"
sodipodi:nodetypes="ccc" />
</g>
</svg>
</div>
<div id="file-menu-btn" class="menuitem">
<div class="menubutton">File</div>
<div id="filemenu" class="submenu" onclick="event.stopPropagation()">
<div class="menutop menu-lightmode">New Workflow</div>
<div id="open-file" class="menucenter menu-lightmode">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 id="edit-menu-btn" class="menuitem">
<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 id="view-menu-btn" class="menuitem">
<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"></select>
</td>
</tr>
<tr>
<td>
<label for="viewer">Highlight viewer:</label>
</td>
<td>
<select name="viewer" id="viewer"></select>
</td>
</tr>
</table>
</div>
</div>
<div id="settings-menu-btn" class="menuitem">
<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 id="theme-toggle" class="toggle-slider"></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 id="about-menu-btn" class="menuitem">
<div class="menubutton">About</div>
<div class="submenu menu-lightmode">Visualiser & editor for Uni2work workflows</div>
</div>
<div id="search-menu-btn" class="menuitem">
<div id="search-container">
<input id="search-input" type="text" placeholder="Search">
<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 id="close-side-panel" class="close" height="15" width="15" xmlns="http://www.w3.org/2000/svg">
<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 id="side-panel-apply" type="submit">Apply</button>
<button id="side-panel-cancel" type="reset">Cancel</button>
<button id="side-panel-focus" type="submit">Focus</button>
<button id="side-panel-delete" type="submit" 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 id="close-file-panel" class="close" height="15" width="15" xmlns="http://www.w3.org/2000/svg">
<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 id="file-panel-cancel" type="reset">Cancel</button>
</div>
</div>
<div id="ctmenubg" class="contextmenu"> <!--Context menu displayed after right-clicking the background-->
<div id="add-state" class="menutop menu-lightmode">
<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>
&nbsp;&nbsp;New State
</div>
<div id="add-edge" 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>
&nbsp;&nbsp;New Edge
</div>
</div>
<div id="ctmenust" class="contextmenu"> <!--Context menu displayed after right-clicking a state-->
<div id="edge-from" class="menutop 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>
&nbsp;&nbsp;New Edge from here
</div>
<div id="edge-to" class="menucenter menu-lightmode">
<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>
&nbsp;&nbsp;New Edge to here
</div>
<div class="edit-item menucenter menu-lightmode">
<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>
&nbsp;&nbsp;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>
&nbsp;&nbsp;Duplicate
</div>
<div class="delete-item 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: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>
&nbsp;&nbsp;Delete
</div>
</div>
<div id="ctmenued" class="contextmenu"> <!--Context menu displayed after right-clicking an edge-->
<div class="edit-item menutop menu-lightmode">
<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>
&nbsp;&nbsp;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>
&nbsp;&nbsp;Duplicate
</div>
<div class="delete-item 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: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>
&nbsp;&nbsp;Delete
</div>
</div>
<div id="graph"></div> <!--The graph canvas-->
<div id="tools" class="menu-lightmode"> <!--Cursor tool menu-->
<div>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
id="svg1"
sodipodi:docname="cursor.svg"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="true"
inkscape:zoom="22.627417"
inkscape:cx="6.9163882"
inkscape:cy="9.5901357"
inkscape:window-width="1620"
inkscape:window-height="1018"
inkscape:window-x="-6"
inkscape:window-y="-6"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<inkscape:grid
id="grid1"
units="px"
originx="0"
originy="0"
spacingx="1"
spacingy="1"
empcolor="#0099e5"
empopacity="0.30196078"
color="#0099e5"
opacity="0.14901961"
empspacing="5"
dotted="false"
gridanglex="30"
gridanglez="30"
visible="true" />
</sodipodi:namedview>
<defs
id="defs1">
<inkscape:path-effect
effect="fill_between_many"
method="originald"
linkedpaths="#path2,0,1|"
id="path-effect6" />
<inkscape:path-effect
effect="fill_between_many"
method="originald"
linkedpaths="#path2,0,1|"
id="path-effect7" />
</defs>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<path
id="path7"
d="M 4.3898802,1.7076466 C 4.268221,1.7005335 4.1436244,1.7251412 4.0310151,1.7819373 3.8059414,1.8958171 3.6602655,2.1206831 3.6473262,2.3725943 l 1.215e-4,9.0882957 c -0.028002,0.539338 0.5366373,0.905997 1.0187744,0.662658 L 6.9186195,9.7644384 9.0142564,13.908108 c 0.1751226,0.346861 0.5972794,0.487061 0.9440583,0.311775 L 10.528804,13.93006 c 0.346863,-0.175123 0.487062,-0.597278 0.311776,-0.944058 L 8.7452146,8.8369867 11.980027,8.4248136 c 0.481961,-0.2436886 0.523327,-0.915475 0.07259,-1.2129692 L 4.7360255,1.8221417 C 4.6308022,1.7526096 4.5115394,1.7147596 4.3898802,1.7076466 Z"
style="fill:none;fill-opacity:1;stroke-width:0.87849;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
sodipodi:nodetypes="scccccccccccccs" />
</g>
</svg>
</div>
<div>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="select.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="true"
inkscape:zoom="6.09375"
inkscape:cx="-31.179487"
inkscape:cy="34.625641"
inkscape:window-width="1620"
inkscape:window-height="1018"
inkscape:window-x="-6"
inkscape:window-y="-6"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<inkscape:grid
id="grid1"
units="px"
originx="0"
originy="0"
spacingx="1"
spacingy="1"
empcolor="#0099e5"
empopacity="0.30196078"
color="#0099e5"
opacity="0.14901961"
empspacing="5"
dotted="false"
gridanglex="30"
gridanglez="30"
visible="true" />
</sodipodi:namedview>
<defs
id="defs1" />
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<path
id="rect1"
style="fill:none;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke;stroke-dasharray:1,2;stroke-dashoffset:0"
d="M 2,2 H 14 V 14 H 2 Z"
sodipodi:nodetypes="ccccc" />
<circle
style="fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.847858;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;paint-order:markers fill stroke"
id="path1"
cx="6"
cy="6"
r="2" />
<circle
style="fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.847858;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;paint-order:markers fill stroke"
id="path1-9"
cx="10"
cy="10"
r="2" />
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
d="m 6,6 4,4"
id="path2"
sodipodi:nodetypes="cc" />
</g>
</svg>
</div>
<div>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="select-edge.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="true"
inkscape:zoom="17.235728"
inkscape:cx="-7.1943582"
inkscape:cy="15.259002"
inkscape:window-width="1620"
inkscape:window-height="1018"
inkscape:window-x="-6"
inkscape:window-y="-6"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<inkscape:grid
id="grid1"
units="px"
originx="0"
originy="0"
spacingx="1"
spacingy="1"
empcolor="#0099e5"
empopacity="0.30196078"
color="#0099e5"
opacity="0.14901961"
empspacing="5"
dotted="false"
gridanglex="30"
gridanglez="30"
visible="true" />
</sodipodi:namedview>
<defs
id="defs1">
<inkscape:path-effect
effect="spiro"
id="path-effect3"
is_visible="true"
lpeversion="1" />
<inkscape:path-effect
effect="spiro"
id="path-effect3-7"
is_visible="true"
lpeversion="1" />
</defs>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<path
id="rect1"
style="fill:none;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke;stroke-dasharray:1,2;stroke-dashoffset:0"
d="M 2,2 H 14 V 14 H 2 Z"
sodipodi:nodetypes="ccccc" />
<path
style="fill:none;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
d="M 3.3617908,5.9146276 C 5.4290432,6.1670079 7.4000196,7.1478801 8.8479002,8.6448337 10.224884,10.068488 11.121769,11.948601 11.361791,13.914628"
id="path3"
inkscape:path-effect="#path-effect3"
inkscape:original-d="M 3.3617908,5.9146276 C 5.7889197,5.6051928 10.503784,10.459099 8.8479002,8.6448337 7.2032116,6.8428344 10.994338,11.941981 11.361791,13.914628"
sodipodi:nodetypes="csc"
transform="translate(0.6382092,-1.9146276)" />
<path
style="fill:none;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
d="M 2.8617908,6.4146276 C 4.0575159,6.6229941 5.187365,7.1951217 6.0629872,8.035634 6.9990793,8.9341915 7.6390347,10.136327 7.8617908,11.414628"
id="path3-3"
inkscape:path-effect="#path-effect3-7"
inkscape:original-d="M 2.8617908,6.4146276 C 5.2889197,6.1051928 7.7188711,9.8498992 6.0629872,8.035634 4.4182986,6.2336347 7.4943378,9.4419806 7.8617908,11.414628"
sodipodi:nodetypes="csc"
transform="translate(1.1382092,0.5853724)" />
</g>
</svg>
</div>
</div>
<div id="footer" class="menu-lightmode"> <!--Status bar-->
<span>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="errors.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="true"
inkscape:zoom="16"
inkscape:cx="-6.0625"
inkscape:cy="9.3125"
inkscape:window-width="1620"
inkscape:window-height="1018"
inkscape:window-x="-6"
inkscape:window-y="-6"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<inkscape:grid
id="grid1"
units="px"
originx="0"
originy="0"
spacingx="1"
spacingy="1"
empcolor="#0099e5"
empopacity="0.30196078"
color="#0099e5"
opacity="0.14901961"
empspacing="5"
dotted="false"
gridanglex="30"
gridanglez="30"
visible="true" />
</sodipodi:namedview>
<defs
id="defs1" />
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1"
d="M 5.0009883,5.0075279 10.998109,11.007295 M 5.0024621,11.002751 11.001027,4.9962911"
id="path1"
sodipodi:nodetypes="cccc" />
<ellipse
style="fill:none;stroke-width:1.02648;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1"
id="path2"
cx="7.9999995"
cy="8"
rx="6.4867597"
ry="6.4867601" />
</g>
</svg>
</span>&nbsp;<span>0</span>&nbsp;&nbsp;
<span>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="info.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="true"
inkscape:zoom="16"
inkscape:cx="14.1875"
inkscape:cy="15.125"
inkscape:window-width="1620"
inkscape:window-height="1018"
inkscape:window-x="-6"
inkscape:window-y="-6"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<inkscape:grid
id="grid1"
units="px"
originx="0"
originy="0"
spacingx="1"
spacingy="1"
empcolor="#0099e5"
empopacity="0.30196078"
color="#0099e5"
opacity="0.14901961"
empspacing="5"
dotted="false"
gridanglex="30"
gridanglez="30"
visible="true" />
</sodipodi:namedview>
<defs
id="defs1" />
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;stroke-dasharray:none"
d="M 8,4 V 9.5"
id="path1"
sodipodi:nodetypes="cc" />
<ellipse
style="fill:none;stroke-width:1.02648;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1"
id="path2"
cx="7.9999995"
cy="8"
rx="6.4867597"
ry="6.4867601" />
<path
style="fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;stroke-dasharray:none"
d="M 8,11.5 V 12"
id="path1-9"
sodipodi:nodetypes="cc" />
</g>
</svg>
</span>&nbsp;<span>5</span>&nbsp;&nbsp;&nbsp;&nbsp;
<span>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="git.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="true"
inkscape:zoom="45.254834"
inkscape:cx="4.7508737"
inkscape:cy="8.0212425"
inkscape:window-width="1620"
inkscape:window-height="1018"
inkscape:window-x="-6"
inkscape:window-y="-6"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<inkscape:grid
id="grid1"
units="px"
originx="0"
originy="0"
spacingx="1"
spacingy="1"
empcolor="#0099e5"
empopacity="0.30196078"
color="#0099e5"
opacity="0.14901961"
empspacing="5"
dotted="false"
gridanglex="30"
gridanglez="30"
visible="true" />
</sodipodi:namedview>
<defs
id="defs1" />
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
d="m 5.2570957,3.8069149 6.962e-4,8.2789561"
id="path1"
sodipodi:nodetypes="cc" />
<ellipse
style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="path2"
ry="1.255679"
rx="1.2556789"
cy="2.5156791"
cx="5.2556791" />
<ellipse
style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="path2-4"
ry="1.255679"
rx="1.2556789"
cy="5.0016789"
cx="10.755679" />
<ellipse
style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="path2-8"
ry="1.255679"
rx="1.2556789"
cy="13.489679"
cx="5.2556791" />
<path
style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.1;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
d="M 5.2543031,11.960537 C 5.426415,11.590024 10.731934,12.022897 10.75,7.3906509 c 0.005,-1.2917259 0.0052,-0.974969 0.0052,-0.974969"
id="path3"
sodipodi:nodetypes="csc" />
</g>
</svg>
</span>&nbsp;<span>main</span>
<span style="width: 100%;"></span>
<span>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="settings.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="true"
inkscape:zoom="32"
inkscape:cx="4.15625"
inkscape:cy="8.3125"
inkscape:window-width="1620"
inkscape:window-height="1018"
inkscape:window-x="-6"
inkscape:window-y="-6"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<inkscape:grid
id="grid1"
units="px"
originx="0"
originy="0"
spacingx="1"
spacingy="1"
empcolor="#0099e5"
empopacity="0.30196078"
color="#0099e5"
opacity="0.14901961"
empspacing="5"
dotted="false"
gridanglex="30"
gridanglez="30"
visible="true" />
</sodipodi:namedview>
<defs
id="defs1" />
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<path
id="path1"
style="fill:none;fill-opacity:1;stroke-width:1.22217;stroke-dasharray:none;stroke-opacity:1"
d="M 8.0768576,0.6225737 C 7.2176124,0.76037775 6.7826812,2.0853877 5.9213622,2.4094312 4.993789,2.7584 3.6786909,1.9178883 2.9552697,2.5952605 2.2387372,3.2661827 2.9825572,4.6222362 2.5773183,5.5162926 2.1681837,6.418944 0.64410306,6.7562248 0.61154145,7.7467351 0.57929001,8.7278136 2.0637456,9.1599357 2.4093917,10.078677 c 0.3489688,0.927573 -0.4915429,2.24267 0.1858291,2.966091 0.6709222,0.716533 2.0269762,-0.02729 2.9210324,0.377952 0.9026516,0.409133 1.2399327,1.93322 2.2304425,1.965777 0.9810787,0.03226 1.4132011,-1.452205 2.3319413,-1.797852 0.927572,-0.348964 2.242672,0.491543 2.966092,-0.18583 0.716535,-0.670923 -0.02729,-2.026977 0.377953,-2.921033 C 13.831817,9.5811328 15.355899,9.2438522 15.388459,8.2533415 15.42071,7.2722669 13.936254,6.8401442 13.590607,5.9214039 13.241642,4.9938305 14.082151,3.6787328 13.404776,2.9553117 12.733855,2.2387769 11.3778,2.9825966 10.483746,2.5773578 9.581094,2.1682229 9.2438142,0.64414251 8.2533034,0.6115809 8.1919857,0.60956947 8.1341405,0.61338662 8.0768576,0.62257519 Z M 7.7493062,5.5685728 A 2.4443556,2.4443556 0 0 1 10.431466,7.7493458 2.4443556,2.4443556 0 0 1 8.2506929,10.431505 2.4443556,2.4443556 0 0 1 5.5685335,8.2507323 2.4443556,2.4443556 0 0 1 7.7493062,5.5685728 Z" />
</g>
</svg>
</span>&nbsp;<span>Settings</span>&nbsp;&nbsp;&nbsp;
<span>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="help.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="true"
inkscape:zoom="17.235728"
inkscape:cx="-0.29009509"
inkscape:cy="13.982583"
inkscape:window-width="1620"
inkscape:window-height="1018"
inkscape:window-x="-6"
inkscape:window-y="-6"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<inkscape:grid
id="grid1"
units="px"
originx="0"
originy="0"
spacingx="1"
spacingy="1"
empcolor="#0099e5"
empopacity="0.30196078"
color="#0099e5"
opacity="0.14901961"
empspacing="5"
dotted="false"
gridanglex="30"
gridanglez="30"
visible="true" />
</sodipodi:namedview>
<defs
id="defs1">
<inkscape:path-effect
effect="spiro"
id="path-effect5"
is_visible="true"
lpeversion="1" />
<inkscape:path-effect
effect="spiro"
id="path-effect4"
is_visible="true"
lpeversion="1" />
<inkscape:path-effect
effect="spiro"
id="path-effect3"
is_visible="true"
lpeversion="1" />
<inkscape:path-effect
effect="spiro"
id="path-effect2"
is_visible="true"
lpeversion="1" />
<inkscape:path-effect
effect="spiro"
id="path-effect1"
is_visible="true"
lpeversion="1" />
</defs>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g5"
transform="matrix(0.64534308,0,0,0.64534308,2.3805141,3.6816223)"
style="stroke-width:1.54956;stroke-dasharray:none"
inkscape:label="g5">
<path
style="fill:none;stroke-width:1.54956;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
d="M 5.8889299,5.9179399 C 5.9388067,4.9502291 6.4698406,4.0191032 7.277339,3.4834744 8.0848375,2.9478457 9.1491838,2.8207262 10.060115,3.1511155 c 0.91093,0.3303894 1.646316,1.1102613 1.922695,2.039006 0.276378,0.9287448 0.08704,1.9838001 -0.495044,2.758484 -0.365393,0.4862977 -0.863106,0.8535671 -1.352418,1.214914 -0.4893112,0.361347 -0.9853607,0.731659 -1.3454668,1.2218845 -0.3393295,0.461942 -0.5448728,1.020991 -0.5855896,1.592722"
id="path4"
inkscape:path-effect="#path-effect5"
inkscape:original-d="M 5.8889299,5.9179399 C 5.8829069,5.2313398 9.9889409,8.5964845 11.487766,7.9486055 12.98659,7.3007264 9.689176,9.573138 8.7898812,10.385404 7.8905864,11.19767 8.4424975,11.436575 8.2042916,11.978126"
sodipodi:nodetypes="cssc"
transform="rotate(-6.9942961,-9.7706171,6.6574046)" />
<path
style="fill:none;stroke-width:1.54956;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
d="m 8.7184344,12.3 v 0.493193"
id="path5"
sodipodi:nodetypes="cc" />
</g>
<ellipse
style="fill:none;stroke-width:1.02868;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
id="path6"
cx="8"
cy="7.9999986"
rx="6.4856601"
ry="6.4856586" />
</g>
</svg>
</span>&nbsp;<span>Help</span>&nbsp;&nbsp;&nbsp;
<span>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="info.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="true"
inkscape:zoom="24.375"
inkscape:cx="2.625641"
inkscape:cy="9.3128205"
inkscape:window-width="1620"
inkscape:window-height="1018"
inkscape:window-x="-6"
inkscape:window-y="-6"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<inkscape:grid
id="grid1"
units="px"
originx="0"
originy="0"
spacingx="1"
spacingy="1"
empcolor="#0099e5"
empopacity="0.30196078"
color="#0099e5"
opacity="0.14901961"
empspacing="5"
dotted="false"
gridanglex="30"
gridanglez="30"
visible="true" />
</sodipodi:namedview>
<defs
id="defs1">
<rect
x="6.4410256"
y="5.4358974"
width="4.5561579"
height="6.3072868"
id="rect1" />
</defs>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<ellipse
style="fill:none;fill-opacity:1;stroke-width:1.02477;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
id="path1"
cx="8"
cy="7.9999986"
rx="6.4876165"
ry="6.4876151" />
<path
style="fill:none;fill-opacity:1;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
d="M 8,12 V 6.5 H 6.8"
id="path2"
sodipodi:nodetypes="ccc" />
<path
style="fill:none;fill-opacity:1;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
d="M 8,4 V 4.5"
id="path3"
sodipodi:nodetypes="cc" />
</g>
</svg>
</span>&nbsp;<span>About</span>
</div>
</div>
<script type="module" src="bundle.js"></script>
</body>