작업 방식
AntV X6 Editor은 순서도, DAG, 개체-관계, 계보, 조직도 편집기 같은 대화형 다이어그램 도구를 대상으로 합니다. 확인된 항목은 X6 v3을 대상으로 하며 명령형 방식을 설명합니다. 그래프를 만들고 노드와 엣지를 추가한 뒤, 의도한 작업에 필요한 편집기 플러그인을 등록합니다.
핵심은 편집기 동작입니다. 선택, 히스토리, 클립보드, 키보드, 스텐실, 드래그 앤 드롭, 변형, 내보내기는 명시적으로 설정해야 하며, 캔버스 이동과 연결 동작은 다른 설정 계층에 속합니다. 소스는 직렬화와 포트 관련 작업도 상세 참고 자료로 안내합니다. 그려 놓은 워크플로를 실행 가능한 업무 프로세스로 바꿔 주지는 않습니다.
예상 결과물
- 스타일이 적용된 노드와 엣지를 갖춘 X6 다이어그램 편집기 JavaScript
- 의도에 맞게 선택한 편집기 플러그인과 캔버스 상호작용
- 편집기에 적합한 연결, 프레이밍, 선택적 직렬화 동작
브리프에서 검토까지
- 01편집 작업 정의
사용자가 만들고, 이동하고, 선택하고, 연결하고, 삭제할 수 있는 다이어그램 객체를 나열합니다. 플러그인을 활성화하기 전에 실제로 필요한 편집기 작업을 정합니다.
- 02노드-엣지 모델 구축
그래프를 만들고 필요한 도형과 연결을 추가합니다. 포트, 사용자 지정 HTML 노드, 중첩 구조가 범위에 포함되면 해당 전용 가이드를 찾아봅니다.
- 03편집기 기능 등록
구현에 사용하는 플러그인을 가져와 등록합니다. 이동·연결 같은 생성자 옵션은 플러그인 클래스와 분리해 둡니다.
- 04편집 세션 확인
선택, 이동, 확대/축소, 드래그 제스처가 충돌하지 않는지 테스트하고, 콘텐츠를 화면에 맞춘 뒤, 약속한 저장/불러오기 또는 내보내기 경로가 있다고 가정하지 말고 직접 확인합니다.