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:

`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"
]
}
}
`

`html
#piDiagram
(createEquipment)="..."
(deleteEquipment)="..."
(selectionChanged)="...">

`

$3

1. createEquipment: CreateEquipmentRequest

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

1. deleteEquipment: DeleteEquipmentRequest

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

1. selectionChanged: DiagramObject[]

Called when selection has channged.

$3

`ts
interface PIDiagramComponent {
isDirty$: BehaviorSubject;

notifyChange();

load(schema: PIDSchema);

loadPID(file: File): Promise;

extract(): PIDSchema;

extractPID(): Blob;

extractSVG(): Blob;

selectShape(elementId: number);
}
``