From 58ea4f821386eab76ba519259138f575a1b7d794 Mon Sep 17 00:00:00 2001
From: ducdat0507 <62660527+ducdat0507@users.noreply.github.com>
Date: Wed, 21 Dec 2022 22:26:00 +0700
Subject: [PATCH] Keep the tooltip on screen

---
 src/data/layers/factory.tsx        | 18 ++++++++++++++----
 src/data/layers/styles/factory.css |  2 +-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx
index e8b5322..9c3c51d 100644
--- a/src/data/layers/factory.tsx
+++ b/src/data/layers/factory.tsx
@@ -93,7 +93,7 @@ const factory = createLayer(id, () => {
         conveyor: {
             imageSrc: conveyor,
             name: "Conveyor",
-            description: "Moves 1 item per tick.",
+            description: "Moves items at 1 block per second.",
             tick: 1,
             ports: {
                 [Direction.Left]: {
@@ -107,7 +107,7 @@ const factory = createLayer(id, () => {
         square: {
             imageSrc: square,
             name: "Producer",
-            description: "Produces 1 square every 1 tick.",
+            description: "Produces 1 square every 1 second.",
             tick: 1,
             outputs: {
                 square: {
@@ -707,6 +707,7 @@ const factory = createLayer(id, () => {
     }
     function onFactoryMouseLeave() {
         isMouseHoverShown.value = false;
+        compHovered.value = undefined;
     }
 
     function onComponentMouseEnter(name: FactoryCompNames | "") {
@@ -748,9 +749,18 @@ const factory = createLayer(id, () => {
                 {compHovered.value !== undefined ? (
                     <div
                         class="info-container"
+                        id="factory-info"
                         style={{
-                            left: mouseCoords.x + "px",
-                            top: mouseCoords.y + "px"
+                            ...(mouseCoords.x +
+                                (document.getElementById("factory-info")?.clientWidth ?? 0) >
+                            app.view.width - 30
+                                ? { right: app.view.width - mouseCoords.x + "px" }
+                                : { left: mouseCoords.x + "px" }),
+                            ...(mouseCoords.y +
+                                (document.getElementById("factory-info")?.clientHeight ?? 0) >
+                            app.view.height - 30
+                                ? { bottom: app.view.height - mouseCoords.y + "px" }
+                                : { top: mouseCoords.y + "px" })
                         }}
                     >
                         <h3>{FACTORY_COMPONENTS[compHovered.value.type].name}</h3>
diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css
index 00d48ae..1cc656b 100644
--- a/src/data/layers/styles/factory.css
+++ b/src/data/layers/styles/factory.css
@@ -20,7 +20,7 @@
     width: max-content;
     max-width: 300px;
 
-    margin: 20px 0 0 10px;
+    margin: 20px 0 10px 10px;
     padding: 5px 10px;
 
     background: var(--background);