Custom element initialize not working

[ryan-nebulock]

Introduction

So I have a custom element (I simplified it for the context of this question):

const CustomElement = joint.dia.Element.define(
      'custom.Element',
      {
        attrs: {
          label: {
            textWrap: {
              text: '...system32\\cmd.exe',
            },
          },
        },
      },
      {
        view: 'custom.ElementView',
        markup: [
          {
            tagName: 'foreignObject',
            selector: 'fo',
            styles: {
              pointerEvents: 'auto',
            },
            children: [
              {
                tagName: 'div',
                selector: 'body',
                namespaceURI: 'http://www.w3.org/1999/xhtml',
                className: 'custom-element',
                style: {
                  width: '100%',
                  height: '100%',
                  position: 'relative',
                },
                children: [
                  {
                    tagName: 'div',
                    selector: 'label',
                    className: 'title-line',
                  },
                ],
              },
            ],
          },
        ],
      },
    );

    const CustomElementView = joint.dia.ElementView.extend({
      events: {
        // We do not rely on jointjs for the sub-element but listen on the root
        // pointerdown ourselves and check if the target is `.expand-button`.
        pointerdown: 'onPointerDown',
      },

      onPointerDown(evt) {
        console.log('pointer down customer');
      },

      initialize() {
        console.log('custom element initialzie');
      },
    });

    joint.shapes.custom = {
      Element: CustomElement,
      ElementView: CustomElementView,
    };

I create an instance of the element like:

const element = new joint.shapes.custom.Element({
  position: { x, y },
  size: { width: 250, height: 100 },
  z: 2,
  attrs: {
    label: {
      text: label,
    },
  },
});

The first issue I was experiencing was the event not firing so I added the initialize to make sure it was running and that does not console log at all (I know I am not calling the parent initialize() but I am just trying to get the console log to run).
When I do:

// create element
console.log('View property:', element.view);

This logs out:

View property: custom.ElementView

So it seems to be configured to the right view so why would initialize() not run?

Steps to reproduce

No response

Restrictions & Constraints

No response

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

JointJS

[kumilingus]

You probably didn't tell the paper to use the view via cellViewNamespace option. See our docs.

[ryan-nebulock]

Ah, I assumed since I was adding it to a default namespace it would be automatically included but that was wrong, thanks.