From a52fc647e33e338e00ef2ecd1db8c9ee87216352 Mon Sep 17 00:00:00 2001
From: Nicola <47360416+unsettledgames@users.noreply.github.com>
Date: Mon, 27 Dec 2021 19:11:59 +0100
Subject: [PATCH] Reduced tool size

Moved tool size buttons on the right, started lasso tool
---
 css/_canvas.scss               |  4 +-
 css/_tools-menu.scss           | 79 ++++++++++++++++------------------
 js/tools/LassoSelectionTool.js | 29 +++++++++++++
 views/tools-menu.hbs           | 52 +++++++++++++---------
 4 files changed, 98 insertions(+), 66 deletions(-)
 create mode 100644 js/tools/LassoSelectionTool.js

diff --git a/css/_canvas.scss b/css/_canvas.scss
index 5d02f4c..46f6b74 100644
--- a/css/_canvas.scss
+++ b/css/_canvas.scss
@@ -85,7 +85,7 @@
 
 #canvas-view {
 	bottom: 0px;
-	left: 64px;
+	left: 48px;
 	right: 48px;
 	top: 48px;
 	cursor: default;
@@ -97,7 +97,7 @@
 	box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
 	position: fixed;
 	bottom: 0px;
-	left: 64px;
+	left: 48px;
 	right: 48px;
 	top: 48px;
 	display: block;
diff --git a/css/_tools-menu.scss b/css/_tools-menu.scss
index de7dc48..894527e 100644
--- a/css/_tools-menu.scss
+++ b/css/_tools-menu.scss
@@ -1,7 +1,7 @@
 
 #tools-menu {
 	left: 0;
-	width: 64px;
+	width: 48px;
 	list-style-type: none;
 	top: 48px;
 	bottom: 0;
@@ -13,14 +13,10 @@
 	z-index: 1120;
 }
 
-
-
 #tools-menu li {
 	position: relative;
 }
 
-
-
 #tools-menu li button:first-child {
 	text-align: center;
 	border: none;
@@ -28,7 +24,8 @@
 	width: 100%;
 	padding: 0;
 	cursor: pointer;
-	height: 64px;
+	height: 48px;
+	z-index:0;
 }
 
 #tools-menu li button path {
@@ -48,23 +45,17 @@
 	fill: $baseselectedicon;
 }
 
-#tools-menu li.selected.expanded {
-	padding-bottom: 10px;
-}
-
-
 .tools-menu-sub-button {
 	text-align: center;
 	border: none;
 	background: none;
 	cursor: pointer;
-	width: 50%;
-	height: 22px;
-	display: none;
+	width: 22px !important;
+	height:24px !important;
+	display: inline-block;
 	line-height: 0;
 	overflow: hidden;
-	position: absolute;
-	bottom: 0;
+	position: relative;
 
 	path {
 		fill: $baseselectedicon !important;
@@ -77,37 +68,39 @@
 	}
 }
 
-#tools-menu li button#brush-bigger-button,
-#tools-menu li button#zoom-in-button,
-#tools-menu li button#eraser-bigger-button,
-#tools-menu li button#rectangle-bigger-button,
-#tools-menu li button#ellipse-bigger-button,
-#tools-menu li button#line-bigger-button {
-	left: 0;
+#tools-menu .size-buttons {
+	position:absolute;
+	display: none;
+	height:48px;
+	left:8px;
+	z-index:-1;
+	background-color: $basecolor !important;
 }
 
-#tools-menu li button#brush-smaller-button,
-#tools-menu li button#zoom-out-button,
-#tools-menu li button#eraser-smaller-button,
-#tools-menu li button#rectangle-smaller-button,
-#tools-menu li button#ellipse-smaller-button,
-#tools-menu li button#line-smaller-button {
-	right: 0;
+#tools-menu .size-buttons button {
+	text-align: center;
+	border: none;
+	padding: 0;
+	position: relative;
+	height:24px;
+	background-color: $baseselected !important;
+	cursor: pointer;
+	display:inline-block;
+	line-height: 0;
+	overflow: hidden;
+	width:22px;
 }
 
-#tools-menu li.selected button#brush-bigger-button,
-#tools-menu li.selected button#brush-smaller-button,
-#tools-menu li.selected button#zoom-in-button,
-#tools-menu li.selected button#zoom-out-button,
-#tools-menu li.selected button#eraser-bigger-button,
-#tools-menu li.selected button#eraser-smaller-button,
-#tools-menu li.selected button#rectangle-bigger-button,
-#tools-menu li.selected button#rectangle-smaller-button,
-#tools-menu li.selected button#ellipse-bigger-button,
-#tools-menu li.selected button#ellipse-smaller-button,
-#tools-menu li.selected button#line-bigger-button,
-#tools-menu li.selected button#line-smaller-button {
-	display: block;
+#tools-menu .size-buttons button:hover {
+	background:$baseselected !important;
+}
+
+#tools-menu .size-buttons button:active {
+	background:$basehovericon !important;
+}
+
+#tools-menu li.selected .size-buttons {
+	display:inline-block;
 }
 
 
diff --git a/js/tools/LassoSelectionTool.js b/js/tools/LassoSelectionTool.js
new file mode 100644
index 0000000..adc16aa
--- /dev/null
+++ b/js/tools/LassoSelectionTool.js
@@ -0,0 +1,29 @@
+class LassoSelectionTool extends SelectionTool {
+    constructor (name, options, switchFunc, moveTool) {
+
+    }
+
+    onStart(mousePos) {
+        super.onStart(mousePos);
+    }
+
+    onDrag(mousePos) {
+        super.onDrag(mousePos);
+    }
+
+    onEnd(mousePos) {
+        super.onEnd(mousePos);
+    }
+
+    onSelect(mousePos) {
+        super.onSelect(mousePos);
+    }
+
+    onDeselect(mousePos) {
+        super.onDeselect(mousePos);
+    }
+
+    drawSelection(mousePos) {
+
+    }
+}
\ No newline at end of file
diff --git a/views/tools-menu.hbs b/views/tools-menu.hbs
index 3af1966..3d25c66 100644
--- a/views/tools-menu.hbs
+++ b/views/tools-menu.hbs
@@ -1,21 +1,27 @@
 <ul id="tools-menu">
 	<li class="selected expanded">
-		<button title="Brush Tool (B)" id="brush-button">{{svg "pencil.svg" width="32" height="32"}}</button>
-		<button title="Increase Brush Size" id="brush-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
-		<button title="Decrease Brush Size" id="brush-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+		<button title="Brush Tool (B)" id="brush-button">{{svg "pencil.svg" width="24" height="24"}}</button>
+		<ul class="size-buttons">
+			<button title="Increase Brush Size" id="brush-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
+			<button title="Decrease Brush Size" id="brush-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+		</ul>
 	</li>
 
 	<li class = "expanded">
-		<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="32" height="32"}}</button>
-		<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
-		<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+		<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="24" height="24"}}</button>
+		<ul class="size-buttons">
+			<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
+			<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+		</ul>
 	</li>
 
 	<li class="expanded">
-		<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="32" height="32" id = "rectangle-empty-button-svg"}}
-		{{svg "fullrect.svg" width="32" height="32" id = "rectangle-full-button-svg" display = "none"}}</button>
-		<button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
-		<button title="Decrease Rectangle Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+		<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="24" height="24" id = "rectangle-empty-button-svg"}}
+		{{svg "fullrect.svg" width="24" height="24" id = "rectangle-full-button-svg" display = "none"}}</button>
+		<ul class="size-buttons">
+			<button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
+			<button title="Decrease Rectangle Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+		</ul>
 	</li>
 
 	<!-- TODO: [ELLIPSE] Once ellipse is ready for release make it visible by default -->
@@ -23,24 +29,28 @@
 		<!-- TODO: [ELLIPSE] Decide on a shortcut to use. "S" was chosen without any in-team consultation. -->
 		<!-- TODO: [ELLIPSE] Decide on icons to use. Current ones are quickly prepared drafts and display with incorrect color. -->
 		<button title="Ellipse Tool (S)" id="ellipse-button">
-			{{svg "ellipse.svg" width="32" height="32" id = "ellipse-empty-button-svg"}}
-			{{svg "filledellipse.svg" width="32" height="32" id = "ellipse-full-button-svg" display = "none"}}
+			{{svg "ellipse.svg" width="24" height="24" id = "ellipse-empty-button-svg"}}
+			{{svg "filledellipse.svg" width="24" height="24" id = "ellipse-full-button-svg" display = "none"}}
 		</button>
-		<button title="Increase Ellipse Size" id="ellipse-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
-		<button title="Decrease Ellipse Size" id="ellipse-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+		<ul class="size-buttons">
+			<button title="Increase Ellipse Size" id="ellipse-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
+			<button title="Decrease Ellipse Size" id="ellipse-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+		</ul>
 	</li>
 
 	<li class="expanded">
-		<button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="32" height="32"}}</button>
-		<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
-		<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+		<button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="24" height="24"}}</button>
+		<ul class="size-buttons">
+			<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
+			<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+		</ul>
 	</li>
 
-	<li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="32" height="32"}}</button></li>
+	<li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="24" height="24"}}</button></li>
 
-	<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="32" height="32"}}</button></li>
+	<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
 
-	<li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="32" height="32"}}</button></li>
+	<li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="24" height="24"}}</button></li>
 
-	<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "32" height = "32"}}</button><li>
+	<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "24" height = "24"}}</button><li>
 </ul>
\ No newline at end of file