Skip to content

UI Fixes#15

Open
EastArctica wants to merge 8 commits intomainfrom
ui-fixes
Open

UI Fixes#15
EastArctica wants to merge 8 commits intomainfrom
ui-fixes

Conversation

@EastArctica
Copy link
Collaborator

@EastArctica EastArctica commented Mar 1, 2026

  • Checkboxes now have distinct visual states when hovered checked/unchecked
  • Save hover color now properly displays when file is opened -> edited -> saved, previously while hovered it would consistently display the unsaved darker yellow color. This now properly displays the saved hover color.
  • Previously the editor's redo functionality would trigger any time Y was pressed instead of requiring Ctrl+Y
  • Fixes a bug where hovering between two elements would trigger display the hover on both elements
  • Add padding to ui elements in settings dialogue
  • Add hover colors to enabled/disabled & running/stopped buttons
  • Editor scrolling + line rendering fixes
  • Fix 1.21.5 background rendering

Summary by CodeRabbit

  • New Features

    • Buttons now dynamically highlight with state-specific colors based on enabled/disabled and running/stopped statuses.
    • Enhanced editor with improved scroll wheel sensitivity, pixel-based scrolling, and a visible line-number gutter that shifts rendering, dropdowns, and overlays.
  • Bug Fixes

    • Refined hover detection boundaries for buttons and checkboxes.
    • Improved visual alignment and spacing across settings fields (minor horizontal and vertical offsets).
    • Improved cursor centering, scrolling, and overlay/background rendering behavior.

@coderabbitai
Copy link

coderabbitai bot commented Mar 1, 2026

📝 Walkthrough

Walkthrough

Updates add state-aware highlight colors for container buttons, refactor EditorScreen to support a line-number gutter with pixel-based scrolling and adjusted input/render offsets, and make small spacing/offset tweaks across multiple GUI elements and fields.

Changes

Cohort / File(s) Summary
Container Button State Colors
common/src/main/java/com/jsmacrosce/jsmacros/client/gui/containers/MacroContainer.java, common/src/main/java/com/jsmacrosce/jsmacros/client/gui/containers/ServiceContainer.java
Button highlight colors made dynamic based on enabled/running state; click handlers update highlight colors alongside toggles; initial construction uses conditional highlight color.
EditorScreen: Gutter & Scrolling
common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/EditorScreen.java
Add SCROLL_WHEEL_SENSITIVITY and lineNumWidth; implement pixel-based scrolling, gutter-aware rendering and input coordinate offsets, adjust cursor-centering, page navigation, scissor regions, and dropdown placement.
Settings Fields Layout
common/src/main/java/com/jsmacrosce/jsmacros/client/gui/settings/CategoryTreeContainer.java, common/src/main/java/com/jsmacrosce/jsmacros/client/gui/settings/settingfields/BooleanField.java, .../DoubleField.java, .../FileField.java, .../FloatField.java, .../IntField.java, .../LongField.java, .../OptionsField.java, .../StringField.java
Increase vertical height allocation by 1 pixel (lineHeight + 3) and shift label rendering horizontally by +2 px in field render methods.
Basic GUI Element Rendering
common/src/main/java/com/jsmacrosce/wagyourgui/elements/AnnotatedCheckBox.java, common/src/main/java/com/jsmacrosce/wagyourgui/elements/Button.java
Adjust non-centered text left padding from +1 to +2 px; tighten hover boundary checks and unify hover/fill/outline logic for checkboxes.
Screen Background / Overlay Rendering
common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/CancelScreen.java, common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/MacroScreen.java, common/src/main/java/com/jsmacrosce/wagyourgui/BaseScreen.java
Add conditional/background render calls and route overlay rendering to overlay.render(...) when present; background render guarded for specific version via inline directive.

Sequence Diagram(s)

sequenceDiagram
    participant User as User
    participant Editor as EditorScreen
    participant Cursor as CursorManager
    participant Render as RenderEngine
    participant Dropdown as AutocompleteDropdown

    User->>Editor: mouse scroll / click / key (move cursor)
    Editor->>Editor: compute contentHeight, viewportHeight, maxScroll
    Editor->>Cursor: update cursor position (line, column)
    Editor->>Editor: scrollToCursor() → compute new scroll (pixel-based) considering lineNumWidth
    Editor->>Render: set scissor(region excluding gutter) and render text/content at offset (lineNumWidth)
    Render->>Dropdown: position dropdown at (x + lineNumWidth, y) and render if visible
    Render-->>User: updated frame (gutter, content, highlights)
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 A tiny gutter, a scroll that sings,
Buttons that blaze with enabled wings.
Fields stretch a pixel, text shifts askew,
Hover and highlight—now dancing anew.
Hooray, I nibble bugs and ship this view! 🥕✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 2.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title 'UI Fixes' is vague and generic, using a non-descriptive umbrella term that does not convey specific information about the changeset. Consider a more specific title that highlights a primary change, such as 'Add hover state colors to buttons and checkboxes' or 'Improve editor scrolling and UI element spacing'.
✅ Passed checks (1 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch ui-fixes

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/EditorScreen.java (1)

738-739: Wheel-scroll comment no longer matches implementation.

Line [738] says “~40px per click”, but SCROLL_WHEEL_SENSITIVITY is 50.0. Update the comment to prevent future confusion during tuning.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/EditorScreen.java`
around lines 738 - 739, Update the inline comment above the viewportHeight
calculation to reflect the actual scroll wheel tuning: replace “~40px per click”
with the correct value that matches SCROLL_WHEEL_SENSITIVITY (50.0) so the
comment aligns with the implemented behavior; locate the comment near the
viewportHeight calculation and reference SCROLL_WHEEL_SENSITIVITY and the
viewportHeight computation in your update.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/EditorScreen.java`:
- Around line 219-224: The computed lastLine can exceed the actual content for
short files causing lineNumWidth to be too large; clamp lastLine to the real
final line index before measuring width. After computing lastLine from
scroll/viewportHeight, set lastLine = Math.min(lastLine, <actualLastIndex>)
where <actualLastIndex> is the actual last line index for the document (e.g.
totalLines - 1 or getLineCount() - 1), then compute lineNumWidth using
font.width(...). Update the EditorScreen variables (firstLine, lastLine,
lineSpread, viewportHeight, lineNumWidth) accordingly so the gutter width
reflects content, not the viewport.
- Around line 803-806: In EditorScreen where text is trimmed (uses contentWidth,
ellipsesWidth, minecraft.font.substrByWidth,
Language.getInstance().getVisualOrder, and FormattedCharSequence.composite),
guard the computed trim width so it cannot be non-positive: compute int
trimWidth = contentWidth - 10 - ellipsesWidth, then if (trimWidth <= 0) return
ellipses (or the ellipses FormattedCharSequence) immediately; otherwise call
substrByWidth(trimWidth) and proceed with getVisualOrder and composite. This
prevents passing non-positive widths to substrByWidth and avoids unstable
trimming on narrow viewports.

---

Nitpick comments:
In
`@common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/EditorScreen.java`:
- Around line 738-739: Update the inline comment above the viewportHeight
calculation to reflect the actual scroll wheel tuning: replace “~40px per click”
with the correct value that matches SCROLL_WHEEL_SENSITIVITY (50.0) so the
comment aligns with the implemented behavior; locate the comment near the
viewportHeight calculation and reference SCROLL_WHEEL_SENSITIVITY and the
viewportHeight computation in your update.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 95527aa and 38c981b.

📒 Files selected for processing (14)
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/containers/MacroContainer.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/containers/ServiceContainer.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/EditorScreen.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/settings/CategoryTreeContainer.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/settings/settingfields/BooleanField.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/settings/settingfields/DoubleField.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/settings/settingfields/FileField.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/settings/settingfields/FloatField.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/settings/settingfields/IntField.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/settings/settingfields/LongField.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/settings/settingfields/OptionsField.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/settings/settingfields/StringField.java
  • common/src/main/java/com/jsmacrosce/wagyourgui/elements/AnnotatedCheckBox.java
  • common/src/main/java/com/jsmacrosce/wagyourgui/elements/Button.java

Comment on lines +219 to 224
firstLine = scroll / lineSpread; // floor: include partially-visible top line
lastLine = (int) Math.ceil((scroll + viewportHeight) / lineSpread) - 1; // include partially-visible bottom line
// Gutter width: measure the widest line number visible (lastLine+1, 1-indexed) plus 4px padding.
if (lineSpread > 0) {
lineNumWidth = font.width(Component.literal((lastLine + 1) + ".").withStyle(defaultStyle)) + 4;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Clamp gutter width to actual content line count.

On Lines [220-223], lastLine can exceed the real last line when the viewport is taller than content, which makes lineNumWidth too wide for short files.

💡 Proposed fix
-        firstLine = scroll / lineSpread; // floor: include partially-visible top line
-        lastLine = (int) Math.ceil((scroll + viewportHeight) / lineSpread) - 1; // include partially-visible bottom line
+        firstLine = scroll / lineSpread; // floor: include partially-visible top line
+        lastLine = (int) Math.ceil((scroll + viewportHeight) / lineSpread) - 1; // include partially-visible bottom line
         // Gutter width: measure the widest line number visible (lastLine+1, 1-indexed) plus 4px padding.
         if (lineSpread > 0) {
-            lineNumWidth = font.width(Component.literal((lastLine + 1) + ".").withStyle(defaultStyle)) + 4;
+            int maxVisibleLine = Math.min(totalLines - 1, Math.max(firstLine, lastLine));
+            lineNumWidth = font.width(Component.literal((maxVisibleLine + 1) + ".").withStyle(defaultStyle)) + 4;
         }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/EditorScreen.java`
around lines 219 - 224, The computed lastLine can exceed the actual content for
short files causing lineNumWidth to be too large; clamp lastLine to the real
final line index before measuring width. After computing lastLine from
scroll/viewportHeight, set lastLine = Math.min(lastLine, <actualLastIndex>)
where <actualLastIndex> is the actual last line index for the document (e.g.
totalLines - 1 or getLineCount() - 1), then compute lineNumWidth using
font.width(...). Update the EditorScreen variables (firstLine, lastLine,
lineSpread, viewportHeight, lineNumWidth) accordingly so the gutter width
reflects content, not the viewport.

Comment on lines +803 to 806
int contentWidth = width - 10 - (lineNumWidth + 2); // total minus scrollbar minus gutter
if (minecraft.font.width(text) > contentWidth) {
FormattedCharSequence trimmed = Language.getInstance().getVisualOrder(minecraft.font.substrByWidth(text, contentWidth - 10 - ellipsesWidth));
return FormattedCharSequence.composite(trimmed, ellipses);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Guard trim width against narrow viewport/gutter combinations.

On Lines [803-806], contentWidth - 10 - ellipsesWidth can go non-positive on narrow screens, which can produce unstable trimming behavior.

💡 Proposed fix
-        int contentWidth = width - 10 - (lineNumWidth + 2); // total minus scrollbar minus gutter
-        if (minecraft.font.width(text) > contentWidth) {
-            FormattedCharSequence trimmed = Language.getInstance().getVisualOrder(minecraft.font.substrByWidth(text, contentWidth - 10 - ellipsesWidth));
+        int contentWidth = width - 10 - (lineNumWidth + 2); // total minus scrollbar minus gutter
+        int trimWidth = Math.max(0, contentWidth - 10 - ellipsesWidth);
+        if (minecraft.font.width(text) > contentWidth && trimWidth > 0) {
+            FormattedCharSequence trimmed = Language.getInstance().getVisualOrder(minecraft.font.substrByWidth(text, trimWidth));
             return FormattedCharSequence.composite(trimmed, ellipses);
+        } else if (minecraft.font.width(text) > contentWidth) {
+            return ellipses;
         } else {
             return text.getVisualOrderText();
         }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/EditorScreen.java`
around lines 803 - 806, In EditorScreen where text is trimmed (uses
contentWidth, ellipsesWidth, minecraft.font.substrByWidth,
Language.getInstance().getVisualOrder, and FormattedCharSequence.composite),
guard the computed trim width so it cannot be non-positive: compute int
trimWidth = contentWidth - 10 - ellipsesWidth, then if (trimWidth <= 0) return
ellipses (or the ellipses FormattedCharSequence) immediately; otherwise call
substrByWidth(trimWidth) and proceed with getVisualOrder and composite. This
prevents passing non-positive widths to substrByWidth and avoids unstable
trimming on narrow viewports.

Signed-off-by: Jack Manning <eastarctica@gmail.com>
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/MacroScreen.java`:
- Around line 229-231: MacroScreen.render currently calls
overlay.render(drawContext, mouseX, mouseY, delta) but skips the background;
update MacroScreen.render to either call super.render(drawContext, mouseX,
mouseY, delta) at the start or explicitly invoke
this.renderBackground(drawContext) before calling overlay.render to restore the
BaseScreen background behavior and ensure the overlay renders on top.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 38c981b and a1d483c.

📒 Files selected for processing (4)
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/CancelScreen.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/EditorScreen.java
  • common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/MacroScreen.java
  • common/src/main/java/com/jsmacrosce/wagyourgui/BaseScreen.java

Comment on lines +229 to +231
if (overlay != null) {
overlay.render(drawContext, mouseX, mouseY, delta);
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# Find BaseScreen.java location
fd -t f "BaseScreen\.java" --type f

# Search for BaseScreen render method with context
rg -n -B 3 -A 25 'public void render\(' --glob '**/BaseScreen.java'

Repository: JsMacrosCE/JsMacros

Length of output: 2774


Call super.render() or add missing renderBackground() call.

The render method in BaseScreen calls this.renderBackground() before rendering the overlay. MacroScreen overrides render() but skips the background rendering entirely, calling only overlay.render(). This will result in the screen background not being rendered.

Replace lines 229-231 with super.render(drawContext, mouseX, mouseY, delta); or add the missing background rendering call explicitly.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@common/src/main/java/com/jsmacrosce/jsmacros/client/gui/screens/MacroScreen.java`
around lines 229 - 231, MacroScreen.render currently calls
overlay.render(drawContext, mouseX, mouseY, delta) but skips the background;
update MacroScreen.render to either call super.render(drawContext, mouseX,
mouseY, delta) at the start or explicitly invoke
this.renderBackground(drawContext) before calling overlay.render to restore the
BaseScreen background behavior and ensure the overlay renders on top.

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

Successfully merging this pull request may close these issues.

1 participant