<div class="fc-container">
  <div class="fc-left-pane">
    <fc-canvas [model]="nodeTypesModel" [selectedObjects]="nodeTypesFlowchartselected"
               [automaticResize]="false"
               [dropTargetId]="'fc-target-canvas'">
    </fc-canvas>
  </div>
  <div class="fc-divider" style="background-color: gray;">
  </div>
  <div class="fc-right-pane">
    <div class="button-overlay">
      <button (click)="addNewNode()" title="Add a new node to then chart">Add Node</button>
      <button (click)="deleteSelected()"
              [disabled]="!fcCanvas.modelService || (fcCanvas.modelService.nodes.getSelectedNodes().length === 0 &&
                          fcCanvas.modelService.edges.getSelectedEdges().length === 0)"
              title="Delete selected nodes and connections">Delete Selected</button>
      <button (click)="activateWorkflow()">
        Activate Workflow
      </button>
    </div>
    <fc-canvas #fcCanvas
               id="fc-target-canvas"
               [model]="model"
               [selectedObjects]="flowchartselected"
               [edgeStyle]="flowchartConstants.curvedStyle"
               [userCallbacks]="callbacks"
               [automaticResize]="true"
               [dragAnimation]="flowchartConstants.dragAnimationRepaint">
    </fc-canvas>
  </div>
</div>