Can not get access to class properties inside initialize function for custom element

[frenzymind]

Introduction

I create my own element like below. In initialize function I want to set default state with setState function call. I want to use my imageSelector class property there, but some how I get undefined. I log ![Screenshot from 2024-04-04 10-33-47](https://github.com/clientIO/joint/assets/33678873/6a7a0582-ca00-4a73-b77c-2a07e8f4d9fb) - property is there!!! But when I log this.imageSelector - that undefined! I do log in initialize and setState functions - same behavior. For the same time, if I log standart properties like attributes - all fine! In outside code where I create this instance - setState work correctly and see my property. What is wrong here? What I miss? How can I use imageSelector value during initialize ? Thanks!

export class JointDevider extends dia.Element {
  imageSelector = 'devider';

  override markup: string | dia.MarkupJSON = deviderJsonMarkup;

  override defaults(): Partial<dia.Element.Attributes> {
    return {
      ...super.defaults,
      type: 'itk.Devider',
      attrs: {
        root: {
          magnetSelector: 'outline',
        },
        devider: {
          width: 'calc(w)',
          height: 'calc(h)',
          cursor: 'move',
        },
      },
      moveable: true,
    };
  }

  override initialize(attributes?: dia.Element.Attributes | undefined, options?: any): void {
    console.log(this);
    console.log(this.imageSelector);
    console.log(this.attributes);

    super.initialize(attributes, options);
    this.setState('NOT_INITED');
    this.resize(50, 50);
  }

  setMoveable(val: boolean) {
    this.prop('moveable', val);
  }

  setState(state: IIntDeviceState) {
    console.log(this);
    console.log(this.imageSelector);
    console.log(this.attributes);

    switch (state) {
      case 'OK':
        this.attr(`${this.imageSelector}/fill`, IntColors.Ok);
        break;
      case 'WARNING':
        this.attr(`${this.imageSelector}/fill`, IntColors.Warning);
        break;
      case 'ERROR':
        this.attr(`${this.imageSelector}/fill`, IntColors.Error);
        break;
      case 'NOT_INITED':
        this.attr(`${this.imageSelector}/fill`, IntColors.NotInited);
        break;

      default:
        canNotReach(state);
    }
  }
}

Steps to reproduce

No response

Restrictions & Constraints

No response

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

JointJS

[kumilingus]

You need to assign the values of the class properties inside the preinitialize method.

export class JointDevider extends dia.Element {

  imageSelector: string;
  
  preinitialize() {
    this.imageSelector = 'divider';
  }
}

For more info please see jashkenas/backbone#3560.

[frenzymind]

Thank you! I stay with Attach all properties as functions approach. But still, I use JointJS version 4+ , that described as dependency free, why backbone related issue here ?

Maybe it help some one: my first goal was to create abstract base class with abstract properties to ensure everyone will declare them. My abstract class has abstract method config which return all required parameters and I use it inside abstract class like so:

export abstract class AbstractJointElement extends dia.Element {

  abstract config(): IJointItkElementConfig;

  override defaults(): Partial<dia.Element.Attributes> {
    const cfg = {
      ...super.defaults,
      type: `itk.${this.config().imageSelector}`,
      attrs: {
        root: {
          magnetSelector: 'outline',
        },
        [this.config().imageSelector]: {
          width: 'calc(w)',
          height: 'calc(h)',
          cursor: 'move',
        },
      },
      moveable: true,
      outside: false,
    };

    return cfg;
  }

  setState(state: IIntDeviceState) {
        this.attr(`${this.config().imageSelector}/fill`, IntColors.Ok);
  }
}

[kumilingus]

We no longer use Backbone, but we adopt a lot of code from it.