From 6f0395798a1196d0450a90dfea81c8844ccddb4b Mon Sep 17 00:00:00 2001
From: Jim Richter <jim-x@web.de>
Date: Sat, 13 Mar 2021 01:32:41 +0100
Subject: [PATCH] feat(ui): minor fixes

---
 view/public/global.css                    |  8 +++++++-
 view/src/components/Analyzer.svelte       |  2 +-
 view/src/components/Editor/Editor.svelte  |  2 +-
 view/src/components/Editor/OrbView.ts     |  7 ++++---
 view/src/components/Editor/Painter.svelte | 11 ++++++-----
 view/src/icons/Cross.svelte               | 15 +++++++++++----
 view/src/icons/Plus.svelte                | 21 +++++++++++++++++++++
 view/src/icons/index.ts                   |  3 ++-
 view/src/routes/list.svelte               | 17 ++++++++++-------
 view/src/routes/main.svelte               |  5 +++++
 10 files changed, 68 insertions(+), 23 deletions(-)
 create mode 100644 view/src/icons/Plus.svelte

diff --git a/view/public/global.css b/view/public/global.css
index 6867ff9..684e505 100755
--- a/view/public/global.css
+++ b/view/public/global.css
@@ -37,6 +37,13 @@ input, button, select, textarea {
 	box-sizing: border-box;
 	border: 1px solid #ccc;
 	border-radius: 2px;
+	background-color: #000000;
+	outline: none;
+	color: white;
+	cursor: pointer;
+	border: none;
+	padding: 4px 9px;
+	border-radius: 0px;
 }
 
 input:disabled {
@@ -44,7 +51,6 @@ input:disabled {
 }
 
 button {
-	background-color: #f4f4f4;
 	outline: none;
 	cursor: pointer;
 }
diff --git a/view/src/components/Analyzer.svelte b/view/src/components/Analyzer.svelte
index 574e3a3..a046da6 100644
--- a/view/src/components/Analyzer.svelte
+++ b/view/src/components/Analyzer.svelte
@@ -44,7 +44,7 @@
         ) / 100}%
       </p>
       <div
-        transition:scaleX={{ duration: 500, delay: i * 200 }}
+        in:scaleX={{ duration: 500, delay: i * 200 }}
         class="bar"
         style={`width: ${
           (correctDistortion ? color.value : color.distortedValue) * 100
diff --git a/view/src/components/Editor/Editor.svelte b/view/src/components/Editor/Editor.svelte
index 6ea685b..c0d6d47 100644
--- a/view/src/components/Editor/Editor.svelte
+++ b/view/src/components/Editor/Editor.svelte
@@ -39,7 +39,7 @@
     overflow: hidden;
     display: grid;
     height: 100%;
-    grid-template-columns: 50px 1fr;
+    grid-template-columns: 75px 1fr;
     grid-template-rows: 30px 1fr 30px;
     gap: 0px 0px;
     grid-template-areas:
diff --git a/view/src/components/Editor/OrbView.ts b/view/src/components/Editor/OrbView.ts
index 0df234a..f6b73ae 100644
--- a/view/src/components/Editor/OrbView.ts
+++ b/view/src/components/Editor/OrbView.ts
@@ -2,7 +2,6 @@ import { Renderer, Camera, Transform, Texture, Raycast, Sphere, Program, Mesh }
 import { Orbit } from "./CustomOrbit"
 import { bufToImageUrl } from "../../helpers";
 
-
 import VertexShader from "./Orb.vert";
 import FragmentShader from "./Orb.frag";
 import Toast from "../Toast";
@@ -21,7 +20,9 @@ export default (image: Image, canvas2D: CanvasRenderingContext2D, canvas3D: HTML
   const controls = new Orbit(camera, {
     enablePan: false,
     enableZoom: false,
-    rotateSpeed: -0.1
+    rotateSpeed: -0.5,
+    ease: 0,
+    inertia: 0,
   });
 
   function resize() {
@@ -107,7 +108,7 @@ export default (image: Image, canvas2D: CanvasRenderingContext2D, canvas3D: HTML
 
   function start() {
     !hasConfirmed && Toast.confirm("Drawing does not work correctly in 3D at the moment").then(c => {
-      hasConfirmed = c;
+      hasConfirmed = c === true;
     })
     if (shouldBeRendering) return;
 
diff --git a/view/src/components/Editor/Painter.svelte b/view/src/components/Editor/Painter.svelte
index 66bc2eb..a012829 100644
--- a/view/src/components/Editor/Painter.svelte
+++ b/view/src/components/Editor/Painter.svelte
@@ -111,8 +111,6 @@
     cx.arc(x, y, brushRadius * wrapperHeightRatio, 0, 2 * Math.PI);
     cx.fill();
     cx.closePath();
-
-    orb.updateOverlay();
   }
 
   let polygonPoints = [];
@@ -158,7 +156,12 @@
     e.preventDefault();
 
     mode = mode === "2d" ? "3d" : "2d";
-    orb.updateOverlay();
+
+    if (mode === "3d") {
+      if (!orb) orb = OrbView(image, cx1, canvas3D);
+      orb.updateOverlay();
+    }
+
     mode === "2d" ? orb.stop() : orb.start();
   }
 
@@ -323,8 +326,6 @@
 
     handleResize();
 
-    orb = OrbView(image, cx1, canvas3D);
-
     setTimeout(() => handleResize(), 500);
     setTimeout(() => handleResize(), 2000);
   });
diff --git a/view/src/icons/Cross.svelte b/view/src/icons/Cross.svelte
index 68cadcd..17cf907 100644
--- a/view/src/icons/Cross.svelte
+++ b/view/src/icons/Cross.svelte
@@ -1,6 +1,12 @@
+<script>
+  export let w = 80;
+  export let color = "black";
+  export let weight = 1;
+</script>
+
 <svg
-  width="82"
-  height="82"
+  width={w}
+  height={w}
   viewBox="0 0 82 82"
   fill="none"
   style="height: 100%;"
@@ -8,7 +14,8 @@
 >
   <path
     d="M41 0V81.5M81.75 40.75L0.25 40.75"
-    stroke="black"
-    stroke-width="0.75px"
+    stroke={color}
+    vector-effect="non-scaling-stroke"
+    stroke-width="{weight}px"
   />
 </svg>
diff --git a/view/src/icons/Plus.svelte b/view/src/icons/Plus.svelte
new file mode 100644
index 0000000..17cf907
--- /dev/null
+++ b/view/src/icons/Plus.svelte
@@ -0,0 +1,21 @@
+<script>
+  export let w = 80;
+  export let color = "black";
+  export let weight = 1;
+</script>
+
+<svg
+  width={w}
+  height={w}
+  viewBox="0 0 82 82"
+  fill="none"
+  style="height: 100%;"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M41 0V81.5M81.75 40.75L0.25 40.75"
+    stroke={color}
+    vector-effect="non-scaling-stroke"
+    stroke-width="{weight}px"
+  />
+</svg>
diff --git a/view/src/icons/index.ts b/view/src/icons/index.ts
index 85177f9..3e87783 100644
--- a/view/src/icons/index.ts
+++ b/view/src/icons/index.ts
@@ -1 +1,2 @@
-export { default as Cross } from "./Cross.svelte"
\ No newline at end of file
+export { default as Cross } from "./Cross.svelte"
+export { default as Plus } from "./Plus.svelte"
\ No newline at end of file
diff --git a/view/src/routes/list.svelte b/view/src/routes/list.svelte
index 79fd4b2..047485e 100644
--- a/view/src/routes/list.svelte
+++ b/view/src/routes/list.svelte
@@ -95,30 +95,33 @@
   {/each}
 
   <div id="cross-wrapper" on:click={() => route.set("main")}>
-    <Cross />
+    <Cross w={20} color="white" weight={2} />
     <p>Add more images</p>
   </div>
 </main>
 
 <style>
   #cross-wrapper {
-    margin-top: 40px;
+    margin-top: 10px;
     display: flex;
     align-items: center;
+    background-color: black;
+    padding: 10px;
+    width: fit-content;
+    cursor: pointer;
   }
   #cross-wrapper > p {
+    margin: 0;
+    color: white;
     margin-left: 10px;
   }
   main {
-    height: 100%;
     max-width: 640px;
     margin: 0 auto;
   }
 
-  @media (max-width: 640px) {
-    main {
-      max-width: none;
-    }
+  h4 {
+    margin: 10px 0px;
   }
 
   .list-item {
diff --git a/view/src/routes/main.svelte b/view/src/routes/main.svelte
index 409dd53..22fd52f 100755
--- a/view/src/routes/main.svelte
+++ b/view/src/routes/main.svelte
@@ -117,6 +117,11 @@
     align-items: center;
     padding: 20px;
     outline: solid thin black;
+    cursor: pointer;
+  }
+
+  .inner-wrapper:hover {
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
   }
 
   p {