How can I create custom VSM shape?

[Tetsu-hub]

Introduction

Hello,

I would like to create my own VSM element in JointJS+ by extending the prepared VSMCustomerSupplier shape.
I created the following custom class:

class CustomSupplier extends shapes.VSMCustomerSupplier {
  defaults() {
    return {
      ...super.defaults,
      type: 'CustomSupplier',
      size: { width: 50, height: 50 },
      attrs: {
        body: {
          fill: '#dddddd',
          stroke: 'black',
          strokeWidth: 2,
        },
        label: {
          text: 'Custom Supplier'
        },
      },
    }
  }
}

Then, I created an instance and added it to the graph like this:

const usePoint = new CustomSupplier();
usePoint.position(800, 800);
usePoint.addTo(graph);

However, only the label is visible on the paper, like in this image:

I also added the VSM shapes to the namespace:

const shapes = { ...VSMShapes, ...defaultShapes };
const namespace = shapes;

✅ What I'm trying to achieve:

• I want the full VSMCustomerSupplier shape which means I would like to render the following image on the paper NOT only the label itself.

❓Question:
What am I missing to render the custom shape correctly on the paper?

Thank you in advance for your help!

Steps to reproduce

No response

Restrictions & Constraints

• The following functions are provided by JointJS+

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

JointJS+

[kumilingus]

You have completely overridden the attrs of the super class.
You should use the defaultsDeep() utilitity to merge the nested attrs. See docs.

class CustomSupplier extends shapes.VSMCustomerSupplier {
  defaults() {
    return util.defaultsDeep({
      type: 'CustomSupplier',
      size: { width: 50, height: 50 },
      attrs: {
        body: {
          fill: '#dddddd',
          stroke: 'black',
          strokeWidth: 2,
        },
        label: {
          text: 'Custom Supplier'
        },
      },
    }, super.defaults)
  }
}

[Tetsu-hub]

Thank you very much for your prompt and helpful reply.
Thanks to your explanation, I now understand why the element was not rendered as expected. I truly appreciate your support.

While reviewing the documentation you kindly referred me to, I came across something that may potentially be a mistake — though I could be wrong.
In the section explaining how to use util.defaultsDeep(), the following sample code is presented:

import { dia, util } from '@joint/core';

export class MyShape extends dia.Element {

    defaults() {
        return util.defaultsDeep({
            type: 'myNamespace.MyShape',
            size: { width: 100, height: 80 }
        }, super.defaults);
    }
}

From what I understand, this code might not behave as intended because super.defaults is referenced directly rather than being called as a method.
If that’s the case, I believe the corrected version should be:

import { dia, util } from '@joint/core';

export class MyShape extends dia.Element {

    defaults() {
        return util.defaultsDeep({
            type: 'myNamespace.MyShape',
            size: { width: 100, height: 80 }
        }, super.defaults());
    }
}

I realize I may have misunderstood something, so please feel free to correct me if I’m mistaken.
In any case, thank you again for your kind assistance.

[Geliogabalus]

If the cell is created using define() method and is not using ES6 classes, the defaults is a prototype property, so in the example from the docs the use of super.defaults as a property is correct because dia.Element has only defaults prototype property. On the other hand, VSM shapes are using ES6 classes, so you should use super.defaults() method instead.

If you don't know how it is defined, you can use results() utils method, which will resolve the value correctly.

[Tetsu-hub]

Thank you for the clarification — that makes a lot of sense.
I understand that super.defaults() was necessary in my case, because I was working with VSM shapes using ES6 classes.
I appreciate the tip about util.result(), that’s very helpful! Thanks again.