search

zsviczian / obsidian-excalidraw-plugin

A plugin to edit and view Excalidraw drawings in Obsidian
4.23k stars 231 forks source link

BUG: Right Click Menu Overflowing Off Screen #1841

Open WX-Zarroc66 opened 4 months ago

WX-Zarroc66 commented 4 months ago

Help me help you. I am a one man show doing this plugin as a part time hobby. There is no point in flooding me with issues, if there are too many, and they are poorly documented, I will just ignore them. Sorry...

Before creating a bug report, please

  1. review recent release notes - maybe there is already an answer,
  2. search issues (including closed ones) to see if there is anything similar.

⚠️ I will have to close all recorded bugs that do not provide this background information. Sorry, I need to control my workload/time. ⚠️

Your environment Please run Command Palette/Show Debug info in Obsidian and paste the result here.

SYSTEM INFO: Obsidian version: v1.6.3 Installer version: v1.4.13 Operating system: Windows 10 Home 10.0.19045 Login status: logged in Catalyst license: none Insider build toggle: off Live preview: on Base theme: adapt to system Community theme: ITS Theme v1.2.68 Snippets enabled: 6 Restricted mode: off Plugins installed: 30 Plugins enabled: 30 1: Excalidraw v2.2.7 2: Style Settings v1.0.8 3: Kanban v2.0.51 4: QuickAdd v1.9.0 5: Dataview v0.5.66 6: Iconize v2.12.1 7: Recent Files v1.4.1 8: File Color v1.1.0 9: Checklist v2.2.13 10: Leaflet v6.0.5 11: Meta Bind v1.1.2 12: Custom File Explorer sorting v2.1.11 13: April's Automatic Timelines v0.13.3 14: Hover Editor v0.11.20 15: Editing Toolbar v2.4.16 16: Various Complements v10.0.0 17: Supercharged Links v0.12.1 18: Initiative Tracker v13.0.12 19: Fantasy Statblocks v4.4.2 20: Dice Roller v11.0.4 21: Core Search Assistant v0.9.2 22: Broken Links v1.2.2 23: Highlightr v1.2.2 24: JS Engine v0.1.6 25: Annotator v0.2.11 26: Calendarium v1.3.3 27: Shiki Highlighter v0.3.2 28: Univer v1.1.0 29: Custom Frames v2.4.7 30: Vault Statistics v0.1.3

RECOMMENDATIONS: Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets. Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.

Describe the bug When right clicking on any of the elements added into one of my Excalidraw drawings; Arrows, square boxes, diamond boxes, or circle boxes. The menu that appear overflows off of my screen obscuring some of the selections.

I managed to replicate the issue by following the steps outlined within the 'Recommendations' section above. Within a freshly made vault with the only plugin being Excalidraw, the right click menu appeared normal. Upon installing the ITS Theme & Style Setting plugin the menu mimicked the described issue where the menu expanded and overflowed off the screen.

To Reproduce Steps to reproduce the behavior:

  1. Go to Excalidraw drawing
  2. Add element from the top selection bar
  3. Right click element
  4. See right click menu pop-up

Expected behavior When right clicking on elements in the past I've been able to scroll in this menu to see other elements, or it hasn't contained as many selections that push them off of the screen.

Screenshots Issue Screenshot

zsviczian commented 4 months ago

Yes, this is a known issue. If you know the solution, let me know... I couldn't figure out the css that leads to this behavior.

tobybaratta commented 4 months ago

I think I might have figured it out but I'm not 100% sure. It's been a while since I've written class components and this is a totally new codebase for me to poke at, but I might be right?

From my understanding of the rendering within onContextMenu the Context Menu is rendered as a list of list items with the className context-menu-item.

See: https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/7ee316a605f54dcf8305024726dde252b5765a2d/src/ExcalidrawView.ts#L4747C1-L4759C6

The separators are plain old <hr> elements (see below).

Those two are popped into a non-styled, non-named div (in onContextMenu) See: https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/7ee316a605f54dcf8305024726dde252b5765a2d/src/ExcalidrawView.ts#L4521C1-L4551C7

I believe that instead of a non-styled div as a parent, you might have better luck with making the div linked above a <menu> or <ol> or something like that. ((An <li> element is required by the HTML spec, to be, at some higher level within a <ol>, <ul>, or <menu> per the HTML Spec). There might be one much higher up the DOM tree, but not sure? Because I can't find the CSS for context-menu-item like I mentioned, I presume it's coming from somewhere else -- traditional naming conventions would suggest that there's a context-menu class somewhere that you might be able to nab.

Doing either (or both) of those might help. You also would likely need to set the style on that context-menu to have maxHeight: 100%; overflowY: scroll;. Honestly just those on the parent div might do it, but figured I'd offer probably slightly cleaner options?

I'm happy to collab or help on stuff as a dev, I just am still learning obsidian itself. :>

Edit: Sorry for the many edits, was trying to get the GitHub embed of code snippet link to work with multiple lines instead of uselessly showing "div" and "li" in links. Cannot figure it out ><