@ngneat/dag 라이브러리 소개

프레스턴 람 | ng 형태 | 2020년 12월

tldr;
어떤 작업 흐름을 구축해야 한다면 조직 모델의 좋은 방법은 유방향 무환도를 사용하는 것이다.DAG 모델은 대량의 정보를 저장할 수 있을 뿐만 아니라 좀 복잡할 수도 있다.본질적으로 말하자면 데이터는 정점(본문에서 노드라고 부른다)과 변으로 표시된다.한 노드를 다른 노드에 연결하고 서열에서 아침부터 저녁까지.이 모델은 작업 흐름을 구축하기에 매우 적합합니다. 본고에서 @ngneat/dag 라이브러리를 사용하여 응용 프로그램의dag 모델을 관리하는 방법을 보실 수 있습니다.

라이브러리 설치 및 설정
시작하기 전에 Angular 응용 프로그램에 라이브러리를 설치합니다.

$ npm install @ngneat/dag

혹은

$ yarn add @ngneat/dag

응용 프로그램에 라이브러리를 설치한 후에 응용 프로그램에서 그것을 실현할 수 있다.이 라이브러리는 하나의 서비스 (모든 힘든 작업을 완성) 와 하나의 인터페이스로 구성되어 있다.이 서비스는 Angular 응용 프로그램의 많은 서비스와 약간 다르다. 이것은 응용 프로그램의 루트 디렉터리에 제공되지 말아야 하기 때문이다.이러한 방식으로 서비스를 제공할 때, 그것들은 하나의 예로 실례화되고, 서비스의 데이터는 응용 프로그램의 모든 구성 요소나 서비스에 사용할 수 있다.그러나 이 경우 DAG 모델은 워크플로우 구축에 사용되는 구성 요소의 라이프 사이클 외부에서 영구화할 필요가 없습니다.따라서 이 서비스를 사용하려면 구성 요소providers 어레이에 포함해야 합니다.

// workflow-builder.component.ts
import { DagManagerService } from ‘@ngneat/dag’;
@Component({
  selector: ‘app-workflow-builder’,
  templateUrl: ‘’,
  styleUrls: [],
  providers: [DagManagerService]
})

이 단계를 기억하지 못하면, 프로그램에 서비스 공급자가 없는 오류가 발생할 수 있습니다.공급자 그룹에 라이브러리를 포함한 후, 다음 단계는 의존항 주입을 사용하여 서비스를 구성 요소에 주입하는 것입니다. 다른 서비스와 같습니다.그러나 이 동작을 실행하기 전에 라이브러리에서 인터페이스를 확장하기 위해 인터페이스나 클래스를 정의해야 합니다. DagModelItemDagModelItem 인터페이스는 DAG 모델 배열의 각 항목에 필요한 몇 가지 속성을 정의합니다.인터페이스의 속성은 stepId,parentIds와branchPath이다.정의한 인터페이스 또는 클래스에는 다음과 같은 여러 속성이 있을 수 있습니다.

// workflow-step.interface.ts
export interface WorkflowStep extends DagModelItem {
  databaseId: number;
  name: string;
  data: any;
}

그런 다음 workflow builder 구성 요소로 돌아갑니다.

// workflow-builder.component.ts
import { DagManagerService } from ‘@ngneat/dag’;
import { WorkflowStep } from ‘./workflow-step.interface.ts’;
export class WorkflowBuilderComponent {
  constructor(private _dag: DagMangerService<WorkflowStep>) {}
}

구조 함수에서 주입할 서비스를 설명할 때, 뾰족한 괄호 안에DAG 모델에 정의된 인터페이스나 클래스를 제공해야 한다.이것은 라이브러리가 범형을 사용하여 모델에 대한 더 많은 정보를 얻을 수 있도록 도와준다.마찬가지로 이 단계를 수행하지 않으면 응용 프로그램과 IDE에서 오류가 표시됩니다.
이제 모든 설정이 완료되었으므로 라이브러리를 시작할 수 있습니다.

데이터베이스 저장소DagManagerService 항목 배열을 2D 배열로 변환합니다. 이 배열은 항목을 표시하는 데 사용되는 DAG 모델을 나타냅니다.그러나 이를 데이터베이스에 저장하는 가장 좋은 방법은 1차원 그룹에 있는 것이다.작업 흐름을 불러올 때 백엔드 데이터 서비스도 작업 흐름을 1차원 그룹으로 제공해야 한다.DagManagerService 1차원 진열을 2차원 DAG 디스플레이 모델로 변환하거나 1차원 진열로 변환할 수 있다.

ngOnInit() {
  // Providing the service with items to convert to the DAG model
  this._dagManager.setNewItemsArrayAsDagModel(this.startingItems);
// Converting the DAG model to a single dimensional array
  const itemsArray = 
    this._dagManager.getSingleDimensionalArrayFromModel();
}

이 두 어레이는 서버에서 데이터를 가져오고 서비스에 시작 어레이를 제공하며 최신 모델을 가져와 2차원 어레이를 평평하게 펴서 데이터베이스로 보낼 수 있도록 합니다.

DAG 모델 생성 및 관리
라이브러리 서비스가 설치되어 설정되어 있으며, 사용하기 시작할 수 있습니다.구성 요소 ngOnInit 방법에서 가장 먼저 해야 할 일은 서비스가 새로운 단계를 만들 때 사용할 다음 stepId 을 설정하는 것입니다.DAG 모델의 각 단계는 고유해야 합니다.만약 당신이 새로운 업무 절차로부터 시작한다면, 다음 숫자는 1이어야 한다.워크플로우를 로드하는 경우 다음 숫자를 결정하는 가장 좋은 방법은 데이터베이스에서 반환된 모든 항목을 순환하고 최대 값stepId을 찾는 것입니다.이 최대치에 하나를 추가하면 복사되지 않습니다 stepId.서비스의 다음 번호를 이렇게 설정할 수 있습니다.

// workflow-builder.component.ts
ngOnInit() {
  const nextNumber = this.determineNextNumber();
  this._dag.setNextNumber(nextNumber);
}

사용할 다음 stepId 번호를 설정한 후 다음 작업은 서비스에 DAG 모델을 설정하는 것입니다.당신은 임의의 WorkflowStep의 1차원 그룹으로 이 점을 실현할 수 있다. 아래와 같다.

ngOnInit() {
  // this.startingItems can be an array retrieved from a backend
  // or a new array if you’re creating a new workflow
this._dag.setNewItemsArrayAsDagModel(this.startingItems)
}

그런 다음 이 서비스에는 2D DAG 모델로 변환되고 항목을 추가하거나 삭제할 수 있는 배열이 있습니다.다음 서비스를 통해 DAG 모델에 액세스할 수 있습니다.

public dagModel$: Observable<WorkflowStep[][]>;
ngOnInit() {
  this.dagModel$ = this._dag.dagModel$;
}

이런 관찰성을 사용하면 프로그램이나 UI가 항목을 추가하거나 삭제할 때 자동으로 업데이트됩니다.
항목을 추가하려면 모델에 항목을 추가하는 두 가지 방법이 있습니다.그 중 하나는 관찰 대상을 자동으로 업데이트하고, 다른 하나는 1차원 그룹의 항목을 되돌려줍니다.가장 간단한 방법은 서비스가 관측 가능한 데이터를 자동으로 업데이트하는 것이다.모델에 항목을 추가하려면 addNewStep 방법을 사용합니다.이 메서드에는 4개의 매개변수가 필요합니다.

새 프로젝트와 관련된 상위 ID

신규 자녀 수;

시작할 지점 경로(거의 항상 1).

와 한 대상, 이 대상은 aWorkflowStep의 모든 속성을 가지고 있지만 DagModelItem의 속성은 제외된다.

다음 예는 다음과 같습니다.

doAddStep() {
  this._dag.addNewStep([1], 1, 1, { name: ‘’, id: null });
}

위의 함수에 새 항목을 추가합니다. branchPath 는 1이고, parentId 수조는 숫자를 포함합니다. (이것은 stepId 1의 하위 항목임을 표시합니다.)새 항목의 name 속성은 빈 문자열이고 id 속성은 null입니다.
모델에서 노드를 삭제하려면 삭제할 항목의 ID만 전달하면 됩니다.stepId1을 삭제하려면 다음과 같이 하십시오.

doAddStep() {
  this._dag.removeStep(1);
}

응용 프로그램의 모델을 관리할 때 이 두 가지 방법은 모두 매우 유용하다.모델에서 항목을 추가하거나 삭제하는 다른 방법check out the documentation을 더 읽습니다.너도 play with the demo application 그것의 작업 원리를 이해할 수 있다.

모델에 대한 프롬프트 표시하기
내가 이 서비스를 만들 때 가장 어려운 부분 중 하나는 페이지에 작업 흐름을 어떻게 표시하는지 알아보는 것이다.그러나 Angular (즉 *ngFor 와 CSS (즉 flexbox) 에서 기본 기능을 많이 사용할수록 좋다고 생각합니다.이것이 바로 dagModel$ 관측 가능한 2차원 진열의 배후 원인이다.이로써 내 출력 모델이 해야 할 일은 하나*ngFor 순환을 다른 *ngFor 순환에 끼워 넣는 것이다.첫 번째 순환은 모델의 모든 줄을 위에서 아래로 출력합니다.두 번째 순환은 왼쪽에서 오른쪽으로 열을 출력합니다.demo app in the repository 에서 이 방면의 상세한 예시를 보실 수 있습니다.
또한 leader-line 패키지를 사용하여 노드 사이에 선을 그어 모델의 흐름을 표시할 수 있습니다.너는 this article를 읽어서 이 점을 어떻게 하는지 배울 수 있고, 위에서 언급한 시범 응용도 볼 수 있다.관건은 모델을 업데이트하거나 화면에 더 많은 항목을 내보낼 때마다 모든 지시선을 삭제한 다음 다시 그리는 것입니다.마찬가지로, 프레젠테이션 프로그램은 당신이 이 점을 어떻게 하는지 이해하는 데 도움을 줄 것이다.

결론
나는 이 도서관의 가능성에 대해 매우 흥분했다.우리는 작업 중인 프로젝트에서 그것을 사용하지만, 그것이 기원적이기를 바란다. 그러면 우리는 지역 사회에서 도움을 받고, 추가할 수 있는 내용에 대해 아이디어를 얻을 수 있을 것이다.피드백을 보고 시도하고 제출합니다.당신의 프로젝트에도 도움이 되었으면 좋겠어요!

뮤지컬이 곧 옵니다.
ng conf: 뮤지컬은 2021년 4월 22일과 23일 이틀간 회의를 연다.ng-conf.org로 문의하십시오.