javascriptjointjsrappid

How to increase gaps between stencil columns


  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?


Solution

  • 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