vue jsplumb editor

vue-jsplumb-editor

온라인 미리보기

기능적 요점

메뉴 노드 영역

• 노드를 메뉴에서 기본 설계 영역으로 끌어 노드를 배치합니다.
• 노드 유형별로 노드를 구성합니다

주요 디자인 영역

• 작동을 취소 할 수 있습니다
• 배경의 팬과 줌
• 메뉴에서 드래그 된 노드를받을 수 있습니다
• 드래그 인 노드는 현재 노드 정보를 기반으로 해당 엔드 포인트를 생성합니다 (연결을 끌어 내기 위해 사용됨)
• 생성 된 엔드 포인트는 두 가지 유형의 소스 엔드 포인트와 타겟 엔드 포인트로 나뉘어져 있으며 스타일로 구별해야합니다.
• 소스 엔드 포인트는 노드 하단 위치에 배치되고 대상 노드는 노드가 상단 위치에있는 것을 방지합니다 (위에서 아래로 연결 라인을 끌어내는 것이 용이 해집니다).
• 드래그 및 이동하여 모든 노드를 이동할 수 있습니다
• 모든 노드와 연결 라인을 삭제할 수 있습니다
• 모든 노드와 엔드 포인트에는 마우스의 노드 또는 엔드 포인트 정보를 프롬프트하려면 툴팁 상자가 있어야합니다.
• 마우스를 떠올 때 모든 노드, 엔드 포인트 및 연결 라인을 설정해야합니다.
• 모든 노드와 연결 라인을 선택할 수 있습니다
• 작업은 데이터를 실시간으로 저장합니다
• 수입 데이터 생성 흐름도

노드 구성 영역

• 설계 영역에서 노드를 선택할 때 노드 구성 영역에는 해당 노드 구성 패널이 표시됩니다.
• 다른 노드에는 해당 노드 구성 패널이 있어야합니다
• 노드 패널은 노드 속성을 표시하고 구성하는 데 사용됩니다.

메뉴 기능을 마우스 오른쪽 버튼으로 클릭하십시오

• 마디:
  • 복사
  • 삭제
  • 데이터를 봅니다
  • 이름 바꾸기
• 연결 케이블 :
  • 삭제
• 배경:
  • 반죽

설치 종속성

 npm install

개발 모델

 npm run serve

생산 코드를 컴파일하십시오

 npm run build