mgarin / weblaf

WebLaF is a fully open-source Look & Feel and component library written in pure Java for cross-platform desktop Swing applications.
http://weblookandfeel.com
GNU General Public License v3.0
1.13k stars 234 forks source link

Visual issue in round shape #598

Closed husker-dev closed 4 years ago

husker-dev commented 4 years ago

When I tested rounding I found this issue. It seems like shadow can't be rounded more than 10 (pixels probably). I also tried to set shadow's rounding value manually, but it didn't change

With shadow

image

<style type="button">
    <painter>
        <decorations>
            <decoration>
                <WebShape round="22,0,0,0" />
                <WebShadow type="outer" width="9" />
            </decoration>
        </decorations>
    </painter>
</style>

Without shadow

image

<style type="button">
    <painter>
        <decorations>
            <decoration>
                <WebShape round="22,0,0,0" />
                <WebShadow type="outer" color="0,0,0,0" />
            </decoration>
        </decorations>
    </painter>
</style>
mgarin commented 4 years ago

This seem to be a problem with shape calculation and not shadow: image

I might have an idea what causes it, but I'll have to check it. From a glance it does seem that it hits a limit of 50% of bounds height and doesn't go any further for shadow or background, while border actually doesn't care about it.

Also there is another problem you can see on screenshot above - the overkill round size is not taken into account and you can see shape stretching outside a bit. This is probably something I won't be touching as it is up to whoever makes the style to keep it sized reasonably for the given context.

mgarin commented 4 years ago

It seems that there are some major flaws with the shape creation on some edge cases like this one, so I'll be reworking it to fix the problem.

It fails not only when it doesn't have enough space - border/background/shade shapes are also sometimes inconsistent on large components.

mgarin commented 4 years ago

I've already made a local fix, but I'll need to heavily test it because this change affects every single component as most of them use WebShape that is getting a major change. So I'll probably release somewhere mid-day tomorrow, although it will only be available on snapshot builds for now.

mgarin commented 4 years ago

I've somewhat finished with the fix, but it will take a bit longer to wrap all changes that I've been working on locally. It shouldn't take more than a few hours though.

Here is the result example:

image

Note that in case you "overshoot" with the round it will still look weird:

image

Although shadow and background will now follow border to death. You can even see that background spreads over different bounds on top three buttons which is correct considering all three shapes basically have different bounds.

I thought about maybe limiting round to height/width, but then there are still cases when two rounded corners meet on a side - what should happen then? So I'll leave it as it as for now and see if I will find any good solution for it later.


There are also some niche cases which might still have problems even after these changes - specifically with shadow - but I was aware of those even before you've pointed out this bug and I'll be ironing them out later. No one discovered those yet anyway and probably won't due to specifics :)

mgarin commented 4 years ago

I've pushed fix for this issue along with other internal changes. WebShape should now work in the same way for borders, backgrounds and shadow (visually).

Snapshot v1.2.12 build will be available soon.