Listen to specific attribute change on cell/element event via on('change:attrs')

[BigPackie]

Is it possible to listen to specific attribute change via on('change:attrs') for example on('change:attrs/body/fill') ? I am using the inspector to change specific attributes. I am registering the listener in the constructor of my custom element class.

https://resources.jointjs.com/docs/jointjs/v3.5/joint.html#dia.Element.events

Right not it does not seem to work and the only possibility is to listen to the whole attrs object, and it is triggered when any attribute is changed, not just /body/fill.

If it is not possible to pinpoint specific attribute, how can I track changes of specific attributes. I tried adding a property to my custom element class, saving specific attributes in there and comparing them by getting the (element as app.Slot).attr('slotIcon/iconColor')

export namespace app
  export class Slot extends joint.shapes.standard.Polyline { 
     changed = { iconColor: null };

      constructor() {
         super();
         
         this.on('change:attrs', function (element, attrs) {
            let iconColor = (element as app.Slot).attr('slotIcon/iconColor');
            if (iconColor != element.changed.iconColor) {
              console.log(`change ${element.changed.iconColor} to ${iconColor}`);
              element.changed.iconColor = iconColor;
            }
         });
      }


   //rest of the class
  }
  //rest of code
}

I have also tried using an arrow function and this, but the changed property is always undefined

My ultimate goal is to only react to specific attribute changes, because I need to perform and action on those changes that will change other attribute/custom data of the element and will effect the rendered element, thus optimizing performance is needed

Listening to inspector events change:[path to the changed property] is not viable either because it does not return the cell/element, so I cannot performed any further actions on the element.

[BigPackie]

Changing the property changed to changedData allows me to track changes, as changed is a reserved property handled by jointjs.

Is there a better way, something like change:[path to the changed property] but on dia.Element class ?

[BigPackie]

I've also noticed that overriding the constructor() is not good and instead you should override initialize(), otherwise when you copy(clone) objects on the paper they will not retained modified attributes of the original element.

export namespace app {
    export class Slot extends joint.shapes.standard.Polyline {
      previousData = { slotType: null, iconColor: null }; //'changed' is reserved, had to use different name
  
      //use initialize method instead of constructor, because otherwise during copying (cloning) objects on the paper changed attributes were not cloned
      override initialize(
        attributes?: joint.shapes.standard.PolylineAttributes,
        options?: any
      ): void {
        super.initialize(attributes, options); //important to call
  
        this.on('change:data', this.onSlotTypeChange.bind(this));
        this.on('change:attrs', this.onSlotIconColorChange.bind(this));
  
        // this.on('all', function (element, custom) {
        //   console.log({ element });
        //   console.log({ custom });
        // });
      }
  
      private onSlotTypeChange(element, data): void {
        let slotType = this.prop('data/slotType');
  
        if (slotType != this.previousData.slotType) {
          this.previousData.slotType = slotType;
          this.updateSlotTypeIcon();
        }
      }
  
      private onSlotIconColorChange(element, attrs): void {
        let iconColor = this.attr('slotIcon/iconColor');
  
        if (iconColor != this.previousData.iconColor) {
          this.previousData.iconColor = iconColor;
          this.updateSlotTypeIcon();
        }
      }
      //rest of the class
    }
}

[kumilingus]

1. When the attr() and prop() is used to change the model, it will pass some information along the change event (propertyValue, propertyPath, propertyPathArray).

graph.on('change', (cell, opt) => {
    console.log(opt);
    if ('attrs' in cell.changed) {
        console.log(opt.propertyPathArray, 'was changed');
    }
});

el.attr('body/fill', 'red');
// --> ['attrs', 'body', 'fill'] 'was changed'

2. The data binding between the top-level attributes and the presentation attributes (those in attrs) could be done:
   a) as shown here (it's very similar to your solution)
   b) using JointJS decorators

[BigPackie]

Thanks, this can improve my code. The documentation for attribute is lacking opt description https://resources.jointjs.com/docs/jointjs/v3.5/joint.html#dia.Element.prototype.attr
Regardless, {silent: true} works here.

Here is the updated and simplified code for reference:

export namespace app {
  export class Slot extends joint.shapes.standard.Polyline {
    //use initialize method instead of constructor, because otherwise during copying (cloning) objects on the paper changed attributes were not cloned
    override initialize(
      attributes?: joint.shapes.standard.PolylineAttributes,
      options?: any
    ): void {
      super.initialize(attributes, options);

      this.on('change', ({ changed }, opt) => {
        if (
          opt.propertyPath == 'attrs/slotIcon/iconColor' ||
          opt.propertyPath == 'data/slotType'
        ) {
          this.updateSlotTypeIcon();
        }
      });
    }

    updateSlotTypeIcon() {
      let encodedSvg = Slot.getSlotIconURIEncoded(
        this.prop('data/slotType'),
        this.attr('slotIcon/iconColor')
      );
      this.attr('slotIcon/href', encodedSvg, { silent: true }); //use silent:true, we don't need to record this event in this.on('change',() => {}) as it is changed always only programmatically
    }
    //rest of class ...
  }
}