Im-Beast / deno_tui

🦕 Deno module for creating Terminal User Interfaces
https://deno.land/x/tui
MIT License
266 stars 18 forks source link

feat req: centralizing components #21

Closed kug1 closed 1 year ago

kug1 commented 1 year ago

What this feature is meaning to achieve hard coded column and row properties aren't enough when you want a component to be centralized in respective terminal sizes

Solution there could be a "center" option for columns and rows properties in rectangle object (just like align for LabelComponent)

Describe alternatives you've considered tried centering the component by using Deno.consoleSize method

Im-Beast commented 1 year ago

I've thought about it before, but there's a reason why I haven't introduced it – there'd be trouble understanding about what it should be centered to – whole terminal, other component, maybe something else? I could introduce option to center it relative to selected point and it shouldn't be that hard, however it would get annoying. Maybe I will think about better way of implementing it and doing it in 2.0.

As for now, you can use getters and setters in rectangle to center it:

const box = new BoxComponent({
  tui,
  rectangle: {
    get column() {
      return ~~(tui.canvas.size.columns / 2 - this.width / 2);
    },
    get row() {
      return ~~(tui.canvas.size.rows / 2 - this.height / 2);
    },
    width: 5,
    height: 2,
  },
  theme: {
    base: crayon.bgRed,
  },
});