✅ | Selecting the visible element in a stack

[remote trellis]

I have made a system where elements can be selected and moved by the user however this means they can overlap. At the moment my detection system cannot account for which element is "ontop" Is there a requirement that would help me with this or some other method?

[merry quarry]

FancyMenu doesn’t expose a “topmost element” requirement you can query at runtime, so you can’t just ask the mod “which overlapping element is visible right now.” Instead you need to manage the stacking order yourself in the editor. Use the Layers widget (Window → Widgets → Layers) or right‑click menu commands like “Move One Layer Up/Down” to ensure the element you want selectable is rendered last (on top). That way your own detection logic can just grab the element that’s highest in that order.
More on manipulating the draw order / layer widget is covered in the FAQ entry about changing element layering.

[remote trellis]

This is not in the editing side but on the user experience side. I have made a system that detects if the users mouse is over an element. If they click and drag it it moves it. However there does not appear to be a requirement for top most element can you give me a different method to achieve the same result?

[merry quarry]

FancyMenu doesn’t expose a requirement to ask “which overlapped element is currently on top,” so your mouse-detection system has to rely on how the editor renders the order instead. The best way to control that is to make sure the element you expect the player to interact with is placed later in the render stack (use the Layers widget under Window → Widgets → Layers or the “Move One Layer Up/Down” commands so the element is drawn last and therefore receives the clicks). Once the draw order is deterministic, your detector can simply pick the element with the highest layer that matches the cursor position.
(For more on controlling element order, check the FAQ entry about changing layering as it explains those controls in detail.)

[remote trellis]

My idea is to make it when my mouse is hovered over any element it stores a number somewhere. That number represents where it is in the layer order. I then need to compare which number is the greatest or smallest to work out if it is on top or underneath. How would you do this?

[merry quarry]

FancyMenu doesn’t provide any requirement or placeholder that tells you which overlapping element is currently rendered on top, so you can’t read that order directly from the engine. The usual approach is to control the draw order yourself and track it alongside your hover system.

1. Decide on a fixed priority map. Use the Layers widget (Window → Widgets → Layers) or the “Move One Layer Up/Down” commands in the editor (see the FAQ entry on changing element layering) to determine which elements should appear above others. Note their intended priorities (e.g., assign each element a number you keep in your own data structure or FM variable).

2. Update that priority whenever a “move” happens. When the user drags an element, update the stored number for that element and (if needed) for the others so you mirror the visual stacking order. That way, your hover check can compare those stored priorities to decide which element is “on top.”

3. Use your stored priority values in the hover logic. When several elements overlap, compare their priority numbers and only move the one with the highest priority. Because you’re maintaining the mapping yourself, it stays in sync with what the player sees.

This keeps the logic deterministic without relying on a non-existent “topmost” requirement. For help with controlling how elements stack visually, the FAQ section about changing layering explains how to use the Layers widget and move elements up/down in the list.

[remote trellis]

Can you tell me exactly how you would implement this?

[merry quarry]

I’d keep the draw order in sync with your hover checks instead of trying to read it from FancyMenu (since there’s no exposed placeholder/requirement for “topmost element”). Here’s how I’d do it:

1. Pick a consistent priority map – decide on a number for each element that reflects where it sits in the render stack (higher number = drawn last/above others). You can keep that in FM variables, a JSON file in your resource folder, or any other storage you control.

2. Match it to the visual order – rearrange the actual elements in the Layers widget (menu bar → Window → Widgets → Layers) or by using “Move One Layer Up/Down” so they render in the same order you encoded. Make sure the highest-numbered element is the one drawn last.

3. Update whenever the player moves something – when your drag logic reorders elements visually, also update the stored priority numbers so your data stays aligned with what the player sees.

4. Hover detection compares those numbers – when multiple elements overlap, check which hovered element has the highest priority number from your own storage and only let that one respond to the click/drag.

Because you control both the number and the visual stack, you can deduce which one is “on top.” The FAQ entry about changing element layering explains how to manipulate Layers so you can be sure the drawn order matches your priorities.

[remote trellis]

can you explain in detail how you would do step 4 of comparing the numbers. I need a system that can compare lots of numbers at once from various sources

[merry quarry]

For step 4 you just need to treat your stored numbers as a simple priority list and always pick the element with the highest priority when multiple elements are hovered. Here’s how I’d implement it:

1. Collect all candidates at the cursor – when the mouse moves, run your detection logic and build a list of every element whose hitbox contains the cursor. Each entry in that list should include the element’s identifier plus the priority number you assigned to it earlier (from your own storage/variables).

2. Sort or scan the list – you don’t need anything fancy. Loop through the list and keep track of the element with the highest priority number (or lowest if that’s your convention). You can do this in one pass:

   topElement = null
   topPriority = -∞
   for each candidate:
       if candidate.priority > topPriority:
           topPriority = candidate.priority
           topElement = candidate
   

   If you’re comparing many sources at once, keep them in a single collection (array/map) so the loop can compare all of them in one shot. You only need to remember the best match.

3. Only act on the top element – once you know which element had the highest priority, ignore the other overlapping ones for that click/drag. That prevents your system from moving something that’s visually underneath.

4. Keep the stored priorities in sync – whenever an element is moved in the UI or re-stacked visually, update its priority value and, if needed, the others. That way the comparison above always reflects what the player actually sees.

Since FancyMenu doesn’t expose any API for “topmost element,” the key is keeping your priority numbers aligned with the actual layer order you arranged with the Layers widget (see the FAQ entry about changing element layering for tips on managing that order).

[remote trellis]

What is the best way to form an array in fancy menus?

[merry quarry]

FancyMenu doesn’t have a dedicated “array” data type, so you usually build one from text and then parse it with placeholders. The most common approach is to store your values in a single string (for example value1|value2|value3) and then use the split_text placeholder to split that string into parts. The placeholder accepts a separator (like | or ,) and gives you back the individual entries so you can compare them, loop through them via action scripts, etc.

If you already have JSON content, you can also use the json placeholder (plus Jayway JsonPath expressions) to navigate arrays inside that JSON blob. Both placeholders are covered in the Placeholders documentation, which explains the exact syntax and options for splitting text or parsing JSON.

[merry quarry]

✅ | Selecting the visible element in a stack