chjj / blessed

A high-level terminal interface library for node.js.
Other
11.2k stars 528 forks source link

How do you update the style of an existing element? #433

Open mrfigg opened 1 year ago

mrfigg commented 1 year ago

I'd like to update the style of an existing element after it has been created. I tried the following code but it does not work. (Relevant bit is at the bottom.) I can't seem to find a setStyle or updateStyle function anywhere. Am I missing something, or should I make this issue a feature request?

const blessed = require('blessed')
const screen = blessed.screen({
  smartCSR: true,
  fullUnicode: true,
})

const table = blessed.listtable({
  top: 0,
  left: 'center',
  width: '100%',
  height: '50%',
  align: 'left',
  tags: true,
  keys: true,
  border: 'line',
  scrollbar: {
    ch: ' ',
    track: {
      bg: 'blue',
    },
    style: {
      inverse: true,
    },
  },
  style: {
    // This example is trying to toggle the cell style on focus/blur
    cell: {
      selected: {
        bg: 'blue',
      },
    },
    focus: {
      border: {
        fg: 'blue',
      },
    },
  },
  data: [
    ['Column A', 'Column B'],
    ['1-A', '1-B'],
    ['2-A', '2-B'],
    ['3-A', '3-B'],
    ['4-A', '4-B'],
    ['5-A', '5-B'],
    ['6-A', '6-B'],
    ['7-A', '7-B'],
    ['8-A', '8-B'],
    ['9-A', '9-B'],
  ],
})
screen.append(table)

const logger = blessed.log({
  bottom: 0,
  left: 'center',
  width: '100%',
  height: '50%',
  tags: true,
  keys: true,
  scrollback: 100,
  scrollbar: {
    ch: ' ',
    track: {
      bg: 'blue',
    },
    style: {
      inverse: true,
    },
  },
  border: 'line',
  style: {
    focus: {
      border: {
        fg: 'blue',
      },
    },
  },
})
screen.append(logger)

screen.render()

screen.key(['C-c'], () => {
  screen.destroy()

  return process.exit(0)
})

screen.key(['\u001b[Z', '[Z', '\t', 'tab'], () => {
  if (screen.focused === table) {
    logger.focus()
    screen.render()
  } else if (screen.focused === logger) {
    table.focus()
    logger.setScrollPerc(100)
    screen.render()
  }
})

table.on('focus', () => {
  // Trying to set selected cell style
  // DOES NOT WORK
  table.style.cell = {
    selected: {
      bg: 'blue',
    },
  }
  screen.render()

  logger.log(
    'selected cell bg should be set to blue, press {green-fg}TAB{/} to toggle focused element'
  )
})
table.on('blur', () => {
  // Trying to unset selected cell style
  // DOES NOT WORK
  delete table.style.cell
  screen.render()

  logger.log(
    'selected cell bg should be unset, press {green-fg}TAB{/} to toggle focused element'
  )
})

table.focus()