Keep the tooltip on screen

This commit is contained in:
ducdat0507 2022-12-21 22:26:00 +07:00
parent fcb2f58986
commit 58ea4f8213
2 changed files with 15 additions and 5 deletions

View file

@ -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>

View file

@ -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);