pipeline-builder-demo/src/app/graphical-editor/graphical-editor.component.html

Pipeline Builder

<div id="graphical-editor" class="graphical-editor">
  <pb-tool-option-dialog #toDialog (save)="onDialogSave($event)"></pb-tool-option-dialog>
  <div class="editor-buttons-wrapper">
    <div class="editor-buttons" title="zoom in"><span class="fa fa-search-plus" (click)="zoomCanvas(1)"></span></div>
    <div class="editor-buttons" title="zoom out"><span class="fa fa-search-minus" (click)="zoomCanvas(-1)"></span></div>
    <div class="editor-buttons screenshot-button" title="take screenshot" (click)="takeCanvasScreenShot()"><span class="fa fa-camera"></span></div>
    <div class="editor-buttons screenshot-button" title="autolayout" (click)="takeAutolayout()"><span class="fa fa-object-group"></span></div>
    <div class="editor-buttons" title="fit to screen" (click)="fitToScreen()"><span class="fa fa-expand"></span></div>
  </div>
  <div id="paper" class="noselect" [pb-contextmenu]="pbmenu"></div>
  <pb-context-menu #pbmenu [show]="existSelection">
    <div *ngIf="singleSelect" (click)="toDialog.openDialog()" pb-context-menu-item>
      <i class="fa fa-cog"></i>Properties
    </div>
    <div (click)="removeSelection()" pb-context-menu-item>
      <i class="fa fa-trash"></i>Delete
    </div>
  </pb-context-menu>
</div>