<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.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>