Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sequencer: changing individual block colours? #121

Open
nebrekab opened this issue Jun 19, 2018 · 6 comments
Open

Sequencer: changing individual block colours? #121

nebrekab opened this issue Jun 19, 2018 · 6 comments

Comments

@nebrekab
Copy link

nebrekab commented Jun 19, 2018

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
Copy link
Author

nebrekab commented Jun 19, 2018

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
Copy link
Contributor

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
Copy link
Author

That sounds great - thanks very much!

@taylorbf
Copy link
Contributor

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
Copy link
Author

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants