Image doesn't scale correctly in SwiftUI Mac App about nukeui HOT 11 CLOSED

Interesting. I guess from an ergonomics POV, I'd expect it to feel natural, responding to .contentMode for example or even better the built-in approach resizable + aspectRatio.

I'll take a look at the code, and feedback at some point when I have some more time. Thanks for responding!

from nukeui.

I've been playing with AsyncImage the past few days and AFAICT we don't have control over the caching etc... so I'm keen (pun not intended 🤣) to use your library still. Getting this to work nicely would be amazing but I realise I'm not your priority ;)

As an OSS contributor myself, I really appreciate the effort you've put it to your library, its documentation and even this conversation. Thanks for all the hard work!

from nukeui.

I don't have a ton of time atm, I'm working a lot more on some backend/framework implementations where I'm planning to work heavily with your Pulse framework. For the moment I reverted to your original implementation and that's working fine for me.

I absolutely would love to help you out so if I can carve out some time in the near future, I'll get back to you 👍

from nukeui.

Thanks!

This is the part of the API I haven't finished working on yet.

Currently, LazyImage works differently to Image.

The image view is lazy and doesn't know the size of the image before it downloads it. Thus, you must specify the view size before loading the image. By default, the image will resize preserving the aspect ratio to fill the available space. You can change this behavior by passing a different content mode.

LazyImage(source: "https://example.com/image.jpeg")
    .contentMode(.center) // .aspectFit, .aspectFill, .center, .fill
    .frame(height: 300)

In that sense, it acts more like UIImageView does. So. unlike Image, it doesn't support aspectRatio API.

I would appreciate any feedback on these APIs. I'm still not sure how to best design it.

from nukeui.

The main challenge is that LazyImage has to use three different subviews to display an image: one for a regular image, one for animated images, and one for video (and soon more for WebP animated images and APNG). Otherwise, I would've provided an API like that:

LazyImage(source: ..., image: { image in
    image
        .resizable()
        .aspectRatio(1, contentMode: .fit)
}

from nukeui.

Yeah I noticed you've built something more complex. I wonder if perhaps you could just break those other features out where they make more sense.

The new AsyncImage from WWDC for example is a really nice API and matching that could be really great?

from nukeui.

I'm working towards that. I have an idea how I can prove an API similar to AsyncImage while also supporting more advanced features (animated images).

But I'm not sure I agree with AsyncImage default behavior. I think the default should be resizable() and contentMode: .fill. What do you think?

from nukeui.

Yeah I guess I don't really mind as long as its changeable tbh.

from nukeui.

So, as a temporary solution we could use something like?

struct CoolImage: View {
    
    var source: URL?
    var resizingMode: ImageProcessors.Resize.ContentMode = .aspectFill
    
    var body: some View {
        GeometryReader { gp in
            LazyImage(source: source)
                .processors([ImageProcessors.Resize(size: gp.size, unit: .points, contentMode: resizingMode, crop: true, upscale: true)])
        }
    }
}

Perhaps I'm not getting how to use library correctly, but this seem to work fine.

from nukeui.

FYI, I've reverted for the moment to the old FetchImage implementation directly and that works fine, but would be great to use this new type as I think its far better from an API POV 👍

I'm trying to wrap my head around how to support these different scaling mods on macOS, but without experience shipping macOS apps (except for the ones written in SwiftUI), it's a bit hard. I would appreciate contributions in this area.

from nukeui.

Happy to close this issue, as recent updates have mostly resolved this I believe?

from nukeui.