Why text is not rendered in stencil when I add VSM shape?

[Tetsu-hub]

Introduction

Hello,

When I added the VSM shape to the stencil, the element description text did not appear.

Steps to reproduce

(1)
I made following stencil instance:

const stencil = new ui.Stencil({
  graph,
  paper,
  height: '100%',
  layout: true,
  dropAnimation: true,
  cellCursor: 'grab',
  usePaperGrid: true,
  groups: {
    figures: { label: 'figures' }
  },
  layout: {
    columns: 2,
    rowGap: 10,
    columnGap: 60,
    marginY: 10,
    marginX: 10,
    resizeToFit: true,
    centre: false,
    dx: 0,
    dy: 0,
    horizontalAlign: 'middle',
    verticalAlign: 'middle'
  },

  dragStartClone: (el) => {
    const strokeDasharray = "10,6";
    const { shapeType, attrs } = el.attributes;
    console.log(shapeType);

    switch (shapeType) {
      case "CustomerSupplier":
        return new VSMShapes.VSMCustomerSupplier({
          shapeType,
          size: { width: 120, height: 70 },
          attrs: {
            body: {
              strokeDasharray
            },
            label: {
              text: attrs.label.text,
              fontFamily: "sans-serif"
            }
          }
        });
    }
  },

  dragEndClone: (el) => {
    const clone = el.clone();
    clone.attr({
      body: {
        strokeDasharray: null,
        fill: clone.get("originalColor")
      }
    });
    clone.unset("originalColor");
    clone.unset("shapeType");
    return clone;
  }
});

(2)
I added VSMCustomerSupplier into the stencil:

stencil.load([
  {
    type: "VSMCustomerSupplier",
    size: { width: 50, height: 50 },
    shapeType: "CustomerSupplier",
    attrs: {
      label: {
        text: "Customer Supplier"
      }
    }
  }
], 'figures');

(3)
For same reason, text that describe the element did not appeared on the stencil like following image.

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[MartinKanera]

Hello, the VSMCustomerSupplier label has textWrap applied to it by default. The textWrap looks like this:

// ...
{
    width: -20,
    height: -40,
    ellipsis: true
}
// ...

Which, in your case (setting the shape to 50x50), results in not enough space for the label to render, textWrap takes into account typography, so you can try to adjust the fontFamily, or fontSize etc., or you can shift the label's y coordinate to be positioned under it for the stencil.

[Tetsu-hub]

Thank you very much for your prompt reply.

May I kindly ask for your advice?
I'm currently using a customized version of VSMCustomerSupplier, which I created by extending the predefined VSMCustomerSupplier class.

Is there a recommended way to inherit from VSMCustomerSupplier so that the label behaves more like those in dia.Shape figures?
For example, would it be appropriate to override the constructor of the VSMCustomerSupplier class?

[MartinKanera]

Are you referring to some specific shape when you say dia.Shape figure? Regardless, it is perfectly fine to override the constructor if your logic requires it. If you are interested in default label adjustments of the VSMCustomerSupplier, you can do that in the defaults() method like so:

class MyCustomVSMCustomerSupplier extends VSMCustomerSupplier {

    defaults() {
        return util.defaultsDeep({
            type: 'MyCustomVSMCustomerSupplier',
            size: {
                width: 120,
                height: 80
            },
            attrs: {
                label: {
                    // add any attribute applicable for the <text/> element
                }
            }
        }, super.defaults());
    }
}

For all the available attributes that you can supply to the label, take a look at our documentation (just make sure it mentions applies to: <text/>).

[Tetsu-hub]

Thank you for your support.
Thanks to your advice, I can now take the next step.
Thank you very much!