Get model as custom shape from dia.Cell

[elinake]

Introduction

I have a custom shape, which purpose is to contain the implementation details as functions, like this:

public setBorder(enabled: true) {
   this.attr('border/strokeOpacity', enabled ? 1 : 0);
 }

When I use the element through pointerclick, all works fine:

this.paper.on('cell:pointerclick', (element: dia.CellView) => {
  if (element.model instanceof CustomElement) {
    element.model.setBorder(true);
  }
});

Steps to reproduce

But if I need to use it through non-jointjs action, I don't know how to get it as correct type.

  public test() {
    const cells = this.graph.getCells();
    const changed = cells.find((cell: dia.Cell) => {
      const meta = cell.get('meta');
      return cell instanceof CustomElement && meta.id === 1;
    });
    if (changed) {
      // Property 'setBorder' does not exist on type 'Cell<Attributes, ModelSetOptions>'.
      //  change.setBorder(true);
    }
  }

changed.attr('border/strokeOpacity', 1); sets the border correctly, as does (change as CustomElement).setBorder(true); (The latter is a bad practice as it forces the typing to be correct regardless what I have assigned to the property.)

So even though it finds the correct element based on type and is able to apply the change, the found object is not correct type. Is there a way to do this with JointJS typings?

Restrictions & Constraints

Code example here, JointJS version is 4.0.4.

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

JointJS

[kumilingus]

You might need to cast the base model to the CustomElement of yours.

 public test() {
    const cells = this.graph.getCells();
    const changed = cells.find((cell: dia.Cell) => {
      const meta = cell.get('meta');
      return cell instanceof CustomElement && meta.id === 1;
    }) as CustomElement;
    if (changed) {
      changed.setBorder(true);
    }
  }

[elinake]

I mean, as CustomElement is always just forcing the type. It works but it's not really the typescript way.

[elinake]

I found out that I can have a "type guard predicate function" -

  isCustomElement(el: dia.Cell): el is CustomElement {
    return el instanceof CustomElement;
  }

and then find the cell:

    const ch = cells
      .filter(this.isCustomElement)
      .find((cell) => cell.get('meta')?.id === 1);
    ch?.setBorder(true);
  

Apparently the type guard can't be combined with another condition, so that's why filter and find need to be done separately.

So, seems this was a typescript problem rather than jointJS :)