React와의 통합
DHTMLX Diagram Editor는 React와 호환됩니다. DHTMLX Diagram Editor를 React와 함께 사용하는 방법에 대한 코드 예제를 준비했습니다. 자세한 내용은 해당 GitHub 예제를 참고하세요.
프로젝트 생성
기본 React 프로젝트(이 프로젝트)를 생성하거나 Vite가 포함된 React를 사용할 수 있습니다. 프로젝트 이름을 my-react-diagram-app으로 지정하겠습니다.
npx create-react-app my-react-diagram-app
종속성 설치
새로 생성된 앱 디렉터리로 이동합니다.
cd my-react-diagram-app
종속성을 설치하고 개발 서버를 시작합니다. 이를 위해 패키지 관리자를 사용하세요.
- yarn을 사용하는 경우, 다음 명령을 실행하세요.
yarn
yarn start
- npm을 사용하는 경우, 다음 명령을 실행하세요.
npm install
npm run dev
앱은 로컬호스트에서 실행되어야 합니다(예: http://localhost:3000).
Diagram Editor 생성
이제 DHTMLX Diagram Editor 소스 코드를 받아야 합니다. 먼저 앱을 중지하고 Diagram Editor 패키지 설치를 진행하세요.
1단계. 패키지 설치
평가판 Diagram Editor 패키지를 다운로드하고 README 파일에 언급된 단계를 따르세요. 평가판 Diagram Editor는 30일 동안만 사용할 수 있습니다.
2단계. 컴포넌트 생성
이제 애플리케이션에 Diagram Editor를 추가하기 위한 React 컴포넌트를 생성해야 합니다. src/ 디렉터리에 새 파일을 생성하고 DiagramEditor.jsx로 이름을 지정하세요.
소스 파일 가져오기
DiagramEditor.jsx 파일을 열고 Diagram Editor 소스 파일을 가져옵니다. 참고 사항:
- PRO 버전을 사용하고 로컬 폴더에서 Diagram Editor 패키지를 설치하는 경우, 가져오기 경로는 다음과 같습니다.
import { DiagramEditor } from 'dhx-diagram-package';
import 'dhx-diagram-package/codebase/diagram.css';
사용하는 패키지에 따라 소스 파일이 축소(minify)될 수 있습니다. 이 경우 CSS 파일을 diagram.min.css로 가져오고 있는지 확인하세요.
- Diagram의 평가판 버전을 사용하는 경우, 다음 경로를 지정하세요.
import { DiagramEditor } from '@dhx/trial-diagram';
import '@dhx/trial-diagram/codebase/diagram.min.css';
이 튜토리얼에서는 Diagram의 평가판(trial) 버전을 구성하는 방법을 확인할 수 있습니다.
컨테이너 설정 및 Diagram Editor 초기화
페이지에 Diagram Editor를 표시하려면 Diagram Editor용 컨테이너를 생성하고 해당 생성자를 사용하여 이 컴포넌트를 초기화해야 합니다.
import { useEffect, useRef } from "react";
import { DiagramEditor } from "@dhx/trial-diagram";
import "@dhx/trial-diagram/codebase/diagram.min.css"; // Diagram Editor 스타일 포함
export default function DiagramEditorComponent(props) {
let container = useRef(); // Diagram Editor의 컨테이너 초기화
useEffect(() => {
// Diagram Editor 컴포넌트 초기화
const diagram_editor = new DiagramEditor(container.current, {});
return () => {
diagram_editor.destructor(); // Diagram Editor 소멸
}
});
return <div ref={container} className="widget"></div>;
}
스타일 추가
Diagram Editor를 올바르게 표시하려면 프로젝트의 CSS 파일에서 Diagram Editor와 그 컨테이너에 대한 중요한 스타일을 지정해야 합니다.
/* 초기 페이지의 스타일 지정 */
html,
body,
#root {
height: 100%;
padding: 0;
margin: 0;
}
/* Diagram Editor 컨테이너의 스타일 지정 */
.widget {
height: 100%;
width: 100%;
}
데이터 로드
Diagram Editor에 데이터를 추가하려면 데이터 세트를 제공해야 합니다. src/ 디렉터리에 data.js 파일을 생성하고 데이터를 추가해 보겠습니다.
export function getData() {
return [
{ id: 1, x: 880, y: 105, text: "Does user remember his password?", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
{ id: 2, x: 1080, y: 125, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" },
{ id: 3, x: 1160, y: 40, text: "User forgets his password", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
{ id: 3.1, x: 1340, y: 40, text: "Send an E-mail with new password", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
{ id: 3.2, x: 1520, y: 40, text: "E-mail sent", type: "preparation", fontColor: "#fff", lineHeight: 18, fill: "#33B579", stroke: "#33B579" },
{ id: 4, x: 1160, y: 180, text: "User remembers his password", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
{ id: 5, x: 1340, y: 180, text: "User types in login and password", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
// 기타 데이터
{ from: 1, to: 2, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
{ from: 2, to: 3, type: "dash", toSide: "bottom", forwardArrow: "filled", stroke: "#7D8495" },
{ from: 2, to: 7.5, type: "dash", fromSide: "bottom", toSide: "top", backArrow: "filled", stroke: "#7D8495" },
{ from: 2, to: 3.2, type: "dash", fromSide: "top", toSide: "top", stroke: "#7D8495" },
{ from: 3, to: 3.1, type: "line", forwardArrow: "filled", stroke: "#7D8495" },
{ from: 3.1, to: 3.2, type: "line", forwardArrow: "filled", stroke: "#7D8495" },
{ from: 2, to: 4, type: "dash", toSide: "top", forwardArrow: "filled", stroke: "#7D8495" },
{ from: 4, to: 5, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
{ from: 5, to: 6, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
// 기타 데이터
]
}
그런 다음 App.js 파일을 열고 데이터를 가져옵니다. 이후 새로 생성된 <DiagramEditor/> 컴포넌트에 props로 데이터를 전달할 수 있습니다.
import DiagramEditor from "./DiagramEditor";
import { getData } from "./data";
function App() {
let data = getData();
return <DiagramEditor data={data} />;
}
export default App;
DiagramEditor.jsx 파일로 이동하여 parse() 메서드를 통해 전달된 props를 Diagram Editor에 적용하세요.
import { useEffect, useRef } from "react";
import { DiagramEditor } from "@dhx/trial-diagram";
import "@dhx/trial-diagram/codebase/diagram.min.css";
export default function DiagramEditorComponent(props) {
let container = useRef();
useEffect(() => {
const diagram_editor = new DiagramEditor(container.current, {});
diagram_editor.parse(props.data);
return () => {
diagram_editor.destructor();
}
});
return <div ref={container} className="widget"></div>;
}
이제 Diagram Editor 컴포넌트를 사용할 준비가 되었습니다. 요소가 페이지에 추가되면 데이터와 함께 Diagram Editor가 초기화됩니다. 필요한 구성 설정도 제공할 수 있습니다. 사용 가능한 전체 속성 목록을 확인하려면 Diagram Editor API 문서를 방문하세요.
이벤트 처리
사용자가 Diagram Editor에서 어떤 동작을 수행하면 이벤트가 호출됩니다. 이러한 이벤트를 사용하여 동작을 감지하고 원하는 코드를 실행할 수 있습니다. 전체 이벤트 목록을 확인하세요.
DiagramEditor.jsx를 열고 다음과 같이 useEffect() 메서드를 완성하세요.
// ...
useEffect(() => {
const diagram_editor = new DiagramEditor(container.current, {});
diagram_editor.events.on("zoomIn", (step) => {
console.log("The diagram in the editor is zoomed in. The step is" + step);
});
return () => {
diagram_editor.destructor();
}
}, []);
// ...
그 후 앱을 시작하면 페이지에 데이터와 함께 로드된 Diagram Editor를 확인할 수 있습니다.
이제 DHTMLX Diagram Editor를 React와 통합하는 방법을 알게 되었습니다. 특정 요구 사항에 따라 코드를 사용자 정의할 수 있습니다. 최종 예제는 GitHub에서 확인할 수 있습니다.