salgum1114 / react-design-editor Goto Github PK

when i am calling canvasRef.canvas.toSVG() function in ImageMapEditor,

getting this error in fabricjs file:
http://prntscr.com/mgahxr

so how i export svg format like json export

Candidates

• ace editor
• code mirror

목차

1. 요구 사항
2. 기능 정의
3. 라이브러리 선정

1. 요구 사항

1.1 편집 화면

• 맵에 이미지 업로드가 가능 해야한다.
• 이미지맵 내부에서 여러개의 맵을 추가 할 수 있어야 한다.
• 이미지는 맵에 고정 될 수 있어야 한다.
• 레이어 컴포넌트를 드래그/드랍으로 맵으로 위치 시킬 수 있어야 한다.
• 레이어 컴포넌트는 목록에서 종류에 따라 클릭시 맵에 추가되거나 그리기의 경우 연속적인 클릭이 지원되어야 한다.
• 멥과 이미지, 레이어 컴포넌트는 같은 스케일로 줌 인/아웃이 될 수 있어야 한다.
• 레이어 컴포넌트는 각종 이벤트를 지원해야 한다
  • 드래그/드랍
  • 리사이즈
  • 로테이션
  • 클릭
  • 호버
• 이미지와 레이어 컴포넌트는 단일 대상이 선택 되었을 경우, 속성 정보를 수정/저장을 할 수 있어야 한다.
• Polygon, Line, Rect, Circle 등 도형 레이어 컴포넌트를 그릴 수 있어야 한다.
• 레이어 컴포넌트는 다중 선택을 통해 그룹화할 수 있어야 한다.
• 맵에 추가된 컴포넌트들은 트리 형태로 관리 되어, 트리에서 컴포넌트 추가/삭제/이동이 가능할 수 있어야 한다.
• 유틸성 기능을 포함한 툴바를 지원해야 한다.
  • 마우스 커맨드 (기본, 그립, 셀렉션)
  • 정렬 (좌, 우, 중앙, 수직, 수평)
  • 줌 (인, 아웃, 1:1)
  • Undo/Redo
• JSON 포맷으로 Export/Import가 가능해야 한다.
• 레이어 컴포넌트는 상태를 정의 하여, 해당 상태를 동작 시킬 수 있어야 한다.
  • 다른 맵으로 이동
  • 외부 경로로 이동
  • 다른 대시보드로 이동
  • 리소스 이동
  • 다른 위젯이나 해당 이미젯 위젯 내에 리소스, 리소스타입, 지표 필터
• 최종적으로 위젯 편집 후, 저장이 가능해야 한다.

1.2 뷰 화면

• 맵에 놓여진 레이어 컴포넌트는 상태가 정의 되어 있을 경우, 해당 상태를 동작 시킬 수 있어야 한다.
  • 다른 맵으로 전환
  • 외부 경로로 이동
  • 다른 대시보드로 이동
  • 리소스 이동
  • 다른 위젯이나 해당 이미젯 위젯 내에 리소스, 리소스타입, 지표 필터
• 이미지맵 위젯에서는 다른 맵으로 전환 시킬 수 있다.
• 위젯 리사이즈시, 맵의 스케일과 맵의 넓이 능동적 변경
• 편집 전용 유틸성 기능들이 제거되어야 한다.
• 지표를 선택할 수 있는 레이어 컴포넌트는 기간 및 실시간 선택에 따른 조회가 가능해야 한다.

↑ 목차로 이동

2. 기능 정의

2.1 사용자 인터랙션

• 드래그/드랍
• 줌 인/아웃
• 셀렉션
• 클릭
• Copy/Paste
• Undo/Redo
• 리사이즈
• 로테이션
• 정렬
• 도형 그리기

2.2 위젯 기능

2.2.1 편집 화면

• 맵 관리
  • 맵 추가/수정/삭제
• 컴포넌트 관리
  • 트리 제공
  • 툴팁 설명 제공
  • 추가/복제/삭제/위치 이동/리사이즈/로테이션/그룹화
• 컴포넌트 속성 관리
  • 툴팁 설명 제공
  • 초기화/수정/저장/커스텀 툴팁
• Context Menu
  • 추가/복제/삭제
  • 순서 변경
• 툴바
  • 마우스 커맨드 (기본, 그립, 셀렉션)
  • 정렬 (좌, 우, 중앙, 수직, 수평)
  • 줌 (인, 아웃, 1:1)
  • Undo/Redo
  • 복제
  • 삭제
• 위젯
  • Import/Export
  • Preview
  • 취소/저장

2.2.2 뷰 화면

• 컴포넌트 관리
  • Internal Link
    • Map
    • Resource
    • Dashboard
  • External Link
    • URL
  • Filter
  • 툴팁 제공
• 위젯
  • Map Combobox
  • Fullscreen

2.3 속성

• 위젯
  • 일반 위젯 속성
  • 툴팁
    • Enabled
    • Show Action
      • Hover
      • Click
  • Fullscreen
  • Zooming
  • Enabled Multiple Map
• 맵
  • 일반
    • Responsive/Fixed
    • Name
    • Width
    • Height
    • Rotation
  • 이미지
    • 파일
    • URL
• 레이어 컴포넌트
  • 일반
    • Name
    • Width
    • Height
    • Rotation
    • X Position
    • Y Position
    • Fixed
    • Visible
  • 꾸미기
    • Border
      • Color
      • Opacity
      • Width
      • Dashed
    • Background
      • Color
      • Opacity
  • 상태
    • Internal Link
      • Map
      • Dashboard
      • Resource
    • External Link
      • URL
    • Filter
      • Resource
      • ResourceType
      • MeasurementDefinition
  • 툴팁
    • Enabled
    • Show Action
      • Hover
      • Click
    • 텍스트 입력
    • Dom Element
  • 차트(?)
    • 지표 선택
    • 임계치 지정
    • 차트 위젯의 기본 설정 따라갈 예정
  • 테이블
    • 지표 선택
    • 임계치 지정
    • 테이블 위젯 기본 설정 따라갈 예정
  • 라벨
    • 텍스트 입력
  • 마커
    • 이미지
      • 파일
      • URL
  • 이미지
    • 맵에 크기 맞추기
    • 파일
    • URL
  • 도형
    • 그리기 (Polygon, Line, Rect, Circle)

↑ 목차로 이동

3. 라이브러리 선정

3.1 일반적인 측면

3.2 기능적인 측면

Description
: Resource, Editing map

function

• front
• back
• delete
• clone
• ....

viewport function

• grap
• edit
• zoom
• ...

function

• hover
• action

interaction modes

• default
• grap
• selection
• ...

item list drag & drop

• operator
• threshold
• select animation or style

layout modes

• fixed
• response
• full

function

• file choose
• drag & drop

• moving - complete
• resize - development

function

• line
• polygon
• ...

Get datasource function

• type
  • rest
  • jdbc
• title
• specify column