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: { conveyor: {
imageSrc: conveyor, imageSrc: conveyor,
name: "Conveyor", name: "Conveyor",
description: "Moves 1 item per tick.", description: "Moves items at 1 block per second.",
tick: 1, tick: 1,
ports: { ports: {
[Direction.Left]: { [Direction.Left]: {
@ -107,7 +107,7 @@ const factory = createLayer(id, () => {
square: { square: {
imageSrc: square, imageSrc: square,
name: "Producer", name: "Producer",
description: "Produces 1 square every 1 tick.", description: "Produces 1 square every 1 second.",
tick: 1, tick: 1,
outputs: { outputs: {
square: { square: {
@ -707,6 +707,7 @@ const factory = createLayer(id, () => {
} }
function onFactoryMouseLeave() { function onFactoryMouseLeave() {
isMouseHoverShown.value = false; isMouseHoverShown.value = false;
compHovered.value = undefined;
} }
function onComponentMouseEnter(name: FactoryCompNames | "") { function onComponentMouseEnter(name: FactoryCompNames | "") {
@ -748,9 +749,18 @@ const factory = createLayer(id, () => {
{compHovered.value !== undefined ? ( {compHovered.value !== undefined ? (
<div <div
class="info-container" class="info-container"
id="factory-info"
style={{ style={{
left: mouseCoords.x + "px", ...(mouseCoords.x +
top: mouseCoords.y + "px" (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> <h3>{FACTORY_COMPONENTS[compHovered.value.type].name}</h3>

View file

@ -20,7 +20,7 @@
width: max-content; width: max-content;
max-width: 300px; max-width: 300px;
margin: 20px 0 0 10px; margin: 20px 0 10px 10px;
padding: 5px 10px; padding: 5px 10px;
background: var(--background); background: var(--background);