elsa-designer-angular v0.0.2

Elsa-designer-angular

This is rewritten of elsa-designer for angular 10 with angular material.

Install

1. Install

npm i elsa-designer-angular

2. Import WorkflowModule in your AppModule

@NgModule({
  imports: [
    ...
    WorkflowModule.forRoot()
  ]
})

3. Insert element ec-wf in your component.

<ec-wf
    id="designerHost"
    plugins="PrimitiveActivities ControlFlowActivities EmailActivities HttpActivities ConsoleActivities MassTransitActivities TimerActivities"
    activity-definitions=""
    workflow='{"activities":[{"id":"278a7ae3-83dc-4ebb-8ce6-4a3d2a44fdbd","top":88,"left":107,"type":"ReadLine","state":{},"displayName":"Read Line"},{"id":"59b9576b-e13c-4bef-be25-c83489014b5d","top":97,"left":429,"type":"WriteLine","state":{},"displayName":"Write Line"}],"connections":[{"sourceId":"278a7ae3-83dc-4ebb-8ce6-4a3d2a44fdbd","targetId":"59b9576b-e13c-4bef-be25-c83489014b5d","outcome":"Done"}]}'
    readonly="false"
    height = "100vh"
></ec-wf>

Alternatively you can initialize workflow and workflow definitions using WorkflowService

import {Workflow, WorkflowService} from 'elsa-designer-angular'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(private workflowService: WorkflowService){}

  ngOnInit(){
    this.workflowService.setWorkflow({"activities":[{"id":"278a7ae3-83dc-4ebb-8ce6-4a3d2a44fdbd","top":88,"left":107,"type":"ReadLine","state":{},"displayName":"Read Line"},{"id":"59b9576b-e13c-4bef-be25-c83489014b5d","top":97,"left":429,"type":"WriteLine","state":{},"displayName":"Write Line"}],"connections":[{"sourceId":"278a7ae3-83dc-4ebb-8ce6-4a3d2a44fdbd","targetId":"59b9576b-e13c-4bef-be25-c83489014b5d","outcome":"Done"}]} as Workflow)
  }
}