TypeScript class instances passed as elements are not rendered

[niklr]

Environment info

• Cytoscape.js version : 3.18.2
• Browser/Node.js & version : Chrome 90.0.4430.93 / Node.js 12.18.3

Current (buggy) behaviour

When passing elements as instances of TypeScript classes the graph is not rendered. However, it works when calling JSON.parse(JSON.stringify(data)) before passing them as elements to cytoscape.

Desired behaviour

Instances of TypeScript classes should be rendered.

Minimum steps to reproduce

export abstract class BaseGraphModel {
  selected = false; // whether the element is selected (default false)
  selectable = true; // whether the selection state is mutable (default true)
  locked = false; // when locked a node's position is immutable (default false)
  grabbable = true; // whether the node can be grabbed and moved by the user
  pannable = false; // whether dragging the node causes panning instead of grabbing
  classes: string[]; // an array of class names that the element has
  scratch: any; // scratchpad data (usually temp or nonserialisable data)

  public constructor(init?: Partial<BaseGraphModel>) {
    Object.assign(this, init);
  }
}

export class NodeGraphModel extends BaseGraphModel {
  data: NodeDataModel; // element data

  public constructor(init?: Partial<NodeGraphModel>) {
    super(init);
    Object.assign(this, init);
  }

  public get group(): string {
    return 'nodes';
  }
}

export class NodeDataModel {
  id: string;
  name: string;
  weight = 100;
  colorCode: string;
  shapeType: string;

  public constructor(init?: Partial<NodeDataModel>) {
    Object.assign(this, init);
  }
}

export class EdgeGraphModel extends BaseGraphModel {
  data: EdgeDataModel; // element data

  public constructor(init?: Partial<EdgeGraphModel>) {
    super(init);
    Object.assign(this, init);
  }

  public get group(): string {
    return 'edges';
  }
}

export class EdgeDataModel {
  source: string; // the source node id (edge comes from this node)
  target: string; // the target node id (edge goes to this node)
  strength = 1;
  colorCode: string;

  public constructor(init?: Partial<EdgeDataModel>) {
    Object.assign(this, init);
  }
}

[maxkfranz]

Sounds like a good idea for an extension or a PR

[stale[bot]]

This issue has been automatically marked as stale, because it has not had activity within the past 14 days. It will be closed if no further activity occurs within the next 7 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.