Michael-48/Iris

Iris.Image, Iris.ImageButton

Closed this issue · 2 comments

Michael-48 commented
Iris.Image, Iris.ImageButton
SirMallard commented

I've added in the Iris.Image widget to the image branch, but I wasn't sure about the best way to deal with the arguments. Looking at the Dear ImGui Image API, it has the arguments of image, the image size, a UV min and max argument and then tint and border colours:

IMGUI_API void Image(ImTextureID user_texture_id, const ImVec2& size, const ImVec2& uv0 = ImVec2(0, 0), const ImVec2& uv1 = ImVec2(1, 1), const ImVec4& tint_col = ImVec4(1, 1, 1, 1), const ImVec4& border_col = ImVec4(0, 0, 0, 0));

These are a few arguments which I think can be compacted in various ways:

  • The size property is currently a Vector2 which is converted into a UDim2, because there's not a reason I can see for wanting full width or height images, but I might be proven wrong.
  • Roblox ImageLabels support RectOffset and RectSize properties, which is equivalent to the uv0 and uv1 Dear ImGui arguments. However, Roblox also has a Rect datatype which seems like and obvious candidate which would turn two arguments into one.
  • The tinting seems equivalent to the ImageColor and ImageTransparency properties, and for now I've just used the Text style from the config. This means you can just push and pop the style if you need to change the image and makes sense in my opinion.
  • The padding seems slightly unusual and from what I can tell uses the FramePadding style to control. I haven't included this yet, and I don't know whether there would be a better way of controlling this, such as through another border style.
  • Roblox ImageLabels provide multiple rendering and scaling styles, which I want to support but they include a bunch of extra proeprties which would need to be optional arguments since not all of them are used. Supporting 9-slice images would be helpful, alongside changing the scaling mode to prevent stretching but bloat the arguments.

These are the issues and questions I have from making the first version and I would like some input on how to go forwards with the Image widgets.

SirMallard commented

The active branch is: image

The main question I have about implementing images is:

  • ScaleType
    • Stretch
    • Slice - SliceCenter (Rect) SliceScale (number)
    • Tile - TileSize (UDim2)
    • Fit
    • Crop

There are multiple different ScaleTypes which I would like to be present, but some of them have extra properties which also need to be set to work.

I'm not sure about the best way to go around supporting all of these properties in a concise and clean single API. Should these be separate APIs or is there a better way of accommodating them all?

@Michael-48