From 024ceef0e00330dd0c83bc1f1630b2be80a4c4ee Mon Sep 17 00:00:00 2001
From: David Mosbach <david.mosbach@live.de>
Date: Tue, 29 Aug 2023 16:10:34 +0200
Subject: [PATCH] added cursor toolbar

---
 editor.css        |  38 +++++++++++
 editor.html       | 168 +++++++++++++++++++++++++++++++++++++++++++++-
 editor.ts         |   3 +-
 images/cursor.svg |  82 ++++++++++++++++++++++
 images/select.svg |  88 ++++++++++++++++++++++++
 start.sh          |   6 +-
 6 files changed, 381 insertions(+), 4 deletions(-)
 create mode 100644 images/cursor.svg
 create mode 100644 images/select.svg

diff --git a/editor.css b/editor.css
index c70c173..4fc7a6a 100644
--- a/editor.css
+++ b/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;
diff --git a/editor.html b/editor.html
index 2c2a32c..937c2db 100644
--- a/editor.html
+++ b/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/) -->
diff --git a/editor.ts b/editor.ts
index 753bc24..23bfffb 100644
--- a/editor.ts
+++ b/editor.ts
@@ -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() {
diff --git a/images/cursor.svg b/images/cursor.svg
new file mode 100644
index 0000000..90708a8
--- /dev/null
+++ b/images/cursor.svg
@@ -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>
diff --git a/images/select.svg b/images/select.svg
new file mode 100644
index 0000000..3f8ee78
--- /dev/null
+++ b/images/select.svg
@@ -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>
diff --git a/start.sh b/start.sh
index e4d1689..e59a4b3 100755
--- a/start.sh
+++ b/start.sh
@@ -6,8 +6,10 @@
 
 
 echo 'Transpiling to JS...'
-npx tsc
+npx tsc || exit 1
+
 echo 'Generating Webpack bundle...'
-npx webpack
+npx webpack || exit 1
+
 echo 'Starting server...'
 npx http-server --cors -o ./editor.html