How to adjust the matrix padding in a sequencer?

[rohitkrishna094]

In the example below, how do I add more padding between rows or columns in sequencer matrix?

Here is the code snippet that I am using:

 const sequencer = new Nexus.Sequencer('#sequencer', {
      size: [400, 110],
      mode: 'toggle',
      rows: 4,
      columns: 16
    });

The cells are too close to one another and I want them more spaced out and want to add different padding for rows and columns. How can I do that?

Thanks

[rohitkrishna094]

Anyone know how to fix this?

[tatecarson]

I am looking into this and thinking about it. It currently isn't possible but there should be a way of making it available without overcomplicating the component for people that don't need to use it. PRs or ideas welcome.

[vladansaracpv]

Inside sequencer.js file there is a class called MatrixCell with method called sizeInterface():

  sizeInterface() {
    this.pad.setAttribute('x', 1);
    this.pad.setAttribute('y', 1);
    if (this.width > 2) {
      this.pad.setAttribute('width', this.width - 2);
    } else {
      this.pad.setAttribute('width', this.width);
    }
    if (this.height > 2) {
      this.pad.setAttribute('height', this.height - 2);
    } else {
      this.pad.setAttribute('height', this.height);
    }
    //this.pad.setAttribute('height', this.height - 2);
    this.pad.setAttribute('fill', this.matrix.colors.fill);
  }

If you look at the generated html you can see that sequencer(matrix) consists of svg elements (rects).

<svg width="40" height="40" style="top: 0px; left: 0px; position: absolute; cursor: pointer;">
    <rect x="1" y="1" width="38" height="38" fill="#eee"></rect>
</svg>

We can accept padding as parameter and use that value inside:

this.pad.setAttribute('x', 1);
this.pad.setAttribute('y', 1);

and

this.pad.setAttribute('width', this.width - 2);
this.pad.setAttribute('height', this.height - 2);

so that width & height of the rects would be svg.width - 2 * padding, svg.height - 2 * padding thus effectively creating the padding

[tatecarson]

I am attempting to fix this but only have made a partial fix. The way I have done it you can now add padding but it changes the button size. Maybe someone can look at what i've done and give me some advice. I am still learning a lot of the library.

https://github.com/nexus-js/ui/blob/abf1937fda7e246fd4bb859f69c6c3ceb0cd64de/lib/interfaces/sequencer.js

and see the example for it in use:

  const sequencer = new Nexus.Sequencer('#sequencer', {
    size: [400, 110],
    mode: 'toggle',
    rows: 4,
    columns: 16,
    paddingRow: 10,
    paddingColumn: 5
  });

[vladansaracpv]

@tatecarson
If we don't mind having sequencer cell of unequal size, we can maybe do it somewhat like this
https://gist.github.com/vladansaracpv/8c1b719fa6885a621eec5f8bddb828d6

[vladansaracpv]

Created pr for this.

[tatecarson]

This was fixed with #178. Does this work for you @rohitkrishna094 ? I am going to close for now and you can comment again if you feel the need.