Piping & instrumentation diagram

Angular component for interactive piping & instrumentation diagrams. Uses diagram-js.

This library was generated with Angular CLI version 9.0.7.

See also general development guidelines in webapp root folder README.

Build

ng build pi-diagram --watch

Usage

Make sure to include assets/pi-icons.css and diagram-js's assets/diagram-js.css in your angular.json:

{
  "projects.yourApp.architect.build": {
    "styles": [
      "projects/webapp/src/styles.scss",
      "dist/pi-diagram/assets/pi-icons.css",
      "node_modules/diagram-js/assets/diagram-js.css"
    ]
  }
}

<lib-pi-diagram-editor
  #piDiagram
  (createEquipment)="..."
  (deleteEquipment)="..."
  (selectionChanged)="...">
</lib-pi-diagram-editor>

Outputs

1. createEquipment: CreateEquipmentRequest

   Called before element is created. Must call resolve or reject callbacks from CreateEquipmentRequest. resolve callback must supply unique element id.

2. deleteEquipment: DeleteEquipmentRequest

   Called before element is delete. Must call resolve or reject callbacks from CreateEquipmentRequest.

3. selectionChanged: DiagramObject[]

   Called when selection has channged.

Public API

interface PIDiagramComponent {
  isDirty$: BehaviorSubject<boolean>;

  notifyChange();

  load(schema: PIDSchema);

  loadPID(file: File): Promise<void>;

  extract(): PIDSchema;

  extractPID(): Blob;

  extractSVG(): Blob;

  selectShape(elementId: number);
}