src/app/components/graph-editor/graph-editor.component.ts
Contains all components required to fully edit graphs.
| selector | apollo-graph-editor[graph] |
| styleUrls | ./graph-editor.component.scss |
| templateUrl | ./graph-editor.component.html |
Inputs |
Outputs |
| graph | |
Type : Observable<D3Graph>
|
|
| graphExportRequests | |
Type : Observable<void>
|
|
| graphExported | |
Type : EventEmitter
|
|
| saveRequested | |
Type : EventEmitter
|
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Observable } from 'rxjs';
import D3Graph from 'src/app/model/d3/d3.graph';
import { FOLGraph } from 'src/app/model/domain/fol.graph';
/**
* Contains all components required to fully edit graphs.
*/
@Component({
selector: 'apollo-graph-editor[graph]',
templateUrl: './graph-editor.component.html',
styleUrls: ['./graph-editor.component.scss'],
})
export class GraphEditorComponent {
@Input() public graph!: Observable<D3Graph>;
@Input() public graphExportRequests?: Observable<void>;
@Output() public readonly saveRequested = new EventEmitter<FOLGraph>();
@Output() public readonly graphExported = new EventEmitter<FOLGraph>();
}
<div class="graph-container">
<mat-card class="graph-card mat-elevation-z4">
<mat-card-content class="graph-card-content">
<apollo-graph
#graphComponent
[graph]="graph | async"
[allowEditing]="true"
[graphExportRequests]="graphExportRequests"
(nodeDeleted)="nodeForm.onNodeDeleted($event)"
(linkDeleted)="linkForm.onLinkDeleted($event)"
(saveRequested)="saveRequested.emit($event)"
(graphExported)="graphExported.emit($event)"
></apollo-graph>
</mat-card-content>
</mat-card>
</div>
<div class="form-container">
<apollo-node-form
#nodeForm
[node]="graphComponent.nodeSelected | async"
(nodeUpdated)="graphComponent.restart()"
(nodeDeletionRequested)="graphComponent.removeNode($event)"
></apollo-node-form>
<apollo-link-form
#linkForm
[link]="graphComponent.linkSelected | async"
(linkUpdated)="graphComponent.restart()"
(linkDeletionRequested)="graphComponent.removeLink($event)"
></apollo-link-form>
</div>
./graph-editor.component.scss
:host {
display: flex;
height: 100%;
flex-direction: row;
}
.graph-container {
display: block;
margin-right: 1rem;
flex-grow: 4;
}
.graph-card-content,
.graph-card,
.graph-container {
display: block;
min-height: 400px;
}
.graph-card {
padding: 0;
height: 100%;
overflow: hidden;
}
.graph-card-content {
height: 100%;
overflow: hidden;
}
.form-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
flex-grow: 1;
flex-shrink: 0;
> *:not(:last-child) {
margin-bottom: 1rem;
}
}
@media screen and (max-width: 800px) {
:host {
flex-direction: column;
}
.graph-container {
margin-right: 0;
margin-bottom: 1rem;
}
.form-container {
flex-grow: 0;
margin-bottom: 1rem;
}
}