Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implementing a dropdown menu #39

Open
hak33m16 opened this issue Jan 16, 2023 · 1 comment
Open

Implementing a dropdown menu #39

hak33m16 opened this issue Jan 16, 2023 · 1 comment

Comments

@hak33m16
Copy link

Hi, I'm trying to implement a dropdown menu, similar to something you'd see here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown

I've got some basic code working for clicking the button/functionality, but I'm confused on how the actual layout portion would work. It seems like I'd need something similar to the position: absolute concept built into the library? How would you recommend going about this in the frame of furex?

As a starting point, this is the code I have for the button I'd like to have "children" buttons inside:

type TextBoxButton struct {
	BoxColor         color.Color
	HoverBoxColor    color.Color
	PressedBoxColor  color.Color
	TextColor        color.Color
	HoverTextColor   color.Color
	PressedTextColor color.Color
	Text             string
	FontFileName     string
	resourceManager  *managers.ResourceManager
	mouseover        bool
	pressed          bool
}

func (tbb *TextBoxButton) HandleDraw(screen *ebiten.Image, frame image.Rectangle) {
	var currentBoxColor color.Color
	var currentTextColor color.Color
	if tbb.mouseover {
		currentBoxColor = tbb.HoverBoxColor
		currentTextColor = tbb.HoverTextColor
	} else {
		currentBoxColor = tbb.BoxColor
		currentTextColor = tbb.TextColor
	}

	if tbb.pressed {
		currentBoxColor = tbb.PressedBoxColor
		currentTextColor = tbb.PressedTextColor
	}

	ebitenutil.DrawRect(
		screen,
		float64(frame.Min.X),
		float64(frame.Min.Y),
		float64(frame.Size().X),
		float64(frame.Size().Y),
		currentBoxColor,
	)

	textBounds := text.BoundString(*tbb.resourceManager.GetFont(tbb.FontFileName), tbb.Text)
	text.Draw(
		screen,
		tbb.Text,
		*tbb.resourceManager.GetFont(tbb.FontFileName),
		int((frame.Min.X+frame.Max.X)/2)-(textBounds.Dx()/2),
		int((frame.Min.Y+frame.Max.Y)/2)+textBounds.Size().Y-(textBounds.Dy()/2),
		currentTextColor,
	)
}

func (tbb *TextBoxButton) HandleMouseEnter(x, y int) bool {
	tbb.mouseover = true
	return true
}

func (tbb *TextBoxButton) HandleMouseLeave() {
	tbb.mouseover = false
}

func (tbb *TextBoxButton) HandlePress(x, y int, t ebiten.TouchID) {
	tbb.pressed = true
}

func (tbb *TextBoxButton) HandleRelease(x, y int, isCancel bool) {
	tbb.pressed = false
}

And what it looks like when I render it:
editor_1

This is another example:
aseprite_1
aseprite_2
aseprite_3

@yohamta
Copy link
Owner

yohamta commented Jan 16, 2023

Hi @hak33m16 👋
Thank you for the detailed question! The View already has the Position property and you can specify AbsolutePosition to it.
For example:

&View{
  Position: furex.PositionAbsolute,
  Left: 20,
  Top: 20,
  // ...
}

Could you check if it works in your program?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants