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

Pipeline Builder

import {Component, OnInit, EventEmitter, Output} from '@angular/core';
import * as Pipeline from 'pipeline-builder';

import {PipelineDataService} from '../pipeline-data.service';

@Component({
  selector: 'pb-graphical-editor',
  templateUrl: './graphical-editor.component.html',
  styleUrls: ['./graphical-editor.component.scss']
})
export class GraphicalEditorComponent implements OnInit {
  @Output() change = new EventEmitter();
  private diagram: Pipeline.IVisualizer;

  constructor(private _pipelineDataService: PipelineDataService) { }

  ngOnInit() {
    this.diagram = this._pipelineDataService.getDiagram();
    this.diagram.paper.on('link:connect', () => this.change.emit());

    // this.diagram.paper.on('link:disconnect', () => this.change.emit());
    this.diagram.paper.model.on('remove', (cell) => {
      if(cell.isLink()) {
        setTimeout(() => this.change.emit(), 0);
      }
    });
  }

  zoomCanvas = (delta: number) => {
    if(delta > 0){
      this.diagram.zoom.zoomIn();
    } else {
      this.diagram.zoom.zoomOut();
    }
  };

  takeCanvasScreenShot = () => {
    this.diagram.paper.getPNG((data) => {
      const element = document.createElement('a');
      element.setAttribute('href', data);
      element.setAttribute('download', `workflow_${new Date().toISOString().substring(0,10).replace(/-/g,'')}.png`);
      element.style.display = 'none';
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
    });
  };

  takeAutolayout = () => {
    this.diagram.layout();
  };

  fitToScreen = () => {
    this.diagram.zoom.fitToPage();
  };

  get existSelection(): boolean {
    return this.diagram.selection && this.diagram.selection.length != 0;
  }

  get singleSelect(): boolean {
    return this.diagram.selection && this.diagram.selection.length == 1;
  }

  removeSelection = () => {
    this.diagram.selection.forEach(selectObj => {
      this._pipelineDataService.workflow.remove(selectObj.step.name);
    });
    this.change.emit();
  };

  onDialogSave = () => {
    this.change.emit();
  };

}