basssiiie / openrct2-flexui Goto Github PK

Idea
Allow labels to have a template string.

Additional context
Label text is often constructed using a formatted string. Currently the whole text needs to be bind to a string store, then the update method or whatever sets the store to the result of a context.formatString. This could be done as part of the data binding.

const model = {
    numGuests: flex.store(0)
};

...

flex.label({
    text: {
        template: 'Number of guests: {BLACK}{COMMA16}',
        args: [model.numGuests]
    }
});

... or ...

flex.label({
    text: flex.template('Number of guests: {BLACK}{COMMA16}', model.numGuests)
});

Current work around:

const model = {
    numGuests: flex.store(0)
};
const viewModel = {
    numGuests: new FormattedStore('Number of guests: {BLACK}{COMMA16}', model.numGuests)
};

...

flex.label({
    text: viewModel.numGuests
});

...

class FormattedStore<T> implements flex.Store<string> {
    private readonly fmt: string;
    readonly store: flex.Store<T>;

    constructor(fmt: string, store: flex.Store<T>) {
        this.fmt = fmt;
        this.store = store;
    }

    get() {
        return context.formatString(this.fmt, this.store.get());
    }

    subscribe(callback: (value: string) => void): () => void {
        return this.store.subscribe(value => {
            callback(this.get());
        });
    }
}

Idea
Currently the object returned from flex.window and flex.windowTabs is very simple, only providing a way of opening, closing and focusing. It has no way of obtaining the underlying OpenRCT2 window object, and it does not expose a wrapper around any of the OpenRCT2 window properties.

Additional context
No window management can happen particularly easily, such as finding all windows for a given kind within the plugin, and being able to move them about. You also can't get information, such as the current tab index. Some of the initial properties are also not available, such as isSticky.

Describe the bug
When programmatically closing a window, if an onClose handler is set, it is called twice.

To reproduce
A very simple example of this issue:

const w = window({
    title: "Test window",
    content: [
        button({ text: "Close", height: 21, onClick: () => w.close() }),
    ],
    height: "auto",
    width: 100,
    onClose: () => console.log("Closed test window"),
});
w.open();

When the "Close" button is clicked, "Closed test window" is logged to the console twice.

Expected behavior
OnClose should be called once when a window is closed programmatically.

Because onClose is a convenient place to put cleanup code, calling this handler twice can result in issues with disposing already disposed objects, null references where objects have been removed etc.

Describe the bug
The latest version of openrct2-flexui seems to be missing the checkbox function.

To reproduce
Steps to reproduce the behavior:

1. Run npm install openrct2-flexui in your project.
2. Import checkbox:

import {
  window, checkbox
} from "openrct2-flexui";

Expected behavior
Shown in the screenshot.

Screenshots


The function is not exported in node_modules/openrct2-flexui/dist/index.d.ts file.

Most windows will want a different title for each tab. So the title could be set to the tab's title (string or store) when the tab is changed.

Going even further, you could provide min/max size and onUpdate for each tab as well.

Add support for a custom() widget
The current implementation doesn't offer a corresponding custom type widget with an onDraw method. I see there's a widget() exposed, but it has no bindings, so it doesn't seem to fit the bill.

Potential options

1. Export the Control class to users. This would let users create a lookalike to the similar ButtonControl, DropdownControl, etc. I tested this by making a custom local build of FlexUI this way, just adding the Control export, and have made a nice custom widget component using just that. Check out my implementation if you're curious. (The user also needs to know to create their own WidgetBaseDesc, since the .d.ts in the flexui package isn't in sync with the one released by OpenRCT2 (as of 0.4.10).) For example:

   interface WidgetBaseDesc extends Omit<WidgetBase, "window"> {}

2. I'm happy to submit a PR adding this custom widget as a native flexui widget, to correspond to OpenRCT2's custom type. I'm not sure how to name it though - the other widgets are one word, but calling it custom feels too vague. Potentially something like customWidget or customDraw?

3. Perhaps there's already a way to do this using the unbound widget that I'm not aware of.