How to increase gaps between stencil columns

Question

  this.stencil = new joint.ui.Stencil({
    paper: this.paper,
    width: 240,
    height: 500,
    label: 'Components',
    layout: {
      columnWidth: 80,
      columns: 2,
      rowHeight: 130,
    },
  });

I'm using this code to create two column layout in stencil. Is there a way to add any padding or increase the gap between the two columns?

Answer 1

It could be done by setting dx and dy property for horizontal and vertical gap respectively in layout configuration -

this.stencil = new joint.ui.Stencil({
    paper: this.paper,
    width: 240,
    height: 500,
    label: 'Components',
    layout: {
      columnWidth: 80,
      columns: 2,
      rowHeight: 130,
      dy: 10,
      dx: 10,
      deep: true
    },
  });

You can vary the value of dx and dy to achieve the gap you would really want.

You can refer "layout" under ui.Stencil. Here is the link - https://resources.jointjs.com/docs/rappid/v2.3/ui.html#ui.Stencil

And the explanation for layout configuration is available at - https://resources.jointjs.com/docs/rappid/v2.3/layout.html#layout.GridLayout