Sequencer: changing individual block colours?

[nebrekab]

Is it possible to change color of a single block within a sequencer to a different color than the accent?

Can anyone steer me in the right direction?

I am going to try setting the fill attribute on the svg elements within each span tag via js, but I wondered what the best/recommended approach is?

<span style="position: absolute; left: 0px; top: 64.1667px; width: 64.375px; height: 64.1667px;"><svg width="64.375" height="64.16666666666667" style="top: 0px; left: 0px; position: absolute; cursor: pointer;"><rect x="1" y="1" width="62.375" height="62.16666666666667" fill="#ff0000"></rect></svg></span>

[nebrekab]

An approach I have come up with is:

// select all blocks within sequencer (seq = a ref to the div that contains the Nexus Sequencer)
const seqBlocks = seq.querySelectorAll('rect');
// loop all blocks and intercept mousedown (should probably also account for touchdown)
[].forEach.call(seqBlocks, function(item){ 
  item.addEventListener('mousedown', function(e){
  e.target.setAttribute('fill', 'blue');
  });
});

[taylorbf]

Yes, you should be able to do this in a more straightforward way. The sequencer is designed so that each cell is its own square nexusui button, essentially. sequencer.cells is an array containing all of those buttons.

In theory, you ought to be able to do the following: sequencer.cells[0].colors.accent = "#000" . However, that is not changing the color of the cell highlight in practice. The cell is probably inheriting color from the sequencer. But we should set this up so that you can customize it. I'll look into making sure the color inheritance chain is set up properly and respond with a solution.

[nebrekab]

That sounds great - thanks very much!

[taylorbf]

Reviewing the implementation, the current type of inheritance was done for a reason. Each cell uses the sequencer's colors, rather than the button's own colors.

Here's the problem that occurs if each cell has its own defined set of colors ---

Let's say a user creates a fairly large sequencer (100x100) and sets its accent color to red. When the page loads, the program must loop through each cell to set its color. This would be a loop of 10,000 svg style calls, which creates a large delay in loading the page. It can be many seconds before the nexusui elements render. This is problematic, and the solution I chose was to use 1 set of inherited colors for all cells in the sequencer.

I will keep thinking about this and consider if there are some conditional ways to make cells more customizable while avoiding that kind of loading issue.

[nebrekab]

So at present when a sequencer grid of 100x100 loads, you do not need to loop and set colors because they are simply rendering the same SVG for all blocks - e.g. with an accent fill colour of red?

var sequencer = new Nexus.Sequencer('#target',{
 'size': [1000,1000],
 'mode': 'toggle',
 'rows': 100,
 'columns': 100
});
sequencer.colorize("accent","#ff0000");

[rohitkrishna094]

Also I have noticed that if we do

sequencer.colorize('fill', '#51575B');

and then click on the cell, the above color is not persisted. That is the color #51575Bis not persisted and the cell goes back to its previous color.