feat: 给大部分直角图标变为圆角图标 by MinecraftYJQ · Pull Request #5554 · HMCL-dev/HMCL

MinecraftYJQ · 2026-02-17T08:46:23Z

例如模组下载页面

Mine-diamond · 2026-02-17T14:28:25Z

个人认为 NBT 图标可能不太适合做圆角

由于 NBT 图标本身有一层边框，圆角会导致四个角的边框像素被裁切掉，可能会产生视觉上的破损感。（如图，复合标签图标）

修改后 (PR)	修改前 (原始)

我对 UI 设计没有太多把握，并不反对这个修改，只是看着怪怪的，只是想确认一下是否是预期的视觉风格？

MinecraftYJQ · 2026-02-17T14:31:33Z

个人认为 NBT 图标可能不太适合做圆角

由于 NBT 图标本身有一层边框，圆角会导致四个角的边框像素被裁切掉，可能会产生视觉上的破损感。（如图，复合标签图标）

修改后（PR） 修改前 (原始)

我对 UI 设计没有太多把握，并不反对这个修改，只是看着怪怪的，只是想确认一下是否是预期的视觉风格？

~~没太细看，主要是能替换的地方先替换了。~~
提交pr前也没确保所有页面的图标是否正常.jpg
抱歉这是我的失误
你这么一说我感觉这里也不应该要圆角

Copilot

Pull request overview

This pull request adds rounded corners to image icons throughout the application by introducing a new JFXImageView component that extends JavaFX's ImageView with automatic rounded corner clipping. The change enhances the visual consistency and modern appearance of the UI, particularly in areas like the mod download pages, world lists, resource pack displays, and game version selections.

Changes:

Created new JFXImageView class with 6px rounded corners applied via clip region
Replaced ImageView with JFXImageView in 13 UI files across world management, mod management, resource packs, datapacks, schematics, and download pages
Consolidated imports to use wildcard imports for org.jackhuang.hmcl.ui.construct.* package in several files

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
JFXImageView.java	New component extending ImageView with rounded corner clipping
ImagePickerItem.java	Updated image picker to use rounded corner image view
WorldListPage.java	Applied rounded corners to world icons in list view
WorldInfoPage.java	Applied rounded corners to world info page icon
WorldBackupsPage.java	Applied rounded corners to world backup icons
SchematicsPage.java	Applied rounded corners to schematic preview icons
ResourcepackListPage.java	Applied rounded corners to resource pack icons
ModListPageSkin.java	Applied rounded corners to mod icons in lists and dialogs
GameListPopupMenu.java	Applied rounded corners to game icons in popup menu
GameListCell.java	Applied rounded corners to game version icons in main list
DownloadPage.java	Applied rounded corners to mod icons on download detail pages
DownloadListPage.java	Applied rounded corners to mod icons in download search results
DatapackListPageSkin.java	Applied rounded corners to datapack icons
VersionsPage.java	Consolidated imports (but didn't update ImageView usage)

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-20T14:26:04Z

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/JFXImageView.java

+    public JFXImageView(String url) {
+        super(url);
+        init();
+    }


JFXImageView is missing a constructor that accepts an Image parameter. The standard JavaFX ImageView class has a constructor ImageView(Image image), which is used in several places in the codebase (e.g., HTMLRenderer.java:191, InstallerItem.java:298, LineComponent.java:216, VersionIconDialog.java:106, MainPage.java:106). If these locations need rounded corners in the future, they won't be able to use JFXImageView without first refactoring to set the image after construction.

Consider adding a constructor: public JFXImageView(Image image) { super(image); init(); }

Copilot · 2026-02-20T14:26:04Z

HMCL/src/main/java/org/jackhuang/hmcl/ui/download/VersionsPage.java

        private final VersionsPage control;

        private final TwoLineListItem twoLineListItem = new TwoLineListItem();
        private final ImageView imageView = new ImageView();


This ImageView displays version icons (like game versions, Forge, Fabric, etc.) and should probably also use JFXImageView for consistency with other icon displays in the application that were updated in this PR. The PR title indicates adding rounded corners to "most" icons, and this appears to be one that was missed.

To fix this, change line 156 to: private final ImageView imageView = new JFXImageView();

Copilot · 2026-02-20T14:26:05Z

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/ImageContainer.java

+        clip.setArcWidth(radius);
+        clip.setArcHeight(radius);


The arc width and arc height should be set to twice the radius value for proper rounded corners with the desired radius. In JavaFX, arcWidth and arcHeight define the full width and height of the ellipse used to round the corners, not the radius.

Change the implementation to: clip.setArcWidth(radius * 2); clip.setArcHeight(radius * 2);

Suggested change

clip.setArcWidth(radius);

clip.setArcHeight(radius);

clip.setArcWidth(radius * 2);

clip.setArcHeight(radius * 2);

Copilot · 2026-02-20T14:26:05Z

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/JFXImageView.java

+        clip.widthProperty().bind(this.fitWidthProperty());
+        clip.heightProperty().bind(this.fitHeightProperty());


The clip's width and height properties are bound to fitWidthProperty and fitHeightProperty. However, ImageView can have fitWidth and fitHeight set to -1 (which means "use the actual image size"). When FXUtils.limitSize() is called on images that are smaller than the max size, it sets fitWidth and fitHeight to -1. This will cause the clip Rectangle to have negative dimensions, which may result in the image not being displayed correctly or causing rendering issues.

You need to handle the case where fitWidth or fitHeight is -1. Consider binding to the actual bounds of the ImageView instead, or using a ChangeListener to update the clip dimensions based on whether fit dimensions are set or the actual image size should be used.

Copilot

Pull request overview

Copilot reviewed 17 out of 17 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-23T13:50:06Z

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/ImageContainer.java

+        clip.setArcWidth(radius);
+        clip.setArcHeight(radius);


The naming of the "cornerRadius" property is misleading. In JavaFX's Rectangle, setArcWidth and setArcHeight set the full diameter of the arc used for rounded corners, not the radius. The property should be renamed to "cornerArcSize" or "cornerDiameter", or alternatively, the implementation should multiply the radius value by 2 when setting the arc width/height. Currently, a cornerRadius value of 6.0 creates a corner with an arc diameter of 6 pixels (radius 3 pixels), not a radius of 6 pixels.

Suggested change

clip.setArcWidth(radius);

clip.setArcHeight(radius);

// JavaFX Rectangle#setArcWidth/Height expect the full diameter of the arc.

// Interpret the cornerRadius value as a true radius by doubling it here.

double diameter = radius * 2;

clip.setArcWidth(diameter);

clip.setArcHeight(diameter);

Copilot · 2026-02-23T13:50:06Z

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/ImagePickerItem.java

@@ -128,8 +126,4 @@ public ObjectProperty<Image> imageProperty() {
    public void setImage(Image image) {
        this.image.set(image);
    }


The public method getImageView() has been removed from ImagePickerItem. This is a breaking change for any external code or plugins that may have been using this method. While this improves encapsulation by not exposing internal implementation details, consider adding a deprecation notice in a previous release for smooth migration. The image functionality can still be accessed via imageProperty(), getImage(), and setImage() methods.

Suggested change

}

}

/**

* Returns the underlying image view/control.

*

* @deprecated This method exposes internal implementation details and will be removed

* in a future release. Use {@link #imageProperty()}, {@link #getImage()},

* or {@link #setImage(Image)} instead.

*/

@Deprecated

public ImageContainer getImageView() {

return imageContainer;

}

Copilot · 2026-02-23T13:50:07Z

HMCL/src/main/java/org/jackhuang/hmcl/ui/FXUtils.java

@@ -417,14 +415,6 @@ public static double getLimitHeight(Region region) {
        return region.getMaxHeight();
    }



The public static method limitingSize(Node, double, double) has been removed from FXUtils. This is a breaking change for any external code or plugins that may have been using this utility method. The functionality has been replaced by the new ImageContainer class which provides better encapsulation and rounded corner support. Consider adding a deprecation notice in a previous release for smooth migration, or providing a migration guide.

Suggested change

/**

* Restored for backward compatibility with older HMCL versions.

* <p>

* This method was previously used to limit the size of a {@link Node}.

* The functionality has been superseded by the {@code ImageContainer}

* class, which provides better encapsulation and rounded corner support.

* </p>

*

* @param node the node whose size should be limited

* @param width the maximum width

* @param height the maximum height

* @return never returns normally

* @deprecated Use the new {@code ImageContainer}-based API instead.

*/

@Deprecated

public static Node limitingSize(Node node, double width, double height) {

throw new UnsupportedOperationException(

"FXUtils.limitingSize(Node, double, double) has been removed. " +

"Please migrate to the ImageContainer-based API.");

}

MinecraftYJQ added 2 commits February 17, 2026 16:39

feat(image): 修改大部分直角图标为圆角

0595c10

style(code): change code.

bcf5eff

feat: 删除 NbtTreeView 的图标圆角

0c96b65

Glavo requested a review from Copilot February 20, 2026 14:21

Copilot started reviewing on behalf of Glavo February 20, 2026 14:22 View session

Copilot AI reviewed Feb 20, 2026

View reviewed changes

Glavo added 13 commits February 20, 2026 22:29

update

d23977b

update

e623510

update

7778ec3

Merge remote-tracking branch 'upstream/main' into dev-roundIcon

cd0a834

update

ea4e9f4

Merge remote-tracking branch 'upstream/main' into dev-roundIcon

92fbad3

update

4532a4e

update

228f221

update

66ec799

update

da5ab31

update

1429efb

update

e1a0248

update

aefdfc3

Glavo requested a review from Copilot February 23, 2026 13:44

Copilot started reviewing on behalf of Glavo February 23, 2026 13:45 View session

update

6a9289b

Copilot AI reviewed Feb 23, 2026

View reviewed changes

Glavo approved these changes Feb 23, 2026

View reviewed changes

Glavo merged commit c8e2802 into HMCL-dev:main Feb 23, 2026
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

feat: 给大部分直角图标变为圆角图标#5554

feat: 给大部分直角图标变为圆角图标#5554
Glavo merged 17 commits intoHMCL-dev:mainfrom
MinecraftYJQ:dev-roundIcon

MinecraftYJQ commented Feb 17, 2026

Uh oh!

Mine-diamond commented Feb 17, 2026

Uh oh!

MinecraftYJQ commented Feb 17, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		clip.widthProperty().bind(this.fitWidthProperty());
		clip.heightProperty().bind(this.fitHeightProperty());

-        clip.setArcWidth(radius);
-        clip.setArcHeight(radius);
+        // JavaFX Rectangle#setArcWidth/Height expect the full diameter of the arc.
+        // Interpret the cornerRadius value as a true radius by doubling it here.
+        double diameter = radius * 2;
+        clip.setArcWidth(diameter);
+        clip.setArcHeight(diameter);

-    }
+    }
+    /**
+     * Returns the underlying image view/control.
+     *
+     * @deprecated This method exposes internal implementation details and will be removed
+     *             in a future release. Use {@link #imageProperty()}, {@link #getImage()},
+     *             or {@link #setImage(Image)} instead.
+     */
+    @Deprecated
+    public ImageContainer getImageView() {
+        return imageContainer;
+    }

		@@ -417,14 +415,6 @@ public static double getLimitHeight(Region region) {
		return region.getMaxHeight();
		}

+    /**
+     * Restored for backward compatibility with older HMCL versions.
+     * <p>
+     * This method was previously used to limit the size of a {@link Node}.
+     * The functionality has been superseded by the {@code ImageContainer}
+     * class, which provides better encapsulation and rounded corner support.
+     * </p>
+     *
+     * @param node   the node whose size should be limited
+     * @param width  the maximum width
+     * @param height the maximum height
+     * @return never returns normally
+     * @deprecated Use the new {@code ImageContainer}-based API instead.
+     */
+    @Deprecated
+    public static Node limitingSize(Node node, double width, double height) {
+        throw new UnsupportedOperationException(
+                "FXUtils.limitingSize(Node, double, double) has been removed. " +
+                "Please migrate to the ImageContainer-based API.");
+    }

Comments

Conversation

MinecraftYJQ commented Feb 17, 2026

Uh oh!

Mine-diamond commented Feb 17, 2026

Uh oh!

MinecraftYJQ commented Feb 17, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants