Integration mit React
Sie sollten mit den grundlegenden Konzepten und Mustern von React vertraut sein, um diese Dokumentation zu nutzen. Um Ihr Wissen aufzufrischen, lesen Sie bitte die React-Dokumentation.
Der DHTMLX Diagram Editor ist mit React kompatibel. Wir haben Codebeispiele vorbereitet, die zeigen, wie Sie den DHTMLX Diagram Editor mit React verwenden können. Weitere Informationen finden Sie im entsprechenden Beispiel auf GitHub.
Erstellen eines Projekts
Sie können ein einfaches React-Projekt erstellen (dieses Projekt) oder React mit Vite verwenden. Nennen wir das Projekt my-react-diagram-app:
npx create-react-app my-react-diagram-app
Installation der Abhängigkeiten
Wechseln Sie in das neu erstellte App-Verzeichnis:
cd my-react-diagram-app
Installieren Sie die Abhängigkeiten und starten Sie den Dev-Server. Verwenden Sie dazu einen Paketmanager:
- wenn Sie yarn verwenden, führen Sie die folgenden Befehle aus:
yarn
yarn start
- wenn Sie npm verwenden, führen Sie die folgenden Befehle aus:
npm install
npm run dev
Die App sollte nun auf einem localhost laufen (zum Beispiel unter http://localhost:3000).
Erstellen des Diagram Editors
Jetzt sollten Sie sich den Quellcode des DHTMLX Diagram Editors besorgen. Stoppen Sie zunächst die App und fahren Sie mit der Installation des Diagram-Editor-Pakets fort.
Schritt 1. Paketinstallation
Laden Sie das Diagram-Editor-Testpaket herunter und befolgen Sie die in der README-Datei beschriebenen Schritte. Beachten Sie, dass der Diagram Editor in der Testversion nur 30 Tage lang verfügbar ist.
Schritt 2. Erstellung der Komponente
Jetzt müssen Sie eine React-Komponente erstellen, um den Diagram Editor in die Anwendung einzubinden. Erstellen Sie eine neue Datei im Verzeichnis src/ und benennen Sie sie DiagramEditor.jsx.
Quelldateien importieren
Öffnen Sie die Datei DiagramEditor.jsx und importieren Sie die Quelldateien des Diagram Editors. Beachten Sie Folgendes:
- wenn Sie die PRO-Version verwenden und das Diagram-Editor-Paket aus einem lokalen Ordner installieren, sehen die Importpfade folgendermaßen aus:
import { DiagramEditor } from 'dhx-diagram-package';
import 'dhx-diagram-package/codebase/diagram.css';
Beachten Sie, dass die Quelldateien je nach verwendetem Paket minifiziert sein können. Stellen Sie in diesem Fall sicher, dass Sie die CSS-Datei als diagram.min.css importieren.
- wenn Sie die Testversion von Diagram verwenden, geben Sie die folgenden Pfade an:
import { DiagramEditor } from '@dhx/trial-diagram';
import '@dhx/trial-diagram/codebase/diagram.min.css';
In diesem Tutorial erfahren Sie, wie Sie die Testversion von Diagram konfigurieren.
Container festlegen und Diagram Editor initialisieren
Um den Diagram Editor auf der Seite anzuzeigen, müssen Sie den Container für den Diagram Editor erstellen und diese Komponente mit dem entsprechenden Konstruktor initialisieren:
import { useEffect, useRef } from "react";
import { DiagramEditor } from "@dhx/trial-diagram";
import "@dhx/trial-diagram/codebase/diagram.min.css"; // Diagram-Editor-Styles einbinden
export default function DiagramEditorComponent(props) {
let container = useRef(); // Container für den Diagram Editor initialisieren
useEffect(() => {
// die Diagram-Editor-Komponente initialisieren
const diagram_editor = new DiagramEditor(container.current, {});
return () => {
diagram_editor.destructor(); // Diagram Editor zerstören
}
});
return <div ref={container} className="widget"></div>;
}
Styles hinzufügen
Um den Diagram Editor korrekt anzuzeigen, müssen Sie in der CSS-Datei des Projekts wichtige Styles für den Diagram Editor und seinen Container festlegen:
/* Styles für die Startseite festlegen */
html,
body,
#root {
height: 100%;
padding: 0;
margin: 0;
}
/* Styles für den Diagram-Editor-Container festlegen */
.widget {
height: 100%;
width: 100%;
}
Daten laden
Um Daten in den Diagram Editor einzufügen, müssen Sie einen Datensatz bereitstellen. Erstellen wir die Datei data.js im Verzeichnis src/ und fügen wir einige Daten hinzu:
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" },
// weitere Daten
{ 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" },
// weitere Daten
]
}
Öffnen Sie anschließend die Datei App.js und importieren Sie die Daten. Danach können Sie die Daten als props an die neu erstellte Komponente <DiagramEditor/> übergeben:
import DiagramEditor from "./DiagramEditor";
import { getData } from "./data";
function App() {
let data = getData();
return <DiagramEditor data={data} />;
}
export default App;
Öffnen Sie die Datei DiagramEditor.jsx und wenden Sie die übergebenen props mithilfe der Methode parse() auf den Diagram Editor an:
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>;
}
Die Diagram-Editor-Komponente ist nun einsatzbereit. Sobald das Element zur Seite hinzugefügt wird, initialisiert es den Diagram Editor mit den Daten. Sie können außerdem die erforderlichen Konfigurationseinstellungen angeben. Besuchen Sie unsere Diagram Editor API-Dokumentation, um die vollständige Liste der verfügbaren Eigenschaften einzusehen.
Events verarbeiten
Wenn ein Benutzer eine Aktion im Diagram Editor ausführt, löst dies ein Event aus. Sie können diese Events nutzen, um die Aktion zu erkennen und den gewünschten Code dafür auszuführen. Siehe die vollständige Liste der Events.
Öffnen Sie DiagramEditor.jsx und ergänzen Sie die Methode useEffect() wie folgt:
// ...
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();
}
}, []);
// ...
Danach können Sie die App starten, um den mit Daten geladenen Diagram Editor auf einer Seite zu sehen.
Jetzt wissen Sie, wie Sie den DHTMLX Diagram Editor mit React integrieren. Sie können den Code an Ihre spezifischen Anforderungen anpassen. Das vollständige Beispiel finden Sie auf GitHub.