joint

JointJS - 뛰어난 UI를 지원하는 JavaScript 다이어그램 라이브러리

JointJS는 모든 규모의 개발자와 회사가 시각적 애플리케이션과 노코드/로우코드 애플리케이션을 더 빠르고 자신있게 구축할 수 있도록 지원하는 테스트되고 입증된 JavaScript / Typescript 다이어그램 라이브러리입니다. 이는 다양한 UI(대화형 다이어그램 애플리케이션, 그리기 도구, 데이터 시각화, 모니터링 시스템용 UI 등)를 생성할 수 있는 유연한 도구입니다. 이는 다음 애플리케이션의 기본 계층이 될 수 있으며 몇 달 또는 몇 년이 아닌 며칠 만에 아이디어를 시장에 출시하는 데 도움이 될 수 있습니다.

추가 정보 , 예제 및 문서는 joinjs.com에서 찾을 수 있습니다.

? 튜토리얼을 시작해 보세요.

질문을 하거나, 피드백을 공유하거나, 다른 커뮤니티 회원과 토론에 참여하려면 GitHub 토론을 방문하세요.

CodePen에서 더 많은 예제를 볼 수 있습니다.

마인드맵 문서를 확인해 보세요.

특징

• 필수 다이어그램 요소(직사각형, 원, 타원, 텍스트, 이미지, 경로)
• 잘 알려진 다이어그램(ERD, 조직도, FSA, UML, PN, DEVS 등)의 즉시 사용 가능한 다이어그램 요소
• SVG를 기반으로 하거나 프로그래밍 방식으로 렌더링된 사용자 정의 다이어그램 요소
• 다이어그램 요소를 링크로 연결하거나 링크를 링크로 연결
• 사용자 정의 가능한 링크, 화살촉 및 레이블
• 구성 가능한 링크 모양(앵커, 연결점, 정점, 라우터, 커넥터)
• 맞춤 요소 속성 및 데이터
• JSON 형식으로 가져오기/내보내기
• 사용자 정의 가능한 요소 포트(외관 및 위치, 모양 주위에 배포 또는 수동으로 배치)
• 풍부한 그래프 API(순회, dfs, bfs, 이웃 찾기, 선행 항목, 지점의 요소 등...)
• 세분화된 상호작용
• 계층적 다이어그램(컨테이너, 포함된 요소, 하위-상위 관계)
• 요소 및 링크 도구(버튼, 상태 아이콘, 링크 모양을 변경하는 도구 등)
• 형광펜(요소에 시각적 강조 제공)
• 자동 레이아웃(요소와 링크를 자동으로 정렬)
• 고도의 이벤트 중심(다이어그램 내부에서 발생하는 모든 이벤트에 반응)
• 확대/축소
• 터치 지원
• MVC 아키텍처
• SVG 기반
• ... 훨씬 더

지원되는 브라우저

• 최신 Google Chrome(모바일 포함)
• 최신 파이어폭스
• 최신 Safari(모바일 포함)
• 최신 Microsoft Edge
• 최신 오페라

개발 환경

JointJS를 로컬에서 작업하려면 다음 지침을 사용하여 시작하세요.

종속성

시스템에 다음 종속성이 설치되어 있는지 확인하십시오.

• Node.js
• 그런트-cli
• 자식
• 방사

Yarn 작업 영역 범위 기능에 액세스할 수 있도록 Yarn 버전 >= 2.0.0을 사용하고 있는지 확인하세요. Volta를 사용하는 경우 package.json 에서 자동으로 이 제한 사항을 읽습니다.

설정

이 Git 저장소를 복제하세요.

git clone https://github.com/clientIO/joint.git

joint 디렉터리로 이동합니다.

 cd joint

모든 종속성을 설치합니다.

yarn install

소스 코드에서 배포 파일을 생성합니다.

yarn run dist

이제 여러 JointJS 패키지의 기능을 결합한 예제 애플리케이션을 탐색할 준비가 되었습니다.

 cd examples

추가 지침은 각 응용 프로그램의 README.md 파일을 참조하세요.

또한 JointJS Core 패키지의 데모 애플리케이션을 찾아볼 수도 있습니다.

 cd packages/joint-core/demo

대부분의 데모는 브라우저에서 index.html 파일을 열기만 하면 실행할 수 있습니다. 일부 데모에는 해당 README.md 파일에서 찾을 수 있는 추가 지침이 있습니다.

테스트

모든 테스트를 실행하려면 다음 안내를 따르세요.

yarn run test

서버측 테스트만 실행하려면 다음 안내를 따르세요.

yarn run test-server

클라이언트측 테스트만 실행하려면 다음 안내를 따르세요.

yarn run test-client

TypeScript 테스트만 실행하려면 다음 안내를 따르세요.

yarn run test-ts

린트

src 및 types 디렉터리에서 Linting 오류를 확인하려면 다음을 수행하세요.

yarn run lint

오류를 자동으로 수정하려면 src 및 types 디렉터리에 대해 eslint를 실행하세요.

yarn run lint-fix

코드 범위 보고서

HTML로 코드 적용 범위 보고서를 출력하려면:

yarn run test-coverage

코드 범위 보고서를 lcov 형식으로 출력하려면 다음을 수행하십시오.

yarn run test-coverage-lcov

모든 단위 테스트의 출력은 packages/joint-core/coverage 디렉터리에 저장됩니다.

기여자

특허

JointJS 라이브러리는 Mozilla Public License 2.0에 따라 라이센스가 부여됩니다.

저작권 © 2013-2024 클라이언트 IO