added cursor toolbar
This commit is contained in:
David Mosbach
parent
b00c59a209
commit
024ceef0e0
38
editor.css
38
editor.css
@ -690,6 +690,43 @@ label {
|
||||
stroke: rgba(135, 135, 135, 0.6);
|
||||
}
|
||||
|
||||
#tools {
|
||||
position: fixed;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.315);
|
||||
border-radius: 15px;
|
||||
/* padding-top: 5px;
|
||||
padding-bottom: 5px; */
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
#tools div {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#tools div svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
#tools.menu-darkmode div svg {
|
||||
stroke: white;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
#tools.menu-lightmode div svg {
|
||||
stroke: black;
|
||||
fill: black;
|
||||
}
|
||||
|
||||
#tools div:hover svg {
|
||||
stroke: rgb(75, 151, 151);
|
||||
fill: rgb(75, 151, 151);
|
||||
}
|
||||
|
||||
#footer {
|
||||
font-family: 'Inter';
|
||||
font-size: .75em;
|
||||
@ -702,6 +739,7 @@ label {
|
||||
padding: 5px 10px;
|
||||
z-index: 11;
|
||||
float: left;
|
||||
transition: all 300ms ease;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
-webkit-user-select: none;
|
||||
|
||||
168
editor.html
168
editor.html
@ -516,7 +516,173 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
</div>
|
||||
</div>
|
||||
<div id="graph"></div> <!--The graph canvas-->
|
||||
<div id="footer" class="menu-lightmode">
|
||||
<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>
|
||||
<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/) -->
|
||||
|
||||
@ -11,7 +11,7 @@ var darkMode = false;
|
||||
export function toggleTheme() {
|
||||
darkMode = !darkMode;
|
||||
|
||||
var menus = [mainMenu, sidePanel, filePanel, footer];
|
||||
var menus = [mainMenu, sidePanel, filePanel, tools, footer];
|
||||
Array.from(document.getElementsByClassName('menuitem')).forEach(item =>
|
||||
item !== fileMenu &&
|
||||
Array.from(item.getElementsByClassName('submenu')).forEach(subMenu => menus.push(<HTMLElement>subMenu))
|
||||
@ -68,6 +68,7 @@ Array.from(document.getElementsByClassName('submenu'))
|
||||
var lastSubMenu : HTMLElement | null = null;
|
||||
|
||||
const footer = <HTMLElement>document.getElementById('footer');
|
||||
const tools = <HTMLElement>document.getElementById('tools');
|
||||
|
||||
|
||||
function positionSubmenuBackdrop() {
|
||||
|
||||
82
images/cursor.svg
Normal file
82
images/cursor.svg
Normal file
@ -0,0 +1,82 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: 2023 David Mosbach <david.mosbach@campus.lmu.de>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<?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:#000000;stroke-width:0.87849;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
sodipodi:nodetypes="scccccccccccccs" />
|
||||
</g>
|
||||
</svg>
|
||||
88
images/select.svg
Normal file
88
images/select.svg
Normal file
@ -0,0 +1,88 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: 2023 David Mosbach <david.mosbach@campus.lmu.de>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<?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:#000000;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:#000000;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:#000000;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:#000000;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>
|
||||
Loading…
Reference in New Issue
Block a user