TypeScript 프로젝트에서 mxGraph 사용

이 글은 자바스크립트 그래프 라이브러리mxGraph 시리즈에 관한 첫 번째 글이다.
지난 몇 달 동안 우리 팀은 매일 그것을 bpmn-visualization의 렌더링 기반으로 사용했다. 이것은 BPMN 도표에서 프로세스를 시각화하는 데 사용되는 오픈 소스 TypeScript 라이브러리이다.
이 시리즈에서 저는 TypeScript 프로젝트에서 mxGraph를 사용할 때 직면한 통합 도전과 해결 방안, mxGraph 기반의 개발을 간소화하기 위해 개발한 도구, 렌더링 확장, 사용 기교 등을 공유할 것입니다.
글에서 설명한 대부분의 부분은 mxGraph를 사용하는 JavaScript 프로젝트에도 적용됩니다.

mxGraph and TypeScript: 가능합니까?

몇 년 전 mxGraph 핵심 개발팀은 mxGraph를 TypeScript에 이식하거나 지원하지 않을 것이며 2020년에도 적용될 것이라고 밝혔다.(자세한 내용은 issue #81 및 관련 문제를 참조하십시오.)
만약 지원되지 않는다면, 왜 TypeScript 프로젝트에서 mxGraph를 사용해야 합니까?응용 프로그램이 Angular 또는 React와 통합되어 있으면 TypeScript를 이미 사용했을 수도 있습니다. 따라서 mxGraph를 추가하려면 TypeScript 통합이 좋습니다.
일반 TypeScript 응용 프로그램이나 bpmn-visualization 같은 라이브러리에서 유용하다는 것을 알 수 있습니다.내 팀이 개발을 시작했을 때, 우리는 mxGraph를 사용하여 렌더링하는 TypeScript 라이브러리를 구축하고 싶었다.
본고에서 나는 우리가 이 문제를 어떻게 처리하고 우리가 직면한 문제, 그리고 mxGraph를 어떻게 성공적으로 집적했는지 설명할 것이다.

《선인장》 저자Steven Ritts

많은 실망스러운 예와 해결 방안

우리는 처음에 대부분의 개발자들과 마찬가지였다. mxGraph에 원생 TypeScript 지원이 없는 것을 보았을 때, 우리는 다른 사람들이 어떻게 시도할지 검사했다.
그러나 우리는 거의 항상 같은 맞춤형 해커와 실망스러운 해결 방안을 본다.그중의 일부와 왜 우리가 그것을 고통이라고 생각하는지 살펴보자.

모든 방법

mxGraph 기본 유형 스크립트가 지원되지 않습니까?문제 없어, 우리는 여기저기 다 써!

declare var mxGraph: any;

const graph = new mxGraph(this.graphContainer.nativeElement);

any를 사용하면 빠르지만 코드 도움말도 필요 없고 TypeScript 컴파일러 검사도 필요 없습니다.요컨대, 이것은 네가 원하는 타자 방식이 아니다.기억해라, 이것은 something the TypeScript documentation recommends not to do 이다.
unknown을 사용할 수도 있습니다. 이것은 TypeScript 컴파일러에게 더 좋지만, 어떤 종류의 컴파일러보다도 유용하지 않습니다.
예를 들면 다음과 같습니다.

https://therichpost.com/angular-8-mxgraph-working-example/

https://stackoverflow.com/questions/63495464/error-during-mxgraph-integration-with-angular-10

자신의 mxGraph 유형 정의 방법

사용 중인 라이브러리 섹션에만 자신의 mxGraph 유형을 정의합니다.
이것은 mxGraph의 일부분을 사용할 때만 가능합니다.이것은 매우 큰 라이브러리입니다. 점점 더 많은 기능을 사용함에 따라 유지보수해야 하는 유형의 수량도 증가하고 있습니다.
예: https://github.com/diegogusava/angular-mxgraph/tree/fc284593b09c4db8c355d663d1189ecdb369b26c/src/mxtypes

유지보수되지 않은 유형 복제 방법

mxGraph 형식의 개인이 공유한 작업을 검색하고 프로젝트의 모든 내용을 직접 복사합니다.
악몽을 지킬 준비를 하세요.

유형은 이미 유행이 지났을 수도 있고 실제 유형이 아닌 모든 유형으로 가득 차 있기 때문에 당신은 여전히 유형을 수정하고 있음을 발견할 수 있습니다

mxGraph의 발전에 따라 API의 변화를 반영하기 위해 유형을 업데이트해야 합니다

와...너는 혼자서 이 무미건조한 임무를 완성할 것이다.

이것은 당신이 진정한 통합을 기대하는 것이 아닐 수도 있는 별도의 작업이다.
예를 들면 다음과 같습니다.

https://medium.com/habilelabs/how-to-integrate-mx-graph-with-angular-8-b4a8bb800694

https://itnext.io/how-to-integrate-mxgraph-with-angular-6-18c3a2bb8566

'소나무 사이의 길'저자veeterzy

진정한 mxgraph 형식 검색

mxGraph는 TypeScript 본체가 지원하지 않는 유일한 자바스크립트 라이브러리가 아닙니다.
이런 상황에서 DefinitelyTyped는 하나의 출구이다.커뮤니티가 주도하는 TypeScript 유형의 소스 저장소입니다.
정의
DefinitelyTyped의 유형을 사용하는 것은 매우 간단합니다.types 패키지를 프로젝트의 종속성으로 추가하면 TypeScript가 자동으로 시작됩니다.
추가 구성 없이 유형을 읽을 수 있습니다.불행히도 하나request for adding mxGraph types to DefinitelyTyped가 있었지만 2020년에는 아무도 그것을 연구하지 않았다는 것을 발견했다.
mxGraph 타입 스크립트의 사용을 더욱 쉽게 하기 위한 개인적인 노력도 발견했다.그러나 모든 사람이 각자 해결 방안을 제정하고 있는 것 같아서 다음과 같은 문제가 생겼다.

대부분의 저장소 소유자는 프로젝트의 유형 정의 파일이 완전하지 않거나 유사하다고 말합니다.mxGraph는 대형 API를 제공하기 때문에 라이브러리의 발전에 따라 유형과 동기화를 유지하기 어렵다.

각종 유형의 정의 패키지가 어느 mxGraph 버전을 겨냥했는지 거의 알 수 없다.

우리는 몇 가지 해결 방안과 npm packages을 찾았기 때문에 TypeScript 프로젝트에서 mxGraph를 사용하는 가장 좋은 방법을 찾기가 매우 어렵다.
mxGraph는 매우 큰 라이브러리로 추출과 유지보수를 시작하는 것을 두려워할 수 있습니다.
더 많은 정보에 관심이 있다면 non-exhaustive list(2020년 중 가장 최근 업데이트)를 보시면 다양한 솔루션이 제공됩니다.
활동 상태 및 구현 선택에 대한 정보입니다.

《구름을 가로지르는 아름다운 햇빛》 저자Yury Khristich

2021년 솔루션

현재 MX2020은 실행 가능한 지역 사회 해결 방안이다.
이 연구는 mxgraph-type-definitions에서 가장 시작되었다.mxGraph의 대부분 내용이 점차 덮어쓰이고 유형도 갈수록 많아진다
사용자의 피드백으로 정확하고 틀림없다.grafana-flowcharting와 같은 항목이 그것을 사용하기 시작했다.
mxGraphnpm 패키지와 통합할 때 문제가 발생했기 때문에 2020년 가을에typed-mxgraph로 바뀌었고 mxGraph 유형 정의는 결국 2020년 12월에 폐기되었다.
이 작업은 여전히 mxgraph 형식 정의 라이브러리의 원시 창설자@hungtcs가 이끌고 있다.
다음은 유형 mxgraph를 사용하여 작성할 수 있는 예입니다.

class Application {
  constructor(container: HTMLElement) {
    const graph: mxGraph = new mx.mxGraph(container);
    const model: mxGraphModel = graph.getModel();
    model.beginUpdate();
    try {
      graph.insertVertex(graph.getDefaultParent(), '', 'TEST', 0, 0, 100, 100);
    } finally {
      model.endUpdate();
    }
  }
}

우리bpmn-visualization 프로젝트는 TypeScript 프로젝트에서 mxGraph를 사용할 때 유사한 진화 경로를 따랐다.
우리는 처음에 자신의 ts-mxgraph 포크를 사용했고, 우리는 이런 유형을 스스로 관리해야만 했다.우리는 유행이 지난 유형과 싸우기 때문에 유일한 용도로 갱신을 관리해야 한다.
mxgraph-type-definitions가 충분히 성숙되었을 때, 우리는 생산 코드에서 그것을 사용했다.우리는 곧 복구에서 이익을 얻고 프로젝트에서 사용하는 유형을 개선하기 시작했다.
mxgraph npm 패키지 통합에 존재하는 문제점으로 인해, 우리의 테스트는 여전히tsmxgraph가 필요합니다.
현재, 우리는 최근에 사용한 mxgraph TypeScript example bundled with webpack 등 예시를 완전히 유형화 mxgraph로 전환했다.
그래서 우리는 이미 우리의tsmxgraph fork를 제거할 수 있다.우리는 모든 mxgraph 통합 작업을 지역 사회에 집중하고 지역 사회로부터 진일보한 개선을 얻을 수 있다.

가져가다

mxGraph TypeScript는 과거에는 어려움과 고통이 있었지만 2021년에는 typed-mxgraph의 해결 방안이 생겼다.
더 이상 해커 솔루션이 필요하지 않습니다.mxGraph는 원본 TypeScript를 지원하지 않는 자바스크립트 라이브러리처럼 TypeScript 프로젝트에 집적할 수 있으며 코드 도움말과 TypeScript 컴파일러 검사를 받을 수 있습니다.
유형화 mxgraph는 여전히 젊은 해결 방안으로 더욱 광범위한 채택에 도움이 될 것이다.따라서 mxGraph를 사용하고 있거나 TypeScript 프로젝트에서 사용하려면 언제든지 typed-mxgraph에 도움을 주십시오.
다음과 같은 여러 가지 개선 사항이 있습니다.

사용 피드백 제공(누락 또는 부정확한 유형)

유형 커버율 향상

향상된 사용 설명서

기존 예(추가 mxGraph API 사용법) 또는 새로운 예

제공

mxGraphjavascript 라이브러리 변경 시 형식을 최신으로 유지하는 데 도움말

우리는 당신이 우리 팀을 위해 공헌하는 것을 환영합니다!
본문은 최초로 발표되었다Dzone