})
+
+Die Verbindung zwischen der übergeordneten Form und ihrem Partner ist immer horizontal. Außerdem werden die Verbindungen zwischen der übergeordneten Form und all ihren untergeordneten Elementen horizontal, nachdem ein Partnerelement für das übergeordnete Element hinzugefügt wurde, selbst wenn die Verbindungen zuvor vertikal waren.
+
+### Editor im Mindmap-Modus {#editor-in-the-mindmap-mode}
+
+Die Oberfläche des im Mindmap-Modus initialisierten Editors besteht aus drei Teilen:
+
+- [toolbar](guides/diagram_editor/toolbar.md)
+- [grid area](guides/diagram_editor/grid_area.md)
+- [editbar](guides/diagram_editor/editbar.md)
+
+:::note
+Der Editor verfügt in diesem Modus nicht über die shapebar
+:::
+
+Um ein Diagramm im Mindmap-Modus des Editors zu erstellen, müssen Sie eine Form auswählen und ein neues untergeordnetes Element dafür hinzufügen. Sie können die Formen von einem übergeordneten Element zu einem anderen ziehen. Das verschobene Element wird zusammen mit all seinen untergeordneten Elementen gezogen.
+
+Sie können die Attribute der Formen über die verfügbaren [Sidebar-Optionen der editbar](guides/diagram_editor/editbar.md) anpassen. Um den Gestaltungsprozess zu beschleunigen, verwenden Sie die Tastenkombination `Alt (Option) + Ctrl (Cmd) + С`, um die Stile eines Elements zu kopieren, und `Alt (Option) + Ctrl (Cmd) + V`, um diese Stile auf die ausgewählten Elemente anzuwenden.
+
+ 
+
+ **Verwandtes Beispiel:** [Diagram Editor. Mindmap-Modus. Emotionen-Mindmap](https://snippet.dhtmlx.com/lo1vm0e8?text=diagram&mode=wide)
+
+Wenn Sie dem Editor im Mindmap-Modus eine benutzerdefinierte Form hinzugefügt haben, können Sie [die editbar konfigurieren](api/diagram_editor/editbar/config/properties_property.md), um benutzerdefinierte Eigenschaften der Form bearbeiten zu können.
+
+## Wie geht es weiter {#whats-next}
+
+Das war's. Jetzt können Sie mit der Arbeit an Diagrammen beginnen oder die innere Welt von JavaScript Diagram und Diagram Editor in den [Leitfäden](guides/overview.md) weiter erkunden.
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/groups/configuration_properties.md b/i18n/de/docusaurus-plugin-content-docs/current/groups/configuration_properties.md
new file mode 100644
index 000000000..03c0557e9
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/groups/configuration_properties.md
@@ -0,0 +1,242 @@
+---
+sidebar_label: Group-Eigenschaften
+title: Group-Eigenschaften
+description: In der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren Sie mehr über die Group-Eigenschaften. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Code-Beispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter.
+---
+
+# Group-Eigenschaften {#group-properties}
+
+:::note
+Geben Sie Farbwerte im HEX-Format an.
+:::
+
+### Verwendung {#usage}
+
+~~~jsx
+const data = [
+ // Group-Objekt
+ {
+ type: "$group",
+ id?: string | number,
+ x?: number,
+ y?: number,
+ width: number,
+ height: number,
+ groupChildren?: array,
+ open?: boolean, // standardmäßig true
+ fixed?: boolean, // standardmäßig false
+ style?: {
+ strokeWidth?: number, // standardmäßig 1
+ stroke?: string, // standardmäßig "#DEDEDE"
+ fill?: string,
+ overFill?: string,
+ partiallyFill?: string
+ },
+ exitArea?: {
+ // standardmäßig "unbound"
+ groupBehavior?: "unbound" | "boundNoBorderExtension" | "boundBorderExtension",
+ padding?: number
+ },
+ header?: {
+ height?: number, // standardmäßig 40
+ fill?: string,
+ text?: string,
+ fontSize?: number, // standardmäßig 14
+ lineHeight?: number, // standardmäßig 14
+ textAlign?: "left" | "center" | "right", // standardmäßig "center"
+ textVerticalAlign?: "top" | "center" | "bottom", // standardmäßig "center"
+ fontStyle?: "normal" | "italic" | "oblique", // standardmäßig "normal"
+ fontColor?: string, // standardmäßig "#4C4C4C"
+ fontWeight?: string, // standardmäßig "500"
+ iconColor?: string, // standardmäßig "#808080"
+ position?: "top" | "bottom" | "left" | "right", // standardmäßig "top"
+ editable?: boolean, // standardmäßig true
+ closable?: boolean, // standardmäßig false
+ enable?: boolean // standardmäßig true
+ },
+ [key: string]?: any
+ },
+ // weitere Group-Objekte
+];
+~~~
+
+### Beschreibung {#description}
+
+Ein Group-Objekt enthält eine Liste von Konfigurationseigenschaften, mit denen Sie die Positionierung und das Erscheinungsbild der Group konfigurieren können:
+
+- `type` - (erforderlich) der Typ eines Elements, setzen Sie ihn auf "$group"
+- `id` - (optional) die eindeutige ID einer Group
+- `x` - (optional) die x-Koordinate der Group-Position
+- `y` - (optional) die y-Koordinate der Group-Position
+- `width` - (erforderlich) die Breite der Group, einschließlich ihrer Kopfzeile (*position: left/right*)
+- `height` - (erforderlich) die Höhe der Group, einschließlich ihrer Kopfzeile (*position: top/bottom*)
+- `groupChildren` - (optional) ein Array mit den IDs der untergeordneten Elemente der ersten Ebene der Group
+- `open` - (optional) legt fest, ob die Group im erweiterten (*true*, Standard) oder eingeklappten (*false*) Zustand initialisiert wird
+:::tip
+Die Eigenschaft `open` funktioniert, wenn ein `header` mit dem Attribut `closable` initialisiert wurde
+:::
+- `fixed` - (optional) aktiviert/deaktiviert die Möglichkeit, die Group zu verschieben und ihre Größe zu ändern; standardmäßig *false*
+- `style` - (optional) ein Objekt mit den Stileinstellungen der Group. Das Objekt kann die folgenden Attribute enthalten:
+ - `strokeWidth` - (optional) die Breite des Group-Rahmens, standardmäßig 1
+ - `stroke` - (optional) die Farbe des Rahmens der Group, standardmäßig "#DEDEDE"
+ - `fill` - (optional) die Hintergrundfarbe der Group
+ - `overFill` - (optional) die Hintergrundfarbe der Group, wenn der Benutzer das Element hält und es in die Group hinein bzw. aus ihr heraus bewegt, *vorausgesetzt, dass sich das gesamte Element innerhalb der Group befindet*
+ - `partiallyFill` - (optional) die Hintergrundfarbe der Group, wenn der Benutzer das Element hält und es in die Group hinein bzw. aus ihr heraus bewegt, *vorausgesetzt, dass sich ein Teil des Elements außerhalb der Group befindet und keine anderen Einstellungen über das Attribut `exitArea` definiert sind*
+- `exitArea` - (optional) ein Objekt mit den Einstellungen, die auf das Element angewendet werden, wenn der Benutzer es aus der Group herauszieht (*wird nur auf die untergeordneten Elemente der ersten Ebene der Group angewendet*). Das Objekt kann die folgenden Attribute enthalten:
+ - `groupBehavior` - (optional) das Verhalten des untergeordneten Elements der Group, wenn der Benutzer es aus der Group herausbewegt:
+ - `"unbound"` (Standard) - der Benutzer kann ein Element in die Group hinein oder aus ihr heraus bewegen
+ - `"boundNoBorderExtension"` - der Benutzer kann ein Element in die Group hineinbewegen, kann es jedoch nicht aus der Group herausziehen, wenn es bereits innerhalb der Group abgelegt wurde. Das Element erweitert die Ränder der Group nicht, wenn der Benutzer versucht, es aus der Group herauszuziehen
+ - `"boundBorderExtension"` - der Benutzer kann ein Element in die Group hineinbewegen, kann es jedoch nicht aus der Group herausziehen, wenn es bereits innerhalb der Group abgelegt wurde. Das Element erweitert die Ränder der Group, wenn der Benutzer versucht, es aus der Group herauszuziehen **Verwandtes Beispiel**: [Diagram Editor. Standardmodus. Interaktion zwischen Groups und Formen](https://snippet.dhtmlx.com/4gxy38ek) + - `padding` - (optional) definiert den Abstand zwischen der Group und dem Rand des Elements, wenn das Element innerhalb der Group verschoben wird + :::tip + Das Attribut `padding` ist verfügbar, wenn `groupBehavior` auf `"boundNoBorderExtension"` oder `"boundBorderExtension"` gesetzt ist + ::: +- `header` - (optional) ein Objekt mit den Konfigurationsattributen der Kopfzeile der Group. Die Attribute sind: + - `height` - (optional) die Höhe der Kopfzeile, standardmäßig 40 + - `fill` - (optional) die Hintergrundfarbe der Kopfzeile + - `text` - (optional) der in der Kopfzeile anzuzeigende Text + - `fontSize` - (optional) die Schriftgröße in Pixeln, standardmäßig 14 + - `lineHeight` - (optional) die Höhe einer Zeile, standardmäßig 14 + - `textAlign` - (optional) die Ausrichtung des Textes in der Kopfzeile: `"left"`, `"center"` (Standard), `"right"` + - `textVerticalAlign` - (optional) die vertikale Ausrichtung des Textes in der Kopfzeile: `"top"`, `"center"` (Standard), `"bottom"` + - `fontStyle` - (optional) der Stil der Textschrift: `"normal"` (Standard), `"italic"`, `"oblique"` + - `fontColor` - (optional) die Farbe der Textschrift, standardmäßig "#4C4C4C" + - `fontWeight` - (optional) die Schriftstärke des Textes, mögliche Werte sind: `"normal"`, `"bold"`, `"bolder"`, `"lighter"`, Werte `"100"`-`"900"`, wobei `"400"` normal entspricht und `"600"`+ die fetteste Schrift ist; standardmäßig `"500"` + - `iconColor` - (optional) die Farbe des Symbols der Kopfzeile, standardmäßig "#808080" + - `position` - (optional) die Positionierung der Group-Kopfzeile: `"top"` (Standard) | `"bottom"` | `"left"` | `"right"` + - `editable` - (optional) aktiviert/deaktiviert die Möglichkeit, den Text der Kopfzeile durch Doppelklick zu bearbeiten; standardmäßig *true* + - `closable` - (optional) zeigt/verbirgt ein Symbol zum Erweitern/Einklappen einer Group; standardmäßig *false* + - `enable` - (optional) zeigt/verbirgt die Kopfzeile der Group; standardmäßig *true* +- `key` - (optional) eine benutzerdefinierte Eigenschaft mit Ihrer eigenen Logik, die intern implementiert wird + +### Beispiel {#example} + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: { + text: "Top and collapsed header with tеxt alignment", + editable: true, + closable: true, + textAlign: "left", // "left", "center", "right" + textVerticalAlign: "center", // "top", "center", "bottom" + }, + // die untergeordneten Elemente der Group + groupChildren: [1.1, 1.2], + open: false + }, + // Formen konfigurieren, die in die Group eingefügt werden sollen + { type: "rectangle", id: 1.1, x: 50, y: 75, text: "Shape 1.1" }, + { type: "rectangle", id: 1.2, x: 200, y: 75, text: "Shape 1.2" } +]; +~~~ + +**Verwandter Artikel**: [Groups konfigurieren](/groups/) + +## Spezifische Eigenschaften des "project"-Objekts {#properties-specific-for-project-object} + +Das "project"-Objekt wird als Container für Aufgaben und Meilensteine verwendet. Es funktioniert wie eine [Group](/groups/), ermöglicht die Erstellung von PERT-Diagrammen mit verschiedenen Verschachtelungsebenen und bietet eine visuelle Gruppierung. + +### Verwendung {#usage-1} + +~~~jsx +const data = [ + // project-Objekt + { + type: "project", + id: string | number, + parent?: string | number | null, + text?: string, // setzt die Eigenschaft header.text + open?: boolean, + + // wird automatisch generiert + x?: number, + y?: number, + width?: number, + height?: number, + groupChildren?: (string | number)[], + style?: { + fill?: string, // standardmäßig "#20B56D08" + stroke?: string, // standardmäßig "#20B56D33" + borderStyle?: string, // standardmäßig "dashed" + }, + header?: { + height?: number, // standardmäßig 40 + text?: string, // wird automatisch durch die Eigenschaft text generiert + closable?: boolean, // standardmäßig false + enable?: boolean, // standardmäßig true + fill?: string // standardmäßig "inherit" + } + }, + // weitere project-Objekte +] +~~~ + +### Beschreibung {#description-1} + +Wenn Sie einen Datensatz für ein `"project"`-Objekt vorbereiten, können Sie die folgenden Konfigurationseigenschaften verwenden: + +- `type` - (erforderlich) der Typ eines Elements, setzen Sie ihn auf `"project"` +- `id` - (optional) die eindeutige ID eines Projekts +- `parent` - (optional) die ID des übergeordneten Projekts +- `text` - (optional) die Beschreibung eines Projekts +- `open` - (optional) legt fest, ob das Projekt im erweiterten (*true*, Standard) oder eingeklappten (*false*) Zustand initialisiert wird + +Die folgenden Eigenschaften werden automatisch generiert. Sie werden während des Renderings berechnet und sollten nicht manuell angegeben werden. + +- `x` - (optional) die x-Koordinate der Projektposition +- `y` - (optional) die y-Koordinate der Projektposition +- `width` - (erforderlich) die Breite des Projekts, einschließlich seiner Kopfzeile (*position: left/right*) +- `height` - (erforderlich) die Höhe des Projekts, einschließlich seiner Kopfzeile (*position: top/bottom*) +- `groupChildren` - (optional) ein Array mit den IDs der untergeordneten Elemente der ersten Ebene des Projekts +- `style` - (optional) ein Objekt mit den Stileinstellungen des Projekts. Das Objekt kann die folgenden Attribute enthalten: + - `fill` - (optional) die Hintergrundfarbe des Projekts + - `stroke` - (optional) die Farbe des Rahmens des Projekts + - `borderStyle` - (optional) der Stil des Projektrahmens +- `header` - (optional) ein Objekt mit den Konfigurationsattributen der Kopfzeile des Projekts. Die Attribute sind: + - `height` - (optional) die Höhe der Kopfzeile, standardmäßig 40 + - `text` - (optional) der in der Kopfzeile anzuzeigende Text (wird automatisch durch die Eigenschaft `text` generiert) + - `closable` - (optional) zeigt/verbirgt ein Symbol zum Erweitern/Einklappen einer Group; standardmäßig *false* + - `enable` - (optional) zeigt/verbirgt die Kopfzeile des Projekts; standardmäßig *true* + - `fill` - (optional) die Hintergrundfarbe der Kopfzeile + +### Beispiel {#example-1} + +~~~jsx +const data = [ + { + "id": "4.2", + "text": "QA Testing", + "type": "project", + "parent": "4", + "start_date": new Date(2026, 1, 18), + "duration": 3, + "progress": 0, + "open": true + }, + { + "id": "4.2.1", + "text": "Functional Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 18), + "duration": 2 + }, + { + "id": "4.2.2", + "text": "Usability Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 20), + "duration": 1 + } +]; +~~~ + +**Verwandter Artikel**: [Formen im PERT-Modus gruppieren](/groups/#grouping-shapes-in-the-pert-mode) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/groups/index.md b/i18n/de/docusaurus-plugin-content-docs/current/groups/index.md new file mode 100644 index 000000000..05520f03c --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/groups/index.md @@ -0,0 +1,186 @@ +--- +sidebar_label: Groups +title: Groups +description: In der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren Sie mehr über Groups. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Code-Beispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Groups {#groups} + +## Group-Übersicht {#group-overview} + +Eine Group ist eine eigenständige Art von Diagram-Element. Sie können einfache oder komplexere Schemata erstellen, indem Sie Formen oder andere Groups auf unterschiedliche Weise gruppieren. Sie können sowohl einstufige als auch verschachtelte Groups erstellen und deren Erscheinungsbild und Verhalten konfigurieren. + +:::note +Groups sind nur im Standardmodus von Diagram/Diagram Editor verfügbar (type: `"default"`). +::: + + + +## Groups erstellen {#creating-groups} + +Um eine Group zu erstellen, geben Sie *"$group"* als Wert des Attributs `type` innerhalb des Group-Objekts an, während Sie die zugehörige JSON-Struktur zum Laden in das Diagram vorbereiten: + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: { + text: "User Access" + }, + groupChildren: ["1.1", "1.2"] + }, + { + type: "it", + id: "1.1", + x: 50, + y: 75, + text: "Remote Desktop" + }, + { + type: "it", + id: "1.2", + x: 200, + y: 75, + text: "Login Server" + }, +]; + +// Diagram initialisieren +const diagram = new dhx.Diagram("diagram_container"); +diagram.data.parse(data); +~~~ + +### Eigenschaften {#properties} + +Weitere Informationen finden Sie in der [vollständigen Liste der Konfigurationseigenschaften eines `group`-Objekts](groups/configuration_properties.md), mit denen Sie die Positionierung und das Erscheinungsbild der Group konfigurieren können. + +## Formen im PERT-Modus gruppieren {#grouping-shapes-in-the-pert-mode} + +Um die Formtypen `"task"` und `"milestone"` im PERT-Modus des Diagram zu gruppieren, verwenden Sie das `"project"`-Objekt im Datensatz eines Diagram. Das `"project"`-Objekt dient als Container für Aufgaben und Meilensteine und funktioniert wie eine Group. Es ermöglicht die Erstellung von PERT-Diagrammen mit verschiedenen Verschachtelungsebenen und bietet eine visuelle Gruppierung. + +~~~jsx +const data = [ + { + "id": "4.2", + "text": "QA Testing", + "type": "project", + "parent": "4", + "start_date": new Date(2026, 1, 18), + "duration": 3, + "progress": 0, + "open": true + }, + { + "id": "4.2.1", + "text": "Functional Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 18), + "duration": 2 + }, + { + "id": "4.2.2", + "text": "Usability Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 20), + "duration": 1 + } +]; +~~~ + + + +### Eigenschaften {#properties-1} + +Weitere Informationen finden Sie in der [vollständigen Liste der Konfigurationseigenschaften eines `"project"`-Objekts](groups/configuration_properties.md#properties-specific-for-project-object), mit denen Sie die Positionierung und das Erscheinungsbild von Aufgaben und Meilensteinen im Projekt konfigurieren können. + +## Group-Kopfzeile konfigurieren {#configuring-the-group-header} + +Die Kopfzeile der Group ist standardmäßig deaktiviert. Um eine Group mit Kopfzeile zu erstellen, müssen Sie die Eigenschaft `header` im Konfigurationsobjekt der Group angeben. + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: {} + } +]; +~~~ + +Die Eigenschaft enthält mehrere Attribute, mit denen Sie die Konfiguration der Group-Kopfzeile einfach anpassen können. +Sie können beispielsweise die Höhe der Kopfzeile und ihre Position festlegen, den Text für Ihre Kopfzeile angeben und ihre Einstellungen anpassen. + + + +Sehen Sie sich die [vollständige Liste der API-Eigenschaften des Group-Objekts](groups/configuration_properties.md) an. + +### Ein Kopfzeilen-Symbol {#a-header-icon} + +Um eine Group ein- oder auszuklappen, aktivieren Sie das Attribut `closable` der Eigenschaft [Kopfzeile](groups/configuration_properties.md). Dadurch wird der Kopfzeile ein Symbol hinzugefügt, mit dem ein Benutzer eine Group ein- oder ausklappen kann. + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: { + text: "Top and collapsed header with tеxt alignment", + closable: true + } + } +]; +~~~ + +Sie können die Farbe des Symbols über das Attribut `iconColor` des [Group-Objekts](groups/configuration_properties.md) ändern. + +## Verhalten von Group-Elementen konfigurieren {#configuring-the-behavior-of-group-items} + +Standardmäßig können Sie jedes untergeordnete Element der Group aus der Group herausziehen und in eine andere Group hineinziehen. +Um zu ändern, wie sich die Group-Elemente verhalten, verwenden Sie die Attribute `groupBehavior` und `padding` der Eigenschaft `exitArea` des [Group-Objekts](groups/configuration_properties.md). + +:::note +Die Eigenschaft `exitArea` definiert nur das Verhalten der untergeordneten Elemente der ersten Ebene der konfigurierbaren Group. +::: + + + +Mit den Werten `"unbound"` und `"boundBorderExtension"` des Attributs `groupBehavior` können Sie festlegen, ob die untergeordneten Elemente aus der Group herausbewegt werden können, und bewirken, dass sich die Ränder der Group erweitern, wenn ein Benutzer versucht, ein Element nach außen zu ziehen. Bei Bedarf können Sie die Möglichkeit, Elemente aus der Group herauszuziehen, auch über den Wert `"boundNoBorderExtension"` deaktivieren. + + + +Wenn `groupBehavior` auf `"boundNoBorderExtension"` oder `"boundBorderExtension"` gesetzt ist, können Sie den Abstand zwischen der Group und dem Rand des Elements festlegen, wenn das Element innerhalb der Group verschoben wird. Verwenden Sie dazu das Attribut `padding`: + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 830, + height: 400, + x: 0, + y: 0, + exitArea: { + groupBehavior: "boundBorderExtension", + padding: 10 + }, + //fixed: true, + groupChildren: ["1.1", "1.2", "1.3"] + }, + // ... +]; +~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/ai-integrations/ai-demo.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/ai-integrations/ai-demo.md new file mode 100644 index 000000000..f1cfef36d --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/ai-integrations/ai-demo.md @@ -0,0 +1,88 @@ +--- +sidebar_label: KI-Integrationsdemo +title: KI-gestütztes Diagram erstellen +description: Schritt-für-Schritt-Anleitung zur Ausführung der DHTMLX Diagram KI-Demo. Text-zu-Diagram-Generierung von Organigrammen mit der OpenAI API, mit Live-Vorschau und JSON-Editor. +--- + +# KI-gestütztes Diagram erstellen {#building-ai-powered-diagram} + +DHTMLX Diagram lässt sich mit KI integrieren, um KI-gestützte Diagram-Anwendungen zu erstellen. Wir haben ein Beispiel vorbereitet, das zeigt, wie Sie DHTMLX Diagram mit KI verwenden können, um eine Anwendung zu erstellen, die aus einer in natürlicher Sprache formulierten Anfrage ein Organigramm generiert. + +Die [Demo-App](https://dhtmlx.com/docs/demo/ai-org-chart-builder/) bietet Funktionen wie die Umwandlung von Text in Diagram, KI-gestützte JSON-Generierung, eine sofortige Live-Vorschau des fertigen Diagram und einen integrierten Code-Editor zum Anzeigen und Anpassen der generierten JSON-Daten, um die Diagram-Vorschau in Echtzeit zu aktualisieren. Weitere Informationen finden Sie im entsprechenden [GitHub-Repository](https://github.com/DHTMLX/diagram-org-chart-builder-ai-demo). + +## Projekt-Setup {#project-setup} + +Um das Projekt herunterzuladen, klonen Sie das Repository mit dem folgenden Befehl: + +~~~jsx +git clone diagram-org-chart-builder-ai-demo +~~~ + +und wechseln Sie anschließend mit dem folgenden Befehl in das Projektverzeichnis: + +~~~jsx +cd diagram-org-chart-builder-ai-demo +~~~ + +### Installieren der Abhängigkeiten {#installing-dependencies} + +Um die Abhängigkeiten zu installieren und die Anwendung auszuführen, benötigen Sie einen Paketmanager. In dieser Anleitung wird [npm](https://www.npmjs.com/) verwendet — installieren Sie die Demo-App, indem Sie den folgenden Befehl aufrufen: + +~~~jsx +npm install +~~~ + +### Anpassen der Umgebungsvariablen {#adjusting-environment-variables} + +Anschließend müssen Sie die Umgebungsvariablen konfigurieren. Erstellen Sie dazu eine neue Datei mit dem Namen `.env` im Verzeichnis **diagram-org-chart-builder-ai-demo**, indem Sie den Inhalt der Datei `env.sample` kopieren. +Die neu erstellte Datei `.env` speichert Ihre Schlüssel und Ihre Konfiguration. Tragen Sie die unten aufgeführten erforderlichen Werte ein: + +~~~jsx title="diagram-org-chart-builder-ai-demo/.env" +# --- OpenAI-API-Konfiguration --- +OPENAI_API_KEY=sk-YourSecretApiKeyGoesHere +OPENAI_BASE_URL=https://api.openai.com/v1 + +# --- Sicherheitskonfiguration --- +CORS_ALLOWED_ORIGINS=http://localhost:3001,http://127.0.0.1:3001,http://localhost:5500,http://127.0.0.1:5500 + +# --- Serverkonfiguration (optional) --- +PORT=3001 +~~~ + +:::info +Laden Sie Ihre Datei `.env` NICHT hoch, da sie sensible Informationen enthält! +::: + +Nachfolgend finden Sie die Beschreibungen der Variablen der Datei `.env`: + +- `OPENAI_API_KEY`: (Erforderlich) Ihr geheimer API-Schlüssel für den KI-Dienst. +- `OPENAI_BASE_URL`: Der API-Endpunkt für den KI-Dienst. Kann geändert werden, um einen Proxy oder einen anderen mit der OpenAI API kompatiblen Anbieter zu verwenden. +- `CORS_ALLOWED_ORIGINS`: Eine wichtige Sicherheitseinstellung. Dies ist eine durch Kommas getrennte Liste von Webadressen, die eine Verbindung zu Ihrem Backend-Server herstellen dürfen. Für den Produktivbetrieb **müssen** Sie diese auf die URL Ihres öffentlichen Frontends ändern (z. B. `https://myapp.com`). +- `PORT`: (Optional) Die Portnummer, auf der der Server ausgeführt wird. Standardmäßig 3001, falls nicht festgelegt. + +### Ausführen der Anwendung {#running-the-application} + +Um die Anwendung zu starten, verwenden Sie den folgenden Befehl im App-Verzeichnis: + +~~~jsx +npm start // dies ist der erforderliche Startbefehl +~~~ + +In Ihrem Terminal sollte die folgende Ausgabe erscheinen: + +~~~jsx +Server started on port 3001. +~~~ + +Öffnen Sie anschließend den Webbrowser und rufen Sie `http://localhost:3001` auf, um die einsatzbereite Anwendung zum Erstellen von Diagram-Inhalten zu sehen. + +## Funktionsweise der Demo-App {#how-the-demo-app-works} + +Dies sind die grundlegenden Schritte zur Umwandlung einer Textanfrage in Diagram: + +- Zunächst gibt der Benutzer eine Textbeschreibung von Diagram in einfachen Worten ein, zum Beispiel: „Ein Diagram mit einem obersten Manager und fünf Abteilungen mit jeweils zwei Mitarbeitern“. +- Anschließend wird der Prompt an das Backend gesendet, wo der KI-Dienst basierend auf der Anfrage eine strukturierte JSON-Konfiguration generiert. +- Danach empfängt das Frontend die resultierenden Daten und rendert sofort ein interaktives DHTMLX Diagram. +- Anschließend wird der entsprechende JSON-Code im Code-Editor unterhalb von Diagram angezeigt. Der Benutzer kann den Code feinabstimmen und das resultierende Diagram in Echtzeit bearbeiten. +- Abschließend kann der Benutzer die generierten Daten in einer JSON-Datei speichern oder Diagram als PDF- oder PNG-Datei exportieren. + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md new file mode 100644 index 000000000..827c60fb6 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md @@ -0,0 +1,242 @@ +--- +sidebar_label: DHTMLX MCP-Server +title: Verwendung des DHTMLX MCP-Servers mit KI-Coding-Assistenten +description: Verbinden Sie KI-Coding-Assistenten über den MCP-Server mit der aktuellen DHTMLX-Diagram-Dokumentation. Behandelt Formen, Swimlanes, Organigramme, den Diagram Editor und mehr. +--- + +# Verwendung des DHTMLX MCP-Servers mit KI-Coding-Assistenten + +Der Aufbau von Diagrammanwendungen erfordert präzise Kontrolle über Formen, Verbindungen, Layout und Editor-Konfiguration. Wenn ein KI-Tool anhand veralteter Trainingsdaten Code für [DHTMLX Diagram](/) generiert, entstehen inkompatible APIs, fehlende Eigenschaften und Konfigurationsoptionen, die es nicht mehr gibt. + +Der DHTMLX Model Context Protocol (MCP)-Server löst dieses Problem, indem er KI-Tools direkten Zugriff auf die aktuelle Diagram-Dokumentation gibt. Egal, ob Sie mit [Swimlanes](/swimlanes/), [benutzerdefinierten Formen](shapes/custom_shape.md), dem [Diagram Editor](guides/diagram_editor/initialization.md) oder einem anderen Teil der Bibliothek arbeiten – der Assistent ruft das aktuelle Referenzmaterial ab, bevor er eine Antwort generiert. + +**MCP-Endpunkt** + +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +:::note +Der DHTMLX MCP-Server deckt alle wichtigen DHTMLX-Produkte ab, nicht nur DHTMLX Diagram. Derselbe Endpunkt und dieselben Konfigurationsschritte gelten unabhängig davon, mit welcher Komponente Sie arbeiten. +::: + +## Wo der MCP-Server bei Diagram hilft {#where-mcp-server-helps-with-diagram} + +Der MCP-Server indiziert die vollständige DHTMLX-Diagram-Dokumentation. Häufige Szenarien, in denen der MCP-Server nützlich ist: + +- Nachschlagen der aktuellen API für [Formen](shapes/default_shapes.md), [Linien](/lines/), [Gruppen](/groups/) oder [Swimlanes](/swimlanes/). +- Generieren von sofort lauffähigem Diagram-Code auf Grundlage einer Beschreibung. +- Erkunden von [Editor](guides/diagram_editor/initialization.md)-Konfigurationsoptionen, Toolbar-Steuerelementen und Event-Handling. +- Prüfen der [Export](guides/data_export.md)-Optionen und Verstehen, wie PDF- oder PNG-Ausgaben erzeugt werden. +- Konfigurieren von Auto-Layout-Optionen für Diagramme im Standardmodus mithilfe der [Diagram-Konfiguration](guides/diagram/configuration.md). +- Laden von Diagrammdaten und deren Serialisierung mithilfe der verfügbaren [Datenmethoden](guides/loading_data.md). +- Verarbeiten von [Diagram- und Editor-Events](guides/event_handling.md), um auf Benutzerinteraktionen zu reagieren. +- Erkunden der [TypeScript-Unterstützung](guides/using_typescript.md) und der Framework-Integration für React, Vue, Angular und Svelte. + +## Wie der DHTMLX MCP-Server funktioniert {#how-dhtmlx-mcp-server-works} + +Der Server kombiniert eine Retrieval-Augmented-Generation-(RAG)-Pipeline mit MCP, sodass KI-Assistenten die Dokumentation bei Bedarf abfragen können, anstatt sich ausschließlich auf Trainingsdaten zu verlassen. + +Wenn Sie zum Beispiel fragen: *„Wie konfiguriere ich ein Swimlane-Diagramm mit benutzerdefinierten Zellenüberschriften?“*, sendet der Assistent den Prompt über den MCP-Endpunkt. Der Server gleicht ihn mit der Swimlanes-Dokumentation ab, ruft die relevanten Referenzseiten ab und gibt sie als Kontext zurück. Der Assistent generiert daraufhin Code auf Grundlage der aktuellen API und nicht anhand eines Trainings-Snapshots. + +## KI-Tools mit Diagram verbinden {#connecting-ai-tools-to-diagram} + +KI-Entwicklungstools unterstützen MCP in der Regel über einen CLI-Befehl oder eine JSON-Konfigurationsdatei. In beiden Fällen besteht der zentrale Schritt darin, die Server-URL zu registrieren: + +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +Nachfolgend finden Sie Einrichtungsanleitungen für die am häufigsten verwendeten Tools. + +### Claude Code-Einrichtung {#claude-code-setup} + +:::info +Vollständige Details zum Verbinden von MCP-Servern mit Claude Code finden Sie in der [offiziellen Dokumentation](https://code.claude.com/docs/en/mcp). +::: + +Der schnellste Weg, den DHTMLX MCP-Server zu Claude Code hinzuzufügen, ist über die CLI: + +~~~bash +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +Um ihn manuell zu konfigurieren, fügen Sie den folgenden Eintrag zu Ihrer `.mcp.json` hinzu: + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor-Einrichtung {#cursor-setup} + +:::info +Schrittweise Anleitungen zur MCP-Einrichtung für Cursor finden Sie in der [offiziellen Dokumentation](https://cursor.com/en-US/docs/mcp). +::: + +Folgen Sie den nachstehenden Schritten, um den DHTMLX MCP-Server mit Cursor zu verbinden: + +1. Öffnen Sie Settings (`Cmd+Shift+J` unter Mac, `Ctrl+Shift+J` unter Windows/Linux) +2. Wechseln Sie zu **Tools & MCP** +3. Klicken Sie auf **Add Custom MCP** +4. Fügen Sie diese Konfiguration ein: + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Google Antigravity {#google-antigravity} + +#### Antigravity 2.0 {#antigravity-20} + +:::info +Weitere Details zur MCP-Server-Integration in Antigravity finden Sie in der [offiziellen Dokumentation](https://antigravity.google/docs/mcp). +::: + +Führen Sie die folgenden Schritte aus, um den DHTMLX MCP-Server mit Google Antigravity zu verbinden: + +1. Öffnen Sie die Befehlspalette +2. Geben Sie „mcp add“ ein +3. Wählen Sie „HTTP“ aus +4. Geben Sie die folgenden Werte an: +- Name: +~~~ +dhtmlx-mcp +~~~ +- URL: +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +#### Antigravity CLI {#antigravity-cli} + +:::info +Weitere Informationen zur Migration von Gemini CLI zu Antigravity CLI finden Sie im [zugehörigen Leitfaden](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes). +::: + +Um den DHTMLX MCP-Server mit Antigravity CLI zu verbinden, erstellen Sie `mcp_config.json` an einem der folgenden Speicherorte: + +- Global: `~/.gemini/config/mcp_config.json` +- Workspace: `.agents/mcp_config.json` + +Fügen Sie die folgende Konfiguration hinzu: + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "serverUrl": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +Führen Sie anschließend `agy` im Terminal aus. + +### ChatGPT-Einrichtung {#chatgpt-setup} + +:::info +Die vollständige Anleitung zum Verbinden von MCP-Servern mit ChatGPT finden Sie in der [offiziellen Dokumentation](https://developers.openai.com/api/docs/guides/tools-connectors-mcp). +::: + +Folgen Sie diesen Schritten, um den DHTMLX MCP-Server mit ChatGPT zu verbinden: + +1. Wechseln Sie zu **Settings** → **Apps & Connectors** +2. Klicken Sie auf **Advanced settings** +3. Aktivieren Sie **Developer mode** +4. Kehren Sie zum Bildschirm **Apps & Connectors** zurück und klicken Sie auf „Create“ +5. Konfigurieren Sie den Connector: +- Name: +~~~ +dhtmlx-mcp +~~~ +- URL: +~~~ +https://docs.dhtmlx.com/mcp +~~~ +- Authentifizierung: `No authentication` +6. Klicken Sie auf **Create** + +Sobald die Verbindung besteht, ruft ChatGPT die Diagram-Dokumentation ab, wenn es während Ihrer Unterhaltungen Fragen beantwortet. + +:::note +Beachten Sie, dass die MCP-Integration mit ChatGPT zu langsameren Antwortzeiten führen kann. Für eine schnellere Erfahrung sollten Sie eines der anderen auf dieser Seite aufgeführten Tools in Betracht ziehen. +::: + +### Weitere Tools {#other-tools} + +Die meisten modernen KI-Coding-Tools (darunter Windsurf, Cline, Continue.dev usw.) zeigen MCP in ihren Einstellungen unter Bezeichnungen wie „Model Context Protocol“, „Context Sources“ oder „Custom integrations“ an. Fügen Sie `https://docs.dhtmlx.com/mcp` als Quell-URL hinzu. + +## Datenschutz und Datenverarbeitung {#privacy-and-data-handling} + +Der DHTMLX MCP-Server ist ein reiner Cloud-Dienst, der remote ausgeführt wird, Ihre lokale Umgebung unverändert lässt und keine persönlichen Nutzerdaten speichert. Abfragen können zu Zwecken der Fehlerbehebung und Serviceverbesserung protokolliert werden. + +Teams, die strengere Datenschutzgarantien benötigen, können ein kommerzielles Deployment mit deaktivierter Abfrageprotokollierung anfragen. Kontaktieren Sie uns für Details unter `info@dhtmlx.com`. + +## Beispiel-Prompts für Diagram mit KI {#example-prompts-for-diagram-with-ai} + +Sobald der MCP-Server verbunden ist, formulieren Sie Ihre Prompts rund um ein konkretes Ziel, damit der Assistent weiß, welchen Teil der Diagram-API er nachschlagen soll. Die folgenden Prompts sind nach Aufgabentyp gegliedert. Sie können sie nach Bedarf kopieren und anpassen. + +**Diagramme erstellen** + +~~~ +How do I create a swimlane diagram with custom sections in DHTMLX Diagram? Use the docs. +~~~ +~~~ +I want to build an org chart from a JSON data set in DHTMLX Diagram. How do I configure the auto-layout? +~~~ +~~~ +How do I create a flowchart with decision nodes and multiple links in DHTMLX Diagram? +~~~ +~~~ +How do I use autoPlace() to automatically arrange shapes in DHTMLX Diagram? +~~~ + +**Mit Formen arbeiten** + +~~~ +I want to add custom shapes with icons to DHTMLX Diagram. How do I define a shape template? +~~~ +~~~ +How do I restrict which shapes a user can place in the DHTMLX Diagram Editor? +~~~ +~~~ +How do I change the default text style and background color for all shapes in DHTMLX Diagram? +~~~ + +**Den Editor konfigurieren** + +~~~ +I want to enable inline editing for shape text in DHTMLX Diagram. +~~~ +~~~ +How do I add a custom toolbar button to the DHTMLX Diagram Editor? +~~~ + +**Daten und Export** + +~~~ +How do I export a DHTMLX Diagram to a PNG file? +~~~ +~~~ +What format does DHTMLX Diagram use for serialized data, and how do I reload it? +~~~ + +## Tipps für effektive Diagram-Prompts {#tips-for-effective-diagram-prompts} + +- **Benennen Sie die API-Oberfläche.** Unterscheiden Sie zwischen der Diagramminstanz und dem Editor, zum Beispiel: „in the DHTMLX Diagram Editor“ vs. „on the diagram object“. Der Server ruft relevantere Dokumentation ab, wenn das Ziel eindeutig ist. +- **Geben Sie den Formtyp an.** Prompts wie „a swimlane shape“ oder „a custom shape with HTML content“ rufen die passenden Referenzseiten schneller ab als das allgemeine „a shape“. +- **Fügen Sie „Use the docs“** zu Ihrem Prompt hinzu. Diese Formulierung signalisiert dem Assistenten, dass er eine MCP-Abfrage auslösen soll, anstatt aus Trainingsdaten zu antworten. +- **Machen Sie genaue Angaben zum erwarteten Versionsverhalten.** Wenn der generierte Code nicht mit dem übereinstimmt, was Sie in der Dokumentation sehen, fügen Sie „based on the current DHTMLX Diagram documentation“ hinzu, um eine erneute Abfrage zu erzwingen. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/customization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/customization.md new file mode 100644 index 000000000..0ea53c3bc --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/customization.md @@ -0,0 +1,225 @@ +--- +sidebar_label: Elemente anpassen +title: Elemente anpassen +description: Sie können mehr über das Anpassen von Elementen in der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren. Durchsuchen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Elemente anpassen + +Sie können das Erscheinungsbild von Diagrammelementen mithilfe verschiedener [Konfigurationseigenschaften](/category/items-api/) innerhalb ihrer Objekte ändern. Sie können außerdem das Look-and-Feel des Diagramms durch das Erstellen benutzerdefinierter Shapes anpassen. + +## Styling von Shapes und Lines über die Konfigurationseigenschaften {#styling-shapes-and-lines-via-the-configuration-properties} + +### Styling der Shapes {#styling-shapes} + +Ein Shape-Objekt bietet eine breite Palette an Eigenschaften, mit denen Sie das Look-and-Feel von Shapes anpassen können. + + + +Eine gute Möglichkeit, alle Shapes desselben Typs gleichzeitig zu stylen, besteht darin, die Styling-Einstellungen für die Shapes über die Eigenschaft [`defaults`](api/diagram/defaults_property.md) des Diagramms festzulegen: + +~~~jsx +const defaults = { + start: { + fill: "#FE9998", + stroke: "#FE9998", + fontColor: "#FFF", + lineHeight: 16 + }, + end: { + fill: "#FE9998", + stroke: "#FE9998", + fontColor: "#FFF", + lineHeight: 16 + }, + // ... +}; +~~~ + +[Sehen Sie sich die vollständige Liste der Shape-Objekteigenschaften an](shapes/configuration_properties.md). + +### Styling der Lines {#styling-lines} + +Um das Aussehen der Lines zu ändern, verwenden Sie die erforderlichen Konfigurationseigenschaften innerhalb des Line-Objekts. + +~~~jsx +const data = [ + { + id: "1-2", + from: "1", + to: "2", + type: "line", + strokeType: "dash", // gestrichelte Linie + stroke: "#fa55d1" // Linienfarbe + } +]; +~~~ + +[Sehen Sie sich die vollständige Liste der Line-Objekteigenschaften an](lines/configuration_properties.md). + +Sehen Sie sich das Beispiel an: + + + +## Definieren der Shape-Vorlage {#defining-the-shapes-template} + +Sie können ein angepasstes Diagramm erstellen, indem Sie neue Shape-Typen zum Diagramm hinzufügen und Vorlagen für sie definieren. Verwenden Sie dazu die Methode [`addShape()`](api/diagram/addshape_method.md) des Diagrammobjekts. + +### Beispiel im Standardmodus {#example-in-the-default-mode} + + + +### Beispiel im Org-Chart-Modus {#example-in-the-org-chart-mode} + + + +### Beispiel im Mindmap-Modus {#example-in-the-mindmap-mode} + + + +### Beispiel im PERT-Modus {#example-in-the-pert-mode} + + + +## Styling der Ziel-Shapes {#styling-target-shapes} + +Bei Verwendung der Org-Chart- und Mindmap-Diagramme im Diagram Editor können Sie einen benutzerdefinierten Stil für Zielelemente hinzufügen. + +:::note +Die Stylisierung gilt nicht für das übergeordnete Element des verschobenen Elements oder für ein verschobenes Element mit `giveItem: false` +::: + +~~~jsx + +~~~ + +## Styling von Groups über die Konfigurationseigenschaften {#styling-groups-via-the-configuration-properties} + +### Styling der Group {#styling-the-group} + +Um einen benutzerdefinierten Stil für eine Group festzulegen, können Sie die Eigenschaft `style` des [Group-Objekts](groups/configuration_properties.md) verwenden. Zum Beispiel: + + + +### Styling des Group-Headers {#styling-the-group-header} + +Sie können den Standardstil des Group-Headers über die Attribute der Eigenschaft `header` des [Group-Objekts](groups/configuration_properties.md) ändern. + + + +## Styling von Swimlanes über die Konfigurationseigenschaften {#styling-swimlanes-via-the-configuration-properties} + +### Styling der Swimlane {#styling-the-swimlane} + +Sie können die Einstellungen `strokeWidth`, `stroke` und `fill` einer Swimlane über die Eigenschaft `style` des [Swimlane-Objekts](swimlanes/configuration_properties.md#properties-of-a-swimlane) anpassen: + +~~~jsx +const data = [ + { + "type": "$swimlane", + "width": 970, + "height": 790, + "header": { + "text": "Game levels and locations", + "closable": true + }, + "layout": [ + ["1"], + ["2"], + ["3"], + ["4"], + ["5"] + ], + "style": { + "strokeWidth": 5, + "stroke": "#083796", + "fill": "#D4DAE4" + } + } +]; +~~~ + +### Styling der Swimlane-Header/Sub-Header {#styling-the-swimlane-headerssub-headers} + +Die Eigenschaften `header`, `subHeaderRows` und `subHeaderCols` eines [Swimlane-Objekts](swimlanes/configuration_properties.md#properties-of-a-swimlane) enthalten zusätzliche Attributsätze zum Anpassen des Headers und der Subheader der Swimlane. + +Sie können beispielsweise die Hintergrundfarben der oberen Subheader der Swimlane über die Eigenschaft `subHeaderCols` ändern: + +~~~jsx +const data = [ + { + "id": "main", + "type": "$swimlane", + "height": 730, + "width": 1195, + "header": { + "closable": true, + "text": "Waterfall diagram template" + }, + "layout": [ + [1, 2, 3, 4] + ], + "subHeaderCols": { + "headers": [ + { + "text": "September", + "fill": "#f35c4f66" + }, + { + "text": "October", + "fill": "#9b60f866" + }, + { + "text": "November", + "fill": "#ffae1266" + }, + { + "text": "December", + "fill": "#3cc97a66" + } + ] + } + } +]; +~~~ + +Sehen Sie sich das vollständige Beispiel an: + + + +### Styling von Swimlane-Zellen {#styling-swimlane-cells} + +Wenn Sie eine einzelne Zelle der Swimlane anpassen möchten, verwenden Sie die Eigenschaft `style` des [Swimlane-Zellobjekts](swimlanes/configuration_properties.md#properties-of-a-swimlane-cell) (`type:"$sgroup"`). + +~~~jsx +const data = [ + { + "id": "main", + "type": "$swimlane", + "height": 730, + "width": 1195, + "layout": [ + [1, 2, 3, 4] + ], + // ... + }, + { + "id": 1, + "type": "$sgroup", + "style": { + "fill": "#D4DAE4" + }, + "x": 0, + "y": 80 + } +]; +~~~ + +**Verwandtes Beispiel:** [Diagram. Standardmodus. Wasserfall-Diagrammvorlage](https://snippet.dhtmlx.com/k5vlvj8i) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/data_export.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/data_export.md new file mode 100644 index 000000000..962c104ef --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/data_export.md @@ -0,0 +1,41 @@ +--- +sidebar_label: Diagram exportieren +title: Diagram exportieren +description: Sie können mehr über den Export von Diagram in der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren. Durchsuchen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Diagram exportieren + +Sie können ein Diagramm über die zugehörigen Methoden [pdf()](api/export/pdf_method.md)/[png()](api/export/png_method.md) des Export-Objekts in das Format PDF oder PNG exportieren: + + + +Um die Exporteinstellungen anzupassen, übergeben Sie der jeweiligen Methode ein Objekt mit Konfigurationsoptionen. + +Sehen Sie sich die Liste der verfügbaren Einstellungen an: + +- für die Methode [pdf()](api/export/pdf_method.md) +- für die Methode [png()](api/export/png_method.md) + +## Styles exportieren {#exporting-styles} + +Standardmäßig werden alle CSS-Styles, die auf der Diagram-Seite enthalten sind, an den Exportdienst gesendet. Dadurch erhöht sich die Größe der Anfrage, was zu deren Fehlschlagen führen kann. + +Die Bibliothek ermöglicht Ihnen Folgendes: + +- das Senden aller Styles an den Exportdienst zu verhindern, indem Sie die Konfigurationseigenschaft +[`exportStyles`](api/diagram/exportstyles_property.md) des Diagram-Objekts auf *false* setzen: + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + exportStyles: false +}); +~~~ + +- eine Reihe von Styles zu definieren, die exportiert werden sollen, indem Sie absolute Pfade zu den gewünschten Styles im Array [`exportStyles`](api/diagram/exportstyles_property.md) angeben: + + + +:::note +Sie dürfen nur absolute Pfade verwenden, keine relativen. +::: diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram/configuration.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram/configuration.md new file mode 100644 index 000000000..f0fcc7db6 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram/configuration.md @@ -0,0 +1,179 @@ +--- +sidebar_label: Konfiguration +title: Diagram-Konfiguration +description: In der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren Sie mehr über die Diagram-Konfiguration. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Diagram-Konfiguration {#diagram-configuration} + +DHTMLX Diagram bietet eine Vielzahl von Konfigurationsoptionen. Sie können die Skalierung von Diagram ändern, den Standardtyp von Formen und Linien festlegen, Abstände zwischen Formen einstellen, die Auswahl aktivieren und eine Symbolleiste mit Icons für die Formen einrichten. + +### Festlegen des Diagram-Modus {#setting-the-diagram-mode} + +Sie können zwischen den folgenden Diagram-Modi wählen: `"default"`, `"org"`, `"mindmap"`, `"pert"`. Eine ausführliche Beschreibung finden Sie im Artikel [Diagram-Übersicht](/). Den gewünschten Typ können Sie über die Konfigurationsoption [type](api/diagram/type_property.md) wie folgt festlegen: + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + type: "default" // `type: "org"` | `type: "mindmap"` | `type: "pert"` +}); +diagram.data.parse(data); +~~~ + +### Festlegen des Standard-Formtyps {#setting-the-default-shape-type} + +Über das Attribut [`defaultShapeType`](api/diagram/defaultshapetype_property.md) des Diagram-Konfigurationsobjekts können Sie den Standardtyp für alle Formen festlegen: + +~~~jsx {3} +const diagram = new dhx.Diagram("diagram_container", { + type: "default", // or type: "org", or type: "mindmap" + defaultShapeType: "rectangle" +}); +diagram.data.parse(data); +~~~ + +Dieser Wert wird angewendet, wenn das Konfigurationsobjekt der Form die Eigenschaft `type` nicht enthält. + +Die Standardtypen der Formen sind: + +- `"rectangle"` - für Diagram im Standardmodus +- `"card"` - für Diagram im Standardmodus oder im Organigramm-Modus +- `"topic"` - für Diagram im Mindmap-Modus +- `"task"` - für Diagram im PERT-Modus + +## Festlegen des Standard-Linientyps {#setting-the-default-line-type} + +Über den Parameter `lineType` der Eigenschaft [`lineConfig`](api/diagram/lineconfig_property.md) des Diagram-Konfigurationsobjekts können Sie einen gemeinsamen Typ für alle Verbindungslinien von Diagram festlegen: + +~~~jsx {3-5} +const diagram = new dhx.Diagram("diagram_container", { + type: "default", + lineConfig: { + lineType: "dash" // "dash" | "line" + } +}); +diagram.data.parse(data); +~~~ + +Dieser Wert wird angewendet, wenn das Linienobjekt die Eigenschaft `type` nicht enthält. + +## Festlegen der Standardkonfiguration einer Form {#setting-the-default-configuration-of-a-shape} + +So müssen Sie beim Vorbereiten der Daten für das Laden in Diagram nicht mit einem großen Datensatz arbeiten. Sie können die Standardkonfiguration für alle Formen und Linien der benötigten Typen festlegen und dadurch die Anzahl der Einträge in Ihrem Code reduzieren. + +Verwenden Sie dazu die Eigenschaft [`defaults`](api/diagram/defaults_property.md) des Diagram-Konfigurationsobjekts: + + + +Das Objekt `defaults` enthält eine Reihe von `key:value`-Paaren, wobei der *key* der Typ einer Form oder Linie ist und der *value* die entsprechende Standardkonfiguration der Form oder Linie darstellt. + +:::note +Die Attribute `type` und `id` können in der Standardkonfiguration einer Form/Linie nicht definiert werden +::: + +Sehen Sie sich die vollständige Liste der Konfigurationseigenschaften einer [Form](shapes/configuration_properties.md) und einer [Linie](lines/configuration_properties.md) an. + +## Anordnen von Formen im Mindmap-Modus von Diagram {#arranging-shapes-in-the-mindmap-mode-of-diagram} + +Im Mindmap-Modus von Diagram wird die Anordnung der untergeordneten Formen relativ zur Wurzelform automatisch durch den Hauptalgorithmus festgelegt. +Um die Standardrichtung der untergeordneten Formen zu ändern, verwenden Sie bei der Initialisierung von Diagram die Konfigurationseigenschaft [`typeConfig`](api/diagram/typeconfig_property.md). + +:::note +Die Konfigurationseigenschaft `typeConfig` ist im Diagram Editor nicht verfügbar +::: + +Mit dieser Eigenschaft können Sie: + +- [die Richtung für alle untergeordneten Formen gleichzeitig festlegen](#setting-direction-for-all-child-shapes) +- [eine individuelle Richtung für bestimmte untergeordnete Formen angeben](#setting-direction-for-individual-child-shape) + +### Festlegen der Richtung für alle untergeordneten Formen {#setting-direction-for-all-child-shapes} + +Verwenden Sie das Attribut `direction` der Eigenschaft [`typeConfig`](api/diagram/typeconfig_property.md), um die untergeordneten Formen rechts/links von der Wurzelform anzuordnen: + + + +### Festlegen der Richtung für eine einzelne untergeordnete Form {#setting-direction-for-individual-child-shape} + +Über das Attribut `side` der Eigenschaft [`typeConfig`](api/diagram/typeconfig_property.md) können Sie die verbindliche Richtung für bestimmte untergeordnete Formen festlegen. Das Attribut ist ein Objekt, das eine Reihe von `key:value`-Paaren enthält, wobei *key* die Richtung der Formen (left, right) und *value* ein Array mit den IDs der Formen ist. + + + +Andere untergeordnete Formen, die nicht in der Option side festgelegt sind, werden automatisch gemäß dem Hauptalgorithmus angeordnet. + +## Festlegen des Datumsformats im PERT-Modus von Diagram {#setting-date-format-in-the-pert-mode-of-diagram} + +Im PERT-Modus von Diagram können Sie das gewünschte Format für die Anzeige von Datumsangaben in Formen des Typs `task` festlegen. Verwenden Sie dazu das Attribut `dateFormat` der Eigenschaft [`typeConfig`](api/diagram/typeconfig_property.md): + +~~~jsx {3-5} +const diagram = new dhx.Diagram("diagram_container", { + type: "pert", + typeConfig: { + dateFormat: "%d/%m/%Y" + } +}); +~~~ + +## Positionierung von Diagram und Formen {#positioning-diagram-and-shapes} + +Über das Attribut [`margin`](api/diagram/margin_property.md) des Diagram-Konfigurationsobjekts können Sie die Position von Diagram auf einer Seite festlegen und Abstände für Formen einstellen: + + + +## Konfigurieren der automatischen Platzierung für Formen {#configuring-autoplacement-for-shapes} + +Mit der DHTMLX Diagram-Bibliothek können Sie Einstellungen konfigurieren, um verbundene Formen von Diagram automatisch in einer hierarchischen Struktur anzuordnen. Sie können die Eigenschaft [`autoplacement`](api/diagram/autoplacement_property.md) im Konfigurationsobjekt von Diagram angeben und den Modus für das Verbinden von Formen sowie den Abstand zwischen nicht verbundenen Diagram-Instanzen konfigurieren: + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + autoplacement: { + mode: "edges", + graphPadding: 100, + placeMode: "radial", + itemPadding: 10, + levelPadding: 10 + } +}); + +diagram.data.parse(data); + +diagram.autoPlace(); +~~~ + +Die Eigenschaft kann die folgenden Optionen enthalten: + +- `mode` - (*string*) optional, der Modus für das Verbinden von Formen, `"direct"` (Standard) oder `"edges"` +- `graphPadding` - (*number*) optional, legt den Abstand zwischen nicht verbundenen Diagram-Instanzen fest, Standardwert *200* +- `placeMode` - (*string*) optional, legt den Platzierungsmodus der Formen fest, `"orthogonal"` (Standard) oder `"radial"` +- `itemPadding` - (*number*) optional, minimaler Abstand zwischen Elementen (Mindestwert *1*), Standardwert *20* +- `levelPadding` - (*number*) optional, minimaler Abstand zwischen Hierarchieebenen (Mindestwert *1*), Standardwert *20* + +:::note +Die automatische Platzierung wird erst angewendet, nachdem die Methode [`autoPlace()`](api/diagram/autoplace_method.md) aufgerufen wurde. Sie funktioniert nur im Standardmodus von Diagram und nur für Formen. Die automatische Platzierung funktioniert nicht, wenn Sie Gruppen oder Swimlanes verwenden. +::: + + + +**Verwandtes Beispiel**: [Diagram. Standardmodus. Radiale automatische Platzierung mit Abstandsoptionen](https://snippet.dhtmlx.com/huut0l1s) + +## Anpassen der Diagram-Skalierung {#adjusting-the-diagram-scale} + +Bei Bedarf können Sie Diagram skalieren, damit es zu Ihrer Anwendung passt. Dies können Sie mithilfe der Option [`scale`](api/diagram/scale_property.md) tun. +Standardmäßig ist der Wert auf 1 gesetzt. Um in Diagram hineinzuzoomen, setzen Sie die Option entsprechend auf einen Wert größer als 1, und um herauszuzoomen, auf einen Wert kleiner als 1. + + + +## Festlegen der Symbolleiste für Formen {#setting-toolbar-for-shapes} + +Mit DHTMLX Diagram können Sie eine Symbolleiste mit Icons für Diagram-Formen festlegen, um die Interaktion mit ihnen zu vereinfachen. Sie können die Formen-Symbolleiste über die Option [`toolbar`](api/diagram/toolbar_property.md) des Diagram-Konfigurationsobjekts aktivieren: + + + +## Aktivieren der Elementauswahl {#enabling-items-selection} + +Über das Attribut [`select`](api/diagram/select_property.md) des Diagram-Konfigurationsobjekts können Sie die Auswahl von Elementen in Diagram aktivieren. Nachdem Sie die Auswahl in Diagram aktiviert haben, können Sie die Selection-Objekt-API verwenden, um [mit der Elementauswahl zu arbeiten](guides/manipulating_items.md#selecting-items). + +:::note +[Der vordefinierte Satz von Events](/api/selection/#events) des Selection-Objekts kann Ihnen helfen, die Verarbeitung des Diagram-Verhaltens beim Auswählen/Abwählen von Elementen zu definieren +::: + + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram/initialization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram/initialization.md new file mode 100644 index 000000000..461965043 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram/initialization.md @@ -0,0 +1,155 @@ +--- +sidebar_label: Initialisierung +title: Initialisierung +description: In der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren Sie, wie Sie mit Diagram beginnen. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Diagram-Initialisierung {#diagram-initialization} + +In diesem Artikel besprechen wir die Schritte zum Hinzufügen von DHTMLX Diagram zu einer Seite. Dieser Prozess umfasst mehrere einfache Schritte: + +- [Laden Sie das DHTMLX Diagram-Paket herunter](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml) und entpacken Sie es in einen Ordner Ihres Projekts +- [Binden Sie die DHTMLX Diagram-Quelldateien auf einer Seite ein](#including-required-code-files) +- [Initialisieren Sie Diagram mit dem Objektkonstruktor](#initializing-diagram) +- [Laden Sie Daten in Diagram](#loading-data-into-diagram) + +~~~html + + + + + + + + + + + + +~~~ + +## Einbinden der erforderlichen Codedateien {#including-required-code-files} + +Um Diagram zu erstellen, müssen Sie 2 Quelldateien auf Ihrer Seite einbinden: + +- **diagram.js** +- **diagram.css** + +Stellen Sie sicher, dass Sie korrekte relative Pfade zu diesen Dateien angeben: + +~~~html + + +~~~ + +Die Struktur des DHTMLX Diagram-Pakets sieht folgendermaßen aus: + +- **sources** - die Quellcodedateien der Bibliothek. Die Dateien sind nicht minifiziert und leicht lesbar. Das Paket ist hauptsächlich für das Debugging der Komponente vorgesehen + +:::note +Beachten Sie, dass die **Trial**-Version der Diagram-Bibliothek keinen sources-Ordner enthält. +::: + +- **samples** - die Code-Beispiele +- **codebase** - die gepackten Codedateien der Bibliothek. Diese Dateien sind deutlich kleiner und für den Einsatz in der Produktion vorgesehen +:::info +In Ihren Anwendungen müssen Sie Dateien aus dem Ordner **codebase** verwenden +::: + +## Initialisieren von Diagram {#initializing-diagram} + +Sie können Diagram in einem Container, im Dokument-Body oder in einer Layout-Zelle initialisieren. + +### Initialisierung in einem Container {#initialization-in-a-container} + +Um Diagram in einem Container zu initialisieren, verwenden Sie den Konstruktor `dhx.Diagram` und übergeben Sie der Konstruktorfunktion die folgenden zwei Parameter: + +- einen Container, in den Diagram platziert wird – geben wir ihm die ID `"diagram_container"`: + +~~~html title="index.html" + +~~~ + +- ein Objekt mit den [Konfigurationseigenschaften](#configuration-properties). Wird dieses Argument nicht an den Konstruktor übergeben, werden die Standardeinstellungen angewendet + +~~~jsx title="index.js" +const diagram = new dhx.Diagram("diagram_container", { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### Initialisierung im Dokument-Body {#initialization-in-the-document-body} + +Sie können das Festlegen eines Containers für Diagram überspringen und es direkt in den Dokument-Body einfügen: + +~~~jsx +const diagram = new dhx.Diagram(document.body, { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### Initialisierung in einer Layout-Zelle {#initialization-in-a-layout-cell} + +Sie können Diagram auch innerhalb [einer Layout-Zelle](https://docs.dhtmlx.com/suite/layout/) initialisieren. Verwenden Sie in diesem Fall *null* anstelle eines Containers: + +~~~jsx +const diagram = new dhx.Diagram(null, { + type: "default" // "default" | "org" | "mindmap" +}); +const layout = new dhx.Layout("layout", { + cols: [ + { + id: "diagram" + } + ] +}); + +layout.getCell("diagram").attach(diagram); +~~~ + +### Konfigurationseigenschaften {#configuration-properties} + +Um die [Konfiguration von Diagram](guides/diagram/configuration.md) zu ändern, können Sie die gewünschte Eigenschaft im Konfigurationsobjekt angeben, das als zweiter Parameter an die Konstruktorfunktion übergeben wird. + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + scale: 0.7, + // weitere Konfigurationsoptionen +}); +~~~ + +Die [vollständige Liste der Konfigurationseigenschaften von Diagram](api/diagram/api_overview.md#diagram-properties) finden Sie hier. + +**Verwandtes Beispiel**: [Diagram Editor. Standardmodus. Breites Flussdiagramm](https://snippet.dhtmlx.com/4d4k3o8p) + +Alternativ können Sie auf eine Option zugreifen und ihren Wert über das `config`-Objekt von Diagram setzen/ändern. Vergessen Sie nicht, die Methode [`paint()`](api/diagram/paint_method.md) aufzurufen, um Diagram mit der neuen Konfiguration neu zu rendern: + +~~~jsx +const diagram = new dhx.Diagram("diagram_container"); +diagram.data.parse(data); + +diagram.config.scale = 0.7; +diagram.paint(); +~~~ + +## Laden von Daten in Diagram {#loading-data-into-diagram} + +Ausführliche Informationen zum Laden von Daten in DHTMLX Diagram finden Sie im Artikel [Laden und Speichern von Daten](guides/loading_data.md). diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram/scrolling_diagram.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram/scrolling_diagram.md new file mode 100644 index 000000000..221dd3c5f --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram/scrolling_diagram.md @@ -0,0 +1,42 @@ +--- +sidebar_label: Diagram scrollen +title: Diagram scrollen +description: In der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren Sie, wie Sie Diagram scrollen. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Diagram scrollen {#scrolling-diagram} + +Standardmäßig wird die Größe der Komponente automatisch an den Inhalt angepasst. Bei Bedarf übernimmt die Komponente die Größe des HTML-Containers und zeigt horizontale und vertikale interne Scrollbalken an, um den Inhalt anzupassen. + +## Diagram scrollen {#scrolling-diagram-1} + +Über die Methode [`showItem()`](api/diagram/showitem_method.md) des Diagram-Objekts können Sie zu dem Bereich scrollen, in dem sich das gewünschte Element befindet. + + + +Alternativ können Sie mithilfe der Methode [`scrollTo()`](api/diagram/scrollto_method.md) zur gewünschten Position in Diagram scrollen. + + + +## Abrufen des Scroll-Status {#getting-scroll-state} + +Über die zugehörige Methode [`getScrollState()`](api/diagram/getscrollstate_method.md) können Sie mit der Diagram-API die aktuelle Scroll-Position abrufen: + +~~~jsx +// Gibt die anfängliche Scroll-Position zurück +const coords = diagram.getScrollState(); // -> {x:0,y:0} +~~~ + +Sie gibt ein Objekt mit der horizontalen und vertikalen Scroll-Position zurück. + +## Abfangen des Diagram-Scrollens {#catching-diagram-scrolling} + +Über das Event [`scroll`](api/diagram/scroll_event.md) können Sie den Beginn des Diagram-Scrollens abfangen. Die Handler-Funktion erhält die Scroll-Position als Parameter: + +- `pos` - (*object*) die Scroll-Position als Objekt mit den Attributen x und y + +~~~jsx +diagram.events.on("Scroll", (position) => { + alert("The diagram has been scrolled:" + position); +}); +~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/editbar.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/editbar.md new file mode 100644 index 000000000..155aa0c76 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/editbar.md @@ -0,0 +1,163 @@ +--- +sidebar_label: Editbar +title: Editor-Anleitungen - Editbar +description: Erfahren Sie in der Dokumentation der DHTMLX-JavaScript-Diagram-Bibliothek mehr über die Editbar des Editors. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Editbar + +Sie können Editbar-Steuerelemente für jedes Diagram-Element einzeln sowie für eine [Gruppe von Elementen](guides/items_index.md) unter Berücksichtigung verschiedener Bedingungen konfigurieren. Verwenden Sie dazu die Editbar-Konfiguration [`properties`](api/diagram_editor/editbar/config/properties_property.md). + +Wenn Sie Editbar-Steuerelemente für eine einzelne [Form](/category/shapes) konfigurieren möchten, müssen Sie den entsprechenden **Formtyp** innerhalb der Konfiguration [`properties`](api/diagram_editor/editbar/config/properties_property.md) angeben, wie im folgenden Beispiel gezeigt: + +~~~jsx {6-9} +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + editbar: { + properties: { + rectangle: [ // Editbar-Steuerelemente für die Form „pert“ konfigurieren + { type: "arrange", $properties: { angle: { hidden: true } }}, + // ... weitere Editbar-Steuerelemente konfigurieren + ], + // ... weitere Formen konfigurieren + } + } + } +}); +~~~ + +Um eine [Gruppe von Elementen](guides/items_index.md) zu konfigurieren, müssen Sie die folgenden Service-Eigenschaften innerhalb der Konfiguration [`properties`](api/diagram_editor/editbar/config/properties_property.md) verwenden: + +- [`$default`](#configure-editbar-for-the-grid-area) - ermöglicht die Konfiguration von Editbar-Steuerelementen, wenn keine Elemente oder mehr als ein Element ausgewählt sind +- [`$shape`](#configure-editbar-for-shapes) - ermöglicht die Konfiguration von Editbar-Steuerelementen für [alle Formen, einschließlich benutzerdefinierter Formen](/category/shapes) +- [`$group`](#configure-editbar-for-group-elements) - ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ [`group`](/groups/) +- [`$swimlane`](#configure-editbar-for-swimlanes) - ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ [`swimlane`](/swimlanes/) +- [`$line`](#configure-editbar-for-lines) - ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ [`line`](/lines/) +- [`$lineTitle`](#configure-editbar-for-line-titles) - ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ [`lineTitle`](/line_titles/) + + + +## Editbar für den Rasterbereich konfigurieren {#configure-editbar-for-the-grid-area} + +Die Service-Eigenschaft `$default` ermöglicht die Konfiguration von Editbar-Steuerelementen, wenn keine Elemente oder mehr als ein Element ausgewählt sind. + +~~~jsx +properties: { + $default: [ + { + type: "gridStep", + readOnly: true, + // ... + } + ] +} +~~~ + +**Verwandte komplexe Steuerelemente:** [Rasterschritt](api/diagram_editor/editbar/complex_controls/gridstep.md), [Rahmen](api/diagram_editor/editbar/complex_controls/border.md), [Anordnen](api/diagram_editor/editbar/complex_controls/arrange.md) + +## Editbar für Formen konfigurieren {#configure-editbar-for-shapes} + +Die Service-Eigenschaft `$shape` ermöglicht die Konfiguration von Editbar-Steuerelementen für [alle Formen, einschließlich benutzerdefinierter Formen](/category/shapes). + +~~~jsx +properties: { + $shape: [ + { + type: "position", + $properties: { + dx: { disabled: true }, + // ... + }, + // ... + } + ] +} +~~~ + +**Verwandte komplexe Steuerelemente:** [Rahmen](api/diagram_editor/editbar/complex_controls/border.md), [Anordnen](api/diagram_editor/editbar/complex_controls/arrange.md), [Position](api/diagram_editor/editbar/complex_controls/position.md), [Größe](api/diagram_editor/editbar/complex_controls/size.md), [Textausrichtung](api/diagram_editor/editbar/complex_controls/textalign.md), [Textstil](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## Editbar für Gruppenelemente konfigurieren {#configure-editbar-for-group-elements} + +Die Service-Eigenschaft `$group` ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ [`group`](/groups/). + +~~~jsx +properties: { + $group: [ + { + type: "header", + label: "Group header style", + // ... + } + ] +} +~~~ + +**Verwandte komplexe Steuerelemente:** [Rahmen](api/diagram_editor/editbar/complex_controls/border.md), [Anordnen](api/diagram_editor/editbar/complex_controls/arrange.md), [Kopfzeile](api/diagram_editor/editbar/complex_controls/header.md), [Allgemeine Kopfzeile](api/diagram_editor/editbar/complex_controls/headercommon.md), [Kopfzeilenposition](api/diagram_editor/editbar/complex_controls/headerposition.md), [Größe](api/diagram_editor/editbar/complex_controls/size.md), [Textausrichtung](api/diagram_editor/editbar/complex_controls/textalign.md), [Textstil](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## Editbar für Swimlanes konfigurieren {#configure-editbar-for-swimlanes} + +Die Service-Eigenschaft `$swimlane` ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ [`swimlane`](/swimlanes/). + +~~~jsx +properties: { + $swimlane: [ + { + type: "header", + label: "Swimlane header style", + // ... + } + ] +} +~~~ + +**Verwandte komplexe Steuerelemente:** [Rahmen](api/diagram_editor/editbar/complex_controls/border.md), [Anordnen](api/diagram_editor/editbar/complex_controls/arrange.md), [Kopfzeile](api/diagram_editor/editbar/complex_controls/header.md), [Allgemeine Kopfzeile](api/diagram_editor/editbar/complex_controls/headercommon.md), [Kopfzeilenposition](api/diagram_editor/editbar/complex_controls/headerposition.md), [Größe](api/diagram_editor/editbar/complex_controls/size.md), [Textausrichtung](api/diagram_editor/editbar/complex_controls/textalign.md), [Textstil](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## Editbar für Linien konfigurieren {#configure-editbar-for-lines} + +Die Service-Eigenschaft `$line` ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ [`line`](/lines/). + +~~~jsx +properties: { + $line: [ + { + type: "lineShape", + label: "Line connection type", + // ... + } + ] +} +~~~ + +**Verwandte komplexe Steuerelemente:** [Rahmen](api/diagram_editor/editbar/complex_controls/border.md), [Linienform](api/diagram_editor/editbar/complex_controls/lineshape.md), [Zeigeransicht](api/diagram_editor/editbar/complex_controls/pointerview.md) + +## Editbar für Linientitel konfigurieren {#configure-editbar-for-line-titles} + +Die Service-Eigenschaft `$lineTitle` ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ [`lineTitle`](/line_titles/). + +~~~jsx +properties: { + $lineTitles: [ + { + type: "textAlign", + label: "Text align", + // ... + }, + // ... + ] +} +~~~ + +**Verwandte komplexe Steuerelemente:** [Textausrichtung](api/diagram_editor/editbar/complex_controls/textalign.md), [Textstil](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## Benutzerdefinierte Editbar-Steuerelemente erstellen und konfigurieren {#create-and-configure-custom-editbar-controls} + +Sie können die Eigenschaft [`controls`](api/diagram_editor/editbar/config/controls_property.md) der Editbar-Ansicht verwenden, um ein benutzerdefiniertes Steuerelement auf Grundlage der [**Basissteuerelemente**](api/diagram_editor/editbar/basic_controls_overview.md) und/oder [**komplexen Steuerelemente**](api/diagram_editor/editbar/complex_controls_overview.md) zu erstellen. + +:::warning +Wir empfehlen nicht, einen Standard-Steuerelementtyp (siehe [***Basissteuerelemente***](api/diagram_editor/editbar/basic_controls_overview.md) und/oder [***Komplexe Steuerelemente***](api/diagram_editor/editbar/complex_controls_overview.md)) als Namen für ein benutzerdefiniertes Steuerelement zu verwenden. Verwenden Sie für jedes benutzerdefinierte Steuerelement einen eindeutigen Namen, um Fehler zu vermeiden! +::: + +Nachdem Sie ein benutzerdefiniertes Steuerelement erstellt haben, müssen Sie es über die Eigenschaft [`properties`](api/diagram_editor/editbar/config/properties_property.md) auf das gewünschte Diagram-Element anwenden. + + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/grid_area.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/grid_area.md new file mode 100644 index 000000000..9130929bf --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/grid_area.md @@ -0,0 +1,181 @@ +--- +sidebar_label: Rasterbereich +title: Editor-Anleitungen - Rasterbereich +description: Erfahren Sie in der Dokumentation der DHTMLX-JavaScript-Diagram-Bibliothek mehr über den Rasterbereich des Editors. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Rasterbereich + +Der Rasterbereich ist der Bereich, der für die Bearbeitung eines Diagramms vorgesehen ist. Sie können neue Elemente hinzufügen, ihr Aussehen und ihre Positionierung ändern oder sie entfernen. + +In diesem Abschnitt erfahren Sie, welche Oberflächenelemente für jedes Diagrammelement je nach dem Modus, in dem der Editor initialisiert wird, verfügbar sind. Außerdem wird erläutert, wie Sie die Gestaltung eines Diagramms durch die Verwendung von Tastenkombinationen oder das gleichzeitige Bearbeiten mehrerer ausgewählter Elemente vereinfachen können. + +:::note +Der Abstand zwischen den Punkten im Rasterbereich hängt vom Wert des [Rasterschritts](api/diagram_editor/editor/config/gridstep_property.md) ab. +::: + +## Formen verwalten {#managing-shapes} + +### Oberflächenelemente im Standardmodus {#interface-elements-in-the-default-mode} + +Sie können Formen aus der Formenleiste in den Rasterbereich ziehen, um sie an den gewünschten Positionen zu platzieren und zu verbinden. + + + +Wenn Sie auf eine beliebige Form klicken, wird diese bearbeitbar und erhält eigene Oberflächenelemente: + +- eine Toolbar mit Steuerelementen: + - `"copy"` - erstellt eine Kopie der Form (außer bei Formen, die sich innerhalb einer Gruppe oder einer Swimlane befinden) + - `"connect"` - aktiviert den Modus zum Herstellen von Verbindungen zu einer anderen Form + - `"remove"` - löscht die ausgewählte Form +- Ziehpunkte zur Größenänderung (ziehen Sie an den Anfassern der bearbeitbaren Form, um ihre Größe zu ändern) +- ein Dreh-Symbol (klicken Sie auf das Symbol, um die Form zu drehen) + +Wenn der Verbindungsmodus für eine Form aktiviert ist, können Sie Verbindungen zu anderen Formen herstellen, deren Position und Form anpassen sowie nicht mehr benötigte Verbindungen über das Toolbar-Steuerelement `"remove"` löschen. + +Doppelklicken Sie auf den Text einer Form, um ihn zu bearbeiten. + +### Oberflächenelemente im Organigramm-Modus {#interface-elements-in-the-org-chart-mode} + +Sie können Formen ziehen, um sie an den gewünschten Positionen relativ zur Wurzelform zu platzieren, oder die Wurzelform ziehen, um das gesamte Diagramm zu verschieben. Um eine neue Form hinzuzufügen, wählen Sie eine Form aus und fügen Sie ihr ein neues Kind hinzu. Sie können auch *Assistent*- oder *Partner*-Elemente hinzufügen. Die Verbindung zwischen einer übergeordneten Form und ihrem Partner ist immer horizontal. + +Sie können Formen von einem übergeordneten Element zu einem anderen ziehen. Das verschobene Element wird zusammen mit allen seinen untergeordneten Elementen gezogen. + + + + + +Wenn Sie auf eine beliebige Form klicken, wird diese bearbeitbar und erhält eigene Oberflächenelemente: + +- eine Toolbar, die folgende Steuerelemente enthalten kann: + - `"add"` - fügt der ausgewählten Form ein neues Kind hinzu + - *„add assistant“* - fügt der ausgewählten Form einen Assistenten hinzu + - *„add partner“* - fügt der ausgewählten Form einen Partner hinzu + - *„align vertically“* - ordnet die untergeordneten Elemente der Form vertikal an + - *„align horizontally“* - ordnet die untergeordneten Elemente der Form horizontal an + - `"remove"` - löscht die ausgewählte Form (außer der Wurzelform) mitsamt ihren untergeordneten Elementen +- Ziehpunkte zur Größenänderung (ziehen Sie an den Anfassern der bearbeitbaren Form, um ihre Größe zu ändern) +- ein Symbol zum Ein-/Ausklappen untergeordneter Formen (sofern vorhanden) + +Wenn Sie auf eine Assistenten- oder Partnerform klicken, wird diese bearbeitbar und erhält eigene Oberflächenelemente: + +- `"remove"` - löscht die ausgewählte Form + +Doppelklicken Sie auf den Text einer Form, um ihn zu bearbeiten. + +### Oberflächenelemente im Mindmap-Modus {#interface-elements-in-the-mindmap-mode} + +Sie können Formen ziehen, um sie an den gewünschten Positionen relativ zur Wurzelform zu platzieren, oder die Wurzelform ziehen, um das gesamte Diagramm zu verschieben. Wenn Sie die übergeordnete Form ziehen, wird die Form zusammen mit allen untergeordneten Formen verschoben. Um eine neue Form hinzuzufügen, wählen Sie eine Form aus und fügen Sie ihr ein neues Kind hinzu. Die Formen können von einem übergeordneten Element zu einem anderen gezogen werden. Das verschobene Element wird zusammen mit allen seinen untergeordneten Elementen gezogen. + + + +Wenn Sie auf eine beliebige Form klicken, wird diese bearbeitbar und erhält eigene Oberflächenelemente: + +- eine Toolbar mit Steuerelementen: + - `"add"` - fügt der ausgewählten Form ein neues Kind hinzu (außer bei der Wurzelform) + - `"addLeft"` - fügt links von der Wurzelform ein neues Kind hinzu + - `"addRight"` - fügt rechts von der Wurzelform ein neues Kind hinzu + - `"remove"` - löscht die ausgewählte Form (außer der Wurzelform) mitsamt ihren untergeordneten Elementen +- Ziehpunkte zur Größenänderung (ziehen Sie an den Anfassern der bearbeitbaren Form, um ihre Größe zu ändern) +- ein Symbol zum Ein-/Ausklappen untergeordneter Formen + +Doppelklicken Sie auf den Text einer Form, um ihn zu bearbeiten. + +## Linien verwalten {#managing-lines} + +Im Standardmodus können Sie Verbindungen zu anderen Formen herstellen, deren Position und Form anpassen sowie der Linie Text hinzufügen und nicht mehr benötigte Verbindungen löschen. + + + +Im Standardmodus können Sie einer Linie außerdem durch Doppelklick Text hinzufügen. Klicken Sie auf den Text, um seine Richtung festzulegen oder ihn zu löschen. Doppelklicken Sie auf den Text, um ihn zu bearbeiten. + + + +## Gruppen verwalten {#managing-groups} + +Sie können Gruppen aus der Formenleiste in den Rasterbereich ziehen, um sie an den gewünschten Positionen zu platzieren. Sie können mehrere Formen oder andere Gruppen in eine Gruppe einfügen und sie als Einheit verschieben, kopieren oder löschen. + + + +Wenn Sie auf eine beliebige Gruppe klicken, wird diese bearbeitbar und erhält eigene Oberflächenelemente: + +- eine Toolbar mit Steuerelementen: + - `"copy"` - erstellt eine Kopie der Gruppe (außer bei Gruppen, die sich innerhalb einer anderen Gruppe oder einer Swimlane befinden); + - `"remove"` - löscht die ausgewählte Gruppe; +- Ziehpunkte zur Größenänderung (ziehen Sie an den Anfassern der bearbeitbaren Gruppe, um ihre Größe zu ändern). + +Doppelklicken Sie auf den Text in der Kopfzeile der Gruppe, um ihn zu bearbeiten. + +## Swimlanes verwalten {#managing-swimlanes} + +Sie können eine Swimlane aus der Formenleiste in den Rasterbereich ziehen, um sie an der gewünschten Position zu platzieren. + + + +Wenn Sie auf eine beliebige Swimlane klicken, wird diese bearbeitbar und erhält eigene Oberflächenelemente: + +- eine Toolbar mit Steuerelementen: + - `"addRowLast"` - fügt am Ende der Swimlane eine neue Zeile hinzu + - `"addColumnLast"` - fügt am Ende der Swimlane eine neue Spalte hinzu + - `"copy"` - erstellt eine Kopie der Swimlane + - `"remove"` - löscht die ausgewählte Swimlane +- Ziehpunkte zur Größenänderung (ziehen Sie an den Anfassern der bearbeitbaren Swimlane, um ihre Größe zu ändern) + +Sie können außerdem Spalten oder Zeilen der Swimlane über die Optionen des Kontextmenüs hinzufügen, verschieben oder entfernen. Das Kontextmenü wird angezeigt, nachdem der Benutzer auf das Symbol einer Swimlane-Unterüberschrift geklickt hat. + + + +Beachten Sie, dass einige Optionen zum Verschieben der ersten/letzten Spalten und Zeilen durch interne Einstellungen einer Swimlane deaktiviert sind. + +## Attribute eines Elements bearbeiten {#editing-attributes-of-an-item} + +Nachdem Sie ein Element im Rasterbereich ausgewählt haben, können Sie dessen Attribute [über die Seitenleistenoptionen in der Editbar des Editors](guides/diagram_editor/editbar.md) aktualisieren. + +## Die Toolbar eines Elements konfigurieren {#configuring-the-toolbar-of-an-item} + +Sie können die individuelle Toolbar von Formen, Gruppen und Swimlanes über die Eigenschaft [shapeToolbar](api/diagram_editor/editor/config/shapetoolbar_property.md) des Editors nach Ihren Bedürfnissen anpassen. + +## Fanglinien aktivieren/deaktivieren {#enablingdisabling-snap-lines} + +:::note +Diese Funktion ist nur im Standardmodus des Editors verfügbar +::: + +Ab v5.0 ist der Rasterbereich mit Fanglinien ausgestattet, die das symmetrische Platzieren von Formen zueinander vereinfachen. + +Wenn Sie die Breite und Farbe der Linien ändern oder sie vollständig ausblenden möchten, verwenden Sie die Eigenschaft [magnetic](api/diagram_editor/editor/config/magnetic_property.md) des Editors. + +## Mehrere Elemente bearbeiten {#manipulating-multiple-items} + +Sie können mehrere Diagrammelemente auswählen, indem Sie bei gedrückter linker Maustaste über sie fahren. Sie können die benötigten Elemente auch über die Tastenkombination Shift+Left Click auswählen. + +Sie können alle ausgewählten Elemente gleichzeitig bearbeiten, und zwar: + +- Elemente kopieren und einfügen (*nur im Standardmodus*) +- die Elemente ziehen +- die Elemente löschen +- die kopierten Stile eines Elements einfügen +- [eine Gruppe von Elementen ausrichten](#aligning-multiple-items) (*nur im Standardmodus*) + +Sie können Linien nur auswählen und löschen, wenn der Editor im Standardmodus initialisiert ist. + +### Mehrere Elemente ausrichten {#aligning-multiple-items} + +:::note +Diese Funktion ist nur im Standardmodus des Editors verfügbar. +::: + +Ab v5.0 können Sie eine Gruppe von Elementen ausrichten oder verteilen, indem Sie sie auswählen und das gewünschte Steuerelement in der Toolbar anklicken. Folgende Steuerelemente stehen zur Verfügung: + +| Steuerelement | Beschreibung | +| ---------------------------------- | -------------------------------------------| +| **Links ausrichten** | Richtet Elemente entlang der x-Achse links aus | +| **Horizontal zentrieren** | Richtet Elemente entlang der x-Achse zentriert aus | +| **Rechts ausrichten** | Richtet Elemente entlang der x-Achse rechts aus | +| **Horizontalen Abstand verteilen** | Verteilt Elemente gleichmäßig entlang der x-Achse | +| **Vertikalen Abstand verteilen** | Verteilt Elemente gleichmäßig entlang der y-Achse | +| **Oben ausrichten** | Richtet Elemente entlang der y-Achse oben aus | +| **Vertikal zentrieren** | Richtet Elemente entlang der y-Achse zentriert aus | +| **Unten ausrichten** | Richtet Elemente entlang der y-Achse unten aus | + + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/hot_keys.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/hot_keys.md new file mode 100644 index 000000000..97f7b29df --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/hot_keys.md @@ -0,0 +1,42 @@ +--- +sidebar_label: Hotkeys +title: Editor-Anleitungen - Hotkey-Liste +description: Erfahren Sie in der Dokumentation der DHTMLX-JavaScript-Diagram-Bibliothek mehr über die Hotkeys des Editors. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Hotkey-Liste + +In diesem Abschnitt finden Sie eine Reihe von Standard-Hotkeys, die Sie beim Erstellen eines Diagramms im Editor verwenden können, Beschreibungen der von diesen Hotkeys ausgeführten Aktionen sowie die Parameter-Zeichenfolgen der Hotkeys, die überschrieben werden können. Verwenden Sie die Eigenschaft [`hotkeys`](api/diagram_editor/editor/config/hotkeys_property.md), um Tastenkombinationen innerhalb des Editors zu verwalten. + +| Tastenkombination | Beschreibung | Parameter-Zeichenfolge | +|--------------------------------|------------------------------------------------------|-------------------------| +| `Alt+1` | Zeigt/verbirgt die Formenleiste (nur im Standardmodus) | `"alt+1"` | +| `Alt+2` | Zeigt/verbirgt die Editbar | `"alt+2"` | +| `Alt+3` | Zeigt/verbirgt den Rasterbereich | `"alt+3"` | +| `Ctrl+Z` (Win), `CMD+Z` (macOS)| Macht die letzte Aktion rückgängig | `"ctrl+z"` | +| `Ctrl+Shift+Z` (Win), `CMD+Shift+Z` (macOS)| Stellt die rückgängig gemachte Aktion wieder her | `"ctrl+shift+z"` | +| `Ctrl+D` (Win), `CMD+D` (macOS)| Dupliziert ein ausgewähltes Element (nur im Standardmodus) | `"ctrl+d"` | +| `Ctrl+C` (Win), `CMD+C` (macOS)| Kopiert ein ausgewähltes Element (nur im Standardmodus) | `"ctrl+c"` | +| `Ctrl+V` (Win), `CMD+V` (macOS)| Fügt ein ausgewähltes Element ein (nur im Standardmodus) | `"ctrl+v"` | +| `Ctrl+Alt+C` (Win), `CMD+Alt+C` (macOS)| Kopiert den Stil des ausgewählten Elements (anwendbar auf Elemente derselben Art)| `"alt+ctrl+c"` | +| `Ctrl+Alt+V` (Win), `CMD+Alt+V` (macOS)| Wendet einen kopierten Stil auf das ausgewählte Element an (anwendbar auf Elemente derselben Art)| `"alt+ctrl+v"` | +| `Ctrl+A` (Win), `CMD+A` (macOS)| Wählt alle Elemente aus | `"ctrl+a"` | +| `Ctrl+Shift+A` (Win), `CMD+Shift+A` (macOS)| Hebt die Auswahl aller ausgewählten Elemente auf | `"ctrl+shift+a"` | +| `Shift+Left Click` | Fügt ein Element der Liste der ausgewählten Elemente hinzu | (Kein direkter Parameterschlüssel von `hotkeys`) | +| `Alt+Left Click` | Hebt die Auswahl des ausgewählten Elements auf | (Kein direkter Parameterschlüssel von `hotkeys`) | +| `Delete` (`Del`), `Backspace` | Löscht ein oder mehrere Elemente | `"delete"`, `"backspace"` | +| `Arrow-Left`, `Arrow-Right`, `Arrow-Up`, `Arrow-Down`| Verschiebt die ausgewählten Elemente | `"arrowLeft"`, `"arrowRight"`, `"arrowUp"`, `"arrowDown"` | +| `Ctrl+Mousewheel` (Win), `CMD+Mousewheel` (macOS)| Erhöht/verringert den Skalierungswert | (Kein direkter Parameterschlüssel von `hotkeys`) | +| `Ctrl+Enter` (Win), `CMD+Enter` (macOS) | Öffnet den Inline-Texteditor für das ausgewählte Element. Dient als Alternative zum Doppelklick. Nur für Formen mit einer bearbeitbaren Eigenschaft `text` anwendbar. | `"ctrl+enter"` | + +## Tastenkombinationen des Inline-Texteditors {#inline-text-editor-shortcuts} + +Die folgenden Hotkeys sind verfügbar, wenn der [Inline-Texteditor](guides/inline_editing.md) aktiv ist. Sie können nicht über die Eigenschaft `hotkeys` konfiguriert werden. + +| Hotkey | Beschreibung | +|--------|-------------| +| `Ctrl+Enter` (Win), `CMD+Enter` (macOS) | Öffnet den Inline-Texteditor für das ausgewählte Element. Dient als Alternative zum Doppelklick. Nur für Formen mit einer bearbeitbaren Eigenschaft `text` anwendbar. | +| `Shift+Enter` | Fügt einen Zeilenumbruch (`\n`) ein, ohne den Editor zu schließen. | +| `Delete` (`Del`), `Backspace` | Löscht das Zeichen an der Cursorposition. Löscht nicht das Element selbst. | +| `Enter` | Bestätigt den aktuellen Text und schließt den Editor. Da der Editor Änderungen dynamisch während der Eingabe übernimmt, markiert das Drücken der Eingabetaste den erfolgreichen Abschluss der Bearbeitung. | +| `Escape` | Verwirft alle nicht gespeicherten Änderungen und schließt den Editor, wobei der Text des Elements auf den Wert vor Beginn der Bearbeitung zurückgesetzt wird. | diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/initialization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/initialization.md new file mode 100644 index 000000000..80d8b7ae2 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/initialization.md @@ -0,0 +1,150 @@ +--- +sidebar_label: Initialisierung +title: Initialisierung des Diagram Editor +description: Erfahren Sie in der Dokumentation der DHTMLX-JavaScript-Diagram-Bibliothek, wie Sie mit dem Diagram Editor starten. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Initialisierung des Diagram Editor + +Dieser Artikel behandelt den Prozess der Anzeige eines Diagram Editor auf einer Seite. Um den Editor zu initialisieren, müssen Sie die für den Editor spezifischen Quelldateien einbinden und die Instanz `DiagramEditor` verwenden. In allen anderen Aspekten entspricht die Initialisierungsphase der der Diagram-Komponente: + +- [Laden Sie das DHTMLX-Diagram-Paket herunter](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml) und entpacken Sie es in einen Ordner Ihres Projekts +- [Binden Sie die Quelldateien auf einer Seite ein](#including-required-code-files) +- [Initialisieren Sie den Diagram Editor mit dem Objektkonstruktor](#initializing-diagram-editor) +- [Laden Sie Daten in den Diagram Editor](#loading-data-into-diagram-editor) + +~~~html + + + + + + + + + + + + +~~~ + +## Erforderliche Codedateien einbinden {#including-required-code-files} + +Um einen Diagram Editor zu erstellen, müssen Sie 2 Quelldateien in Ihre Seite einbinden: + +- **diagramWithEditor.js** +- **diagramWithEditor.css** + +Stellen Sie sicher, dass Sie korrekte relative Pfade zu diesen Dateien angeben: + +~~~html + + +~~~ + +### Diagram Editor über npm oder yarn installieren {#installing-diagram-editor-via-npm-or-yarn} + +Sie können den JavaScript Diagram Editor mithilfe des Paketmanagers `yarn` oder `npm` in Ihr Projekt importieren. + +#### Trial-Diagram-Editor über npm oder yarn installieren {#installing-trial-diagram-editor-via-npm-or-yarn} + +:::info +Wenn Sie die Testversion des Diagram Editor verwenden möchten, laden Sie das [**Test-Diagram-Paket**](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml) herunter und folgen Sie den in der *README*-Datei beschriebenen Schritten. Beachten Sie, dass der Test-Diagram-Editor nur 30 Tage lang verfügbar ist. +::: + +#### PRO-Diagram-Editor über npm oder yarn installieren {#installing-pro-diagram-editor-via-npm-or-yarn} + +:::info +Sie können direkt im [Kundenbereich](https://dhtmlx.com/clients/) auf das private **npm** von DHTMLX zugreifen, indem Sie Ihren Login und Ihr Passwort für **npm** generieren. Dort finden Sie auch eine ausführliche Installationsanleitung. Bitte beachten Sie, dass der Zugriff auf das private **npm** nur besteht, solange Ihre proprietäre Diagram-Lizenz aktiv ist. +::: + +## Diagram Editor initialisieren {#initializing-diagram-editor} + +Sie können einen Diagram Editor in einem Container, im Dokument-Body oder in einer Layout-Zelle initialisieren. + +### Initialisierung in einem Container {#initialization-in-a-container} + +Um einen Diagram Editor in einem Container zu initialisieren, verwenden Sie den Konstruktor `dhx.DiagramEditor` und übergeben Sie der Konstruktorfunktion die folgenden zwei Parameter: + +- einen Container, in den der Diagram Editor eingefügt wird - geben wir ihm die ID `"editor_container"`: + +~~~html title="index.html" + +~~~ + +- ein Objekt mit [Konfigurationseigenschaften](#configuration-properties). Wird dieses Argument nicht an den Konstruktor übergeben, werden die Standardeinstellungen angewendet + +~~~jsx title="index.js" +const editor = new dhx.DiagramEditor("editor_container", { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### Initialisierung im Dokument-Body {#initialization-in-the-document-body} + +Sie können das Festlegen eines Containers für den Diagram Editor auch überspringen und ihn direkt in den Dokument-Body einfügen: + +~~~jsx +const editor = new dhx.DiagramEditor(document.body, { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### Initialisierung in einer Layout-Zelle {#initialization-in-a-layout-cell} + +Sie können einen Editor auch innerhalb [einer Layout-Zelle](https://docs.dhtmlx.com/suite/layout/) initialisieren. Verwenden Sie in diesem Fall *null* anstelle eines Containers: + +~~~jsx +const editor = new dhx.DiagramEditor(null, { + type: "default" // "default" | "org" | "mindmap" +}); +const layout = new dhx.Layout("layout", { + cols: [ + { + id: "diagram_editor" + } + ] +}); + +layout.getCell("diagram_editor").attach(editor); +~~~ + +### Konfigurationseigenschaften {#configuration-properties} + +Um die Konfiguration des Editors zu ändern, können Sie die gewünschte Eigenschaft im Konfigurationsobjekt angeben, das als zweiter Parameter der Konstruktorfunktion übergeben wird. + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", // "default" | "org" | "mindmap" + shapeBarWidth: 320, + lineGap: 20 +}); +~~~ + +### Eigenschaften {#properties} + +Prüfen Sie [die vollständige Liste der Konfigurationseigenschaften des Editors](api/diagram_editor/editor/config/overview.md). + +## Daten in den Diagram Editor laden {#loading-data-into-diagram-editor} + +Sie können über die Methode [parse()](api/diagram_editor/editor/methods/parse_method.md) des Editors einen [passenden Datensatz](guides/loading_data.md#preparing-data-to-load) in den Editor laden. + + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/shapebar.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/shapebar.md new file mode 100644 index 000000000..6feb6bf2e --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/shapebar.md @@ -0,0 +1,307 @@ +--- +sidebar_label: Shapebar +title: Editor-Anleitungen - Shapebar +description: In der Dokumentation der DHTMLX-JavaScript-Diagram-Bibliothek erfahren Sie mehr über die Shapebar des Editors. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-tägige Testversion von DHTMLX Diagram herunter. +--- + +# Shapebar + +Die Shapebar ist ein Teil des Editors, der Vorschauen von Diagram-Elementen anzeigt. Sie können die gewünschten Elemente auswählen und sie von der Shapebar in den Grid-Bereich ziehen. + +:::note +Die Shapebar ist nur im Editor verfügbar, der im Standardmodus initialisiert wurde (type: `"default"`). +::: + +## Standardabschnitte {#default-sections} + +Standardmäßig ist die Shapebar in drei Abschnitte unterteilt: *Shapes*, *Groups* und *Swimlanes*. Der Abschnitt *Shapes* enthält alle Standard-Shapes sowie benutzerdefinierte Shapes. +Die Abschnitte *Groups* und *Swimlanes* enthalten grundlegende Sets der jeweiligen Elemente. + + + +## Benutzerdefinierte Abschnitte {#custom-sections} + +Um die Struktur der Shapebar anzupassen, verwenden Sie die Eigenschaft [`sections`](api/diagram_editor/shapebar/config/sections_property.md). Damit können Sie eigene Abschnitte in der gewünschten Reihenfolge festlegen und die Elemente den entsprechenden Abschnitten zuordnen. + +Die Eigenschaft `sections` ist ein Objekt mit einer Reihe von *Schlüssel:Wert*-Paaren, wobei `key` der Name eines Abschnitts und `value` ein Array mit der Liste der Elemente ist, die in diesem Abschnitt gerendert werden sollen. + +Je nach den gewählten Elementen kann die Konfiguration der Elemente eines bestimmten Abschnitts wie folgt aussehen: + +1. Rendering von Basisabschnitten + +Sie können mit dem Konfigurationsobjekt `sections` ein Basisset an Shapes rendern. Zum Beispiel: + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Base flow shapes": [{ flowShapes: true }], + "Base org cards": [{ org: true }], + "Base groups": [{ group: true }], + "Base swimlane": [{ swimlane: true }] + } + } + } +}); +~~~ + +2. Angabe von Elementen mithilfe von String-Literalen + +Sie können Shapebar-Elemente rendern, indem Sie die Typen der Shapes mithilfe von String-Literalen angeben. Sehen Sie sich das folgende Beispiel an: + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Custom section": ["custom_shape"], + "Other shapes": ["text", "topic", "circle"] + } + } + } +}); +~~~ + +3.
Neudefinition der Basiskonfigurationen
+ +Eine weitere Möglichkeit besteht darin, die Basiseigenschaften einer beliebigen Shape neu zu definieren und sie mit den gewünschten Parametern zu rendern. Das folgende Beispiel zeigt das Rendern einer Shape vom Typ `circle` mit verschiedenen Text- und Farbeinstellungen: + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Circles": [ + { + type: "circle", + fill: "#fcba03", + text: "Orange" + }, + { + type: "circle", + fill: "#03d7fc", + text: "Blue" + }, + { + type: "circle", + fill: "#03fc88", + text: "Green" + } + ] + } + } + } +}); +~~~ + +Auf diese Weise können Sie jeden Shape-Typ neu konfigurieren. + +4. Kombinieren verschiedener Elementtypen in einem Abschnitt + +Wenn Ihr Projekt verschiedene Elemente verwendet, können Sie in der Shapebar Abschnitte mit gemischten Elementtypen erstellen. Sehen Sie sich das folgende Beispiel an: + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Base flow shapes": [{ flowShapes: true }, "text", "topic"], + "Circles": [ + "circle", + { + type: "circle", + fill: "#fcba03", + text: "Orange" + }, + { + type: "circle", + fill: "#03d7fc", + text: "Blue" + }, + { + type: "circle", + fill: "#03fc88", + text: "Green" + } + ] + } + } + } +}); +~~~ + +## Hinzufügen von Elementen desselben Typs mit unterschiedlichen Einstellungen {#adding-items-of-the-same-type-with-different-settings} + +Die Bibliothek ermöglicht es Ihnen, der Shapebar des Editors mehrere identische Elemente (d. h. Elemente desselben Typs) mit unterschiedlichen Einstellungen hinzuzufügen. +Gehen Sie dazu wie folgt vor: + +- Erstellen Sie separate Objekte mit unterschiedlichen Konfigurationen für die Elemente des gewünschten Typs. Sie können so viele Objekte erstellen, wie Sie benötigen +- Verwenden Sie die *Namen* der erstellten Objekte als *Typen* der Elemente und fügen Sie sie mithilfe der Eigenschaft [`sections`](api/diagram_editor/shapebar/config/sections_property.md) den Abschnitten der Shapebar hinzu + +## Festlegen der Vorschau von Shapes {#setting-the-preview-of-shapes} + +Um die Vorschau der in der Shapebar des Editors gerenderten Elemente zu konfigurieren, verwenden Sie die Eigenschaft [`preview`](api/diagram_editor/shapebar/config/preview_property.md). Es handelt sich um ein Objekt mit zwei Attributen: + +- `scale` - (optional) legt den Maßstab der in der Shapebar des Editors gerenderten Elemente fest, standardmäßig 0.5 +- `gap` - (optional) legt den Abstand zwischen den in der Shapebar gerenderten Elementen fest, standardmäßig "6px 8px" +(legt einen Abstand von 6px oben und unten sowie 8px rechts und links fest) + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + preview: { + scale: 0.65, + gap: 8 + } + } + } +}); +~~~ + +### Anpassen einer Shape-Vorschau {#customizing-a-shape-preview} + +Um das Aussehen einer bestimmten Shape anzupassen, können Sie die Konfigurationseigenschaft [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) eines Shape-Objekts verwenden. + +Diese Eigenschaft kann in zwei Fällen angewendet werden: + +- beim Festlegen der Standardkonfiguration einer Standard-Shape über die Eigenschaft [`defaults`](api/diagram_editor/editor/config/defaults_property.md) des Editor-Objekts +- beim Festlegen der Standardkonfiguration einer benutzerdefinierten Shape über das Attribut `defaults` der Methode [`addShape()`](api/diagram/addshape_method.md) + +Betrachten wir drei Beispiele für die Konfiguration einer Shape-Vorschau: + +1\. Sie können ein Bild angeben, das in der Shapebar für eine benutzerdefinierte Shape angezeigt werden soll. Übergeben Sie dazu entweder eine URL zum Laden eines Bildes oder ein Base64-Bild als String-Wert an die Eigenschaft `preview`: + +~~~jsx {6} +const defaults = { + title: "Name and First name", + img: "../avatar-1.jpg", + height: 115, + width: 330, + preview: "../shape_preview.png" +}; + +editor.diagram.addShape("template", { + template, + defaults +}); +~~~ + +2\. Wenn Sie ein Bild angeben und dessen Breite und Höhe festlegen müssen, sollten Sie die Eigenschaft `preview` als Objekt mit den Attributen `img`, `height` und `width` bereitstellen: + +~~~jsx {4-8} +const defaults = { + title: "Name and First name", email: "some@mail.com", + img: "../avatar-1.jpg", height: 115, width: 330, + preview: { + img: "../shape_preview.png", + height: 58, + width: 165 + } +} + +editor.diagram.addShape("template", { + template, + defaults +}); +~~~ + +:::note +Sie können die genaue Breite und Höhe des Bildes festlegen, es besteht jedoch keine Möglichkeit, den Maßstab des Bildes festzulegen. +::: + +3\. Sie können den Maßstab einer bestimmten, in der Shapebar gerenderten Shape über die Eigenschaft `scale` neu definieren: + +~~~jsx {2-4} +const defaults = { + preview: { + scale: 0.72 + } +}; + +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Custom shapes": ["personalCard"], + "OrgChart shapes": ["card", "img-card"] + }, + preview: { + scale: 0.65 + } + } + } +}); + +editor.diagram.addShape("personalCard", { + defaults, + // ... +}); +~~~ + +:::note +Die Eigenschaft `preview` wird beim Exportieren von Daten in das JSON-Format weggelassen. +::: + +## Festlegen der Breite der Shapebar {#setting-the-width-of-shapebar} + +Die Standardbreite der Shapebar beträgt 300. Sie können sie ändern und über die Eigenschaft [`width`](api/diagram_editor/shapebar/config/width_property.md) eine beliebige andere Breite festlegen, z. B.: + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + width: 400 // standardmäßig 300 + } + } +}); +~~~ + +## Anzeigen/Ausblenden der Shapebar {#showinghiding-the-shapebar} + +Wenn Sie die Sichtbarkeit einer Shapebar steuern möchten, können Sie die Eigenschaft [`show`](api/diagram_editor/shapebar/config/show_property.md) verwenden. Damit können Sie die Shapebar bei der Initialisierung des Diagram Editors mit bestimmten Einstellungen ausblenden und sie später bei Bedarf wieder anzeigen. Standardmäßig wird die Shapebar angezeigt. + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + show: false // standardmäßig true + } + } +}); +~~~ + +## Erscheinungsbild von Shapebar und Shapes {#shapebar-and-shapes-appearance} + +Mit der Eigenschaft [`css`](api/diagram_editor/shapebar/config/css_property.md) können Sie das gewünschte Look-and-Feel für die Shapebar festlegen. Damit können Sie benutzerdefinierte CSS-Klassen angeben, um die Darstellung der Elemente in der Shapebar auf Ihre eigene Weise zu gestalten. + +~~~html {6} + + + +~~~ + +Außerdem können Sie das [Aussehen von Shapes anpassen](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar), indem Sie das Standardfarbschema für ein bestimmtes Theme neu definieren, oder Sie verwenden eigene CSS-Variablen, um das Farbschema der Shapebar-Elemente zu verwalten. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/toolbar.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/toolbar.md new file mode 100644 index 000000000..9e6cf654e --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/diagram_editor/toolbar.md @@ -0,0 +1,445 @@ +--- +sidebar_label: Toolbar +title: Editor-Anleitungen - Toolbar +description: In der Dokumentation der DHTMLX-JavaScript-Diagram-Bibliothek erfahren Sie mehr über die Toolbar des Editors. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-tägige Testversion von DHTMLX Diagram herunter. +--- + +# Toolbar + +Die Toolbar ist der obere Bereich des Diagram Editors, der Benutzern hilft, den Bearbeitungsprozess zu steuern. + + + +Um die Toolbar zu konfigurieren, können Sie die folgenden Eigenschaften verwenden: + +- [`css`](api/diagram_editor/toolbar/config/css_property.md) - wendet die benutzerdefinierte CSS-Klasse an + +- [`navigationType`](api/diagram_editor/toolbar/config/navigationtype_property.md) - definiert die Aktion, die ein Toolbar-Element aktiviert. Sie können eine der folgenden Aktionen angeben: + - `"click"` - aktiviert ein Toolbar-Element, wenn ein Benutzer darauf klickt + - `"pointer"` - aktiviert ein Toolbar-Element, wenn ein Benutzer den Mauszeiger darüber bewegt + +- [`items`](api/diagram_editor/toolbar/config/items_property.md) - das Array von [`items`](#service-elements) (Steuerelementen), die auf der Toolbar angeordnet sind. Es gibt 2 Möglichkeiten, Toolbar-Elemente zu konfigurieren: + - [**Konfigurieren von Elementen über Strings**](api/diagram_editor/toolbar/config/items_property.md#configuring-items-via-strings) + - [**Konfigurieren von Elementen über Objekte**](api/diagram_editor/toolbar/config/items_property.md#configuring-items-via-objects) + +~~~jsx {9-40} +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + // toolbar: true, // zeigt die Standard-Toolbar an + // oder konfigurieren Sie die Toolbar über ein Objekt + toolbar: { + css: "custom_css", + navigationType: "pointer", + items: [ + { + type: "file", + items: [ + "importJson", + { + type: "exportJson", + value: "Export to JSON" + }, + { + id: "custom_id_1", + type: "menuItem", + value: "Server export", + icon: "dxi dxi-vault", + items: [ + "exportPdf", + { + id: "custom_id_2", + type: "menuItem", + value: "PNG", + handler: editor => { + editor.diagram.export.png(); + // eigene Logik hier + } + } + ] + } + ] + }, + "spacer", + "scale" + ] + } + } +}); +~~~ + +## Service-Elemente {#service-elements} + +Toolbar-Elemente werden durch **Service-Elemente** dargestellt. Sie können die folgenden Service-Elemente verwenden und konfigurieren: + +- `file` - bildet eine Gruppe von Service-Elementen zum Importieren und Exportieren von Dateien + +
+ Das Element `file` hat die folgende Struktur:
+
+ ~~~jsx
+ - file
+ - importJson
+ - export
+ - exportJson
+ - exportPdf
+ - exportPng
+ ~~~
+
+ Die Elementsammlung `file` sieht folgendermaßen aus:
+
+ 
+
+
+- `importJson` - öffnet ein Dialogfeld zum Importieren einer Datei im JSON-Format
+
+- `export` - bildet eine Gruppe von Service-Elementen zum Exportieren einer Datei im gewählten Format
+
+
+ Das Element `export` hat die folgende Struktur:
+
+ ~~~jsx
+ - export
+ - exportJson
+ - exportPdf
+ - exportPng
+ ~~~
+
+
+- `exportJson` - exportiert eine Datei im JSON-Format
+
+- `exportPdf` - exportiert eine Datei im PDF-Format
+
+- `exportPng` - exportiert eine Datei im PNG-Format
+
++ +- `edit` - bildet eine Gruppe von Service-Elementen zum Verwalten und Bearbeiten von Shapes, Lines, Groups und Swimlanes + +
+ Im Modus `default` hat die Elementsammlung `edit` die folgende Standardstruktur:
+
+ ~~~jsx
+ - edit
+ - undo
+ - redo
+ - separator
+ - duplicate
+ - copy
+ - paste
+ - separator
+ - copyStyle
+ - pasteStyle
+ - separator
+ - selectAll
+ - selectNone
+ ~~~
+
+ 
+
+ In den Modi `org`/`mindmap` hat die Elementsammlung `edit` die folgende Standardstruktur:
+
+ ~~~jsx
+ - edit
+ - undo
+ - redo
+ - separator
+ - copyStyle
+ - pasteStyle
+ - separator
+ - selectAll
+ - selectNone
+ ~~~
+
+ 
+
+
+- `undo` - geht einen Schritt im Änderungsverlauf zurück
+
+- `redo` - geht einen Schritt im Änderungsverlauf vorwärts
+
+- `duplicate` - dupliziert ausgewählte Elemente
+
+- `copy` - kopiert ausgewählte Dateien in das Objekt `model`
+
+- `paste` - fügt kopierte Dateien aus dem Objekt `model` ein
+
+- `copyStyle` - kopiert die Stile der ausgewählten Elemente in das Objekt `model`
+
+- `pasteStyle` - wendet die im Objekt `model` gespeicherten Stile auf die ausgewählten Elemente an
+
+- `selectAll` - wählt alle zur Auswahl verfügbaren Elemente aus
+
+- `selectNone` - hebt die Auswahl aller verfügbaren Elemente auf
+
++ +- `view` - bildet eine Gruppe von Service-Elementen zur Verwaltung der Ansicht von Diagram-Editor-Elementen + +
+ Im Modus `default` hat die Elementsammlung `view` die folgende Standardstruktur:
+
+ ~~~jsx
+ - view
+ - theme
+ - themeLight
+ - themeDark
+ - themeLightContrast
+ - themeDarkContrast
+ - separator
+ - shapebar
+ - editbar
+ - grid
+ - separator
+ - connectionPoints
+ - resizePoints
+ - magnetic
+ - separator
+ - zoomIn
+ - zoomOut
+ ~~~
+
+ 
+
+ In den Modi `org`/`mindmap` hat die Elementsammlung `view` die folgende Standardstruktur:
+
+ ~~~jsx
+ - view
+ - theme
+ - themeLight
+ - themeDark
+ - themeLightContrast
+ - themeDarkContrast
+ - separator
+ - editbar
+ - separator
+ - grid
+ - separator
+ - resizePoints
+ - itemsDraggable
+ - separator
+ - zoomIn
+ - zoomOut
+ ~~~
+
+ 
+
+
+- `theme` - bildet eine Gruppe von Service-Elementen zum Anwenden von Themes
+
+
+ Das Element `theme` hat die folgende Struktur:
+
+ ~~~jsx
+ - theme
+ - themeLight
+ - themeDark
+ - themeLightContrast
+ - themeDarkContrast
+ ~~~
+
+
+- `themeLight` - wendet das **Light**-Theme an
+
+- `themeDark` - wendet das **Dark**-Theme an
+
+- `themeLightContrast` - wendet das **LightContrast**-Theme an
+
+- `themeDarkContrast` - wendet das **DarkContrast**-Theme an
+
+- `shapebar` - zeigt das Panel `Shapebar` an oder blendet es aus
+
+- `editbar` - zeigt das Panel `Editbar` an oder blendet es aus
+
+- `grid` - zeigt das `grid` im Grid-Bereich an oder blendet es aus
+
+- `connectionPoints` - zeigt die **Verbindungspunkte** an oder blendet sie aus
+
+- `resizePoints` - zeigt die **Größenänderungspunkte** an oder blendet sie aus
+
+- `magnetic` - schaltet die Funktion `magnetic` ein oder aus
+
+- `zoomIn` - erhöht den Maßstabswert um 0.05 (5%)
+
+- `zoomOut` - verringert den Maßstabswert um 0.05 (5%)
+
++ +- `arrange` - bildet eine Gruppe von Service-Elementen zum Anordnen von Diagram-Editor-Elementen + +
+ Im Modus `default` hat die Elementsammlung `arrange` die folgende Standardstruktur:
+
+ ~~~jsx
+ - arrange
+ - layout
+ - layoutMode
+ - layoutModeDirect
+ - layoutModeEdges
+ - separator
+ - layoutOrthogonal
+ - layoutRadial
+ - align
+ - alignHorizontalLeft
+ - alignHorizontalCenter
+ - alignHorizontalRight
+ - separator
+ - alignVerticalTop
+ - alignVerticalCenter
+ - alignVerticalBottom
+ - distribute
+ - distributeVertical
+ - distributeHorizontal
+ ~~~
+
+ 
+
+
+- `layout` - bildet eine Gruppe von Service-Elementen zur automatischen Platzierung von Diagram-Editor-Elementen
+
+
+ Das Element `layout` hat die folgende Struktur:
+
+ ~~~jsx
+ - layout
+ - layoutMode
+ - layoutModeDirect
+ - layoutModeEdges
+ - separator
+ - layoutOrthogonal
+ - layoutRadial
+ ~~~
+
+
+- `layoutMode` - bildet eine Gruppe von Service-Elementen zur Verwaltung des Modus für die automatische Platzierung
+
+
+ Das Element `layoutMode` hat die folgende Struktur:
+
+ ~~~jsx
+ - layoutMode
+ - layoutModeDirect
+ - layoutModeEdges
+ ~~~
+
+
+- `layoutModeDirect` - wendet den Modus `direct` für die Elementverbinder an
+
+- `layoutModeEdges` - wendet den Modus `edges` für die Elementverbinder an
+
+- `layoutOrthogonal` - wendet den Modus `orthogonal` für die Elementanordnung an
+
+- `layoutRadial` - wendet den Modus `radial` für die Elementanordnung an
+
+- `align` - bildet eine Gruppe von Service-Elementen zur Verwaltung der Ausrichtung der Diagram-Editor-Elemente
+
+
+ Das Element `align` hat die folgende Struktur:
+
+ ~~~jsx
+ - align
+ - alignHorizontalLeft
+ - alignHorizontalCenter
+ - alignHorizontalRight
+ - separator
+ - alignVerticalTop
+ - alignVerticalCenter
+ - alignVerticalBottom
+ ~~~
+
+
+- `alignHorizontalLeft` - richtet Elemente horizontal links aus
+
+- `alignHorizontalCenter` - richtet Elemente horizontal zentriert aus
+
+- `alignHorizontalRight` - richtet Elemente horizontal rechts aus
+
+- `alignVerticalTop` - richtet Elemente vertikal oben aus
+
+- `alignVerticalCenter` - richtet Elemente vertikal zentriert aus
+
+- `alignVerticalBottom` - richtet Elemente vertikal unten aus
+
+- `distribute` - bildet eine Gruppe von Service-Elementen zum Verteilen der Diagram-Editor-Elemente
+
+
+ Das Element `distribute` hat die folgende Struktur:
+ ~~~jsx
+ - distribute
+ - distributeVertical
+ - distributeHorizontal
+ ~~~
+
+
+- `distributeVertical` - verteilt Elemente vertikal
+
+- `distributeHorizontal` - verteilt Elemente horizontal
+
++ +- `scale` - das Steuerelement, mit dem Benutzer den Maßstabswert um 0.05 (5%) erhöhen oder verringern können + +
+ Das Element `scale` sieht folgendermaßen aus:
+
+ 
+
+
+- [`separator`](https://docs.dhtmlx.com/suite/toolbar/api/api_separator_properties/) - eine horizontale (zwischen Menüoptionen) oder vertikale (zwischen Toolbar-Steuerelementen) Linie, die Elemente/Elementgruppen voneinander trennt.
+
+- [`spacer`](https://docs.dhtmlx.com/suite/toolbar/api/api_spacer_properties/) - ein Abstand auf der Toolbar, der zum Ausrichten von Steuerelementen verwendet wird
+
+## Basiselemente {#base-elements}
+
+Neben den [**Service-Elementen**](#service-elements) können Sie mithilfe des [Objekt](api/diagram_editor/toolbar/config/items_property.md#configuring-items-via-objects)-Ansatzes auch die folgenden **Basiselemente** angeben und konfigurieren:
+
+- [Button](https://docs.dhtmlx.com/suite/toolbar/button/)
+- [Custom HTML](https://docs.dhtmlx.com/suite/toolbar/customhtmlbutton/)
+- [Datepicker](https://docs.dhtmlx.com/suite/toolbar/datepicker/)
+- [ImageButton]( https://docs.dhtmlx.com/suite/toolbar/image_button/)
+- [Input](https://docs.dhtmlx.com/suite/toolbar/input/)
+- [MenuItem](https://docs.dhtmlx.com/suite/toolbar/menuitem/)
+- [NavItem](https://docs.dhtmlx.com/suite/toolbar/navitem/)
+- [SelectButton](https://docs.dhtmlx.com/suite/toolbar/selectbutton/)
+- [Separator](https://docs.dhtmlx.com/suite/toolbar/separator/)
+- [Spacer](https://docs.dhtmlx.com/suite/toolbar/spacer/)
+- [Title](https://docs.dhtmlx.com/suite/toolbar/title/)
+
+Das folgende Beispiel zeigt, wie Sie das Steuerelement [Button](https://docs.dhtmlx.com/suite/toolbar/button/) zur Toolbar hinzufügen:
+
+~~~jsx {8-11}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org", // "default" | "org" | "mindmap"
+ view: {
+ // toolbar: true, // zeigt die Standard-Toolbar an
+ // oder konfigurieren Sie die Toolbar über ein Objekt
+ toolbar: {
+ items: [
+ {
+ type: "button",
+ value: "Best button"
+ }
+ ]
+ }
+ }
+});
+~~~
+
+Zusätzlich zu den inneren Eigenschaften der **Basiselemente** (mit Ausnahme von [Separator](https://docs.dhtmlx.com/suite/toolbar/separator/), [Spacer](https://docs.dhtmlx.com/suite/toolbar/spacer/) und [Title](https://docs.dhtmlx.com/suite/toolbar/title/)) können Sie auch die folgenden Eigenschaften verwenden:
+
+- `checkIcon` - (optional) - der Handler, der die CSS-Klasse des Icons zurückgibt. Er wird mit dem folgenden Argument aufgerufen:
+ - `editor` - das Diagram-Editor-Objekt
+
+~~~jsx
+checkIcon?: (editor: IDiagramEditor) => string; // Nur für Basiselemente verwenden, die ein Icon enthalten
+~~~
+
+- `handler` - (optional) - der Handler, der ausgeführt wird, wenn das Event `click` oder `inputChange` eintritt. Er wird mit den folgenden Argumenten aufgerufen:
+ - `editor` - das Diagram-Editor-Objekt
+ - `event` - ein [natives Event](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+
+~~~jsx
+handler?: (editor: object, event: Event) => void;
+~~~
+
+**Verwandtes Beispiel**: [Diagram mit Editor. Standardmodus. Anpassung von Karten, Editbar, Toolbar und Shapebar](https://snippet.dhtmlx.com/1p0wemnn)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/event_handling.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/event_handling.md
new file mode 100644
index 000000000..9b5d03746
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/event_handling.md
@@ -0,0 +1,86 @@
+---
+sidebar_label: Event-Handling
+title: Event-Handling
+description: Sie können mehr über das Event-Handling in der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren. Durchsuchen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter.
+---
+
+# Event-Handling
+
+## Event-Listener anhängen {#attaching-event-listeners}
+
+Sie können jedem verfügbaren Event einen beliebigen benutzerdefinierten Handler hinzufügen. Verwenden Sie dazu die Methode `diagram.events.on()` mit den folgenden Parametern:
+
+- `name` - (*string*) der Name des Events
+- `handler` - (*function*) die Handler-Funktion
+
+~~~jsx
+diagram.events.on("ShapeClick", (id) => {
+ alert("You've just clicked an item with id="+id);
+});
+~~~
+
+Sie können mehrere Handler an dasselbe Event anhängen, und alle werden ausgeführt. Wenn einige der Handler *false* zurückgeben, werden die zugehörigen Operationen blockiert. Event-Handler werden in der Reihenfolge verarbeitet, in der sie angehängt wurden.
+
+## Event-Listener trennen {#detaching-event-listeners}
+
+Um Events zu trennen, verwenden Sie die Methode `diagram.events.detach()`:
+
+~~~jsx
+diagram.events.on("CustomEvent", args);
+
+diagram.events.detach("CustomEvent");
+~~~
+
+## Events aufrufen {#calling-events}
+
+Um Events aufzurufen, verwenden Sie die Methode `diagram.events.fire()`.
+
+~~~jsx
+diagram.events.fire("CustomEvent", args);
+// wobei args ein Array von Argumenten ist
+~~~
+
+Normalerweise werden Events automatisch aufgerufen, und Sie müssen diese Methode nicht verwenden.
+
+## Liste der unterstützten Events {#list-of-supported-events}
+
+### Diagram-Events
+
+Sehen Sie sich die vollständige Liste der Diagram-API-Events in der [API-Referenz](api/diagram/api_overview.md#diagram-events) an.
+
+### Editor-Events
+
+Die Liste der Diagram-Editor-API-Events finden Sie im [API-Abschnitt](api/diagram_editor/editor/events/overview.md).
+
+:::note
+Zusätzlich zu den Events des Diagram-Editors können Sie auch [Events des Diagram-Objekts](api/diagram/api_overview.md#diagram-events) verwenden, während Sie in der Editor-Ansicht arbeiten. Zum Beispiel:
+:::
+
+~~~jsx {6-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ controls: { autoLayout: false }
+});
+editor.parse(data);
+
+editor.diagram.events.on("ShapeClick", (id) => {
+ alert("You've just clicked an item with id=" + id);
+});
+~~~
+
+Diese Methode können Sie auch verwenden, wenn Sie die unten aufgeführten Events anwenden möchten.
+
+### CellManager-Events
+
+Sehen Sie sich die vollständige Liste der CellManager-API-Events in der [API-Referenz](/api/cell_manager/#events) an.
+
+### DataCollection-Events
+
+Sehen Sie sich die vollständige Liste der DataCollection-API-Events in der [API-Referenz](/api/data_collection/#events) an.
+
+### InlineEditor-Events
+
+Sehen Sie sich die vollständige Liste der InlineEditor-API-Events in der [API-Referenz](/api/inline_editor/#events) an.
+
+### Selection-Events
+
+Sehen Sie sich die vollständige Liste der Selection-API-Events in der [API-Referenz](/api/selection/#events) an.
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/inline_editing.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/inline_editing.md
new file mode 100644
index 000000000..8e9a68eee
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/inline_editing.md
@@ -0,0 +1,121 @@
+---
+sidebar_label: Inline-Bearbeitung
+title: Inline-Bearbeitung
+description: Sie können mehr über die Inline-Bearbeitung in der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren. Durchsuchen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter.
+---
+
+# Inline-Bearbeitung
+
+Mit der Inline-Bearbeitung können Sie den Textinhalt eines Diagrammelements durch Doppelklicken bearbeiten. Sie können die Elemente sowohl im Diagramm als auch im Editor bearbeiten.
+
+Die Inline-Bearbeitung für Lines ist nur im Standardmodus von Diagram aktiviert.
+
+
+
+:::note
+Die Inline-Bearbeitung funktioniert nicht für benutzerdefinierte Shapes.
+:::
+
+Die Funktion ist standardmäßig aktiviert. Um die Inline-Bearbeitung zu deaktivieren, setzen Sie die Eigenschaft `editable` des Elements, das Sie schreibgeschützt machen möchten, auf *false*.
+
+Nachfolgend finden Sie Beispiele für das Deaktivieren der Inline-Bearbeitung für Diagrammelemente:
+
+#### Line-Titel {#line-titles}
+
+~~~jsx title="Deaktivieren der Möglichkeit, den Textinhalt einer Line zu bearbeiten" {18}
+const data = [
+ // Konfigurieren der Shapes
+ { "id": "shape_1", "type": "start", "x": 0, "text": "Start" },
+ { "id": "shape_2", "type": "process", "x": 400, "text": "Step 1" },
+ // Konfigurieren einer Line
+ {
+ "id": "line_1",
+ "type": "line",
+ "from": "shape_1",
+ "to": "shape_2"
+ },
+ // Konfigurieren eines Line-Titels
+ {
+ "id": "title_1",
+ "type": "lineTitle",
+ "parent": "line_1",
+ "text": "Some text",
+ "editable": false // deaktiviert die Inline-Bearbeitung des Textelements einer Line
+ }
+];
+~~~
+
+#### Shapes
+
+~~~jsx title="Deaktivieren der Möglichkeit, den Textinhalt eines Shapes zu bearbeiten"
+const data = [
+ { "id": 1, "x": 280, "y": 0, "text": "Start", "type": "start", "editable": false}
+];
+~~~
+
+#### Groups
+
+~~~jsx title="Deaktivieren der Möglichkeit, den Textinhalt des Headers einer Group zu bearbeiten"
+const data = [
+ {
+ "type": "$group",
+ "id": 1,
+ "width": 400,
+ "height": 200,
+ "x": 0,
+ "y": 0,
+ "header": {
+ "text": "Group 1",
+ "editable": false
+ }
+ }
+];
+~~~
+
+#### Swimlanes
+
+~~~jsx title="Konfigurieren der Möglichkeit, den Textinhalt des Headers und der Subheader einer Swimlane zu bearbeiten"
+const data = [
+ {
+ "id": "main",
+ "type": "$swimlane",
+ "height": 730,
+ "width": 1195,
+ "header": {
+ "closable": true,
+ "text": "Waterfall diagram template",
+ // deaktiviert die Inline-Bearbeitung für den Header
+ "editable": false
+ },
+ "layout": [
+ [1, 2, 3]
+ ],
+ "subHeaderCols": {
+ "headers": [
+ { "text": "September", "fill": "rgba(243, 92, 79, 0.4)" },
+ // aktiviert die Inline-Bearbeitung für den Subheader
+ { "text": "October", "fill": "rgba(155, 96, 248, 0.4)", "editable": true },
+ { "text": "November", "fill": "rgba(255, 174, 18, 0.4)" }
+ ],
+ // deaktiviert die Inline-Bearbeitung für alle Subheader
+ "editable": false
+ }
+ }
+];
+~~~
+
+## Tastenkombinationen {#keyboard-shortcuts}
+
+Der Inline-Text-Editor unterstützt die folgenden Tastenkombinationen:
+
+| Hotkey | Beschreibung |
+|--------|-------------|
+| `Ctrl+Enter` (Win), `CMD+Enter` (macOS) | Öffnet den Inline-Text-Editor für das ausgewählte Element. Funktioniert als Alternative zum Doppelklicken. Gilt nur für Shapes mit einer bearbeitbaren Eigenschaft `text`. |
+| `Shift+Enter` | Fügt einen Zeilenumbruch (`\n`) ein, während der Editor geöffnet bleibt. |
+| `Delete` (`Del`), `Backspace` | Löscht das Zeichen an der Cursorposition. Löscht nicht das Element selbst. |
+| `Enter` | Bestätigt den aktuellen Text und schließt den Editor. Da der Editor Änderungen dynamisch während der Eingabe übernimmt, markiert das Drücken von Enter den erfolgreichen Abschluss der Bearbeitung. |
+| `Escape` | Verwirft alle nicht gespeicherten Änderungen und schließt den Editor, wobei der Text des Elements auf den Wert vor Beginn der Bearbeitung zurückgesetzt wird. |
+
+## API-Events
+
+Die Bibliothek enthält eine Reihe hilfreicher [API-Events](/api/inline_editor/), mit denen Sie das Verhalten des Editors beim Öffnen/Schließen steuern sowie den Bearbeitungsprozess des Textes der Elemente kontrollieren können.
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integrations/angular_integration.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integrations/angular_integration.md
new file mode 100644
index 000000000..e9737735f
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integrations/angular_integration.md
@@ -0,0 +1,269 @@
+---
+sidebar_label: Integration mit Angular
+title: Integration mit Angular
+description: In der Dokumentation der DHTMLX-JavaScript-Diagram-Bibliothek erfahren Sie mehr über die Integration mit Angular. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-tägige Testversion von DHTMLX Diagram herunter.
+---
+
+# Integration mit Angular
+
+:::tip
+Sie sollten mit den grundlegenden Konzepten und Mustern von **Angular** vertraut sein, um diese Dokumentation zu nutzen. Um Ihr Wissen aufzufrischen, lesen Sie bitte die [**Angular-Dokumentation**](https://angular.dev/overview).
+:::
+
+Der DHTMLX Diagram Editor ist mit **Angular** kompatibel. Wir haben Codebeispiele vorbereitet, die zeigen, wie Sie den DHTMLX Diagram Editor mit **Angular** verwenden können. Weitere Informationen finden Sie im entsprechenden [**Beispiel auf GitHub**](https://github.com/DHTMLX/angular-diagram-demo).
+
+## Erstellen eines Projekts {#creating-a-project}
+
+:::info
+Bevor Sie ein neues Projekt erstellen, installieren Sie [**Angular CLI**](https://angular.dev/tools/cli) und [**Node.js**](https://nodejs.org/en/).
+:::
+
+Erstellen Sie mit der Angular CLI ein neues Projekt **my-angular-diagram-app**. Führen Sie dazu den folgenden Befehl aus:
+
+~~~json
+ng new my-angular-diagram-app
+~~~
+
+:::note
+Wenn Sie dieser Anleitung folgen möchten, deaktivieren Sie beim Erstellen einer neuen Angular-App das serverseitige Rendering (SSR) und die statische Website-Generierung (SSG/Prerendering)!
+:::
+
+Der obige Befehl installiert alle erforderlichen Tools, sodass Sie keine weiteren Befehle ausführen müssen.
+
+### Installation der Abhängigkeiten {#installation-of-dependencies}
+
+Wechseln Sie anschließend in das App-Verzeichnis:
+
+~~~json
+cd my-angular-diagram-app
+~~~
+
+Installieren Sie die Abhängigkeiten und starten Sie den Dev-Server. Verwenden Sie dazu den Paketmanager [**yarn**](https://yarnpkg.com/):
+
+~~~json
+yarn
+yarn start
+~~~
+
+Die App sollte nun auf einem localhost laufen (zum Beispiel unter `http://localhost:3000`).
+
+## Erstellen des Diagram Editors {#creating-diagram-editor}
+
+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 {#step-1-package-installation}
+
+Laden Sie das [**Diagram-Testpaket**](guides/diagram_editor/initialization.md#installing-diagram-editor-via-npm-or-yarn) 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 {#step-2-component-creation}
+
+Jetzt müssen Sie eine Angular-Komponente erstellen, um den Diagram Editor in die Anwendung einzubinden. Erstellen Sie den Ordner **diagram-editor** im Verzeichnis **src/app/**, fügen Sie darin eine neue Datei hinzu und benennen Sie sie **diagram-editor.component.ts**. Führen Sie anschließend die unten beschriebenen Schritte aus.
+
+#### Quelldateien importieren {#import-source-files}
+
+Öffnen Sie die Datei 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, sieht der importierte Pfad folgendermaßen aus:
+
+~~~jsx
+import { DiagramEditor } from 'dhx-diagram-package';
+~~~
+
+- wenn Sie die Testversion von Diagram verwenden, geben Sie den folgenden Pfad an:
+
+~~~jsx
+import { DiagramEditor } from '@dhx/trial-diagram';
+~~~
+
+In diesem Tutorial erfahren Sie, wie Sie die **Testversion** von Diagram konfigurieren.
+
+#### Container festlegen und Diagram Editor initialisieren {#set-the-container-and-initialize-diagram-editor}
+
+Um den Diagram Editor auf der Seite anzuzeigen, müssen Sie den Container festlegen, in dem die Komponente gerendert wird, und den Diagram Editor mit dem entsprechenden Konstruktor initialisieren:
+
+~~~jsx {1,9,13-14,19-20} title="diagram-editor.component.ts"
+import { DiagramEditor } from "@dhx/trial-diagram";
+import { IDefaultEditorConfig } from "@dhx/trial-diagram/codebase/types/ts-diagram-editor";
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ encapsulation: ViewEncapsulation.None,
+ selector: 'diagram-editor', // ein Vorlagenname, der in der Datei "app.component.ts" als Other content
+
+
+~~~
+
+- Festlegen eines Themes für ein beliebiges HTML-Element, z. B. für das Toolbar-Steuerelement
+
+~~~jsx {10-11}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: {
+ css: "toolbar"
+ }
+ }
+});
+
+const toolbarEl = document.querySelector(".toolbar");
+dhx.setTheme("dark", toolbarEl);
+~~~
+
+**Verwandtes Beispiel:** [Diagram Editor. Standardmodus. Basis- und benutzerdefinierte Themes](https://snippet.dhtmlx.com/9twmlfus)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/touch_support.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/touch_support.md
new file mode 100644
index 000000000..45a49ca55
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/touch_support.md
@@ -0,0 +1,20 @@
+---
+sidebar_label: Touch-Unterstützung
+title: Touch-Unterstützung
+description: In der Dokumentation der DHTMLX-JavaScript-Diagram-Bibliothek erfahren Sie mehr über die Touch-Unterstützung. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter.
+---
+
+# Touch-Unterstützung {#touch-support}
+
+
+
+Seit Version 4.2 bietet die DHTMLX-Diagram-Bibliothek integrierte Touch-Unterstützung, die sofort einsatzbereit ist.
+
+Wenn Sie mit Anwendungen durch Berühren des Bildschirms interagieren, funktioniert ein Tap genauso wie ein Mausklick.
+Daher funktionieren die Click-Events (die beim Klicken oder Doppelklicken eines Elements ausgelöst werden) auch weiterhin auf Touchscreen-Geräten. Beachten Sie, dass die Mouseover-Events nicht ausgelöst werden.
+
+Die Touch-Unterstützung ermöglicht die Erkennung der folgenden Touch-Gesten:
+
+- **Doppel-Tap** – zum Bearbeiten des Textes einer Form/Gruppe/Swimlane; zum Erstellen und Bearbeiten des Textes einer Verbindungslinie
+- **Drücken, Halten und Ziehen** – zum Aufrufen von `blockSelection` und zum Auswählen mehrerer Elemente
+- **Ziehen** – zum Ziehen einer Form/Gruppe/Swimlane; zum Ziehen von Form, Text, Gruppe oder Swimlane aus dem linken Bereich des Editors
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/using_typescript.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/using_typescript.md
new file mode 100644
index 000000000..1d1533bcc
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/using_typescript.md
@@ -0,0 +1,23 @@
+---
+sidebar_label: TypeScript-Unterstützung
+title: TypeScript-Unterstützung
+description: In der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren Sie, wie Sie Diagram mit TypeScript verwenden. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter.
+---
+
+# TypeScript-Unterstützung {#typescript-support}
+
+Ab v3.1 bietet die Bibliothek von DHTMLX Diagram die Möglichkeit, TypeScript-Definitionen zu verwenden. Die integrierte Unterstützung von TypeScript sollte ohne zusätzliche Konfiguration funktionieren.
+
+:::note
+Sie können die Funktionalität direkt in unserem Snippet-Tool ausprobieren.
+:::
+
+
+
+## Vorteile der Verwendung von TypeScript {#advantages-of-using-typescript}
+
+Warum empfehlen wir die Verwendung von DHTMLX Diagram mit TypeScript?
+
+Der größte Vorteil von TypeScript besteht darin, dass Sie genau wissen, welchen Datentyp die APIs der DHTMLX Diagram-Bibliothek erwarten.
+
+Die Art der Anwendungsentwicklung wird intelligenter, da die Typprüfung zusammen mit der Autovervollständigung hilft, mögliche Fehler zu vermeiden und Code zu schreiben, ohne ständig die Dokumentation zurate zu ziehen.
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/line_titles/configuration_properties.md b/i18n/de/docusaurus-plugin-content-docs/current/line_titles/configuration_properties.md
new file mode 100644
index 000000000..d364009da
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/line_titles/configuration_properties.md
@@ -0,0 +1,79 @@
+---
+sidebar_label: LineTitle-Eigenschaften
+title: LineTitle-Eigenschaften
+description: In der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren Sie mehr über die LineTitle-Eigenschaften. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Code-Beispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter.
+---
+
+# LineTitle-Eigenschaften {#linetitle-properties}
+
+:::note
+Geben Sie Farbwerte im HEX-Format an.
+:::
+
+### Verwendung {#usage}
+
+~~~jsx
+const data = [
+ // LineTitle-Objekt
+ {
+ type: "lineTitle",
+ id?: string | number,
+ text: string,
+ parent: string | number,
+
+ distance?: number, // standardmäßig 50
+ autoPosition?: boolean, // standardmäßig true
+ editable?: boolean, // standardmäßig true
+ fixed?: boolean, // standardmäßig false
+ hidden?: boolean, // standardmäßig false
+
+ fill?: string,
+ fontSize?: string | number, // standardmäßig 14
+ lineHeight?: string | number, // standardmäßig 14
+ fontStyle?: "normal" | "italic" | "oblique", // standardmäßig "normal"
+ fontColor?: string, // standardmäßig "#4C4C4C"
+ fontWeight?: string, // standardmäßig "500"
+ textAlign?: "center" | "left" | "right" // standardmäßig "center"
+ },
+ // weitere Linienobjekte
+];
+~~~
+
+### Beschreibung {#description}
+
+Jedes LineTitle-Objekt kann die folgenden Eigenschaften enthalten:
+
+- `type` - (erforderlich) der Typ des Elements, setzen Sie ihn auf `"lineTitle"`
+- `id` - (optional) die ID des LineTitle, standardmäßig automatisch generiert
+- `parent` - (erforderlich) die ID der Linie, für die der Titel angezeigt werden soll
+- `text` - (erforderlich) der Text des LineTitle
+- `distance` - (optional) legt den Abstand zum Anzeigepunkt des Titels auf der Linie im Bereich von 0 bis 100 fest, standardmäßig 50
+- `autoPosition` - (optional) legt die Richtung des Textes fest: bei *true* entspricht die Richtung des Textes der Richtung der Linie, bei *false* ist die Richtung des Textes immer horizontal; standardmäßig *true*
+- `editable` - (optional) aktiviert/deaktiviert die Möglichkeit, den Text des Elements durch Doppelklick zu bearbeiten, standardmäßig *true*
+- `fixed` - (optional) aktiviert/deaktiviert die Möglichkeit, den Text des Elements mit dem angegebenen Wert von `distance` zu fixieren, standardmäßig *false*
+- `hidden` - (optional) legt fest, ob der Text ausgeblendet wird, standardmäßig *false*
+- `fill` - (optional) die Hintergrundfarbe des LineTitle-Elements
+- `fontSize` - (optional) die Schriftgröße, standardmäßig 14
+- `lineHeight` - (optional) die Höhe der Textzeile, standardmäßig 14
+- `fontStyle` - (optional) der Stil der Textschrift: `"normal"` (Standard), `"italic"`, `"oblique"`
+- `fontColor` - (optional) die Farbe der Textschrift, standardmäßig "#4C4C4C"
+- `fontWeight` - (optional) die Schriftstärke des Textes, mögliche Werte sind: `"normal"`, `"bold"`, `"bolder"`, `"lighter"`; Werte `"100"`-`"900"`, wobei `"400"` normal entspricht und `"600"`+ die fetteste Schrift ist; standardmäßig `"500"`
+- `textAlign` - (optional) die Ausrichtung des Textes: `"center"` (Standard), `"left"`, `"right"`
+
+### Beispiel {#example}
+
+~~~jsx
+const data = [
+ // Formen konfigurieren
+ { type: "rectangle", id: "shape_1" },
+ { type: "rectangle", id: "shape_2", x: 400 },
+
+ // Linien konfigurieren
+ { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
+
+ // LineTitles konfigurieren
+ { type: "lineTitle", id: "title_1", parent: "line_1", text: "Some text" }
+];
+~~~
+
+**Verwandter Artikel**: [LineTitles konfigurieren](/line_titles/)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/line_titles/index.md b/i18n/de/docusaurus-plugin-content-docs/current/line_titles/index.md
new file mode 100644
index 000000000..09a78d5ab
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/line_titles/index.md
@@ -0,0 +1,106 @@
+---
+sidebar_label: LineTitles
+title: LineTitles
+description: In der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren Sie mehr über Linien. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Code-Beispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter.
+---
+
+# LineTitles {#linetitles}
+
+## Übersicht {#overview}
+
+LineTitles legen den Text für Linien fest, die Formen verbinden. Sie können einer Linie sowohl im Diagram als auch im Editor Text hinzufügen, indem Sie auf die Linie doppelklicken, oder indem Sie die Symbolleiste der Linie im Editor verwenden (klicken Sie auf eine Linie, um sie zu aktivieren). Sie können LineTitles sowohl im Diagram als auch im Editor auch per Doppelklick bearbeiten.
+
+Eine weitere Möglichkeit, einer Linie Text hinzuzufügen und ihn zu bearbeiten, besteht darin, einen [Datensatz](guides/loading_data.md#preparing-data-to-load) vorzubereiten.
+
+:::note
+LineTitles sind nur im Standardmodus von Diagram/Diagram Editor verfügbar (type: `"default"`).
+:::
+
+
+
+## LineTitles erstellen {#creating-line-titles}
+
+Um einen LineTitle zu erstellen, müssen Sie `type: "lineTitle"` innerhalb des LineTitle-Objekts angeben, während Sie einen Datensatz zum Laden in das Diagram vorbereiten:
+
+~~~jsx {5-6}
+const data = [
+ { type: "rectangle", id: "shape_1" },
+ { type: "rectangle", id: "shape_2", x: 400 },
+ { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
+ // LineTitle konfigurieren
+ { type: "lineTitle", id: "title_1", parent: "line_1", text: "Some text" }
+];
+
+// Diagram initialisieren
+const diagram = new dhx.Diagram("diagram_container");
+diagram.data.parse(data);
+~~~
+
+### Eigenschaften eines LineTitle-Objekts {#properties-of-a-line-title-object}
+
+Sehen Sie sich die [vollständige Liste der Konfigurationseigenschaften eines LineTitle-Objekts](line_titles/configuration_properties.md) an, um das Erscheinungsbild anzupassen sowie die Positionierung von LineTitles zu konfigurieren.
+
+## Arbeiten mit LineTitles {#working-with-line-titles}
+
+Sie können LineTitles über die [DataCollection-API](/api/data_collection/) bearbeiten.
+
+:::note
+Die folgenden Beispiele eignen sich sowohl für Diagram als auch für Diagram Editor.
+:::
+
+### LineTitle hinzufügen {#adding-a-line-title}
+
+Sie können einen LineTitle über die Methode [`add`](api/data_collection/add_method.md) von DataCollection hinzufügen:
+
+~~~jsx {5-10}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+editor.diagram.data.add({
+ type: "lineTitle",
+ parent: "line_1",
+ text: "Some text",
+ fill: "#BCE4CE"
+});
+~~~
+
+Übergeben Sie ein Objekt mit der Konfiguration eines neuen LineTitle als Parameter der Methode.
+
+:::note
+Sehen Sie sich die [vollständige Liste der Konfigurationseigenschaften eines LineTitle-Objekts](line_titles/configuration_properties.md) an.
+:::
+
+### Hinzufügen von LineTitles blockieren {#blocking-line-titles-adding}
+
+Wenn Sie das Hinzufügen von LineTitles verhindern müssen, können Sie das Event [`beforeAdd`](api/data_collection/beforeadd_event.md) von DataCollection verwenden:
+
+~~~jsx {5}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+editor.diagram.data.events.on("beforeAdd", (item) => item.type !== "lineTitle");
+~~~
+
+### Über LineTitles iterieren {#iterating-over-line-titles}
+
+Mit Hilfe der Methode [`eachChild()`](api/data_collection/eachchild_method.md) von DataCollection können Sie über LineTitles als untergeordnete Elemente von Linien iterieren:
+
+~~~jsx {7-9,11-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse([
+ { type: "rectangle", id: "shape_1" },
+ { type: "rectangle", id: "shape_2", x: 400 },
+ { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
+ { type: "lineTitle", id: "title_1", parent: "line_1", text: "Text 1", distance: 50 },
+ { type: "lineTitle", id: "title_2", parent: "line_1", text: "Text 2", distance: 70 }
+]);
+editor.diagram.data.eachChild("line_1", (child) => {
+ console.log(child.id); // => "title_1", "title_2"
+});
+~~~
+
+Übergeben Sie die ID der Linie, deren Titel iteriert werden sollen, als ersten Parameter. Im obigen Beispiel wird die Callback-Funktion auf jedes untergeordnete Element der angegebenen Linie angewendet und gibt deren IDs zurück.
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/lines/configuration_properties.md b/i18n/de/docusaurus-plugin-content-docs/current/lines/configuration_properties.md
new file mode 100644
index 000000000..18c434866
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/lines/configuration_properties.md
@@ -0,0 +1,180 @@
+---
+sidebar_label: Linieneigenschaften
+title: Linieneigenschaften
+description: In der Dokumentation der DHTMLX-JavaScript-Diagram-Bibliothek erfahren Sie mehr über die Linieneigenschaften. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Code-Beispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter.
+---
+
+# Linieneigenschaften
+
+:::note
+Geben Sie Farbwerte im HEX-Format an.
+:::
+
+## Allgemeine Eigenschaften {#common-properties}
+
+### Verwendung {#usage}
+
+~~~jsx
+const data = [
+ // Linienobjekt
+ {
+ type: "line" | "dash",
+ id?: string | number,
+ from?: string | number,
+ to?: string | number,
+ connectType?: "straight" | "elbow" | "curved",
+ strokeWidth?: number, // standardmäßig 2
+ stroke?: string
+ },
+ // weitere Linienobjekte
+]
+~~~
+
+### Beschreibung {#description}
+
+Jedes Linienobjekt kann die folgenden Eigenschaften enthalten:
+
+- `type` - (erforderlich) der Typ der Verbindungslinie: "*line*" oder "*dash*"
+- `id` - (optional) die ID eines Verbinders
+- `from` - (optional) die ID der übergeordneten Form
+- `to` - (optional) die ID der untergeordneten Form
+- `connectType` - (optional) der Verbindungstyp der Linie: ["straight"](/lines/#lines-in-the-default-mode), ["elbow"](/lines/#lines-in-the-org-chart-mode) (der Standardtyp im Standard-/Organigramm-Modus), ["curved"](/lines/#lines-in-the-mindmap-mode) (der Standardtyp im Mindmap-Modus)
+- `strokeWidth` - (optional) die Breite der Linie, standardmäßig 2
+- `stroke` - (optional) die Farbe der Linie; standardmäßig "#2198F3" im Standardmodus und "#CCC" im Organigramm-/Mindmap-Modus
+
+## Eigenschaften speziell für den Standardmodus {#properties-specific-for-the-default-mode}
+
+### Verwendung {#usage-1}
+
+~~~jsx
+const data = [
+ // Linienobjekt
+ {
+ // ... allgemeine Eigenschaften
+ forwardArrow?: string, // standardmäßig "filled"
+ backArrow?: string, // standardmäßig "filled"
+ fromSide?: "top" | "bottom" | "left" | "right" | "center",
+ toSide?: "top" | "bottom" | "left" | "right" | "center",
+ cornersRadius?: number,
+ customGap?: number,
+ points?: [
+ { x: number, y: number, custom?: boolean },
+ // weitere Punktobjekte
+ ]
+ },
+ // weitere Linienobjekte
+]
+~~~
+
+### Beschreibung {#description-1}
+
+Bei der Vorbereitung eines Datensatzes für Linien, die im Standardmodus in das Diagramm geladen werden, können Sie dem Konfigurationsobjekt einer Linie die folgenden Eigenschaften hinzufügen:
+
+- `forwardArrow` - (optional) legt einen Vorwärtspfeil-Verbinder fest und definiert den Pfeiltyp (standardmäßig `"filled"`)
+- `backArrow` - (optional) legt einen Rückwärtspfeil-Verbinder fest und definiert den Pfeiltyp (standardmäßig `"filled"`)
+- `fromSide` - (optional) die Seite der Form, von der die Verbindung ausgeht ("*top*", "*bottom*", "*left*","*right*", "*center*")
+- `toSide` - (optional) die Seite der Form, an der eine andere Form angebunden wird ("*top*", "*bottom*", "*left*", "*right*", "*center*")
+- `cornersRadius` - (optional) der Radius der abgerundeten Ecken eines Verbinders
+- `customGap` - (optional) legt den Abstand von der Form zur rechtwinkligen Biegung einer Verbindungslinie fest
+- `points` - (optional) legt ein Array mit Punktobjekten für eine Linie fest. Jedes Objekt enthält die folgenden Eigenschaften:
+ - `x` - (erforderlich) die x-Koordinate des Punkts
+ - `y` - (erforderlich) die y-Koordinate des Punkts
+ - `custom` - (optional) legt fest, ob der Punkt fixiert ist. Wenn *true*, kann die Position des Punkts nur nach einer Interaktion mit ihm geändert werden
+
+### Beispiel {#example}
+
+~~~jsx
+const data = [
+ // Formen konfigurieren
+ { "id": 1, "x": 200, "y": 0, "text": "Start", "type": "start" },
+ { "id": 2, "x": 200, "y": 320, "text": "Call Client and \n set-up Appointment", "type": "process" },
+ // Linien konfigurieren
+ {
+ "type": "line",
+ "stroke": "#0AB169",
+ "connectType": "straight",
+ "from": 1,
+ "to": 2,
+ "fromSide": "bottom",
+ "toSide": "top",
+ "forwardArrow": "filled"
+ }
+];
+~~~
+
+## Eigenschaften speziell für Links im PERT-Modus {#properties-specific-for-links-in-the-pert-mode}
+
+### Verwendung {#usage-2}
+
+~~~jsx
+const dataset = {
+ data: [...], // ein Array von Formen (Aufgaben, Meilensteine, Projekte)
+ links: [
+ // Linkobjekt
+ {
+ id?: string | number,
+ source: string | number,
+ target: string | number
+ },
+ // weitere Linkobjekte
+ ]
+}
+~~~
+
+### Beschreibung {#description-2}
+
+Bei der Vorbereitung eines Datensatzes für Links, die im PERT-Modus in das Diagramm geladen werden, können Sie dem Konfigurationsobjekt eines Links die folgenden Eigenschaften hinzufügen:
+
+- `id` - (optional) die ID eines Linkverbinders
+- `source` - (erforderlich) die ID einer Aufgabe, von der der Link ausgeht
+- `target` - (erforderlich) die ID einer Aufgabe, bei der der Link endet
+
+:::info Wichtig
+Beachten Sie, dass im PERT-Diagramm nur Links vom `type: "0"` ("finish" -> "start") unterstützt werden. Alle anderen [im DHTMLX-Gantt-Diagramm verwendeten Linktypen](https://docs.dhtmlx.com/gantt/desktop__link_properties.html) werden ebenfalls als `type: "0"` verarbeitet.
+:::
+
+:::tip
+Beachten Sie, dass, da die IDs der Elemente in der Datensammlung von Diagram eindeutig sein müssen, beim Laden von Daten oder beim Hinzufügen eines neuen Links das Präfix `$link` an die vorhandene ID eines Links angehängt wird.
+
+Zum Beispiel:
+
+~~~jsx
+{
+ data: [...],
+ links: [
+ { id: "1" }, // wird im Diagramm als "$link:1" verfügbar sein
+ ]
+}
+
+// diagram.data.getItem("$link:1");
+~~~
+:::
+
+### Beispiel {#example-1}
+
+~~~jsx {11-16}
+const dataset = {
+ data: [
+ // Projektform konfigurieren
+ { id: "1", text: "Project #1", type: "project", parent: null },
+ // Aufgabenformen konfigurieren
+ { id: "1.1", text: "Task #1", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+ { id: "1.2", text: "Task #2", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+ { id: "2.1", text: "Task #3", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+ { id: "2.2", text: "Task #4", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 }
+ ],
+ links: [
+ // Linkobjekte konfigurieren
+ { id: "line-1", source: "1.1", target: "1.2" },
+ { id: "line-2", source: "1.2", target: "2.1" },
+ { id: "line-3", source: "2.1", target: "2.2" }
+ ]
+};
+~~~
+
+**Changelog**:
+
+- Der Verbindertyp `links`, der im PERT-Modus von Diagram verwendet wird, wurde in v6.1 hinzugefügt
+- Die Eigenschaft `title` des `line`-Objekts ist seit v6.0 veraltet
+
+**Verwandter Artikel**: [Konfigurieren von Linien](/lines/)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/lines/index.md b/i18n/de/docusaurus-plugin-content-docs/current/lines/index.md
new file mode 100644
index 000000000..f847716e4
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/lines/index.md
@@ -0,0 +1,132 @@
+---
+sidebar_label: Linien
+title: Linien
+description: In der Dokumentation der DHTMLX-JavaScript-Diagram-Bibliothek erfahren Sie mehr über Linien. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Code-Beispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter.
+---
+
+# Linien
+
+## Übersicht {#overview}
+
+Das Erscheinungsbild der Linien, die Formen verbinden, wird durch den Modus bestimmt, in dem Sie ein Diagramm initialisieren: [Standard](#lines-in-the-default-mode), [Organigramm](#lines-in-the-org-chart-mode), [Mindmap](#lines-in-the-mindmap-mode) oder [PERT](#links-in-the-pert-mode).
+
+### Linien im Standardmodus {#lines-in-the-default-mode}
+
+Im Standardmodus von Diagram können verschiedene Formen durch ["straight" (standardmäßig) oder "elbow"](lines/configuration_properties.md)-Linien in der erforderlichen Reihenfolge verbunden werden, um ein Schema eines bestimmten Prozesses zu erstellen.
+
+Um einer Linie im Standardmodus von Diagram/Diagram Editor Text hinzuzufügen, verwenden Sie die Eigenschaft `text` des Objekts [lineTitle](/line_titles/).
+
+
+
+### Linien im Organigramm-Modus {#lines-in-the-org-chart-mode}
+
+Der Organigramm-Modus von Diagram stellt ein Organigramm dar, das eine Reihe von Formen enthält, die durch ["elbow"-Linien](lines/configuration_properties.md) in hierarchischer Reihenfolge verbunden sind.
+
+
+
+Sie können die vertikale Richtung der Verbindung von Formen für die übergeordnete Form über das Konfigurationsattribut `dir: "vertical"` des Formobjekts festlegen.
+
+### Linien im Mindmap-Modus {#lines-in-the-mindmap-mode}
+
+Der Mindmap-Modus von Diagram dient zur Darstellung einer weiteren Art von hierarchischem Diagramm. Die Formen werden durch ["curved"-Linien](lines/configuration_properties.md) verbunden und um eine zentrale Form herum angeordnet.
+
+
+
+Der Modus ist nützlich, wenn Sie ein zentrales Thema oder eine zentrale Idee darstellen möchten, die von den Zweigen der Unterthemen umgeben ist.
+
+Die Anordnung der untergeordneten Formen relativ zur Wurzelform wird automatisch durch den Hauptalgorithmus festgelegt.
+Um die Standardrichtung der untergeordneten Formen zu ändern, verwenden Sie die Konfigurationseigenschaft [`typeConfig`](api/diagram/typeconfig_property.md) bei der Initialisierung des Diagramms.
+
+### Links im PERT-Modus {#links-in-the-pert-mode}
+
+Der PERT-Modus von Diagram dient zur Darstellung von Sequenzen aus Aufgaben und Projekten sowie der Verbindungen zwischen ihnen. Formen der Typen `"task"`, `"milestone"` und `"project"` werden durch [`"links"`-Verbinder](lines/configuration_properties.md#properties-specific-for-links-in-the-pert-mode) verbunden.
+
+
+
+
+## Festlegen von Verbindungen zwischen Formen {#setting-connections-between-shapes}
+
+Um Formen in Diagram zu verbinden, können Sie eine der folgenden zwei Methoden verwenden:
+
+- **Verwendung von Linienobjekten**
+
+Sie müssen separate Objekte angeben, die die Logik der Formverbindung beschreiben. Zum Beispiel:
+
+~~~jsx
+const data = [
+ // Formen
+ { id: "1", text: "Chairman & CEO" },
+ { id: "2", text: "Manager" },
+ { id: "3", text: "Technical Director" },
+ { id: "4", text: "Manager" },
+ { id: "5", text: "Technical Director" },
+ // Verbinder
+ { "id": "1-2", "from": "1", "to": "2", "type": "dash" },
+ { "id": "1-3", "from": "1", "to": "3", "type": "dash" },
+ { "id": "1-4", "from": "1", "to": "4", "type": "line" },
+ { "id": "1-5", "from": "1", "to": "5", "type": "line" }
+];
+~~~
+
+Die Eigenschaft `type` im Linienobjekt ermöglicht es Ihnen, für jede Linie einen individuellen Typ festzulegen.
+
+:::note
+Siehe [die vollständige Liste der Konfigurationseigenschaften eines Linienobjekts](lines/configuration_properties.md).
+:::
+
+- **Verwendung des Attributs `"parent"`**
+
+:::note
+Diese Methode funktioniert nicht im Standardmodus von Diagram/Diagram Editor.
+:::
+
+Sie können die Eigenschaft `parent` im Konfigurationsobjekt der Form angeben und die ID der übergeordneten Form als Wert festlegen:
+
+~~~jsx
+const data = [
+ // Formen
+ { id: "1", text: "Chairman & CEO" },
+ { id: "2", text: "Manager", parent: "1" },
+ { id: "3", text: "Technical Director", parent: "1" },
+ { id: "4", text: "Manager", parent: "1" },
+ { id: "5", text: "Technical Director", parent: "1" }
+];
+~~~
+
+In diesem Fall haben alle Verbinder denselben Typ.
+
+### Festlegen des Standard-Linientyps {#setting-the-default-line-type}
+
+Sie können über den Parameter `lineType` der Eigenschaft [`lineConfig`](api/diagram/lineconfig_property.md) des Diagram-Konfigurationsobjekts einen gemeinsamen Typ für alle Verbindungslinien des Diagramms festlegen:
+
+~~~jsx
+const diagram = new dhx.Diagram("diagram_container", {
+ type: "default",
+ lineConfig: {
+ lineType: "dash" // "dash" | "line"
+ }
+});
+diagram.data.parse(data);
+~~~
+
+Der Wert des Parameters `lineType` wird angewendet, wenn das [Linienobjekt](lines/configuration_properties.md) die Eigenschaft `type` nicht enthält.
+
+### Festlegen des Verbindungstyps der Linie {#setting-the-connection-type-of-the-line}
+
+Sie können den Verbindungstyp für die Linien des Diagramms über den Parameter `connectType` der Eigenschaft [`lineConfig`](api/diagram/lineconfig_property.md) des Diagram-Konfigurationsobjekts festlegen. Folgende Typen stehen zur Verfügung:
+
+- `"elbow"` (der Standardtyp für den Standard- und den Organigramm-Modus von Diagram)
+- `"straight"`
+- `"curved"` (der Standardtyp für den Mindmap-Modus von Diagram). Beachten Sie, dass der Verbindungslinientyp `"curved"` nur im Mindmap-Modus von Diagram verwendet wird
+
+~~~jsx
+const diagram = new dhx.Diagram("diagram_container", {
+ type: "default",
+ lineConfig: {
+ connectType: "straight" // "elbow" | "straight" für den Standardmodus
+ }
+});
+diagram.data.parse(data);
+~~~
+
+Der Wert des Parameters `connectType` wird angewendet, wenn das [Linienobjekt](lines/configuration_properties.md) die Eigenschaft `connectType` nicht enthält.
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/migration.md b/i18n/de/docusaurus-plugin-content-docs/current/migration.md
new file mode 100644
index 000000000..30e0c591b
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/migration.md
@@ -0,0 +1,612 @@
+---
+sidebar_label: Migration zu neueren Versionen
+title: Migration zu neueren Versionen
+description: Erfahren Sie mehr über die Migration zu neueren Versionen in der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter.
+---
+
+# Migration zu neueren Versionen {#migration-to-newer-versions}
+
+## 5.0 -> 6.0
+
+### Diagram-Editor-Struktur {#diagram-editor-structure}
+
+Die Hauptbestandteile des Diagram Editors wurden umbenannt:
+
+- Linkes Panel -> [Shapebar](guides/diagram_editor/shapebar.md)
+- Rechtes Panel -> [Editbar](guides/diagram_editor/editbar.md) ist [mit einer flexiblen Konfiguration ausgestattet](whats_new.md#new-functionality)
+
+Die Standardstruktur der [Toolbar](guides/diagram_editor/toolbar.md) wurde geändert. Sie wurde ebenfalls in hohem Maße konfigurierbar, sodass Sie auch benutzerdefinierte Toolbar-Elemente hinzufügen können.
+
+### Diagram-Editor-API {#diagram-editor-api}
+
+Das `view`-Objekt wurde eingeführt, um die Panels des Diagram Editors zu konfigurieren:
+
+~~~jsx
+view?: {
+ toolbar?: boolean | obj,
+ shapebar?: boolean | obj,
+ editbar?: boolean | obj
+}
+~~~
+
+Sehen Sie sich die zugehörigen API-Übersichtsleitfäden an, um die neuen Möglichkeiten der Panel-Verwaltung kennenzulernen:
+
+- [View-API-Übersicht](api/diagram_editor/view/api_overview.md)
+- [Toolbar-API-Übersicht](api/diagram_editor/toolbar/api_overview.md)
+- [Shapebar-API-Übersicht](api/diagram_editor/shapebar/api_overview.md)
+- [Editbar-API-Übersicht](api/diagram_editor/editbar/api_overview.md)
+
+#### Veraltete Methoden {#deprecated-methods}
+
+- Die Methode `setViewMode()` des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die Methoden [`show()`](api/diagram_editor/view/methods/show_method.md)/[`hide()`](api/diagram_editor/view/methods/hide_method.md) des `view`-Objekts.
+
+~~~jsx {4} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.setViewMode("preview"); // "preview" oder "edit"
+~~~
+
+~~~jsx {4-5} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.view.hide("shapebar");
+editor.view.hide("editbar");
+~~~
+
+#### Veraltete Eigenschaften {#deprecated-properties}
+
+- Die Eigenschaft `reservedWidth` des Diagram Editors ist veraltet und wird nicht mehr unterstützt.
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ reservedWidth: 150
+});
+~~~
+
+Verwenden Sie stattdessen die folgende Syntax:
+
+~~~jsx title="From v6.0"
+editor.diagram.config.margin.x = 40;
+~~~
+
+- Die Eigenschaft `editMode` des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die entsprechende Eigenschaft des `view`-Objekts ([toolbar](api/diagram_editor/toolbar/api_overview.md), [shapebar](api/diagram_editor/shapebar/api_overview.md), [editbar](api/diagram_editor/editbar/api_overview.md)).
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ editMode: false
+});
+~~~
+
+~~~jsx {2-6} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ view: {
+ toolbar: false,
+ shapebar: false, // nur für den Modus "default"
+ editbar: false
+ }
+});
+~~~
+
+- Die Eigenschaft `controls` des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die Eigenschaft [`items`](api/diagram_editor/toolbar/config/items_property.md) der Konfiguration `view.toolbar`.
+
+~~~jsx {2-4} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ controls: {
+ // ...
+ }
+});
+~~~
+
+~~~jsx {2-6} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ view: {
+ toolbar: {
+ items: []
+ }
+ }
+});
+~~~
+
+- Die Eigenschaft `shapeBarWidth` des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die Eigenschaft [`width`](api/diagram_editor/shapebar/config/width_property.md) der Konfiguration `view.shapebar`.
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeBarWidth: 190
+});
+~~~
+
+~~~jsx {3-7} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ width: 400 // Standardmäßig 300
+ }
+ }
+});
+~~~
+
+- Die Eigenschaft `shapeSections` des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die Eigenschaft [`sections`](api/diagram_editor/shapebar/config/sections_property.md) der Konfiguration `view.shapebar`.
+
+~~~jsx {2-7} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeSections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+});
+~~~
+
+~~~jsx {3-12} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+ }
+ }
+});
+~~~
+
+- Die Eigenschaft `gapPreview` des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die Eigenschaft `gap` des Objekts [`preview`](api/diagram_editor/shapebar/config/preview_property.md) der Konfiguration `view.shapebar`.
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ gapPreview: 10
+});
+~~~
+
+~~~jsx {3-10} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 8
+ }
+ }
+ }
+});
+~~~
+
+- Die Eigenschaft `scalePreview` des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die Eigenschaft `scale` des Objekts [`preview`](api/diagram_editor/shapebar/config/preview_property.md) der Konfiguration `view.shapebar`.
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ gapPreview: 10
+});
+~~~
+
+~~~jsx {3-10} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 8
+ }
+ }
+ }
+});
+~~~
+
+#### Veraltete Events {#deprecated-events}
+
+- Die folgenden Events des Diagram Editors sind veraltet und werden nicht mehr unterstützt, da es keine entsprechenden Schaltflächen in der Toolbar gibt: `resetButton`, `applyButton`, `visibility`, `exportData`, `importData`, `autoLayout`. Stattdessen können Sie das `click`-Event des `toolbar`-Objekts des Diagram Editors abonnieren:
+
+~~~jsx
+editor.toolbar.events.on("click", id => console.log(id));
+~~~
+
+:::note
+Die IDs der [Serviceelemente](guides/diagram_editor/toolbar.md#service-elements) beginnen mit dem Symbol `$`.
+:::
+
+- Das Event `changeGridStep` des Diagram Editors ist veraltet und wird nicht mehr unterstützt.
+
+### Diagram-API {#diagram-api}
+
+- Die Eigenschaft `properties` der Methode [`addShape`](api/diagram/addshape_method.md) ist veraltet und wird nicht mehr verwendet. Die Konfiguration eines benutzerdefinierten Shapes in der Editbar des Editors erfolgt über die Eigenschaft [`properties`](api/diagram_editor/editbar/config/properties_property.md) des Editbar-Panels:
+
+~~~jsx {13-16} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+
+editor.diagram.addShape("network", {
+ template: config => (
+ `${config.title}
+- ${config.text.join("
- ")}
*Die Eigenschaft ist für eine benutzerdefinierte Form nicht verfügbar.* +- `height` - (optional) die Höhe einer Form +- `width` - (optional) die Breite einer Form +- `fixed` - (optional) aktiviert/deaktiviert das Verschieben und die Größenänderung einer Form, standardmäßig *false* +- `hidden` - (optional) legt fest, ob eine Form ausgeblendet wird + +:::note +Die Werte von `height` und `width` werden für eine `"text"`/`"topic"`-Form automatisch abhängig vom Inhalt der Form berechnet. +::: + +## Benutzerdefinierte Eigenschaften {#custom-properties} + +### Verwendung {#usage-1} + +~~~jsx +const data = [ + // Formobjekt + { + // ... allgemeine Eigenschaften + [key: string]?: any, // benutzerdefinierte Eigenschaft + // ... weitere benutzerdefinierte Eigenschaften + }, + // weitere Formobjekte +] +~~~ + +### Beschreibung {#description-1} + +Bei der Vorbereitung eines Datensatzes für eine benutzerdefinierte Form können Sie dem Konfigurationsobjekt einer Form beliebige benutzerdefinierte Eigenschaften hinzufügen: + +- `key` - (optional) eine benutzerdefinierte Eigenschaft für eine benutzerdefinierte Form. Weitere Details finden Sie im Artikel [Benutzerdefinierte Form](shapes/custom_shape.md).
*Verwenden Sie eindeutige Namen für benutzerdefinierte Eigenschaften. Das Überschreiben der internen Eigenschaften des Diagram-Formobjekts ist untersagt, da dies zu einer fehlerhaften Funktion des Diagramms und seines Editors führt.* + +### Beispiel {#example} + +~~~jsx +const data = [ + { + "id": "main", + "name": "Kristin Mccoy", + "post": "Medical director", + "phone": "(405) 555-0128", + "mail": "kmccoy@gmail.com", + "photo": "../img/avatar-01.jpg" + } +]; +~~~ + +## Eigenschaften speziell für den Standardmodus {#properties-specific-for-the-default-mode} + +### Verwendung {#usage-2} + +~~~jsx +const data = [ + // Formobjekt + { + // ... allgemeine Eigenschaften + angle?: number, + + //entweder + preview?: string, + // oder + preview?: { + img?: string, + width?: number | string, + height?: number | string, + gap?: number | string, + scale?: number + } + }, + // weitere Formobjekte +] +~~~ + +### Beschreibung {#description-2} + +Bei der Vorbereitung eines Datensatzes für Formen, die im Standardmodus in das Diagramm geladen werden, können Sie dem Konfigurationsobjekt einer Form die folgenden Eigenschaften hinzufügen: + +- `angle` - (optional) der Rotationswinkel der Form +- `preview` - (optional) entweder ein Pfad zu einem Bild/ein Base64-Bild oder ein Objekt mit Einstellungen, [mit denen sich die in der Shapebar des Editors angezeigte Formvorschau konfigurieren lässt](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes). Als Objekt kann die Eigenschaft eine Reihe optionaler Eigenschaften enthalten: + - `img` - (optional) ein Pfad zu einem Bild oder ein Base64-Bild + - `width` - (optional) die Breite des Bildes + - `height` - (optional) die Höhe des Bildes + - `gap` - (optional) legt den Wert des Attributs `gap` der Eigenschaft [preview](api/diagram_editor/shapebar/config/preview_property.md) für den angegebenen Formtyp fest + - `scale` - (optional) legt den Wert des Attributs `scale` der Eigenschaft [preview](api/diagram_editor/shapebar/config/preview_property.md) für den angegebenen Formtyp fest + :::info + Die Eigenschaft `scale` kann nicht zusammen mit den Eigenschaften `img`, `width`, `height` verwendet werden + ::: + +### Beispiel {#example-1} + +~~~jsx +const data = [ + { id: 1, x: 280, y: 0, text: "Start", type: "start", angle: 10 } +]; +~~~ + +## Eigenschaften speziell für den Organigramm-Modus {#properties-specific-for-the-org-chart-mode} + +### Verwendung {#usage-3} + +~~~jsx +const data = [ + // Formobjekt + { + // ... allgemeine Eigenschaften + parent?: string | number, + dx?: number, + dy?: number, + dir?: string, + open?: boolean, // standardmäßig true + assistant?: boolean, + partner?: boolean, + catchItem?: boolean, + giveItem?: boolean + + }, + // weitere Formobjekte +] +~~~ + +### Beschreibung {#description-3} + +Bei der Vorbereitung eines Datensatzes für Formen, die im Organigramm-Modus in das Diagramm geladen werden, können Sie dem Konfigurationsobjekt einer Form die folgenden Eigenschaften hinzufügen: + +- `parent` - (optional) die ID der übergeordneten Form +- `dx` - (optional) der linke Versatz der Form +- `dy` - (optional) der obere Versatz der Form +- `dir` - (optional) die Richtung der Formverbindung. Um Formen vertikal zu verbinden, setzen Sie das Attribut auf den Wert `"vertical"` +- `open` - (optional) legt fest, ob die untergeordneten Elemente der aktuellen Form angezeigt werden; standardmäßig *true* +- `assistant` - (optional) legt fest, ob die Form ein Assistenzelement für die übergeordnete Form ist +- `partner` - (optional) legt fest, ob die Form ein Partnerelement für die übergeordnete Form ist +- `catchItem` - (optional) legt fest, ob das Element ein sich bewegendes Element aufnehmen kann +- `giveItem` - (optional) legt fest, ob das Element verschoben werden kann + +### Beispiel {#example-2} + +~~~jsx +const data = [ + { + "id": "1", + "text": "item 1", + }, + { + "id": "2", + "text": "item 2", + "parent": "1", + "dir": "vertical" + }, + { + "id": "1.1", + "text": "assistant for 1", + "parent": "1", + "assistant": true + }, + { + "id": "1.2", + "text": "partner for 1", + "parent": "1", + "partner": true + } +]; +~~~ + +**Verwandtes Beispiel**: [Diagram. Organigramm-Modus. Verschachtelte vertikale Listen](https://snippet.dhtmlx.com/98tzmzpg) + +## Eigenschaften speziell für den Mindmap-Modus {#properties-specific-for-the-mindmap-mode} + +### Verwendung {#usage-4} + +~~~jsx +const data = [ + // Formobjekt + { + // ... allgemeine Eigenschaften + parent?: string | number, + dx?: number, + dy?: number, + open?: boolean, // standardmäßig true + openDir?:{ + left?: boolean, + right?: boolean + }, + catchItem?: boolean, + giveItem?: boolean + }, + // weitere Formobjekte +] +~~~ + +### Beschreibung {#description-4} + +Bei der Vorbereitung eines Datensatzes für Formen, die im Mindmap-Modus in das Diagramm geladen werden, können Sie dem Konfigurationsobjekt einer Form die folgenden Eigenschaften hinzufügen: + +- `parent` - (optional) die ID der übergeordneten Form +- `dx` - (optional) der linke Versatz der Form +- `dy` - (optional) der obere Versatz der Form +- `open` - (optional) legt fest, ob die untergeordneten Elemente der aktuellen Form angezeigt werden; standardmäßig *true* +- `openDir` - (optional) blendet die untergeordneten Elemente der Wurzelform ein/aus. Das Objekt akzeptiert zwei Attribute: + - `left` - (optional) blendet die untergeordneten Elemente links von der Wurzelform ein/aus + - `right` - (optional) blendet die untergeordneten Elemente rechts von der Wurzelform ein/aus +- `catchItem` - (optional) legt fest, ob das Element ein sich bewegendes Element aufnehmen kann +- `giveItem` - (optional) legt fest, ob das Element verschoben werden kann + +**Verwandtes Beispiel**: [Diagram Editor. Mindmap-Modus. Mindmap der Emotionen](https://snippet.dhtmlx.com/lo1vm0e8) + +:::info +Weitere Details finden Sie im Artikel [Wie man mit der DHTMLX-Bibliothek ein JavaScript-Mindmap-Diagramm erstellt](https://dhtmlx.com/blog/create-javascript-mindmap-diagram-dhtmlx-library/) +::: + +### Beispiel {#example-3} + +~~~jsx +const data = [ + { + id: "1", + text: "main", + openDir: { + left: true, + right: false + } + }, + { + id: "2", + text: "2", + parent: "1", + giveItem: false + }, + { + id: "3", + text: "3", + parent: "1", + catchItem: false + }, + { + id: "4", + text: "4", + parent: "1" + } +]; +~~~ + +## Eigenschaften speziell für "text"-, "topic"- und Flussdiagramm-Formen {#properties-specific-for-text-topic-and-flow-chart-shapes} + +### Verwendung {#usage-5} + +~~~jsx +const data = [ + // Formobjekt + { + // ... allgemeine Eigenschaften + fill?: string, + stroke?: string, + strokeWidth?: number, // standardmäßig 1 + strokeType?: "line" | "dash", // standardmäßig "line" + strokeDash?: string, + fontColor?: string, + fontStyle?: "normal" | "italic" | "oblique", // standardmäßig "normal" + fontWeight?: string, // standardmäßig "normal" + fontSize?: number, // standardmäßig 14 + textAlign?: "left" | "center" | "right", // standardmäßig "center" + textVerticalAlign?: "top" | "center" | "bottom", // standardmäßig "center" + lineHeight?: number // standardmäßig 14 + }, + // weitere Formobjekte +] +~~~ + +### Beschreibung {#description-5} + +Bei der Vorbereitung eines Datensatzes für `"text"`-, `"topic"`- und Flussdiagramm-Formen können Sie dem Konfigurationsobjekt einer Form die folgenden Eigenschaften hinzufügen: + +- `fill` - (optional) die Farbe der Form +- `stroke` - (optional) die Farbe der Formumrandung +- `strokeWidth` - (optional) die Breite der Formumrandung, standardmäßig 1 +- `strokeType` - (optional) der Typ der Umrandungslinie, `"line"` (Standard), `"dash"` für eine gestrichelte Linie +- `strokeDash` - (optional) das Muster aus Strichen und Abständen für eine gestrichelte Umrandung +- `fontColor` - (optional) die Farbe der Textschrift +- `fontStyle` - (optional) der Stil der Textschrift, möglich sind `"normal"` (Standard), `"italic"` oder `"oblique"` +- `fontWeight` - (optional) die Schriftstärke des Textes, mögliche Werte sind: `"normal"` (Standard), `"bold"`, `"bolder"`, `"lighter"`, Werte `"100"`-`"900"`, wobei `"400"` normal entspricht und `"600"`+ die fetteste Schrift ist +- `fontSize` - (optional) die Schriftgröße in Pixel, standardmäßig 14 +- `textAlign` - (optional) die Textausrichtung in einer Form: `"left"`, `"center"` (Standard), `"right"` +- `textVerticalAlign` - (optional) die vertikale Textausrichtung in einer Form: `"top"`, `"center"` (Standard), `"bottom"` +- `lineHeight` - (optional) die Zeilenhöhe, standardmäßig 14 + +### Beispiel {#example-4} + +~~~jsx +const data = [ + { + "id": "u1585139915192", + "type": "text", + "x": 25, + "y": 280, + "text": "Investment decision", + "width": 150, + "height": 16, + "lineHeight": 14, + "fontSize": "16", + "fontColor": "rgba(0,0,0,0.70)" + } +]; +~~~ + +## Eigenschaften speziell für "card"-Formen {#properties-specific-for-card-shapes} + +### Verwendung {#usage-6} + +~~~jsx +const data = [ + // Formobjekt + { + // ... allgemeine Eigenschaften + headerColor?: string + }, + // weitere Formobjekte +] +~~~ + +### Beschreibung {#description-6} + +Bei der Vorbereitung eines Datensatzes für `"card"`-Formen können Sie dem Konfigurationsobjekt einer Form die folgenden Eigenschaften hinzufügen: + +- `headerColor` - (optional) die Farbe des Kopfbereichs der Form + +### Beispiel {#example-5} + +~~~jsx +const data = [ + { + "id": 1, + "type": "card", + "text": "item: 1", + }, + { + "id": 2, + "type": "card", + "text": "item: 2", + "parent": 1, + "headerColor": "#5874CD" + }, +]; +~~~ + +## Eigenschaften speziell für "img-card"-Formen {#properties-specific-for-img-card-shapes} + +### Verwendung {#usage-7} + +~~~jsx +const data = [ + // Formobjekt + { + // ... allgemeine Eigenschaften + img?: string, + title?: string, + headerColor?: string + }, + // weitere Formobjekte +] +~~~ + +### Beschreibung {#description-7} + +Bei der Vorbereitung eines Datensatzes für `"img-card"`-Formen können Sie dem Konfigurationsobjekt einer Form die folgenden Eigenschaften hinzufügen: + +- `img` - (optional) das Bild einer Form +- `title` - (optional) der Titel einer Form +- `headerColor` - (optional) die Farbe des Kopfbereichs der Form + +### Beispiel {#example-6} + +~~~jsx +const data = [ + { + "id": "1", + "type": "img-card", + "text": "Chairman & CEO", + "title": "Henry Bennett", + "img": "../img/avatar-01.png", + "headerColor": "" + }, + { + "id": "2", + "type": "img-card", + "text": "QA Lead", + "title": "Emma Lynch", + "img": "../img/avatar-02.png", + "parent": "1", + "headerColor": "#5874CD" + } +]; +~~~ + +## Eigenschaften speziell für "task"-Formen {#properties-specific-for-task-shapes} + +### Verwendung {#usage-8} + +~~~jsx +const data = [ + // Formobjekt + { + type: "task", + duration: number, + start_date: string | Date, + end_date?: string | Date, + text?: string, + parent?: string | number | null + //... allgemeine Eigenschaften + }, + // weitere Formobjekte +] +~~~ + +### Beschreibung {#description-8} + +Bei der Vorbereitung eines Datensatzes für `"task"`-Formen können Sie dem Konfigurationsobjekt einer Form die folgenden Eigenschaften hinzufügen: + +- `text` - (optional) die Beschreibung einer Aufgabe +- `start_date` - (erforderlich) das Startdatum einer Aufgabe +- `end_date` - (optional) das Enddatum einer Aufgabe +- `duration` - (erforderlich) die Dauer einer Aufgabe +- `parent` - (optional) die ID des übergeordneten Projekts einer Aufgabe + +### Beispiel {#example-7} + +~~~jsx +const data = [ + { + "id": "4.2.1", + "text": "Functional Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 18), + "duration": 2 + } +]; +~~~ + +## Eigenschaften speziell für "milestone"-Formen {#properties-specific-for-milestone-shapes} + +### Verwendung {#usage-9} + +~~~jsx +const data = [ + // Formobjekt + { + type: "milestone", + text?: string, + parent?: string | number | null + //... allgemeine Eigenschaften + } + // weitere Formobjekte +] +~~~ + +### Beschreibung {#description-9} + +Bei der Vorbereitung eines Datensatzes für `"milestone"`-Formen können Sie dem Konfigurationsobjekt einer Form die folgenden Eigenschaften hinzufügen: + +- `text` - (optional) die Beschreibung einer Aufgabe +- `parent` - (optional) die ID des übergeordneten Projekts einer Aufgabe + +### Beispiel {#example-8} + +~~~jsx +const data = [ + { + "id": "5.2", + "text": "Product Launch", + "type": "milestone", + "parent": "5", + "start_date": new Date(2026, 2, 1), + "duration": 1 + } +]; +~~~ + + +**Verwandte Artikel**: + +- [Standardformen](shapes/default_shapes.md) +- [Benutzerdefinierte Form](shapes/custom_shape.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/shapes/custom_shape.md b/i18n/de/docusaurus-plugin-content-docs/current/shapes/custom_shape.md new file mode 100644 index 000000000..ecf4a96cc --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/shapes/custom_shape.md @@ -0,0 +1,80 @@ +--- +sidebar_label: Benutzerdefinierte Form +title: Benutzerdefinierte Form +description: In der Dokumentation der DHTMLX-JavaScript-Diagram-Bibliothek erfahren Sie mehr über die benutzerdefinierte Form. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Code-Beispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Benutzerdefinierte Form + +Wenn die Standardformen Ihren Anforderungen nicht entsprechen, können Sie eine benutzerdefinierte Form erstellen. + +Nehmen wir an, Sie möchten eine neue `networkCard`-Form erstellen, die ein Bild, einen Text und eine IP-Adresse darstellt. + + + +Gehen Sie dazu wie folgt vor: + +1\. Wenden Sie die Methode [`addShape()`](api/diagram/addshape_method.md) an, um einen eindeutigen Namen für Ihre Form hinzuzufügen (in unserem Fall *"networkCard"*) und eine Vorlage dafür bereitzustellen: + +~~~jsx +diagram.addShape("networkCard", { + template: ({ img, text, ip }) => (` +
+ :::tip + Das Attribut `padding` ist verfügbar, wenn `groupBehavior` auf `"boundNoBorderExtension"` gesetzt ist + ::: + +### Beispiel {#example-1} + +~~~jsx +const data = [ + // Swimlane konfigurieren + { + "id": "main", + "type": "$swimlane", + "height": 730, + "width": 1195, + "layout": [ + [1, 2, 3, 4] + ] + }, + // Zelle der Swimlane konfigurieren + { + "id": 1, + "type": "$sgroup", + "groupChildren": ["s1"], + "style": { + "fill": "#D4DAE4" + }, + "x": 0, + "y": 80 + }, + // Form konfigurieren, die in die Zelle eingefügt werden soll + { + "id": "s1", "type": "end", "text": "Step 1", "x": 20, "y": 110 + } +]; +~~~ + +**Verwandter Artikel**: [Swimlanes konfigurieren](/swimlanes/) + +**Verwandte Beispiele**: + +- [Diagram. Standardmodus. Spiellevel und -orte](https://snippet.dhtmlx.com/1h4j9gb3?tag=diagram&mode=wide) +- [Diagram. Standardmodus. Swimlane-Vorlage](https://snippet.dhtmlx.com/z6x5m3gb?tag=diagram&mode=wide) +- [Diagram. Standardmodus. Wasserfalldiagramm-Vorlage](https://snippet.dhtmlx.com/k5vlvj8i?tag=diagram&mode=wide) +- [Diagram. Standardmodus. Eisenhower-Matrix-Beispiel](https://snippet.dhtmlx.com/yfvccvc4?mode=wide)
Lesen Sie die Details im Artikel [How to Build a JavaScript Eisenhower Matrix with DHTMLX](https://dhtmlx.com/blog/build-javascript-eisenhower-matrix-dhtmlx/) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/swimlanes/index.md b/i18n/de/docusaurus-plugin-content-docs/current/swimlanes/index.md new file mode 100644 index 000000000..94096c9b5 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/swimlanes/index.md @@ -0,0 +1,232 @@ +--- +sidebar_label: Swimlanes +title: Swimlanes +description: In der Dokumentation der DHTMLX JavaScript Diagram-Bibliothek erfahren Sie mehr über Swimlanes. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Code-Beispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Swimlanes {#swimlanes} + +## Swimlane-Übersicht {#swimlane-overview} + +Eine Swimlane stellt ein rechteckiges Element des Diagram dar, das aus Zellen (oder Spuren) besteht, die vertikal oder horizontal angeordnet sind. Jede Zelle (*type: "$sgroup"*) kann untergeordnete Elemente wie Formen oder Groups enthalten. + +:::note +Swimlanes sind nur im Standardmodus von Diagram/Diagram Editor verfügbar (type: `"default"`). +::: + + + + + +Swimlanes helfen Ihnen, jeden Prozess (geschäftlich, fertigungsbezogen, dienstleistungsbezogen oder jeden anderen) oder seine einzelnen Teile von Anfang bis Ende zu visualisieren. + +## Swimlanes erstellen {#creating-swimlanes} + +Um eine Swimlane zu erstellen, müssen Sie `type: "$swimlane"` und die Struktur des Swimlane-Layouts innerhalb des Swimlane-Objekts definieren, während Sie einen Datensatz zum Laden in das Diagram vorbereiten: + +~~~jsx +const data = [ + // Swimlane konfigurieren + { + type: "$swimlane", + height: 500, + width: 850, + // das Layout einer Swimlane muss mindestens eine Zelle enthalten + layout: [ + [1] // die Zelle mit id:"1" und type:"$sgroup" + ] + } +]; + +// Diagram initialisieren +const diagram = new dhx.Diagram("diagram_container"); +diagram.data.parse(data); +~~~ + +Das obige Codebeispiel zeigt die einfachste Konfiguration einer Swimlane mit Standardeinstellungen (d. h. ohne Kopfzeile und Zwischenüberschrift). + +### Swimlane-Struktur {#swimlane-structure} + +Die Struktur einer Swimlane kann sehr unterschiedlich sein. Sie wird über die Konfigurationseigenschaft [layout](swimlanes/configuration_properties.md) des Swimlane-Objekts definiert. Mit dieser Eigenschaft können Sie die Zellen einer Swimlane in Zeilen und Spalten anordnen. + +Sie müssen lediglich ein Array mit einer Matrix als Wert der Eigenschaft angeben. Die Matrix kann entweder ein Array sein: + +~~~jsx +// eine Swimlane mit 3 Spalten +layout: [ + [1, 2, 3] +] +~~~ + +oder eine Reihe von durch Kommas getrennten Arrays: + +~~~jsx +// eine Swimlane mit 2 Zeilen und 3 Spalten +layout: [ + [1, 2, 3], + [4, 5, 6] +] +~~~ + +wobei: + +- jede Zelle im Layout eine eindeutige Nummer hat; +- die Anzahl der Arrays die Anzahl der Zeilen bestimmt (wenn es mehrere Arrays gibt, muss die Anzahl der Zellen in allen Arrays gleich sein); +- die Anzahl der Zellen im Array die Anzahl der Spalten bestimmt. + +### Eigenschaften eines Swimlane-Objekts {#properties-of-a-swimlane-object} + +Sehen Sie sich die [vollständige Liste der Konfigurationseigenschaften eines Swimlane-Objekts](swimlanes/configuration_properties.md) an, um je nach Bedarf verschiedene Swimlanes mit unterschiedlichen Einstellungen erstellen zu können. + +## Swimlane-Zelle konfigurieren {#configuring-a-swimlane-cell} + +Wenn Sie eine Swimlane auf der Seite initialisieren, werden die ID einer Swimlane-Zelle sowie ihre Konfiguration automatisch generiert. Um die Standardkonfiguration der Zelle zu ändern, erstellen Sie ein Objekt der Zelle, das die Attribute `type: "$sgroup"` und `id` enthalten muss, und geben Sie dort die erforderlichen Konfigurationseinstellungen an: + +~~~jsx +const data = [ + // Swimlane konfigurieren + { + type: "$swimlane", + id: "main", + height: 500, + width: 850, + layout: [ + [1, 2, 3] + ] + }, + // Swimlane-Zelle konfigurieren + { + type: "$sgroup", + id: 3, + style: { + fill: "#D4DAE4" + } + } +]; +~~~ + +### Eigenschaften eines Zellenobjekts {#properties-of-a-cell-object} + +Sehen Sie sich die [vollständige Liste der Konfigurationseigenschaften einer Swimlane-Zelle](swimlanes/configuration_properties.md#properties-of-a-swimlane-cell) an. + +## Zellen gruppieren {#grouping-cells} + +Wenn Sie für jede Zelle eine eindeutige Nummer angeben, werden alle Zellen mit Rändern gerendert: + +~~~jsx +layout: [ + [1, 2, 3], + [4, 5, 6] +] +~~~ + + + +Bei Bedarf können Sie einen Bereich von Zellen gruppieren und die Ränder zwischen ihnen entfernen. Wählen Sie dazu eine beliebige Zelle aus dem Bereich aus und ersetzen Sie die eindeutigen Nummern der Zelle(n) aus dem Bereich durch die Nummer dieser Zelle.
+Hier ist ein Beispiel für die Gruppierung der ersten beiden Zellen in der ersten Zeile: + +~~~jsx +layout: [ + [1, 1, 3], + [4, 5, 6] +] +~~~ + +Das Ergebnis sieht folgendermaßen aus: + + + +Hier ist ein Beispiel für die Gruppierung der Zellen in der zweiten Spalte: + +~~~jsx +layout: [ + [1, 2, 3], + [4, 2, 6] +] +~~~ + +Das Ergebnis: + + + +**Verwandtes Beispiel**: [Diagram Editor. Standardmodus. Spalten und Zeilen in Swimlanes konfigurieren](https://snippet.dhtmlx.com/uzx5ulal) + +## Größen einer Swimlane und ihrer Zellen {#sizes-of-a-swimlane-and-its-cells} + +Die Größe der Swimlane wird durch die Konfigurationsattribute `width` und `height` der Swimlane bestimmt. + +~~~jsx +const data = [ + // Swimlane konfigurieren + { + type: "$swimlane", + id: "main", + height: 500, + width: 850, + layout: [ + [1, 2, 3] + ] + } +]; +~~~ + +### Zellenbreite {#cell-width} + +Die Breite einer Zelle hängt von der Breite der Swimlane, der Anzahl der Spalten und der Höhe der linken/rechten Swimlane-Kopfzeile und -Zwischenüberschrift ab. Zum Beispiel: + +~~~jsx +const data = [ + { + type: "$swimlane", + id: "main", + height: 500, + width: 830, + layout: [ + // 3 Spalten + [1, 2, 3] + ], + header: { + position: "left", + height: 40 + }, + subHeaderRows: { + enable: true, + position: "left", + height: 40 + } + } +]; +~~~ + +Die Breite jeder Zelle kann als *(830-40-40)/3 = 250* berechnet werden. + +### Zellenhöhe {#cell-height} + +Die Höhe einer Zelle hängt von der Höhe der Swimlane, der Anzahl der Zeilen und der Höhe der oberen/unteren Swimlane-Kopfzeile und -Zwischenüberschrift ab. Zum Beispiel: + +~~~jsx +const data = [ + { + type: "$swimlane", + id: "main", + height: 500, + width: 830, + layout: [ + // 2 Zeilen + [1, 2, 3], + [4, 5, 6] + ], + header: { + position: "top", + height: 40 + }, + subHeaderCols: { + enable: true, + position: "top", + height: 40 + } + } +]; +~~~ + +Die Höhe jeder Zelle kann als *(500-40-40)/2 = 210* berechnet werden. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/whats_new.md b/i18n/de/docusaurus-plugin-content-docs/current/whats_new.md new file mode 100644 index 000000000..e71b324be --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/whats_new.md @@ -0,0 +1,693 @@ +--- +sidebar_label: Was ist neu +title: Was ist neu +description: Erfahren Sie Neuigkeiten zur JavaScript-Bibliothek DHTMLX Diagram. Durchstöbern Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Diagram herunter. +--- + +# Was ist neu {#whats-new} + +Wenn Sie Diagram von einer älteren Version aktualisieren, finden Sie Details unter [Migration zu einer neueren Version](migration.md). + +## Version 6.1.6 {#version-616} + +Veröffentlicht am 1. Juli 2026 + +### Fehlerbehebungen {#fixes} + +- Diagram. Ein Fehler behoben, der beim Laden von Daten in Diagram über `ShapeCollection` (`DataCollection`) im `mindmap`-Modus auftrat + +## Version 6.1.5 {#version-615} + +Veröffentlicht am 17. Juni 2026 + +### Aktualisierungen {#updates} + +- Diagram Editor. Verbesserte Texteditierung mit neuen Tastenkombinationen: Ctrl+Enter zum Starten der Bearbeitung, Shift+Enter für neue Zeilen, Enter zum Bestätigen und Escape zum Verwerfen von Änderungen + +### Fehlerbehebungen {#fixes-1} + +- Diagram Editor. Behoben: Linien, die durch Swimlane-Gruppen verliefen, waren nicht auswählbar +- Diagram Editor. Automatisches Scrollen hinzugefügt, wenn Verbindungslinien auf Shapes außerhalb des aktuellen Bildschirmbereichs gezogen werden. +- Diagram Editor. Behoben: Ein Shape wurde beim Bearbeiten seines Textes gelöscht +- Diagram. Behoben: ein Safari-spezifischer Fehler, bei dem Linien mit der Eigenschaft `backArrow: "filled"` nicht korrekt gerendert wurden + +## Version 6.1.3 {#version-613} + +Veröffentlicht am 21. Mai 2026 + +### Aktualisierungen {#updates-1} + +- Diagram / Diagram Editor. Verbesserungen an der Autoplatzierungslogik. Die Möglichkeit hinzugefügt, den Abstand zwischen Shapes und Ebenen über die neuen Eigenschaften `itemPadding` und `levelPadding` in der Diagram-Methode [`autoPlace()`](api/diagram/autoplace_method.md) und im Konfigurationsobjekt [`autoplacement`](api/diagram/autoplacement_property.md) zu steuern + +### Fehlerbehebungen {#fixes-2} + +- Diagram. Behoben: Die Anwendung der Autoplatzierung führte zu falschen Abständen zwischen Shapes +- Diagram. Behoben: Der Aufruf von [`autoPlace()`](api/diagram/autoplace_method.md) ignorierte die Linienwerte [`fromSide` und `toSide`](lines/configuration_properties.md), wodurch nun die Konsistenz der Diagrammstruktur gewährleistet ist +- Diagram. Der `Radial`-Autoplatzierungsalgorithmus wurde überarbeitet, um das Problem mit kritisch großen Abständen zwischen Shapes zu beheben und ein kompakteres Layout zu ermöglichen + +## Version 6.1.2 {#version-612} + +Veröffentlicht am 2. April 2026 + +### Fehlerbehebungen {#fixes-3} + +- Diagram Editor. Das Problem bei der Erstellung von Konnektoren für Shapes mit negativen Koordinaten ist behoben +- Diagram Editor. Das Problem, dass das Drücken der Taste Backspace während der Inline-Textbearbeitung das Shape oder den Linientitel löschte, ist behoben +- Export. Eine Sicherheitslücke beim PDF/PNG-Export, die über HTML-Injection den Zugriff auf beliebige lokale Dateien ermöglichte, ist durch verbesserte Bereinigung und Härtung der Umgebung behoben + +## Version 6.1.1 {#version-611} + +Veröffentlicht am 5. Februar 2026 + +### Fehlerbehebungen {#fixes-4} + +- Diagram Editor. Unmöglichkeit, die Zeichenfläche beim Verschieben von Elementen nach unten und rechts automatisch zu scrollen + +## Version 6.1 {#version-61} + +Veröffentlicht am 25. November 2025 + +### Neue Funktionalität {#new-functionality} + +- Die Möglichkeit, Diagram-PERT-Diagramme aus Gantt-Datensätzen zu erstellen: + - [ein neuer PERT-Modus](/#diagram-in-the-pert-mode), festgelegt über den [neuen Typ: `"pert"`](api/diagram/type_property.md) + - [neue Shape-Typen: `"task"` und `"milestone"`](shapes/default_shapes.md#shapes-in-the-pert-mode) + - [ein neuer Gruppentyp: `"project"`](/groups/#grouping-shapes-in-the-pert-mode) (zum Gruppieren von Tasks und Milestones) +- Diagram Editor. Die Möglichkeit, Tastenkombinationen (Hotkeys) innerhalb des Editors zu verwalten: + - eine neue Konfigurationseigenschaft [`hotkeys`](api/diagram_editor/editor/config/hotkeys_property.md) erlaubt es, bestehende Hotkeys zu ändern oder zu deaktivieren sowie neue hinzuzufügen +- Diagram Editor. Die Möglichkeit, das Größenändern und Drehen von Shapes über eine Reihe neuer Events zu verwalten: +[`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md), +[`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md), +[`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md), +[`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md), +[`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md), +[`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md) + +### Aktualisierungen {#updates-2} + +- DataCollection-API. Aktualisierungen für den PERT-Modus: + - die Methode [`parse()`](api/data_collection/parse_method.md) kann als ersten Parameter ein Objekt mit den Arrays `data` und `links` erhalten + - die Methode [`serialize()`](api/data_collection/serialize_method.md) kann ein Objekt mit den Arrays `data` und `links` zurückgeben +- Diagram-API. Die Möglichkeit, das Format der Datumsanzeige in den Task-Shapes für den PERT-Modus festzulegen: + - ein neuer Parameter `dateFormat` für die Konfigurationseigenschaft [`typeConfig`](api/diagram/typeconfig_property.md) +- Diagram/Diagram-Editor-API. Die Möglichkeit, den Verbindungstyp der Linien festzulegen: + - ein neuer Parameter `connectType` für die Konfigurationseigenschaft [`lineConfig`](api/diagram/lineconfig_property.md) von Diagram + - ein neuer Parameter `connectType` für die Konfigurationseigenschaft [`lineConfig`](api/diagram_editor/editor/config/lineconfig_property.md) von Diagram Editor +- Export-API. Die Exportfunktionen [`pdf()`](api/export/pdf_method.md) und [`png()`](api/export/png_method.md) geben nun ein Promise des Datenexports zurück + +### Fehlerbehebungen {#fixes-5} + +- Diagram Editor. Der Skriptfehler, der nach dem Hovern über ein Shape im Safari-Browser auftrat +- Diagram Editor. Die Konsolenwarnungen, die nach dem Entfernen von Elementen auftraten + +### Neue Demo zur [KI-Integration](guides/ai-integrations/ai-demo.md) {#new-demo-on-ai-integration} + +- [DHTMLX Diagram Org Chart AI Builder](https://dhtmlx.com/docs/demo/ai-org-chart-builder/) + + +### Neue Beispiele {#new-samples} + +- [Diagram. PERT-Diagramm. Initialisierung](https://snippet.dhtmlx.com/4h5fi7xd) +- [Diagram und Gantt. PERT-Diagramm. Initialisierung](https://snippet.dhtmlx.com/409jj9uh) +- [Diagram und Gantt. PERT-Diagramm. Vollständige Integration](https://snippet.dhtmlx.com/gcnx4a9h) +- [Diagram und Gantt. PERT-Diagramm. Popup-Fenster](https://snippet.dhtmlx.com/fvfysbdb) +- [Diagram und Gantt. PERT-Diagramm. Benutzerdefinierte Shapes und Styling (benutzerdefiniertes CSS)](https://snippet.dhtmlx.com/mtk92awx) +- [Diagram. PERT-Diagramm. Verschiedene Datensätze](https://snippet.dhtmlx.com/2j2y8vy6) +- [Diagram. PERT-Diagramm. Tasks filtern/durchsuchen](https://snippet.dhtmlx.com/1b2bmmxk) +- [Diagram. PERT-Diagramm. Benutzerdefinierte Seitenleiste für Task-Informationen](https://snippet.dhtmlx.com/712lsox0) +- [Diagram. PERT-Diagramm. Themes](https://snippet.dhtmlx.com/2e5y5u6m) +- [Diagram. Export. Wasserzeichen unten links](https://snippet.dhtmlx.com/d56spdsc) +- [Diagram. Export. Sich wiederholendes Wasserzeichen](https://snippet.dhtmlx.com/emkea55j) +- [Diagram. Interaktives elektrisches Schaltplandiagramm](https://snippet.dhtmlx.com/cisyixkq) +- [Diagram Editor. Verwaltung von Verschieben, Drehen und Größenändern von Shapes über Events](https://snippet.dhtmlx.com/qldjbbm7) +- [Diagram Editor. Verwaltung des Hinzufügens, Änderns und Deaktivierens von Hotkeys über die API](https://snippet.dhtmlx.com/8ads5dq8) +- [Diagram Editor. Fishbone-Diagramm. Ursachen und Lösungen](https://snippet.dhtmlx.com/7vhwtiba) +- [Diagram Editor. Fishbone-Diagramm. Mehrere Ursachen](https://snippet.dhtmlx.com/0dgjwt6u) + + +## Version 6.0.11 {#version-6011} + +Veröffentlicht am 18. Juni 2025 + +### Fehlerbehebungen {#fixes-6} + +- Diagram Editor. Fehlerhaftes Verschieben von Shapes beim Zoomen + +## Version 6.0.10 {#version-6010} + +Veröffentlicht am 10. März 2025 + +### Fehlerbehebungen {#fixes-7} + +- Diagram. Das Problem mit der Anpassung der Pfeilgröße der Linien-Shape beim Bearbeiten der Linienbreite + +## Version 6.0.9 {#version-609} + +Veröffentlicht am 4. Februar 2025 + +### Fehlerbehebungen {#fixes-8} + +- Diagram Editor. Ein Problem beim Verschieben einer Gruppe mit Elementen sowie beim Verschieben von Elementen in bzw. aus einer Gruppe +- Diagram. Die Events `itemMouseOver` und `itemMouseOut` werden für ein ausgewähltes Shape nicht ausgelöst + +## Version 6.0.8 {#version-608} + +Veröffentlicht am 5. Dezember 2024 + +- Das Problem mit dem lokalen Testpaket beim Import in Frameworks + +## Version 6.0.7 {#version-607} + +Veröffentlicht am 27. November 2024 + +- Diagram Editor. Ein Fehler trat bei der Shape-Bearbeitung mit der Editbar auf +- Diagram Editor. Ein Problem beim Verschieben eines Shapes während der Navigation bei der Inline-Bearbeitung + +## Version 6.0.4 {#version-604} + +Veröffentlicht am 1. Oktober 2024 + +### Fehlerbehebungen {#fixes-9} + +- Diagram Editor. Der Aufruf der Methode `destructor()` löst einen Fehler aus + +## Version 6.0.3 {#version-603} + +Veröffentlicht am 28. August 2024 + +### Fehlerbehebungen {#fixes-10} + +- Diagram Editor. Anwendung unterschiedlicher Locales für `calendar`, `combobox`, `colorpicker`, `form`, `timepicker` der Editbar +- Diagram Editor. Hinzufügen von Diagram Editor in eine Layout-Zelle +- Diagram Editor. Die Eigenschaft `shapeToolbar` ist für den `default`-Modus nicht optional +- Diagram Editor. Fehlerhaftes Hover-Verhalten, wenn ein benutzerdefiniertes Shape ein Vorschaubild besitzt + + +## Version 6.0.2 {#version-602} + +Veröffentlicht am 16. Juli 2024 + +### Fehlerbehebungen {#fixes-11} + +- Diagram. Autoplatzierung. Ein Shape verbirgt sich unter einem anderen Shape + +## Version 6.0.1 {#version-601} + +Veröffentlicht am 24. Juni 2024 + +### Fehlerbehebungen {#fixes-12} + +- Diagram Editor. Speicherleck +- Diagram Editor. Skriptfehler beim Klicken auf vertikale und horizontale Verteilung über die Toolbar +- Diagram. Typenproblem beim Aufruf der Methode [`getSubHeaderCellId()`](api/cell_manager/getsubheadercellid_method.md) + +## Version 6.0 {#version-60} + +Veröffentlicht am 16. Mai 2024 + +### Breaking Changes {#breaking-changes} + +Das neue Update führt bedeutende Änderungen an der Struktur und Funktionalität von Diagram und Diagram Editor ein. Weitere Informationen zur aktuellen Version finden Sie im [Migrationsartikel](migration.md#50---60). + +### Neue Funktionalität {#new-functionality-1} + +- Umstrukturierung von Diagram Editor: Möglichkeit, mit dessen Teilen zu interagieren und deren Sichtbarkeit über die Eigenschaft [`view`](api/diagram_editor/editor/config/view_property.md) zu verwalten, die folgende Konfigurationen umfasst: + - [Toolbar](guides/diagram_editor/toolbar.md) – ein oberer Teil von Diagram Editor, der Benutzern hilft, den Bearbeitungsprozess zu steuern (siehe [API-Übersicht](api/diagram_editor/toolbar/api_overview.md)) + - [Shapebar](guides/diagram_editor/shapebar.md) – (ehemals linkes Panel) ein Teil von Diagram Editor, der Vorschauen der Diagram-Elemente rendert (siehe [API-Übersicht](api/diagram_editor/shapebar/api_overview.md)) + - [Editbar](guides/diagram_editor/editbar.md) – (ehemals rechtes Panel) ein Teil von Diagram Editor, mit dem Benutzer Diagram-Elemente bearbeiten können (siehe [API-Übersicht](api/diagram_editor/editbar/api_overview.md)). Sie können folgende Aktionen durchführen: + - Sätze vordefinierter [Basissteuerelemente](api/diagram_editor/editbar/basic_controls_overview.md) und [komplexer Steuerelemente](api/diagram_editor/editbar/complex_controls_overview.md) + - anpassbare Konfiguration von [Basissteuerelementen](api/diagram_editor/editbar/basic_controls_overview.md) und [komplexen Steuerelementen](api/diagram_editor/editbar/complex_controls_overview.md) je nach den bereitgestellten Bedingungen + - dynamische Verwaltung des Editbar-Panels je nach den bereitgestellten Bedingungen ([Beispiel](https://snippet.dhtmlx.com/ealq0m4l?mode=wide)) + - Erstellung benutzerdefinierter Steuerelemente ([Beispiel](https://snippet.dhtmlx.com/1p0wemnn?mode=wide)) + - Erstellung von HTML-Inhalten ([Beispiel](https://snippet.dhtmlx.com/vcnt647v?mode=wide)) +- Diagram Editor. Die [Copy-Manager-API](api/diagram_editor/copymanager/api_overview.md) wurde hinzugefügt +- Diagram Editor. Die Möglichkeit, [Shapebar](api/diagram_editor/shapebar/config/show_property.md), [Editbar](guides/diagram_editor/editbar.md) und [Toolbar](guides/diagram_editor/toolbar.md) ein-/auszublenden +- Diagram Editor. Die Methode [destructor()](api/diagram_editor/editor/methods/destructor_method.md) wurde hinzugefügt +- Diagram Editor. Die Möglichkeit, [die Verbindungspunkte auszublenden](api/diagram_editor/editor/config/connectionpoints_property.md) +- Diagram Editor. Die Möglichkeit, [die Größenänderungspunkte auszublenden](api/diagram_editor/editor/config/resizepoints_property.md) +- Diagram Editor. Die Möglichkeit, [das Raster auszublenden](api/diagram_editor/editor/config/grid_property.md) +- Das Upgrade der [Selection-API](/api/selection/) mit der Möglichkeit der Mehrfachauswahl +- Die Titel von Linien werden als separate Objekte deklariert, definiert als [`lineTitles`](/line_titles/) mit eigenen [Konfigurationseigenschaften](line_titles/configuration_properties.md) +- [Unterstützung neuer Themes](../category/themes/): Dark, Light High Contrast und Dark High Contrast ([Beispiel](https://snippet.dhtmlx.com/9twmlfus)) +- Diagram Editor. Die Möglichkeit, [das Farbschema der Shapebar-Elemente anzupassen](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar), indem CSS-Variablen neu definiert und eigene benutzerdefinierte Variablen verwendet werden + +### Aktualisierungen {#updates-3} + +- Diagram Editor. [Locales](guides/localization.md) wurden aktualisiert +- Diagram Editor. Die Liste der [Hotkeys](guides/diagram_editor/hot_keys.md) wurde erweitert +- Diagram Editor. Das Verhalten von Shapebar-Elementen beim Ziehen auf das Raster sowie ihr Erscheinungsbild wurden verbessert +- Diagram Editor. Die Callback-Funktion der Events [`zoomIn`](api/diagram_editor/editor/events/zoomin_event.md) / [`zoomOut`](api/diagram_editor/editor/events/zoomout_event.md) wird nun mit dem Parameter `step` aufgerufen +- Diagram Editor. Die Funktionalität der Konfigurationsoption [`magnetic`](api/diagram_editor/editor/config/magnetic_property.md) wurde erweitert +- Diagram Editor. Die Verschiebe-[Events](api/diagram_editor/editor/events/overview.md) des Editor-Objekts wurden aktualisiert: +[`afterGroupMove`](api/diagram_editor/editor/events/aftergroupmove_event.md), +[`afterItemCatch`](api/diagram_editor/editor/events/afteritemcatch_event.md), +[`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md), +[`afterLineTitleMove`](api/diagram_editor/editor/events/afterlinetitlemove_event.md), +[`afterShapeMove`](api/diagram_editor/editor/events/aftershapemove_event.md), +[`beforeGroupMove`](api/diagram_editor/editor/events/beforegroupmove_event.md), +[`beforeItemCatch`](api/diagram_editor/editor/events/beforeitemcatch_event.md), +[`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md), +[`beforeLineTitleMove`](api/diagram_editor/editor/events/beforelinetitlemove_event.md), +[`beforeShapeMove`](api/diagram_editor/editor/events/beforeshapemove_event.md), +[`groupMoveEnd`](api/diagram_editor/editor/events/groupmoveend_event.md), +[`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md), +[`itemTarget`](api/diagram_editor/editor/events/itemtarget_event.md), +[`lineTitleMoveEnd`](api/diagram_editor/editor/events/linetitlemoveend_event.md), +[`shapeMoveEnd`](api/diagram_editor/editor/events/shapemoveend_event.md) +- Die Möglichkeit, [mit Linientiteln über die DataCollection-API zu arbeiten](/line_titles/#working-with-line-titles) + +### Veraltete API {#deprecated-api} + +- #### Eigenschaften + - Die Eigenschaft `controls` von Diagram Editor ist veraltet und wird nicht mehr unterstützt + - Die Eigenschaft `editMode` von Diagram Editor ist veraltet und wird nicht mehr unterstützt + - Die Eigenschaft `gapPreview` von Diagram Editor ist veraltet und wird nicht mehr unterstützt + - Die Eigenschaft `reservedWidth` von Diagram Editor ist veraltet und wird nicht mehr unterstützt + - Die Eigenschaft `scalePreview` von Diagram Editor ist veraltet und wird nicht mehr unterstützt + - Die Eigenschaft `shapeBarWidth` von Diagram Editor ist veraltet und wird nicht mehr unterstützt + - Die Eigenschaft `shapeSections` von Diagram Editor ist veraltet und wird nicht mehr unterstützt + - Die Eigenschaft `title` der [Line](lines/configuration_properties.md)-Daten ist veraltet und wird nicht mehr unterstützt + +- #### Methoden + - Die Methode `getId()` des Selection-Objekts von Diagram ist veraltet und wird nicht mehr unterstützt + - Die Methode `getSubId()` des Selection-Objekts von Diagram ist veraltet und wird nicht mehr unterstützt + - Die Methode `setViewMode()` von Diagram Editor ist veraltet und wird nicht mehr unterstützt + +- #### Events + - Die folgenden Events von Diagram Editor sind veraltet und werden nicht mehr unterstützt, da es keine entsprechenden Schaltflächen mehr in der Toolbar gibt: `resetButton`, `applyButton`, `visibility`, `exportData`, `importData`, `autoLayout` + - Das Event `changeGridStep` von Diagram Editor ist veraltet und wird nicht mehr unterstützt + +### Fehlerbehebungen {#fixes-13} + +- Diagram Editor. Behebt einen Konsolenfehler, der durch das erneute Klicken auf die Schaltfläche „Daten importieren" nach einem Datenimport ohne Dateiauswahl verursacht wurde +- Diagram Editor. Behebt die Blockierung beim Hinzufügen eines neuen Shapes +- Diagram Editor. Behebt das Kopieren von Linien bei manueller Auswahl von Elementen +- Diagram Editor. Behebt das Ziehen, wenn sich das Wurzel-Shape nahe am untergeordneten Shape in den Modi `mindmap`/`org` befindet +- Diagram Editor. Behebt das fehlerhafte Auswahlverhalten, das einen zusätzlichen Klick zur Auswahl eines Shapes mit der Taste Shift erforderte +- Diagram Editor. Behebt das gemeinsame Verschieben einer Gruppe und einer Swimlane +- Diagram Editor. Behebt das Entfernen nicht verwendeter Linien/Konnektoren +- Diagram Editor. Behebt die Möglichkeit, Elemente unterschiedlicher übergeordneter Elemente zum Zielelement zu verschieben (für die Modi `org`/`mindmap`) +- Diagram Editor. Behebt die Möglichkeit, Standardwerte für Shapebar-Elemente festzulegen +- Diagram Editor. Behebt die Darstellung von Konnektoren beim Hovern verschobener Elemente über ein beliebiges Shape +- Diagram Editor. Behebt die Unmöglichkeit, ausgewählte Elemente über das Menü in den Modi `mindmap`/`org` zu entfernen +- Diagram Editor. Behebt das Problem, dass der Datenimport nur einmal funktionierte +- Diagram Editor. Verbessert die Leistung während der Konnektor-Bewegung +- Diagram Editor. Begrenzt die Aufzeichnung von Aktionen während der Konnektor-Bewegung im `historyManager` +- Diagram Editor. Optimiert die Logik der Suche nach dem nächstgelegenen Konnektor +- Behebt die Lokalisierung bei komplexen Widgets + +## Version 5.0.3 {#version-503} + +Veröffentlicht am 12. Juli 2023 + +### Fehlerbehebungen {#fixes-14} + +- Behebt das Problem, dass der Aufruf der Methode [autoPlace()](api/diagram/autoplace_method.md) nach dem Daten-Parsing einen Fehler verursachte + +## Version 5.0.2 {#version-502} + +Veröffentlicht am 30. Mai 2023 + +### Fehlerbehebungen {#fixes-15} + +- Diagram Editor. Behebt das Problem, dass benutzerdefinierte Punkte sich bei einer Mehrfachauswahl-Verschiebung nicht mitbewegten +- Diagram Editor. Behebt die Unmöglichkeit, ein Shape mit sich selbst zu verknüpfen +- Behebt das Problem beim Exportieren eines Standarddiagramms ohne [exportStyles](api/diagram/exportstyles_property.md) +- Behebt das Problem mit der promiz.js-Bibliothek, das beim Import der Quellen einen Fehler bei der Definition der Methode setImmediate() verursachte +- Behebt die Pfadbildung der URL im Export-Objekt +- Typen für den Export wurden hinzugefügt + +## Version 5.0.1 {#version-501} + +Veröffentlicht am 19. Januar 2023 + +### Fehlerbehebungen {#fixes-16} + +- Diagram Editor. Behebt das Problem, dass Linien nicht immer an ihrer Position gezeichnet wurden, wenn Daten exportiert und anschließend erneut geladen wurden + - Nun ist es möglich, die Koordinaten für Linien im `default`-Modus festzulegen (neue Eigenschaft [`points`](lines/configuration_properties.md#properties-specific-for-the-default-mode) des Linienobjekts) +- Diagram Editor. Behebt das Problem beim Ziehen von Shapes im Raster nach Änderung der Zoomstufe +- Behebt den Fehler, der nach dem Klicken auf die Schaltfläche „Auto-Layout" bei fehlenden Shapes ausgelöst wurde +- Behebt das Problem mit der Anzeige der [Standardeinstellungen](api/diagram/defaults_property.md) nach der Erstellung von Linien über den Editor +- Behebt das Problem mit der Skalierung von Diagram/Diagram Editor, das beim automatischen Platzieren von Shapes im `"radial"`-Modus auftrat + +## Version 5.0 {#version-50} + +Veröffentlicht am 7. September 2022 + +Übersicht über das Release im Blog + +### Breaking Changes {#breaking-changes-1} + +Die neue Version führt einige Änderungen an der Eigenschaft `lineGap` ein. Weitere Informationen zur aktuellen Version finden Sie im [Migrationsartikel](migration.md#42---50). + +### Neue Funktionalität {#new-functionality-2} + +#### Diagram {#diagram} + +- Radialer Algorithmus für die [automatische Platzierung von Shapes](guides/diagram/configuration.md#configuring-autoplacement-for-shapes): + - der Parameter `placemode` wurde zur Eigenschaft [`autoplacement`](api/diagram/autoplacement_property.md) hinzugefügt + - der Parameter `placemode` wurde zur Methode [`autoPlace()`](api/diagram/autoplace_method.md) hinzugefügt +- Die Möglichkeit, Tooltips für Toolbar-Symbole festzulegen: + - der Parameter `tooltip` des Symbolobjekts wurde zur Eigenschaft [`toolbar`](api/diagram/toolbar_property.md) hinzugefügt + +#### Diagram Editor {#diagram-editor} + +- Radialer Algorithmus für die automatische Platzierung von Shapes: + - der Parameter `placemode` wurde zur Eigenschaft [`autoplacement`](api/diagram_editor/editor/config/autoplacement_property.md) hinzugefügt + - die Schaltfläche **Auto-Layout** der [Toolbar](guides/diagram_editor/toolbar.md) bietet nun zwei Optionen für die automatische Platzierung von Shapes: *Orthogonal* und *Radial* +- [Fanglinien](guides/diagram_editor/grid_area.md#enablingdisabling-snap-lines) für die präzisere Anordnung von Shapes im Rasterbereich +- Die Möglichkeit, Fanglinien über die neue Eigenschaft [`magnetic`](api/diagram_editor/editor/config/magnetic_property.md) zu konfigurieren +- Die Möglichkeit, Stile eines oder mehrerer Elemente über Alt (Option) + Ctrl (Cmd) + С => Alt (Option) + Ctrl (Cmd) + V zu kopieren und einzufügen (siehe das **[Beispiel](https://snippet.dhtmlx.com/klgvu3jq)**) +- Die Möglichkeit, [mehrere Elemente auszurichten und zu verteilen](guides/diagram_editor/grid_area.md#aligning-multiple-items) +- Nun werden Tooltips angezeigt, wenn Sie mit dem Mauszeiger über Steuerelemente in der persönlichen Toolbar von Elementen fahren +- Erweiterte Liste der [Locale-Optionen](guides/localization.md) für die Lokalisierung von Tooltips in der Toolbar pro Element +- Die Möglichkeit, Tooltips für [benutzerdefinierte Toolbar-Symbole](guides/diagram_editor/grid_area.md#configuring-the-toolbar-of-an-item) festzulegen: + - der Parameter `tooltip` des Symbolobjekts wurde zur Eigenschaft [`shapeToolbar`](api/diagram_editor/editor/config/shapetoolbar_property.md) hinzugefügt +- Verbessertes Design des [Rasterbereichs](guides/diagram_editor/grid_area.md). Nun hängt der Abstand zwischen den Punkten im Rasterbereich vom Wert der Rasterschrittweite ab + +### Fehlerbehebungen {#fixes-17} + +- Behebt das Problem, dass ein Ladesymbol nach dem Laden einer Datei nicht aus dem rechten Panel des Editors verschwand + +## Version 4.2 {#version-42} + +Veröffentlicht am 3. März 2022 + +Übersicht über das Release im Blog + +### Neue Funktionalität {#new-functionality-3} + +- [Touch-Unterstützung](guides/touch_support.md) +- Die Möglichkeit, die Standardeinstellung für Linien über die Eigenschaft [`lineConfig`](api/diagram/lineconfig_property.md) von Diagram festzulegen +- Die Möglichkeit, die Standardeinstellungen für neue, im Editor erstellte Linien über die Eigenschaft [`lineConfig`](api/diagram_editor/editor/config/lineconfig_property.md) von Diagram Editor festzulegen +- Die Möglichkeit, Standardsätze von Org-Shapes, Gruppen und Swimlanes in der erforderlichen Reihenfolge hinzuzufügen, [wenn Abschnitte im linken Panel des Editors konfiguriert werden](guides/diagram_editor/shapebar.md#custom-sections) + +### Aktualisierungen {#updates-4} + +- Die Eigenschaft `defaultLinkType` von Diagram ist veraltet. Weitere Informationen finden Sie im Artikel [Migration](migration.md#41---42) +- Die Eigenschaft `shapeSections` von Diagram Editor wurde aktualisiert. Weitere Informationen finden Sie im Artikel [Migration](migration.md#41---42) +- Nun ist es möglich, Standardkonfigurationen nicht nur für Shapes bestimmter Typen, sondern auch für Linien festzulegen: + - die Eigenschaft [`defaults`](api/diagram/defaults_property.md) von Diagram wurde aktualisiert + - die Eigenschaft [`defaults`](api/diagram_editor/editor/config/defaults_property.md) von Diagram Editor wurde aktualisiert +- Die Dokumentation für [Modi zum Verbinden von Shapes](api/diagram/autoplace_method.md#modes-of-connecting-shapes) wurde aktualisiert + +## Version 4.1 {#version-41} + +Veröffentlicht am 7. Dezember 2021 + +Übersicht über das Release im Blog + +### Neue Funktionalität {#new-functionality-4} + +- Die Möglichkeit, [Partner-Shapes](/#assistant-and-partner-shapes) im Org-Chart-Modus hinzuzufügen +- Die Möglichkeit, [Assistent-Shapes](/#assistant-and-partner-shapes) im Org-Chart-Modus hinzuzufügen +- Die Möglichkeit, [Titel zu Linien hinzuzufügen](/#line-titles) im `default`-Modus +- Die Möglichkeit, [Shapes per Drag-and-Drop](editor_overview.md#editor-in-the-org-chart-mode) von einem übergeordneten Element zu einem anderen im Editor im Org-Chart- und Mindmap-Modus zu verschieben. Die Shapes werden zusammen mit ihren untergeordneten Elementen verschoben +- Die Möglichkeit, [Zielelemente zu stylen](guides/customization.md#styling-target-shapes) im Editor im Org-Chart- und Mindmap-Modus + +### API {#api} + +- Neue Events des Diagram-Objekts: [`emptyAreaDblClick`](api/diagram/emptyareadblclick_event.md), [`emptyAreaMouseDown`](api/diagram/emptyareamousedown_event.md), [`lineTitleClick`](api/diagram/linetitleclick_event.md), [`lineTitleDblClick`](api/diagram/linetitledblclick_event.md), [`lineTitleMouseDown`](api/diagram/linetitlemousedown_event.md) +- Neue [Shape-Eigenschaften](shapes/configuration_properties.md#properties-specific-for-the-org-chart-mode) speziell für den Org-Chart-Modus: `assistant`, `partner`, `catchItem`, `giveItem` +- Neue [Shape-Eigenschaften](shapes/configuration_properties.md#properties-specific-for-the-mindmap-mode) speziell für den Mindmap-Modus: `catchItem`, `giveItem` +- Neue [Linien-Eigenschaften](lines/configuration_properties.md#properties-specific-for-the-default-mode) speziell für den `default`-Modus: `title` +- Neue Methoden des Editor-Objekts: `setViewMode()`, `zoomIn()`, `zoomOut()` +- Neue Events des Editor-Objekts: [`beforeLineTitleMove`](api/diagram_editor/editor/events/beforelinetitlemove_event.md), [`afterLineTitleMove`](api/diagram_editor/editor/events/afterlinetitlemove_event.md), [`lineTitleMoveEnd`](api/diagram_editor/editor/events/linetitlemoveend_event.md), [`itemTarget`](api/diagram_editor/editor/events/itemtarget_event.md), [`beforeItemCatch`](api/diagram_editor/editor/events/beforeitemcatch_event.md), [`afterItemCatch`](api/diagram_editor/editor/events/afteritemcatch_event.md) +- Neue Eigenschaften des Editor-Objekts: [`itemsDraggable`](api/diagram_editor/editor/config/itemsdraggable_property.md) +- Neue HistoryManager-Methoden: [`add()`](api/diagram_editor/historymanager/methods/add_method.md), [`disable()`](api/diagram_editor/historymanager/methods/disable_method.md), [`enable()`](api/diagram_editor/historymanager/methods/enable_method.md), [`isRedo()`](api/diagram_editor/historymanager/methods/isredo_method.md), [`redo()`](api/diagram_editor/historymanager/methods/redo_method.md), [`reset()`](api/diagram_editor/historymanager/methods/reset_method.md), [`undo()`](api/diagram_editor/historymanager/methods/undo_method.md) +- Neue HistoryManager-Eigenschaften: `disabled`, [`saveDelay`](api/diagram_editor/historymanager/config/savedelay_property.md) +- Neue Selection-Methode: `getSubId()` + +### Aktualisierungen {#updates-5} + +- Aktualisierte Events von [InlineEditor](/api/inline_editor/): Der Parameter *subHeaderId* wurde in *subId* geändert +- Aktualisierte Events der [Selection-API](/api/selection/#events): Der Parameter *subId* wurde hinzugefügt +- Der Standardtyp des Shapes im `default`-Modus wurde in [*"rectangle"*](shapes/configuration_properties.md#common-properties) geändert + +### Fehlerbehebungen {#fixes-18} + +- Die Leistung wurde für alle Diagrammtypen verbessert +- Behebung der fehlerhaften Funktion der Schaltflächen *Rückgängig/Wiederholen* in der Toolbar des Editors + +## Version 4.0.1 {#version-401} + +Veröffentlicht am 16. September 2021 + +### Fehlerbehebungen {#fixes-19} + +- Behebt die Anzeige von Konnektoren beim Drehen des Shapes +- Behebt die minifizierten Stile des Diagramms +- Behebt die Funktion des Algorithmus beim Hinzufügen neuer Elemente in den Diagram Editor im Org-Chart-/Mindmap-Modus +- Behebt die Funktion des rechten Panels des Editors bei der Arbeit mit Textstilen + +## Version 4.0 {#version-40} + +Veröffentlicht am 7. September 2021 + +Übersicht über das Release im Blog + +### Neue Funktionalität {#new-functionality-5} + +- Neue Diagrammelemente wurden hinzugefügt: [Gruppen](/groups/), [Swimlanes](/swimlanes/) +- Neue Abschnitte im linken Panel von Diagram Editor wurden hinzugefügt: [Gruppen, Swimlanes](guides/diagram_editor/shapebar.md#default-sections) +- [Neue Seitenleistenoptionen wurden dem rechten Panel des Editors für Gruppen und Swimlanes hinzugefügt](guides/diagram_editor/editbar.md) +- Die Möglichkeit, [Gruppen](guides/diagram_editor/grid_area.md#managing-groups) und [Swimlanes](guides/diagram_editor/grid_area.md#managing-swimlanes) über die Benutzeroberfläche zu bearbeiten +- Erweiterte Liste der [Locale-Optionen](guides/localization.md) +- Die Möglichkeit, die Zellen einer Swimlane über die [CellManager-API](/api/cell_manager/) zu verwalten +- Die Möglichkeit, den Text eines Elements durch Doppelklick darauf zu bearbeiten +- Die Demo [DHTMLX Diagram mit Angular](guides/integrations/angular_integration.md) wurde hinzugefügt +- Die Demo [DHTMLX Diagram mit React](guides/integrations/react_integration.md) wurde hinzugefügt +- Die Demo [DHTMLX Diagram mit Vue.js](guides/integrations/vue_integration.md) wurde hinzugefügt +- Die Möglichkeit, [identische Elemente mit unterschiedlichen Stilen und Einstellungen dem linken Panel des Editors hinzuzufügen](guides/diagram_editor/shapebar.md) + +### API {#api-1} + +- Neue Methoden der [CellManager-API](/api/cell_manager/): [add()](api/cell_manager/add_method.md), [getCellId()](api/cell_manager/getcellid_method.md), [getCellIndex()](api/cell_manager/getcellindex_method.md), [getSubHeaderCellId()](api/cell_manager/getsubheadercellid_method.md), [getSubHeaderCellIndex()](api/cell_manager/getsubheadercellindex_method.md), [getSubHeaderType()](api/cell_manager/getsubheadertype_method.md), [move()](api/cell_manager/move_method.md), [remove()](api/cell_manager/remove_method.md), [resetSwimlane()](api/cell_manager/resetswimlane_method.md), [setSwimlane()](api/cell_manager/setswimlane_method.md), [validation()](api/cell_manager/validation_method.md) +- Neue Events der [CellManager-API](/api/cell_manager/): [afterCellsAdd](api/cell_manager/aftercellsadd_event.md), [afterCellsMove](api/cell_manager/aftercellsmove_event.md), [afterCellsRemove](api/cell_manager/aftercellsremove_event.md), [afterCellsValidation](api/cell_manager/aftercellsvalidation_event.md), [beforeCellsAdd](api/cell_manager/beforecellsadd_event.md), [beforeCellsMove](api/cell_manager/beforecellsmove_event.md), [beforeCellsRemove](api/cell_manager/beforecellsremove_event.md), [beforeCellsValidation](api/cell_manager/beforecellsvalidation_event.md) +- Neue Events des Diagram-Objekts: [afterSubmenuOpen](api/diagram/aftersubmenuopen_event.md), [beforeSubmenuOpen](api/diagram/beforesubmenuopen_event.md), [groupClick](api/diagram/groupclick_event.md), [groupDblClick](api/diagram/groupdblclick_event.md), [groupHeaderClick](api/diagram/groupheaderclick_event.md), [groupHeaderDblClick](api/diagram/groupheaderdblclick_event.md), [groupMouseDown](api/diagram/groupmousedown_event.md), [itemClick](api/diagram/itemclick_event.md), [itemDblClick](api/diagram/itemdblclick_event.md), [itemMouseDown](api/diagram/itemmousedown_event.md), [itemMouseOut](api/diagram/itemmouseout_event.md), [itemMouseOver](api/diagram/itemmouseover_event.md), [lineDblClick](api/diagram/linedblclick_event.md), [lineMouseDown](api/diagram/linemousedown_event.md) +- Neue Events des Editor-Objekts: [shapeMoveEnd](api/diagram_editor/editor/events/shapemoveend_event.md), [beforeItemMove](api/diagram_editor/editor/events/beforeitemmove_event.md), [afterItemMove](api/diagram_editor/editor/events/afteritemmove_event.md), [itemMoveEnd](api/diagram_editor/editor/events/itemmoveend_event.md), [beforeGroupMove](api/diagram_editor/editor/events/beforegroupmove_event.md), [afterGroupMove](api/diagram_editor/editor/events/aftergroupmove_event.md), [groupMoveEnd](api/diagram_editor/editor/events/groupmoveend_event.md) +- Neue Methoden von DataCollection: [eachChild()](api/data_collection/eachchild_method.md), [eachParent()](api/data_collection/eachparent_method.md), [getRoot()](api/data_collection/getroot_method.md), [getRoots()](api/data_collection/getroots_method.md) +- Neue Events von InlineEditor: [afterEditorClose](api/inline_editor/aftereditorclose_event.md), [afterEditorEditing](api/inline_editor/aftereditorediting_event.md), [afterEditorOpen](api/inline_editor/aftereditoropen_event.md), [beforeEditorClose](api/inline_editor/beforeeditorclose_event.md), [beforeEditorEditing](api/inline_editor/beforeeditorediting_event.md), [beforeEditorOpen](api/inline_editor/beforeeditoropen_event.md) +- Neue Konfigurationsattribute "editable" und "fixed" des [Shape-Objekts](shapes/configuration_properties.md) + +### Aktualisierungen {#updates-6} + +- Verbesserte Tastaturnavigation +- Neu gestaltete Shapes +- Aktualisierte Events des Editor-Objekts: [beforeShapeMove](api/diagram_editor/editor/events/beforeshapemove_event.md) und [afterShapeMove](api/diagram_editor/editor/events/aftershapemove_event.md) +- Aktualisierte Struktur der Shape-Collection-API + +### Fehlerbehebungen {#fixes-20} + +- Behebt die fehlerhafte Funktion der TypeScript-Typdefinitionen im Editor +- Behebt das Problem, dass die gedrückte Toolbar-Schaltfläche im Editor, der sich innerhalb eines HTML-Formulars befindet, das Absenden des Formulars auslöste +- Nun ist es möglich, ein Element nur dann in der Größe zu ändern, wenn der Drehwinkel entweder 0 oder 360 Grad beträgt +- Deutliche Optimierung der Diagram-Stile + +## Version 3.1 {#version-31} + +Veröffentlicht am 15. April 2021 + +### Neue Funktionalität {#new-functionality-6} + +- [TypeScript-Unterstützung](guides/using_typescript.md) +- Ein neuer Mindmap-Modus ([type:"mindmap"](api/diagram/type_property.md)) von DHTMLX Diagram wurde hinzugefügt +- Die Möglichkeit, [die Richtung der untergeordneten Shapes relativ zum Wurzel-Shape im Mindmap-Modus von Diagram zu konfigurieren](guides/diagram/configuration.md#arranging-shapes-in-the-mindmap-mode-of-diagram) über die Konfigurationseigenschaft [typeConfig](api/diagram/typeconfig_property.md) des Diagram-Objekts +- Die Möglichkeit, [benutzerdefinierte Event-Handler für benutzerdefinierte Shapes hinzuzufügen](shapes/custom_shape.md#event-handlers-for-custom-shapes) über das Attribut "eventHandlers" der Methode [addShape()](api/diagram/addshape_method.md) +- Die Möglichkeit, die persönlichen Toolbars zur Bearbeitung von Elementen im [Rasterbereich](guides/diagram_editor/grid_area.md) über die Eigenschaft [shapeToolbar](api/diagram_editor/editor/config/shapetoolbar_property.md) des Editor-Objekts anzupassen +- Neue Events des Editor-Objekts: [BeforeShapeIconClick](api/diagram_editor/editor/events/beforeshapeiconclick_event.md) und [AfterShapeIconClick](api/diagram_editor/editor/events/aftershapeiconclick_event.md), [BeforeShapeMove](api/diagram_editor/editor/events/beforeshapemove_event.md) und [AfterShapeMove](api/diagram_editor/editor/events/aftershapeiconclick_event.md) +- Die Möglichkeit, das Senden von CSS-Stilen an den Export-Dienst über die Konfigurationsoption [exportStyles](api/diagram/exportstyles_property.md) des Diagram-Objekts zu deaktivieren + +### Aktualisierungen {#updates-7} + +- Die Konfigurationseigenschaft [type](api/diagram/type_property.md) des Diagram-Objekts wurde aktualisiert: neue Werte "default" und "mindmap" wurden hinzugefügt +- Die Methoden [collapseItem()](api/diagram/collapseitem_method.md) und [expandItem()](api/diagram/expanditem_method.md) wurden aktualisiert: der zweite Parameter "dir" wurde hinzugefügt +- Die Events [beforeCollapse](api/diagram/beforecollapse_event.md), [afterCollapse](api/diagram/aftercollapse_event.md), [beforeExpand](api/diagram/beforeexpand_event.md) und [afterExpand](api/diagram/afterexpand_event.md) wurden aktualisiert: der zweite Parameter "dir" wurde hinzugefügt + +### Fehlerbehebungen {#fixes-21} + +- Behebt das Problem mit dem Auswahlmodul für alle Typen von DHTMLX Diagram +- Behebt das Problem mit dem Scrollen des Diagramms, das im `default`-Modus initialisiert wurde, bei Anwendung der Methode "showItem()" auf das skalierte Diagramm +- Behebt die fehlerhafte Funktion des DOM-Parsers mit HTML-Vorlagen +- Behebt das Problem, dass das Wurzel-Shape nach dem Einklappen eines beliebigen untergeordneten Shapes eingeklappt wurde +- Behebt das Problem mit der Formatierung des Shape-Textes +- Behebt das Problem, das nach dem Hinzufügen langen Textes in das Textarea-Feld des rechten Panels des Editors auftrat +- Behebt das Problem beim Hinzufügen von Sonderzeichen zum Text benutzerdefinierter Shapes +- Behebt das Problem mit in der Konsole angezeigten Warnungen für benutzerdefinierte Shapes +- Behebt den Skriptfehler, der beim Löschen des Wurzel-Shapes im Editor ausgelöst wurde +- Behebt das Problem mit dem in der Konsole angezeigten Fehler nach Anwendung der Schaltfläche „Auto-Layout" im Editor, wenn der Editor nicht konfiguriert ist +- Behebt das Problem, dass der Typ der Shape-Kontur im `default`-Modus des Editors nach dessen Änderung nicht angewendet wurde +- Behebt das Problem bei der Nachverfolgung der Shape-Parameter im rechten Panel des Editors, der im `default`-Modus initialisiert wurde +- Behebt das Problem beim Entfernen des Fokus vom Shape im `default`-Modus des Editors +- Behebt das Problem beim Festlegen von Konnektoren zwischen den Shapes in der erforderlichen Reihenfolge, wenn der Editor im `default`-Modus initialisiert wird +- Behebt die fehlerhafte Funktion der Tastenkombination Ctrl+A im Org-Chart-Modus des Editors +- Behebt das Problem, dass Shapes ohne Konnektoren eingefügt wurden, wenn verbundene Shapes kopiert wurden +- Nun ist es nicht mehr möglich, das Wurzel-Shape über die Tastaturnavigation aus dem Editor zu entfernen, wenn der Editor im Org-Chart-Modus initialisiert ist + +## Version 3.0.4 {#version-304} + +Veröffentlicht am 27. Januar 2021 + +### Fehlerbehebungen {#fixes-22} + +- Behebt das fehlerhafte Verhalten des im Editor ausgewählten Shapes, der im `default`-Modus initialisiert wurde, bei der Arbeit mit dem Eingabefeld auf der Seite +- Behebt das Problem, dass ein eingeklapptes/ausgeklapptes Element nicht mit seinem übergeordneten Element funktionierte +- Behebt die fehlerhafte Funktion der Methode [showItem()](api/diagram/showitem_method.md), wenn das untergeordnete Element ausgeblendet ist + +## Version 3.0.3 {#version-303} + +Veröffentlicht am 23. Dezember 2020 + +### Fehlerbehebungen {#fixes-23} + +- Behebt das Problem mit dem Diagram-Exportdienst + +## Version 3.0.2 {#version-302} + +Veröffentlicht am 14. Juli 2020 + +### Fehlerbehebungen {#fixes-24} + +- Behebt das Problem beim Importieren von Daten aus JSON in den Editor, der im Org-Chart-Modus initialisiert wurde +- Behebt die fehlerhafte Funktion der Methode [addShape()](api/diagram/addshape_method.md) bei der Konfiguration des rechten Panels des Editors +- Verbessertes Verhalten des historyManager-Steuerelements der Toolbar im Editor + +## Version 3.0.1 {#version-301} + +Veröffentlicht am 29. Mai 2020 + +### Fehlerbehebungen {#fixes-25} + +- Behebt das Problem mit der Methode [autoPlace()](api/diagram/autoplace_method.md) +- Behebt das Problem mit den PNG/PDF-Exportmodulen + +## Version 3.0 {#version-30} + +Veröffentlicht am 12. Mai 2020 + +### Breaking Changes {#breaking-changes-2} + +Das neue Update führt einige Änderungen und Verbesserungen ein. Weitere Informationen zur aktuellen Version finden Sie im Artikel [Migration](migration.md#22---30). + +### Neue Funktionalität {#new-functionality-7} + +- Neue Methode [autoPlace()](api/diagram/autoplace_method.md) und neue Eigenschaft [autoplacement](api/diagram/autoplacement_property.md) wurden hinzugefügt, um [verbundene Shapes in der hierarchischen Struktur automatisch anzuordnen](guides/manipulating_items.md#arranging-shapes-automatically) +- [Möglichkeit, die Standardkonfiguration eines Shapes festzulegen](guides/diagram/configuration.md#setting-the-default-configuration-of-a-shape) über die Eigenschaft `defaults` bei der Initialisierung von [Diagram](api/diagram/defaults_property.md) oder [Diagram Editor](api/diagram_editor/editor/config/defaults_property.md) +- Die Methode [addShape()](api/diagram/addshape_method.md) zur [Erstellung benutzerdefinierter Shapes](shapes/custom_shape.md) in Diagram und Diagram Editor wurde hinzugefügt +- Neue Eigenschaften des Editor-Objekts: `controls`, [defaults](api/diagram_editor/editor/config/defaults_property.md), `shapeSections`, `shapeBarWidth`, `scalePreview`, [scale](api/diagram_editor/editor/config/scale_property.md), `gapPreview` +- Die Seitenleistenoption *Grid Step* wurde dem [rechten Panel des Editors](guides/diagram_editor/editbar.md) hinzugefügt +- Möglichkeit, beliebige Toolbar-Schaltflächen des Editors sowie die Seitenleistenoption *Grid Step* über die Eigenschaft `controls` des Editor-Objekts ein-/auszublenden +- Möglichkeit, [Seitenleistenoptionen zur Bearbeitung von Attributen benutzerdefinierter Shapes im rechten Panel des Editors zu konfigurieren](guides/diagram_editor/editbar.md) über das Attribut `properties` der Methode [addShape()](api/diagram/addshape_method.md) +- [Möglichkeit, Abschnitte im linken Panel des Editors anzupassen](guides/diagram_editor/shapebar.md#custom-sections) +- [Möglichkeit, das Erscheinungsbild der im linken Panel des Editors gerenderten Shapes anzupassen](guides/diagram_editor/shapebar.md) über die Eigenschaft [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) des Shape-Objekts +- Möglichkeit, [mehrere Shapes im Editor auszuwählen, zu kopieren, einzufügen, zu löschen und zu verschieben](guides/diagram_editor/grid_area.md#manipulating-multiple-items) +- Möglichkeit, [mehrere Konnektorlinien auszuwählen und zu löschen](guides/diagram_editor/grid_area.md#manipulating-multiple-items) im Editor, der im `default`-Modus initialisiert wurde +- Möglichkeit, Daten aus einer JSON-Datei über die Schaltfläche [„Daten importieren"](guides/diagram_editor/toolbar.md) der Toolbar in den Editor zu importieren +- Die Methode [destructor()](api/diagram/destructor_method.md) wurde hinzugefügt + +### Aktualisierungen {#updates-8} + +- Möglichkeit, benutzerdefinierte HTML-Vorlagen im IE zu verwenden +- Die Benutzeroberfläche von Diagram Editor wurde aktualisiert und verbessert +- Möglichkeit, Shapes von Mitte zu Mitte zu verbinden +- Ein Satz von Hotkeys für den Editor wurde aktualisiert +- Die Möglichkeit, eine Konnektorlinie mit dem *Text*-Shape im Editor zu verbinden, der im `default`-Modus initialisiert wurde +- Automatische Anpassung der Inhaltsbreite des *Text*-Shapes wurde hinzugefügt + +## Version 2.2.1 {#version-221} + +Veröffentlicht am 30. Dezember 2019 + +### Fehlerbehebungen {#fixes-26} + +- Problem mit der IE-Unterstützung für den Bildlader im Diagram Editor + +## Version 2.2 {#version-22} + +Veröffentlicht am 27. November 2019 + +### Neue Funktionalität {#new-functionality-8} + +- Möglichkeit, benutzerdefinierte Shapes mithilfe von SVG- und HTML-Vorlagen zu erstellen +- Möglichkeit, Diagramme mit unterschiedlichen Shape-Typen zu erstellen +- Die Möglichkeit, Daten aus dem Diagram Editor über die Schaltfläche „Daten exportieren" der [Toolbar](guides/diagram_editor/toolbar.md) in das JSON-Format zu exportieren +- Die Option [showExport](migration.md#toolbar-buttons-in-editor) und das Event `exportData` wurden in Diagram Editor hinzugefügt + +### Fehlerbehebungen {#fixes-27} + +- Behebt das Problem beim Exportieren eines Diagramms in die Formate PDF und PNG +- Behebt die fehlerhafte Funktion der Mausereignisse +- Behebt das Problem beim Löschen untergeordneter Shapes aus dem Diagramm, das im Org-Chart-Modus initialisiert wurde +- Behebt die fehlerhafte Funktion des rechten und linken Panels in Diagram Editor +- Behebt das Problem bei der automatischen Generierung eindeutiger IDs von Shapes und Konnektoren + +## Version 2.1.1 {#version-211} + +Veröffentlicht am 11. Oktober 2019 + +### Fehlerbehebungen {#fixes-28} +- Probleme mit einer img-card im IE + +## Version 2.1 {#version-21} + +Veröffentlicht am 22. Mai 2017 + +### Neue Funktionalität {#new-functionality-9} + +- Praktischer [Diagram-Editor](guides/diagram_editor/initialization.md) zum Erstellen übersichtlicher Diagramme +- Erweiterter Satz an Konfigurationsoptionen für [Shapes](shapes/configuration_properties.md) und [Linien](lines/configuration_properties.md) +- Größere Möglichkeiten zur [Anpassung von Diagrammen](guides/customization.md) + +### Aktualisierungen {#updates-9} + +- [Hotkeys](guides/diagram_editor/hot_keys.md) wurden zur Bearbeitung von Diagram im Editor hinzugefügt +- Neues Event [emptyAreaClick](api/diagram/emptyareaclick_event.md) wurde hinzugefügt +- Die Konfigurationsoption `lineGap` wurde hinzugefügt + +## Version 2.0 {#version-20} + +Veröffentlicht am 15. Februar 2017 + +### Breaking Changes {#breaking-changes-3} + +Die API-Struktur wurde vollständig reorganisiert und verbessert, um die Arbeit damit zu vereinfachen. Folgen Sie dem Artikel [Migration](migration.md#11---20), um alle Änderungen kennenzulernen. + +### Neue Funktionalität {#new-functionality-10} + +- Möglichkeit, unterschiedliche Diagramme zu erstellen und zu stylen +- Vielfalt an [Shapes](shapes/default_shapes.md) und [Linien](/lines/) +- [Export in das PDF-Format](guides/data_export.md) +- [Export in das PNG-Format](guides/data_export.md) + +### Aktualisierungen {#updates-10} + +- Möglichkeit, [benötigte Shapes zu finden](guides/manipulating_items.md#finding-the-necessary-item) +- Möglichkeit, [Shapes nach festgelegten Kriterien zu filtern](guides/manipulating_items.md#filtering-items) +- Möglichkeit, [eine Toolbar mit Symbolen für Shapes hinzuzufügen](guides/diagram/configuration.md#setting-toolbar-for-shapes), um die Interaktion mit ihnen zu vereinfachen +- Verbesserte Leistung +- Möglichkeit, sich an einen beliebigen HTML-Container anzupassen, sowie integrierte automatische Größenanpassung + +## Version 1.1 {#version-11} + +Veröffentlicht am 5. Dezember 2017 + +### Neue Funktionalität {#new-functionality-11} + +- [Verwendung des Editors im Org-Chart-Modus](api/diagram_editor/editor/config/type_property.md) +- Möglichkeit, [den Zustand zu speichern und wiederherzustellen](guides/loading_data.md#saving-and-restoring-state) +- Erweiterte [Anpassungsmöglichkeiten](guides/customization.md) + +### Aktualisierungen {#updates-11} + +- [Erweiterte API](api/diagram/api_overview.md): neue Methoden, Eigenschaften und Events + +## Version 1.0 {#version-10} + +Veröffentlicht am 29. September 2017 + +### Ursprüngliche Funktionalität {#initial-functionality} + +- Organogramm-Modus +- Vertikale und horizontale Autoplatzierungsstrategien +- Laden von Daten aus JSON +- API zur Verwaltung von Daten und Zweigstatus diff --git a/i18n/de/docusaurus-theme-classic/footer.json b/i18n/de/docusaurus-theme-classic/footer.json new file mode 100644 index 000000000..93e4ff60c --- /dev/null +++ b/i18n/de/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Development center", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "Community", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "Company", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download Diagram": { + "message": "Download Diagram", + "description": "The label of footer link with label=Download Diagram linking to https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml" + }, + "link.item.label.Examples": { + "message": "Examples", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/xdvi4fek?tag=diagram" + }, + "link.item.label.Blog": { + "message": "Blog", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/" + }, + "link.item.label.Forum": { + "message": "Forum", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/diagram/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "About us", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Contact us", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Licensing", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxDiagram/#licensing" + } +} diff --git a/i18n/de/docusaurus-theme-classic/navbar.json b/i18n/de/docusaurus-theme-classic/navbar.json new file mode 100644 index 000000000..c1338bbaf --- /dev/null +++ b/i18n/de/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript Diagram Documentation", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "DHTMLX Diagram Documentation", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "Examples", + "description": "Navbar item with label Examples" + }, + "item.label.Forum": { + "message": "Forum", + "description": "Navbar item with label Forum" + }, + "item.label.Support": { + "message": "Support", + "description": "Navbar item with label Support" + }, + "item.label.Download": { + "message": "Download", + "description": "Navbar item with label Download" + } +} diff --git a/i18n/ko/code.json b/i18n/ko/code.json new file mode 100644 index 000000000..2f975b97c --- /dev/null +++ b/i18n/ko/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "페이지에 오류가 발생하였습니다.", + "description": "The title of the fallback page when the page crashed" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "맨 위로 스크롤하기", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "게시물 목록", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "게시물 목록", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "블로그 게시물 목록 탐색", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "이전 페이지", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "다음 페이지", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "블로그 게시물 탐색", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "이전 게시물", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "다음 게시물", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "모든 태그 보기", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "system mode", + "description": "The name for the system color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "밝은 모드", + "description": "The name for the light color mode" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "어두운 모드", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel": { + "message": "어두운 모드와 밝은 모드 전환하기 (현재 {mode})", + "description": "The ARIA label for the color mode toggle" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "{count} 항목", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "탐색 경로", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "문서 페이지", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "이전", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "다음", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "{count}개 문서가", + "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.tagDocListPageTitle": { + "message": "{nDocsTagged} \"{tagName}\" 태그에 분류되었습니다", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "버전: {versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "{siteTitle} {versionLabel} 문서는 아직 정식 공개되지 않았습니다.", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "{siteTitle} {versionLabel} 문서는 더 이상 업데이트되지 않습니다.", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "최신 문서는 {latestVersionLink} ({versionLabel})을 확인하세요.", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "최신 버전", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "페이지 편집", + "description": "The link label to edit the current page" + }, + "theme.common.headingLinkTitle": { + "message": "{heading}에 대한 직접 링크", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": " {date}에", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": " {user}가", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "최종 수정: {atDate}{byUser}", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.NotFound.title": { + "message": "페이지를 찾을 수 없습니다.", + "description": "The title of the 404 page" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "버전", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.tags.tagsListLabel": { + "message": "태그:", + "description": "The label alongside a tag list" + }, + "theme.admonition.caution": { + "message": "주의", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "위험", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "정보", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.note": { + "message": "노트", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "팁", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "경고", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "닫기", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "최근 블로그 문서 둘러보기", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "사이드바 분류 '{label}' 펼치기", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "사이드바 분류 '{label}' 접기", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "(opens in new tab)", + "description": "The ARIA label for the external link icon" + }, + "theme.NavBar.navAriaLabel": { + "message": "메인", + "description": "The ARIA label for the main navigation" + }, + "theme.NotFound.p1": { + "message": "원하는 페이지를 찾을 수 없습니다.", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "사이트 관리자에게 링크가 깨진 것을 알려주세요.", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "언어", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "이 페이지에서", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "자세히 보기", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "{title} 에 대해 더 읽어보기", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.blog.post.readingTime.plurals": { + "message": "약 {readingTime}분", + "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.CodeBlock.copy": { + "message": "복사", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.copied": { + "message": "복사했습니다", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "클립보드에 코드 복사", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "줄 바꿈 전환", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.docs.breadcrumbs.home": { + "message": "홈", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "사이드바 숨기기", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "사이드바 숨기기", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "문서 사이드바", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "사이드바 닫기", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← 메인 메뉴로 돌아가기", + "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "사이드바 펼치거나 접기", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "Expand the dropdown", + "description": "The ARIA label of the button to expand the mobile dropdown navbar item" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "Collapse the dropdown", + "description": "The ARIA label of the button to collapse the mobile dropdown navbar item" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "사이드바 열기", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "사이드바 열기", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.SearchBar.seeAll": { + "message": "{count}개의 결과 확인하기" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "{count}개의 문서를 찾았습니다.", + "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.SearchPage.existingResultsTitle": { + "message": "\"{query}\" 검색 결과", + "description": "The search page title for non-empty query" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "문서를 검색합니다.", + "description": "The search page title for empty query" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "검색어를 입력하세요.", + "description": "The placeholder for search page input" + }, + "theme.SearchPage.inputLabel": { + "message": "검색", + "description": "The ARIA label for search page input" + }, + "theme.SearchPage.algoliaLabel": { + "message": "Algolia 제공", + "description": "The description label for Algolia mention" + }, + "theme.SearchPage.noResultsText": { + "message": "검색 결과가 없습니다.", + "description": "The paragraph for empty search result" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "새로운 검색 결과를 불러오는 중입니다.", + "description": "The paragraph for fetching new search results" + }, + "theme.SearchBar.label": { + "message": "검색", + "description": "The ARIA label and placeholder for search button" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "검색어 초기화", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "취소", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "문서 검색", + "description": "The placeholder text for the main search input field" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "다른 질문하기...", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "답변 중...", + "description": "The placeholder text for search box when AI is streaming an answer" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "검색", + "description": "The hint for the search box enter key text" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "입력", + "description": "The hint for the Ask AI search box enter key text" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "검색", + "description": "The ARIA label for search input" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "키워드 검색으로 돌아가기", + "description": "The text for back to keyword search button" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "키워드 검색으로 돌아가기", + "description": "The ARIA label for back to keyword search button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "최근", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "최근 검색어 없음", + "description": "The text when there are no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "이 검색어를 저장", + "description": "The title for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "이 검색어를 최근 검색어에서 삭제", + "description": "The title for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "즐겨찾기", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "이 검색어를 즐겨찾기에서 삭제", + "description": "The title for remove favorite search button" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "최근 대화", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "이 대화를 기록에서 삭제", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "결과를 불러올 수 없음", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "인터넷 연결을 다시 확인하시기 바랍니다.", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "AI에게 질문: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "답변은 AI가 생성하며 오류가 있을 수 있습니다. 응답을 확인해주세요.", + "description": "The disclaimer text for AI answers" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "관련 출처", + "description": "The text for related sources" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "생각 중...", + "description": "The text when AI is thinking" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "복사", + "description": "The text for copy button" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "복사됨!", + "description": "The text for copy button when copied" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "복사", + "description": "The title for copy button" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "좋아요", + "description": "The title for like button" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "싫어요", + "description": "The title for dislike button" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "피드백 감사합니다!", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "검색 중...", + "description": "The text before tool call" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "검색 중: ", + "description": "The text during tool call" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "검색 완료: ", + "description": "The text after tool call" + }, + "theme.SearchModal.footer.selectText": { + "message": "로 선택", + "description": "The select text for footer" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "질문 제출", + "description": "The submit question text for footer" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "엔터 키", + "description": "The ARIA label for select key in footer" + }, + "theme.SearchModal.footer.navigateText": { + "message": "로 이동", + "description": "The navigate text for footer" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "화살표 위 키", + "description": "The ARIA label for navigate up key in footer" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "화살표 아래 키", + "description": "The ARIA label for navigate down key in footer" + }, + "theme.SearchModal.footer.closeText": { + "message": "로 종료", + "description": "The close text for footer" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Esc 키", + "description": "The ARIA label for close key in footer" + }, + "theme.SearchModal.footer.searchByText": { + "message": "검색 제공", + "description": "The 'Powered by' text for footer" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "검색으로 돌아가기", + "description": "The back to search text for footer" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "검색 결과 없음", + "description": "The text when there are no results" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "다른 추천 검색어", + "description": "The text for suggested query" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "검색 결과가 없는 것이 오류라고 생각되십니까?", + "description": "The text for reporting missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "알려주시기 바랍니다.", + "description": "The link text for reporting missing results" + }, + "theme.SearchModal.placeholder": { + "message": "문서 검색", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "theme.blog.post.plurals": { + "message": "{count}개 게시물", + "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.blog.tagTitle": { + "message": "\"{tagName}\" 태그로 연결된 {nPosts}개의 게시물이 있습니다.", + "description": "The title of the page for a blog tag" + }, + "theme.blog.author.pageTitle": { + "message": "{authorName} - {nPosts}", + "description": "The title of the page for a blog author" + }, + "theme.blog.authorsList.pageTitle": { + "message": "저자", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "모든 저자 보기", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "작성자가 아직 게시글을 작성하지 않았습니다.", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "색인되지 않은 문서", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "이 문서는 색인되지 않습니다. 검색 엔진이 이 문서를 색인하지 않으며, 주소를 알고 있는 사용자만 접근할 수 있습니다.", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "작성 중인 페이지", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "이 페이지는 아직 작성 중입니다. 개발 환경에서만 보이며 프로덕션 빌드에서는 제외됩니다.", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "다시 시도해 보세요", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "본문으로 건너뛰기", + "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" + }, + "theme.tags.tagsPageTitle": { + "message": "태그", + "description": "The title of the tag list page" + } +} diff --git a/i18n/ko/docusaurus-plugin-content-blog/options.json b/i18n/ko/docusaurus-plugin-content-blog/options.json new file mode 100644 index 000000000..9239ff706 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/ko/docusaurus-plugin-content-docs/current.json b/i18n/ko/docusaurus-plugin-content-docs/current.json new file mode 100644 index 000000000..6db8ff5af --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,262 @@ +{ + "version.label": { + "message": "Next", + "description": "The label for version current" + }, + "sidebar.docs.category.What's new and migration": { + "message": "What's new and migration", + "description": "The label for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.What's new and migration.link.generated-index.title": { + "message": "What's new and migration", + "description": "The generated-index page title for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.API": { + "message": "API", + "description": "The label for category 'API' in sidebar 'docs'" + }, + "sidebar.docs.category.API.link.generated-index.title": { + "message": "API", + "description": "The generated-index page title for category 'API' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram API": { + "message": "Diagram API", + "description": "The label for category 'Diagram API' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram methods": { + "message": "Diagram methods", + "description": "The label for category 'Diagram methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram events": { + "message": "Diagram events", + "description": "The label for category 'Diagram events' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram properties": { + "message": "Diagram properties", + "description": "The label for category 'Diagram properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram Editor API": { + "message": "Diagram Editor API", + "description": "The label for category 'Diagram Editor API' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram Editor API.link.generated-index.title": { + "message": "Diagram Editor API", + "description": "The generated-index page title for category 'Diagram Editor API' in sidebar 'docs'" + }, + "sidebar.docs.category.Editor API": { + "message": "Editor API", + "description": "The label for category 'Editor API' in sidebar 'docs'" + }, + "sidebar.docs.category.Editor methods": { + "message": "Editor methods", + "description": "The label for category 'Editor methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Editor events": { + "message": "Editor events", + "description": "The label for category 'Editor events' in sidebar 'docs'" + }, + "sidebar.docs.category.Editor properties": { + "message": "Editor properties", + "description": "The label for category 'Editor properties' in sidebar 'docs'" + }, + "sidebar.docs.category.History manager API": { + "message": "History manager API", + "description": "The label for category 'History manager API' in sidebar 'docs'" + }, + "sidebar.docs.category.History manager methods": { + "message": "History manager methods", + "description": "The label for category 'History manager methods' in sidebar 'docs'" + }, + "sidebar.docs.category.History manager properties": { + "message": "History manager properties", + "description": "The label for category 'History manager properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Copy manager API": { + "message": "Copy manager API", + "description": "The label for category 'Copy manager API' in sidebar 'docs'" + }, + "sidebar.docs.category.Copy manager methods": { + "message": "Copy manager methods", + "description": "The label for category 'Copy manager methods' in sidebar 'docs'" + }, + "sidebar.docs.category.View API": { + "message": "View API", + "description": "The label for category 'View API' in sidebar 'docs'" + }, + "sidebar.docs.category.View methods": { + "message": "View methods", + "description": "The label for category 'View methods' in sidebar 'docs'" + }, + "sidebar.docs.category.View events": { + "message": "View events", + "description": "The label for category 'View events' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar API": { + "message": "Toolbar API", + "description": "The label for category 'Toolbar API' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar methods": { + "message": "Toolbar methods", + "description": "The label for category 'Toolbar methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar properties": { + "message": "Toolbar properties", + "description": "The label for category 'Toolbar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar properties.link.generated-index.title": { + "message": "Toolbar properties", + "description": "The generated-index page title for category 'Toolbar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar events": { + "message": "Toolbar events", + "description": "The label for category 'Toolbar events' in sidebar 'docs'" + }, + "sidebar.docs.category.Editbar API": { + "message": "Editbar API", + "description": "The label for category 'Editbar API' in sidebar 'docs'" + }, + "sidebar.docs.category.Editbar properties": { + "message": "Editbar properties", + "description": "The label for category 'Editbar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Editbar properties.link.generated-index.title": { + "message": "Editbar properties", + "description": "The generated-index page title for category 'Editbar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Basic controls": { + "message": "Basic controls", + "description": "The label for category 'Basic controls' in sidebar 'docs'" + }, + "sidebar.docs.category.Complex controls": { + "message": "Complex controls", + "description": "The label for category 'Complex controls' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapebar API": { + "message": "Shapebar API", + "description": "The label for category 'Shapebar API' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapebar properties": { + "message": "Shapebar properties", + "description": "The label for category 'Shapebar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapebar properties.link.generated-index.title": { + "message": "Shapebar properties", + "description": "The generated-index page title for category 'Shapebar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Items API": { + "message": "Items API", + "description": "The label for category 'Items API' in sidebar 'docs'" + }, + "sidebar.docs.category.Items API.link.generated-index.title": { + "message": "Items API", + "description": "The generated-index page title for category 'Items API' in sidebar 'docs'" + }, + "sidebar.docs.category.Common API": { + "message": "Common API", + "description": "The label for category 'Common API' in sidebar 'docs'" + }, + "sidebar.docs.category.Common API.link.generated-index.title": { + "message": "Common API", + "description": "The generated-index page title for category 'Common API' in sidebar 'docs'" + }, + "sidebar.docs.category.CellManager API": { + "message": "CellManager API", + "description": "The label for category 'CellManager API' in sidebar 'docs'" + }, + "sidebar.docs.category.CellManager methods": { + "message": "CellManager methods", + "description": "The label for category 'CellManager methods' in sidebar 'docs'" + }, + "sidebar.docs.category.CellManager events": { + "message": "CellManager events", + "description": "The label for category 'CellManager events' in sidebar 'docs'" + }, + "sidebar.docs.category.DataCollection API": { + "message": "DataCollection API", + "description": "The label for category 'DataCollection API' in sidebar 'docs'" + }, + "sidebar.docs.category.DataCollection methods": { + "message": "DataCollection methods", + "description": "The label for category 'DataCollection methods' in sidebar 'docs'" + }, + "sidebar.docs.category.DataCollection events": { + "message": "DataCollection events", + "description": "The label for category 'DataCollection events' in sidebar 'docs'" + }, + "sidebar.docs.category.Export methods": { + "message": "Export methods", + "description": "The label for category 'Export methods' in sidebar 'docs'" + }, + "sidebar.docs.category.InlineEditor events": { + "message": "InlineEditor events", + "description": "The label for category 'InlineEditor events' in sidebar 'docs'" + }, + "sidebar.docs.category.Selection API": { + "message": "Selection API", + "description": "The label for category 'Selection API' in sidebar 'docs'" + }, + "sidebar.docs.category.Selection methods": { + "message": "Selection methods", + "description": "The label for category 'Selection methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Selection events": { + "message": "Selection events", + "description": "The label for category 'Selection events' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides": { + "message": "Guides", + "description": "The label for category 'Guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram": { + "message": "Diagram", + "description": "The label for category 'Diagram' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram.link.generated-index.title": { + "message": "Diagram", + "description": "The generated-index page title for category 'Diagram' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram items": { + "message": "Diagram items", + "description": "The label for category 'Diagram items' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapes": { + "message": "Shapes", + "description": "The label for category 'Shapes' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapes.link.generated-index.title": { + "message": "Shapes", + "description": "The generated-index page title for category 'Shapes' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram Editor": { + "message": "Diagram Editor", + "description": "The label for category 'Diagram Editor' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram Editor.link.generated-index.title": { + "message": "Diagram editor", + "description": "The generated-index page title for category 'Diagram Editor' in sidebar 'docs'" + }, + "sidebar.docs.category.Themes": { + "message": "Themes", + "description": "The label for category 'Themes' in sidebar 'docs'" + }, + "sidebar.docs.category.Themes.link.generated-index.title": { + "message": "Themes", + "description": "The generated-index page title for category 'Themes' in sidebar 'docs'" + }, + "sidebar.docs.category.Integrations": { + "message": "Integrations", + "description": "The label for category 'Integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.Integrations.link.generated-index.title": { + "message": "Integrations", + "description": "The generated-index page title for category 'Integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.AI Integrations": { + "message": "AI Integrations", + "description": "The label for category 'AI Integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.AI Integrations.link.generated-index.title": { + "message": "AI Integrations", + "description": "The generated-index page title for category 'AI Integrations' in sidebar 'docs'" + } +} diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/.sync b/i18n/ko/docusaurus-plugin-content-docs/current/.sync new file mode 100644 index 000000000..8289040db --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +c2c721544fcd090090f99a1a5f1755359dbfe007 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/add_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/add_method.md new file mode 100644 index 000000000..b2d32e3cf --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/add_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: add() +title: Cell Manager의 add 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 add 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# add() + +:::info +`add()` 메서드는 시스템에 의해 자동으로 검증됩니다. Swimlane의 구조상 불가능한 경우 셀이 추가되지 않습니다. +::: + +### 설명 {#description} + +@short: Swimlane에 행이나 열로 셀을 추가합니다 + +### 사용법 {#usage} + +~~~jsx +add( + cellIndex: number, + dir: string // "up" | "down" | "left" | "right" +): void; +~~~ + +### 매개변수 {#parameters} + +- `cellIndex` - (필수) 레이아웃에서 셀의 시작 인덱스입니다. 인덱스는 0부터 시작합니다 +- `dir` - (필수) 작업의 방향입니다: `"up"` | `"down"` | `"left"` | `"right"` + +### 예제 {#example} + +~~~jsx +// 다이어그램 초기화 +const diagram = new dhx.Diagram("diagram_container", { + // 구성 옵션 +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // 활성 Swimlane 설정 + +diagram.cellManager.add(0, "down"); // 셀을 행으로 추가 +~~~ + +**Change log**: v4.0에서 추가 + +**Related article**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsadd_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsadd_event.md new file mode 100644 index 000000000..b2a5b1025 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsadd_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: afterCellsAdd +title: Cell Manager의 afterCellsAdd 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 afterCellsAdd 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# afterCellsAdd + +### 설명 {#description} + +@short: 새 셀이 Swimlane에 추가된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterCellsAdd: (swimlaneId: string | number) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 콜백은 다음 매개변수를 받습니다: + +- `swimlaneId` - (필수) 항목의 id입니다 + +### 예제 {#example} + +~~~jsx {9-11} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("afterCellsAdd", (swimlaneId) => { + console.log(swimlaneId); +}); +~~~ + +**Change log**: v4.0에서 추가 + +**Related article**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsmove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsmove_event.md new file mode 100644 index 000000000..756059216 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsmove_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: afterCellsMove +title: Cell Manager의 afterCellsMove 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 afterCellsMove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# afterCellsMove + +### 설명 {#description} + +@short: Swimlane의 셀이 이동된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterCellsMove: (swimlaneId: string | number) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 콜백은 다음 매개변수를 받습니다: + +- `swimlaneId` - (필수) 항목의 id입니다 + +### 예제 {#example} + +~~~jsx {9-11} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("afterCellsMove", (swimlaneId) => { + console.log(swimlaneId); +}); +~~~ + +**Change log**: v4.0에서 추가 + +**Related article**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsremove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsremove_event.md new file mode 100644 index 000000000..c0a9b3025 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsremove_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: afterCellsRemove +title: Cell Manager의 afterCellsRemove 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 afterCellsRemove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# afterCellsRemove + +### 설명 {#description} + +@short: Swimlane의 셀이 제거된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterCellsRemove: (swimlaneId: string | number) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 콜백은 다음 매개변수를 받습니다: + +- `swimlaneId` - (필수) 항목의 id입니다 + +### 예제 {#example} + +~~~jsx {9-11} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("afterCellsRemove", (swimlaneId) => { + console.log(swimlaneId); +}); +~~~ + +**Change log**: v4.0에서 추가 + +**Related article**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsvalidation_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsvalidation_event.md new file mode 100644 index 000000000..2723f6bfc --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsvalidation_event.md @@ -0,0 +1,49 @@ +--- +sidebar_label: afterCellsValidation +title: Cell Manager의 afterCellsValidation 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 afterCellsValidation 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# afterCellsValidation + +### 설명 {#description} + +@short: Swimlane의 셀이 검증된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterCellsValidation: ( + swimlaneId: string | number, + validate: boolean, + action: "move" | "remove" | "add" +) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 콜백은 다음 매개변수를 받습니다: + +- `swimlaneId` - (필수) 항목의 id입니다 +- `validate` - (필수) 검증 여부입니다 +- `action` - (필수) 작업의 유형입니다 + +### 예제 {#example} + +~~~jsx {9-11} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("afterCellsValidation", (swimlaneId, validate, action) => { + console.log(swimlaneId, validate, action); +}); +~~~ + +**Change log**: v4.0에서 추가 + +**Related article**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsadd_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsadd_event.md new file mode 100644 index 000000000..8a36af701 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsadd_event.md @@ -0,0 +1,48 @@ +--- +sidebar_label: beforeCellsAdd +title: Cell Manager의 beforeCellsAdd 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 beforeCellsAdd 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# beforeCellsAdd + +### 설명 {#description} + +@short: 새로운 셀이 swimlane에 추가되기 전에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeCellsAdd: (swimlaneId: string | number) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +이 이벤트의 콜백은 다음 매개변수를 받습니다: + +- `swimlaneId` - (필수) 항목의 ID + +### 반환값 {#returns} + +새로운 셀 추가를 방지하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다 + +### 예제 {#example} + +~~~jsx {9-12} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("beforeCellsAdd", (swimlaneId) => { + console.log(swimlaneId); + return true; +}); +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsmove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsmove_event.md new file mode 100644 index 000000000..9e844785d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsmove_event.md @@ -0,0 +1,48 @@ +--- +sidebar_label: beforeCellsMove +title: Cell Manager의 beforeCellsMove 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 beforeCellsMove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# beforeCellsMove + +### 설명 {#description} + +@short: swimlane의 셀이 이동되기 전에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeCellsMove: (swimlaneId: string | number) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +이 이벤트의 콜백은 다음 매개변수를 받습니다: + +- `swimlaneId` - (필수) 항목의 ID + +### 반환값 {#returns} + +셀 이동을 방지하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다 + +### 예제 {#example} + +~~~jsx {9-12} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("beforeCellsMove", (swimlaneId) => { + console.log(swimlaneId); + return true; +}); +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsremove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsremove_event.md new file mode 100644 index 000000000..35d0d8201 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsremove_event.md @@ -0,0 +1,48 @@ +--- +sidebar_label: beforeCellsRemove +title: Cell Manager의 beforeCellsRemove 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 beforeCellsRemove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# beforeCellsRemove + +### 설명 {#description} + +@short: swimlane의 셀이 제거되기 전에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeCellsRemove: (swimlaneId: string | number) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +이 이벤트의 콜백은 다음 매개변수를 받습니다: + +- `swimlaneId` - (필수) 항목의 ID + +### 반환값 {#returns} + +셀 제거를 방지하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다 + +### 예제 {#example} + +~~~jsx {9-12} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("beforeCellsRemove", (swimlaneId) => { + console.log(swimlaneId); + return true; +}); +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsvalidation_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsvalidation_event.md new file mode 100644 index 000000000..91b74a2c2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsvalidation_event.md @@ -0,0 +1,52 @@ +--- +sidebar_label: beforeCellsValidation +title: Cell Manager의 beforeCellsValidation 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 beforeCellsValidation 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# beforeCellsValidation + +### 설명 {#description} + +@short: swimlane의 셀이 검증되기 전에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeCellsValidation: ( + swimlaneId: string | number, + action: "move" | "remove" | "add" +) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +이 이벤트의 콜백은 다음 매개변수를 받습니다: + +- `swimlaneId` - (필수) 항목의 ID +- `action` - (필수) 동작의 유형 + +### 반환값 {#returns} + +새로운 셀의 검증을 방지하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다 + +### 예제 {#example} + +~~~jsx {9-12} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("beforeCellsValidation", (swimlaneId, action) => { + console.log(swimlaneId, action); + return true; +}); +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getcellid_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getcellid_method.md new file mode 100644 index 000000000..237a5c99b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getcellid_method.md @@ -0,0 +1,49 @@ +--- +sidebar_label: getCellId() +title: Cell Manager의 getCellId 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 getCellId 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# getCellId() + +### 설명 {#description} + +@short: 인덱스로 swimlane의 셀 ID를 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getCellId( + cellIndex: number, + type: string // "row" | "col" +): string | number | undefined; +~~~ + +### 매개변수 {#parameters} + +- `cellIndex` - (필수) 레이아웃에서 셀의 시작 인덱스입니다. 인덱스는 0부터 시작합니다 +- `type` - (필수) 인덱스를 계산할 방향의 유형: `"row"` | `"col"` + +### 반환값 {#returns} + +이 메서드는 셀의 ID를 반환합니다 + +### 예제 {#example} + +~~~jsx +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + // 구성 옵션 +}); +diagram.data.parse(data); + +// 활성 swimlane 설정 +diagram.cellManager.setSwimlane("main"); + +// 셀의 ID 가져오기 +diagram.cellManager.getCellId(0, "row"); // -> "r01" +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getcellindex_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getcellindex_method.md new file mode 100644 index 000000000..74bc254ab --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getcellindex_method.md @@ -0,0 +1,49 @@ +--- +sidebar_label: getCellIndex() +title: Cell Manager의 getCellIndex 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 getCellIndex 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# getCellIndex() + +### 설명 {#description} + +@short: id로 swimlane 셀의 인덱스를 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getCellIndex( + cellId: string | number, + type: string // "row" | "col" +): number | undefined; +~~~ + +### 매개변수 {#parameters} + +- `cellId` - (필수) 셀의 id +- `type` - (필수) 인덱스를 계산할 방향의 유형: `"row"` | `"col"` + +### 반환값 {#returns} + +이 메서드는 셀의 인덱스를 반환합니다. 인덱스는 0부터 시작합니다 + +### 예제 {#example} + +~~~jsx +// 다이어그램 초기화 +const diagram = new dhx.Diagram("diagram_container", { + // 설정 옵션 +}); +diagram.data.parse(data); + +// 활성 swimlane 설정 +diagram.cellManager.setSwimlane("main"); + +// 셀의 인덱스 가져오기 +diagram.cellManager.getCellIndex("r01", "row"); // -> 0 +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellid_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellid_method.md new file mode 100644 index 000000000..d4b7cf371 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellid_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: getSubHeaderCellId() +title: Cell Manager의 getSubHeaderCellId 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 getSubHeaderCellId 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# getSubHeaderCellId() + +### 설명 {#description} + +@short: 서브헤더 id로 swimlane 셀의 id를 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getSubHeaderCellId(subheaderId: string): string | number; +~~~ + +### 매개변수 {#parameters} + +- `subheaderId` - (필수) swimlane 서브헤더의 id + +### 반환값 {#returns} + +이 메서드는 셀의 id를 반환합니다 + +### 예제 {#example} + +~~~jsx +// 다이어그램 초기화 +const diagram = new dhx.Diagram("diagram_container", { + // 설정 옵션 +}); +diagram.data.parse(data); + +// 활성 swimlane 설정 +diagram.cellManager.setSwimlane("main"); + +// 셀의 id 가져오기 +diagram.cellManager.getSubHeaderCellId("sub01"); // -> "r01" +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellindex_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellindex_method.md new file mode 100644 index 000000000..6a8679887 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellindex_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: getSubHeaderCellIndex() +title: Cell Manager의 getSubHeaderCellIndex 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 getSubHeaderCellIndex 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# getSubHeaderCellIndex() + +### 설명 {#description} + +@short: 서브헤더 id로 swimlane 셀의 인덱스를 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getSubHeaderCellIndex(subheaderId: string): number; +~~~ + +### 매개변수 {#parameters} + +- `subheaderId` - (필수) swimlane 서브헤더의 id + +### 반환값 {#returns} + +이 메서드는 셀의 인덱스를 반환합니다. 인덱스는 0부터 시작합니다 + +### 예제 {#example} + +~~~jsx +// 다이어그램 초기화 +const diagram = new dhx.Diagram("diagram_container", { + // 설정 옵션 +}); +diagram.data.parse(data); + +// 활성 swimlane 설정 +diagram.cellManager.setSwimlane("main"); + +// 셀의 인덱스 가져오기 +diagram.cellManager.getSubHeaderCellIndex("sub01"); // -> 0 +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadertype_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadertype_method.md new file mode 100644 index 000000000..6c68cb563 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadertype_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: getSubHeaderType() +title: Cell Manager의 getSubHeaderType 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 getSubHeaderType 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# getSubHeaderType() + +### 설명 {#description} + +@short: id로 swimlane 서브헤더의 유형을 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getSubHeaderType(subheaderId: string): "row" | "col" | undefined; +~~~ + +### 매개변수 {#parameters} + +- `subheaderId` - (필수) swimlane 서브헤더의 id + +### 반환값 {#returns} + +이 메서드는 swimlane 서브헤더의 유형을 반환합니다: `"row"` | `"col"` | undefined + +### 예제 {#example} + +~~~jsx +// 다이어그램 초기화 +const diagram = new dhx.Diagram("diagram_container", { + // 설정 옵션 +}); +diagram.data.parse(data); + +// 활성 swimlane 설정 +diagram.cellManager.setSwimlane("main"); + +// 방향 유형 가져오기 +diagram.cellManager.getSubHeaderType("sub01"); // -> "row" +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/index.md new file mode 100644 index 000000000..cf4eeffe6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/index.md @@ -0,0 +1,38 @@ +--- +sidebar_label: 개요 +title: CellManager 개요 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 CellManager의 개요를 확인할 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# CellManager 개요 {#cellmanager-overview} + +DHTMLX Diagram 라이브러리는 [swimlane과 그 셀들](/swimlanes/)을 동적으로 조작할 수 있는 API 세트를 제공합니다. 이 API는 다이어그램과 에디터에서 모두 사용할 수 있습니다. + +## 메서드 {#methods} + +| Name | Description | +| :--------------------------------------------------- | :---------------------------------------------------------- | +| [](api/cell_manager/add_method.md) | @getshort(api/cell_manager/add_method.md) | +| [](api/cell_manager/getcellid_method.md) | @getshort(api/cell_manager/getcellid_method.md) | +| [](api/cell_manager/getcellindex_method.md) | @getshort(api/cell_manager/getcellindex_method.md) | +| [](api/cell_manager/getsubheadercellid_method.md) | @getshort(api/cell_manager/getsubheadercellid_method.md) | +| [](api/cell_manager/getsubheadercellindex_method.md) | @getshort(api/cell_manager/getsubheadercellindex_method.md) | +| [](api/cell_manager/getsubheadertype_method.md) | @getshort(api/cell_manager/getsubheadertype_method.md) | +| [](api/cell_manager/move_method.md) | @getshort(api/cell_manager/move_method.md) | +| [](api/cell_manager/remove_method.md) | @getshort(api/cell_manager/remove_method.md) | +| [](api/cell_manager/resetswimlane_method.md) | @getshort(api/cell_manager/resetswimlane_method.md) | +| [](api/cell_manager/setswimlane_method.md) | @getshort(api/cell_manager/setswimlane_method.md) | +| [](api/cell_manager/validation_method.md) | @getshort(api/cell_manager/validation_method.md) | + +## Events + +| Name | Description | +| :-------------------------------------------------- | :--------------------------------------------------------- | +| [](api/cell_manager/aftercellsadd_event.md) | @getshort(api/cell_manager/aftercellsadd_event.md) | +| [](api/cell_manager/aftercellsmove_event.md) | @getshort(api/cell_manager/aftercellsmove_event.md) | +| [](api/cell_manager/aftercellsremove_event.md) | @getshort(api/cell_manager/aftercellsremove_event.md) | +| [](api/cell_manager/aftercellsvalidation_event.md) | @getshort(api/cell_manager/aftercellsvalidation_event.md) | +| [](api/cell_manager/beforecellsadd_event.md) | @getshort(api/cell_manager/beforecellsadd_event.md) | +| [](api/cell_manager/beforecellsmove_event.md) | @getshort(api/cell_manager/beforecellsmove_event.md) | +| [](api/cell_manager/beforecellsremove_event.md) | @getshort(api/cell_manager/beforecellsremove_event.md) | +| [](api/cell_manager/beforecellsvalidation_event.md) | @getshort(api/cell_manager/beforecellsvalidation_event.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/move_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/move_method.md new file mode 100644 index 000000000..a5bd95f3c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/move_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: move() +title: Cell Manager의 move 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 move 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# move() + +:::info +`move()` 메서드는 시스템에 의해 자동으로 검증됩니다. swimlane의 구조에 따라 이동이 불가능한 경우 셀은 이동되지 않습니다. +::: + +### 설명 {#description} + +@short: swimlane의 셀을 행 또는 열로 이동합니다 + +### 사용법 {#usage} + +~~~jsx +move( + cellIndex: number, + dir: string // "up" | "down" | "left" | "right" +): void; +~~~ + +### 매개변수 {#parameters} + +- `cellIndex` - (필수) 레이아웃에서 셀의 시작 인덱스입니다. 인덱스는 0부터 시작합니다 +- `dir` - (필수) 작업의 방향: `"up"` | `"down"` | `"left"` | `"right"` + +### 예제 {#example} + +~~~jsx +// 다이어그램 초기화 +const diagram = new dhx.Diagram("diagram_container", { + // 구성 옵션 +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // 활성 swimlane 설정 + +diagram.cellManager.move(0, "down"); // 셀을 행으로 이동 +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/remove_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/remove_method.md new file mode 100644 index 000000000..b367089cd --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/remove_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: remove() +title: Cell Manager의 remove 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 remove 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# remove() + +:::info +`remove()` 메서드는 시스템에 의해 자동으로 검증됩니다. swimlane의 구조에 따라 제거가 불가능한 경우 셀은 제거되지 않습니다. +::: + +### 설명 {#description} + +@short: swimlane의 셀을 행 또는 열로 제거합니다 + +### 사용법 {#usage} + +~~~jsx +remove( + cellIndex: number, + type: string // "row" | "col" +): void; +~~~ + +### 매개변수 {#parameters} + +- `cellIndex` - (필수) 레이아웃에서 셀의 시작 인덱스입니다. 인덱스는 0부터 시작합니다 +- `type` - (필수) 인덱스를 계산할 방향의 유형 + +### 예제 {#example} + +~~~jsx +// 다이어그램 초기화 +const diagram = new dhx.Diagram("diagram_container", { + // 구성 옵션 +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // 활성 swimlane 설정 + +diagram.cellManager.remove(0, "row"); // 셀을 행으로 제거 +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/resetswimlane_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/resetswimlane_method.md new file mode 100644 index 000000000..57de86e98 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/resetswimlane_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: resetSwimlane() +title: Cell Manager의 resetSwimlane 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 resetSwimlane 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# resetSwimlane() + +### 설명 {#description} + +@short: 활성 swimlane을 재설정합니다 + +### 사용법 {#usage} + +~~~jsx +resetSwimlane(): void; +~~~ + +### 예제 {#example} + +~~~jsx +// 다이어그램 초기화 +const diagram = new dhx.Diagram("diagram_container", { + // 구성 옵션 +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // 활성 swimlane 설정 + +// swimlane에 대한 작업 수행 + +diagram.cellManager.resetSwimlane(); // 활성 swimlane 재설정 +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/setswimlane_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/setswimlane_method.md new file mode 100644 index 000000000..e33726fc6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/setswimlane_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: setSwimlane() +title: Cell Manager의 setSwimlane 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 setSwimlane 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# setSwimlane() + +### 설명 {#description} + +@short: 이후 작업을 위해 활성 swimlane을 설정합니다 + +### 사용법 {#usage} + +~~~jsx +setSwimlane(id: string | number): boolean; +~~~ + +### 매개변수 {#parameters} + +- `id` - (필수) swimlane의 id + +### 반환값 {#returns} + +메서드는 swimlane이 설정되면 `true`를 반환하고, 그렇지 않으면 `false`를 반환합니다. + +### 예제 {#example} + +~~~jsx +// 다이어그램 초기화 +const diagram = new dhx.Diagram("diagram_container", { + // 구성 옵션 +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // 활성 swimlane 설정 +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/validation_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/validation_method.md new file mode 100644 index 000000000..669813c65 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/cell_manager/validation_method.md @@ -0,0 +1,51 @@ +--- +sidebar_label: validation() +title: Cell Manager의 validation 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Cell Manager의 validation 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# validation() + +### 설명 {#description} + +@short: 방향 및 작업 유형에 따라 swimlane의 셀을 검증합니다 + +### 사용법 {#usage} + +~~~jsx +validation( + cellIndex: number, + dir: string, // "up" | "down" | "left" | "right" + action: string // "move" | "remove" | "add" +): boolean; +~~~ + +### 매개변수 {#parameters} + +- `cellIndex` - (필수) 레이아웃에서 셀의 시작 인덱스입니다. 인덱스는 0부터 시작합니다 +- `dir` - (필수) 작업의 방향: `"up"` | `"down"` | `"left"` | `"right"` +- `action` - (필수) 작업의 유형: `"move"` | `"remove"` | `"add"` + +### 반환값 {#returns} + +메서드는 셀이 검증되면 `true`를 반환하고, 그렇지 않으면 `false`를 반환합니다 + +### 예제 {#example} + +~~~jsx +// 다이어그램 초기화 +const diagram = new dhx.Diagram("diagram_container", { + // 구성 옵션 +}); +diagram.data.parse(data); + +// 활성 swimlane 설정 +diagram.cellManager.setSwimlane("main"); + +// 인덱스 0인 셀을 아래로 이동할 수 있는지 검증 +diagram.cellManager.validation(0, "down", "move"); // -> true +~~~ + +**변경 로그**: v4.0에서 추가 + +**관련 문서**: [Swimlane 구성](/swimlanes/) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/add_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/add_method.md new file mode 100644 index 000000000..c8c0dae72 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/add_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: add() +title: Data Collection의 add 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 add 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# add() + +### 설명 {#description} + +@short: 다이어그램에 새 항목을 추가합니다 + +### 사용법 {#usage} + +~~~jsx +add(new_item: object | array): string | number | array; +~~~ + +### 매개변수 {#parameters} + +- `new_item` - (필수) 새 항목의 객체 또는 항목 객체의 배열 + +### 반환값 {#returns} + +이 메서드는 항목의 id 또는 항목 id의 배열을 반환합니다 + +### 예제 {#example} + +도형을 연결하는 방법에는 두 가지가 있습니다. parent ID가 지정된 도형을 추가할 수 있습니다: + +~~~jsx {2,6} +const diagram = new dhx.Diagram("diagram_container", { + type: "org" +}); +diagram.data.parse(data); + +diagram.data.add({ id: "3.2", text: "New Item", type: "card", parent: "3" }); +~~~ + +또는 도형과 커넥터 라인 객체를 추가할 수 있습니다: + +~~~jsx {2,6-7} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.add({ type: "card", id: "3.2", text: "New Item" }); +diagram.data.add({ type: "line", from: "3", to: "3.2" }); +~~~ + +**관련 문서**: [항목 추가](guides/manipulating_items.md#adding-an-item) + +**관련 샘플**: [Diagram. 데이터. 항목 추가/삭제](https://snippet.dhtmlx.com/8wi20uop) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/afteradd_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/afteradd_event.md new file mode 100644 index 000000000..4b1c3f8e2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/afteradd_event.md @@ -0,0 +1,41 @@ +--- +sidebar_label: afterAdd +title: Data Collection의 afterAdd 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 afterAdd 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# afterAdd + +### 설명 {#description} + +@short: 항목을 추가한 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterAdd: (newItem: object) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 콜백은 다음 매개변수를 받습니다: + +- `newItem` - (필수) 추가된 항목의 객체 + +### 예제 {#example} + +~~~jsx {9-11} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("afterAdd", (newItem) => { + console.log("A new item is added"); +}); +~~~ + +이 이벤트는 항목 데이터에 대한 기본값 또는 기본 형식을 제공하는 데 사용할 수 있습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/afterremove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/afterremove_event.md new file mode 100644 index 000000000..3294d68c6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/afterremove_event.md @@ -0,0 +1,39 @@ +--- +sidebar_label: afterRemove +title: Data Collection의 afterRemove 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 afterRemove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# afterRemove + +### 설명 {#description} + +@short: data collection에서 항목을 제거한 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterRemove: (removedItem: object) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 콜백은 다음 매개변수를 받습니다: + +- `removedItem` - (필수) 제거된 항목의 객체 + +### 예제 {#example} + +~~~jsx {9-11} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("afterRemove", (newItem) => { + console.log("afterRemove "+ item); +}); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/beforeadd_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/beforeadd_event.md new file mode 100644 index 000000000..eec57c6c2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/beforeadd_event.md @@ -0,0 +1,45 @@ +--- +sidebar_label: beforeAdd +title: Data Collection의 beforeAdd 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 beforeAdd 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# beforeAdd + +### 설명 {#description} + +@short: 항목을 추가하기 전에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeAdd: (newItem: object) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 콜백은 다음 매개변수를 받습니다: + +- `newItem` - (필수) 추가된 항목의 객체 + +### 반환값 {#returns} + +data collection에 항목을 추가하지 못하도록 하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다 + +### 예제 {#example} + +~~~jsx {9-13} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("beforeAdd", (newItem) => { + if (some_check) + return false; + return true; +}); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/beforeremove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/beforeremove_event.md new file mode 100644 index 000000000..570f6bed4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/beforeremove_event.md @@ -0,0 +1,44 @@ +--- +sidebar_label: beforeRemove +title: Data Collection의 beforeRemove 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 beforeRemove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# beforeRemove + +### 설명 {#description} + +@short: data collection에서 항목을 제거한 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeRemove: (removedItem: any) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 콜백은 다음 매개변수를 받습니다: + +- `removedItem` - (필수) 제거할 항목의 객체 + +### 반환값 {#returns} + +data collection에서 항목 제거를 차단하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다. + +### 예제 {#example} + +~~~jsx {9-12} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("beforeRemove", (newItem) => { + console.log("beforeRemove "+ item); + return true; +}); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/change_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/change_event.md new file mode 100644 index 000000000..34caf4d7a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/change_event.md @@ -0,0 +1,49 @@ +--- +sidebar_label: change +title: Data Collection의 change 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 change 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# change + +### 설명 {#description} + +@short: 다이어그램의 데이터 세트가 변경될 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx +change: ( + id?: string, + status?: "add" | "update" | "delete" | "load" + updatedItem?: object +) => void; +~~~ + +### 매개변수 {#parameters} + +이 이벤트의 콜백은 다음 매개변수를 받습니다: + +- `id` - (선택 사항) 변경된 항목의 id +- `status` - (선택 사항) 변경 상태: `"add"`, `"update"`, `"delete"`, `"load"` +- `updatedItem` - (선택 사항) 변경된 항목의 객체 + +:::info +핸들러 함수가 매개변수를 전혀 받지 않는 경우도 있습니다. 예를 들어 모든 도형이 제거되면서 데이터 세트가 다이어그램으로 파싱되는 경우입니다. +::: + +### 예제 {#example} + +~~~jsx {9-11} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("change", function (id, status, shape) { + console.log("The " + id + " has been " + status); +}); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/copy_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/copy_method.md new file mode 100644 index 000000000..9edeb3390 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/copy_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: copy() +title: Data Collection의 copy 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 copy 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# copy() + +### 설명 {#description} + +@short: 지정된 위치에 항목의 복사본을 생성합니다 + +### 사용법 {#usage} + +~~~jsx +copy( + id: string | number | array, + index: number, + target?: object +): string | number | array; +~~~ + +### 매개변수 {#parameters} + +- `id` - (필수) 복사할 항목의 id(들) +- `index` - (필수) 복사본을 생성할 인덱스 +- `target` - (선택 사항) 대상 Data Collection 객체 + +### 반환값 {#returns} + +이 메서드는 항목의 id 또는 항목 id들의 배열을 반환합니다 + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.copy("4",5); // id가 4인 도형을 인덱스 5의 위치로 복사합니다 +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/eachchild_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/eachchild_method.md new file mode 100644 index 000000000..ee4f1973d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/eachchild_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: eachChild() +title: Data Collection의 eachChild 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 eachChild 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# eachChild() + +### 설명 {#description} + +@short: 지정된 항목의 자식 항목을 순회합니다 + +### 사용법 {#usage} + +~~~jsx +eachChild( + id: string | number, + callback: function, + isTree?: boolean +): void; +~~~ + +### 매개변수 {#parameters} + +- `id` - (필수) 항목의 id +- `callback` - (필수) 항목의 각 자식에 적용될 콜백 함수 +- `isTree` - (선택 사항) 함수가 지정된 항목의 모든 자식(모든 레벨)을 순회할지 여부를 정의합니다. *false*이면 함수는 항목의 1단계 자식만 순회합니다. 기본값은 *true*입니다. + +### 예제 {#example} + +~~~jsx {6-8} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.eachChild("id_1", (item) => { + console.log(item); +}, true); +~~~ + +**변경 로그**: v4.0에서 추가 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/eachparent_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/eachparent_method.md new file mode 100644 index 000000000..a0b2e165b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/eachparent_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: eachParent() +title: Data Collection의 eachParent 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 eachParent 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# eachParent() + +### 설명 {#description} + +@short: 지정된 항목의 모든 부모 항목을 순회합니다 + +### 사용법 {#usage} + +~~~jsx +eachParent( + id: string | number, + callback: function, + self?: boolean +): void +~~~ + +### 매개변수 {#parameters} + +- `id` - (필수) 항목의 id +- `callback` - (필수) 항목의 각 부모에 적용될 콜백 함수 +- `self` - (선택 사항) 콜백 함수가 지정된 항목 자체에 대해서도 순회할지 여부를 정의합니다. 기본값은 *false*입니다. + +### 예제 {#example} + +~~~jsx {6-8} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.eachParent("id_1.1.1", (item) => { + console.log(item); +}, false); +~~~ + +**변경 로그**: v4.0에서 추가 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/exists_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/exists_method.md new file mode 100644 index 000000000..911d8dcb9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/exists_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: exists() +title: Data Collection의 exists 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 exists 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# exists() + +### 설명 {#description} + +@short: 지정된 항목이 다이어그램에 존재하는지 확인합니다 + +### 사용법 {#usage} + +~~~jsx +exists(id: string | number): boolean; +~~~ + +### 매개변수 {#parameters} + +- `id` - (필수) 확인할 항목의 id + +### 반환값 {#returns} + +이 메서드는 항목이 존재하면 `true`를, 존재하지 않으면 `false`를 반환합니다 + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const shape = diagram.data.exists("1"); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/filter_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/filter_event.md new file mode 100644 index 000000000..7a5f46fb5 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/filter_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: filter +title: Data Collection의 filter 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 data collection의 filter 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# filter + +### 설명 {#description} + +@short: Data Collection을 필터링한 후에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +filter: (filter?: object) => void; +~~~ + +### 매개변수 {#parameters} + +`filter` 이벤트의 콜백은 다음 매개변수와 함께 호출됩니다: + +- `object: {key: object }` - 모든 활성 필터를 포함하는 객체이며, 여기서 + - `key` - 활성 필터의 id + - `object` - [`rule` 및 `config` 속성](api/data_collection/filter_method.md#parameters)이 있는 객체 + +:::info +Diagram Data Collection의 내부 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다. +::: + +### 예제 {#example} + +~~~jsx {7-9} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.events.on("filter", (filter) => { + console.log("Items were filtered"); +}); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/filter_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/filter_method.md new file mode 100644 index 000000000..a7c186c68 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/filter_method.md @@ -0,0 +1,84 @@ +--- +sidebar_label: filter() +title: Data Collection의 filter 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 data collection의 filter 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# filter() + +### 설명 {#description} + +@short: 다이어그램에서 항목을 필터링합니다 + +### 사용법 {#usage} + +~~~jsx +filter( + rule?: function, + config?: { + id?: string, + add?: boolean, + permanent?: boolean + } +): void; + +// 또는 + +filter( + rule?:{ + by?: string | number, + match?: string | number | boolean, + compare?: (value, match, item) => {} + }, + config?:{ + id?: string, + add?: boolean, + permanent?: boolean + } +): void; +~~~ + +### 매개변수 {#parameters} + +- `rule` - (선택 사항) 필터링 기준 + - *function*으로 설정하면 함수에 지정된 규칙에 따라 필터링이 적용됩니다. 이 함수는 매개변수로 데이터 항목의 객체를 받습니다 + - *object*로 설정하면 매개변수에 다음 속성을 지정할 수 있습니다: + - `by` - (선택 사항) 항목 속성의 키 + - `match` - (선택 사항) 일치시킬 패턴 + - `compare` - (선택 사항) 확장 필터링을 위한 함수입니다. 이 함수는 *true* 또는 *false*를 반환하며 다음 세 가지 매개변수를 받습니다: + - `value` - 비교할 값 + - `match` - 일치시킬 패턴 + - `item` - 값을 비교할 데이터 항목(예: shape) +- `config` - (선택 사항) 필터링 매개변수를 정의하는 객체입니다. 다음 속성을 포함할 수 있습니다: + - `id` - (선택 사항) 필터의 id + - `add` - (선택 사항) 다음 필터링이 이미 필터링된 데이터에 적용될지(true), 또는 초기 데이터에 적용될지(false, 기본값) 정의합니다 + - `permanent` - (선택 사항) 현재 필터를 영구적으로 만들려면 *true*로 설정합니다. 다음 필터링의 구성 객체에 `add:true` 속성이 없어도 이 필터는 적용됩니다. 이러한 필터는 [`resetFilter()`](api/data_collection/resetfilter_method.md) 메서드로만 제거할 수 있습니다 + +### 예제 {#example} + +~~~jsx {6-9,11-12} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +// 함수에 지정된 규칙으로 필터링 +diagram.data.filter(function (shape) { + return shape.id > 3; +}); + +// shape 속성의 키로 필터링 +diagram.data.filter({ by: "text", match: "Read N" }); +~~~ + +다이어그램을 초기 상태로 되돌리려면 매개변수 없이 `filter()` 메서드를 호출하세요. + +~~~jsx +diagram.data.filter(); +~~~ + +**관련 문서**: [항목 필터링](guides/manipulating_items.md#filtering-items) + +**관련 샘플**: [Diagram. Data. Shape 필터링](https://snippet.dhtmlx.com/tm43bsgn) + +**변경 로그**: v6.0에서 업데이트 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/find_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/find_method.md new file mode 100644 index 000000000..fb404e9af --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/find_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: find() +title: Data Collection의 find 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 data collection의 find 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# find() + +### 설명 {#description} + +@short: 지정된 매개변수에 해당하는 항목을 찾습니다 + +### 사용법 {#usage} + +~~~jsx +find(rule: object): object; + +// 또는 + +find(rule: function): object; +~~~ + +### 매개변수 {#parameters} + +- `rule` - (필수) 지정할 수 있는 검색 기준: + - 다음 매개변수를 포함하는 객체로 지정: + - `by: string | function` - 검색 기준(항목 속성의 키 또는 검색 함수) + - `match: string` - 항목 속성의 값 + - 함수로 지정: `DataCallback(item: T, index?: number, array?: T[])` + +### 반환값 {#returns} + +이 메서드는 지정된 기준과 일치하는 항목의 첫 번째 객체를 반환합니다 + +### 예제 {#example} + +~~~jsx {7,10-12} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +//속성 키로 shape 검색 +const shape = diagram.data.find({ by: "text", match: "Manager" }); + +//함수에 지정된 규칙으로 shape 검색 +const shape = diagram.data.find((shape) => { + if(shape.text==="Manager"||shape.text==="Marketer"){return true} +}); +~~~ + +**관련 문서**: [필요한 항목 찾기](guides/manipulating_items.md#finding-the-necessary-item) + +**관련 샘플**: [Diagram. Data. 필요한 Shape 찾기](https://snippet.dhtmlx.com/sete9z73) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/findall_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/findall_method.md new file mode 100644 index 000000000..d0df3843b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/findall_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: findAll() +title: Data Collection의 findAll 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 data collection의 findAll 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# findAll() + +### 설명 {#description} + +@short: 지정된 매개변수에 해당하는 모든 항목을 찾습니다 + +### 사용법 {#usage} + +~~~jsx +findAll(rule: object): array; + +// 또는 + +findAll(rule: function): array; +~~~ + +### 매개변수 {#parameters} + +- `rule` - (필수) 지정할 수 있는 검색 기준: + - 다음 매개변수를 포함하는 객체로 지정: + - `by: string | function` - 검색 기준(항목 속성의 키 또는 검색 함수) + - `match: string` - 항목 속성의 값 + - 함수로 지정: `DataCallback(item: T, index?: number, array?: T[])` + +### 반환값 {#returns} + +이 메서드는 일치하는 항목 객체의 배열을 반환합니다 + +### 예제 {#example} + +~~~jsx {7,10-14} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +//속성 키로 shape 검색 +const shapes = diagram.data.findAll({ by: "text", match: "Manager" }); + +//함수로 shape 검색 +const shapes = diagram.data.findAll(function (shapes) { + if( shapes.text === "Manager" || shapes.text === "Marketer" ){ + return true; + } +}); +~~~ + +**관련 문서**: [필요한 항목 찾기](guides/manipulating_items.md#finding-the-necessary-item) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getfilters_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getfilters_method.md new file mode 100644 index 000000000..ca56cda78 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getfilters_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: getFilters() +title: Data Collection의 getFilters 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 data collection의 getFilters 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# getFilters() + +### 설명 {#description} + +@short: 적용된 필터가 있는 객체를 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getFilters({ permanent?: boolean }): object; +~~~ + +### 매개변수 {#parameters} + +- `permanent` - (선택 사항) 기본값은 *false*입니다. 영구 필터 목록을 가져올 수 있습니다 + +### 반환값 {#returns} + +이 메서드는 적용된 필터가 있는 객체를 반환하며, 여기서: +- `key` - 필터의 id +- `value` - [`rule` 및 `config` 속성](api/data_collection/filter_method.md#parameters)이 있는 객체 + +### 예제 {#example} + +~~~jsx {6-7} +const diagram = new dhx.Diagram("diagram_container", { + // 구성 설정 +}); +diagram.data.parse(data); + +const filters = diagram.data.getFilters(); // 적용된 모든 필터를 가져옵니다 +console.log(filters); +~~~ + +**변경 로그**: v6.0에서 추가 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getid_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getid_method.md new file mode 100644 index 000000000..359e05473 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getid_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: getId() +title: Data Collection의 getId 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 getId 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 확인하고, 코드 예제와 라이브 데모를 사용해 볼 수 있으며, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# getId() + +### 설명 {#description} + +@short: 인덱스로 항목의 id를 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getId(index: number): string | number; +~~~ + +### 매개변수 {#parameters} + +- `index` - (필수) 항목의 인덱스 + +### 반환값 {#returns} + +이 메서드는 항목의 id를 반환합니다 + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const id = diagram.data.getId(0); // -> "1" 반환 +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getindex_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getindex_method.md new file mode 100644 index 000000000..63475f8b8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getindex_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: getIndex() +title: Data Collection의 getIndex 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 getIndex 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 확인하고, 코드 예제와 라이브 데모를 사용해 볼 수 있으며, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# getIndex() + +### 설명 {#description} + +@short: id로 항목의 인덱스를 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getIndex(id: string | number): number; +~~~ + +### 매개변수 {#parameters} + +- `id` - (필수) 항목의 id + +### 반환값 {#returns} + +이 메서드는 항목의 인덱스를 반환합니다 + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const index = diagram.data.getIndex("1"); // -> 0 반환 +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getitem_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getitem_method.md new file mode 100644 index 000000000..436c84fed --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getitem_method.md @@ -0,0 +1,46 @@ +--- +sidebar_label: getItem() +title: Data Collection의 getItem 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 getItem 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 확인하고, 코드 예제와 라이브 데모를 사용해 볼 수 있으며, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# getItem() + +### 설명 {#description} + +@short: id로 항목의 객체를 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getItem(id: string | number): object; +~~~ + +### 매개변수 {#parameters} + +- `id` - (필수) 선택한 항목의 id + +### 반환값 {#returns} + +이 메서드는 항목의 객체를 반환합니다 + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const shape = diagram.data.getItem(123); +~~~ + +다음과 같이 항목의 원래 속성에 접근할 수 있습니다: + +~~~jsx +// shape의 속성에 접근 +const shape = diagram.data.getItem(123); +const text = shape.text; +~~~ + +**관련 문서:** [항목 가져오기](guides/manipulating_items.md#getting-an-item) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getnearid_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getnearid_method.md new file mode 100644 index 000000000..556e1dccd --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getnearid_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: getNearId() +title: Data Collection의 getNearId 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 getNearId 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 확인하고, 코드 예제와 라이브 데모를 사용해 볼 수 있으며, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# getNearId() + +### 설명 {#description} + +@short: 지정된 항목을 기준으로 가장 가까운 항목을 찾습니다 + +### 사용법 {#usage} + +~~~jsx +getNearId(id: string | number): string | number; +~~~ + +### 매개변수 {#parameters} + +- `id` - (필수) 항목의 id + +### 반환값 {#returns} + +이 메서드는 가장 가까운 항목의 id를 반환합니다 + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const nearId = diagram.data.getNearId(id); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getroot_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getroot_method.md new file mode 100644 index 000000000..4f00f088a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getroot_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: getRoot() +title: Data Collection의 getRoot 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 getRoot 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 확인하고, 코드 예제와 라이브 데모를 사용해 볼 수 있으며, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# getRoot() + +### 설명 {#description} + +@short: 자식 항목의 id로 루트 항목의 id를 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getRoot(id: string | number): string | number; +~~~ + +### 매개변수 {#parameters} + +- `id` - (필수) 자식 항목의 id + +### 반환값 {#returns} + +이 메서드는 루트 항목의 id를 반환합니다. 루트 항목은 트리 구조의 첫 번째 항목입니다 + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.getRoot("id_1.1.1"); // -> "id_1" +~~~ + +**변경 로그:** v4.0에서 추가 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getroots_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getroots_method.md new file mode 100644 index 000000000..b50eeca06 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/getroots_method.md @@ -0,0 +1,34 @@ +--- +sidebar_label: getRoots() +title: Data Collection의 getRoots 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 getRoots 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# getRoots() + +### 설명 {#description} + +@short: 다이어그램의 모든 루트 항목의 ID가 포함된 배열을 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getRoots(): array +~~~ + +### 반환값 {#returns} + +이 메서드는 루트 항목들의 ID가 포함된 배열을 반환합니다 + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.getRoots(); +~~~ + +**Change log**: v4.0에서 추가 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/index.md new file mode 100644 index 000000000..8b90af6b2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/index.md @@ -0,0 +1,50 @@ +--- +sidebar_label: 개요 +title: DataCollection 개요 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 DataCollection에 대한 개요를 확인할 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# DataCollection 개요 {#datacollection-overview} + +다이어그램의 데이터로 작업할 수 있는 일련의 API입니다. 이 API는 다이어그램과 에디터 모두에서 사용할 수 있습니다. + +## 메서드 {#methods} + +| Name | 설명 | +| :------------------------------------------- | :-------------------------------------------------- | +| [](api/data_collection/add_method.md) | @getshort(api/data_collection/add_method.md) | +| [](api/data_collection/copy_method.md) | @getshort(api/data_collection/copy_method.md) | +| [](api/data_collection/eachchild_method.md) | @getshort(api/data_collection/eachchild_method.md) | +| [](api/data_collection/eachparent_method.md) | @getshort(api/data_collection/eachparent_method.md) | +| [](api/data_collection/exists_method.md) | @getshort(api/data_collection/exists_method.md) | +| [](api/data_collection/filter_method.md) | @getshort(api/data_collection/filter_method.md) | +| [](api/data_collection/find_method.md) | @getshort(api/data_collection/find_method.md) | +| [](api/data_collection/findall_method.md) | @getshort(api/data_collection/findall_method.md) | +| [](api/data_collection/getfilters_method.md) | @getshort(api/data_collection/getfilters_method.md) | +| [](api/data_collection/getid_method.md) | @getshort(api/data_collection/getid_method.md) | +| [](api/data_collection/getindex_method.md) | @getshort(api/data_collection/getindex_method.md) | +| [](api/data_collection/getitem_method.md) | @getshort(api/data_collection/getitem_method.md) | +| [](api/data_collection/getnearid_method.md) | @getshort(api/data_collection/getnearid_method.md) | +| [](api/data_collection/getroot_method.md) | @getshort(api/data_collection/getroot_method.md) | +| [](api/data_collection/getroots_method.md) | @getshort(api/data_collection/getroots_method.md) | +| [](api/data_collection/load_method.md) | @getshort(api/data_collection/load_method.md) | +| [](api/data_collection/map_method.md) | @getshort(api/data_collection/map_method.md) | +| [](api/data_collection/move_method.md) | @getshort(api/data_collection/move_method.md) | +| [](api/data_collection/parse_method.md) | @getshort(api/data_collection/parse_method.md) | +| [](api/data_collection/remove_method.md) | @getshort(api/data_collection/remove_method.md) | +| [](api/data_collection/removeall_method.md) | @getshort(api/data_collection/removeall_method.md) | +| [](api/data_collection/resetfilter_method.md)| @getshort(api/data_collection/resetfilter_method.md)| +| [](api/data_collection/serialize_method.md) | @getshort(api/data_collection/serialize_method.md) | +| [](api/data_collection/update_method.md) | @getshort(api/data_collection/update_method.md) | + +## 이벤트 {#events} + +| Name | 설명 | +| :--------------------------------------------- | :--------------------------------------------------- | +| [](api/data_collection/afteradd_event.md) | @getshort(api/data_collection/afteradd_event.md) | +| [](api/data_collection/afterremove_event.md) | @getshort(api/data_collection/afterremove_event.md) | +| [](api/data_collection/beforeadd_event.md) | @getshort(api/data_collection/beforeadd_event.md) | +| [](api/data_collection/beforeremove_event.md) | @getshort(api/data_collection/beforeremove_event.md) | +| [](api/data_collection/change_event.md) | @getshort(api/data_collection/change_event.md) | +| [](api/data_collection/filter_event.md) | @getshort(api/data_collection/filter_event.md) | +| [](api/data_collection/load_event.md) | @getshort(api/data_collection/load_event.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/load_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/load_event.md new file mode 100644 index 000000000..99c4fa2f3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/load_event.md @@ -0,0 +1,33 @@ +--- +sidebar_label: load +title: Data Collection의 load 이벤트 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 load 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# load + +### 설명 {#description} + +@short: 다이어그램에 데이터가 로드될 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx +load: () => void; +~~~ + +### 예제 {#example} + +~~~jsx {9-11} +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 데이터 로드 +diagram.data.parse(data); + +// 이벤트에 핸들러 연결 +diagram.events.on("load", () => { + // 여기에 로직 작성 +}); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/load_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/load_method.md new file mode 100644 index 000000000..ca0349b36 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/load_method.md @@ -0,0 +1,56 @@ +--- +sidebar_label: load() +title: Data Collection의 load 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 load 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# load() + +### 설명 {#description} + +@short: 외부 파일에서 데이터를 로드합니다 + +### 사용법 {#usage} + +~~~jsx +load( + url: string | object, + driver?: object | string +): promise; +~~~ + +### 매개변수 {#parameters} + +- `url` - (필수) 외부 파일의 URL 또는 URL이 구성된 `DataProxy` +- `driver` - (선택) `DataDriver` 또는 데이터 유형(`"json"`, `"csv"`, `"xml"`), 기본값은 `"json"` + +### 반환값 {#returns} + +이 메서드는 데이터 로드의 promise를 반환합니다 + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.load("../common/data.json"); +~~~ + +### 세부 사항 {#details} + +컴포넌트는 AJAX 호출을 수행하며 원격 URL이 유효한 JSON 데이터를 제공할 것으로 예상합니다. + +데이터 로드는 비동기적으로 처리되므로, 로드 이후에 실행할 코드는 promise로 감싸야 합니다: + +~~~jsx +diagram.data.load("../some/data").then(() => { + diagram.selection.add(123); +}); +~~~ + +**관련 문서**: [데이터 로드 및 저장](guides/loading_data.md) + +**관련 샘플**: [Diagram. 데이터. 데이터 로드](https://snippet.dhtmlx.com/09isp2d8) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/map_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/map_method.md new file mode 100644 index 000000000..3ace7d8bc --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/map_method.md @@ -0,0 +1,39 @@ +--- +sidebar_label: map() +title: Data Collection의 map 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 map 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# map() + +### 설명 {#description} + +@short: 다이어그램의 모든 항목을 순회합니다 + +### 사용법 {#usage} + +~~~jsx +map(callback: function): array; +~~~ + +### 매개변수 {#parameters} + +- `callback` - (필수) 다이어그램의 각 항목에 대해 호출되는 callback 함수 + +### 반환값 {#returns} + +이 메서드는 각 항목이 callback 함수의 결과인 새로운 배열을 반환합니다 + +### 예제 {#example} + +~~~jsx {7-9} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +//다이어그램의 모든 항목(도형, 링크, 그룹, 스윔레인)의 ID 가져오기 +diagram.data.map((item) => { + console.log(item.id); +}); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/move_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/move_method.md new file mode 100644 index 000000000..b45d07b98 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/move_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: move() +title: Data Collection의 move 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 move 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# move() + +### 설명 {#description} + +@short: 항목을 지정된 위치로 이동합니다 + +### 사용법 {#usage} + +~~~jsx +move( + id: string | number | array, + index: number, + target?: object +): string | number | array; +~~~ + +### 매개변수 {#parameters} + +- `id` - (필수) 이동할 항목의 id(들) +- `index` - (필수) 항목(들)을 이동할 인덱스 +- `target` - (선택) 대상 Data Collection 객체 + +### 반환값 {#returns} + +이 메서드는 항목의 id가 담긴 문자열 또는 항목들의 id가 담긴 문자열 값 배열을 반환합니다 + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.move("4",5); // id가 4인 도형을 인덱스 5의 위치로 이동합니다 +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/parse_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/parse_method.md new file mode 100644 index 000000000..8933b3ea5 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/parse_method.md @@ -0,0 +1,104 @@ +--- +sidebar_label: parse() +title: Data Collection의 parse 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 parse 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# parse() + +### 설명 {#description} + +@short: 로컬 데이터 소스에서 다이어그램으로 데이터를 로드하고 처리합니다 + +### 사용법 {#usage} + +~~~jsx +parse( + data: object[] | { data: object[]; links: object[] } | string, + driver?: object | string +): void; +~~~ + +### 매개변수 {#parameters} + +- `data: object[] | { data: object[]; links: object[] } | string` - (필수) 로드할 데이터입니다. 지원되는 모든 데이터 형식으로 데이터를 로드할 수 있습니다. 데이터 구조는 다이어그램 모드에 따라 다릅니다: + - default, org chart, mindmap Diagram 모드의 경우 데이터 객체 집합을 포함하는 배열로 설정됩니다 + ~~~jsx + data: object[]; // 모든 도형과 연결선의 배열 + ~~~ + - PERT Diagram 모드의 경우 다음을 포함하는 객체입니다: + - `data` 배열(도형용: `"task"`, `"milestone"`, `"project"`) + - `links` 배열(도형 간 연결용) + ~~~jsx + { + data: object[]; // 도형의 배열(작업, 마일스톤, 프로젝트) + links: object[] // 도형 간 연결의 배열 + }; + ~~~ +- `driver` - (선택) `DataDriver` 또는 데이터 유형(`"json"`, `"csv"`, `"xml"`), 기본값은 `"json"`입니다 + +### 예제 {#example} + +- diagram의 org chart 모드의 경우: + +~~~jsx +const data = [ + { + id: "1", + text: "Chairman & CEO", + title: "Henry Bennett", + img: "../common/img/avatar-1.png" + }, + { + id: "2", + text: "Manager", + title: "Mildred Kim", + img: "../common/img/avatar-2.png" + }, + { + id: "3", + text: "Technical Director", + title: "Jerry Wagner", + img: "../common/img/avatar-3.png" + }, + { id: "1-2", from: "1", to: "2", type: "line" }, + { id: "1-3", from: "1", to: "3", type: "line" } +]; + +const diagram = new dhx.Diagram("diagram_container", { + type: "org" +}); + +diagram.data.parse(data); +~~~ + +- diagram의 PERT 모드의 경우: + +~~~jsx +const dataset = { + data: [ + { id: "1", text: "Project #1", type: "project", parent: null }, + { id: "1.1", text: "Task #1", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, + { id: "1.2", text: "Task #2", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, + { id: "2.1", text: "Task #3", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, + { id: "2.2", text: "Task #4", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, + ], + links: [ + { id: "line-1", source: "1.1", target: "1.2" }, + { id: "line-2", source: "1.2", target: "2.1" }, + { id: "line-3", source: "2.1", target: "2.2" }, + ] +}; + +const diagram = new dhx.Diagram("diagram_container", { + type: "pert" +}); + +diagram.data.parse(dataset); +~~~ + +**관련 문서**: [데이터 로드 및 저장](guides/loading_data.md) + +**관련 예제**: +- [Diagram. Org chart 모드. 기본 초기화](https://snippet.dhtmlx.com/5ign6fyy) +- [Diagram. PERT chart. 초기화](https://snippet.dhtmlx.com/4h5fi7xd) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/remove_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/remove_method.md new file mode 100644 index 000000000..d8bb6b1dd --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/remove_method.md @@ -0,0 +1,40 @@ +--- +sidebar_label: remove() +title: Data Collection의 remove 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 remove 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# remove() + +### 설명 {#description} + +@short: 다이어그램에서 지정된 항목을 삭제합니다 + +:::note +다이어그램이 org(`type: "org"`) 또는 mindmap(`type: "mindmap"`) 모드로 초기화된 경우, 도형을 삭제하면 이 도형에 대한 링크와 모든 하위 도형도 함께 제거됩니다 +::: + +### 사용법 {#usage} + +~~~jsx +remove(id: string | number | array): void; +~~~ + +### 매개변수 {#parameters} + +- `id` - (필수) 삭제할 항목의 id(들) + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.remove("2"); +~~~ + +**관련 문서**: [항목 삭제](guides/manipulating_items.md#deleting-items) + +**관련 샘플**: [Diagram. Data. 항목 추가/삭제](https://snippet.dhtmlx.com/8wi20uop) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/removeall_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/removeall_method.md new file mode 100644 index 000000000..a7d5c8e92 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/removeall_method.md @@ -0,0 +1,32 @@ +--- +sidebar_label: removeAll() +title: Data Collection의 removeAll 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 removeAll 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# removeAll() + +### 설명 {#description} + +@short: 다이어그램에서 모든 항목을 삭제합니다 + +### 사용법 {#usage} + +~~~jsx +removeAll(): void; +~~~ + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.removeAll(); +~~~ + +**관련 문서**: [항목 삭제](guides/manipulating_items.md#deleting-items) + +**관련 샘플**: [Diagram. Data. 항목 추가/삭제](https://snippet.dhtmlx.com/8wi20uop) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/resetfilter_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/resetfilter_method.md new file mode 100644 index 000000000..056ad4ada --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/resetfilter_method.md @@ -0,0 +1,50 @@ +--- +sidebar_label: resetFilter() +title: Data Collection의 resetFilter 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Data Collection의 resetFilter 메서드를 살펴볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# resetFilter() + +### 설명 {#description} + +@short: 활성 필터를 재설정합니다 + +### 사용법 {#usage} + +~~~jsx +resetFilter({ + id?: string, + permanent?: boolean +}): boolean; +~~~ + +### 매개변수 {#parameters} + +- `config` - (선택) 활성 필터를 재설정하기 위한 매개변수를 지정합니다. config가 지정되지 않았거나 비어 있는 경우, 구성 객체에 `permanent` 속성이 있는 필터를 제외한 모든 필터가 재설정됩니다. 다음 속성을 포함할 수 있습니다: + - `id` - (선택) 재설정할 필터의 id + - `permanent` - (선택) 구성에 `permanent:true` 설정이 있는 필터를 포함하여 모든 활성 필터를 재설정하려면 *true*로 설정합니다 + +### 반환값 {#returns} + +이 메서드는 permanent 필터를 포함한 모든 필터가 재설정된 경우 *true*를 반환하고, 그렇지 않으면 *false*를 반환합니다 + +### 예제 {#example} + +~~~jsx {6-7,9-10,12-13} +const diagram = new dhx.Diagram("diagram_container", { + // 구성 설정 +}); +diagram.data.parse(data); + +// config에 "permanent" 속성이 있는 필터를 제외한 모든 필터를 재설정합니다 +diagram.data.resetFilter(); + +// config에 "permanent" 속성이 있는 필터를 포함한 모든 필터를 재설정합니다 +diagram.data.resetFilter({ permanent: true }); + +// 지정된 id를 가진 필터를 재설정합니다 +diagram.data.resetFilter({ id: "filter_id" }); +~~~ + +**변경 로그**: v6.0에서 추가 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/serialize_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/serialize_method.md new file mode 100644 index 000000000..cb527f567 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/serialize_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: serialize() +title: Data Collection의 serialize 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 설명서에서 Data Collection의 serialize 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고 코드 예제와 라이브 데모를 사용해 보고 DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# serialize() + +### 설명 {#description} + +@short: 현재 다이어그램 데이터를 내보냅니다 + +### 사용법 {#usage} + +~~~jsx +serialize(): object[] | { data: object[]; links: object[] }; +~~~ + +### 반환값 {#returns} + +다이어그램 모드에 따라 메서드는 다음을 반환합니다: + +- `object[]` - (기본, 조직도, 마인드맵 Diagram 모드의 경우) Diagram의 각 항목과 링크에 대한 객체 배열 +- `{ data: object[]; links: object[] }` - (PERT Diagram 모드의 경우) 다음을 포함하는 객체: + - `data` 객체 배열 (도형용: `"task"`, `"milestone"`, `"project"`) + - `links` 객체 배열 (도형 간 연결용) + +### 예제 {#example} + +- 기본 다이어그램 모드의 경우 + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const data = diagram.data.serialize(); // -> [{...}, {...}, {...}, {...}] +~~~ + +- PERT 다이어그램 모드의 경우 + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "pert" +}); +diagram.data.parse(dataset); + +const dataset = diagram.data.serialize(); // -> { data: [...], links: [...] }; +~~~ + +PERT Diagram 모드에서는 내보낸 데이터 객체의 `links` 객체가 [DHTMLX Gantt 차트와 동일한 유형](https://docs.dhtmlx.com/gantt/desktop__link_properties.html)을 갖습니다. 즉, Diagram 데이터에서 링크의 유형이 Gantt 링크 유형 중 하나와 일치하면 직렬화 시에도 동일한 유형이 유지됩니다. 링크 유형이 지정되지 않았거나 다르게 설정된 경우(예: `type: "line"`), 해당 유형은 `type: "0"`으로 변환됩니다. + +**관련 문서**: [상태 저장 및 복원](guides/loading_data.md#saving-and-restoring-state) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/update_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/update_method.md new file mode 100644 index 000000000..122c3e58b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/data_collection/update_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: update() +title: Data Collection의 update 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 설명서에서 Data Collection의 update 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고 코드 예제와 라이브 데모를 사용해 보고 DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# update() + +### 설명 {#description} + +@short: 항목의 속성을 업데이트합니다 + +:::note +이 메서드는 항목의 *id* 또는 *type*을 변경하는 데 사용할 수 없습니다 +::: + +### 사용법 {#usage} + +~~~jsx +update( + id: string | number, + newItem: object +): void; +~~~ + +### 매개변수 {#parameters} + +- `id` - (필수) 업데이트해야 하는 항목의 id +- `newItem` - (필수) 업데이트해야 하는 속성의 해시 + +### 예제 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.update(123, { text:"New text" }); +~~~ + +**관련 문서**: [항목 업데이트](guides/manipulating_items.md#updating-an-item) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md new file mode 100644 index 000000000..c8e885a54 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md @@ -0,0 +1,147 @@ +--- +sidebar_label: addShape() +title: addShape 메서드 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 addShape 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# addShape() + +### 설명 {#description} + +@short: 사용자 지정 도형을 생성합니다 + +`addShape()` 메서드는 다이어그램과 에디터 모두에서 사용할 수 있습니다. [아래 예제를 확인하세요](#example) + +### 사용법 {#usage} + +~~~jsx +addShape( + type: string, + parameters: object +): void; +~~~ + +### 매개변수 {#parameters} + +- `type` - (필수) 사용자 지정 도형 유형의 고유한 이름입니다. 이 이름은 기본 도형의 이름과 달라야 합니다 +- `parameters` - (필수) `addShape()` 메서드의 추가 매개변수가 담긴 객체입니다. 여기에서 다음 속성을 지정할 수 있습니다: + - `template: function` - (필수) 도형의 구성 객체를 매개변수로 받아 HTML 또는 SVG 템플릿을 반환하는 함수입니다 + - [`defaults: object`](shapes/custom_shape.md) - (선택 사항) 생성된 도형의 기본 구성입니다. [도형의 전체 구성 속성 목록](shapes/configuration_properties.md)을 참조하세요 + - [`eventHandlers: object`](shapes/custom_shape.md#event-handlers-for-custom-shapes) - (선택 사항) 도형 템플릿의 HTML 요소에 사용자 지정 이벤트 핸들러를 추가합니다. `eventHandlers` 객체는 다음과 같은 `key:value` 쌍의 집합을 포함합니다: + - `key: string` - 이벤트의 이름입니다. 이벤트 이름 앞에는 'on' 접두사가 사용된다는 점에 유의하세요(onclick, onmouseover) + - `value: object` - 다음과 같은 `key:value` 쌍을 포함하는 객체입니다: + - `key`는 핸들러가 적용될 CSS 클래스 이름입니다 + - `value`는 두 개의 매개변수를 받는 함수입니다: + - `event: object` - (필수) 이벤트 객체입니다 + - `shape: object` - (필수) 도형 객체입니다 + + :::tip + 사용자 지정 이벤트 핸들러를 초기화할 때는 서로 다른 사용자 지정 도형에 대해 서로 다른 CSS 클래스를 사용하는 것이 좋습니다. + ::: + +### 예제 {#example} + +~~~jsx {8-37} title="다이어그램에 도형 추가하기" +const diagram = new dhx.Diagram("diagram_container", { + type: "org", // 또는 type: "default", 또는 type: "mindmap" + defaultShapeType: "personal", +}); + +diagram.data.parse(data); + +diagram.addShape("personal", { + template: ({ name, photo, post }) => (` +
+
+ `),
+ defaults: {
+ height: 115, width: 330,
+ name: "Name and First name",
+ post: "Resident",
+ photo: "",
+ },
+ eventHandlers: {
+ onclick: {
+ "toggle--open-menu": () => console.log("open menu")
+ }
+ }
+});
+~~~
+
+**Related sample**: [Editor가 포함된 Diagram. 조직도 모드. 카드, 편집 바 및 도구 모음 사용자 지정](https://snippet.dhtmlx.com/vcnt647v)
+
+아래 예제는 Diagram Editor에 사용자 지정 도형을 추가하는 방법과 함께, 에디터의 [Shapebar](guides/diagram_editor/shapebar.md) 및 [Editbar](guides/diagram_editor/editbar.md) 패널을 구성하는 방법을 보여줍니다. Editor의 editbar에서 사용자 지정 도형을 구성하는 것은 Editbar 패널의 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 속성을 통해 구현됩니다.
+
+~~~jsx {34-49} title="다이어그램 에디터에 도형 추가하기"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Network shapes": [
+ { type: "network", text: "Core", img: src + "core.svg" },
+ { type: "network", text: "Server", img: src + "server.svg" }
+ ],
+ "Flow shapes": [{ flowShapes: true }]
+ }
+ },
+ editbar: {
+ properties: {
+ network: [
+ { type: "arrange" },
+ {
+ type: "fieldset",
+ label: "Network information",
+ rows: [
+ { type: "avatar", key: "img", circle: true, readOnly: true },
+ { type: "textarea", key: "text", label: "Description" },
+ { type: "input", key: "ip", label: "IP" }
+ ]
+ }
+ ]
+ }
+ }
+ }
+});
+
+editor.parse(data);
+
+editor.diagram.addShape("network", {
+ template: ({ img, text, ip }) => {
+ return `
+
+
+
+
+
+
+ ${name}
+
+ ${post}
+
+ DHTMLX Diagram
+This is an example of simple customization of the editing panel using the container control.
+You can also use this control to create your own controls.
+
+ `
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/datepicker.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/datepicker.md
new file mode 100644
index 000000000..998d9a577
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/datepicker.md
@@ -0,0 +1,147 @@
+---
+sidebar_label: Datepicker
+title: Editbar 기본 컨트롤 - Datepicker
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Datepicker 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Datepicker
+
+@short: 날짜를 선택하기 위한 기본 컨트롤입니다.
+
+
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "datepicker",
+ key?: string | string[],
+ wrap?: boolean, // 기본값은 false
+
+ css?: string,
+ disabled?: boolean, // 기본값은 false
+ hidden?: boolean, // 기본값은 false
+ height?: string | number | "content", // 기본값은 "content"
+ width?: string | number | "content", // 기본값은 "content"
+ padding?: string | number,
+
+ date?: Date | string,
+ dateFormat?: string, // 기본값은 "%d/%m/%y"
+ disabledDates?: (date: Date) => boolean,
+ icon?: string,
+ mark?: (date: Date) => string,
+ mode?: "calendar" | "month" | "year", // 기본값은 "calendar"
+ placeholder?: string,
+ thisMonthOnly?: boolean, // 기본값은 false
+ timeFormat?: 24 | 12, // 기본값은 24
+ timePicker?: boolean, // 기본값은 false
+ valueFormat?: "string" | "Date", // 기본값은 "string"
+ weekNumbers?: boolean, // 기본값은 false
+ weekStart?: "saturday" | "sunday" | "monday", // 기본값은 "sunday"
+
+ // `wrap:true`인 경우 Fieldset의 label 속성을 확인하세요
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 기본값은 "top"
+
+ // 서비스 속성 및 메서드
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"datepicker"`로 설정합니다
+- `key` - (선택 사항) 지정되거나 수정되는 속성의 이름 또는 Diagram 항목 객체 내에서 해당 속성에 대한 경로입니다
+- `wrap` - (선택 사항) 외부 래핑 표시 여부를 지정합니다. 기본값은 *false*입니다
+- `css` - (선택 사항) 컨트롤 문자열에 스타일 클래스를 추가합니다
+- `disabled` - (선택 사항) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. 기본값은 *false*입니다
+- `hidden` - (선택 사항) 컨트롤의 숨김 여부를 정의합니다. 기본값은 *false*입니다
+- `height` - (선택 사항) 컨트롤의 높이입니다. `"content"`가 기본값입니다
+- `width` - (선택 사항) 컨트롤의 너비입니다. `"content"`가 기본값입니다
+- `padding` - (선택 사항) Datepicker 컨트롤의 셀과 테두리 사이의 여백을 설정합니다
+- `date` - (선택 사항) 캘린더가 생성될 때 열리는 날짜를 정의합니다
+- `dateFormat` - (선택 사항) 캘린더에 표시되는 날짜의 형식을 정의합니다. *"%d/%m/%y"*가 기본값입니다. 날짜 형식에는 구분 기호(공백 또는 기호)가 반드시 포함되어야 하며, 그렇지 않으면 오류가 발생합니다
+- `disabledDates` - (선택 사항) 특정 날짜 구간을 비활성화할 수 있으며, 해당 요일 레이블은 흐리게 표시됩니다
+- `icon` - (선택 사항) 사용 중인 아이콘 폰트에서 가져온 아이콘의 CSS 클래스입니다
+- `mark` - (선택 사항) 특정 날짜에 CSS 클래스를 추가할 수 있습니다
+- `mode` - (선택 사항) 캘린더 표시 모드를 지정합니다: `"calendar"` | `"month"` | `"year"`. `"calendar"`가 기본값입니다
+- `placeholder` - (선택 사항) 입력을 위한 힌트입니다
+- `thisMonthOnly` - (선택 사항) 현재 표시된 달을 기준으로 이전/다음 달의 날짜를 숨깁니다
+- `timeFormat` - (선택 사항) timepicker의 시간 형식을 12시간제 또는 24시간제로 정의합니다: *12* | *24*. *24*가 기본값입니다
+- `timePicker` - (선택 사항) 캘린더에 timepicker를 추가합니다. 기본값은 *false*입니다
+- `valueFormat` - (선택 사항) 컨트롤의 현재 값을 가져올 때 반환되는 값의 형식을 정의합니다: `"string"` | `"Date"`. `"string"`이 기본값입니다
+- `weekNumbers` - (선택 사항) 주 번호 표시 여부를 정의합니다. *false*가 기본값입니다
+- `weekStart` - (선택 사항) 한 주의 시작 요일을 설정합니다: `"saturday"` | `"monday"` | `"sunday"`. `"sunday"`가 기본값입니다
+- `label` - (선택 사항) 컨트롤의 레이블을 지정합니다
+- `labelWidth` - (선택 사항) 컨트롤의 레이블 너비를 설정합니다
+- `labelPosition` - (선택 사항) 레이블의 위치를 정의합니다: `"left"` | `"top"`. `"top"`이 기본값입니다
+
+### 서비스 속성 및 메서드 {#service-properties-and-methods}
+
+:::warning
+기본 유형의 컨트롤에 대해서는 서비스 속성 및 메서드를 재정의하지 않는 것을 강력히 권장합니다. 재정의할 경우 기능에 오류가 발생할 수 있습니다.
+:::
+
+- `$on` - (선택 사항) - 이벤트 리스너를 설정할 수 있습니다. 해당 객체는 다음 속성을 가집니다:
+ - `eventName` - 다음 매개변수와 함께 호출되는 콜백 함수입니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `control` - [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form 컨트롤
+ - `editor` - Diagram Editor의 객체
+ - `id` - Diagram 항목의 id
+ - `arguments` - (선택 사항) - [원본 이벤트 인수](https://docs.dhtmlx.com/suite/category/form-datepicker-events/)
+- `$handler` - (선택 사항) - 폼 컨트롤의 `change` 및 `input` 이벤트, 그리고 DataCollection의 `change` 이벤트 발생 시 동작을 처리할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `id` - Diagram 항목의 id
+ - `key` - 지정되거나 수정되는 속성의 이름 또는 Diagram 항목 객체 내에서 해당 속성에 대한 경로
+ - `editor` - Diagram Editor의 객체
+ - `control` - 컴포넌트가 빌드된 [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form 컨트롤의 객체
+ - `value` - [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form 컨트롤의 새로운 값
+- `$setValue` - (선택 사항) - 컨트롤 초기화 시 및 DataCollection의 값 변경 시 [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form 컨트롤의 값을 설정할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `editor` - Diagram Editor의 객체
+ - `control` - 컴포넌트가 빌드된 [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form 컨트롤의 객체
+ - `value` - Diagram 항목의 값
+- `$layout` - (선택 사항) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form 컨트롤의 설정을 반환합니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 서비스 속성을 제외한 컨트롤의 설정
+
+## 예제 {#example}
+
+~~~jsx {7-21}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "datepicker",
+ key: "date_start",
+ label: "Date start",
+ wrap: true,
+ },
+ {
+ type: "datepicker",
+ key: "date_end",
+ label: "Date end",
+ wrap: true,
+ valueFormat: "Date",
+ timePicker: true,
+ weekStart: "monday"
+ }
+ ]
+ }
+ }
+ }
+});
+editor.parse([
+ { "id": "shape_1" },
+ { "id": "shape_2", "parent": "shape_1", "date_start": "25/03/24", "date_end": new Date },
+ { "id": "shape_3", "parent": "shape_1", "date_start": "25/03/24", "date_end": new Date }
+]);
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/fieldset.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/fieldset.md
new file mode 100644
index 000000000..d37b4a9dd
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/fieldset.md
@@ -0,0 +1,155 @@
+---
+sidebar_label: Fieldset
+title: Editbar 기본 컨트롤 - Fieldset
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Fieldset 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Fieldset
+
+@short: [`controls`](api/diagram_editor/editbar/config/controls_property.md) 또는 [`properties`](api/diagram_editor/editbar/config/properties_property.md) Editbar 설정 옵션을 사용하여 복잡한 컨트롤을 생성하기 위한 기본 컨트롤입니다.
+
+
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "fieldset",
+
+ compact?: boolean,
+ hidden?: boolean, // 기본값은 false
+ disabled?: boolean, // 기본값은 false
+
+ css?: string,
+ width?: string | number | "content", // 기본값은 "content"
+ height?: string | number | "content", // 기본값은 "content"
+ padding?: string | number,
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값은 "start"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값은 "left"
+
+ rows?: object[],
+ cols?: object[],
+
+ $layout?: function
+}
+~~~
+
+`rows` 및 `cols` 속성에는 지정된 컨트롤의 객체 배열 또는 아래에 제시된 중첩 구조가 포함될 수 있습니다:
+
+~~~jsx
+{
+ css?: string,
+ width?: string | number | "content", // 기본값은 "content"
+ height?: string | number | "content", // 기본값은 "content"
+ padding?: string | number,
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값은 "start"
+ rows?: object[],
+ cols?: object[]
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"fieldset"`으로 설정합니다
+- `compact` - (선택 사항) 컴팩트 모드를 지정하여 여백과 프레임을 제거합니다. *false*가 기본값입니다
+- `disabled` - (선택 사항) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. *false*가 기본값입니다
+- `hidden` - (선택 사항) 컨트롤의 숨김 여부를 정의합니다. *false*가 기본값입니다
+- `css` - (선택 사항) 컨트롤 그룹에 적용되는 CSS 클래스의 이름입니다
+- `width` - (선택 사항) 컨트롤 그룹의 너비를 설정합니다. `"content"`가 기본값입니다
+- `height` - (선택 사항) 컨트롤 그룹의 높이를 설정합니다. `"content"`가 기본값입니다
+- `padding` - (선택 사항) 컨트롤 그룹 내부 콘텐츠의 여백을 설정합니다
+- `align` - (선택 사항) 컨트롤 그룹 내부 컨트롤의 정렬을 설정합니다. `"start"`가 기본값입니다
+- `label` - (선택 사항) 컨트롤의 레이블을 지정합니다
+- `labelAlignment` - (선택 사항) 레이블의 위치를 정의합니다: `"left"` | `"right"` | `"center"`. `"left"`가 기본값입니다
+- `rows` - (선택 사항) 컨트롤 그룹 내부의 컨트롤을 세로로 배치합니다
+- `cols` - (선택 사항) 컨트롤 그룹 내부의 컨트롤을 가로로 배치합니다
+
+#### 서비스 속성 및 메서드 {#service-properties-and-methods}
+
+:::warning
+기본 유형의 컨트롤에 대해서는 서비스 속성 및 메서드를 재정의하지 않는 것을 강력히 권장합니다. 재정의할 경우 기능에 오류가 발생할 수 있습니다.
+:::
+
+- `$layout` - (선택 사항) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. [Fieldset](https://docs.dhtmlx.com/suite/form/fieldset/) Form 컨트롤의 설정을 반환합니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 서비스 속성을 제외한 컨트롤의 설정
+
+## 예제 {#example}
+
+~~~jsx {7-28} title="properties 속성을 통해 Fieldset 생성하기"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "fieldset",
+ label: "Task details",
+ rows: [
+ { type: "input", key: "name", label: "Task name" },
+ { type: "input", key: "id", label: "ID", readOnly: true },
+ {
+ align: "between",
+ cols: [
+ { type: "datepicker", key: "date_start", label: "Date start", width: "48%" },
+ { type: "datepicker", key: "date_end", label: "Date end", width: "48%" },
+ ]
+ },
+ {
+ type: "combo",
+ key: "responsible",
+ label: "Responsible",
+ placeholder: "Select responsible",
+ options: ["Henry Bennet", "Mike Frebel", "Greg Mash"]
+ }
+ ]
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+~~~jsx {10-33} title="controls 속성을 통해 복잡한 컨트롤 생성하기"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ { type: "details" }
+ ]
+ },
+ controls: {
+ details: {
+ type: "fieldset",
+ label: "Task details",
+ rows: [
+ { type: "input", key: "name", label: "Task name" },
+ { type: "input", key: "id", label: "ID", readOnly: true },
+ {
+ align: "between",
+ cols: [
+ { type: "datepicker", key: "date_start", label: "Date start", width: "48%" },
+ { type: "datepicker", key: "date_end", label: "Date end", width: "48%" }
+ ]
+ },
+ {
+ type: "combo",
+ key: "responsible",
+ label: "Responsible",
+ placeholder: "Select responsible",
+ options: ["Henry Bennet", "Mike Frebel", "Greg Mash"]
+ }
+ ]
+ }
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/input.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/input.md
new file mode 100644
index 000000000..f8e6f93aa
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/input.md
@@ -0,0 +1,134 @@
+---
+sidebar_label: Input
+title: Editbar 기본 컨트롤 - Input
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Input 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Input
+
+@short: 텍스트를 입력하기 위한 기본 입력 필드 컨트롤입니다.
+
+
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "input",
+ key?: string | string[],
+ wrap?: boolean, // 기본값은 false
+
+ css?: string,
+ disabled?: boolean, // 기본값은 false
+ hidden?: boolean, // 기본값은 false
+ height?: string | number | "content", // 기본값은 "content"
+ width?: string | number | "content", // 기본값은 "content"
+ padding?: string | number,
+
+ icon?: string,
+ inputType?: "text" | "password" | "number", // 기본값은 "text"
+ max?: number | string,
+ maxlength?: number | string,
+ min?: number | string,
+ minlength?: number | string,
+ placeholder?: string,
+ readOnly?: boolean, // 기본값은 false
+
+ // `wrap:true`인 경우 Fieldset의 label 속성을 확인하세요
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 기본값은 "top"
+
+ // 서비스 속성 및 메서드
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"input"`으로 설정합니다
+- `key` - (선택 사항) 지정되거나 수정되는 속성의 이름 또는 Diagram 항목 객체 내에서 해당 속성에 대한 경로입니다
+- `wrap` - (선택 사항) 외부 래핑 표시 여부를 지정합니다. *false*가 기본값입니다
+- `css` - (선택 사항) 컨트롤에 스타일 클래스를 추가합니다
+- `disabled` - (선택 사항) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. *false*가 기본값입니다
+- `hidden` - (선택 사항) 컨트롤의 숨김 여부를 정의합니다. *false*가 기본값입니다
+- `height` - (선택 사항) 컨트롤의 높이입니다. `"content"`가 기본값입니다
+- `width` - (선택 사항) 컨트롤의 너비입니다. `"content"`가 기본값입니다
+- `padding` - (선택 사항) input 컨트롤의 셀과 테두리 사이의 여백을 설정합니다
+- `icon` - (선택 사항) 사용 중인 아이콘 폰트에서 가져온 [아이콘](https://docs.dhtmlx.com/suite/helpers/icon/)의 CSS 클래스입니다
+- `inputType` - (선택 사항) 입력의 유형을 설정합니다: `"text"` | `"password"` | `"number"`. `"text"`가 기본값입니다
+비밀번호를 입력하는 필드를 지정하려면 `"password"` 값을 사용하세요
+- `max` - (선택 사항) - [입력에 허용되는 최댓값](https://docs.dhtmlx.com/suite/form/work_with_form/#minimal-and-maximal-values)입니다. 이 속성은 입력 유형이 *"number"*인 경우에만 작동합니다
+- `maxlength` - (선택 사항) [입력에 허용되는 최대 문자 수](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)입니다. 이 속성은 다음 입력 유형에서 작동합니다: *"text", "password"*
+- `min` - (선택 사항) [입력에 허용되는 최솟값](https://docs.dhtmlx.com/suite/form/work_with_form/#minimal-and-maximal-values)입니다. 이 속성은 입력 유형이 *"number"*인 경우에만 작동합니다
+- `minlength` - (선택 사항) [입력에 허용되는 최소 문자 수](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)입니다. 이 속성은 다음 입력 유형에서 작동합니다: *"text", "password"*
+- `placeholder` - (선택 사항) 입력을 위한 힌트입니다
+- `readOnly` - (선택 사항) 입력이 읽기 전용인지 여부를 정의합니다. *false*가 기본값입니다
+- `label` - (선택 사항) 컨트롤의 레이블을 지정합니다
+- `labelWidth` - (선택 사항) 컨트롤의 레이블 너비를 설정합니다
+- `labelPosition` - (선택 사항) 레이블의 위치를 정의합니다: `"left"` | `"top"`. `"top"`이 기본값입니다
+
+### 서비스 속성 및 메서드 {#service-properties-and-methods}
+
+:::warning
+기본 유형의 컨트롤에 대해서는 서비스 속성 및 메서드를 재정의하지 않는 것을 강력히 권장합니다. 재정의할 경우 기능에 오류가 발생할 수 있습니다.
+:::
+
+- `$on` - (선택 사항) - 이벤트 리스너를 설정할 수 있습니다. 해당 객체는 다음 속성을 가집니다:
+ - `eventName` - 다음 매개변수와 함께 호출되는 콜백 함수입니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `control` - [Input](https://docs.dhtmlx.com/suite/form/input/) Form 컨트롤
+ - `editor` - Diagram Editor의 객체
+ - `id` - Diagram 항목의 id
+ - `arguments` - (선택 사항) - [원본 이벤트 인수](https://docs.dhtmlx.com/suite/category/form-input-events/)
+- `$handler` - (선택 사항) - [Input](https://docs.dhtmlx.com/suite/form/input/) Form 컨트롤의 `change` 및 `input` 이벤트, 그리고 DataCollection의 `change` 이벤트 발생 시 동작을 처리할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `id` - Diagram 항목의 id
+ - `key` - 지정되거나 수정되는 속성의 이름 또는 Diagram 항목 객체 내에서 해당 속성에 대한 경로
+ - `editor` - Diagram Editor의 객체
+ - `control` - 컴포넌트가 빌드된 [Input](https://docs.dhtmlx.com/suite/form/input/) Form 컨트롤의 객체
+ - `value` - [Input](https://docs.dhtmlx.com/suite/form/input/) Form 컨트롤의 새로운 값
+- `$setValue` - (선택 사항) - 컨트롤 초기화 시 및 DataCollection의 값 변경 시 [Input](https://docs.dhtmlx.com/suite/form/input/) Form 컨트롤의 값을 설정할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `editor` - Diagram Editor의 객체
+ - `control` - 컴포넌트가 빌드된 [Input](https://docs.dhtmlx.com/suite/form/input/) Form 컨트롤의 객체
+ - `value` - Diagram 항목의 값
+- `$layout` - (선택 사항) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. [Input](https://docs.dhtmlx.com/suite/form/input/) Form 컨트롤의 설정을 반환합니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 서비스 속성을 제외한 컨트롤의 설정
+
+## 예제 {#example}
+
+~~~jsx {7-22}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "input",
+ inputType: "text",
+ key: "text",
+ label: "Input with a string value",
+ placeholder: "Enter a string value"
+ },
+ {
+ type: "input",
+ inputType: "number",
+ key: "x",
+ label: "Input with a number value",
+ placeholder: "Enter a number value",
+ min: 0,
+ max: 100,
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/radiogroup.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/radiogroup.md
new file mode 100644
index 000000000..c71135d24
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/radiogroup.md
@@ -0,0 +1,167 @@
+---
+sidebar_label: RadioGroup
+title: Editbar 기본 컨트롤 - RadioGroup
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 RadioGroup 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+# RadioGroup
+
+@short: Radio 버튼 그룹을 생성하기 위한 기본 컨트롤입니다.
+
+
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "radiogroup",
+ options: {
+ rows?: object[],
+ cols?: object[],
+ css?: string,
+ height?: string | number | "content",
+ padding?: string | number,
+ width?: string | number | "content"
+ },
+ key?: string | string[],
+ wrap?: boolean, // 기본값은 false
+
+ disabled?: boolean, // 기본값은 false
+ hidden?: boolean, // 기본값은 false
+
+ css?: string,
+ height?: string | number | "content", // 기본값은 "content"
+ width?: string | number | "content", // 기본값은 "content"
+ padding?: string | number,
+
+ // `wrap:true`인 경우 Fieldset의 label 속성을 확인하세요
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 기본값은 "top"
+
+ // 서비스 속성 및 메서드
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+RadioGroup 내부의 Radio 버튼 설정 객체입니다:
+
+~~~jsx
+{
+ value: string,
+ text?: string,
+
+ disabled?: boolean,
+ hidden?: boolean,
+ css?: string,
+ height?: string | number | "content",
+ width?: string | number | "content",
+ padding?: string | number
+}
+~~~
+
+## 설명 {#description}
+
+### RadioGroup 속성 {#radiogroup-properties}
+
+#### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"radioGroup"`으로 설정합니다
+- `key` - (선택 사항) 지정되거나 수정되는 속성의 이름 또는 Diagram 항목 객체 내에서 해당 속성에 대한 경로입니다
+- `wrap` - (선택 사항) 외부 래핑 표시 여부를 지정합니다. *false*가 기본값입니다
+- `options` - (필수) RadioGroup의 옵션을 담은 객체입니다. 이 객체에는 다음 속성이 포함될 수 있습니다:
+ - `rows` - (선택 사항) [radio 버튼](#radio-button-properties)을 RadioGroup 컨트롤 내부에 세로로 배치합니다
+ - `cols` - (선택 사항) [radio 버튼](#radio-button-properties)을 RadioGroup 컨트롤 내부에 가로로 배치합니다
+ - `css` - (선택 사항) RadioGroup에 스타일 클래스를 추가합니다
+ - `height` - (선택 사항) RadioGroup의 높이입니다
+ - `padding` - (선택 사항) RadioGroup의 셀과 테두리 사이의 여백을 설정합니다
+ - `width` - (선택 사항) RadioGroup의 너비입니다
+- `disabled` - (선택 사항) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. *false*가 기본값입니다
+- `hidden` - (boolean) RadioGroup의 숨김 여부를 정의합니다. *false*가 기본값입니다
+- `css` - (선택 사항) 컨트롤에 스타일 클래스를 추가합니다
+- `height` - (선택 사항) 컨트롤의 높이입니다. `"content"`가 기본값입니다
+- `width` - (선택 사항) 컨트롤의 너비입니다. `"content"`가 기본값입니다
+- `padding` - (선택 사항) RadioGroup 컨트롤의 셀과 테두리 사이의 여백을 설정합니다
+- `label` - (선택 사항) 컨트롤의 레이블을 지정합니다
+- `labelWidth` - (선택 사항) 컨트롤의 레이블 너비를 설정합니다
+- `labelPosition` - (선택 사항) 레이블의 위치를 정의합니다: `"left"` | `"top"`. `"top"`이 기본값입니다
+
+#### 서비스 속성 및 메서드 {#service-properties-and-methods}
+
+:::warning
+기본 유형의 컨트롤에 대해서는 서비스 속성 및 메서드를 재정의하지 않는 것을 강력히 권장합니다. 재정의할 경우 기능에 오류가 발생할 수 있습니다.
+:::
+
+- `$on` - (선택 사항) - 이벤트 리스너를 설정할 수 있습니다. 해당 객체는 다음 속성을 가집니다:
+ - `eventName` - 다음 매개변수와 함께 호출되는 콜백 함수입니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `control` - [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 컨트롤
+ - `editor` - Diagram Editor의 객체
+ - `id` - Diagram 항목의 id
+ - `arguments` - (선택 사항) - [원본 이벤트 인수](https://docs.dhtmlx.com/suite/category/form-radiogroup-events/)
+- `$handler` - (선택 사항) - [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 컨트롤의 `change` 이벤트 및 DataCollection의 `change` 이벤트 발생 시 동작을 처리할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `id` - Diagram 항목의 id
+ - `key` - 지정되거나 수정되는 속성의 이름 또는 Diagram 항목 객체 내에서 해당 속성에 대한 경로
+ - `editor` - Diagram Editor의 객체
+ - `control` - 컴포넌트가 빌드된 [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 컨트롤의 객체
+ - `value` - [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 컨트롤의 새로운 값
+- `$setValue` - (선택 사항) - 컨트롤 초기화 시 및 DataCollection의 값 변경 시 [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 컨트롤의 값을 설정할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `editor` - Diagram Editor의 객체
+ - `control` - 컴포넌트가 빌드된 [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 컨트롤의 객체
+ - `value` - Diagram 항목의 값
+- `$layout` - (선택 사항) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 컨트롤의 설정을 반환합니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 서비스 속성을 제외한 컨트롤의 설정
+
+### Radio 버튼 속성 {#radio-button-properties}
+
+- `value` - (필수) radio 버튼의 값입니다
+- `text` - (선택 사항) radio 버튼의 텍스트 레이블입니다
+- `disabled` - (선택 사항) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. *false*가 기본값입니다
+- `hidden` - (선택 사항) radio 버튼의 숨김 여부를 정의합니다. *false*가 기본값입니다
+- `css` - (선택 사항) 컨트롤에 스타일 클래스를 추가합니다
+- `height` - (선택 사항) 컨트롤의 높이입니다. `"content"`가 기본값입니다
+- `width` - (선택 사항) 컨트롤의 너비입니다. `"content"`가 기본값입니다
+- `padding` - (선택 사항) radio 버튼 컨트롤의 셀과 테두리 사이의 여백을 설정합니다
+
+## 예제 {#example}
+
+~~~jsx {7-28}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "radioGroup",
+ key: "textAlign",
+ label: "Text align",
+ wrap: true,
+ options: {
+ rows: [
+ {
+ text: "Left",
+ value: "left"
+ },
+ {
+ text: "Center",
+ value: "center"
+ },
+ {
+ text: "Right",
+ value: "right"
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/select.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/select.md
new file mode 100644
index 000000000..492af4ef0
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/select.md
@@ -0,0 +1,136 @@
+---
+sidebar_label: Select
+title: Editbar 기본 컨트롤 - Select
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Select 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Select
+
+@short: 선택할 수 있는 여러 옵션을 제공하는 고급 선택 상자를 나타내는 기본 컨트롤입니다.
+
+
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "select",
+ options: (object | string)[],
+ key?: string | string[],
+ wrap?: boolean, // 기본값은 false
+
+ css?: string,
+ disabled?: boolean, // 기본값은 false
+ hidden?: boolean, // 기본값은 false
+ height?: string | number | "content", // 기본값은 "content"
+ width?: string | number | "content", // 기본값은 "content"
+ padding?: string | number,
+ icon?: string,
+
+ // `wrap:true`인 경우 Fieldset의 label 속성을 확인하세요
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 기본값은 "top"
+
+ // 서비스 속성 및 메서드
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+Select 내부의 옵션 설정 객체입니다:
+
+~~~jsx
+{
+ value: string | number,
+ content: string,
+ disabled?: boolean
+}
+~~~
+
+## 설명 {#description}
+
+### Select 속성 {#select-properties}
+
+#### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"select"`로 설정합니다
+- `options` - (필수) Select 옵션의 배열입니다. 각 옵션은 *문자열* 또는 `key:value` 쌍의 집합을 가진 *객체*로 설정할 수 있습니다 - [옵션의 속성과 값](#option-properties)
+- `key` - (선택 사항) 지정되거나 수정되는 속성의 이름 또는 Diagram 항목 객체 내에서 해당 속성에 대한 경로입니다
+- `wrap` - (선택 사항) 외부 래핑 표시 여부를 지정합니다. *false*가 기본값입니다
+- `css` - (선택 사항) 컨트롤에 스타일 클래스를 추가합니다
+- `disabled` - (선택 사항) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. *false*가 기본값입니다
+- `hidden` - (boolean) Select의 숨김 여부를 정의합니다. *false*가 기본값입니다
+- `height` - (선택 사항) 컨트롤의 높이입니다. `"content"`가 기본값입니다
+- `width` - (선택 사항) 컨트롤의 너비입니다. `"content"`가 기본값입니다
+- `padding` - (선택 사항) Select 컨트롤의 셀과 테두리 사이의 여백을 설정합니다
+- `icon` - (선택 사항) 사용 중인 아이콘 폰트에서 가져온 [아이콘](https://docs.dhtmlx.com/suite/helpers/icon/)의 CSS 클래스입니다
+- `label` - (선택 사항) 컨트롤의 레이블을 지정합니다
+- `labelWidth` - (선택 사항) 컨트롤의 레이블 너비를 설정합니다
+- `labelPosition` - (선택 사항) 레이블의 위치를 정의합니다: `"left"` | `"top"`. `"top"`이 기본값입니다
+
+#### 서비스 속성 및 메서드 {#service-properties-and-methods}
+
+:::warning
+기본 유형의 컨트롤에 대해서는 서비스 속성 및 메서드를 재정의하지 않는 것을 강력히 권장합니다. 재정의할 경우 기능에 오류가 발생할 수 있습니다.
+:::
+
+- `$on` - (선택 사항) - 이벤트 리스너를 설정할 수 있습니다. 해당 객체는 다음 속성을 가집니다:
+ - `eventName` - 다음 매개변수와 함께 호출되는 콜백 함수입니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `control` - [Select](https://docs.dhtmlx.com/suite/form/select/) Form 컨트롤
+ - `editor` - Diagram Editor의 객체
+ - `id` - Diagram 항목의 id
+ - `arguments` - (선택 사항) - [원본 이벤트 인수](https://docs.dhtmlx.com/suite/category/form-select-events/)
+- `$handler` - (선택 사항) - [Select](https://docs.dhtmlx.com/suite/form/select/) Form 컨트롤의 `change` 이벤트 및 DataCollection의 `change` 이벤트 발생 시 동작을 처리할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `id` - Diagram 항목의 id
+ - `key` - 지정되거나 수정되는 속성의 이름 또는 Diagram 항목 객체 내에서 해당 속성에 대한 경로
+ - `editor` - Diagram Editor의 객체
+ - `control` - 컴포넌트가 빌드된 [Select](https://docs.dhtmlx.com/suite/form/select/) Form 컨트롤의 객체
+ - `value` - [Select](https://docs.dhtmlx.com/suite/form/select/) Form 컨트롤의 새로운 값
+- `$setValue` - (선택 사항) - 컨트롤 초기화 시 및 DataCollection의 값 변경 시 [Select](https://docs.dhtmlx.com/suite/form/select/) Form 컨트롤의 값을 설정할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `editor` - Diagram Editor의 객체
+ - `control` - 컴포넌트가 빌드된 [Select](https://docs.dhtmlx.com/suite/form/select/) Form 컨트롤의 객체
+ - `value` - Diagram 항목의 값
+- `$layout` - (선택 사항) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. [Select](https://docs.dhtmlx.com/suite/form/select/) Form 컨트롤의 설정을 반환합니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 서비스 속성을 제외한 컨트롤의 설정
+
+### 옵션 속성 {#option-properties}
+
+- `value` - (필수) select 옵션의 값을 설정합니다
+- `content` - (필수) select 옵션에 표시되는 콘텐츠입니다
+- `disabled` - (선택 사항) 옵션의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. *false*가 기본값입니다
+
+## 예제 {#example}
+
+~~~jsx {7-20}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "select",
+ label: "Position",
+ key: "position",
+ wrap: true,
+ options: [
+ "",
+ "Technical Director",
+ "Manager",
+ "QA Lead",
+ { value: 4, content: "Team Lead", disabled: true },
+ { value: 5, content: "Programmer" }
+ ]
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/slider.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/slider.md
new file mode 100644
index 000000000..e3dbd59db
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/slider.md
@@ -0,0 +1,136 @@
+---
+sidebar_label: Slider
+title: Editbar 기본 컨트롤 - Slider
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Slider 컨트롤을 살펴볼 수 있습니다. 개발자 가이드와 API 참조를 확인하고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Slider
+
+@short: 고정된 옵션 집합을 따라 핸들을 이동하여 숫자 값을 선택하는 기본 컨트롤입니다.
+
+
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "slider",
+ key?: string | string[],
+ wrap?: boolean, // 기본값: false
+
+ disabled?: boolean, // 기본값: false
+ hidden?: boolean, // 기본값: false
+ css?: string,
+ padding?: string | number,
+ height?: string | number | "content", // 기본값: "content"
+ width?: string | number | "content", // 기본값: "content"
+
+ inverse?: boolean, // 기본값: false
+ majorTick?: number,
+ max?: number, // 기본값: 100
+ min?: number, // 기본값: 0
+ mode?: "vertical" | "horizontal", // 기본값: "horizontal"
+ range?: boolean, // 기본값: false
+ step?: number, // 기본값: 1
+ tick?: number,
+ tickTemplate?: (position: number) => string,
+ tooltip?: boolean, // 기본값: true
+
+ // `wrap:true`인 경우 Fieldset의 label 속성을 확인하세요
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 기본값: "top"
+
+ // 서비스 속성 및 메서드
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"slider"`로 설정합니다
+- `key` - (선택 사항) 지정되거나 수정된 속성의 이름 또는 Diagram 항목 객체 내 해당 속성의 경로입니다
+- `wrap` - (선택 사항) 외부 래핑(wrapping) 표시 여부를 설정합니다. 기본값은 *false*입니다
+- `disabled` - (선택 사항) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 지정합니다. 기본값은 *false*입니다
+- `hidden` - (선택 사항) 컨트롤의 숨김 여부를 지정합니다. 기본값은 *false*입니다
+- `css` - (선택 사항) 컨트롤에 스타일 클래스를 추가합니다
+- `height` - (선택 사항) 컨트롤의 높이입니다. 기본값은 `"content"`입니다
+- `width` - (선택 사항) 컨트롤의 너비입니다. 기본값은 `"content"`입니다
+- `padding` - (선택 사항) 셀과 slider 컨트롤 테두리 사이의 여백(padding)을 설정합니다
+- `inverse` - (선택 사항) 반전된(inverse) slider 모드를 활성화/비활성화합니다. 기본값은 *false*입니다
+- `majorTick` - (선택 사항) slider 눈금에 숫자 값을 렌더링하는 간격을 설정합니다
+- `max` - (선택 사항) slider의 최댓값입니다. 기본값은 *100*입니다
+- `min` - (선택 사항) slider의 최솟값입니다. 기본값은 *0*입니다
+- `mode` - (선택 사항) slider 눈금의 방향입니다. 기본값은 `"horizontal"`입니다
+- `range` - (선택 사항) slider에서 값의 범위 선택 여부를 활성화/비활성화합니다. 기본값은 *false*입니다
+- `step` - (선택 사항) slider 핸들이 이동하는 단위(step)입니다. 기본값은 *1*입니다
+- `tick` - (선택 사항) slider 눈금을 렌더링하기 위한 단계 간격을 설정합니다
+- `tickTemplate` - (선택 사항) 눈금에 값을 렌더링하기 위한 템플릿을 설정합니다
+- `tooltip` - (선택 사항) slider 핸들 위에 마우스를 올렸을 때 눈금 값이 포함된 안내 메시지를 활성화합니다. 기본값은 *true*입니다
+
+### 서비스 속성 및 메서드 {#service-properties-and-methods}
+
+:::warning
+기본 유형의 컨트롤에 대한 서비스 속성 및 메서드를 재정의하지 않는 것이 좋습니다. 재정의할 경우 기능이 손상될 수 있습니다.
+:::
+
+- `$on` - (선택 사항) - 이벤트 리스너를 설정할 수 있습니다. 객체는 다음 속성을 가집니다:
+ - `eventName` - 다음 매개변수와 함께 호출되는 콜백 함수입니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `control` - [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 컨트롤입니다
+ - `editor` - Diagram Editor의 객체입니다
+ - `id` - Diagram 항목의 id입니다
+ - `arguments` - (선택 사항) - [원본 이벤트 인수](https://docs.dhtmlx.com/suite/category/form-slider-events/)입니다
+- `$handler` - (선택 사항) - [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 컨트롤의 `change` 이벤트와 DataCollection의 `change` 이벤트가 발생할 때 동작을 처리할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `id` - Diagram 항목의 id입니다
+ - `key` - 지정되거나 수정된 속성의 이름 또는 Diagram 항목 객체 내 해당 속성의 경로입니다
+ - `editor` - Diagram Editor의 객체입니다
+ - `control` - 컴포넌트가 기반으로 하는 [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 컨트롤의 객체입니다
+ - `value` - [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 컨트롤의 새 값입니다
+- `$setValue` - (선택 사항) - 컨트롤 초기화 시 및 DataCollection에서 값이 변경될 때 [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 컨트롤의 값을 설정할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `editor` - Diagram Editor의 객체입니다
+ - `control` - 컴포넌트가 기반으로 하는 [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 컨트롤의 객체입니다
+ - `value` - Diagram 항목의 값입니다
+- `$layout` - (선택 사항) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 컨트롤의 구성을 반환합니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 서비스 속성을 제외한 컨트롤의 구성입니다
+
+## 예제 {#example}
+
+~~~jsx {7-18}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $lineTitle: [
+ {
+ type: "slider",
+ key: "distance",
+ label: "Distance",
+ wrap: true,
+ min: 0,
+ max: 100,
+ step: 1,
+ tick: 5,
+ majorTick: 10,
+ tickTemplate: value => value
+ },
+ ]
+ }
+ }
+ }
+});
+editor.parse([
+ { "id": "shape_1", "type": "rectangle", "text": "shape" },
+ { "id": "shape_2","type": "rectangle", "text": "shape", "x": 400 },
+ { "id": "line", "type": "line", "from": "shape_1", "to": "shape_2" },
+ { "type": "lineTitle", "parent": "line", "text": "Title", "distance": 50 }
+]);
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/spacer.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/spacer.md
new file mode 100644
index 000000000..dbfd4bf02
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/spacer.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: Spacer
+title: Editbar 기본 컨트롤 - Spacer
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Spacer 컨트롤을 살펴볼 수 있습니다. 개발자 가이드와 API 참조를 확인하고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Spacer
+
+@short: 공간을 차지하여 Editbar의 컨트롤을 배치하고 정렬하는 기본 컨트롤입니다.
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "spacer"
+}
+~~~
+
+## 설명 {#description}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"spacer"`로 설정합니다
+
+## 예제 {#example}
+
+~~~jsx {10,12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ show: true,
+ properties: {
+ $shape: [
+ { type: "input", key: "name", label: "Task name" },
+ { type: "input", key: "id", label: "ID", readOnly: true },
+ { type: "spacer" },
+ { type: "button", text: "Send", full: true },
+ { type: "spacer" }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/textarea.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/textarea.md
new file mode 100644
index 000000000..884e5301c
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/textarea.md
@@ -0,0 +1,116 @@
+---
+sidebar_label: Textarea
+title: Editbar 기본 컨트롤 - Textarea
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Textarea 컨트롤을 살펴볼 수 있습니다. 개발자 가이드와 API 참조를 확인하고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Textarea
+
+@short: 간단한 여러 줄 텍스트를 입력하는 기본 컨트롤입니다.
+
+
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "textarea",
+ key?: string | string[],
+ wrap?: boolean, // 기본값: false
+
+ css?: string,
+ disabled?: boolean, // 기본값: false
+ hidden?: boolean, // 기본값: false
+ height?: string | number | "content", // 기본값: "content"
+ width?: string | number | "content", // 기본값: "content"
+ padding?: string | number,
+
+ maxlength?: number | string,
+ minlength?: number | string,
+ placeholder?: string,
+ readOnly?: boolean, // 기본값: false
+
+ // for `wrap:true` check the label properties for the Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 기본값: "top"
+
+ // 서비스 속성 및 메서드
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"textarea"`로 설정합니다
+- `key` - (선택 사항) 지정되거나 수정된 속성의 이름 또는 Diagram 항목 객체 내 해당 속성의 경로입니다
+- `wrap` - (선택 사항) 외부 래핑(wrapping) 표시 여부를 설정합니다. 기본값은 *false*입니다
+- `css` - (선택 사항) 컨트롤에 스타일 클래스를 추가합니다
+- `hidden` - (선택 사항) 컨트롤의 숨김 여부를 지정합니다. 기본값은 *false*입니다
+- `disabled` - (선택 사항) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 지정합니다. 기본값은 *false*입니다
+- `width` - (선택 사항) 컨트롤의 너비입니다. 기본값은 `"content"`입니다
+- `height` - (선택 사항) 컨트롤의 높이입니다. 기본값은 `"content"`입니다
+- `padding` - (선택 사항) 셀과 Textarea 컨트롤 테두리 사이의 여백(padding)을 설정합니다
+- `maxlength` - (선택 사항) textarea에서 [허용되는 최대 문자 수](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)입니다
+- `minlength` - (선택 사항) textarea에서 [허용되는 최소 문자 수](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)입니다
+- `placeholder` - (선택 사항) textarea에 대한 안내 문구입니다
+- `readOnly` - (선택 사항) textarea의 읽기 전용 여부를 지정합니다. 기본값은 *false*입니다
+- `label` - (선택 사항) 컨트롤의 레이블을 지정합니다
+- `labelWidth` - (선택 사항) 컨트롤의 레이블 너비를 설정합니다
+- `labelPosition` - (선택 사항) 레이블의 위치를 지정합니다: `"left"` | `"top"`. 기본값은 `"top"`입니다
+
+### 서비스 속성 및 메서드 {#service-properties-and-methods}
+
+:::warning
+기본 유형의 컨트롤에 대한 서비스 속성 및 메서드를 재정의하지 않는 것이 좋습니다. 재정의할 경우 기능이 손상될 수 있습니다.
+:::
+
+- `$on` - (선택 사항) - 이벤트 리스너를 설정할 수 있습니다. 객체는 다음 속성을 가집니다:
+ - `eventName` - 다음 매개변수와 함께 호출되는 콜백 함수입니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `control` - [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 컨트롤입니다
+ - `editor` - Diagram Editor의 객체입니다
+ - `id` - Diagram 항목의 id입니다
+ - `arguments` - (선택 사항) - [원본 이벤트 인수](https://docs.dhtmlx.com/suite/category/form-textarea-events/)입니다
+- `$handler` - (선택 사항) - [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 컨트롤의 `change` 및 `input` 이벤트와 DataCollection의 `change` 이벤트가 발생할 때 동작을 처리할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `id` - Diagram 항목의 id입니다
+ - `key` - 지정되거나 수정된 속성의 이름 또는 Diagram 항목 객체 내 해당 속성의 경로입니다
+ - `editor` - Diagram Editor의 객체입니다
+ - `control` - 컴포넌트가 기반으로 하는 [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 컨트롤의 객체입니다
+ - `value` - [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 컨트롤의 새 값입니다
+- `$setValue` - (선택 사항) - 컨트롤 초기화 시 및 DataCollection에서 값이 변경될 때 [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 컨트롤의 값을 설정할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `editor` - Diagram Editor의 객체입니다
+ - `control` - 컴포넌트가 기반으로 하는 [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 컨트롤의 객체입니다
+ - `value` - Diagram 항목의 값입니다
+- `$layout` - (선택 사항) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 컨트롤의 구성을 반환합니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 서비스 속성을 제외한 컨트롤의 구성입니다
+
+## 예제 {#example}
+
+~~~jsx {7-13}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "textarea",
+ key: "text",
+ label: "Textarea label",
+ height: 250,
+ wrap: true
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/timepicker.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/timepicker.md
new file mode 100644
index 000000000..6f8409087
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/timepicker.md
@@ -0,0 +1,123 @@
+---
+sidebar_label: Timepicker
+title: Editbar 기본 컨트롤 - Timepicker
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Timepicker 컨트롤을 살펴볼 수 있습니다. 개발자 가이드와 API 참조를 확인하고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Timepicker
+
+@short: 트랙 바를 따라 핸들을 이동하거나 관련 입력란에 시간 및 분 값을 직접 입력하여 시간 값을 선택하는 기본 컨트롤입니다.
+
+
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "timepicker",
+ key?: string | string[],
+ wrap?: boolean, // 기본값: false
+
+ css?: string,
+ disabled?: boolean, // 기본값: false
+ hidden?: boolean, // 기본값: false
+ height?: string | number | "content", // 기본값: "content"
+ width?: string | number | "content", // 기본값: "content"
+ padding?: string | number,
+
+ controls?: boolean, // 기본값: false
+ icon?: string,
+ placeholder?: string,
+ timeFormat?: 12 | 24, // 기본값: 24
+ valueFormat?: "string" | "timeObject", // 기본값: "string"
+
+ // `wrap:true`인 경우 Fieldset의 label 속성을 확인하세요
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 기본값: "top"
+
+ // 서비스 속성 및 메서드
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"timepicker"`로 설정합니다
+- `key` - (선택 사항) 지정되거나 수정된 속성의 이름 또는 Diagram 항목 객체 내 해당 속성의 경로입니다
+- `wrap` - (선택 사항) 외부 래핑(wrapping) 표시 여부를 설정합니다. 기본값은 *false*입니다
+- `css` - (선택 사항) 컨트롤에 스타일 클래스를 추가합니다
+- `hidden` - (선택 사항) 컨트롤의 숨김 여부를 지정합니다. 기본값은 *false*입니다
+- `disabled` - (선택 사항) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 지정합니다. 기본값은 *false*입니다
+- `width` - (선택 사항) 컨트롤의 너비입니다. 기본값은 `"content"`입니다
+- `height` - (선택 사항) 컨트롤의 높이입니다. 기본값은 `"content"`입니다
+- `padding` - (선택 사항) 셀과 Timepicker 컨트롤 테두리 사이의 여백(padding)을 설정합니다
+- `controls` - (선택 사항) timepicker에 Close 및 Save 버튼이 포함되는지 여부를 지정합니다. 기본값은 *false*입니다
+- `icon` - (선택 사항) 사용된 아이콘 폰트에서 아이콘의 CSS 클래스입니다
+- `placeholder` - (선택 사항) 입력란에 대한 안내 문구입니다
+- `timeFormat` - (선택 사항) 활성화할 시계 형식을 지정합니다: 12시간제 또는 24시간제입니다. 각각 속성을 *12* 또는 *24*로 설정합니다. 기본값은 *24*입니다
+- `valueFormat` - (선택 사항) timepicker 컨트롤의 이벤트를 처리할 때 적용할 값의 형식을 지정합니다: `"string"` | `"timeObject"`. 기본값은 `"string"`입니다
+- `label` - (선택 사항) 컨트롤의 레이블을 지정합니다
+- `labelWidth` - (선택 사항) 컨트롤의 레이블 너비를 설정합니다
+- `labelPosition` - (선택 사항) 레이블의 위치를 지정합니다: `"left"` | `"top"`. 기본값은 `"top"`입니다
+
+### 서비스 속성 및 메서드 {#service-properties-and-methods}
+
+:::warning
+기본 유형의 컨트롤에 대한 서비스 속성 및 메서드를 재정의하지 않는 것이 좋습니다. 재정의할 경우 기능이 손상될 수 있습니다.
+:::
+
+- `$on` - (선택 사항) - 이벤트 리스너를 설정할 수 있습니다. 객체는 다음 속성을 가집니다:
+ - `eventName` - 다음 매개변수와 함께 호출되는 콜백 함수입니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `control` - [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 컨트롤입니다
+ - `editor` - Diagram Editor의 객체입니다
+ - `id` - Diagram 항목의 id입니다
+ - `arguments` - (선택 사항) - [원본 이벤트 인수](https://docs.dhtmlx.com/suite/category/form-timepicker-events/)입니다
+- `$handler` - (선택 사항) - [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 컨트롤의 `change` 및 `input` 이벤트와 DataCollection의 `change` 이벤트가 발생할 때 동작을 처리할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `id` - Diagram 항목의 id입니다
+ - `key` - 지정되거나 수정된 속성의 이름 또는 Diagram 항목 객체 내 해당 속성의 경로입니다
+ - `editor` - Diagram Editor의 객체입니다
+ - `control` - 컴포넌트가 기반으로 하는 [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 컨트롤의 객체입니다
+ - `value` - [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 컨트롤의 새 값입니다
+- `$setValue` - (선택 사항) - 컨트롤 초기화 시 및 DataCollection에서 값이 변경될 때 [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 컨트롤의 값을 설정할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `editor` - Diagram Editor의 객체입니다
+ - `control` - 컴포넌트가 기반으로 하는 [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 컨트롤의 객체입니다
+ - `value` - Diagram 항목의 값입니다
+- `$layout` - (선택 사항) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 컨트롤의 구성을 반환합니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 서비스 속성을 제외한 컨트롤의 구성입니다
+
+## 예제 {#example}
+
+~~~jsx {8-13}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ show: true,
+ properties: {
+ $shape: [
+ {
+ type: "timepicker",
+ key: "time",
+ label: "Select time",
+ controls: true
+ }
+ ]
+ }
+ }
+ }
+});
+editor.parse([
+ { "id": "shape_1" },
+ { "id": "shape_2", "parent": "shape_1", "time": "14:00" },
+ { "id": "shape_3", "parent": "shape_1", "time": "18:30" }
+]);
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/toggle.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/toggle.md
new file mode 100644
index 000000000..fed4352d6
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/toggle.md
@@ -0,0 +1,134 @@
+---
+sidebar_label: Toggle
+title: Editbar 기본 컨트롤 - Toggle
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Toggle 컨트롤을 살펴볼 수 있습니다. 개발자 가이드와 API 참조를 확인하고, 코드 예제와 라이브 데모를 직접 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Toggle
+
+@short: 클릭 시 눌림 상태와 눌리지 않은 상태를 전환할 수 있는 특수 버튼을 나타내는 기본 컨트롤입니다.
+
+
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "toggle",
+ key?: string | string[],
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+ full?: boolean, // 기본값: false
+
+ text?: string,
+ icon?: string,
+ offText?: string,
+ offIcon?: string,
+ value?: string | number,
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number,
+
+ // 서비스 속성 및 메서드
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+`value` 속성이 지정되면, 컨트롤은 *boolean* 값과 *string* 값을 모두 사용할 수 있습니다. `value` 속성은 설정된 값을 적용된 속성의 값으로 지정하는 데 필요합니다. 자세한 내용은 [아래 예제를 확인하세요](#example).
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"toggle"`로 설정합니다
+- `key` - (선택 사항) 지정되거나 수정된 속성의 이름 또는 Diagram 항목 객체 내 해당 속성의 경로입니다
+- `hidden` - (선택 사항) 컨트롤의 숨김 여부를 지정합니다. 기본값은 *false*입니다
+- `disabled` - (선택 사항) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 지정합니다. 기본값은 *false*입니다
+- `full` - (선택 사항) toggle을 `width` 속성으로 지정된 너비까지 확장할지 여부를 지정합니다. 기본값은 *false*입니다
+- `text` - (선택 사항) toggle 내부에 텍스트를 설정합니다. `offText` 속성과 함께 초기화되면, 지정된 텍스트는 선택된(눌린) 상태에서 렌더링됩니다
+- `offText` - (선택 사항) toggle의 선택되지 않은(눌리지 않은) 상태에서 렌더링될 텍스트를 설정합니다
+- `icon` - (선택 사항) toggle 내부에 표시되는 아이콘의 CSS 클래스를 설정합니다. `offIcon` 속성과 함께 초기화되면, 지정된 아이콘의 CSS 클래스는 toggle의 선택된(눌린) 상태에서 렌더링됩니다
+- `offIcon` - (선택 사항) toggle의 선택되지 않은(눌리지 않은) 상태에서 렌더링될 아이콘의 CSS 클래스를 설정합니다
+- `value` - (선택 사항) 선택된(눌린) 상태의 값을 지정합니다. 정의되지 않으면 컨트롤은 *boolean* 값과 함께 사용됩니다
+- `css` - (선택 사항) 컨트롤에 스타일 클래스를 추가합니다
+- `width` - (선택 사항) 컨트롤의 너비입니다. 기본값은 `"content"`입니다
+- `height` - (선택 사항) 컨트롤의 높이입니다. 기본값은 `"content"`입니다
+- `padding` - (선택 사항) 셀과 Toggle 컨트롤 테두리 사이의 여백(padding)을 설정합니다
+
+### 서비스 속성 및 메서드 {#service-properties-and-methods}
+
+:::warning
+기본 유형의 컨트롤에 대한 서비스 속성 및 메서드를 재정의하지 않는 것이 좋습니다. 재정의할 경우 기능이 손상될 수 있습니다.
+:::
+
+- `$on` - (선택 사항) - 이벤트 리스너를 설정할 수 있습니다. 객체는 다음 속성을 가집니다:
+ - `eventName` - 다음 매개변수와 함께 호출되는 콜백 함수입니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `control` - [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 컨트롤입니다
+ - `editor` - Diagram Editor의 객체입니다
+ - `id` - Diagram 항목의 id입니다
+ - `arguments` - (선택 사항) - [원본 이벤트 인수](https://docs.dhtmlx.com/suite/category/form-toggle-events/)입니다
+- `$handler` - (선택 사항) - [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 컨트롤의 `change` 이벤트와 DataCollection의 `change` 이벤트가 발생할 때 동작을 처리할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `id` - Diagram 항목의 id입니다
+ - `key` - 지정되거나 수정된 속성의 이름 또는 Diagram 항목 객체 내 해당 속성의 경로입니다
+ - `editor` - Diagram Editor의 객체입니다
+ - `control` - 컴포넌트가 기반으로 하는 [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 컨트롤의 객체입니다
+ - `value` - [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 컨트롤의 새 값입니다
+- `$setValue` - (선택 사항) - 컨트롤 초기화 시 및 DataCollection에서 값이 변경될 때 [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 컨트롤의 값을 설정할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체입니다:
+ - `editor` - Diagram Editor의 객체입니다
+ - `control` - 컴포넌트가 기반으로 하는 [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 컨트롤의 객체입니다
+ - `value` - Diagram 항목의 값입니다
+- `$layout` - (선택 사항) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 컨트롤의 구성을 반환합니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 서비스 속성을 제외한 컨트롤의 구성입니다
+
+## 예제 {#example}
+
+~~~jsx {7-14} title="toggle에 boolean 값 적용하기"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "toggle",
+ key: ["header", "enable"],
+ icon: "dxi dxi-eye",
+ offIcon: "dxi dxi-eye-off",
+ text: "Visible",
+ offText: "Invisible"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+~~~jsx {7-12} title="설정된 값을 적용된 속성의 값으로 지정하기"
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "toggle",
+ key: "fontStyle",
+ value: "italic",
+ icon: "dxi dxi-format-italic"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/togglegroup.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/togglegroup.md
new file mode 100644
index 000000000..d7274ee7d
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/togglegroup.md
@@ -0,0 +1,151 @@
+---
+sidebar_label: ToggleGroup
+title: Editbar 기본 컨트롤 - ToggleGroup
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 ToggleGroup 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고 코드 예제와 라이브 데모를 사용해 보세요. 그리고 DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+# ToggleGroup
+
+@short: 토글 버튼 그룹을 생성하기 위한 기본 컨트롤입니다.
+
+
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "toggleGroup",
+ options: object[],
+ key?: string | string[],
+
+ full?: boolean, // 기본값: false
+ gap?: number, // 기본값: 0
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number,
+
+ // 서비스 속성 및 메서드
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+ToggleGroup 내부의 Toggle 구성 객체:
+
+~~~jsx
+{
+ id?: string,
+ hidden?: boolean,
+ disabled?: boolean,
+ full?: boolean,
+ text?: string,
+ icon?: string,
+ offText?: string,
+ offIcon?: string,
+ value?: string | number
+}
+~~~
+
+컨트롤 내부의 `toggle` 구성을 가진 객체는 `value` 속성이 지정된 경우 *boolean* 값과 *string* 값 모두와 함께 사용할 수 있습니다. `value` 속성은 설정된 값을 적용된 속성의 값으로 지정하는 데 필요합니다. 아이디어를 파악하려면 [아래 예제를 확인하세요](#example).
+
+## 설명 {#description}
+
+### ToggleGroup 속성 {#togglegroup-properties}
+
+#### 기본 속성 {#basic-properties}
+
+- `type` - (required) 컨트롤의 유형입니다. `"toggleGroup"`으로 설정하세요
+- `key` - (optional) Diagram 항목의 객체에서 지정되거나 수정된 속성의 이름 또는 해당 경로
+- `options` - (required) ToggleGroup 옵션의 배열이며, 각 옵션은 `key:value` 쌍의 집합을 가진 *object*로 설정됩니다 - [옵션의 속성 및 값](#toggle-properties)
+- `hidden` - (optional) ToggleGroup의 숨김 여부를 정의합니다. 기본값은 *false*
+- `disabled` - (optional) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. 기본값은 *false*
+- `full` - (optional) ToggleGroup이 `width` 속성에 지정된 너비까지 확장되는지 여부를 정의합니다. 기본값은 *false*
+- `gap` - (optional) 옵션의 요소(버튼) 사이의 간격을 설정합니다. 기본값은 *0*
+- `css` - (optional) 컨트롤에 스타일 클래스를 추가합니다
+- `width` - (optional) 컨트롤의 너비입니다. 기본값은 `"content"`
+- `height` - (optional) 컨트롤의 높이입니다. 기본값은 `"content"`
+- `padding` - (optional) ToggleGroup 컨트롤의 셀과 테두리 사이의 여백을 설정합니다
+
+#### 서비스 속성 및 메서드 {#service-properties-and-methods}
+
+:::warning
+기본 유형의 컨트롤에 대해 서비스 속성 및 메서드를 재정의하지 않는 것을 강력히 권장합니다. 재정의할 경우 해당 기능에 오류가 발생할 수 있습니다.
+:::
+
+- `$on` - (optional) - 이벤트 리스너를 설정할 수 있습니다. 객체에는 다음 속성이 있습니다:
+ - `eventName` - 다음 매개변수와 함께 호출되는 콜백 함수입니다:
+ - `object` - 다음 속성을 가진 객체:
+ - `control` - [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 컨트롤
+ - `editor` - Diagram Editor의 객체
+ - `id` - Diagram 항목의 id
+ - `arguments` - (optional) - [원본 이벤트 인수](https://docs.dhtmlx.com/suite/category/form-togglegroup-events/)
+- `$handler` - (optional) - [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 컨트롤의 `change` 이벤트 및 DataCollection의 `change` 이벤트가 발생할 때 동작을 처리할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체:
+ - `id` - Diagram 항목의 id
+ - `key` - Diagram 항목의 객체에서 지정되거나 수정된 속성의 이름 또는 해당 경로
+ - `editor` - Diagram Editor의 객체
+ - `control` - 컴포넌트가 기반으로 하는 [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 컨트롤의 객체
+ - `value` - [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 컨트롤의 새로운 값
+- `$setValue` - (optional) - 컨트롤 초기화 시 및 DataCollection에서 값이 변경될 때 [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 컨트롤의 값을 설정할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 다음 속성을 가진 객체:
+ - `editor` - Diagram Editor의 객체
+ - `control` - 컴포넌트가 기반으로 하는 [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 컨트롤의 객체
+ - `value` - Diagram 항목의 값
+- `$layout` - (optional) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 컨트롤의 구성을 반환합니다. 다음 매개변수와 함께 호출됩니다:
+ - `object` - 서비스 속성을 제외한 컨트롤의 구성
+
+### Toggle 속성 {#toggle-properties}
+
+- `id` - (optional) 컨트롤의 id, 설정하지 않으면 자동 생성됨
+- `hidden` - (optional) 옵션의 숨김 여부를 정의합니다. 기본값은 *false*
+- `disabled` - (optional) 옵션의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. 기본값은 *false*
+- `full` - (optional) 옵션이 `width` 속성에 지정된 너비까지 확장되는지 여부를 정의합니다. 기본값은 *false*
+- `text` - (optional) 옵션 내부의 텍스트를 설정합니다. `offText` 속성과 함께 초기화되면 지정된 텍스트는 선택(눌림) 상태에서 표시됩니다
+- `icon` - (optional) 옵션 내부에 표시되는 아이콘의 CSS 클래스를 설정합니다. `offIcon` 속성과 함께 초기화되면 지정된 아이콘의 CSS 클래스는 옵션의 선택(눌림) 상태에서 표시됩니다
+- `offText` - (optional) 옵션의 선택 해제(눌리지 않은) 상태에서 표시될 텍스트를 설정합니다
+- `offIcon` - (optional) 옵션의 선택 해제(눌리지 않은) 상태에서 표시될 아이콘의 CSS 클래스를 설정합니다
+- `value` - (optional) 선택(눌림) 상태의 값을 지정합니다. 정의하지 않으면 옵션은 *boolean* 값으로 사용됩니다
+
+## 예제 {#example}
+
+~~~jsx {7-28}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "toggleGroup",
+ key: "textAlign",
+ gap: 4,
+ $on: {
+ beforeChange: (spec, values) => !Object.values(values).every(i => !i),
+ },
+ options: [
+ {
+ icon: "dxi dxi-format-align-left",
+ value: "left"
+ },
+ {
+ icon: "dxi dxi-format-align-center",
+ value: "center"
+ },
+ {
+ icon: "dxi dxi-format-align-right",
+ value: "right"
+ }
+ ]
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls_overview.md
new file mode 100644
index 000000000..3672eaa5b
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls_overview.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: 기본 컨트롤
+title: Editbar 가이드 - 기본 컨트롤
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 기본 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# 기본 컨트롤 {#basic-controls}
+
+Editbar의 기본 컨트롤은 단독으로 사용하거나 이를 기반으로 복합 컨트롤을 만들 수 있습니다. 아래에서 기본 컨트롤 목록을 확인할 수 있습니다. 각 컨트롤의 구성 속성에 대한 자세한 설명을 보려면 해당 섹션을 확인하세요.
+
+:::info
+구성에 대한 자세한 내용은 [Editbar 구성](guides/diagram_editor/editbar.md) 가이드를 참조하세요!
+:::
+
+## Editbar 기본 컨트롤 개요 {#overview-of-editbar-basic-controls}
+
+| 이름 | 설명 |
+| :-------------------------------------------------------------- | :------------------------------------------------------------------- |
+| [](api/diagram_editor/editbar/basic_controls/avatar.md) | @getshort(api/diagram_editor/editbar/basic_controls/avatar.md) |
+| [](api/diagram_editor/editbar/basic_controls/button.md) | @getshort(api/diagram_editor/editbar/basic_controls/button.md) |
+| [](api/diagram_editor/editbar/basic_controls/checkbox.md) | @getshort(api/diagram_editor/editbar/basic_controls/checkbox.md) |
+| [](api/diagram_editor/editbar/basic_controls/checkboxgroup.md) | @getshort(api/diagram_editor/editbar/basic_controls/checkboxgroup.md)|
+| [](api/diagram_editor/editbar/basic_controls/colorpicker.md) | @getshort(api/diagram_editor/editbar/basic_controls/colorpicker.md) |
+| [](api/diagram_editor/editbar/basic_controls/combo.md) | @getshort(api/diagram_editor/editbar/basic_controls/combo.md) |
+| [](api/diagram_editor/editbar/basic_controls/container.md) | @getshort(api/diagram_editor/editbar/basic_controls/container.md) |
+| [](api/diagram_editor/editbar/basic_controls/datepicker.md) | @getshort(api/diagram_editor/editbar/basic_controls/datepicker.md) |
+| [](api/diagram_editor/editbar/basic_controls/fieldset.md) | @getshort(api/diagram_editor/editbar/basic_controls/fieldset.md) |
+| [](api/diagram_editor/editbar/basic_controls/input.md) | @getshort(api/diagram_editor/editbar/basic_controls/input.md) |
+| [](api/diagram_editor/editbar/basic_controls/radiogroup.md) | @getshort(api/diagram_editor/editbar/basic_controls/radiogroup.md) |
+| [](api/diagram_editor/editbar/basic_controls/select.md) | @getshort(api/diagram_editor/editbar/basic_controls/select.md) |
+| [](api/diagram_editor/editbar/basic_controls/slider.md) | @getshort(api/diagram_editor/editbar/basic_controls/slider.md) |
+| [](api/diagram_editor/editbar/basic_controls/spacer.md) | @getshort(api/diagram_editor/editbar/basic_controls/spacer.md) |
+| [](api/diagram_editor/editbar/basic_controls/textarea.md) | @getshort(api/diagram_editor/editbar/basic_controls/textarea.md) |
+| [](api/diagram_editor/editbar/basic_controls/timepicker.md) | @getshort(api/diagram_editor/editbar/basic_controls/timepicker.md) |
+| [](api/diagram_editor/editbar/basic_controls/toggle.md) | @getshort(api/diagram_editor/editbar/basic_controls/toggle.md) |
+| [](api/diagram_editor/editbar/basic_controls/togglegroup.md) | @getshort(api/diagram_editor/editbar/basic_controls/togglegroup.md) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/arrange.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/arrange.md
new file mode 100644
index 000000000..8ca20019b
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/arrange.md
@@ -0,0 +1,92 @@
+---
+sidebar_label: Arrange
+title: Editbar 복합 컨트롤 - Arrange
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Arrange 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고 코드 예제와 라이브 데모를 사용해 보세요. 그리고 DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Arrange
+
+@short: Diagram 요소의 너비, 높이, 회전 각도, x 및 y 속성을 편집하기 위한 복합 컨트롤입니다.
+
+})
+
+:::info
+**Arrange** 컨트롤은 Diagram editor의 *default* 모드에서 `line` 및 `lineTitle` 요소를 제외한 모든 요소에 사용할 수 있습니다.
+:::
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "arrange",
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number, // 기본값: "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값: "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값: "start"
+ compact?: boolean, // 기본값: false
+
+ // 서비스 속성
+ $properties?: object
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (required) 컨트롤의 유형입니다. `"arrange"`로 설정하세요
+- `hidden` - (optional) 컨트롤의 숨김 여부를 정의합니다. 기본값은 *false*
+- `disabled` - (optional) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다
+- `css` - (optional) 컨트롤에 스타일 클래스를 추가합니다
+- `width` - (optional) 컨트롤의 너비입니다. 기본값은 `"content"`
+- `height` - (optional) 컨트롤의 높이입니다. 기본값은 `"content"`
+- `padding` - (optional) 컨트롤 그룹 내부 콘텐츠의 여백을 설정합니다. 기본값은 *"0 16px"*
+- `label` - (optional) 컨트롤의 레이블을 지정합니다
+- `labelAlignment` - (optional) 컨트롤 레이블의 위치를 정의합니다. 기본값은 `"left"`
+- `align` - (optional) 컨트롤 그룹 내부 컨트롤의 정렬을 설정합니다. 기본값은 `"start"`
+- `compact` - (optional) 컴팩트 모드를 지정하며, 여백과 프레임을 제거합니다. 기본값은 *false*
+
+### 서비스 속성 {#service-properties}
+
+- `$properties` - (optional) 복합 컨트롤 내에서 [기본 컨트롤](api/diagram_editor/editbar/basic_controls_overview.md)의 값을 재정의할 수 있습니다. 기본 컨트롤을 기반으로 **Arrange** 컨트롤의 다음 요소를 구성할 수 있습니다:
+ - `x` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) Diagram 요소의 x축 위치를 설정합니다
+ - `y` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) Diagram 요소의 y축 위치를 설정합니다
+ - `width` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) Diagram 요소의 너비(px)를 설정합니다
+ - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) Diagram 요소의 높이(px)를 설정합니다
+ - `angle` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) Diagram 요소의 회전 각도를 설정합니다
+
+## 예제 {#example}
+
+~~~jsx {7-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ rectangle: [
+ {
+ type: "arrange",
+ disabled: true,
+ $properties: {
+ angle: { hidden: true } // "input" 기본 컨트롤의 구성
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/border.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/border.md
new file mode 100644
index 000000000..c5d2cd372
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/border.md
@@ -0,0 +1,90 @@
+---
+sidebar_label: Border
+title: Editbar 복합 컨트롤 - Border
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Border 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고 코드 예제와 라이브 데모를 사용해 보세요. 그리고 DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Border
+
+@short: Diagram 요소의 테두리를 표시하고 수정하기 위한 복합 컨트롤입니다.
+
+})
+
+:::info
+**Border** 컨트롤은 `lineTitle` 요소에는 사용할 수 없습니다.
+:::
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "border",
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number, // 기본값: "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값: "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값: "between"
+ compact?: boolean, // 기본값: false
+
+ // 서비스 속성
+ $properties?: object
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (required) 컨트롤의 유형입니다. `"border"`로 설정하세요
+- `hidden` - (optional) 컨트롤의 숨김 여부를 정의합니다. 기본값은 *false*
+- `disabled` - (optional) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. 기본값은 *false*
+- `css` - (optional) 컨트롤에 스타일 클래스를 추가합니다
+- `width` - (optional) 컨트롤의 너비입니다. 기본값은 `"content"`
+- `height` - (optional) 컨트롤의 높이입니다. 기본값은 `"content"`
+- `padding` - (optional) 컨트롤 그룹 내부 콘텐츠의 여백을 설정합니다. 기본값은 *"0 16px"*
+- `label` - (optional) 컨트롤의 레이블을 지정합니다
+- `labelAlignment` - (optional) 레이블의 위치를 정의합니다. 기본값은 `"left"`
+- `align` - (optional) 컨트롤 그룹 내부 컨트롤의 정렬을 설정합니다. 기본값은 `"between"`
+- `compact` - (optional) 컴팩트 모드를 지정하며, 여백과 프레임을 제거합니다. 기본값은 *false*
+
+### 서비스 속성 {#service-properties}
+
+- `$properties` - (optional) 복합 컨트롤 내에서 [기본 컨트롤](api/diagram_editor/editbar/basic_controls_overview.md)의 값을 재정의할 수 있습니다. 기본 컨트롤을 기반으로 **Border** 컨트롤의 다음 요소를 구성할 수 있습니다:
+ - `stroke` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) 테두리 색상을 설정합니다
+ - `strokeType` - ([combo](api/diagram_editor/editbar/basic_controls/combo.md)) 테두리 유형을 설정합니다
+ - `strokeWidth` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) 테두리 너비를 설정합니다
+
+## 예제 {#example}
+
+~~~jsx {7-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ rectangle: [
+ {
+ type: "border",
+ label: "Border style",
+ $properties: {
+ strokeType: { hidden: true }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/gridstep.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/gridstep.md
new file mode 100644
index 000000000..ae34012f6
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/gridstep.md
@@ -0,0 +1,73 @@
+---
+sidebar_label: Grid step
+title: Editbar 복합 컨트롤 - Grid step
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Grid step 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고 코드 예제와 라이브 데모를 사용해 보세요. 그리고 DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Grid step
+
+@short: Diagram editor의 그리드 간격을 표시하고 수정하기 위한 복합 컨트롤입니다.
+
+})
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "gridStep",
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number, // 기본값: "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값: "left"
+ readOnly?: boolean, // 기본값: false
+ wrap?: boolean // 기본값: true
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (required) 컨트롤의 유형입니다. `"gridStep"`으로 설정하세요
+- `hidden` - (optional) 컨트롤의 숨김 여부를 정의합니다. 기본값은 *false*
+- `disabled` - (optional) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. 기본값은 *false*
+- `css` - (optional) 컨트롤에 스타일 클래스를 추가합니다
+- `width` - (optional) 컨트롤의 너비입니다. 기본값은 `"content"`
+- `height` - (optional) 컨트롤의 높이입니다. 기본값은 `"content"`
+- `padding` - (optional) 컨트롤 그룹 내부 콘텐츠의 여백을 설정합니다. 기본값은 *"0 16px"*
+- `label` - (optional) 컨트롤의 레이블을 지정합니다
+- `labelAlignment` - (optional) 레이블의 위치를 정의합니다. 기본값은 `"left"`
+- `readOnly` - (optional) 컨트롤의 읽기 전용 모드를 설정합니다. 기본값은 *false*
+- `wrap` - (optional) 외부 래핑 표시를 허용합니다. 기본값은 *true*
+
+## 예제 {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $default: [
+ {
+ type: "gridStep",
+ readOnly: true
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/header.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/header.md
new file mode 100644
index 000000000..f04a75cb6
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/header.md
@@ -0,0 +1,77 @@
+---
+sidebar_label: Header
+title: Editbar 복합 컨트롤 - Header
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Header 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고 코드 예제와 라이브 데모를 사용해 보세요. 그리고 DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Header
+
+@short: Diagram editor의 `"group"` 및 `"swimlane"` 요소의 헤더를 표시하고 수정하기 위한 복합 컨트롤입니다.
+
+})
+
+:::info
+**Header** 컨트롤은 Diagram editor의 *default* 모드에서 `group` 및 `swimlane` 요소에만 사용할 수 있습니다.
+:::
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "header",
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number, // 기본값: "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값: "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값: "start"
+ compact?: boolean // 기본값: false
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (required) 컨트롤의 유형입니다. `"header"`로 설정하세요
+- `hidden` - (optional) 컨트롤의 숨김 여부를 정의합니다. 기본값은 *false*
+- `disabled` - (optional) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. 기본값은 *false*
+- `css` - (optional) 컨트롤에 스타일 클래스를 추가합니다
+- `width` - (optional) 컨트롤의 너비입니다. 기본값은 `"content"`
+- `height` - (optional) 컨트롤의 높이입니다. 기본값은 `"content"`
+- `padding` - (optional) 컨트롤 그룹 내부 콘텐츠의 여백을 설정합니다. 기본값은 *"0 16px"*
+- `label` - (optional) 컨트롤의 레이블을 지정합니다
+- `labelAlignment` - (optional) 레이블의 위치를 정의합니다. 기본값은 `"left"`
+- `align` - (optional) 컨트롤 그룹 내부 컨트롤의 정렬을 설정합니다. 기본값은 `"start"`
+- `compact` - (optional) 컴팩트 모드를 지정하며, 여백과 프레임을 제거합니다. 기본값은 *false*
+
+## 예제 {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "header",
+ label: "Group header style"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headercommon.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headercommon.md
new file mode 100644
index 000000000..f9b9c03d6
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headercommon.md
@@ -0,0 +1,90 @@
+---
+sidebar_label: Header common
+title: Editbar 복합 컨트롤 - Header common
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Header common 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고 코드 예제와 라이브 데모를 사용해 보며 DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Header common
+
+@short: 그룹 헤더의 표시 여부, 색상, 높이를 변경하기 위한 복합 컨트롤
+
+})
+
+:::info
+**Header common** 컨트롤은 Diagram Editor의 *default* 모드에서 `group` 및 `swimlane` 요소에만 사용할 수 있습니다.
+:::
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "headerCommon",
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number, // 기본값: "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값: "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값: "between"
+ compact?: boolean, // 기본값: false
+
+ // 서비스 속성
+ $properties?: object
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"headerCommon"`으로 설정합니다.
+- `hidden` - (선택) 컨트롤의 숨김 여부를 정의합니다. 기본값은 *false*입니다.
+- `disabled` - (선택) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. 기본값은 *false*입니다.
+- `css` - (선택) 컨트롤에 스타일 클래스를 추가합니다.
+- `width` - (선택) 컨트롤의 너비입니다. 기본값은 `"content"`입니다.
+- `height` - (선택) 컨트롤의 높이입니다. 기본값은 `"content"`입니다.
+- `padding` - (선택) 컨트롤 그룹 내부 콘텐츠의 패딩을 설정합니다. 기본값은 *"0 16px"*입니다.
+- `label` - (선택) 컨트롤의 레이블을 지정합니다.
+- `labelAlignment` - (선택) 레이블의 위치를 정의합니다. 기본값은 `"left"`입니다.
+- `align` - (선택) 컨트롤 그룹 내부 컨트롤의 정렬을 설정합니다. 기본값은 `"between"`입니다.
+- `compact` - (선택) 컴팩트 모드를 지정하며 들여쓰기와 프레임을 제거합니다. 기본값은 *false*입니다.
+
+### 서비스 속성 {#service-properties}
+
+- `$properties` - (선택) 복합 컨트롤 내에서 [기본 컨트롤](api/diagram_editor/editbar/basic_controls_overview.md)의 값을 재정의할 수 있습니다. 기본 컨트롤을 기반으로 **Header common** 컨트롤의 다음 요소를 구성할 수 있습니다:
+ - `enable` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) 그룹 헤더의 표시 여부를 전환합니다.
+ - `fill` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) 그룹 헤더의 배경색을 설정합니다.
+ - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) 그룹 헤더의 높이(px)를 설정합니다.
+
+## 예제 {#example}
+
+~~~jsx {6-14}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "headerCommon",
+ label: "Header common",
+ $properties: {
+ fill: { key: ["header", "fill"] }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headerposition.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headerposition.md
new file mode 100644
index 000000000..61832ae93
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headerposition.md
@@ -0,0 +1,99 @@
+---
+sidebar_label: Header position
+title: Editbar 복합 컨트롤 - Header position
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Header position 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고 코드 예제와 라이브 데모를 사용해 보며 DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Header position
+
+@short: 그룹 헤더의 위치를 변경하기 위한 복합 컨트롤
+
+})
+
+:::info
+**Header position** 컨트롤은 Diagram Editor의 *default* 모드에서 `group` 및 `swimlane` 요소에만 사용할 수 있습니다.
+:::
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "headerPosition",
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number, // 기본값: "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값: "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값: "start"
+ compact?: boolean, // 기본값: false
+
+ // 서비스 속성
+ $properties?: object
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"headerPosition"`으로 설정합니다.
+- `hidden` - (선택) 컨트롤의 숨김 여부를 정의합니다. 기본값은 *false*입니다.
+- `disabled` - (선택) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. 기본값은 *false*입니다.
+- `css` - (선택) 컨트롤에 스타일 클래스를 추가합니다.
+- `width` - (선택) 컨트롤의 너비입니다. 기본값은 `"content"`입니다.
+- `height` - (선택) 컨트롤의 높이입니다. 기본값은 `"content"`입니다.
+- `padding` - (선택) 컨트롤 그룹 내부 콘텐츠의 패딩을 설정합니다. 기본값은 *"0 16px"*입니다.
+- `label` - (선택) 컨트롤의 레이블을 지정합니다.
+- `labelAlignment` - (선택) 레이블의 위치를 정의합니다. 기본값은 `"left"`입니다.
+- `align` - (선택) 컨트롤 그룹 내부 컨트롤의 정렬을 설정합니다. 기본값은 `"start"`입니다.
+- `compact` - (선택) 컴팩트 모드를 지정하며 들여쓰기와 프레임을 제거합니다. 기본값은 *false*입니다.
+
+### 서비스 속성 {#service-properties}
+
+- `$properties` - (선택) 복합 컨트롤 내에서 [기본 컨트롤](api/diagram_editor/editbar/basic_controls_overview.md)의 값을 재정의할 수 있습니다. 기본 컨트롤을 기반으로 **Header position** 컨트롤의 다음 요소를 구성할 수 있습니다:
+ - `position` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) - 그룹 헤더의 위치를 설정합니다.
+
+## 예제 {#example}
+
+~~~jsx {6-25}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "headerPosition",
+ label: "Header position",
+ $properties: {
+ position: {
+ options: [
+ {
+ icon: "dxi dxi-format-vertical-align-top",
+ value: "top"
+ },
+ {
+ icon: "dxi dxi-format-vertical-align-bottom",
+ value: "bottom"
+ }
+ ]
+ }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/lineshape.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/lineshape.md
new file mode 100644
index 000000000..cea560c53
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/lineshape.md
@@ -0,0 +1,85 @@
+---
+sidebar_label: Line shape
+title: Editbar 복합 컨트롤 - Line shape
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Line shape 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고 코드 예제와 라이브 데모를 사용해 보며 DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Line shape
+
+@short: 커넥터를 표시하고 관리하기 위한 복합 컨트롤
+
+})
+
+:::info
+**Line shape** 컨트롤은 Diagram Editor의 *default* 모드에서 `line` 요소에만 사용할 수 있습니다.
+:::
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "lineShape",
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number, // 기본값: "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값: "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값: "between"
+ compact?: boolean, // 기본값: false
+
+ // 서비스 속성
+ $properties?: object
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"lineShape"`으로 설정합니다.
+- `hidden` - (선택) 컨트롤의 숨김 여부를 정의합니다. 기본값은 *false*입니다.
+- `disabled` - (선택) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. 기본값은 *false*입니다.
+- `css` - (선택) 컨트롤에 스타일 클래스를 추가합니다.
+- `width` - (선택) 컨트롤의 너비입니다. 기본값은 `"content"`입니다.
+- `height` - (선택) 컨트롤의 높이입니다. 기본값은 `"content"`입니다.
+- `padding` - (선택) 컨트롤 그룹 내부 콘텐츠의 패딩을 설정합니다. 기본값은 *"0 16px"*입니다.
+- `label` - (선택) 컨트롤의 레이블을 지정합니다.
+- `labelAlignment` - (선택) 레이블의 위치를 정의합니다. 기본값은 `"left"`입니다.
+- `align` - (선택) 컨트롤 그룹 내부 컨트롤의 정렬을 설정합니다. 기본값은 `"between"`입니다.
+- `compact` - (선택) 컴팩트 모드를 지정하며 들여쓰기와 프레임을 제거합니다. 기본값은 *false*입니다.
+
+### 서비스 속성 {#service-properties}
+
+- `$properties` - (선택) 복합 컨트롤 내에서 [기본 컨트롤](api/diagram_editor/editbar/basic_controls_overview.md)의 값을 재정의할 수 있습니다. 기본 컨트롤을 기반으로 **Line shape** 컨트롤의 다음 요소를 구성할 수 있습니다:
+ - `connectType` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) 커넥터 유형을 설정합니다.
+
+## 예제 {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $line: [
+ {
+ type: "lineShape",
+ label: "Line connection type"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/pointerview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/pointerview.md
new file mode 100644
index 000000000..def1042d5
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/pointerview.md
@@ -0,0 +1,86 @@
+---
+sidebar_label: Pointer view
+title: Editbar 복합 컨트롤 - Pointer view
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Pointer view 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고 코드 예제와 라이브 데모를 사용해 보며 DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Pointer view
+
+@short: 커넥터 화살표를 표시하고 관리하기 위한 복합 컨트롤
+
+})
+
+:::info
+**Pointer view** 컨트롤은 Diagram Editor의 *default* 모드에서 `line` 요소에만 사용할 수 있습니다.
+:::
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "pointerView",
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number, // 기본값: "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값: "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값: "between"
+ compact?: boolean, // 기본값: false
+
+ // 서비스 속성
+ $properties?: object
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"pointerView"`로 설정합니다.
+- `hidden` - (선택) 컨트롤의 숨김 여부를 정의합니다. 기본값은 *false*입니다.
+- `disabled` - (선택) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. 기본값은 *false*입니다.
+- `css` - (선택) 컨트롤에 스타일 클래스를 추가합니다.
+- `width` - (선택) 컨트롤의 너비입니다. 기본값은 `"content"`입니다.
+- `height` - (선택) 컨트롤의 높이입니다. 기본값은 `"content"`입니다.
+- `padding` - (선택) 컨트롤 그룹 내부 콘텐츠의 패딩을 설정합니다. 기본값은 *"0 16px"*입니다.
+- `label` - (선택) 컨트롤의 레이블을 지정합니다.
+- `labelAlignment` - (선택) 레이블의 위치를 정의합니다. 기본값은 `"left"`입니다.
+- `align` - (선택) 컨트롤 그룹 내부 컨트롤의 정렬을 설정합니다. 기본값은 `"between"`입니다.
+- `compact` - (선택) 컴팩트 모드를 지정하며 들여쓰기와 프레임을 제거합니다. 기본값은 *false*입니다.
+
+### 서비스 속성 {#service-properties}
+
+- `$properties` - (선택) 복합 컨트롤 내에서 [기본 컨트롤](api/diagram_editor/editbar/basic_controls_overview.md)의 값을 재정의할 수 있습니다. 기본 컨트롤을 기반으로 **Pointer view** 컨트롤의 다음 요소를 구성할 수 있습니다:
+ - `backArrow` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) 커넥터 끝부분의 화살표 유형을 설정합니다.
+ - `forwardArrow` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) 커넥터 시작 부분의 화살표 유형을 설정합니다.
+
+## 예제 {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $line: [
+ {
+ type: "pointerView",
+ disabled: true
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/position.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/position.md
new file mode 100644
index 000000000..b036adc2f
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/position.md
@@ -0,0 +1,88 @@
+---
+sidebar_label: Position
+title: Editbar 복합 컨트롤 - Position
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Position 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고 코드 예제와 라이브 데모를 사용해 보며 DHTMLX Suite의 무료 30일 평가판을 다운로드하세요.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Position
+
+@short: 미리 정의된 알고리즘을 기준으로 X축과 Y축에서 도형의 오프셋을 구성하기 위한 복합 컨트롤
+
+})
+
+:::info
+**Position** 컨트롤은 Diagram Editor의 *org* 또는 *mindmap* 모드에서 `shape` 요소에만 사용할 수 있습니다.
+:::
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "position",
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number, // 기본값: "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값: "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값: "start"
+ compact?: boolean, // 기본값: false
+
+ // 서비스 속성
+ $properties?: object
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"position"`으로 설정합니다.
+- `hidden` - (선택) 컨트롤의 숨김 여부를 정의합니다. 기본값은 *false*입니다.
+- `disabled` - (선택) 컨트롤의 활성화(*false*) 또는 비활성화(*true*) 여부를 정의합니다. 기본값은 *false*입니다.
+- `css` - (선택) 컨트롤에 스타일 클래스를 추가합니다.
+- `width` - (선택) 컨트롤의 너비입니다. 기본값은 `"content"`입니다.
+- `height` - (선택) 컨트롤의 높이입니다. 기본값은 `"content"`입니다.
+- `padding` - (선택) 컨트롤 그룹 내부 콘텐츠의 패딩을 설정합니다. 기본값은 *"0 16px"*입니다.
+- `label` - (선택) 컨트롤의 레이블을 지정합니다.
+- `labelAlignment` - (선택) 레이블의 위치를 정의합니다. 기본값은 `"left"`입니다.
+- `align` - (선택) 컨트롤 그룹 내부 컨트롤의 정렬을 설정합니다. 기본값은 `"start"`입니다.
+- `compact` - (선택) 컴팩트 모드를 지정하며 들여쓰기와 프레임을 제거합니다. 기본값은 *false*입니다.
+
+### 서비스 속성 {#service-properties}
+
+- `$properties` - (선택) 복합 컨트롤 내에서 [기본 컨트롤](api/diagram_editor/editbar/basic_controls_overview.md))의 값을 재정의할 수 있습니다. 기본 컨트롤을 기반으로 **Position** 컨트롤의 다음 요소를 구성할 수 있습니다:
+ - `dx` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) 미리 정의된 알고리즘을 기준으로 x축에서 도형의 오프셋을 설정합니다.
+ - `dy` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) 미리 정의된 알고리즘을 기준으로 y축에서 도형의 오프셋을 설정합니다.
+
+## 예제 {#example}
+
+~~~jsx {6-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "mindmap",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "position",
+ $properties: {
+ dx: { disabled: true }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/size.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/size.md
new file mode 100644
index 000000000..f7d78d8bc
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/size.md
@@ -0,0 +1,86 @@
+---
+sidebar_label: Size
+title: Editbar 복합 컨트롤 - Size
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Size 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Size
+
+@short: Diagram 요소의 너비와 높이를 관리하기 위한 복합 컨트롤
+
+})
+
+:::info
+**Size** 컨트롤은 Diagram editor의 `shape`, `group`, `swimlane` 요소에서만 사용할 수 있습니다.
+:::
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "size",
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number, // 기본값: "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값: "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값: "start"
+ compact?: boolean, // 기본값: false
+
+ // 서비스 속성
+ $properties?: object
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"size"`로 설정합니다
+- `hidden` - (선택 사항) 컨트롤이 숨겨져 있는지 여부를 정의합니다. 기본값은 *false*입니다
+- `disabled` - (선택 사항) 컨트롤이 활성화(*false*)되어 있는지 또는 비활성화(*true*)되어 있는지를 정의합니다. 기본값은 *false*입니다
+- `css` - (선택 사항) 컨트롤에 스타일 클래스를 추가합니다
+- `width` - (선택 사항) 컨트롤의 너비입니다. 기본값은 `"content"`입니다
+- `height` - (선택 사항) 컨트롤의 높이입니다. 기본값은 `"content"`입니다
+- `padding` - (선택 사항) 컨트롤 그룹 내부 콘텐츠의 패딩을 설정합니다. 기본값은 *"0 16px"*입니다
+- `label` - (선택 사항) 컨트롤의 레이블을 지정합니다
+- `labelAlignment` - (선택 사항) 레이블의 위치를 정의합니다. 기본값은 `"left"`입니다
+- `align` - (선택 사항) 컨트롤 그룹 내부 컨트롤의 정렬을 설정합니다. 기본값은 `"start"`입니다
+- `compact` - (선택 사항) 컴팩트 모드를 지정하여 여백과 프레임을 제거합니다. 기본값은 *false*입니다
+
+### 서비스 속성 {#service-properties}
+
+- `$properties` - (선택 사항) 복합 컨트롤 내에서 [기본 컨트롤](api/diagram_editor/editbar/basic_controls_overview.md)의 값을 재정의할 수 있습니다. 기본 컨트롤을 기반으로 **Size** 컨트롤의 다음 요소를 구성할 수 있습니다:
+ - `width` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) Diagram 요소의 너비(px)를 설정합니다
+ - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) Diagram 요소의 높이(px)를 설정합니다
+
+## 예제 {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "mindmap",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "size",
+ label: "Shape size"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textalign.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textalign.md
new file mode 100644
index 000000000..39641bdf3
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textalign.md
@@ -0,0 +1,82 @@
+---
+sidebar_label: Text align
+title: Editbar 복합 컨트롤 - Text align
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Text align 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Text align
+
+@short: Diagram 요소 내 텍스트 정렬을 관리하기 위한 복합 컨트롤
+
+})
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "textAlign",
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number, // 기본값: "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값: "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값: "between"
+ compact?: boolean, // 기본값: false
+
+ // 서비스 속성
+ $properties?: object
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"textAlign"`으로 설정합니다
+- `hidden` - (선택 사항) 컨트롤이 숨겨져 있는지 여부를 정의합니다. 기본값은 *false*입니다
+- `disabled` - (선택 사항) 컨트롤이 활성화(*false*)되어 있는지 또는 비활성화(*true*)되어 있는지를 정의합니다. 기본값은 *false*입니다
+- `css` - (선택 사항) 컨트롤에 스타일 클래스를 추가합니다
+- `width` - (선택 사항) 컨트롤의 너비입니다. 기본값은 `"content"`입니다
+- `height` - (선택 사항) 컨트롤의 높이입니다. 기본값은 `"content"`입니다
+- `padding` - (선택 사항) 컨트롤 그룹 내부 콘텐츠의 패딩을 설정합니다. 기본값은 *"0 16px"*입니다
+- `label` - (선택 사항) 컨트롤의 레이블을 지정합니다
+- `labelAlignment` - (선택 사항) 레이블의 위치를 정의합니다. 기본값은 `"left"`입니다
+- `align` - (선택 사항) 컨트롤 그룹 내부 컨트롤의 정렬을 설정합니다. 기본값은 `"between"`입니다
+- `compact` - (선택 사항) 컴팩트 모드를 지정하여 여백과 프레임을 제거합니다. 기본값은 *false*입니다
+
+### 서비스 속성 {#service-properties}
+
+- `$properties` - (선택 사항) 복합 컨트롤 내에서 [기본 컨트롤](api/diagram_editor/editbar/basic_controls_overview.md)의 값을 재정의할 수 있습니다. 기본 컨트롤을 기반으로 **Text align** 컨트롤의 다음 요소를 구성할 수 있습니다:
+ - `textAlign` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) 텍스트의 가로 정렬을 설정합니다
+ - `textVerticalAlign` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) 텍스트의 세로 정렬을 설정합니다
+
+## 예제 {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "mindmap",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "textAlign",
+ label: "Text align"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textstyle.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textstyle.md
new file mode 100644
index 000000000..9d8dd36d9
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textstyle.md
@@ -0,0 +1,96 @@
+---
+sidebar_label: Text style
+title: Editbar 복합 컨트롤 - Text style
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 Text style 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Suite의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Text style
+
+@short: Diagram 요소 내 텍스트 스타일을 관리하기 위한 복합 컨트롤
+
+})
+
+## 사용법 {#usage}
+
+~~~jsx
+{
+ type: "textStyle",
+
+ hidden?: boolean, // 기본값: false
+ disabled?: boolean, // 기본값: false
+
+ css?: string,
+ width?: string | number | "content", // 기본값: "content"
+ height?: string | number | "content", // 기본값: "content"
+ padding?: string | number, // 기본값: "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 기본값: "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 기본값: "between"
+ compact?: boolean, // 기본값: false
+
+ // 서비스 속성
+ $properties?: object
+}
+~~~
+
+## 설명 {#description}
+
+### 기본 속성 {#basic-properties}
+
+- `type` - (필수) 컨트롤의 유형입니다. `"textStyle"`로 설정합니다
+- `hidden` - (선택 사항) 컨트롤이 숨겨져 있는지 여부를 정의합니다. 기본값은 *false*입니다
+- `disabled` - (선택 사항) 컨트롤이 활성화(*false*)되어 있는지 또는 비활성화(*true*)되어 있는지를 정의합니다. 기본값은 *false*입니다
+- `css` - (선택 사항) 컨트롤에 스타일 클래스를 추가합니다
+- `width` - (선택 사항) 컨트롤의 너비입니다. 기본값은 `"content"`입니다
+- `height` - (선택 사항) 컨트롤의 높이입니다. 기본값은 `"content"`입니다
+- `padding` - (선택 사항) 컨트롤 그룹 내부 콘텐츠의 패딩을 설정합니다. 기본값은 *"0 16px"*입니다
+- `label` - (선택 사항) 컨트롤의 레이블을 지정합니다
+- `labelAlignment` - (선택 사항) 레이블의 위치를 정의합니다. 기본값은 `"left"`입니다
+- `align` - (선택 사항) 컨트롤 그룹 내부 컨트롤의 정렬을 설정합니다. 기본값은 `"between"`입니다
+- `compact` - (선택 사항) 컴팩트 모드를 지정하여 여백과 프레임을 제거합니다. 기본값은 *false*입니다
+
+### 서비스 속성 {#service-properties}
+
+- `$properties` - (선택 사항) 복합 컨트롤 내에서 [기본 컨트롤](api/diagram_editor/editbar/basic_controls_overview.md)의 값을 재정의할 수 있습니다. 기본 컨트롤을 기반으로 **Text style** 컨트롤의 다음 요소를 구성할 수 있습니다:
+ - `fontSize` - ([combo](api/diagram_editor/editbar/basic_controls/combo.md)) 글꼴 크기를 설정합니다
+ - `lineHeight` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) 줄 높이를 설정합니다
+ - `fontColor` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) 글꼴 색상을 설정합니다
+ - `fontWeight` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) 글꼴 두께를 설정합니다
+ - `fontStyle` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) 글꼴 스타일을 설정합니다
+
+## 예제 {#example}
+
+~~~jsx {6-22}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "mindmap",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "textStyle",
+ label: "Text style",
+ $properties: {
+ fontSize: {
+ value: 20,
+ options: [
+ { id: 10, value: "10px" },
+ { id: 20, value: "20px" },
+ { id: 30, value: "30px" },
+ { id: 40, value: "40px" }
+ ]
+ }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls_overview.md
new file mode 100644
index 000000000..3ea827986
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls_overview.md
@@ -0,0 +1,30 @@
+---
+sidebar_label: 복합 컨트롤
+title: Editbar 가이드 - 복합 컨트롤
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 복합 컨트롤에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# 복합 컨트롤 {#complex-controls}
+
+Editbar의 복합 컨트롤을 사용하여 Diagram 항목에 대한 Editbar를 구성할 수 있습니다. 아래에서 복합 컨트롤 목록을 확인할 수 있습니다. 각 컨트롤의 구성 속성에 대한 자세한 설명을 보려면 해당 섹션을 확인하세요.
+
+:::info
+구성에 대한 자세한 내용은 [Editbar 구성](guides/diagram_editor/editbar.md) 가이드를 참조하세요!
+:::
+
+## Editbar 복합 컨트롤 개요 {#overview-of-editbar-complex-controls}
+
+| 이름 | 설명 |
+| :-------------------------------------------------------------------- | :---------------------------------------------------------------------- |
+| [](api/diagram_editor/editbar/complex_controls/arrange.md) | @getshort(api/diagram_editor/editbar/complex_controls/arrange.md) |
+| [](api/diagram_editor/editbar/complex_controls/border.md) | @getshort(api/diagram_editor/editbar/complex_controls/border.md) |
+| [](api/diagram_editor/editbar/complex_controls/gridstep.md) | @getshort(api/diagram_editor/editbar/complex_controls/gridstep.md) |
+| [](api/diagram_editor/editbar/complex_controls/header.md) | @getshort(api/diagram_editor/editbar/complex_controls/header.md) |
+| [](api/diagram_editor/editbar/complex_controls/headercommon.md) | @getshort(api/diagram_editor/editbar/complex_controls/headercommon.md) |
+| [](api/diagram_editor/editbar/complex_controls/headerposition.md) | @getshort(api/diagram_editor/editbar/complex_controls/headerposition.md)|
+| [](api/diagram_editor/editbar/complex_controls/lineshape.md) | @getshort(api/diagram_editor/editbar/complex_controls/lineshape.md) |
+| [](api/diagram_editor/editbar/complex_controls/pointerview.md) | @getshort(api/diagram_editor/editbar/complex_controls/pointerview.md) |
+| [](api/diagram_editor/editbar/complex_controls/position.md) | @getshort(api/diagram_editor/editbar/complex_controls/position.md) |
+| [](api/diagram_editor/editbar/complex_controls/size.md) | @getshort(api/diagram_editor/editbar/complex_controls/size.md) |
+| [](api/diagram_editor/editbar/complex_controls/textalign.md) | @getshort(api/diagram_editor/editbar/complex_controls/textalign.md) |
+| [](api/diagram_editor/editbar/complex_controls/textstyle.md) | @getshort(api/diagram_editor/editbar/complex_controls/textstyle.md) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/controls_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/controls_property.md
new file mode 100644
index 000000000..e1d95fe7f
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/controls_property.md
@@ -0,0 +1,83 @@
+---
+sidebar_label: controls
+title: Editbar의 controls 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 controls 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# controls
+
+### 설명 {#description}
+
+@short: 선택 사항. 하나 이상의 사용자 지정 컨트롤을 정의하는 구성 집합입니다.
+
+:::info
+`controls` 속성을 사용하면 [**기본 컨트롤**](api/diagram_editor/editbar/basic_controls_overview.md) 및/또는 [**복합 컨트롤**](api/diagram_editor/editbar/complex_controls_overview.md)을 기반으로 사용자 지정 `Editbar` 컨트롤을 생성할 수 있습니다. 사용자 지정 컨트롤을 필요한 요소(도형, 그룹, 스윔레인 등)에 적용하려면 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 속성을 사용하세요.
+
+구성에 대한 자세한 내용은 [**Editbar 구성**](guides/diagram_editor/editbar.md) 가이드를 참조하세요!
+:::
+
+:::important
+사용자 지정 컨트롤을 생성할 때 기본 컨트롤을 재정의하지 않는 것이 좋습니다. 각 사용자 지정 컨트롤에 개별 이름을 사용하세요!
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+controls?: {
+ [type: string]: object, // 사용자 지정 컨트롤
+};
+~~~
+
+### 매개변수 {#parameters}
+
+- `type` - 사용자 지정 컨트롤의 유형 이름
+ - `object` - [**기본 컨트롤**](api/diagram_editor/editbar/basic_controls_overview.md) 및/또는 [**복합 컨트롤**](api/diagram_editor/editbar/complex_controls_overview.md)을 기반으로 하는 새 컨트롤의 구성 객체
+
+~~~jsx
+controls: {
+ estimate: { /*...*/ }, // 사용자 지정 구성으로 새 "estimate" 컨트롤 생성
+ // 다른 컨트롤
+}
+~~~
+
+### 예제 {#example}
+
+~~~jsx {16-28}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // 기본 Editbar 표시
+ // 또는 객체를 통해 Editbar 구성
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ properties: {
+ $shape: [
+ { type: "estimate" }, // "estimate" 사용자 지정 컨트롤 적용
+ { type: "name" } // "name" 사용자 지정 컨트롤 적용
+ ]
+ },
+ controls: {
+ // "estimate" 사용자 지정 컨트롤 생성
+ estimate: {
+ type: "fieldset",
+ label: "Time estimate",
+ rows: [
+ { type: "datepicker", key: "date_start", label: "Date start" },
+ { type: "datepicker", key: "date_end", label: "Date end" }
+ ]
+ },
+ // "name" 사용자 지정 컨트롤 생성
+ name: { type: "input", label: "Name", key: "name" }
+ }
+ }
+ }
+});
+~~~
+
+**변경 로그**: 이 속성은 v6.0에서 추가되었습니다.
+
+**관련 문서:** [**Editbar 구성**](guides/diagram_editor/editbar.md)
+
+**관련 샘플:** [Diagram Editor. 기본 모드. 범례가 있는 PERT 차트](https://snippet.dhtmlx.com/w8mrh3ay?mode=wide)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/css_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/css_property.md
new file mode 100644
index 000000000..4ccd2c65d
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/css_property.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: css
+title: Editbar의 css 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 css 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# css
+
+### 설명 {#description}
+
+@short: 선택 사항. Editbar에 사용자 지정 CSS 클래스를 적용합니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+css?: string;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // 기본 Editbar 표시
+ // 또는 객체를 통해 Editbar 구성
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ controls: {...},
+ properties: {...}
+ }
+ }
+});
+~~~
+
+**변경 로그**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/properties_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/properties_property.md
new file mode 100644
index 000000000..eee239412
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/properties_property.md
@@ -0,0 +1,131 @@
+---
+sidebar_label: properties
+title: Editbar의 properties 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 properties 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# properties
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. Diagram 요소(도형, 그룹, 스윔레인 등)의 컨트롤을 수정하는 구성 집합입니다.
+
+:::info
+`properties` 구성을 사용하면 다음을 수행할 수 있습니다:
+- [**기본 컨트롤**](api/diagram_editor/editbar/basic_controls_overview.md) 및/또는 [**복합 컨트롤**](api/diagram_editor/editbar/complex_controls_overview.md)을 기반으로 모든 또는 개별 Diagram 요소에 대해 Editbar 컨트롤을 수정합니다
+- [`controls`](api/diagram_editor/editbar/config/controls_property.md) 속성을 통해 정의된 사용자 지정 Editbar 컨트롤을 Diagram 요소에 적용합니다
+- Diagram 요소에 Editbar 컨트롤(사용자 지정 또는 기본)을 적용하기 위한 조건을 지정합니다
+
+구성에 대한 자세한 내용은 [**Editbar 구성**](guides/diagram_editor/editbar.md) 가이드를 참조하세요!
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+properties?: {
+ [type: string]: object[] | function, // Diagram 요소에 적용되는 컨트롤의 사용자 지정 구성
+};
+~~~
+
+### 매개변수 {#parameters}
+
+- `type` - Diagram 요소 또는 요소 그룹의 이름
+ - `object` - Diagram 요소의 구성 객체
+
+ 또는
+
+ - `function` - Diagram 요소 컨트롤의 구성을 담은 객체 배열을 반환해야 하는 콜백 함수입니다. 이 함수는 다음 매개변수를 포함하는 객체와 함께 호출됩니다:
+ - `item` - (선택 사항) 선택한 요소의 객체
+ - `editor` - (필수) Diagram Editor의 객체
+
+예를 들어 `rectangle`, `circle`, `card` 등과 같이 개별 Diagram 요소에 대해 Editbar 컨트롤을 구성할 수 있습니다:
+
+~~~jsx
+properties: {
+ // 개별 요소(도형)에 대한 Editbar 컨트롤 수정
+ rectangle: [], // "rectangle" 유형의 컨트롤 구성
+ circle: [], // "circle" 유형의 컨트롤 구성
+ card: [], // "card" 유형의 컨트롤 구성
+ estimate: [], // 사용자 지정 "estimate" 유형의 컨트롤 구성
+ // 기타 요소
+}
+~~~
+
+개별 Diagram 요소 그룹에 대해 Editbar 컨트롤을 구성할 수도 있습니다. 그룹을 구성하기 위한 서비스 속성은 다음과 같습니다:
+
+- [`$default`](guides/diagram_editor/editbar.md#configure-editbar-for-the-grid-area) - 요소가 선택되지 않았거나 둘 이상의 요소가 선택된 경우 Editbar 컨트롤을 구성할 수 있습니다
+- [`$shape`](guides/diagram_editor/editbar.md#configure-editbar-for-shapes) - 사용자 지정 도형을 포함한 모든 도형에 대해 Editbar 컨트롤을 구성할 수 있습니다
+- [`$group`](guides/diagram_editor/editbar.md#configure-editbar-for-group-elements) - "group" 유형을 가진 모든 요소에 대해 Editbar 컨트롤을 구성할 수 있습니다
+- [`$swimlane`](guides/diagram_editor/editbar.md#configure-editbar-for-swimlanes) - "swimlane" 유형을 가진 모든 요소에 대해 Editbar 컨트롤을 구성할 수 있습니다
+- [`$line`](guides/diagram_editor/editbar.md#configure-editbar-for-lines) - "line" 유형을 가진 모든 요소에 대해 Editbar 컨트롤을 구성할 수 있습니다
+- [`$lineTitle`](guides/diagram_editor/editbar.md#configure-editbar-for-line-titles) - "lineTitle" 유형을 가진 모든 요소에 대해 Editbar 컨트롤을 구성할 수 있습니다
+
+~~~jsx
+properties: {
+ $default: [],
+ $shape: [],
+ $group: [],
+ $swimlane: [],
+ $line: [],
+ $lineTitle: [],
+ // ... 기타 매개변수
+}
+~~~
+
+### 예제 {#example}
+
+~~~jsx {10-44}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // 기본 Editbar 표시
+ // 또는 객체를 통해 Editbar 구성
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ properties: {
+ $shape: ({ item, editor }) => {
+ const controls = [
+ { type: "position" },
+ { type: "size" }
+ ];
+ if (item.hasOwnProperty("title")) {
+ controls.push({ type: "input", key: "title", label: "Title", wrap: true });
+ }
+ if (item.hasOwnProperty("text")) {
+ controls.push({ type: "textarea", key: "text", height: 200, label: "Text", wrap: true });
+ }
+ if (item.hasOwnProperty("img")) {
+ controls.push({ type: "avatar", key: "img", label: "Image", wrap: true });
+ }
+ return controls;
+ },
+ $group: [
+ {
+ type: "arrange",
+ $properties: {
+ angle: { hidden: true }
+ }
+ },
+ { type: "header" },
+ {
+ type: "border",
+ $properties: {
+ stroke: { key: ["style", "stroke"] },
+ strokeType: { hidden: true },
+ strokeWidth: { key: ["style", "strokeWidth"], width: "85%" }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+**변경 로그:** 이 속성은 v6.0에서 추가되었습니다.
+
+**관련 문서:** [**Editbar 구성**](guides/diagram_editor/editbar.md)
+
+**관련 샘플:** [Diagram Editor. 기본 모드. Editbar 사용자 지정. 도형 카운터 추가](https://snippet.dhtmlx.com/ealq0m4l?mode=wide)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/show_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/show_property.md
new file mode 100644
index 000000000..89f6b153a
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/show_property.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: show
+title: Editbar의 show 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 show 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# show
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. 초기화 시 Editbar를 표시할지 여부를 정의합니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+show?: boolean;
+~~~
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+show: true
+~~~
+
+### 예제 {#example}
+
+~~~jsx {8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // 기본 Editbar 표시
+ // 또는 객체를 통해 Editbar 구성
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ controls: {...},
+ properties: {...}
+ }
+ }
+});
+~~~
+
+**변경 로그:** v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/width_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/width_property.md
new file mode 100644
index 000000000..453bc53c1
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/width_property.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: width
+title: Editbar의 width 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editbar의 width 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# width
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. Editbar의 너비를 정의합니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+width?: number;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // 기본 Editbar 표시
+ // 또는 객체를 통해 Editbar 구성
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ controls: {...},
+ properties: {...}
+ }
+ }
+});
+~~~
+
+**변경 로그:** v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/api_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/api_overview.md
new file mode 100644
index 000000000..343d77f01
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/api_overview.md
@@ -0,0 +1,72 @@
+---
+sidebar_label: API 개요
+title: Editor API 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editor API의 개요를 확인할 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Editor API 개요 {#editor-api-overview}
+
+## Editor 메서드 {#editor-methods}
+
+| 이름 | 설명 |
+| :------------------------------------------------------------ | :-------------------------------------------------------------------- |
+| [](api/diagram_editor/editor/methods/destructor_method.md) | @getshort(api/diagram_editor/editor/methods/destructor_method.md) |
+| [](api/diagram_editor/editor/methods/import_method.md) | @getshort(api/diagram_editor/editor/methods/import_method.md) |
+| [](api/diagram_editor/editor/methods/paint_method.md) | @getshort(api/diagram_editor/editor/methods/paint_method.md) |
+| [](api/diagram_editor/editor/methods/parse_method.md) | @getshort(api/diagram_editor/editor/methods/parse_method.md) |
+| [](api/diagram_editor/editor/methods/serialize_method.md) | @getshort(api/diagram_editor/editor/methods/serialize_method.md) |
+| [](api/diagram_editor/editor/methods/zoomin_method.md) | @getshort(api/diagram_editor/editor/methods/zoomin_method.md) |
+| [](api/diagram_editor/editor/methods/zoomout_method.md) | @getshort(api/diagram_editor/editor/methods/zoomout_method.md) |
+
+## Editor 이벤트 {#editor-events}
+
+| 이름 | 설명 |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------- |
+| [](api/diagram_editor/editor/events/aftergroupmove_event.md) | @getshort(api/diagram_editor/editor/events/aftergroupmove_event.md) |
+| [](api/diagram_editor/editor/events/afteritemcatch_event.md) | @getshort(api/diagram_editor/editor/events/afteritemcatch_event.md) |
+| [](api/diagram_editor/editor/events/afteritemmove_event.md) | @getshort(api/diagram_editor/editor/events/afteritemmove_event.md) |
+| [](api/diagram_editor/editor/events/afteritemresize_event.md) | @getshort(api/diagram_editor/editor/events/afteritemresize_event.md) |
+| [](api/diagram_editor/editor/events/afteritemrotate_event.md) | @getshort(api/diagram_editor/editor/events/afteritemrotate_event.md) |
+| [](api/diagram_editor/editor/events/afterlinetitlemove_event.md) | @getshort(api/diagram_editor/editor/events/afterlinetitlemove_event.md) |
+| [](api/diagram_editor/editor/events/aftershapeiconclick_event.md) | @getshort(api/diagram_editor/editor/events/aftershapeiconclick_event.md) |
+| [](api/diagram_editor/editor/events/aftershapemove_event.md) | @getshort(api/diagram_editor/editor/events/aftershapemove_event.md) |
+| [](api/diagram_editor/editor/events/beforegroupmove_event.md) | @getshort(api/diagram_editor/editor/events/beforegroupmove_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemcatch_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemcatch_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemmove_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemmove_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemresize_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemresize_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemrotate_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemrotate_event.md) |
+| [](api/diagram_editor/editor/events/beforelinetitlemove_event.md) | @getshort(api/diagram_editor/editor/events/beforelinetitlemove_event.md) |
+| [](api/diagram_editor/editor/events/beforeshapeiconclick_event.md)| @getshort(api/diagram_editor/editor/events/beforeshapeiconclick_event.md) |
+| [](api/diagram_editor/editor/events/beforeshapemove_event.md) | @getshort(api/diagram_editor/editor/events/beforeshapemove_event.md) |
+| [](api/diagram_editor/editor/events/groupmoveend_event.md) | @getshort(api/diagram_editor/editor/events/groupmoveend_event.md) |
+| [](api/diagram_editor/editor/events/itemmoveend_event.md) | @getshort(api/diagram_editor/editor/events/itemmoveend_event.md) |
+| [](api/diagram_editor/editor/events/itemresizeend_event.md) | @getshort(api/diagram_editor/editor/events/itemresizeend_event.md) |
+| [](api/diagram_editor/editor/events/itemrotateend_event.md) | @getshort(api/diagram_editor/editor/events/itemrotateend_event.md) |
+| [](api/diagram_editor/editor/events/itemtarget_event.md) | @getshort(api/diagram_editor/editor/events/itemtarget_event.md) |
+| [](api/diagram_editor/editor/events/linetitlemoveend_event.md) | @getshort(api/diagram_editor/editor/events/linetitlemoveend_event.md) |
+| [](api/diagram_editor/editor/events/shapemoveend_event.md) | @getshort(api/diagram_editor/editor/events/shapemoveend_event.md) |
+| [](api/diagram_editor/editor/events/shaperesize_event.md) | @getshort(api/diagram_editor/editor/events/shaperesize_event.md) |
+| [](api/diagram_editor/editor/events/zoomin_event.md) | @getshort(api/diagram_editor/editor/events/zoomin_event.md) |
+| [](api/diagram_editor/editor/events/zoomout_event.md) | @getshort(api/diagram_editor/editor/events/zoomout_event.md) |
+
+
+## Editor 속성 {#editor-properties}
+
+| 이름 | 설명 |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------ |
+| [](api/diagram_editor/editor/config/autoplacement_property.md) | @getshort(api/diagram_editor/editor/config/autoplacement_property.md) |
+| [](api/diagram_editor/editor/config/connectionpoints_property.md) | @getshort(api/diagram_editor/editor/config/connectionpoints_property.md) |
+| [](api/diagram_editor/editor/config/defaults_property.md) | @getshort(api/diagram_editor/editor/config/defaults_property.md) |
+| [](api/diagram_editor/editor/config/editmode_property.md) | @getshort(api/diagram_editor/editor/config/editmode_property.md) |
+| [](api/diagram_editor/editor/config/grid_property.md) | @getshort(api/diagram_editor/editor/config/grid_property.md) |
+| [](api/diagram_editor/editor/config/gridstep_property.md) | @getshort(api/diagram_editor/editor/config/gridstep_property.md) |
+| [](api/diagram_editor/editor/config/hotkeys_property.md) | @getshort(api/diagram_editor/editor/config/hotkeys_property.md) |
+| [](api/diagram_editor/editor/config/itemsdraggable_property.md) | @getshort(api/diagram_editor/editor/config/itemsdraggable_property.md) |
+| [](api/diagram_editor/editor/config/lineconfig_property.md) | @getshort(api/diagram_editor/editor/config/lineconfig_property.md) |
+| [](api/diagram_editor/editor/config/magnetic_property.md) | @getshort(api/diagram_editor/editor/config/magnetic_property.md) |
+| [](api/diagram_editor/editor/config/resizepoints_property.md) | @getshort(api/diagram_editor/editor/config/resizepoints_property.md) |
+| [](api/diagram_editor/editor/config/scale_property.md) | @getshort(api/diagram_editor/editor/config/scale_property.md) |
+| [](api/diagram_editor/editor/config/shapetoolbar_property.md) | @getshort(api/diagram_editor/editor/config/shapetoolbar_property.md) |
+| [](api/diagram_editor/editor/config/shapetype_property.md) | @getshort(api/diagram_editor/editor/config/shapetype_property.md) |
+| [](api/diagram_editor/editor/config/type_property.md) | @getshort(api/diagram_editor/editor/config/type_property.md) |
+| [](api/diagram_editor/editor/config/view_property.md) | @getshort(api/diagram_editor/editor/config/view_property.md) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md
new file mode 100644
index 000000000..38cb0cc10
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md
@@ -0,0 +1,125 @@
+---
+sidebar_label: autoplacement
+title: Editor의 autoplacement 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editor의 autoplacement 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# autoplacement
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. 도형의 자동 배치를 위한 구성 설정이 포함된 객체입니다.
+
+:::info
+`autoplacement` 속성은 Editor의 기본 모드에서만, 그리고 도형에 대해서만 작동합니다. 그룹이나 스윔레인을 사용하는 경우에는 작동하지 않습니다.
+:::
+
+### 사용법 {#usage}
+
+~~~ts
+autoplacement?: {
+ mode?: "direct" | "edges", // 기본값은 "direct"
+ graphPadding?: number, // 기본값은 200
+ placeMode?: "orthogonal" | "radial", // 기본값은 "orthogonal"
+ itemPadding?: number, // 기본값은 20
+ levelPadding?: number // 기본값은 20
+};
+~~~
+
+### 매개변수 {#parameters}
+
+`autoplacement` 객체에는 다음과 같은 매개변수가 있습니다:
+
+- `mode` - (선택 사항) 도형을 연결하는 모드이며, 기본값은 `"direct"`이고 `"edges"`로 설정할 수 있습니다
+- `graphPadding` - (선택 사항) 연결되지 않은 다이어그램 사이의 간격을 설정하며, 기본값은 *200*입니다
+- `placeMode` - (선택 사항) 도형의 배치 모드를 설정하며, 기본값은 `"orthogonal"`이고 `"radial"`로 설정할 수 있습니다
+- `itemPadding` - (선택 사항) 항목 간의 최소 간격입니다(최소값은 *1*), 기본값은 *20*입니다
+- `levelPadding` - (선택 사항) 계층 구조 레벨 간의 최소 간격입니다(최소값은 *1*), 기본값은 *20*입니다
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+autoplacement: {
+ mode: "direct",
+ graphPadding: 200,
+ placeMode: "orthogonal",
+ itemPadding: 20,
+ levelPadding: 20
+}
+~~~
+
+### 예제 {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ autoplacement: {
+ placeMode: "radial",
+ mode: "direct",
+ itemPadding: 10,
+ levelPadding: 10,
+ graphPadding: 100
+ }
+});
+
+editor.parse(data);
+~~~
+
+## 도형 연결 모드 {#modes-of-connecting-shapes}
+
+### "direct" 모드 {#direct-mode}
+
+화살표가 없는 연결선은 "중심에서 중심으로" 정렬됩니다. 이 선은 직선이며 대각선 방향입니다.
+
+
+
+### "edges" 모드 {#edges-mode}
+
+연결선은 "옆면에서 옆면으로" 정렬됩니다.
+
+:::info
+선에 화살표를 추가하려면 [선 객체](lines/configuration_properties.md)의 설정에서 `forwardArrow: "filled"` 또는 `backArrow: "filled"`를 지정하세요.
+:::
+
+`"edges"` 모드에서 연결선은 다음과 같을 수 있습니다:
+
+- [선 객체](lines/configuration_properties.md)의 `connectType: "straight"` 속성을 설정하면 직선이거나
+
+
+
+- [선 객체](lines/configuration_properties.md)의 `connectType: "elbow"` 속성을 설정하면 90도로 꺾인 곡선입니다
+
+
+
+## 도형 배치 모드 {#modes-of-placement-of-shapes}
+
+### "orthogonal" 모드 {#orthogonal-mode}
+
+도형이 수직선과 수평선을 따라 배치됩니다
+
+- `"direct"` 모드의 선을 사용한 `"orthogonal"` 배치
+
+
+
+- `"edges"` 모드의 선을 사용한 `"orthogonal"` 배치
+
+
+
+### "radial" 모드 {#radial-mode}
+
+도형은 중심 도형, 즉 연결이 가장 많은 도형을 기준으로 가상의 원 위에 배치됩니다
+
+- `"direct"` 모드의 선을 사용한 `"radial"` 배치
+
+
+
+- `"edges"` 모드의 선을 사용한 `"radial"` 배치
+
+
+
+**변경 로그**:
+
+- `itemPadding` 및 `levelPadding` 매개변수는 v6.1.3에서 추가되었습니다
+- `placeMode` 매개변수는 v5.0에서 추가되었습니다
+- `autoplacement` 속성은 v3.0에서 추가되었습니다
+
+**관련 샘플**: [Diagram editor. 기본 모드. 방사형 자동 레이아웃 알고리즘](https://snippet.dhtmlx.com/f0cespbk)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/connectionpoints_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/connectionpoints_property.md
new file mode 100644
index 000000000..03c6e13e0
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/connectionpoints_property.md
@@ -0,0 +1,39 @@
+---
+sidebar_label: connectionPoints
+title: Editor의 connectionPoints 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editor의 connectionPoints 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# connectionPoints
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. 연결 컨트롤을 사용하여 도형을 연결하는 기능을 활성화/비활성화합니다.
+
+:::info
+`connectionPoints` 속성은 `default` 모드에서만 작동합니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+connectionPoints?: boolean;
+~~~
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+connectionPoints: true
+~~~
+
+### 예제 {#example}
+
+~~~jsx {3}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default", // "default"만 가능
+ connectionPoints: false, // 기본값은 true
+ // 기타 설정
+});
+~~~
+
+**변경 로그:** v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/defaults_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/defaults_property.md
new file mode 100644
index 000000000..ab58f9368
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/defaults_property.md
@@ -0,0 +1,71 @@
+---
+sidebar_label: defaults
+title: Editor의 defaults 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editor의 defaults 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# defaults
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. 도형 또는 선의 기본 설정을 지정하는 객체입니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+defaults?: {
+ [type: string]: object
+};
+~~~
+
+### 매개변수 {#parameters}
+
+`defaults` 객체에는 `key:value` 쌍의 집합이 포함될 수 있습니다. 여기서 *key*는 도형 또는 선의 유형이고, *value*는 이에 해당하는 [도형](shapes/configuration_properties.md) 또는 [선](lines/configuration_properties.md)의 구성 설정 집합입니다.
+
+:::note
+`type` 및 `id` 속성은 도형/선의 기본 설정에서 정의할 수 없습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {24}
+const defaults = {
+ // "rectangle" 유형의 모든 도형에 대한 기본 설정
+ rectangle: {
+ fill: "#CEEFE1",
+ stroke: "#0AB169",
+ strokeWidth: 2,
+ width: 140,
+ height: 140,
+ text: "Default text"
+ },
+ // "line" 유형의 모든 선에 대한 기본 설정
+ line: {
+ strokeWidth: 3,
+ stroke: "#245CE0"
+ },
+ // "dash" 유형의 모든 선에 대한 기본 설정
+ dash: {
+ strokeWidth: 3,
+ stroke: "#245CE0"
+ }
+};
+
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ defaults
+});
+~~~
+
+:::info
+개별 유형의 도형/선에 대한 기본 설정을 정의한 후에는, 해당 유형의 도형/선에 대해 [데이터 세트를 준비](guides/loading_data.md#preparing-data-to-load)할 때 이러한 속성을 생략하거나 값을 재정의할 수 있습니다.
+:::
+
+**변경 로그:** 선에 대한 기본 설정을 지정하는 기능이 v4.2에서 추가되었습니다.
+
+**관련 문서:**
+
+- [도형의 기본 설정 구성하기](guides/diagram/configuration.md#setting-the-default-configuration-of-a-shape)
+- [도형 미리보기 설정하기](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes)
+
+**관련 샘플:** [Diagram editor. 기본 선(커넥터) 유형 설정하기. 도형 A를 도형 B에 연결해 보기](https://snippet.dhtmlx.com/22abzn5m)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/editmode_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/editmode_property.md
new file mode 100644
index 000000000..a6d2614c9
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/editmode_property.md
@@ -0,0 +1,25 @@
+---
+sidebar_label: editMode
+title: Editor의 editMode 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editor의 editMode 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# editMode
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. Editor의 왼쪽/오른쪽 패널을 숨기거나 표시합니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+editMode?: boolean;
+~~~
+
+### 예제 {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ editMode: false
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/grid_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/grid_property.md
new file mode 100644
index 000000000..c222a59e4
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/grid_property.md
@@ -0,0 +1,35 @@
+---
+sidebar_label: grid
+title: Editor의 grid 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 grid 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# grid
+
+### 설명 {#description}
+
+@short: 선택 사항. editor 캔버스에 표시되는 grid를 활성화/비활성화합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+grid?: boolean;
+~~~
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+grid: true
+~~~
+
+### 예제 {#example}
+
+~~~jsx {3}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default", // "org" | "mindmap" | "default"
+ grid: false, // 기본값은 true입니다
+ // 기타 설정
+});
+~~~
+
+**Change log**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/gridstep_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/gridstep_property.md
new file mode 100644
index 000000000..3f9061a35
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/gridstep_property.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: gridStep
+title: Editor의 gridStep 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 gridStep 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# gridStep
+
+### 설명 {#description}
+
+@short: 선택 사항. 항목을 이동하는 단계를 정의하는 grid step의 크기를 설정합니다
+
+grid step 값을 변경하면 Grid area의 점 사이 거리도 함께 변경됩니다
+
+### 사용법 {#usage}
+
+~~~jsx
+gridStep?: number;
+~~~
+
+:::info
+지정된 숫자는 1 이상이어야 합니다
+:::
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+gridStep: 10
+~~~
+
+### 예제 {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ gridStep:20
+});
+~~~
+
+:::note
+editor에서 항목을 이동할 때는 화살표 키를 사용하는 것을 권장합니다. 이 방법은 항목을 정확히 한 grid step만큼 이동시키지만, 마우스를 사용하면 항목이 여러 grid step만큼 이동할 수 있습니다.
+:::
+
+**Related article**: [Grid area](guides/diagram_editor/grid_area.md)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/hotkeys_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/hotkeys_property.md
new file mode 100644
index 000000000..b97956299
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/hotkeys_property.md
@@ -0,0 +1,104 @@
+---
+sidebar_label: hotkeys
+title: Editor의 hotkeys 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 hotkeys 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# hotkeys
+
+### 설명 {#description}
+
+@short: 선택 사항. editor 내 다양한 작업에 대한 키보드 단축키(hotkeys)를 관리할 수 있습니다
+
+모든 hotkeys를 완전히 비활성화하거나, 특정 조합을 비활성화하거나, 사용자 지정 함수로 동작을 재정의할 수 있습니다.
+
+:::note
+기본 hotkeys를 활성화하거나 비활성화하면 editor의 Toolbar에 표시되는 툴팁이나 레이블의 표시 여부에도 영향을 미친다는 점에 유의하세요.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+hotkeys?:
+ | boolean
+ | {
+ [key: string]: false | ((event: KeyboardEvent) => void);
+ };
+~~~
+
+### 매개변수 {#parameters}
+
+- `hotkeys: boolean` - *false*로 설정하면 모든 표준 hotkeys가 비활성화됩니다. *true*로 설정하면 모든 표준 hotkeys가 활성화됩니다
+- `hotkeys: object` - 키가 hotkey 이름(예: `"ctrl+c"`, `"delete"`)에 해당하는 객체이며, 값은 다음과 같은 방식으로 동작을 정의합니다:
+ - `false` - 지정된 hotkey를 비활성화합니다
+ - `(event: KeyboardEvent) => void` - 이 hotkey가 눌렸을 때 실행되는 사용자 지정 함수를 정의합니다. 이 함수는 인수로 `KeyboardEvent` 객체를 받습니다
+
+### 예제 {#example}
+
+- 모든 hotkeys 비활성화하기
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ hotkeys: false,
+});
+~~~
+
+- 특정 hotkeys 비활성화하기(다음 예제에서는 `Ctrl+C`와 `Ctrl+V`)
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ hotkeys: {
+ "ctrl+c": false,
+ "ctrl+v": false
+ },
+});
+~~~
+
+- hotkey 동작 재정의하기
+
+~~~jsx
+let editor = null;
+
+editor = new dhx.DiagramEditor("editor_container", {
+ hotkeys: {
+ // 선택한 요소를 제거하도록 "delete" 키를 재정의합니다
+ "delete": () => editor.diagram.data.remove(editor.diagram.selection.getIds()),
+ // 사용자 지정 hotkey "Ctrl+F"를 추가합니다
+ "ctrl+f": () => console.log("custom search"),
+ },
+});
+~~~
+
+### 설명 {#description-1}
+
+아래 표는 표준 hotkeys가 수행하는 작업과 재정의할 수 있는 hotkeys에 대한 매개변수 키 문자열을 설명합니다:
+
+#### Hotkeys 표 {#hotkeys-table}
+
+| Hotkey 조합 | 설명 | 매개변수 키 문자열 |
+|--------------------------------|------------------------------------------------------|-------------------------|
+| `Alt+1` | Shapebar 표시/숨기기(default 모드에서만 해당) | `"alt+1"` |
+| `Alt+2` | Editbar 표시/숨기기 | `"alt+2"` |
+| `Alt+3` | Grid Area 표시/숨기기 | `"alt+3"` |
+| `Ctrl+Z` (Win), `CMD+Z` (macOS)| 최근 작업 취소 | `"ctrl+z"` |
+| `Ctrl+Shift+Z` (Win), `CMD+Shift+Z` (macOS)| 취소된 작업으로 복귀 | `"ctrl+shift+z"` |
+| `Ctrl+D` (Win), `CMD+D` (macOS)| 선택한 요소 복제(default 모드에서만 해당) | `"ctrl+d"` |
+| `Ctrl+C` (Win), `CMD+C` (macOS)| 선택한 요소 복사(default 모드에서만 해당) | `"ctrl+c"` |
+| `Ctrl+V` (Win), `CMD+V` (macOS)| 선택한 요소 붙여넣기(default 모드에서만 해당) | `"ctrl+v"` |
+| `Ctrl+Alt+C` (Win), `CMD+Alt+C` (macOS)| 선택한 항목의 스타일 복사(동일한 종류의 요소에만 적용 가능)| `"alt+ctrl+c"` |
+| `Ctrl+Alt+V` (Win), `CMD+Alt+V` (macOS)| 복사한 스타일을 선택한 항목에 적용(동일한 종류의 요소에만 적용 가능)| `"alt+ctrl+v"` |
+| `Ctrl+A` (Win), `CMD+A` (macOS)| 모든 항목 선택 | `"ctrl+a"` |
+| `Ctrl+Shift+A` (Win), `CMD+Shift+A` (macOS)| 선택한 모든 항목 선택 해제 | `"ctrl+shift+a"` |
+| `Shift+Left Click` | 선택한 항목 목록에 항목 추가 | (`hotkeys` 매개변수 키에 직접 해당하지 않음) |
+| `Alt+Left Click` | 선택한 항목 선택 해제 | (`hotkeys` 매개변수 키에 직접 해당하지 않음) |
+| `Delete` (`Del`), `Backspace` | 항목 삭제 | `"delete"`, `"backspace"` |
+| `Arrow-Left`, `Arrow-Right`, `Arrow-Up`, `Arrow-Down`| 선택한 항목 이동 | `"arrowLeft"`, `"arrowRight"`, `"arrowUp"`, `"arrowDown"` |
+| `Ctrl+Mousewheel` (Win), `CMD+Mousewheel` (macOS)| 배율 값 증가/감소 | (`hotkeys` 매개변수 키에 직접 해당하지 않음) |
+
+**변경 로그**:
+
+- `hotkeys` 속성은 v6.1에서 추가되었습니다
+
+**관련 샘플**:
+
+- [Diagram Editor. API를 통해 hotkeys 추가, 수정 및 비활성화 관리하기](https://snippet.dhtmlx.com/8ads5dq8)
\ No newline at end of file
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/itemsdraggable_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/itemsdraggable_property.md
new file mode 100644
index 000000000..157c2c16c
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/itemsdraggable_property.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: itemsDraggable
+title: Editor의 itemsDraggable 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 itemsDraggable 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# itemsDraggable
+
+:::info
+이 속성은 org chart 및 mindmap 모드에서만 작동합니다. 이동한 항목은 모든 하위 항목과 함께 드래그됩니다.
+:::
+
+### 설명 {#description}
+
+@short: 선택 사항. 항목을 한 부모 항목에서 다른 부모 항목으로 드래그하는 기능을 활성화/비활성화합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+itemsDraggable?: boolean;
+~~~
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+itemsDraggable: true
+~~~
+
+### 예제 {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor(document.body, {
+ type: "org", // org" or "mindmap"
+ itemsDraggable: false
+});
+~~~
+
+**Change log**: v4.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/lineconfig_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/lineconfig_property.md
new file mode 100644
index 000000000..105eded93
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/lineconfig_property.md
@@ -0,0 +1,85 @@
+---
+sidebar_label: lineConfig
+title: lineConfig 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 lineConfig 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# lineConfig
+
+### 설명 {#description}
+
+@short: 선택 사항. 커넥터 라인의 기본 설정을 담은 객체입니다
+
+:::info
+`lineType`, `lineDirection`, `arrowsHidden` 설정은 editor를 통해 추가되는 새 커넥터 라인에 적용됩니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+lineConfig?: {
+ lineType?: "dash" | "line",
+ lineDirection?: "backArrow" | "forwardArrow",
+ arrowsHidden?: boolean,
+ lineGap?: number,
+ connectType?: "elbow" | "straight" | "curved" // "curved" 유형은 mindmap 모드에서만 사용됩니다
+};
+~~~
+
+### 매개변수 {#parameters}
+
+`lineConfig` 객체에는 다음 매개변수가 포함됩니다:
+
+- `lineType` - (선택 사항) 새 커넥터 라인의 기본 유형입니다. 라인 객체에 `"type"` 속성이 없는 경우 이 값이 적용됩니다
+- `lineDirection` - (선택 사항) 새 커넥터 라인의 방향입니다
+- `arrowsHidden` - (선택 사항) 새 커넥터 라인의 화살표를 숨길지 여부를 정의합니다
+- `lineGap` - (선택 사항) 커넥터 라인의 직각 꺾임까지의 거리를 설정합니다
+- `connectType` - (선택 사항) 라인의 연결 유형을 설정합니다: `"elbow"` | `"straight"` | `"curved"`(`"curved"` 유형은 mindmap Diagram 모드에서만 사용됨). 라인 객체에 `"connectType"` 속성이 없는 경우 이 값이 적용됩니다
+
+:::note
+`lineDirection`, `arrowsHidden`, `lineGap` 매개변수는 editor의 default 모드에서만 작동합니다(*type: `"default"`*)
+:::
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+lineConfig: {
+ lineType:"line",
+ lineDirection: "forwardArrow",
+ arrowsHidden: false,
+ lineGap: 10
+}
+~~~
+
+`connectType` 매개변수는 다음과 같은 기본값을 가집니다:
+
+- `"elbow"` - default 및 org chart 모드용
+- `"curved"` - mindmap 모드용(이 유형은 mindmap 모드에서만 사용됨)
+
+### 예제 {#example}
+
+~~~jsx {2-9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ lineConfig: {
+ lineType: "dash",
+ lineDirection: "backArrow",
+ arrowsHidden: true,
+ lineGap: 50,
+ connectType: "straight"
+ },
+ // 기타 설정 매개변수
+});
+~~~
+
+`lineGap` 속성을 적용한 결과는 아래 이미지에 표시되어 있습니다:
+
+
+
+**변경 로그**:
+
+- `connectType` 매개변수는 v6.1에서 추가되었습니다
+- `lineGap` 매개변수는 v5.0에서 추가되었습니다([마이그레이션 문서](migration.md#42---50) 참조)
+- v4.2에서 추가
+
+**관련 샘플**: [Diagram editor. 기본 라인(커넥터) 유형 설정하기. 도형 A와 도형 B를 연결해 보세요](https://snippet.dhtmlx.com/22abzn5m)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/magnetic_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/magnetic_property.md
new file mode 100644
index 000000000..8238e215e
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/magnetic_property.md
@@ -0,0 +1,68 @@
+---
+sidebar_label: magnetic
+title: Editor의 magnetic 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 magnetic 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+# magnetic
+
+:::info
+`magnetic` 속성은 editor의 `default` 모드(`type: "default"`)에서만 작동합니다
+:::
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. 도형을 이동할 때 스냅 라인을 표시할지 여부를 정의합니다. 표시하는 경우 스냅 라인의 모양을 구성할 수 있습니다
+
+:::tip
+스냅 라인은 이동 중인 도형의 중심 또는 최외곽 측면 좌표가 인근의 정적 도형의 중심 또는 최외곽 측면 좌표와 일치할 때 나타납니다
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+magnetic?: {
+ show?: boolean,
+ lineWidth?: number,
+ lineColor?: string
+} | boolean;
+~~~
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+magnetic: true
+~~~
+
+magnetic 모드는 다음과 같은 구성으로 활성화됩니다:
+
+~~~jsx
+magnetic: {
+ show: true,
+ lineWidth: 2,
+ lineColor: "#000"
+}
+~~~
+
+### 매개변수 {#parameters}
+
+객체인 경우 `magnetic` 속성에는 다음 매개변수를 포함할 수 있습니다:
+
+- `show` - (선택 사항) 도형을 이동할 때 스냅 라인을 활성화/비활성화합니다
+- `lineWidth` - (선택 사항) 스냅 라인의 너비입니다(기본값은 2)
+- `lineColor` - (선택 사항) 스냅 라인의 색상입니다(기본값은 *"#000"*)
+
+### 예제 {#example}
+
+~~~jsx {3-7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ magnetic: {
+ show: true,
+ lineWidth: 2,
+ lineColor: "#B0B8CD"
+ }
+});
+~~~
+
+**변경 로그**: `show` 매개변수는 v6.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/overview.md
new file mode 100644
index 000000000..d01c1d5d5
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/overview.md
@@ -0,0 +1,26 @@
+---
+sidebar_label: Editor 속성
+title: Editor 속성 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editor 속성을 살펴볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+# Editor 속성 개요 {#editor-properties-overview}
+
+| 이름 | 설명 |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------ |
+| [](api/diagram_editor/editor/config/autoplacement_property.md) | @getshort(api/diagram_editor/editor/config/autoplacement_property.md) |
+| [](api/diagram_editor/editor/config/connectionpoints_property.md) | @getshort(api/diagram_editor/editor/config/connectionpoints_property.md) |
+| [](api/diagram_editor/editor/config/defaults_property.md) | @getshort(api/diagram_editor/editor/config/defaults_property.md) |
+| [](api/diagram_editor/editor/config/editmode_property.md) | @getshort(api/diagram_editor/editor/config/editmode_property.md) |
+| [](api/diagram_editor/editor/config/grid_property.md) | @getshort(api/diagram_editor/editor/config/grid_property.md) |
+| [](api/diagram_editor/editor/config/gridstep_property.md) | @getshort(api/diagram_editor/editor/config/gridstep_property.md) |
+| [](api/diagram_editor/editor/config/hotkeys_property.md) | @getshort(api/diagram_editor/editor/config/hotkeys_property.md) |
+| [](api/diagram_editor/editor/config/itemsdraggable_property.md) | @getshort(api/diagram_editor/editor/config/itemsdraggable_property.md) |
+| [](api/diagram_editor/editor/config/lineconfig_property.md) | @getshort(api/diagram_editor/editor/config/lineconfig_property.md) |
+| [](api/diagram_editor/editor/config/magnetic_property.md) | @getshort(api/diagram_editor/editor/config/magnetic_property.md) |
+| [](api/diagram_editor/editor/config/resizepoints_property.md) | @getshort(api/diagram_editor/editor/config/resizepoints_property.md) |
+| [](api/diagram_editor/editor/config/scale_property.md) | @getshort(api/diagram_editor/editor/config/scale_property.md) |
+| [](api/diagram_editor/editor/config/shapetoolbar_property.md) | @getshort(api/diagram_editor/editor/config/shapetoolbar_property.md) |
+| [](api/diagram_editor/editor/config/shapetype_property.md) | @getshort(api/diagram_editor/editor/config/shapetype_property.md) |
+| [](api/diagram_editor/editor/config/type_property.md) | @getshort(api/diagram_editor/editor/config/type_property.md) |
+| [](api/diagram_editor/editor/config/view_property.md) | @getshort(api/diagram_editor/editor/config/view_property.md) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/resizepoints_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/resizepoints_property.md
new file mode 100644
index 000000000..ae458a5a8
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/resizepoints_property.md
@@ -0,0 +1,35 @@
+---
+sidebar_label: resizePoints
+title: Editor의 resizePoints 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 resizePoints 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+# resizePoints
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. 크기 조정 컨트롤을 사용하여 도형의 크기를 조정하는 기능을 활성화/비활성화합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+resizePoints?: boolean;
+~~~
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+resizePoints: true
+~~~
+
+### 예제 {#example}
+
+~~~jsx {3}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default", // "org" | "mindmap" | "default"
+ resizePoints: false, // 기본값: true
+ // 기타 설정
+});
+~~~
+
+**변경 로그**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/scale_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/scale_property.md
new file mode 100644
index 000000000..5898d9221
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/scale_property.md
@@ -0,0 +1,31 @@
+---
+sidebar_label: scale
+title: Editor의 scale 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 scale 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+# scale
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. diagram editor의 배율을 정의합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+scale?: number;
+~~~
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+scale: 1
+~~~
+
+### 예제 {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ scale: 0.9
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetoolbar_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetoolbar_property.md
new file mode 100644
index 000000000..ad4147044
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetoolbar_property.md
@@ -0,0 +1,89 @@
+---
+sidebar_label: shapeToolbar
+title: Editor의 shapeToolbar 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 shapeToolbar 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+# shapeToolbar
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. diagram 항목의 개인 툴바에 표시할 컨트롤을 정의합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+shapeToolbar?: boolean | array;
+~~~
+
+### 매개변수 {#parameters}
+
+배열인 경우 `shapeToolbar` 속성에는 다음이 포함될 수 있습니다:
+
+- *boolean* 값 - 기본 툴바를 표시하거나 숨깁니다
+- 툴바 컨트롤의 이름을 나타내는 문자열 값입니다. 배열에 값이 배치된 순서에 따라 툴바에 표시되는 컨트롤의 순서가 결정됩니다. 사용 가능한 값은 다음과 같습니다:
+ - default 모드: `"copy"` | `"connect"` | `"remove"` | `"addRowLast"` | `"addColumnLast"`
+ - org chart 모드: `"add"` | `"horizontal"` | `"vertical"` | `"remove"`
+ - mindmap 모드: `"add"` | `"addLeft"` | `"addRight"` | `"remove"`
+- 아이콘 객체 집합입니다. 각 아이콘 객체는 다음 속성을 가질 수 있습니다:
+ - `id: string` - (필수) 아이콘의 id입니다. 새 컨트롤의 id로 기본 툴바 컨트롤 이름을 사용하는 것은 금지되어 있습니다
+ - `content: string` - (필수) 아이콘의 콘텐츠입니다. 아이콘 클래스 이름을 가진 HTML 요소를 포함할 수 있습니다
+ - `check: function` - (선택 사항) 아이콘을 도형에 적용해야 하는지 확인합니다. 이 함수는 도형 객체를 인수로 받으며, 아이콘이 해당 도형에 렌더링될 경우 *true*를 반환합니다
+ - `css: function` - (선택 사항) 도형에 적용해야 하는 CSS 클래스 이름을 반환하는 함수입니다
+ - `tooltip: string` - (선택 사항) 아이콘 위에 마우스를 올렸을 때 나타나는 툴팁입니다
+
+### 예제 {#example}
+
+~~~jsx title="속성을 boolean 값으로 설정하기"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ shapeToolbar: false, // 기본값: true
+});
+~~~
+
+~~~jsx title="속성을 아이콘 이름 또는 아이콘 객체의 배열로 설정하기"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ shapeToolbar: [
+ "add",
+ // 사용자 지정 "download" 컨트롤 추가
+ {
+ id: "download",
+ content: "",
+ tooltip: "Download to PDF"
+ },
+ {
+ id: "remove",
+ content: "",
+ check: item => item.parent,
+ css: () => "dhx_diagram_toolbar__icon--remove",
+ tooltip: "Remove"
+ }
+ ]
+});
+~~~
+
+### 특정 항목에 대한 기본 툴바 재정의 {#redefining-the-default-toolbar-for-certain-items}
+
+일부 항목에는 특정 툴바 컨트롤을 제공하고 다른 항목에는 기본 컨트롤을 사용해야 할 수도 있습니다. 이 경우 `shapeToolbar` 배열에 *true* 값을 지정하여 기본 툴바를 활성화하고, 아이콘이 적용될 도형을 정의하는 check 함수가 포함된 필요한 아이콘 객체를 추가해야 합니다.
+
+~~~jsx title="start 유형 항목에 download 아이콘 설정하기"
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeToolbar:
+ [
+ true,
+ {
+ id: "download",
+ content: "",
+ tooltip: "Download to PDF",
+ check: item => item.type === "start"
+ }
+ ]
+});
+~~~
+
+**변경 로그:** 아이콘 객체의 `tooltip` 매개변수는 v5.0에서 추가되었습니다
+
+**관련 문서**: [그리드 영역](guides/diagram_editor/grid_area.md#configuring-the-toolbar-of-an-item)
+
+**관련 샘플**: [Diagram Editor. 조직도 모드. 도형 툴바 구성](https://snippet.dhtmlx.com/b2agwets)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetype_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetype_property.md
new file mode 100644
index 000000000..dd96b35c5
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetype_property.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: shapeType
+title: Editor의 shapeType 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 shapeType 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 확인해 보세요. DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+# shapeType
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. 항목의 유형입니다
+
+shape 객체에 `"type"` 속성이 없는 경우 이 값이 적용됩니다
+
+### 사용법 {#usage}
+
+~~~jsx
+shapeType?: string;
+~~~
+
+### 기본 설정 {#default-config}
+
+Editor의 기본 모드(type: `"default"`)에서:
+
+~~~jsx
+shapeType: "rectangle"
+~~~
+
+Editor의 조직도 모드(type: `"card"`)에서:
+
+~~~jsx
+shapeType: "card"
+~~~
+
+Editor의 마인드맵 모드(type: `"topic"`)에서:
+
+~~~jsx
+shapeType: "topic"
+~~~
+
+### 예제 {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeType: "circle"
+});
+~~~
+
+**관련 문서**: [기본 도형](shapes/default_shapes.md)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/type_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/type_property.md
new file mode 100644
index 000000000..5ecf20fbb
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/type_property.md
@@ -0,0 +1,39 @@
+---
+sidebar_label: type
+title: Editor의 type 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 type 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 확인해 보세요. DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+# type
+
+### 설명 {#description}
+
+@short: 필수 항목입니다. Diagram Editor의 모드를 지정합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+type?: "default" | "org" | "mindmap";
+~~~
+
+### 세부 정보 {#details}
+
+Diagram Editor는 세 가지 모드 중 하나로 초기화할 수 있습니다:
+
+- `type:"default"`는 일부 엔티티 간의 관계를 시각화하는 데 사용됩니다
+
+
+
+- `type:"org"`는 계층 구조로 관계를 표현하여 그룹 내 사람들의 구조를 보여주는 데 사용됩니다
+
+
+
+- `type:"mindmap"`는 관련 아이디어로 둘러싸인 주요 개념을 표현하여 특정 주제에 대한 정보를 정리하는 데 사용됩니다
+
+
+
+**관련 문서**:
+
+- [개요](editor_overview.md)
+- [Diagram Editor 시작하기](guides/diagram_editor/initialization.md)
+
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/view_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/view_property.md
new file mode 100644
index 000000000..b9abb5d4d
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/view_property.md
@@ -0,0 +1,58 @@
+---
+sidebar_label: view
+title: Editor의 view 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 view 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 확인해 보세요. DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+# view
+
+### 설명 {#description}
+
+@short: Diagram Editor의 Toolbar, Shapebar, Editbar 뷰를 구성하는 객체입니다
+
+### 사용법 {#usage}
+
+~~~jsx
+view: {
+ toolbar?: boolean | object,
+ shapebar?: boolean | object,
+ editbar?: boolean | object
+};
+~~~
+
+### 매개변수 {#parameters}
+
+- `toolbar` - (선택 사항) `Toolbar`를 표시/숨기거나(*boolean*인 경우), 모양을 구성합니다(*object*인 경우). Toolbar 구성에 대한 자세한 내용은 [Toolbar API](api/diagram_editor/toolbar/api_overview.md) 섹션을 참고하세요
+- `shapebar` - (선택 사항) `Shapebar`를 표시/숨기거나(*boolean*인 경우), 모양을 구성합니다(*object*인 경우). Shapebar 구성에 대한 자세한 내용은 [Shapebar API](api/diagram_editor/shapebar/api_overview.md) 섹션을 참고하세요
+- `editbar` - (선택 사항) `Editbar`를 표시/숨기거나(*boolean*인 경우), 모양을 구성합니다(*object*인 경우). Editbar 구성에 대한 자세한 내용은 [Editbar API](api/diagram_editor/editbar/api_overview.md) 섹션을 참고하세요
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+view: {
+ toolbar: true,
+ shapebar: true,
+ editbar: true
+}
+~~~
+
+### 예제 {#example}
+
+~~~jsx {3-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: {
+ css: "toolbar_custom",
+ data: ["file", "separator", "scale"]
+ },
+ shapebar: {
+ width: 400
+ },
+ editbar: false
+ }
+ // 기타 설정
+});
+~~~
+
+**변경 로그**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftergroupmove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftergroupmove_event.md
new file mode 100644
index 000000000..eb535ac43
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftergroupmove_event.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: afterGroupMove
+title: Editor의 afterGroupMove 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 afterGroupMove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 확인해 보세요. DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+# afterGroupMove
+
+### 설명 {#description}
+
+@short: 그룹 또는 스윔레인이 그리드 한 칸만큼 이동할 때 발생합니다
+
+:::note
+선택된 요소의 개수와 관계없이 이벤트는 대상 요소에 대해서만 발생합니다. 드래그된 요소의 id는 콜백 함수의 `batch` 매개변수에 제공됩니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+"afterGroupMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트 콜백은 다음 매개변수를 포함하는 객체와 함께 호출됩니다:
+
+ - `id` - 항목의 id
+ - `batch` - 이동된 요소들의 id 배열
+ - `coords` - 이동 후 그룹 또는 스윔레인 위치의 `x`, `y` 좌표를 포함하는 객체이며, 여기서:
+ - `x` - 왼쪽에서 오른쪽으로 이동하는 그룹/스윔레인의 수평 위치
+ - `y` - 위에서 아래로 이동하는 그룹/스윔레인의 수직 위치
+ - `event` - 이벤트 객체
+
+:::info
+Diagram Editor 내부 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-13}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("afterGroupMove", ({ id, coords }) => {
+ console.log(`
+ Group ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**변경 로그**:
+
+- `batch` 매개변수는 v6.0에서 추가되었습니다
+- 콜백 함수는 v6.0부터 매개변수로 객체를 받습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemcatch_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemcatch_event.md
new file mode 100644
index 000000000..c76256ec1
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemcatch_event.md
@@ -0,0 +1,56 @@
+---
+sidebar_label: afterItemCatch
+title: Editor의 afterItemCatch 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 afterItemCatch 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 확인해 보세요. DHTMLX Diagram의 무료 30일 평가판을 다운로드할 수 있습니다.
+---
+
+# afterItemCatch
+
+### 설명 {#description}
+
+@short: 항목이 캡처된 후 발생합니다
+
+:::info
+이 이벤트는 Diagram의 **조직도** 및 `mindmap` 모드에서만 작동하며, `itemsDraggable` 속성이 `true`로 설정되어 있어야 합니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+"afterItemCatch": ({
+ id: string | number,
+ targetId: string | number,
+ batch: (string | number)[],
+ event: PointerEvent
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트 콜백은 다음 매개변수를 포함하는 객체와 함께 호출됩니다:
+
+ - `id` - 이동된 항목의 id
+ - `targetId` - 대상 항목의 id
+ - `batch` - 이동된 요소들의 id 배열
+ - `event` - 이벤트 객체
+
+### 예제 {#example}
+
+~~~jsx {6-11}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("afterItemCatch", ({ id, targetId }) => {
+ console.log(`
+ item ${id} is caught by the item ${targetId}
+ `);
+});
+~~~
+
+**변경 로그**:
+
+- `batch` 매개변수는 v6.0에서 추가되었습니다
+- 콜백 함수는 v6.0부터 매개변수로 객체를 받습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemmove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemmove_event.md
new file mode 100644
index 000000000..1b5055aeb
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemmove_event.md
@@ -0,0 +1,75 @@
+---
+sidebar_label: afterItemMove
+title: Editor의 afterItemMove 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 afterItemMove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하십시오.
+---
+
+# afterItemMove
+
+### 설명 {#description}
+
+@short: 항목이 그리드 한 칸만큼 이동했을 때 발생합니다.
+
+:::note
+이 이벤트는 `line` 객체에서는 작동하지 않습니다.
+
+선택된 요소의 개수와 관계없이 이벤트는 대상 요소에 대해서만 발생합니다. 드래그된 요소의 id는 콜백 함수의 `batch` 매개변수에 제공됩니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+"afterItemMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 포함된 객체와 함께 호출됩니다:
+
+- `id` - 항목의 id
+- `batch` - 이동된 요소들의 id 배열
+- `coords` - 이동 후 항목 위치의 `x` 및 `y` 좌표가 포함된 객체이며, 여기서:
+ - `x` - 왼쪽에서 오른쪽으로 이동하는 항목의 수평 위치
+ - `y` - 위에서 아래로 이동하는 항목의 수직 위치
+- `event` - 이벤트 객체
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-13}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("afterItemMove", ({ id, coords }) => {
+ console.log(`
+ Item ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**변경 로그**:
+
+- `batch` 매개변수는 v6.0에서 추가되었습니다
+- v6.0부터 콜백 함수는 매개변수로 객체를 받습니다
+
+**관련 API**:
+
+- [`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md)
+- [`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md)
+
+**관련 샘플**:
+
+- [Diagram Editor. 이벤트를 통한 도형 이동, 회전 및 크기 조정 관리](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemresize_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemresize_event.md
new file mode 100644
index 000000000..d80fef1ab
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemresize_event.md
@@ -0,0 +1,74 @@
+---
+sidebar_label: afterItemResize
+title: Editor의 afterItemResize 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 afterItemResize 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하십시오.
+---
+
+# afterItemResize
+
+### 설명 {#description}
+
+@short: 항목의 크기가 변경된 후 발생합니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+"afterItemResize": ({
+ id: string | number,
+ width: number,
+ height: number,
+ x: number,
+ y: number,
+ dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "ne"
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 포함된 객체와 함께 호출됩니다:
+
+- `id` - 크기가 조정된 항목의 id
+- `width` - 항목의 새 너비
+- `height` - 항목의 새 높이
+- `x` - 항목의 새 X좌표
+- `y` - 항목의 새 Y좌표
+- `dir` - 크기 조정 작업의 방향:
+ - `"n"` - 북쪽
+ - `"ne"` - 북동쪽
+ - `"e"` - 동쪽
+ - `"se"` - 남동쪽
+ - `"s"` - 남쪽
+ - `"sw"` - 남서쪽
+ - `"w"` - 서쪽
+ - `"nw"` - 북서쪽
+
+### 예제 {#example}
+
+~~~jsx
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("afterItemResize", ({ id, width, height }) => {
+ console.log(`
+ The item ${id} has been resized:
+ width: ${width}
+ height: ${height}
+ `);
+});
+~~~
+
+**변경 로그**:
+
+- 이 이벤트는 v6.1에서 추가되었습니다
+
+**관련 API**:
+
+- [`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md)
+- [`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md)
+
+**관련 샘플**:
+
+- [Diagram Editor. 이벤트를 통한 도형 이동, 회전 및 크기 조정 관리](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemrotate_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemrotate_event.md
new file mode 100644
index 000000000..8b578482f
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemrotate_event.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: afterItemRotate
+title: Editor의 afterItemRotate 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 afterItemRotate 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하십시오.
+---
+
+# afterItemRotate
+
+### 설명 {#description}
+
+@short: 항목이 회전한 후 발생합니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+"afterItemRotate": ({
+ id: string | number,
+ angle: number
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 포함된 객체와 함께 호출됩니다:
+
+- `id` - 회전된 항목의 id
+- `angle` - 항목의 새 회전 각도(도 단위)
+
+### 예제 {#example}
+
+~~~jsx
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("afterItemRotate", ({ id, angle }) => {
+ console.log(`The item ${id} has been rotated by the angle: ${angle}`);
+});
+~~~
+
+**변경 로그**:
+
+- 이 이벤트는 v6.1에서 추가되었습니다
+
+**관련 API**:
+
+- [`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md)
+- [`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md)
+
+**관련 샘플**:
+
+- [Diagram Editor. 이벤트를 통한 도형 이동, 회전 및 크기 조정 관리](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afterlinetitlemove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afterlinetitlemove_event.md
new file mode 100644
index 000000000..b1e6c79f3
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afterlinetitlemove_event.md
@@ -0,0 +1,57 @@
+---
+sidebar_label: afterLineTitleMove
+title: Editor의 afterLineTitleMove 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 afterLineTitleMove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하십시오.
+---
+
+# afterLineTitleMove
+
+### 설명 {#description}
+
+@short: 라인의 텍스트 요소가 그리드 한 칸만큼 이동했을 때 발생합니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+"afterLineTitleMove": ({
+ event: PointerEvent,
+ lineId: string | number,
+ titleId: string | number,
+ coords: object
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 포함된 객체와 함께 호출됩니다:
+
+ - `event` - 이벤트 객체
+ - `lineId` - 라인의 id
+ - `titleId` - 라인의 텍스트 요소 id
+ - `coords` - 이동 후 텍스트 요소 위치의 `x` 및 `y` 좌표가 포함된 객체이며, 여기서:
+ - `x` - 왼쪽에서 오른쪽으로 이동하는 텍스트 요소의 수평 위치
+ - `y` - 위에서 아래로 이동하는 텍스트 요소의 수직 위치
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-13}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("afterLineTitleMove", ({ titleId, coords }) => {
+ console.log(`
+ LineTitle ${titleId} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**변경 로그**: v6.0부터 콜백 함수는 매개변수로 객체를 받습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapeiconclick_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapeiconclick_event.md
new file mode 100644
index 000000000..987b9d7a8
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapeiconclick_event.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: afterShapeIconClick
+title: Editor의 afterShapeIconClick 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 afterShapeIconClick 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하십시오.
+---
+
+# afterShapeIconClick
+
+### 설명 {#description}
+
+@short: 항목별 툴바의 컨트롤을 클릭한 후 발생합니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+"afterShapeIconClick": (
+ iconId: string,
+ shape: object
+) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수와 함께 호출됩니다:
+
+- `iconId` - 툴바 컨트롤의 유형 또는 id
+- `shape` - 항목 구성이 포함된 객체
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-11}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("afterShapeIconClick", (iconId, shape) => {
+ console.log(`
+ You've clicked the ${iconId} toolbar control of the shape ${shape.id}
+ `);
+});
+~~~
+
+**변경 로그**: v3.1에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapemove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapemove_event.md
new file mode 100644
index 000000000..9aa4a123b
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapemove_event.md
@@ -0,0 +1,65 @@
+---
+sidebar_label: afterShapeMove
+title: Editor의 afterShapeMove 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editor의 afterShapeMove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# afterShapeMove
+
+### 설명 {#description}
+
+@short: 도형이 그리드 한 칸만큼 이동할 때 발생합니다
+
+:::note
+선택한 요소의 개수와 상관없이 이벤트는 대상 요소에 대해서만 발생합니다. 드래그된 요소의 id는 콜백 함수의 `batch` 매개변수에 제공됩니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+"afterShapeMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent,
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 포함된 객체와 함께 호출됩니다:
+
+ - `id` - 도형의 id
+ - `batch` - 이동된 요소들의 id 배열
+ - `coords` - 이동 후 도형 위치의 `x` 및 `y` 좌표가 포함된 객체이며, 여기서:
+ - `x` - 도형의 수평 위치(왼쪽에서 오른쪽으로 이동)
+ - `y` - 도형의 수직 위치(위에서 아래로 이동)
+ - `event` - 이벤트 객체
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-13}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("afterShapeMove", ({ id, coords }) => {
+ console.log(`
+ Shape ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**변경 로그**:
+
+- `batch` 매개변수는 v6.0에서 추가되었습니다.
+- 콜백 함수는 v6.0부터 매개변수로 객체를 받습니다.
+- `id` 및 `coords` 매개변수는 v4.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforegroupmove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforegroupmove_event.md
new file mode 100644
index 000000000..8051b6e4a
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforegroupmove_event.md
@@ -0,0 +1,69 @@
+---
+sidebar_label: beforeGroupMove
+title: Editor의 beforeGroupMove 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editor의 beforeGroupMove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# beforeGroupMove
+
+### 설명 {#description}
+
+@short: 그룹 또는 스윔레인이 이동되기 전에 발생합니다
+
+:::note
+선택한 요소의 개수와 상관없이 이벤트는 대상 요소에 대해서만 발생합니다. 드래그된 요소의 id는 콜백 함수의 `batch` 매개변수에 제공됩니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+"beforeGroupMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 포함된 객체와 함께 호출됩니다:
+
+ - `id` - 항목의 id
+ - `batch` - 이동된 요소들의 id 배열
+ - `coords` - 이동 전 그룹 또는 스윔레인 위치의 `x` 및 `y` 좌표가 포함된 객체이며, 여기서:
+ - `x` - 그룹/스윔레인의 수평 위치(왼쪽에서 오른쪽으로 이동)
+ - `y` - 그룹/스윔레인의 수직 위치(위에서 아래로 이동)
+ - `event` - 이벤트 객체
+
+### 반환값 {#returns}
+
+콜백은 그룹 또는 스윔레인의 이동을 막으려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-14}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("beforeGroupMove", ({ id, coords }) => {
+ console.log(`
+ Group ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+ return true;
+});
+~~~
+
+**변경 로그**:
+
+- `batch` 매개변수는 v6.0에서 추가되었습니다.
+- 콜백 함수는 v6.0부터 매개변수로 객체를 받습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemcatch_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemcatch_event.md
new file mode 100644
index 000000000..4fd0a4bca
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemcatch_event.md
@@ -0,0 +1,73 @@
+---
+sidebar_label: beforeItemCatch
+title: Editor의 beforeItemCatch 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editor의 beforeItemCatch 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# beforeItemCatch
+
+### 설명 {#description}
+
+@short: 항목이 캐치되기 전에 발생합니다
+
+:::info
+이 이벤트는 Diagram의 **org chart** 및 `mindmap` 모드에서만 작동하며, `itemsDraggable` 속성이 `true`로 설정되어 있어야 합니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+"beforeItemCatch": ({
+ id: string | number,
+ targetId: string | number,
+ batch: (string | number)[],
+ event: PointerEvent
+}) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 포함된 객체와 함께 호출됩니다:
+
+ - `id` - 이동된 항목의 id
+ - `targetId` - 대상 항목의 id
+ - `batch` - 이동된 요소들의 id 배열
+ - `event` - 이벤트 객체
+
+### 반환값 {#returns}
+
+콜백은 항목이 캐치되지 않도록 하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-20}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("beforeItemCatch", ({ id, targetId }) => {
+ if (targetId === "2.1"){
+ console.log(`
+ Item ${id} won't be be caught by the item "2.1"
+ `);
+ return false;
+ }
+ else{
+ console.log(`
+ Item ${id} will be caught by the item ${targetId}
+ `);
+ return true;
+ }
+});
+~~~
+
+**변경 로그**:
+
+- `batch` 매개변수는 v6.0에서 추가되었습니다.
+- 콜백 함수는 v6.0부터 매개변수로 객체를 받습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemmove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemmove_event.md
new file mode 100644
index 000000000..48ba08554
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemmove_event.md
@@ -0,0 +1,80 @@
+---
+sidebar_label: beforeItemMove
+title: Editor의 beforeItemMove 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editor의 beforeItemMove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# beforeItemMove
+
+### 설명 {#description}
+
+@short: 항목이 이동되기 전에 발생합니다
+
+:::note
+이 이벤트는 `line` 객체에서는 작동하지 않습니다.
+
+선택한 요소의 개수와 상관없이 이벤트는 대상 요소에 대해서만 발생합니다. 드래그된 요소의 id는 콜백 함수의 `batch` 매개변수에 제공됩니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+"beforeItemMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent,
+}) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 포함된 객체와 함께 호출됩니다:
+
+ - `id` - 항목의 id
+ - `batch` - 이동된 요소들의 id 배열
+ - `coords` - 이동 전 항목 위치의 `x` 및 `y` 좌표가 포함된 객체이며, 여기서:
+ - `x` - 항목의 수평 위치(왼쪽에서 오른쪽으로 이동)
+ - `y` - 항목의 수직 위치(위에서 아래로 이동)
+ - `event` - 이벤트 객체
+
+### 반환값 {#returns}
+
+콜백은 항목의 이동을 막으려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-14}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("beforeItemMove", ({ id, coords }) => {
+ console.log(`
+ Item ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+ return true;
+});
+~~~
+
+**변경 로그**:
+
+- `batch` 매개변수는 v6.0에서 추가되었습니다.
+- 콜백 함수는 v6.0부터 매개변수로 객체를 받습니다.
+
+**관련 API**:
+
+- [`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md)
+- [`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md)
+
+**관련 샘플**:
+
+- [Diagram Editor. 이벤트를 통한 도형의 이동, 회전, 크기 조정 관리](https://snippet.dhtmlx.com/qldjbbm7)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemresize_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemresize_event.md
new file mode 100644
index 000000000..8ac3bdb54
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemresize_event.md
@@ -0,0 +1,78 @@
+---
+sidebar_label: beforeItemResize
+title: Editor의 beforeItemResize 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editor의 beforeItemResize 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# beforeItemResize
+
+### 설명 {#description}
+
+@short: 항목의 크기가 변경되기 전에 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"beforeItemResize": ({
+ id: string | number,
+ width: number,
+ height: number,
+ x: number,
+ y: number,
+ dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "ne"
+}) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 포함된 객체와 함께 호출됩니다:
+
+- `id` - 크기가 조정되는 항목의 id
+- `width` - 항목의 새 너비
+- `height` - 항목의 새 높이
+- `x` - 항목의 새 X좌표
+- `y` - 항목의 새 Y좌표
+- `dir` - 크기 조정 작업의 방향:
+ - `"n"` - 북쪽
+ - `"ne"` - 북동쪽
+ - `"e"` - 동쪽
+ - `"se"` - 남동쪽
+ - `"s"` - 남쪽
+ - `"sw"` - 남서쪽
+ - `"w"` - 서쪽
+ - `"nw"` - 북서쪽
+
+### 반환값 {#returns}
+
+콜백은 항목의 크기 조정을 막으려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다.
+
+### 예제 {#example}
+
+~~~jsx
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("beforeItemResize", ({ id, width, height }) => {
+ if (width < 50 || height < 50) {
+ console.log(`Preventing resize of item ${id} because it's too small.`);
+ return false; // 크기 조정 방지
+ }
+ console.log(`Resizing the item ${id} to the width: ${width}, height: ${height}`);
+});
+~~~
+
+**변경 로그**:
+
+- 이 이벤트는 v6.1에서 추가되었습니다.
+
+**관련 API**:
+
+- [`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md)
+- [`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md)
+
+**관련 샘플**:
+
+- [Diagram Editor. 이벤트를 통한 도형의 이동, 회전, 크기 조정 관리](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemrotate_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemrotate_event.md
new file mode 100644
index 000000000..73babfeba
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemrotate_event.md
@@ -0,0 +1,62 @@
+---
+sidebar_label: beforeItemRotate
+title: Editor의 beforeItemRotate 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 beforeItemRotate 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# beforeItemRotate
+
+### 설명 {#description}
+
+@short: 항목이 회전되기 전에 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"beforeItemRotate": ({
+ id: string | number,
+ angle: number
+}) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 있는 객체와 함께 호출됩니다:
+
+- `id` - 회전되는 항목의 id
+- `angle` - 항목의 새로운 회전 각도(도 단위)
+
+### 반환값 {#returns}
+
+콜백은 항목이 회전되지 않도록 하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다.
+
+### 예제 {#example}
+
+~~~jsx
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("beforeItemRotate", ({ id, angle }) => {
+ if (angle > 90 && angle < 270) {
+ console.log(`Preventing rotation of the item ${id} by this angle.`);
+ return false; // Prevent rotation
+ }
+ console.log(`Rotating the item ${id} by the angle: ${angle}`);
+});
+~~~
+
+**변경 로그**:
+
+- 이 이벤트는 v6.1에서 추가되었습니다
+
+**관련 API**:
+
+- [`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md)
+- [`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md)
+
+**관련 샘플**:
+
+- [Diagram Editor. 이벤트를 통한 도형의 이동, 회전, 크기 조정 관리](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforelinetitlemove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforelinetitlemove_event.md
new file mode 100644
index 000000000..603a065ae
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforelinetitlemove_event.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: beforeLineTitleMove
+title: Editor의 beforeLineTitleMove 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 beforeLineTitleMove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# beforeLineTitleMove
+
+### 설명 {#description}
+
+@short: 라인의 텍스트 요소가 이동되기 전에 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"beforeLineTitleMove": ({
+ event: PointerEvent,
+ lineId: string | number,
+ titleId: string | number,
+ coords: obj
+}) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 있는 객체와 함께 호출됩니다:
+
+ - `event` - 이벤트 객체
+ - `lineId` - 라인의 id
+ - `titleId` - 라인의 텍스트 요소의 id
+ - `coords` - 이동 전 텍스트 요소 위치의 `x` 및 `y` 좌표가 있는 객체이며, 여기서:
+ - `x` - 왼쪽에서 오른쪽으로 이동하는 텍스트 요소의 수평 위치
+ - `y` - 위에서 아래로 이동하는 텍스트 요소의 수직 위치
+
+### 반환값 {#returns}
+
+콜백은 라인의 텍스트 요소가 이동되지 않도록 하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-14}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("beforeLineTitleMove", ({ titleId, coords }) => {
+ console.log(`
+ LineTitle ${titleId} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+ return true;
+});
+~~~
+
+**변경 로그**:
+
+- 콜백 함수는 v6.0부터 매개변수로 객체를 받습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapeiconclick_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapeiconclick_event.md
new file mode 100644
index 000000000..9ad114e12
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapeiconclick_event.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: beforeShapeIconClick
+title: Editor의 beforeShapeIconClick 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 beforeShapeIconClick 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# beforeShapeIconClick
+
+### 설명 {#description}
+
+@short: 항목별 툴바에서 컨트롤을 클릭하기 전에 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"beforeShapeIconClick": (
+ iconId: string,
+ shape: object
+) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수와 함께 호출됩니다:
+
+- `iconId` - 툴바 컨트롤의 유형 또는 id
+- `shape` - 항목 설정이 있는 객체
+
+### 반환값 {#returns}
+
+콜백은 툴바 컨트롤이 클릭되지 않도록 하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-12}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("beforeShapeIconClick", (iconId, shape) => {
+ console.log(`
+ You will click the ${iconId} toolbar control of the shape ${shape.id}
+ `);
+ return true;
+});
+~~~
+
+**변경 로그**: v3.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapemove_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapemove_event.md
new file mode 100644
index 000000000..cbf48e4a5
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapemove_event.md
@@ -0,0 +1,70 @@
+---
+sidebar_label: beforeShapeMove
+title: Editor의 beforeShapeMove 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 beforeShapeMove 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# beforeShapeMove
+
+### 설명 {#description}
+
+@short: 도형이 이동되기 전에 발생합니다
+
+:::note
+이 이벤트는 선택된 요소의 수와 관계없이 대상 요소에 대해서만 발생합니다. 드래그된 요소의 id는 콜백 함수의 `batch` 매개변수에서 제공됩니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+"beforeShapeMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 있는 객체와 함께 호출됩니다:
+
+ - `id` - 도형의 id
+ - `batch` - 이동된 요소들의 id 배열
+ - `coords` - 이동 전 도형 위치의 `x` 및 `y` 좌표가 있는 객체이며, 여기서:
+ - `x` - 왼쪽에서 오른쪽으로 이동하는 도형의 수평 위치
+ - `y` - 위에서 아래로 이동하는 도형의 수직 위치
+ - `event` - 이벤트 객체
+
+### 반환값 {#returns}
+
+콜백은 도형이 이동되지 않도록 하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-14}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("beforeShapeMove", ({ id, coords }) => {
+ console.log(`
+ Shape ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+ return true;
+});
+~~~
+
+**변경 로그**:
+
+- `batch` 매개변수는 v6.0에서 추가되었습니다
+- 콜백 함수는 v6.0부터 매개변수로 객체를 받습니다
+- `id` 및 `coords` 매개변수는 v4.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/groupmoveend_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/groupmoveend_event.md
new file mode 100644
index 000000000..3baee8083
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/groupmoveend_event.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: groupMoveEnd
+title: Editor의 groupMoveEnd 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 groupMoveEnd 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# groupMoveEnd
+
+### 설명 {#description}
+
+@short: 그룹 또는 스윔레인이 이동된 후에 발생합니다
+
+:::note
+이 이벤트는 선택된 요소의 수와 관계없이 대상 요소에 대해서만 발생합니다. 드래그된 요소의 id는 콜백 함수의 `batch` 매개변수에서 제공됩니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+"groupMoveEnd": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent,
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 있는 객체와 함께 호출됩니다:
+
+ - `id` - 항목의 id
+ - `batch` - 이동된 요소들의 id 배열
+ - `coords` - 이동 후 그룹 또는 스윔레인 위치의 `x` 및 `y` 좌표가 있는 객체이며, 여기서:
+ - `x` - 왼쪽에서 오른쪽으로 이동하는 그룹/스윔레인의 수평 위치
+ - `y` - 위에서 아래로 이동하는 그룹/스윔레인의 수직 위치
+ - `event` - 이벤트 객체
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-13}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("groupMoveEnd", ({ id, coords }) => {
+ console.log(`
+ Group ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**변경 로그**:
+
+- `batch` 매개변수는 v6.0에서 추가되었습니다
+- 콜백 함수는 v6.0부터 매개변수로 객체를 받습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemmoveend_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemmoveend_event.md
new file mode 100644
index 000000000..5162cc3c2
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemmoveend_event.md
@@ -0,0 +1,71 @@
+---
+sidebar_label: itemMoveEnd
+title: Editor의 itemMoveEnd 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 itemMoveEnd 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# itemMoveEnd
+
+### 설명 {#description}
+
+@short: 항목이 이동된 후에 발생합니다
+
+:::note
+이 이벤트는 `line` 객체에서는 작동하지 않습니다.
+
+선택된 요소의 개수와 관계없이 이 이벤트는 대상 요소에 대해서만 발생합니다. 드래그된 요소의 id는 콜백 함수의 `batch` 매개변수에 제공됩니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+"itemMoveEnd": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이 이벤트의 콜백은 다음 매개변수를 포함하는 객체와 함께 호출됩니다:
+
+ - `id` - 항목의 id
+ - `batch` - 이동된 요소들의 id 배열
+ - `coords` - 이동 후 항목 위치의 `x` 및 `y` 좌표를 포함하는 객체이며, 다음과 같습니다:
+ - `x` - 항목의 가로 위치(왼쪽에서 오른쪽으로 이동)
+ - `y` - 항목의 세로 위치(위에서 아래로 이동)
+ - `event` - 이벤트 객체
+
+### 예제 {#example}
+
+~~~jsx {6-13}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("itemMoveEnd", ({ id, coords }) => {
+ console.log(`
+ Item ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**변경 로그**:
+
+- `batch` 매개변수는 v6.0에서 추가되었습니다
+- 콜백 함수는 v6.0부터 매개변수로 객체를 받습니다
+
+**관련 API**:
+
+- [`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md)
+- [`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md)
+
+**관련 샘플**:
+
+- [Diagram Editor. 이벤트를 통한 도형의 이동, 회전, 크기 조정 관리](https://snippet.dhtmlx.com/qldjbbm7)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemresizeend_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemresizeend_event.md
new file mode 100644
index 000000000..af9a81923
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemresizeend_event.md
@@ -0,0 +1,76 @@
+---
+sidebar_label: itemResizeEnd
+title: Editor의 itemResizeEnd 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 itemResizeEnd 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# itemResizeEnd
+
+### 설명 {#description}
+
+@short: 항목의 크기 조정 작업이 완료된 후(사용자가 마우스 버튼을 놓을 때) 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"itemResizeEnd": ({
+ id: string | number,
+ width: number,
+ height: number,
+ x: number,
+ y: number,
+ dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "ne"
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이 이벤트의 콜백은 다음 매개변수를 포함하는 객체와 함께 호출됩니다:
+
+- `id` - 크기가 조정된 항목의 id
+- `width` - 항목의 최종 너비
+- `height` - 항목의 최종 높이
+- `x` - 항목의 최종 X 좌표
+- `y` - 항목의 최종 Y 좌표
+- `dir` - 크기 조정 작업의 방향:
+ - `"n"` - 북쪽
+ - `"ne"` - 북동쪽
+ - `"e"` - 동쪽
+ - `"se"` - 남동쪽
+ - `"s"` - 남쪽
+ - `"sw"` - 남서쪽
+ - `"w"` - 서쪽
+ - `"nw"` - 북서쪽
+
+
+### 예제 {#example}
+
+~~~jsx
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("itemResizeEnd", ({ id, width, height }) => {
+ console.log(`
+ The item ${id} finished resizing:
+ the final width: ${width}
+ the final height: ${height}
+ `);
+ // Here you can save the new dimensions of the item on the server
+});
+~~~
+
+**변경 로그**:
+
+- 이 이벤트는 v6.1에서 추가되었습니다
+
+**관련 API**:
+
+- [`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md)
+- [`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md)
+
+**관련 샘플**:
+
+- [Diagram Editor. 이벤트를 통한 도형의 이동, 회전, 크기 조정 관리](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemrotateend_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemrotateend_event.md
new file mode 100644
index 000000000..20ed12005
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemrotateend_event.md
@@ -0,0 +1,55 @@
+---
+sidebar_label: itemRotateEnd
+title: Editor의 itemRotateEnd 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 itemRotateEnd 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# itemRotateEnd
+
+### 설명 {#description}
+
+@short: 항목의 회전 작업이 완료된 후(사용자가 마우스 버튼을 놓을 때) 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"itemRotateEnd": ({
+ id: string | number,
+ angle: number
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이 이벤트의 콜백은 다음 매개변수를 포함하는 객체와 함께 호출됩니다:
+
+- `id` - 회전된 항목의 id
+- `angle` - 항목의 최종 회전 각도(도 단위)
+
+### 예제 {#example}
+
+~~~jsx
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("itemRotateEnd", ({ id, angle }) => {
+ console.log(`The item ${id} finished rotating, the final angle: ${angle}`);
+ // Here you can save the new rotation angle of the item on the server
+});
+~~~
+
+**변경 로그**:
+
+- 이 이벤트는 v6.1에서 추가되었습니다
+
+**관련 API**:
+
+- [`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md)
+- [`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md)
+
+**관련 샘플**:
+
+- [Diagram Editor. 이벤트를 통한 도형의 이동, 회전, 크기 조정 관리](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemtarget_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemtarget_event.md
new file mode 100644
index 000000000..86d62cb8c
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemtarget_event.md
@@ -0,0 +1,66 @@
+---
+sidebar_label: itemTarget
+title: Editor의 itemTarget 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 itemTarget 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# itemTarget
+
+### 설명 {#description}
+
+@short: 이동된 항목이 대상 항목 위에서 호버될 때 발생합니다
+
+:::info
+이 이벤트는 Diagram의 **org chart** 및 `mindmap` 모드에서만 작동하며, `itemsDraggable` 속성이 `true`로 설정되어 있어야 합니다.
+
+이 이벤트는 *이동된 항목의 부모 항목*과 *`giveItem: false` 속성을 가진 이동된 항목*에는 작동하지 않습니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+"itemTarget": ({
+ id: string | number,
+ targetId: string | number,
+ batch: (string | number)[],
+ event: PointerEvent
+}) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+이 이벤트의 콜백은 다음 매개변수를 포함하는 객체와 함께 호출됩니다:
+
+ - `id` - 이동된 항목의 id
+ - `targetId` - 대상 항목의 id
+ - `batch` - 이동된 요소들의 id 배열
+ - `event` - 이벤트 객체
+
+### 반환값 {#returns}
+
+콜백은 항목이 대상 항목 위에서 호버되는 것을 방지하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환합니다
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-11}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("itemTarget", ({ id, targetId }) => {
+ console.log(`
+ Item ${id} is hovering over the item ${targetId}
+ `);
+});
+~~~
+
+**변경 로그**:
+
+- `batch` 매개변수는 v6.0에서 추가되었습니다
+- 콜백 함수는 v6.0부터 매개변수로 객체를 받습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/linetitlemoveend_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/linetitlemoveend_event.md
new file mode 100644
index 000000000..c81b0cf15
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/linetitlemoveend_event.md
@@ -0,0 +1,57 @@
+---
+sidebar_label: lineTitleMoveEnd
+title: Editor의 lineTitleMoveEnd 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 lineTitleMoveEnd 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# lineTitleMoveEnd
+
+### 설명 {#description}
+
+@short: 라인의 텍스트 요소가 이동된 후에 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"lineTitleMoveEnd": ({
+ event: PointerEvent,
+ lineId: string | number,
+ titleId: string | number,
+ coords: obj
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이 이벤트의 콜백은 다음 매개변수를 포함하는 객체와 함께 호출됩니다:
+
+ - `event` - 이벤트 객체
+ - `lineId` - 라인의 id
+ - `titleId` - 라인의 텍스트 요소의 id
+ - `coords` - 이동 후 텍스트 요소 위치의 `x` 및 `y` 좌표를 포함하는 객체이며, 다음과 같습니다:
+ - `x` - 텍스트 요소의 가로 위치(왼쪽에서 오른쪽으로 이동)
+ - `y` - 텍스트 요소의 세로 위치(위에서 아래로 이동)
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-13}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("lineTitleMoveEnd", ({ titleId, coords }) => {
+ console.log(`
+ LineTitle ${titleId} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**변경 로그**: 콜백 함수는 v6.0부터 매개변수로 객체를 받습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/overview.md
new file mode 100644
index 000000000..964ed3ddf
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/overview.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: 에디터 이벤트
+title: 에디터 이벤트 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# 에디터 이벤트 개요 {#editor-events-overview}
+
+| Name | 설명 |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------- |
+| [](api/diagram_editor/editor/events/aftergroupmove_event.md) | @getshort(api/diagram_editor/editor/events/aftergroupmove_event.md) |
+| [](api/diagram_editor/editor/events/afteritemcatch_event.md) | @getshort(api/diagram_editor/editor/events/afteritemcatch_event.md) |
+| [](api/diagram_editor/editor/events/afteritemmove_event.md) | @getshort(api/diagram_editor/editor/events/afteritemmove_event.md) |
+| [](api/diagram_editor/editor/events/afteritemresize_event.md) | @getshort(api/diagram_editor/editor/events/afteritemresize_event.md) |
+| [](api/diagram_editor/editor/events/afteritemrotate_event.md) | @getshort(api/diagram_editor/editor/events/afteritemrotate_event.md) |
+| [](api/diagram_editor/editor/events/afterlinetitlemove_event.md) | @getshort(api/diagram_editor/editor/events/afterlinetitlemove_event.md) |
+| [](api/diagram_editor/editor/events/aftershapeiconclick_event.md) | @getshort(api/diagram_editor/editor/events/aftershapeiconclick_event.md) |
+| [](api/diagram_editor/editor/events/aftershapemove_event.md) | @getshort(api/diagram_editor/editor/events/aftershapemove_event.md) |
+| [](api/diagram_editor/editor/events/beforegroupmove_event.md) | @getshort(api/diagram_editor/editor/events/beforegroupmove_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemcatch_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemcatch_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemmove_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemmove_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemresize_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemresize_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemrotate_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemrotate_event.md) |
+| [](api/diagram_editor/editor/events/beforelinetitlemove_event.md) | @getshort(api/diagram_editor/editor/events/beforelinetitlemove_event.md) |
+| [](api/diagram_editor/editor/events/beforeshapeiconclick_event.md)| @getshort(api/diagram_editor/editor/events/beforeshapeiconclick_event.md) |
+| [](api/diagram_editor/editor/events/beforeshapemove_event.md) | @getshort(api/diagram_editor/editor/events/beforeshapemove_event.md) |
+| [](api/diagram_editor/editor/events/groupmoveend_event.md) | @getshort(api/diagram_editor/editor/events/groupmoveend_event.md) |
+| [](api/diagram_editor/editor/events/itemmoveend_event.md) | @getshort(api/diagram_editor/editor/events/itemmoveend_event.md) |
+| [](api/diagram_editor/editor/events/itemresizeend_event.md) | @getshort(api/diagram_editor/editor/events/itemresizeend_event.md) |
+| [](api/diagram_editor/editor/events/itemrotateend_event.md) | @getshort(api/diagram_editor/editor/events/itemrotateend_event.md) |
+| [](api/diagram_editor/editor/events/itemtarget_event.md) | @getshort(api/diagram_editor/editor/events/itemtarget_event.md) |
+| [](api/diagram_editor/editor/events/linetitlemoveend_event.md) | @getshort(api/diagram_editor/editor/events/linetitlemoveend_event.md) |
+| [](api/diagram_editor/editor/events/shapemoveend_event.md) | @getshort(api/diagram_editor/editor/events/shapemoveend_event.md) |
+| [](api/diagram_editor/editor/events/shaperesize_event.md) | @getshort(api/diagram_editor/editor/events/shaperesize_event.md) |
+| [](api/diagram_editor/editor/events/zoomin_event.md) | @getshort(api/diagram_editor/editor/events/zoomin_event.md) |
+| [](api/diagram_editor/editor/events/zoomout_event.md) | @getshort(api/diagram_editor/editor/events/zoomout_event.md) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shapemoveend_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shapemoveend_event.md
new file mode 100644
index 000000000..b2fdcdb00
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shapemoveend_event.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: shapeMoveEnd
+title: 에디터의 shapeMoveEnd 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터의 shapeMoveEnd 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# shapeMoveEnd
+
+### 설명 {#description}
+
+@short: 도형이 이동된 후 발생합니다
+
+:::note
+선택한 요소의 수와 관계없이 이 이벤트는 대상 요소에 대해서만 발생합니다. 드래그된 요소의 id는 콜백 함수의 `batch` 매개변수에 제공됩니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+"shapeMoveEnd": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+이벤트의 콜백은 다음 매개변수가 포함된 객체와 함께 호출됩니다:
+
+ - `id` - 항목의 id
+ - `batch` - 이동된 요소들의 id 배열
+ - `coords` - 이동 후 도형 위치의 `x` 및 `y` 좌표가 포함된 객체이며, 여기서:
+ - `x` - 왼쪽에서 오른쪽으로 이동하는 도형의 수평 위치
+ - `y` - 위에서 아래로 이동하는 도형의 수직 위치
+ - `event` - 이벤트 객체
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-13}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("shapeMoveEnd", ({ id, coords }) => {
+ console.log(`
+ Shape ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**변경 로그**:
+
+- `batch` 매개변수는 v6.0에서 추가되었습니다
+- 콜백 함수는 v6.0부터 객체를 매개변수로 받습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shaperesize_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shaperesize_event.md
new file mode 100644
index 000000000..e2ed823a2
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shaperesize_event.md
@@ -0,0 +1,35 @@
+---
+sidebar_label: shapeResize
+title: 에디터의 shapeResize 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터의 shapeResize 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# shapeResize
+
+### 설명 {#description}
+
+@short: 도형 크기가 조정된 후 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"shapeResize": () => void;
+~~~
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-9}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("shapeResize", () => {
+ console.log("The shape has been resized");
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md
new file mode 100644
index 000000000..0d4b79fee
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: zoomIn
+title: 에디터의 zoomIn 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터의 zoomIn 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# zoomIn
+
+### 설명 {#description}
+
+@short: 확대 버튼을 클릭하거나 zoomIn() 메서드를 호출하면 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"zoomIn": (step: number) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+`zoomIn` 이벤트의 콜백은 다음 매개변수와 함께 호출됩니다:
+
+- `step` - (필수) [`scale`](api/diagram_editor/editor/config/scale_property.md) 속성의 단계를 나타내는 값입니다.
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {7-9}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("zoomIn", (step) => {
+ console.log("The diagram in the editor is zoomed in. The step is" + step);
+});
+~~~
+
+**변경 로그**: `step` 매개변수는 v6.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md
new file mode 100644
index 000000000..b4c0f791c
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: zoomOut
+title: 에디터의 zoomOut 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터의 zoomOut 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# zoomOut
+
+### 설명 {#description}
+
+@short: 축소 버튼을 클릭하거나 `zoomOut()` 메서드를 호출하면 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"zoomOut": (step) => void;
+~~~
+
+### 매개변수 {#parameters}
+
+`zoomOut` 이벤트의 콜백은 다음 매개변수와 함께 호출됩니다:
+
+- `step` - (필수) [`scale`](api/diagram_editor/editor/config/scale_property.md) 속성의 변경 단계를 나타내는 값입니다.
+
+:::info
+내부 Diagram Editor 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {7-9}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+// 데이터 로드
+editor.parse(data);
+
+// 이벤트에 핸들러 연결
+editor.events.on("zoomOut", (step) => {
+ console.log("The diagram in the editor is zoomed out");
+});
+~~~
+
+**변경 로그**: `step` 매개변수는 v6.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/destructor_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/destructor_method.md
new file mode 100644
index 000000000..b2f6a85dc
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/destructor_method.md
@@ -0,0 +1,30 @@
+---
+sidebar_label: destructor()
+title: Editor의 destructor 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 destructor 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 확인해 보세요. 그리고 DHTMLX Diagram의 30일 무료 평가판을 다운로드하세요.
+---
+
+# destructor()
+
+### 설명 {#description}
+
+@short: 다이어그램 에디터 인스턴스를 제거하고 사용 중이던 리소스를 해제합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+destructor(): void;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {6}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+
+editor.destructor();
+~~~
+
+**변경 로그**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/import_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/import_method.md
new file mode 100644
index 000000000..8a288c5eb
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/import_method.md
@@ -0,0 +1,42 @@
+---
+sidebar_label: import()
+title: Editor의 import 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터의 import 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 확인해 보세요. 그리고 DHTMLX Diagram의 30일 무료 평가판을 다운로드하세요.
+---
+
+# import()
+
+### 설명 {#description}
+
+@short: 기존 다이어그램의 데이터를 에디터로 가져옵니다
+
+### 사용법 {#usage}
+
+~~~jsx
+import(diagram: object): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `diagram` - (필수) 다이어그램 객체
+
+### 예제 {#example}
+
+~~~jsx
+// Diagram 초기화
+const diagram = new dhx.Diagram("diagram", {
+ type: "org"
+});
+// Diagram에 데이터 로드
+diagram.data.parse(data);
+
+// Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container");
+
+// Diagram에서 Editor로 데이터 가져오기
+editor.import(diagram);
+~~~
+
+지원되는 모든 데이터 형식으로 데이터를 로드할 수 있습니다. 자세한 내용은 [`parse()`](api/data_collection/parse_method.md) 문서를 참고하세요.
+
+**관련 샘플**: [Diagram editor. 조직도 모드. 라이브 에디터](https://snippet.dhtmlx.com/bng7ego7)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/overview.md
new file mode 100644
index 000000000..3316d0c8e
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/overview.md
@@ -0,0 +1,17 @@
+---
+sidebar_label: Editor 메서드
+title: Editor 메서드 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Editor 메서드를 살펴볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 확인해 보세요. 그리고 DHTMLX Diagram의 30일 무료 평가판을 다운로드하세요.
+---
+
+# Editor 메서드 개요 {#editor-methods-overview}
+
+| 이름 | 설명 |
+| :------------------------------------------------------------ | :---------------------------------------------------------------- |
+| [](api/diagram_editor/editor/methods/destructor_method.md) | @getshort(api/diagram_editor/editor/methods/destructor_method.md) |
+| [](api/diagram_editor/editor/methods/import_method.md) | @getshort(api/diagram_editor/editor/methods/import_method.md) |
+| [](api/diagram_editor/editor/methods/paint_method.md) | @getshort(api/diagram_editor/editor/methods/paint_method.md) |
+| [](api/diagram_editor/editor/methods/parse_method.md) | @getshort(api/diagram_editor/editor/methods/parse_method.md) |
+| [](api/diagram_editor/editor/methods/serialize_method.md) | @getshort(api/diagram_editor/editor/methods/serialize_method.md) |
+| [](api/diagram_editor/editor/methods/zoomin_method.md) | @getshort(api/diagram_editor/editor/methods/zoomin_method.md) |
+| [](api/diagram_editor/editor/methods/zoomout_method.md) | @getshort(api/diagram_editor/editor/methods/zoomout_method.md) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/paint_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/paint_method.md
new file mode 100644
index 000000000..ea5b15f67
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/paint_method.md
@@ -0,0 +1,26 @@
+---
+sidebar_label: paint()
+title: Editor의 paint 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터의 paint 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 확인해 보세요. 그리고 DHTMLX Diagram의 30일 무료 평가판을 다운로드하세요.
+---
+
+# paint()
+
+### 설명 {#description}
+
+@short: 에디터를 다시 그립니다
+
+### 사용법 {#usage}
+
+~~~jsx
+paint(): void;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {4}
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.paint();
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/parse_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/parse_method.md
new file mode 100644
index 000000000..161fb562c
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/parse_method.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: parse()
+title: Editor의 parse 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터의 parse 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 직접 확인해 보세요. 그리고 DHTMLX Diagram의 30일 무료 평가판을 다운로드하세요.
+---
+
+# parse()
+
+### 설명 {#description}
+
+@short: 로컬 데이터 소스에서 에디터로 데이터를 로드합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+parse(data: array): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `data` - (필수) 에디터로 파싱할 데이터
+
+지원되는 모든 데이터 형식으로 데이터를 로드할 수 있습니다. 자세한 내용은 [`parse()`](api/data_collection/parse_method.md) 문서를 참고하세요.
+
+### 예제 {#example}
+
+~~~jsx
+const data = [
+ // 도형
+ {
+ "id": "a",
+ "x": 50,
+ "y": 53,
+ "type": "triangle",
+ "text": "Shape 1",
+ "height": 50,
+ "width": 50
+ },
+ {
+ "id": "b",
+ "x": 367,
+ "y": 158,
+ "type": "rectangle",
+ "text": "Shape 2"
+ },
+
+ // 연결선
+ {
+ "id": "ab",
+ "from":"a",
+ "to":"b",
+ "type": "line"
+ },
+];
+
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+~~~
+
+**관련 예제**:
+
+- [Diagram editor. 기본 모드. 기본 초기화](https://snippet.dhtmlx.com/xshe9ut7)
+- [Diagram editor. 조직도 모드. 기본 초기화](https://snippet.dhtmlx.com/og4qm3ja)
+- [Diagram editor. 마인드맵 모드. 감정 마인드맵](https://snippet.dhtmlx.com/lo1vm0e8)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/serialize_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/serialize_method.md
new file mode 100644
index 000000000..41eb9e4e2
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/serialize_method.md
@@ -0,0 +1,32 @@
+---
+sidebar_label: serialize()
+title: serialize Method of Editor
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 serialize 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# serialize()
+
+### 설명 {#description}
+
+@short: editor의 데이터를 JSON 객체 배열로 직렬화합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+serialize(): array;
+~~~
+
+### 반환값 {#returns}
+
+이 메서드는 editor 데이터의 각 항목에 대해 JSON 객체 배열을 반환합니다
+
+### 예제 {#example}
+
+~~~jsx {4}
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+const data = editor.serialize();
+~~~
+
+**관련 샘플**: [Diagram Editor. 조직도 모드. 라이브 에디터](https://snippet.dhtmlx.com/bng7ego7)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomin_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomin_method.md
new file mode 100644
index 000000000..a8242b1f6
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomin_method.md
@@ -0,0 +1,32 @@
+---
+sidebar_label: zoomIn()
+title: zoomIn Method of Editor
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 zoomIn 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# zoomIn()
+
+### 설명 {#description}
+
+@short: 다이어그램을 확대합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+zoomIn(step?: number): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `step` - (선택 사항) 다이어그램을 확대하는 단계; *기본값: 0.05*
+
+### 예제 {#example}
+
+~~~jsx {4}
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.zoomIn(0.1);
+~~~
+
+**변경 로그**: v4.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomout_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomout_method.md
new file mode 100644
index 000000000..bd84c09cb
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomout_method.md
@@ -0,0 +1,32 @@
+---
+sidebar_label: zoomOut()
+title: zoomOut Method of Editor
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 editor의 zoomOut 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# zoomOut()
+
+### 설명 {#description}
+
+@short: 다이어그램을 축소합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+zoomOut(step?: number): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `step` - (선택 사항) 다이어그램을 축소하는 단계; *기본값: 0.05*
+
+### 예제 {#example}
+
+~~~jsx {4}
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.zoomOut(0.1);
+~~~
+
+**변경 로그**: v4.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/api_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/api_overview.md
new file mode 100644
index 000000000..fa430e72d
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/api_overview.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: History manager API 개요
+title: History manager API 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 History manager 개요를 확인할 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# History manager API 개요 {#history-manager-api-overview}
+
+Diagram Editor에서 작업 내역을 관리하는 데 사용할 수 있는 API 집합입니다. `editor` 객체를 통해 History manager에 접근하려면 `history` 키워드를 사용하세요:
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default" // 기본값만 가능
+});
+// ...
+editor.history.redo(); // Undo 작업으로 되돌려진 작업을 복원합니다
+~~~
+
+## History manager 메서드 개요 {#history-manager-methods-overview}
+
+| Name | 설명 |
+| :---------------------------------------------------------- | :----------------------------------------------------------------- |
+| [](api/diagram_editor/historymanager/methods/add_method.md) | @getshort(api/diagram_editor/historymanager/methods/add_method.md) |
+| [](api/diagram_editor/historymanager/methods/disable_method.md) | @getshort(api/diagram_editor/historymanager/methods/disable_method.md) |
+| [](api/diagram_editor/historymanager/methods/enable_method.md) | @getshort(api/diagram_editor/historymanager/methods/enable_method.md) |
+| [](api/diagram_editor/historymanager/methods/isredo_method.md) | @getshort(api/diagram_editor/historymanager/methods/isredo_method.md) |
+| [](api/diagram_editor/historymanager/methods/isundo_method.md) | @getshort(api/diagram_editor/historymanager/methods/isundo_method.md) |
+| [](api/diagram_editor/historymanager/methods/redo_method.md) | @getshort(api/diagram_editor/historymanager/methods/redo_method.md) |
+| [](api/diagram_editor/historymanager/methods/reset_method.md) | @getshort(api/diagram_editor/historymanager/methods/reset_method.md) |
+| [](api/diagram_editor/historymanager/methods/undo_method.md) | @getshort(api/diagram_editor/historymanager/methods/undo_method.md) |
+
+## History manager 속성 개요 {#history-manager-properties-overview}
+
+| Name | 설명 |
+| :---------------------------------------------------------- | :----------------------------------------------------------------- |
+| [](api/diagram_editor/historymanager/config/savedelay_property.md) | @getshort(api/diagram_editor/historymanager/config/savedelay_property.md) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/overview.md
new file mode 100644
index 000000000..497f37adc
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/overview.md
@@ -0,0 +1,11 @@
+---
+sidebar_label: History manager 속성
+title: History manager 속성 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 History manager 속성을 살펴볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# History manager 속성 개요 {#history-manager-properties-overview}
+
+| Name | 설명 |
+| :----------------------------------------------------------------- | :------------------------------------------------------------------------ |
+| [](api/diagram_editor/historymanager/config/savedelay_property.md) | @getshort(api/diagram_editor/historymanager/config/savedelay_property.md) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/savedelay_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/savedelay_property.md
new file mode 100644
index 000000000..31efdc0a5
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/savedelay_property.md
@@ -0,0 +1,35 @@
+---
+sidebar_label: saveDelay
+title: HistoryManager의 saveDelay 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 HistoryManager의 비활성화된 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# saveDelay
+
+### 설명 {#description}
+
+@short: 현재 상태를 저장할 시간 간격을 ms 단위로 설정합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+saveDelay: number;
+~~~
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+saveDelay: 500
+~~~
+
+### 예제 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+
+editor.history.saveDelay = 1000;
+~~~
+
+**변경 로그**: v4.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/add_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/add_method.md
new file mode 100644
index 000000000..8dcb6fbfd
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/add_method.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: add()
+title: HistoryManager의 add 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 HistoryManager의 add 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# add()
+
+### 설명 {#description}
+
+@short: 새로운 상태를 추가합니다
+
+:::info
+새로운 상태 추가는 자동으로 이루어집니다. 따라서 이 메서드는 수동 사용에는 권장되지 않습니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+add(newState: array): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `newState` - (필수) 다이어그램의 현재 상태에 대한 JSON 객체 배열
+
+### 예제 {#example}
+
+~~~jsx {5-9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.add([
+ { "id": "shape_1", "type": "start", "x": 200, y: 0, "text": "Start" },
+ { "id": "shape_2", "type": "process", "x": 200, y: 120, "text": "Call the client" },
+ { "id": "line_1", "type": "line", "from": "shape_1", "to": "shape_2" }
+]);
+~~~
+
+**변경 로그**: v4.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/disable_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/disable_method.md
new file mode 100644
index 000000000..3b7240ab2
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/disable_method.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: disable()
+title: HistoryManager의 disable 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 HistoryManager의 disable 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# disable()
+
+### 설명 {#description}
+
+@short: HistoryManager를 차단합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+disable(): void;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.disable();
+~~~
+
+:::note
+History manager를 비활성화하면 단축키로 작업 내역을 다룰 수 없다는 점에 유의하세요.
+:::
+
+**변경 로그**: v4.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/enable_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/enable_method.md
new file mode 100644
index 000000000..60c082597
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/enable_method.md
@@ -0,0 +1,29 @@
+---
+sidebar_label: enable()
+title: HistoryManager의 enable 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 HistoryManager의 enable 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 30일 무료 평가판을 다운로드하세요.
+---
+
+# enable()
+
+### 설명 {#description}
+
+@short: HistoryManager의 작동을 다시 시작하고 현재 상태를 초기 상태로 저장합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+enable(): void;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.enable();
+~~~
+
+**변경 로그**: v4.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isredo_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isredo_method.md
new file mode 100644
index 000000000..f4538ea2c
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isredo_method.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: isRedo()
+title: HistoryManager의 isRedo 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 HistoryManager의 isRedo 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 30일 무료 평가판을 다운로드하세요.
+---
+
+# isRedo()
+
+### 설명 {#description}
+
+@short: Undo 작업으로 되돌려진 작업이 복원되었는지 확인합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+isRedo(): boolean;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+...
+editor.history.isRedo();
+~~~
+
+### 반환값 {#returns}
+
+이 메서드는 Undo 작업으로 되돌려진 작업이 복원된 경우 `true`를 반환하고, 그렇지 않으면 `false`를 반환합니다
+
+**변경 로그**: v4.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isundo_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isundo_method.md
new file mode 100644
index 000000000..b1648c49c
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isundo_method.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: isUndo()
+title: HistoryManager의 isUndo 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 HistoryManager의 isUndo 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 30일 무료 평가판을 다운로드하세요.
+---
+
+# isUndo()
+
+### 설명 {#description}
+
+@short: 작업이 되돌려졌는지 확인합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+isUndo(): boolean;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.isUndo();
+~~~
+
+### 반환값 {#returns}
+
+이 메서드는 작업이 되돌려진 경우 `true`를 반환하고, 그렇지 않으면 `false`를 반환합니다
+
+**변경 로그**: v4.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/overview.md
new file mode 100644
index 000000000..03612c879
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/overview.md
@@ -0,0 +1,20 @@
+---
+sidebar_label: History manager 메서드
+title: History manager 메서드 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 History manager 메서드를 살펴볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 30일 무료 평가판을 다운로드하세요.
+---
+
+# History manager API 개요 {#history-manager-api-overview}
+
+## History manager 메서드 개요 {#history-manager-methods-overview}
+
+| 이름 | 설명 |
+| :---------------------------------------------------------- | :----------------------------------------------------------------- |
+| [](api/diagram_editor/historymanager/methods/add_method.md) | @getshort(api/diagram_editor/historymanager/methods/add_method.md) |
+| [](api/diagram_editor/historymanager/methods/disable_method.md) | @getshort(api/diagram_editor/historymanager/methods/disable_method.md) |
+| [](api/diagram_editor/historymanager/methods/enable_method.md) | @getshort(api/diagram_editor/historymanager/methods/enable_method.md) |
+| [](api/diagram_editor/historymanager/methods/isredo_method.md) | @getshort(api/diagram_editor/historymanager/methods/isredo_method.md) |
+| [](api/diagram_editor/historymanager/methods/isundo_method.md) | @getshort(api/diagram_editor/historymanager/methods/isundo_method.md) |
+| [](api/diagram_editor/historymanager/methods/redo_method.md) | @getshort(api/diagram_editor/historymanager/methods/redo_method.md) |
+| [](api/diagram_editor/historymanager/methods/reset_method.md) | @getshort(api/diagram_editor/historymanager/methods/reset_method.md) |
+| [](api/diagram_editor/historymanager/methods/undo_method.md) | @getshort(api/diagram_editor/historymanager/methods/undo_method.md) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/redo_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/redo_method.md
new file mode 100644
index 000000000..2a05da6a9
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/redo_method.md
@@ -0,0 +1,29 @@
+---
+sidebar_label: redo()
+title: HistoryManager의 redo 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 HistoryManager의 redo 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 30일 무료 평가판을 다운로드하세요.
+---
+
+# redo()
+
+### 설명 {#description}
+
+@short: Undo 작업으로 되돌려진 작업을 복원합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+redo(): void;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.redo();
+~~~
+
+**변경 로그**: v4.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/reset_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/reset_method.md
new file mode 100644
index 000000000..9c7d70cf9
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/reset_method.md
@@ -0,0 +1,29 @@
+---
+sidebar_label: reset()
+title: HistoryManager의 reset 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 HistoryManager의 reset 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# reset()
+
+### 설명 {#description}
+
+@short: 이전 변경 사항을 재설정하고 현재 상태를 저장합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+reset(): void;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.reset();
+~~~
+
+**변경 로그**: v4.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/undo_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/undo_method.md
new file mode 100644
index 000000000..6a2d0cc18
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/undo_method.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: undo()
+title: HistoryManager의 undo 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 HistoryManager의 undo 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# undo()
+
+### 설명 {#description}
+
+@short: Diagram Editor에서 마지막 작업을 되돌립니다
+
+### 사용법 {#usage}
+
+~~~jsx
+undo(first?: boolean): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `first` - (선택 사항) 모든 변경 기록을 되돌리려면 *true*
+
+### 예제 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.undo();
+~~~
+
+**변경 로그**: v4.1에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/api_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/api_overview.md
new file mode 100644
index 000000000..d79b9a334
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/api_overview.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: Shapebar API 개요
+title: Shapebar API 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Shapebar 개요를 확인할 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Shapebar API 개요 {#shapebar-api-overview}
+
+[Shapebar](guides/diagram_editor/shapebar.md)는 Diagram 항목(도형, 그룹, 스윔레인)의 미리보기를 렌더링하는 Diagram Editor의 일부입니다. Shapebar를 표시하거나 숨기고 구성하려면 [`view`](api/diagram_editor/editor/config/view_property.md) 구성 객체의 `shapebar` 속성을 사용하십시오. 선택할 수 있는 두 가지 초기화 방법이 있습니다:
+
+- `shapebar:true` 설정을 사용하여 기본 Shapebar를 생성하는 방법:
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: true // 기본 Shapebar를 표시합니다
+ }
+});
+~~~
+
+- [속성 집합](/category/shapebar-properties/)이 있는 객체로 지정하여 Shapebar를 구성하는 방법:
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // 객체를 통해 Shapebar 구성
+ shapebar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ preview: {
+ scale: 0.65,
+ gap: 8
+ },
+ sections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+ }
+ }
+});
+~~~
+
+사용 가능한 Shapebar의 속성을 살펴보려면 [관련 API 섹션](/category/shapebar-properties/)을 확인하십시오.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/css_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/css_property.md
new file mode 100644
index 000000000..72355c754
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/css_property.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: css
+title: Shapebar의 css 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Shapebar의 css 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# css
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. Shapebar의 모양을 조정하기 위해 사용자 지정 CSS 클래스를 적용할 수 있습니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+css?: string;
+~~~
+
+### 예제 {#example}
+
+~~~html {8}
+
+
+
+~~~
+
+**관련 문서:**
+
+- [Shapebar 및 도형 모양](guides/diagram_editor/shapebar.md#shapebar-and-shapes-appearance)
+- [Shapebar에서 도형의 모양 구성하기](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar)
+
+**변경 로그:** v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/preview_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/preview_property.md
new file mode 100644
index 000000000..6f11e35d6
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/preview_property.md
@@ -0,0 +1,85 @@
+---
+sidebar_label: preview
+title: Shapebar의 preview 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Shapebar의 preview 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# preview
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. 항목의 미리보기를 구성하는 객체입니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+preview?: {
+ scale?: number,
+ gap?: string | number
+}
+~~~
+
+### 매개변수 {#parameters}
+
+- `scale` - (선택 사항) 에디터의 shapebar에 렌더링되는 항목의 배율을 정의합니다.
+- `gap` - (선택 사항) shapebar에 렌더링되는 항목 사이의 간격을 지정합니다.
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+preview: {
+ scale: 0.5,
+ gap: "6px 8px"
+ // 상단과 하단에는 6px, 좌우에는 8px의 간격을 설정합니다
+};
+~~~
+
+### 예제 {#example}
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // 기본 Shapebar를 표시합니다
+ // 또는 객체를 통해 Shapebar 구성
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 8
+ }
+ }
+ }
+});
+~~~
+
+### 세부 정보 {#details}
+
+`gap`과 `scale` 속성의 값은 도형 객체의 [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) 속성에 있는 `gap`과 `scale` 특성을 통해 개별 도형에 대해 재정의할 수 있습니다:
+
+~~~jsx {14-17}
+const defaults = {
+ rectangle: {
+ preview: {
+ scale: 0.72,
+ gap: 8
+ }
+ }
+}
+
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 2
+ }
+ }
+ },
+ defaults
+});
+~~~
+
+**관련 문서:** [Shapebar](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes)
+
+**변경 로그:** v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/sections_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/sections_property.md
new file mode 100644
index 000000000..ef864e1f1
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/sections_property.md
@@ -0,0 +1,174 @@
+---
+sidebar_label: sections
+title: Shapebar의 sections 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Shapebar의 sections 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# sections
+
+[shapebar의 기본 섹션](guides/diagram_editor/shapebar.md#default-sections)은 *도형*, *그룹*, *스윔레인*입니다.
+
+`sections` 속성을 사용하면 shapebar의 구조를 변경하고 필요한 항목을 표시할 수 있습니다.
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. 에디터의 shapebar에 표시될 항목의 섹션을 지정하는 객체입니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+sections?: {
+ [name: string]: (obj | string)[]
+};
+~~~
+
+### 매개변수 {#parameters}
+
+`sections` 객체는 다음과 같은 *key:value* 쌍의 집합을 포함할 수 있습니다:
+- `key` - 사용자가 지정한 섹션의 이름
+- `value` - 다음을 포함할 수 있는 배열:
+ - 기본 도형 집합을 렌더링하기 위한 하나의 *key:value* 쌍이 있는 객체입니다. 사용 가능한 쌍 목록은 아래와 같습니다:
+ - `{flowShapes: true}` - (선택 사항) 사용 가능한 모든 유형의 [Flow-chart](shapes/default_shapes.md#shapes-in-the-default-mode) 도형을 표시합니다.
+ - `{org: true}` - (선택 사항) Org 도형을 표시합니다: `"card"` 및 `"img-card"` 도형 유형
+ - `{group: true}` - (선택 사항) 기본 그룹 집합을 표시합니다.
+ - `{swimlane: true}` - (선택 사항) 기본 스윔레인 집합을 표시합니다.
+ - 섹션에 렌더링될 항목의 특정 유형을 나타내는 문자열 값입니다(예: `"text"`, `"topic"` 등)
+ - 모든 도형의 기본 속성을 재정의하기 위한 여러 *key:value* 쌍이 있는 객체입니다
+
+### 예제 {#example}
+
+~~~jsx {7-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // 기본 Shapebar를 표시합니다
+ // 또는 객체를 통해 Shapebar 구성
+ shapebar: {
+ sections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+ }
+ }
+});
+~~~
+
+### 세부 정보 {#details}
+
+선택한 요소에 따라 특정 섹션의 항목 구성은 다음과 같을 수 있습니다:
+
+1. 기본 섹션 렌더링
+
+`sections` 구성 객체를 사용하여 기본 도형 집합을 렌더링할 수 있습니다. 예를 들면:
+
+~~~jsx {5-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Base flow shapes": [{ flowShapes: true }],
+ "Base org cards": [{ org: true }],
+ "Base groups": [{ group: true }],
+ "Base swimlane": [{ swimlane: true }]
+ }
+ }
+ }
+});
+~~~
+
+2. 문자열 리터럴을 사용하여 항목 지정하기
+
+문자열 리터럴을 사용하여 도형 유형을 지정함으로써 Shapebar 항목을 렌더링할 수 있습니다. 아래 예제를 확인하십시오:
+
+~~~jsx {5-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Custom section": ["custom_shape"],
+ "Other shapes": ["text", "topic", "circle"]
+ }
+ }
+ }
+});
+~~~
+
+3. 기본 구성 재정의하기
+
+또 다른 방법은 모든 도형의 기본 속성을 재정의하여 필요한 매개변수로 렌더링하는 것입니다. 아래 예제는 다양한 텍스트 및 색상 설정을 가진 `circle` 유형의 도형을 렌더링하는 방법을 보여줍니다:
+
+~~~jsx {5-23}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Circles": [
+ {
+ type: "circle",
+ fill: "#fcba03",
+ text: "Orange"
+ },
+ {
+ type: "circle",
+ fill: "#03d7fc",
+ text: "Blue"
+ },
+ {
+ type: "circle",
+ fill: "#03fc88",
+ text: "Green"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+이러한 방식으로 모든 유형의 도형을 재구성할 수 있습니다.
+
+4. 섹션에서 서로 다른 유형의 항목 결합하기
+
+프로젝트에서 다양한 요소의 사용을 전제로 하는 경우, Shapebar에 혼합된 유형의 항목을 가진 섹션을 만들 수 있습니다. 다음 예제를 확인하십시오:
+
+~~~jsx {7-27}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // 기본 Shapebar를 표시합니다
+ // 또는 객체를 통해 Shapebar 구성
+ shapebar: {
+ sections: {
+ "Base flow shapes": [{ flowShapes: true }, "text", "topic"],
+ "Circles": [
+ "circle",
+ {
+ type: "circle",
+ fill: "#fcba03",
+ text: "Orange"
+ },
+ {
+ type: "circle",
+ fill: "#03d7fc",
+ text: "Blue"
+ },
+ {
+ type: "circle",
+ fill: "#03fc88",
+ text: "Green"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+**관련 문서:** [Shapebar](guides/diagram_editor/shapebar.md#custom-sections)
+
+**변경 로그:** v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/show_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/show_property.md
new file mode 100644
index 000000000..47b162dc8
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/show_property.md
@@ -0,0 +1,42 @@
+---
+sidebar_label: show
+title: Shapebar의 show 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Shapebar의 show 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# show
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. Diagram Editor 초기화 시 사용자 지정 설정이 적용된 shapebar가 표시되는지 여부를 정의합니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+show?: boolean;
+~~~
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+show: true
+~~~
+
+### 예제 {#example}
+
+~~~jsx {7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // 기본 Shapebar를 표시합니다
+ // 또는 객체를 통해 Shapebar 구성
+ shapebar: {
+ show: false // 기본값은 true입니다
+ }
+ }
+});
+~~~
+
+**관련 문서:** [Shapebar](guides/diagram_editor/shapebar.md#showinghiding-the-shapebar)
+
+**변경 로그:** v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/width_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/width_property.md
new file mode 100644
index 000000000..03bb6f73b
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/width_property.md
@@ -0,0 +1,42 @@
+---
+sidebar_label: width
+title: Shapebar의 width 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Shapebar의 width 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# width
+
+### 설명 {#description}
+
+@short: 선택 사항입니다. 에디터의 shapebar 너비를 설정합니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+width?: number;
+~~~
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+width: 300
+~~~
+
+### 예제 {#example}
+
+~~~jsx {7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // 기본 Shapebar를 표시합니다
+ // 또는 객체를 통해 Shapebar 구성
+ shapebar: {
+ width: 400 // 기본값은 300입니다
+ }
+ }
+});
+~~~
+
+**관련 문서:** [Shapebar](guides/diagram_editor/shapebar.md#setting-the-width-of-shapebar)
+
+**변경 로그:** v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/api_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/api_overview.md
new file mode 100644
index 000000000..1ec164a47
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/api_overview.md
@@ -0,0 +1,50 @@
+---
+sidebar_label: Toolbar API 개요
+title: Toolbar API 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Toolbar 개요를 확인할 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Toolbar API 개요 {#toolbar-api-overview}
+
+[Toolbar](guides/diagram_editor/toolbar.md)는 Diagram Editor의 일부로 사용자가 편집 프로세스를 제어할 수 있도록 도와줍니다. Toolbar를 표시, 숨기기 및 구성하려면 [`view`](api/diagram_editor/editor/config/view_property.md) 구성 객체의 `toolbar` 속성을 사용하세요. 다음 두 가지 초기화 방법 중에서 선택할 수 있습니다:
+
+- `toolbar:true` 설정을 사용하여 기본 Toolbar를 생성하는 방법:
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true // 기본 Toolbar 표시
+ }
+});
+~~~
+
+- [속성 집합](/category/toolbar-properties/)이 포함된 객체로 지정하여 Toolbar를 구성하는 방법:
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // 객체를 통해 Toolbar 구성
+ toolbar: {
+ css: "custom_css",
+ items: ["file", "spacer", "scale"],
+ navigationType: "pointer"
+ }
+ }
+});
+~~~
+
+사용 가능한 Toolbar의 메서드, 속성 및 이벤트를 살펴보려면 관련 API 섹션을 확인하세요.
+
+## Toolbar 메서드 {#toolbar-methods}
+
+- [Toolbar 메서드 목록](api/diagram_editor/toolbar/methods/overview.md)
+
+## Toolbar 속성 {#toolbar-properties}
+
+- [Toolbar 속성 목록](/category/toolbar-properties/)
+
+## Toolbar 이벤트 {#toolbar-events}
+
+- [Toolbar 이벤트 목록](api/diagram_editor/toolbar/events/overview.md)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/css_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/css_property.md
new file mode 100644
index 000000000..e7b8f95c7
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/css_property.md
@@ -0,0 +1,42 @@
+---
+sidebar_label: css
+title: Toolbar의 css 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Toolbar의 css 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# css
+
+### 설명 {#description}
+
+@short: 선택 사항. 사용자 지정 CSS 클래스를 적용합니다.
+
+:::info
+사용자 지정 CSS 클래스는 확장된 요소에도 적용됩니다. 이러한 요소에는 `--popup-menu` 접두사가 추가됩니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+css?: string;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // toolbar: true, // 기본 Toolbar 표시
+ // 또는 객체를 통해 Toolbar 구성
+ toolbar: {
+ css: "custom_css",
+ items: ["file", "spacer", "scale"],
+ navigationType: "pointer"
+ }
+ }
+});
+~~~
+
+**변경 로그**: v6.0에서 추가
+
+**관련 문서**: [Toolbar 구성](guides/diagram_editor/toolbar.md)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/items_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/items_property.md
new file mode 100644
index 000000000..56467ff34
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/items_property.md
@@ -0,0 +1,146 @@
+---
+sidebar_label: items
+title: Toolbar의 items 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Toolbar의 items 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# items
+
+### 설명 {#description}
+
+@short: 선택 사항. Diagram Editor의 Toolbar에 표시되는 컨트롤이 포함된 배열입니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+items?: (object | string)[];
+~~~
+
+### 문자열을 통한 items 구성 {#configuring-items-via-strings}
+
+`items` 속성을 사용하면 [**서비스 요소**](guides/diagram_editor/toolbar.md#service-elements)를 문자열 배열로 지정할 수 있습니다:
+
+~~~jsx
+items: [ "file", "edit", "view", "arrange", "spacer", "scale" ];
+~~~
+
+서비스 요소의 전체 목록은 [여기](guides/diagram_editor/toolbar.md#service-elements)에서 확인할 수 있습니다.
+
+### 객체를 통한 items 구성 {#configuring-items-via-objects}
+
+`items` 속성을 사용하면 [**서비스 요소**](guides/diagram_editor/toolbar.md#service-elements)와 [**기본 요소**](guides/diagram_editor/toolbar.md#base-elements)를 객체 배열로 지정할 수 있습니다:
+
+~~~jsx
+items: [
+ {
+ type: string,
+ id?: string,
+ value?: string,
+ hotkey?: string,
+ icon?: string,
+ hidden?: boolean,
+ disabled?: boolean,
+ css?: string | string[],
+ items?: (string | object)[],
+ checkIcon?: (editor: object) => string,
+ handler?: (editor: object, event: Event) => void
+ }, {...}
+];
+~~~
+
+#### 매개변수 {#parameters}
+
+`separator`/`spacer`/`scale`를 제외한 모든 [**서비스 요소**](guides/diagram_editor/toolbar.md#service-elements)에 대해 다음 매개변수가 포함된 객체를 지정할 수 있습니다:
+
+- `type` - (필수) - 서비스 요소의 유형입니다. 서비스 요소 유형의 전체 목록은 [여기](guides/diagram_editor/toolbar.md)에서 확인할 수 있습니다
+- `id` - (선택 사항) - 서비스 요소의 ID입니다. 기본적으로 서비스 요소의 ID에는 `$`와 서비스 요소의 `type`이 포함됩니다: `$file`
+- `value` - (선택 사항) - 서비스 요소의 레이블입니다
+- `hotkey` - (선택 사항) - 서비스 요소의 단축키 조합 레이블입니다
+- `icon` - (선택 사항) - 서비스 요소 아이콘의 css 클래스입니다
+- `hidden` - (선택 사항) - 서비스 요소를 숨깁니다
+- `disabled` - (선택 사항) - 서비스 요소를 비활성화합니다
+- `css` - (선택 사항) - 서비스 요소에 사용자 지정 css 클래스를 적용합니다
+- `items` - (선택 사항) - 하위 요소의 구조를 정의합니다
+- `checkIcon` - (선택 사항) - 아이콘 css 클래스를 반환하는 핸들러입니다. 다음 인수와 함께 호출됩니다:
+ - `editor` - Diagram Editor 객체
+- `handler` - (선택 사항) - `click` 또는 `inputChange` 이벤트가 발생할 때 실행되는 핸들러입니다. 다음 인수와 함께 호출됩니다:
+ - `editor` - Diagram Editor 객체
+ - `event` - [네이티브 이벤트](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+
+### 예제 1 {#example-1}
+
+아래 예제는 문자열을 통해 Toolbar items를 구성하는 방법을 보여줍니다:
+
+~~~jsx {10-14}
+// 문자열을 통해 items 구성
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // toolbar: true, // 기본 Toolbar 표시
+ // 또는 객체를 통해 Toolbar 구성
+ toolbar: {
+ css: "custom_css",
+ navigationType: "pointer",
+ items: [
+ "file",
+ "spacer",
+ "scale"
+ ]
+ }
+ }
+});
+~~~
+
+### 예제 2 {#example-2}
+
+아래 예제는 객체를 통해 Toolbar items를 구성하는 방법을 보여줍니다:
+
+~~~jsx {7-38}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: {
+ css: "custom_css",
+ navigationType: "pointer",
+ items: [
+ {
+ type: "file",
+ items: [
+ "importJson",
+ {
+ type: "exportJson",
+ value: "Export to JSON"
+ },
+ {
+ id: "custom_id_1",
+ type: "menuItem",
+ value: "Server export",
+ icon: "dxi dxi-vault",
+ items: [
+ "exportPdf",
+ {
+ id: "custom_id_2",
+ type: "menuItem",
+ value: "PNG",
+ handler: editor => {
+ editor.diagram.export.png();
+ // 여기에 사용자 지정 로직 작성
+ }
+ }
+ ]
+ }
+ ]
+ },
+ "spacer",
+ "scale"
+ ]
+ }
+ }
+});
+~~~
+
+**변경 로그**: v6.0에서 추가
+
+**관련 문서**: [Toolbar 구성](guides/diagram_editor/toolbar.md)
+
+**관련 샘플**: [Diagram Editor. 기본 모드. Toolbar 사용자 지정. 도형별 검색 추가 ](https://snippet.dhtmlx.com/846cz71r)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/navigationtype_property.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/navigationtype_property.md
new file mode 100644
index 000000000..b3abac5a3
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/navigationtype_property.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: navigationType
+title: Toolbar의 navigationType 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Toolbar의 css 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# navigationType
+
+### 설명 {#description}
+
+@short: 선택 사항. 메뉴 옵션을 여는 작업을 설정합니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+navigationType?: "click" | "pointer";
+~~~
+
+:::info
+- `"click"` - 사용자가 클릭하면 메뉴를 표시합니다
+- `"pointer"` - 사용자가 마우스 포인터를 위에 올리면 메뉴를 표시합니다
+:::
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+navigationType: "click"
+~~~
+
+### 예제 {#example}
+
+~~~jsx {9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // toolbar: true, // 기본 Toolbar 표시
+ // 또는 객체를 통해 Toolbar 구성
+ toolbar: {
+ css: "custom_css",
+ items: ["file", "spacer", "scale"],
+ navigationType: "pointer"
+ }
+ }
+});
+~~~
+
+**변경 로그**: v6.0에서 추가
+
+**관련 문서**: [Toolbar 구성](guides/diagram_editor/toolbar.md)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/overview.md
new file mode 100644
index 000000000..84da6dd32
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/overview.md
@@ -0,0 +1,65 @@
+---
+sidebar_label: 이벤트 개요
+title: Toolbar 이벤트 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Toolbar 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Toolbar 이벤트 개요 {#toolbar-events-overview}
+
+다음 [**Suite**](https://docs.dhtmlx.com/suite/)의 [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-events/) 이벤트를 사용할 수 있습니다:
+
+| 이름 | 설명 |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
+| [afterHide](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_afterhide_event/) | Toolbar의 하위 항목을 숨긴 후 발생합니다 |
+| [beforeHide](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_beforehide_event/) | Toolbar의 하위 항목을 숨기기 전에 발생합니다 |
+| [click](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_click_event/) | 컨트롤을 클릭한 후 발생합니다 |
+| [input](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_input_event/) | 입력 필드에 텍스트를 입력할 때 발생합니다 |
+| [inputBlur](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputblur_event/) | 컨트롤이 포커스를 잃을 때 발생합니다 |
+| [inputChange](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputchange_event/) | Toolbar의 Input 컨트롤에서 값이 변경될 때 발생합니다 |
+| [inputFocus](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputfocus_event/) | 컨트롤이 포커스를 얻을 때 발생합니다 |
+| [keydown](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_keydown_event/) | Toolbar의 컨트롤이 포커스된 상태에서 아무 키나 누르면 발생합니다 |
+| [openMenu](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_openmenu_event/) | 메뉴 컨트롤을 확장할 때 발생합니다 |
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// "click" 이벤트를 처리합니다
+editor.toolbar.events.on("click", (id, event) => {
+ // 로직 작성
+});
+~~~
+
+# TreeCollection 이벤트 개요 {#treecollection-events-overview}
+
+다음 [**Suite**](https://docs.dhtmlx.com/suite/)의 [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-events/) 이벤트를 사용할 수 있습니다:
+
+| 이름 | 설명 |
+| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| [afterAdd](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_afteradd_event/) | tree collection에 새 항목을 추가한 후 발생합니다 |
+| [afterRemove](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_afterremove_event/) | tree collection에서 항목을 제거한 후 발생합니다 |
+| [beforeAdd](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_beforeadd_event/) | tree collection에 새 항목을 추가하기 전에 발생합니다 |
+| [beforeRemove](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_beforeremove_event/) | tree collection에서 항목을 제거하기 전에 발생합니다 |
+| [change](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_change_event/) | tree collection이 수정될 때 발생합니다 |
+| [filter](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_filter_event/) | tree collection을 필터링한 후 발생합니다 |
+| [load](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_load_event/) | tree collection에 항목이 로드될 때 발생합니다 |
+| [loadError](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_loaderror_event/) | 데이터 로드가 실패할 때 발생합니다 |
+| [removeAll](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_removeall_event/) | tree collection에서 모든 항목이 제거될 때 발생합니다|
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// "load" 이벤트를 처리합니다
+editor.toolbar.events.on("load", () => {
+ // 여기에 로직 작성
+});
+// 새 toolbar 데이터 로드
+editor.toolbar.parse(["file", "spacer", "scale"]);
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/toolbar_events.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/toolbar_events.md
new file mode 100644
index 000000000..0acd23168
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/toolbar_events.md
@@ -0,0 +1,32 @@
+---
+sidebar_label: Toolbar 이벤트
+title: Toolbar의 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Toolbar의 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+다음과 같은 [**Suite**](https://docs.dhtmlx.com/suite/)의 [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-events/) 이벤트를 사용할 수 있습니다:
+
+| 이름 | 설명 |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
+| [afterHide](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_afterhide_event/) | Toolbar의 하위 항목을 숨긴 후 발생합니다 |
+| [beforeHide](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_beforehide_event/) | Toolbar의 하위 항목을 숨기기 전에 발생합니다 |
+| [click](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_click_event/) | 컨트롤을 클릭한 후 발생합니다 |
+| [input](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_input_event/) | 입력 필드에 텍스트를 입력할 때 발생합니다 |
+| [inputBlur](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputblur_event/) | 컨트롤이 포커스를 잃을 때 발생합니다 |
+| [inputChange](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputchange_event/) | Toolbar의 Input 컨트롤에서 값을 변경할 때 발생합니다 |
+| [inputFocus](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputfocus_event/) | 컨트롤이 포커스를 얻을 때 발생합니다 |
+| [keydown](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_keydown_event/) | Toolbar의 컨트롤에 포커스가 있는 상태에서 아무 키나 누르면 발생합니다 |
+| [openMenu](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_openmenu_event/) | 메뉴 컨트롤을 확장할 때 발생합니다 |
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// "click" 이벤트를 처리합니다
+editor.toolbar.events.on("click", (id, event) => {
+ // some logic here
+});
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/treecollection_events.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/treecollection_events.md
new file mode 100644
index 000000000..23193a6f4
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/treecollection_events.md
@@ -0,0 +1,34 @@
+---
+sidebar_label: TreeCollection 이벤트
+title: Toolbar의 TreeCollection 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Toolbar의 TreeCollection 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+다음과 같은 [**Suite**](https://docs.dhtmlx.com/suite/)의 [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-events/) 이벤트를 사용할 수 있습니다:
+
+| 이름 | 설명 |
+| ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| [afterAdd](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_afteradd_event/) | 트리 컬렉션에 새 항목을 추가한 후 발생합니다 |
+| [afterRemove](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_afterremove_event/) | 트리 컬렉션에서 항목을 제거한 후 발생합니다|
+| [beforeAdd](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_beforeadd_event/) | 트리 컬렉션에 새 항목을 추가하기 전에 발생합니다 |
+| [beforeRemove](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_beforeremove_event/) | 트리 컬렉션에서 항목을 제거하기 전에 발생합니다|
+| [change](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_change_event/) | 트리 컬렉션이 수정될 때 발생합니다 |
+| [filter](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_filter_event/) | 트리 컬렉션을 필터링한 후 발생합니다 |
+| [load](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_load_event/) | 트리 컬렉션에 항목이 로드될 때 발생합니다 |
+| [loadError](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_loaderror_event/) | 데이터 로드가 실패할 때 발생합니다 |
+| [removeAll](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_removeall_event/) | 트리 컬렉션에서 모든 항목이 제거될 때 발생합니다|
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// "load" 이벤트를 처리합니다
+editor.toolbar.events.on("load", () => {
+ // some logic here
+});
+// 새 toolbar 데이터를 로드합니다
+editor.toolbar.parse(["file", "spacer", "scale"]);
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/overview.md
new file mode 100644
index 000000000..5d8cdc65b
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/overview.md
@@ -0,0 +1,89 @@
+---
+sidebar_label: 메서드 개요
+title: Toolbar 메서드 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Toolbar 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Toolbar 메서드 개요 {#toolbar-methods-overview}
+
+:::info
+[`parse()`](api/diagram_editor/toolbar/methods/parse_method.md) 메서드를 사용하여 Toolbar의 데이터를 조작할 수 있습니다.
+:::
+
+다음과 같은 [**Suite**](https://docs.dhtmlx.com/suite/)의 [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-methods/) 메서드를 사용할 수 있습니다:
+
+| 이름 | 설명 |
+| :------------------------------------------------------------------------------------ | :--------------------------------------------------------- |
+| [disable()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_disable_method/) | Toolbar의 항목을 비활성화하고 흐리게 표시합니다 |
+| [enable()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_enable_method/) | Toolbar의 비활성화된 항목을 활성화합니다 |
+| [getSelected()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_getselected_method/)| 선택된 항목의 ID로 이루어진 배열을 반환합니다 |
+| [getState()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_getstate_method/) | 컨트롤의 현재 값/상태를 가져옵니다 |
+| [hide()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_hide_method/) | Toolbar의 항목을 숨깁니다 |
+| [isDisabled()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_isdisabled_method/) | Toolbar의 항목이 비활성화되어 있는지 확인합니다 |
+| [isSelected()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_isselected_method/) | 지정된 Toolbar 항목이 선택되어 있는지 확인합니다 |
+| [paint()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_paint_method/) | 페이지에서 Toolbar를 다시 그립니다 |
+| [select()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_select_method/) | 지정된 Toolbar 항목을 선택합니다 |
+| [setFocus()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_setfocus_method/) | ID를 기준으로 Input 컨트롤에 포커스를 설정합니다 |
+| [setState()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_setstate_method/) | 컨트롤의 값/상태를 설정합니다 |
+| [show()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_show_method/) | Toolbar의 항목을 표시합니다 |
+| [unselect()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_unselect_method/) | 선택된 Toolbar 항목의 선택을 해제합니다 |
+
+~~~jsx {7-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// "file" 항목을 비활성화합니다
+editor.toolbar.disable("$file");
+// "file" 및 "scale" 항목을 비활성화합니다
+editor.toolbar.disable(["$file", "$scale"]);
+// 모든 항목을 비활성화합니다
+editor.toolbar.disable();
+~~~
+
+# TreeCollection 메서드 개요 {#treecollection-methods-overview}
+
+다음과 같은 [**Suite**](https://docs.dhtmlx.com/suite/)의 [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-methods/) 메서드를 사용할 수 있습니다:
+
+| 이름 | 설명 |
+| ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| [add()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_add_method/) | 컴포넌트에 항목을 추가합니다 |
+| [canCopy()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_cancopy_method/) | 컨트롤을 다른 컨트롤로 복사할 수 있는지 확인합니다 |
+| [copy()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_copy_method/) | 항목의 복사본을 추가하고 지정된 위치에 배치합니다 |
+| [eachChild()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_eachchild_method/) | 컨트롤의 하위 항목을 순회합니다 |
+| [eachParent()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_eachparent_method/) | 모든 상위 항목을 순회합니다(직속 상위 항목과 그 상위 항목 등, 상위 항목이 컴포넌트 자체가 될 때까지) |
+| [exists()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_exists_method/) | 지정된 항목이 컴포넌트에 존재하는지 확인합니다 |
+| [filter()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_filter_method/) | 특정 기준에 따라 컨트롤을 필터링합니다 |
+| [forEach()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_foreach_method/) | 트리 컬렉션의 모든 항목을 순회합니다 |
+| [getFilters()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getfilters_method/) | 적용된 필터가 포함된 객체를 반환합니다 |
+| [getId()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getid_method/) | 항목의 ID를 가져옵니다 |
+| [getIndex()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getindex_method/) | 항목의 현재 위치를 가져옵니다 |
+| [getItem()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getitem_method/) | ID를 기준으로 항목을 가져옵니다 |
+| [getItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getitems_method/) | 컨트롤의 하위 항목을 가져옵니다 |
+| [getLength()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getlength_method/) | 컨트롤의 하위 항목 수를 셉니다 |
+| [getParent()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getparent_method/) | 컨트롤의 상위 항목 ID를 가져옵니다 |
+| [getRoot()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getroot_method/) | 마스터 컴포넌트의 ID를 반환합니다 |
+| [haveItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_haveitems_method/) | 항목에 하위 항목이 있는지 확인합니다 |
+| [move()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_move_method/) | 항목을 다른 위치로 이동합니다 |
+| [refreshItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_refreshitems_method/) | 컨트롤의 하위 항목을 새로 고칩니다 |
+| [remove()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_remove_method/) | 항목을 제거합니다 |
+| [removeAll()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_removeall_method/) | 컴포넌트에서 모든 컨트롤을 지웁니다 |
+| [resetFilter()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_resetfilter_method/) | 활성 필터를 재설정합니다 |
+| [restoreOrder()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_restoreorder_method/) | 컴포넌트를 정렬/필터링 이전 상태로 복원합니다 |
+| [save()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_save_method/) | 트리 컬렉션에서 변경된 내용을 서버 측에 저장합니다 |
+| [serialize()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_serialize_method/) | 컴포넌트 데이터를 JSON, XML 또는 CSV 형식으로 직렬화합니다 |
+| [sort()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_sort_method/) | 특정 기준에 따라 컨트롤을 정렬합니다 |
+| [update()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_update_method/) | 항목을 변경합니다 |
+
+~~~jsx {7-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// 모든 toolbar 항목을 제거합니다
+editor.toolbar.data.removeAll();
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/parse_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/parse_method.md
new file mode 100644
index 000000000..cda51af71
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/parse_method.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: parse()
+title: Toolbar의 parse 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Toolbar의 parse 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# parse()
+
+### 설명 {#description}
+
+@short: Diagram Editor의 Toolbar에 항목을 로드합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+parse(items: (object | string)[]): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `items` - (필수) Toolbar에 파싱되는 항목의 배열입니다. 사용 가능한 전체 항목 목록은 [여기](api/diagram_editor/toolbar/config/items_property.md)에서 확인하세요
+
+### 예제 {#example}
+
+~~~jsx {7-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ toolbar: true
+ }
+});
+// 지정된 항목으로 toolbar를 표시합니다
+editor.toolbar.parse([{ type: "file", disabled: false }, "spacer", "scale"]);
+~~~
+
+**변경 로그**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/toolbar_methods.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/toolbar_methods.md
new file mode 100644
index 000000000..565190238
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/toolbar_methods.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: Toolbar 메서드
+title: Toolbar의 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Toolbar의 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+다음과 같은 [**Suite**](https://docs.dhtmlx.com/suite/)의 [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-methods/) 메서드를 사용할 수 있습니다:
+
+| 이름 | 설명 |
+| :------------------------------------------------------------------------------------ | :--------------------------------------------------------- |
+| [disable()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_disable_method/) | Toolbar의 항목을 비활성화하고 흐리게 표시합니다 |
+| [enable()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_enable_method/) | Toolbar의 비활성화된 항목을 활성화합니다 |
+| [getSelected()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_getselected_method/)| 선택된 항목의 ID로 이루어진 배열을 반환합니다 |
+| [getState()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_getstate_method/) | 컨트롤의 현재 값/상태를 가져옵니다 |
+| [hide()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_hide_method/) | Toolbar의 항목을 숨깁니다 |
+| [isDisabled()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_isdisabled_method/) | Toolbar의 항목이 비활성화되어 있는지 확인합니다 |
+| [isSelected()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_isselected_method/) | 지정된 Toolbar 항목이 선택되어 있는지 확인합니다 |
+| [paint()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_paint_method/) | 페이지에서 Toolbar를 다시 그립니다 |
+| [select()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_select_method/) | 지정된 Toolbar 항목을 선택합니다 |
+| [setFocus()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_setfocus_method/) | ID를 기준으로 Input 컨트롤에 포커스를 설정합니다 |
+| [setState()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_setstate_method/) | 컨트롤의 값/상태를 설정합니다 |
+| [show()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_show_method/) | Toolbar의 항목을 표시합니다 |
+| [unselect()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_unselect_method/) | 선택된 Toolbar 항목의 선택을 해제합니다 |
+
+~~~jsx {7-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// "file" 항목을 비활성화합니다
+editor.toolbar.disable("$file");
+// "file" 및 "scale" 항목을 비활성화합니다
+editor.toolbar.disable(["$file", "$scale"]);
+// 모든 항목을 비활성화합니다
+editor.toolbar.disable();
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/treecollection_methods.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/treecollection_methods.md
new file mode 100644
index 000000000..2381c95ae
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/treecollection_methods.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: TreeCollection 메서드
+title: Toolbar의 TreeCollection 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Toolbar의 TreeCollection 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+다음과 같은 [**Suite**](https://docs.dhtmlx.com/suite/)의 [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-methods/) 메서드를 사용할 수 있습니다:
+
+| 이름 | 설명 |
+| ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| [add()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_add_method/) | 컴포넌트에 항목을 추가합니다 |
+| [canCopy()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_cancopy_method/) | 컨트롤을 다른 컨트롤로 복사할 수 있는지 확인합니다 |
+| [copy()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_copy_method/) | 항목의 복사본을 추가하고 지정된 위치에 배치합니다 |
+| [eachChild()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_eachchild_method/) | 컨트롤의 하위 항목을 순회합니다 |
+| [eachParent()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_eachparent_method/) | 모든 상위 항목을 순회합니다(직속 상위 항목과 그 상위 항목 등, 상위 항목이 컴포넌트 자체가 될 때까지) |
+| [exists()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_exists_method/) | 지정된 항목이 컴포넌트에 존재하는지 확인합니다 |
+| [filter()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_filter_method/) | 특정 기준에 따라 컨트롤을 필터링합니다 |
+| [forEach()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_foreach_method/) | 트리 컬렉션의 모든 항목을 순회합니다 |
+| [getFilters()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getfilters_method/) | 적용된 필터가 포함된 객체를 반환합니다 |
+| [getId()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getid_method/) | 항목의 ID를 가져옵니다 |
+| [getIndex()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getindex_method/) | 항목의 현재 위치를 가져옵니다 |
+| [getItem()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getitem_method/) | ID를 기준으로 항목을 가져옵니다 |
+| [getItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getitems_method/) | 컨트롤의 하위 항목을 가져옵니다 |
+| [getLength()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getlength_method/) | 컨트롤의 하위 항목 수를 셉니다 |
+| [getParent()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getparent_method/) | 컨트롤의 상위 항목 ID를 가져옵니다 |
+| [getRoot()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getroot_method/) | 마스터 컴포넌트의 ID를 반환합니다 |
+| [haveItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_haveitems_method/) | 항목에 하위 항목이 있는지 확인합니다 |
+| [move()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_move_method/) | 항목을 다른 위치로 이동합니다 |
+| [refreshItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_refreshitems_method/) | 컨트롤의 하위 항목을 새로 고칩니다 |
+| [remove()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_remove_method/) | 항목을 제거합니다 |
+| [removeAll()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_removeall_method/) | 컴포넌트에서 모든 컨트롤을 지웁니다 |
+| [resetFilter()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_resetfilter_method/) | 활성 필터를 재설정합니다 |
+| [restoreOrder()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_restoreorder_method/) | 컴포넌트를 정렬/필터링 이전 상태로 복원합니다 |
+| [save()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_save_method/) | 트리 컬렉션에서 변경된 내용을 서버 측에 저장합니다 |
+| [serialize()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_serialize_method/) | 컴포넌트 데이터를 JSON, XML 또는 CSV 형식으로 직렬화합니다 |
+| [sort()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_sort_method/) | 특정 기준에 따라 컨트롤을 정렬합니다 |
+| [update()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_update_method/) | 항목을 변경합니다 |
+
+~~~jsx {7-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// 모든 toolbar 항목을 제거합니다
+editor.toolbar.data.removeAll();
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/api_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/api_overview.md
new file mode 100644
index 000000000..56d33d056
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/api_overview.md
@@ -0,0 +1,26 @@
+---
+sidebar_label: View API 개요
+title: View API 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 View 개요를 확인할 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# View API 개요 {#view-api-overview}
+
+Diagram Editor의 뷰(Toolbar, Shapebar, Editbar)의 가시성을 관리하는 데 사용할 수 있는 API 집합입니다.
+
+## View 메서드 개요 {#view-methods-overview}
+
+| Name | 설명 |
+| :---------------------------------------------------------- | :------------------------------------------------------------ |
+| [](api/diagram_editor/view/methods/hide_method.md) | @getshort(api/diagram_editor/view/methods/hide_method.md) |
+| [](api/diagram_editor/view/methods/isvisible_method.md) | @getshort(api/diagram_editor/view/methods/isvisible_method.md)|
+| [](api/diagram_editor/view/methods/show_method.md) | @getshort(api/diagram_editor/view/methods/show_method.md) |
+
+## View 이벤트 개요 {#view-events-overview}
+
+| Name | 설명 |
+| :--------------------------------------------------------- | :---------------------------------------------------- |
+| [](api/diagram_editor/view/events/afterhide_event.md) | @getshort(api/diagram_editor/view/events/afterhide_event) |
+| [](api/diagram_editor/view/events/aftershow_event.md) | @getshort(api/diagram_editor/view/events/aftershow_event) |
+| [](api/diagram_editor/view/events/beforehide_event.md) | @getshort(api/diagram_editor/view/events/beforehide_event) |
+| [](api/diagram_editor/view/events/beforeshow_event.md) | @getshort(api/diagram_editor/view/events/beforeshow_event) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/afterhide_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/afterhide_event.md
new file mode 100644
index 000000000..2811c1c66
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/afterhide_event.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: afterHide
+title: View의 afterHide 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리의 Diagram Editor 문서에서 View의 afterHide 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# afterHide
+
+### 설명 {#description}
+
+@short: Toolbar, Editbar 또는 Shapebar 뷰가 숨겨진 후 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"afterHide": (view: "toolbar" | "shapebar" | "editbar") => void;
+~~~
+
+### 매개변수 {#parameters}
+
+`afterHide` 이벤트의 콜백은 다음 매개변수와 함께 호출됩니다:
+
+- `view` - (필수) 숨겨진 뷰입니다. 자세한 내용은 [`view`](api/diagram_editor/editor/config/view_property.md) 속성을 참조하십시오.
+
+:::info
+Diagram Editor의 내부 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {9-12}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: true
+ }
+});
+
+// 이벤트에 핸들러 연결
+editor.view.events.on("afterHide", (view) => {
+ console.log("The " + view + " view of Diagram Editor was hidden");
+});
+~~~
+
+**변경 로그**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/aftershow_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/aftershow_event.md
new file mode 100644
index 000000000..ccefe60ff
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/aftershow_event.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: afterShow
+title: View의 afterShow 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리의 Diagram Editor 문서에서 View의 afterShow 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# afterShow
+
+### 설명 {#description}
+
+@short: Toolbar, Editbar 또는 Shapebar 뷰가 표시된 후 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"afterShow": (view: "toolbar" | "shapebar" | "editbar") => void;
+~~~
+
+### 매개변수 {#parameters}
+
+`afterShow` 이벤트의 콜백은 다음 매개변수와 함께 호출됩니다:
+
+- `view` - (필수) 표시된 뷰입니다. 자세한 내용은 [`view`](api/diagram_editor/editor/config/view_property.md) 속성을 참조하십시오.
+
+:::info
+Diagram Editor의 내부 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {9-12}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: false
+ }
+});
+
+// 이벤트에 핸들러 연결
+editor.view.events.on("afterShow", (view) => {
+ console.log("The " + view + " view of Diagram Editor was displayed");
+});
+~~~
+
+**변경 로그**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforehide_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforehide_event.md
new file mode 100644
index 000000000..d33e003f4
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforehide_event.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: beforeHide
+title: View의 beforeHide 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리의 Diagram Editor 문서에서 View의 beforeHide 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# beforeHide
+
+### 설명 {#description}
+
+@short: Toolbar, Editbar 또는 Shapebar 뷰가 숨겨지기 전에 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"beforeHide": (view: "toolbar" | "shapebar" | "editbar") => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+`beforeHide` 이벤트의 콜백은 다음 매개변수와 함께 호출됩니다:
+
+- `view` - (필수) 숨겨질 뷰입니다. 자세한 내용은 [`view`](api/diagram_editor/editor/config/view_property.md) 속성을 참조하십시오.
+
+:::info
+Diagram Editor의 내부 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {9-12}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: true
+ }
+});
+
+// 이벤트에 핸들러 연결
+editor.view.events.on("beforeHide", (view) => {
+ console.log("The " + view + " view of Diagram Editor will be hidden");
+});
+~~~
+
+**변경 로그**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforeshow_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforeshow_event.md
new file mode 100644
index 000000000..e334bbfbd
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforeshow_event.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: beforeShow
+title: View의 beforeShow 이벤트
+description: DHTMLX JavaScript Diagram 라이브러리의 Diagram Editor 문서에서 View의 beforeShow 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# beforeShow
+
+### 설명 {#description}
+
+@short: Toolbar, Editbar 또는 Shapebar 뷰가 표시되기 전에 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx
+"beforeShow": (view: "toolbar" | "shapebar" | "editbar") => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+`beforeShow` 이벤트의 콜백은 다음 매개변수와 함께 호출됩니다:
+
+- `view` - (필수) 표시될 뷰입니다. 자세한 내용은 [`view`](api/diagram_editor/editor/config/view_property.md) 속성을 참조하십시오.
+
+:::info
+Diagram Editor의 내부 이벤트를 처리하려면 `on()` 메서드를 사용할 수 있습니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {9-12}
+// Diagram Editor 초기화
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: false
+ }
+});
+
+// 이벤트에 핸들러 연결
+editor.view.events.on("beforeShow", (view) => {
+ console.log("The " + view + " view of Diagram Editor will be displayed");
+});
+~~~
+
+**변경 로그**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/overview.md
new file mode 100644
index 000000000..e86c17b4a
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/overview.md
@@ -0,0 +1,14 @@
+---
+sidebar_label: View 이벤트
+title: View 이벤트 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 View 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# View 이벤트 개요 {#view-events-overview}
+
+| 이름 | 설명 |
+| :--------------------------------------------------------- | :---------------------------------------------------------------- |
+| [](api/diagram_editor/view/events/afterhide_event.md) | @getshort(api/diagram_editor/view/events/afterhide_event) |
+| [](api/diagram_editor/view/events/aftershow_event.md) | @getshort(api/diagram_editor/view/events/aftershow_event) |
+| [](api/diagram_editor/view/events/beforehide_event.md) | @getshort(api/diagram_editor/view/events/beforehide_event) |
+| [](api/diagram_editor/view/events/beforeshow_event.md) | @getshort(api/diagram_editor/view/events/beforeshow_event) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/hide_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/hide_method.md
new file mode 100644
index 000000000..e22d26e83
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/hide_method.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: hide()
+title: View의 hide 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 view의 hide 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# hide()
+
+### 설명 {#description}
+
+@short: Diagram Editor의 Toolbar, Editbar, Shapebar view를 숨깁니다.
+
+:::info
+`Toolbar`, `Editbar`, `Shapebar` view를 개별적으로 숨기려면 해당 매개변수와 함께 `hide()` 메서드를 호출합니다. 이 요소를 모두 숨기려면 매개변수 없이 `hide()` 메서드를 호출합니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+hide(view?: "toolbar" | "shapebar" | "editbar"): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `toolbar` - (선택 사항) Toolbar를 숨깁니다
+- `shapebar` - (선택 사항) Shapebar를 숨깁니다
+- `editbar` - (선택 사항) Editbar를 숨깁니다
+
+### 예제 {#example}
+
+~~~jsx {5-6,8-9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+
+// Shapebar view를 숨깁니다
+editor.view.hide("shapebar");
+
+// Shapebar, Editbar, Toolbar를 숨깁니다
+editor.view.hide();
+~~~
+
+**변경 로그**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/isvisible_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/isvisible_method.md
new file mode 100644
index 000000000..f09d9f315
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/isvisible_method.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: isVisible()
+title: View의 isVisible 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 view의 isVisible 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# isVisible()
+
+### 설명 {#description}
+
+@short: Diagram Editor의 Toolbar, Editbar, Shapebar view가 표시되는지 확인합니다.
+
+### 사용법 {#usage}
+
+~~~jsx
+isVisible(view: "toolbar" | "shapebar" | "editbar"): boolean;
+~~~
+
+### 매개변수 {#parameters}
+
+- `toolbar` - (필수) Toolbar가 표시되는지 확인합니다
+- `shapebar` - (필수) Shapebar가 표시되는지 확인합니다
+- `editbar` - (필수) Editbar가 표시되는지 확인합니다
+
+### 예제 {#example}
+
+~~~jsx {9-11}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: false,
+ toolbar: true
+ }
+});
+
+// Toolbar와 Shapebar의 가시성을 확인합니다
+editor.view.isVisible("shapebar"); // false 반환
+editor.view.isVisible("toolbar"); // true 반환
+~~~
+
+**변경 로그**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/overview.md
new file mode 100644
index 000000000..f30044477
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/overview.md
@@ -0,0 +1,13 @@
+---
+sidebar_label: View 메서드
+title: View 메서드 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 View 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# View 메서드 개요 {#view-methods-overview}
+
+| 이름 | 설명 |
+| :----------------------------------------------------- | :------------------------------------------------------------- |
+| [](api/diagram_editor/view/methods/hide_method.md) | @getshort(api/diagram_editor/view/methods/hide_method.md) |
+| [](api/diagram_editor/view/methods/isvisible_method.md)| @getshort(api/diagram_editor/view/methods/isvisible_method.md) |
+| [](api/diagram_editor/view/methods/show_method.md) | @getshort(api/diagram_editor/view/methods/show_method.md) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/show_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/show_method.md
new file mode 100644
index 000000000..d9d9ebdd4
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/show_method.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: show()
+title: View의 show 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 view의 show 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# show()
+
+### 설명 {#description}
+
+@short: Diagram Editor의 Toolbar, Editbar, Shapebar view를 표시합니다
+
+:::info
+`Toolbar`, `Editbar`, `Shapebar` view를 개별적으로 표시하려면 해당 매개변수와 함께 `show()` 메서드를 호출합니다. 이 요소를 모두 표시하려면 매개변수 없이 `show()` 메서드를 호출합니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+show(view?: "toolbar" | "shapebar" | "editbar"): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `toolbar` - (선택 사항) Toolbar를 표시합니다
+- `shapebar` - (선택 사항) Shapebar를 표시합니다
+- `editbar` - (선택 사항) Editbar를 표시합니다
+
+### 예제 {#example}
+
+~~~jsx {5-6,8-9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+
+// Shapebar view를 표시합니다
+editor.view.show("shapebar");
+
+// Shapebar, Editbar, Toolbar를 표시합니다
+editor.view.show();
+~~~
+
+**변경 로그**: v6.0에서 추가
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/export/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/export/index.md
new file mode 100644
index 000000000..6c3be2f18
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/export/index.md
@@ -0,0 +1,16 @@
+---
+sidebar_label: 내보내기 메서드
+title: 내보내기 메서드 개요
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 다이어그램 내보내기 메서드에 대한 개요를 확인할 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# 내보내기 메서드 개요 {#export-methods-overview}
+
+`diagram.export` 객체의 API 메서드를 사용하면 Diagram 또는 Diagram Editor에서 데이터를 내보낼 수 있습니다.
+
+## 메서드 {#methods}
+
+| 이름 | 설명 |
+| :--------------------------- | :---------------------------------- |
+| [](api/export/pdf_method.md) | @getshort(api/export/pdf_method.md) |
+| [](api/export/png_method.md) | @getshort(api/export/png_method.md) |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/export/pdf_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/export/pdf_method.md
new file mode 100644
index 000000000..0c0c02076
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/export/pdf_method.md
@@ -0,0 +1,110 @@
+---
+sidebar_label: pdf()
+title: pdf 메서드
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 pdf 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# pdf()
+
+### 설명 {#description}
+
+@short: 다이어그램을 PDF 파일로 내보냅니다
+
+:::note
+내보내기 시 문제가 발생하지 않도록, Diagram 도형에 사용되는 모든 이미지는 base64 형식으로 설정하거나 절대 URL을 통해 설정해야 합니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+pdf(config?: object): Promise
+
+부모 도형과 그 partner 간의 연결은 항상 수평입니다. 또한 부모에 partner 항목을 추가하면, 연결이 이전에 수직이었더라도 부모 도형과 모든 자식 도형 간의 연결이 수평이 됩니다.
+
+### 마인드맵 모드의 Editor {#editor-in-the-mindmap-mode}
+
+마인드맵 모드로 초기화된 editor의 인터페이스는 세 가지 부분으로 구성됩니다.
+
+- [toolbar](guides/diagram_editor/toolbar.md)
+- [grid area](guides/diagram_editor/grid_area.md)
+- [editbar](guides/diagram_editor/editbar.md)
+
+:::note
+이 모드의 editor에는 shapebar가 없습니다
+:::
+
+editor의 마인드맵 모드에서 다이어그램을 만들려면 도형을 선택하고 새 자식을 추가해야 합니다. 도형을 한 부모 항목에서 다른 부모 항목으로 드래그할 수 있습니다. 이동한 항목은 모든 자식 항목과 함께 드래그됩니다.
+
+사용 가능한 [editbar의 사이드바 옵션](guides/diagram_editor/editbar.md)을 통해 도형의 속성을 조정할 수 있습니다. 스타일링 프로세스를 가속화하려면 `Alt (Option) + Ctrl (Cmd) + С` 조합을 사용하여 항목의 스타일을 복사하고, `Alt (Option) + Ctrl (Cmd) + V`를 사용하여 선택한 항목에 이 스타일을 적용하십시오.
+
+ 
+
+ **관련 샘플:** [Diagram Editor. 마인드맵 모드. 감정 마인드맵](https://snippet.dhtmlx.com/lo1vm0e8?text=diagram&mode=wide)
+
+마인드맵 모드의 editor에 사용자 지정 도형을 추가한 경우, 도형의 사용자 지정 속성을 편집할 수 있도록 [editbar를 구성](api/diagram_editor/editbar/config/properties_property.md)할 수 있습니다.
+
+## 다음 단계 {#whats-next}
+
+여기까지입니다. 이제 다이어그램 작업을 시작하거나 [가이드](guides/overview.md)에서 JavaScript Diagram과 Diagram Editor의 내부 세계를 계속 탐구할 수 있습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/groups/configuration_properties.md b/i18n/ko/docusaurus-plugin-content-docs/current/groups/configuration_properties.md
new file mode 100644
index 000000000..ddc179f26
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/groups/configuration_properties.md
@@ -0,0 +1,243 @@
+---
+sidebar_label: Group 속성
+title: Group 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Group 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드해 보십시오.
+---
+
+# Group 속성 {#group-properties}
+
+:::note
+색상 값은 HEX 형식으로 지정합니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+const data = [
+ // group 객체
+ {
+ type: "$group",
+ id?: string | number,
+ x?: number,
+ y?: number,
+ width: number,
+ height: number,
+ groupChildren?: array,
+ open?: boolean, // 기본값은 true
+ fixed?: boolean, // 기본값은 false
+ style?: {
+ strokeWidth?: number, // 기본값은 1
+ stroke?: string, // 기본값은 "#DEDEDE"
+ fill?: string,
+ overFill?: string,
+ partiallyFill?: string
+ },
+ exitArea?: {
+ // 기본값은 "unbound"
+ groupBehavior?: "unbound" | "boundNoBorderExtension" | "boundBorderExtension",
+ padding?: number
+ },
+ header?: {
+ height?: number, // 기본값은 40
+ fill?: string,
+ text?: string,
+ fontSize?: number, // 기본값은 14
+ lineHeight?: number, // 기본값은 14
+ textAlign?: "left" | "center" | "right", // 기본값은 "center"
+ textVerticalAlign?: "top" | "center" | "bottom", // 기본값은 "center"
+ fontStyle?: "normal" | "italic" | "oblique", // 기본값은 "normal"
+ fontColor?: string, // 기본값은 "#4C4C4C"
+ fontWeight?: string, // 기본값은 "500"
+ iconColor?: string, // 기본값은 "#808080"
+ position?: "top" | "bottom" | "left" | "right", // 기본값은 "top"
+ editable?: boolean, // 기본값은 true
+ closable?: boolean, // 기본값은 false
+ enable?: boolean // 기본값은 true
+ },
+ [key: string]?: any
+ },
+ // 그 밖의 group 객체
+];
+~~~
+
+### 설명 {#description}
+
+group 객체에는 group의 위치와 모양을 구성할 수 있는 다음과 같은 구성 속성 목록이 포함됩니다:
+
+- `type` - (필수) 요소의 유형, "$group"으로 설정합니다
+- `id` - (선택 사항) group의 고유 id
+- `x` - (선택 사항) group 위치의 x 좌표
+- `y` - (선택 사항) group 위치의 y 좌표
+- `width` - (필수) 헤더를 포함한 group의 너비 (*position: left/right*)
+- `height` - (필수) 헤더를 포함한 group의 높이 (*position: top/bottom*)
+- `groupChildren` - (선택 사항) group의 1단계 하위 항목의 id 배열
+- `open` - (선택 사항) group이 펼쳐진(*true*, 기본값) 상태로 초기화되는지 접힌(*false*) 상태로 초기화되는지를 정의합니다
+:::tip
+`open` 속성은 `header`가 `closable` 속성과 함께 초기화된 경우에 작동합니다
+:::
+- `fixed` - (선택 사항) group을 이동하고 크기를 조정하는 기능을 활성화/비활성화합니다; 기본값은 *false*입니다
+- `style` - (선택 사항) group의 스타일 설정이 포함된 객체입니다. 이 객체에는 다음 속성이 포함될 수 있습니다:
+ - `strokeWidth` - (선택 사항) group 테두리의 너비, 기본값은 1입니다
+ - `stroke` - (선택 사항) group 테두리의 색상, 기본값은 "#DEDEDE"입니다
+ - `fill` - (선택 사항) group의 배경 색상
+ - `overFill` - (선택 사항) 사용자가 항목을 잡고 group 안팎으로 이동시킬 때의 group 배경 색상 *(항목 전체가 group 안에 있는 경우에 한함)*
+ - `partiallyFill` - (선택 사항) 사용자가 항목을 잡고 group 안팎으로 이동시킬 때의 group 배경 색상 *(항목의 일부가 group 밖에 있고 `exitArea` 속성을 통해 다른 설정이 정의되지 않은 경우에 한함)*
+- `exitArea` - (선택 사항) 사용자가 항목을 group 밖으로 드래그할 때 항목에 적용될 설정이 포함된 객체입니다 (*group의 1단계 하위 항목에만 적용됩니다*). 이 객체에는 다음 속성이 포함될 수 있습니다:
+ - `groupBehavior` - (선택 사항) 사용자가 group 밖으로 하위 항목을 이동시킬 때의 동작:
+ - `"unbound"` (기본값) - 사용자는 항목을 group 안팎으로 이동시킬 수 있습니다
+ - `"boundNoBorderExtension"` - 사용자는 항목을 group 안으로 이동시킬 수 있지만, 항목이 group 안에 놓인 경우 group 밖으로 드래그할 수 없습니다. 사용자가 항목을 group 밖으로 드래그하려고 해도 group의 테두리는 확장되지 않습니다
+ - `"boundBorderExtension"` - 사용자는 항목을 group 안으로 이동시킬 수 있지만, 항목이 group 안에 놓인 경우 group 밖으로 드래그할 수 없습니다. 사용자가 항목을 group 밖으로 드래그하려고 하면 group의 테두리가 확장됩니다 **관련 샘플**: [Diagram 에디터. 기본 모드. Group과 도형의 상호작용](https://snippet.dhtmlx.com/4gxy38ek) + - `padding` - (선택 사항) 항목을 group 안으로 이동시킬 때 group과 항목 가장자리 사이의 여백을 정의합니다 + :::tip + `padding` 속성은 `groupBehavior`가 `"boundNoBorderExtension"` 또는 `"boundBorderExtension"`으로 설정된 경우에 사용할 수 있습니다 + ::: +- `header` - (선택 사항) group 헤더의 구성 속성이 포함된 객체입니다. 속성은 다음과 같습니다: + - `height` - (선택 사항) 헤더의 높이, 기본값은 40입니다 + - `fill` - (선택 사항) 헤더의 배경 색상 + - `text` - (선택 사항) 헤더에 표시될 텍스트 + - `fontSize` - (선택 사항) 픽셀 단위의 글꼴 크기, 기본값은 14입니다 + - `lineHeight` - (선택 사항) 줄 높이, 기본값은 14입니다 + - `textAlign` - (선택 사항) 헤더 내 텍스트의 정렬: `"left"`, `"center"`(기본값), `"right"` + - `textVerticalAlign` - (선택 사항) 헤더 내 텍스트의 수직 정렬: `"top"`, `"center"`(기본값), `"bottom"` + - `fontStyle` - (선택 사항) 텍스트 글꼴의 스타일: `"normal"` (기본값), `"italic"`, `"oblique"` + - `fontColor` - (선택 사항) 텍스트 글꼴의 색상, 기본값은 "#4C4C4C"입니다 + - `fontWeight` - (선택 사항) 텍스트 글꼴 굵기, 가능한 값은 다음과 같습니다: `"normal"`, `"bold"`, `"bolder"`, `"lighter"`, `"100"`~`"900"` 값이며, `"400"`은 normal과 동일하고, `"600"` 이상은 가장 굵은 글꼴입니다; 기본값은 `"500"`입니다 + - `iconColor` - (선택 사항) 헤더 아이콘의 색상, 기본값은 "#808080"입니다 + - `position` - (선택 사항) group 헤더의 위치 지정: `"top"` (기본값) | `"bottom"` | `"left"` | `"right"` + - `editable` - (선택 사항) 더블 클릭하여 헤더 텍스트를 편집하는 기능을 활성화/비활성화합니다; 기본값은 *true*입니다 + - `closable` - (선택 사항) group을 펼치거나 접는 아이콘을 표시/숨김 처리합니다; 기본값은 *false*입니다 + - `enable` - (선택 사항) group의 헤더를 표시/숨김 처리합니다; 기본값은 *true*입니다 +- `key` - (선택 사항) 내부적으로 구현된 사용자 지정 로직을 가진 커스텀 속성 + +### 예제 {#example} + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: { + text: "Top and collapsed header with tеxt alignment", + editable: true, + closable: true, + textAlign: "left", // "left", "center", "right" + textVerticalAlign: "center", // "top", "center", "bottom" + }, + // group의 하위 항목 + groupChildren: [1.1, 1.2], + open: false + }, + // group에 넣을 도형을 구성합니다 + { type: "rectangle", id: 1.1, x: 50, y: 75, text: "Shape 1.1" }, + { type: "rectangle", id: 1.2, x: 200, y: 75, text: "Shape 1.2" } +]; +~~~ + +**관련 문서**: [Group 구성하기](/groups/) + +## "project" 객체 전용 속성 {#properties-specific-for-project-object} + +`"project"` 객체는 작업과 마일스톤을 위한 컨테이너로 사용되며, [group](/groups/)처럼 작동하여 다양한 중첩 수준의 PERT 차트를 생성할 수 있게 해주고 시각적 그룹화 기능을 제공합니다. + +### 사용법 {#usage} + +~~~jsx +const data = [ + // project 객체 + { + type: "project", + id: string | number, + parent?: string | number | null, + text?: string, // header.text 속성을 설정합니다 + open?: boolean, + + // 자동으로 생성됩니다 + x?: number, + y?: number, + width?: number, + height?: number, + groupChildren?: (string | number)[], + style?: { + fill?: string, // 기본값은 "#20B56D08" + stroke?: string, // 기본값은 "#20B56D33" + borderStyle?: string, // 기본값은 "dashed" + }, + header?: { + height?: number, // 기본값은 40 + text?: string, // text 속성에 의해 자동으로 생성됩니다 + closable?: boolean, // 기본값은 false + enable?: boolean, // 기본값은 true + fill?: string // 기본값은 "inherit" + } + }, + // 그 밖의 project 객체 +] +~~~ + +### 설명 {#description} + +`"project"` 객체를 위한 데이터 세트를 준비할 때 다음 구성 속성을 사용할 수 있습니다: + +- `type` - (필수) 요소의 유형, `"project"`로 설정합니다 +- `id` - (선택 사항) project의 고유 id +- `parent` - (선택 사항) project 부모의 id +- `text` - (선택 사항) project에 대한 설명 +- `open` - (선택 사항) project가 펼쳐진(*true*, 기본값) 상태로 초기화되는지 접힌(*false*) 상태로 초기화되는지를 정의합니다 + +아래 속성은 자동으로 생성됩니다. 이 속성들은 렌더링 중에 계산되므로 직접 지정해서는 안 됩니다. + +- `x` - (선택 사항) project 위치의 x 좌표 +- `y` - (선택 사항) project 위치의 y 좌표 +- `width` - (필수) 헤더를 포함한 project의 너비 (*position: left/right*) +- `height` - (필수) 헤더를 포함한 project의 높이 (*position: top/bottom*) +- `groupChildren` - (선택 사항) project의 1단계 하위 항목의 id 배열 +- `style` - (선택 사항) project의 스타일 설정이 포함된 객체입니다. 이 객체에는 다음 속성이 포함될 수 있습니다: + - `fill` - (선택 사항) project의 배경 색상 + - `stroke` - (선택 사항) project 테두리의 색상 + - `borderStyle` - (선택 사항) project 테두리의 스타일 +- `header` - (선택 사항) project 헤더의 구성 속성이 포함된 객체입니다. 속성은 다음과 같습니다: + - `height` - (선택 사항) 헤더의 높이, 기본값은 40입니다 + - `text` - (선택 사항) 헤더에 표시될 텍스트 (`text` 속성에 의해 자동으로 생성됨) + - `closable` - (선택 사항) group을 펼치거나 접는 아이콘을 표시/숨김 처리합니다; 기본값은 *false*입니다 + - `enable` - (선택 사항) project의 헤더를 표시/숨김 처리합니다; 기본값은 *true*입니다 + - `fill` - (선택 사항) 헤더의 배경 색상 + + +### 예제 {#example} + +~~~jsx +const data = [ + { + "id": "4.2", + "text": "QA Testing", + "type": "project", + "parent": "4", + "start_date": new Date(2026, 1, 18), + "duration": 3, + "progress": 0, + "open": true + }, + { + "id": "4.2.1", + "text": "Functional Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 18), + "duration": 2 + }, + { + "id": "4.2.2", + "text": "Usability Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 20), + "duration": 1 + } +]; +~~~ + +**관련 문서**: [PERT 모드에서 도형 그룹화하기](/groups/#grouping-shapes-in-the-pert-mode) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/groups/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/groups/index.md new file mode 100644 index 000000000..2bbfaf163 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/groups/index.md @@ -0,0 +1,186 @@ +--- +sidebar_label: Groups +title: Groups +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Group에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드해 보십시오. +--- + +# Groups {#groups} + +## Group 개요 {#group-overview} + +Group은 Diagram의 별도의 항목 유형입니다. 다양한 방식으로 도형이나 다른 group을 그룹화하여 단순하거나 더 복잡한 다이어그램을 그릴 수 있습니다. 1단계 group과 중첩된 group을 모두 생성할 수 있으며, 이들의 모양과 동작을 구성할 수 있습니다. + +:::note +Group은 Diagram/Diagram Editor의 기본 모드(type: `"default"`)에서만 사용할 수 있습니다. +::: + + + +## Group 생성하기 {#creating-groups} + +group을 생성하려면, 다이어그램에 로드할 관련 JSON 구조를 준비하는 동안 group 객체 내부의 `type` 속성 값으로 *"$group"*을 지정합니다: + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: { + text: "User Access" + }, + groupChildren: ["1.1", "1.2"] + }, + { + type: "it", + id: "1.1", + x: 50, + y: 75, + text: "Remote Desktop" + }, + { + type: "it", + id: "1.2", + x: 200, + y: 75, + text: "Login Server" + }, +]; + +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container"); +diagram.data.parse(data); +~~~ + +### 속성 {#properties} + +group의 위치와 모양을 구성할 수 있는 [`group` 객체의 전체 구성 속성 목록](groups/configuration_properties.md)을 참조하십시오. + +## PERT 모드에서 도형 그룹화하기 {#grouping-shapes-in-the-pert-mode} + +Diagram의 PERT 모드에서 `"task"` 및 `"milestone"` 유형의 도형을 그룹화하려면 다이어그램의 데이터 세트에서 `"project"` 객체를 사용합니다. `"project"` 객체는 작업과 마일스톤의 컨테이너 역할을 하며, group처럼 작동합니다. 이 객체는 다양한 중첩 수준의 PERT 차트를 생성할 수 있게 해주고 시각적 그룹화를 제공합니다. + +~~~jsx +const data = [ + { + "id": "4.2", + "text": "QA Testing", + "type": "project", + "parent": "4", + "start_date": new Date(2026, 1, 18), + "duration": 3, + "progress": 0, + "open": true + }, + { + "id": "4.2.1", + "text": "Functional Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 18), + "duration": 2 + }, + { + "id": "4.2.2", + "text": "Usability Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 20), + "duration": 1 + } +]; +~~~ + + + +### 속성 {#properties} + +project 내 작업과 마일스톤의 위치와 모양을 구성할 수 있는 [`"project"` 객체의 전체 구성 속성 목록](groups/configuration_properties.md#properties-specific-for-project-object)을 참조하십시오. + +## Group 헤더 구성하기 {#configuring-the-group-header} + +group의 헤더는 기본적으로 비활성화되어 있습니다. 헤더가 있는 group을 생성하려면 group의 구성 객체에서 `header` 속성을 지정해야 합니다. + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: {} + } +]; +~~~ + +이 속성에는 group 헤더의 구성을 손쉽게 조정할 수 있는 여러 속성이 포함되어 있습니다. +예를 들어, 헤더의 높이와 위치를 정의하고, 헤더의 텍스트를 지정하고, 그 설정을 조정할 수 있습니다. + + + +[group 객체의 전체 API 속성 목록](groups/configuration_properties.md)을 확인하십시오. + +### 헤더 아이콘 {#a-header-icon} + +group을 접거나 펼치려면 [header](groups/configuration_properties.md) 속성의 `closable` 속성을 활성화하십시오. 그 결과, 사용자가 group을 펼치거나 접을 수 있는 아이콘이 헤더에 추가됩니다. + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: { + text: "Top and collapsed header with tеxt alignment", + closable: true + } + } +]; +~~~ + +[group 객체](groups/configuration_properties.md)의 `iconColor` 속성을 통해 아이콘의 색상을 변경할 수 있습니다. + +## Group 항목의 동작 구성하기 {#configuring-the-behavior-of-group-items} + +기본적으로, group의 하위 항목을 group 밖으로 드래그하여 다른 group 안으로 드래그해 넣을 수 있습니다. +group 항목의 동작 방식을 변경하려면 [group 객체](groups/configuration_properties.md)의 `exitArea` 속성에 있는 `groupBehavior` 및 `padding` 속성을 사용하십시오. + +:::note +`exitArea` 속성은 구성 대상 group의 1단계 하위 항목의 동작만 정의합니다. +::: + + + +`groupBehavior` 속성의 `"unbound"` 및 `"boundBorderExtension"` 값을 사용하면 하위 항목을 group 밖으로 이동시킬 수 있는지 여부를 정의하고, 사용자가 항목을 밖으로 드래그하려고 할 때 group의 테두리가 확장되도록 만들 수 있습니다. 필요한 경우 `"boundNoBorderExtension"` 값을 통해 항목을 group 밖으로 드래그하는 기능을 비활성화할 수도 있습니다. + + + +`groupBehavior`가 `"boundNoBorderExtension"` 또는 `"boundBorderExtension"`으로 설정된 경우, 항목을 group 안으로 이동시킬 때 group과 항목 가장자리 사이의 여백을 지정할 수 있습니다. 이를 위해 `padding` 속성을 사용하십시오: + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 830, + height: 400, + x: 0, + y: 0, + exitArea: { + groupBehavior: "boundBorderExtension", + padding: 10 + }, + //fixed: true, + groupChildren: ["1.1", "1.2", "1.3"] + }, + // ... +]; +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/ai-integrations/ai-demo.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/ai-integrations/ai-demo.md new file mode 100644 index 000000000..881c2c951 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/ai-integrations/ai-demo.md @@ -0,0 +1,88 @@ +--- +sidebar_label: AI 통합 데모 +title: AI 기반 Diagram 구축 +description: DHTMLX Diagram AI 데모를 실행하기 위한 단계별 가이드입니다. OpenAI API를 사용한 텍스트 기반 조직도 생성 기능과 라이브 미리보기 및 JSON 편집기를 제공합니다. +--- + +# AI 기반 Diagram 구축 {#building-ai-powered-diagram} + +DHTMLX Diagram은 AI와 통합하여 AI 기반 다이어그램 제작 애플리케이션을 만들 수 있습니다. 자연어로 제공된 요청을 기반으로 조직도를 생성하는 애플리케이션을 구축하기 위해 DHTMLX Diagram을 AI와 함께 사용하는 방법에 대한 예제를 준비했습니다. + +[데모 앱](https://dhtmlx.com/docs/demo/ai-org-chart-builder/)은 텍스트를 Diagram으로 변환하는 기능, AI 기반 JSON 생성, 완성된 Diagram의 실시간 미리보기, 그리고 생성된 JSON 데이터를 확인하고 조정하여 Diagram 미리보기를 즉시 업데이트할 수 있는 내장 코드 편집기 등의 기능을 포함합니다. 자세한 내용은 관련 [GitHub 저장소](https://github.com/DHTMLX/diagram-org-chart-builder-ai-demo)를 참고하세요. + +## 프로젝트 설정 {#project-setup} + +프로젝트를 다운로드하려면 다음 명령어를 사용하여 저장소를 클론하세요: + +~~~jsx +git clone diagram-org-chart-builder-ai-demo +~~~ + +그런 다음 아래 명령어를 사용하여 프로젝트 저장소로 이동하세요: + +~~~jsx +cd diagram-org-chart-builder-ai-demo +~~~ + +### 종속성 설치하기 {#installing-dependencies} + +종속성을 설치하고 앱을 실행하려면 패키지 관리자가 필요합니다. 이 가이드에서는 [npm](https://www.npmjs.com/)을 사용합니다 — 다음 명령어를 호출하여 데모 앱을 설치하세요: + +~~~jsx +npm install +~~~ + +### 환경 변수 조정하기 {#adjusting-environment-variables} + +그런 다음 환경 변수를 구성해야 합니다. 이를 위해 `env.sample` 파일의 내용을 복사하여 **diagram-org-chart-builder-ai-demo** 디렉터리 안에 `.env`라는 이름의 새 파일을 생성하세요. +새로 생성된 `.env` 파일에는 키와 구성 정보가 저장됩니다. 아래에 제공된 필수 값을 입력하세요: + +~~~jsx title="diagram-org-chart-builder-ai-demo/.env" +# --- OpenAI API 구성 --- +OPENAI_API_KEY=sk-YourSecretApiKeyGoesHere +OPENAI_BASE_URL=https://api.openai.com/v1 + +# --- 보안 구성 --- +CORS_ALLOWED_ORIGINS=http://localhost:3001,http://127.0.0.1:3001,http://localhost:5500,http://127.0.0.1:5500 + +# --- 서버 구성 (선택 사항) --- +PORT=3001 +~~~ + +:::info +`.env` 파일에는 민감한 정보가 포함되어 있으므로 업로드하지 마세요! +::: + +아래에서 `.env` 파일 변수에 대한 설명을 확인하세요: + +- `OPENAI_API_KEY`: (필수) AI 서비스용 비밀 API 키입니다. +- `OPENAI_BASE_URL`: AI 서비스의 API 엔드포인트입니다. 프록시 또는 OpenAI API와 호환되는 다른 제공업체를 사용하도록 변경할 수 있습니다. +- `CORS_ALLOWED_ORIGINS`: 중요한 보안 설정입니다. 백엔드 서버에 연결이 허용된 웹 주소를 쉼표로 구분한 목록입니다. 프로덕션 환경에서는 이 값을 공개 프런트엔드 URL로 **반드시** 변경해야 합니다(예: `https://myapp.com`). +- `PORT`: (선택 사항) 서버가 실행될 포트 번호입니다. 설정하지 않으면 기본값은 3001입니다. + +### 애플리케이션 실행하기 {#running-the-application} + +애플리케이션을 시작하려면 앱 디렉터리에서 다음 명령어를 사용하세요: + +~~~jsx +npm start // 이것은 필수 시작 명령어입니다 +~~~ + +터미널에 다음과 같은 출력이 표시됩니다: + +~~~jsx +Server started on port 3001. +~~~ + +그런 다음 웹 브라우저를 열고 `http://localhost:3001`로 이동하면 Diagram을 생성할 준비가 된 애플리케이션을 확인할 수 있습니다. + +## 데모 앱의 작동 방식 {#how-the-demo-app-works} + +텍스트 요청을 Diagram으로 변환하는 기본 단계는 다음과 같습니다: + +- 먼저, 사용자가 일반적인 표현으로 Diagram에 대한 텍스트 설명을 입력합니다. 예를 들어: "최고 관리자 한 명과 각각 두 명의 직원을 둔 다섯 개의 부서로 구성된 Diagram" +- 그런 다음 프롬프트가 백엔드로 전송되고, AI 서비스가 요청을 기반으로 구조화된 JSON 구성을 생성합니다. +- 그 후 프런트엔드가 결과 데이터를 받아 대화형 DHTMLX Diagram을 즉시 렌더링합니다. +- 다음으로, 해당 JSON 코드가 Diagram 아래의 코드 편집기에 표시됩니다. 사용자는 코드를 미세 조정하고 결과 Diagram을 실시간으로 편집할 수 있습니다. +- 마지막으로, 사용자는 생성된 데이터를 JSON 파일로 저장하거나 Diagram을 PDF 또는 PNG 파일로 내보낼 수 있습니다. + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md new file mode 100644 index 000000000..64bb49511 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md @@ -0,0 +1,242 @@ +--- +sidebar_label: DHTMLX MCP 서버 +title: AI 코딩 어시스턴트와 DHTMLX MCP 서버 사용하기 +description: MCP 서버를 통해 AI 코딩 어시스턴트를 실시간 DHTMLX Diagram 문서와 연결합니다. 도형, 스윔레인, 조직도, Diagram Editor 등을 다룹니다. +--- + +# AI 코딩 어시스턴트와 DHTMLX MCP 서버 사용하기 {#using-dhtmlx-mcp-server-with-ai-coding-assistants} + +다이어그램 애플리케이션을 구축하려면 도형, 연결, 레이아웃, 에디터 구성에 대한 정밀한 제어가 필요합니다. AI 도구가 오래된 학습 데이터를 기반으로 [DHTMLX Diagram](/) 코드를 생성하면 API가 일치하지 않거나 속성이 누락되거나 더 이상 존재하지 않는 구성 옵션이 사용되는 결과가 발생합니다. + +DHTMLX Model Context Protocol(MCP) 서버는 AI 도구에 실시간 Diagram 문서에 대한 직접적인 액세스 권한을 부여하여 이 문제를 해결합니다. [스윔레인](/swimlanes/), [커스텀 도형](shapes/custom_shape.md), [Diagram Editor](guides/diagram_editor/initialization.md) 또는 라이브러리의 다른 어떤 부분을 다루든, 어시스턴트는 응답을 생성하기 전에 최신 참조 자료를 가져옵니다. + +**MCP 엔드포인트** + +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +:::note +DHTMLX MCP 서버는 DHTMLX Diagram뿐만 아니라 모든 주요 DHTMLX 제품을 지원합니다. 어떤 구성 요소로 작업하든 동일한 엔드포인트와 구성 단계가 적용됩니다. +::: + +## Diagram 작업에서 MCP 서버가 유용한 부분 {#where-mcp-server-helps-with-diagram} + +MCP 서버는 전체 DHTMLX Diagram 문서를 인덱싱합니다. MCP 서버가 유용하게 사용되는 일반적인 시나리오는 다음과 같습니다. + +- [도형](shapes/default_shapes.md), [선](/lines/), [그룹](/groups/), [스윔레인](/swimlanes/)의 최신 API 조회. +- 설명을 기반으로 즉시 실행 가능한 Diagram 코드를 생성. +- [Editor](guides/diagram_editor/initialization.md) 구성 옵션, 툴바 컨트롤, 이벤트 처리 방식 탐색. +- [내보내기](guides/data_export.md) 옵션을 확인하고 PDF 또는 PNG 출력을 생성하는 방법을 이해. +- [다이어그램 구성](guides/diagram/configuration.md)을 사용하여 기본 모드 다이어그램의 자동 레이아웃 옵션을 구성. +- 사용 가능한 [데이터 메서드](guides/loading_data.md)를 사용하여 다이어그램 데이터를 로드하고 다시 직렬화. +- 사용자 상호작용에 대응하기 위해 [Diagram 및 Editor 이벤트](guides/event_handling.md)를 처리. +- React, Vue, Angular, Svelte에 대한 [TypeScript 지원](guides/using_typescript.md) 및 프레임워크 통합 탐색. + +## DHTMLX MCP 서버의 작동 방식 {#how-dhtmlx-mcp-server-works} + +서버는 검색 증강 생성(Retrieval-Augmented Generation, RAG) 파이프라인과 MCP를 결합하여 AI 어시스턴트가 학습 데이터에만 의존하지 않고 필요에 따라 문서를 조회할 수 있도록 합니다. + +예를 들어 *"커스텀 셀 헤더로 스윔레인 다이어그램을 구성하려면 어떻게 해야 하나요?"*라고 질문하면, 어시스턴트는 MCP 엔드포인트를 통해 프롬프트를 전송합니다. 서버는 이를 스윔레인 문서와 매칭하여 관련 참조 페이지를 가져오고 이를 컨텍스트로 반환합니다. 이후 어시스턴트는 학습 시점의 스냅샷이 아니라 최신 API를 기반으로 코드를 생성합니다. + +## AI 도구를 Diagram에 연결하기 {#connecting-ai-tools-to-diagram} + +AI 개발 도구는 일반적으로 CLI 명령이나 JSON 구성 파일을 통해 MCP를 지원합니다. 두 경우 모두 핵심 단계는 서버 URL을 등록하는 것입니다. + +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +가장 많이 사용되는 도구에 대한 설정 방법은 아래에 나와 있습니다. + +### Claude Code 설정 {#claude-code-setup} + +:::info +Claude Code에 MCP 서버를 연결하는 방법에 대한 자세한 내용은 [공식 문서](https://code.claude.com/docs/en/mcp)에서 확인할 수 있습니다. +::: + +Claude Code에 DHTMLX MCP 서버를 추가하는 가장 빠른 방법은 CLI를 사용하는 것입니다. + +~~~bash +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +수동으로 구성하려면 `.mcp.json` 파일에 다음 항목을 추가합니다. + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor 설정 {#cursor-setup} + +:::info +Cursor의 단계별 MCP 설정 방법은 [공식 문서](https://cursor.com/en-US/docs/mcp)에서 확인할 수 있습니다. +::: + +다음 단계에 따라 DHTMLX MCP 서버를 Cursor에 연결합니다. + +1. 설정을 엽니다(Mac에서는 `Cmd+Shift+J`, Windows/Linux에서는 `Ctrl+Shift+J`) +2. **Tools & MCP**로 이동합니다 +3. **Add Custom MCP**를 클릭합니다 +4. 다음 구성을 붙여넣습니다 + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Google Antigravity {#google-antigravity} + +#### Antigravity 2.0 {#antigravity-20} + +:::info +Antigravity에서 MCP 서버 통합에 대한 자세한 내용은 [공식 문서](https://antigravity.google/docs/mcp)를 참고하세요. +::: + +다음은 DHTMLX MCP 서버를 Google Antigravity에 연결하기 위해 완료해야 하는 단계입니다. + +1. 명령 팔레트를 엽니다 +2. "mcp add"를 입력합니다 +3. "HTTP"를 선택합니다 +4. 다음 값을 입력합니다 +- 이름: +~~~ +dhtmlx-mcp +~~~ +- URL: +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +#### Antigravity CLI {#antigravity-cli} + +:::info +Gemini CLI에서 Antigravity CLI로의 마이그레이션에 대해 알아보려면 [관련 가이드](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes)를 확인하세요. +::: + +DHTMLX MCP 서버를 Antigravity CLI에 연결하려면 다음 위치 중 한 곳에 `mcp_config.json`을 생성합니다. + +- 전역: `~/.gemini/config/mcp_config.json` +- 워크스페이스: `.agents/mcp_config.json` + +다음 구성을 추가합니다. + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "serverUrl": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +그런 다음 터미널에서 `agy`를 실행합니다. + +### ChatGPT 설정 {#chatgpt-setup} + +:::info +ChatGPT에 MCP 서버를 연결하는 전체 가이드는 [공식 문서](https://developers.openai.com/api/docs/guides/tools-connectors-mcp)를 참고하세요. +::: + +다음 단계에 따라 DHTMLX MCP 서버를 ChatGPT에 연결합니다. + +1. **Settings** → **Apps & Connectors**로 이동합니다 +2. **Advanced settings**를 클릭합니다 +3. **Developer mode**를 활성화합니다 +4. **Apps & Connectors** 화면으로 돌아가서 "Create"를 클릭합니다 +5. 커넥터를 구성합니다: +- 이름: +~~~ +dhtmlx-mcp +~~~ +- URL: +~~~ +https://docs.dhtmlx.com/mcp +~~~ +- 인증: `No authentication` +6. **Create**를 클릭합니다 + +연결되면 ChatGPT는 대화 중 질문에 답할 때 Diagram 문서를 가져옵니다. + +:::note +ChatGPT와의 MCP 통합은 응답 시간이 느려질 수 있다는 점에 유의하세요. 더 빠른 환경을 원한다면 이 페이지에 나열된 다른 도구 중 하나를 사용하는 것을 고려하세요. +::: + +### 기타 도구 {#other-tools} + +대부분의 최신 AI 코딩 도구(Windsurf, Cline, Continue.dev 등 포함)는 설정에서 "Model Context Protocol", "Context Sources", "Custom integrations" 등의 이름으로 MCP를 제공합니다. 소스 URL로 `https://docs.dhtmlx.com/mcp`를 추가하세요. + +## 개인정보 보호 및 데이터 처리 {#privacy-and-data-handling} + +DHTMLX MCP 서버는 원격으로 실행되는 클라우드 전용 서비스로, 로컬 환경에 영향을 주지 않으며 개인 사용자 데이터를 저장하지 않습니다. 쿼리는 디버깅 및 서비스 개선 목적으로 기록될 수 있습니다. + +보다 엄격한 개인정보 보호가 필요한 팀은 쿼리 로깅이 비활성화된 상용 배포를 요청할 수 있습니다. 자세한 내용은 `info@dhtmlx.com`으로 문의하세요. + +## AI와 함께 사용하는 Diagram 예제 프롬프트 {#example-prompts-for-diagram-with-ai} + +MCP 서버가 연결되면 어시스턴트가 Diagram API의 어느 부분을 조회해야 하는지 알 수 있도록 구체적인 목표를 중심으로 프롬프트를 작성하세요. 아래 프롬프트는 작업 유형별로 정리되어 있습니다. 필요에 따라 복사하여 수정해서 사용할 수 있습니다. + +**다이어그램 생성하기** + +~~~ +DHTMLX Diagram에서 커스텀 섹션이 있는 스윔레인 다이어그램을 어떻게 만드나요? 문서를 참고해서 답변해 주세요. +~~~ +~~~ +DHTMLX Diagram에서 JSON 데이터 세트를 기반으로 조직도를 만들고 싶습니다. 자동 레이아웃은 어떻게 구성하나요? +~~~ +~~~ +DHTMLX Diagram에서 결정 노드와 여러 개의 링크가 있는 플로우차트를 어떻게 만드나요? +~~~ +~~~ +DHTMLX Diagram에서 도형을 자동으로 배치하려면 autoPlace()를 어떻게 사용하나요? +~~~ + +**도형 다루기** + +~~~ +DHTMLX Diagram에 아이콘이 있는 커스텀 도형을 추가하고 싶습니다. 도형 템플릿은 어떻게 정의하나요? +~~~ +~~~ +DHTMLX Diagram Editor에서 사용자가 배치할 수 있는 도형을 어떻게 제한하나요? +~~~ +~~~ +DHTMLX Diagram에서 모든 도형의 기본 텍스트 스타일과 배경색을 어떻게 변경하나요? +~~~ + +**에디터 구성하기** + +~~~ +DHTMLX Diagram에서 도형 텍스트에 대한 인라인 편집을 활성화하고 싶습니다. +~~~ +~~~ +DHTMLX Diagram Editor에 커스텀 툴바 버튼을 어떻게 추가하나요? +~~~ + +**데이터 및 내보내기** + +~~~ +DHTMLX Diagram을 PNG 파일로 어떻게 내보내나요? +~~~ +~~~ +DHTMLX Diagram은 직렬화된 데이터에 어떤 형식을 사용하며, 이를 다시 로드하려면 어떻게 해야 하나요? +~~~ + +## 효과적인 Diagram 프롬프트 작성 팁 {#tips-for-effective-diagram-prompts} + +- **API 대상을 명확히 하세요.** 다이어그램 인스턴스와 에디터를 구분하세요. 예를 들어 "DHTMLX Diagram Editor에서"와 "다이어그램 객체에서"를 구분합니다. 대상이 명확할수록 서버가 더 관련성 높은 문서를 가져옵니다. +- **도형 유형을 포함하세요.** "스윔레인 도형" 또는 "HTML 콘텐츠가 있는 커스텀 도형"과 같은 프롬프트는 일반적인 "도형"보다 올바른 참조 페이지를 더 빠르게 가져옵니다. +- 프롬프트에 **"문서를 참고해 주세요"**를 추가하세요. 이 표현은 어시스턴트가 학습 데이터로 답변하는 대신 MCP 조회를 실행하도록 신호를 보냅니다. +- **예상하는 버전 동작을 구체적으로 명시하세요.** 생성된 코드가 문서의 내용과 일치하지 않으면 "최신 DHTMLX Diagram 문서를 기준으로"라는 문구를 추가하여 새로 조회하도록 유도하세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/customization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/customization.md new file mode 100644 index 000000000..c8ffe9780 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/customization.md @@ -0,0 +1,225 @@ +--- +sidebar_label: 항목 사용자 지정 +title: 항목 사용자 지정 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 항목 사용자 지정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# 항목 사용자 지정 + +객체 내부의 다양한 [구성 속성](/category/items-api/)을 사용하여 Diagram 항목의 모양을 수정할 수 있습니다. 또한 사용자 지정 도형을 만들어 Diagram의 룩앤필을 변경할 수도 있습니다. + +## 구성 속성을 통한 도형 및 선 스타일 지정 {#styling-shapes-and-lines-via-the-configuration-properties} + +### 도형 스타일 지정 {#styling-shapes} + +도형 객체는 도형의 룩앤필을 수정하는 데 사용할 수 있는 다양한 속성을 제공합니다. + + + +동일한 유형의 모든 도형을 한 번에 스타일링하는 좋은 방법은 Diagram의 [`defaults`](api/diagram/defaults_property.md) 속성을 통해 도형의 스타일 설정을 지정하는 것입니다. + +~~~jsx +const defaults = { + start: { + fill: "#FE9998", + stroke: "#FE9998", + fontColor: "#FFF", + lineHeight: 16 + }, + end: { + fill: "#FE9998", + stroke: "#FE9998", + fontColor: "#FFF", + lineHeight: 16 + }, + // ... +}; +~~~ + +[도형 객체 속성의 전체 목록 보기](shapes/configuration_properties.md). + +### 선 스타일 지정 {#styling-lines} + +커넥터 선의 모양을 변경하려면 선 객체 내부의 필요한 구성 속성을 사용하세요. + +~~~jsx +const data = [ + { + id: "1-2", + from: "1", + to: "2", + type: "line", + strokeType: "dash", // 대시 선 + stroke: "#fa55d1" // 선 색상 + } +]; +~~~ + +[선 객체 속성의 전체 목록 보기](lines/configuration_properties.md). + +예제를 확인하세요. + + + +## 도형 템플릿 정의 {#defining-the-shapes-template} + +Diagram에 새로운 유형의 도형을 추가하고 이에 대한 템플릿을 정의하여 사용자 지정된 Diagram을 만들 수 있습니다. 이를 위해 Diagram 객체의 [`addShape()`](api/diagram/addshape_method.md) 메서드를 사용하세요. + +### 기본 모드에서의 예제 {#example-in-the-default-mode} + + + +### 조직도 모드에서의 예제 {#example-in-the-org-chart-mode} + + + +### 마인드맵 모드에서의 예제 {#example-in-the-mindmap-mode} + + + +### PERT 모드에서의 예제 {#example-in-the-pert-mode} + + + +## 대상 도형 스타일 지정 {#styling-target-shapes} + +Diagram Editor에서 조직도 및 마인드맵 차트를 사용하는 동안, 대상 항목에 사용자 지정 스타일을 추가할 수 있습니다. + +:::note +스타일 지정은 이동된 항목의 부모 또는 `giveItem: false`가 설정된 이동된 항목에는 적용되지 않습니다. +::: + +~~~jsx + +~~~ + +## 구성 속성을 통한 그룹 스타일 지정 {#styling-groups-via-the-configuration-properties} + +### 그룹 스타일 지정 {#styling-the-group} + +그룹에 사용자 지정 스타일을 지정하려면 [그룹 객체](groups/configuration_properties.md)의 `style` 속성을 사용할 수 있습니다. 예를 들면 다음과 같습니다. + + + +### 그룹 헤더 스타일 지정 {#styling-the-group-header} + +[그룹 객체](groups/configuration_properties.md)의 `header` 속성에 있는 속성을 통해 그룹 헤더의 기본 스타일을 변경할 수 있습니다. + + + +## 구성 속성을 통한 스윔레인 스타일 지정 {#styling-swimlanes-via-the-configuration-properties} + +### 스윔레인 스타일 지정 {#styling-the-swimlane} + +[스윔레인 객체](swimlanes/configuration_properties.md#properties-of-a-swimlane)의 `style` 속성을 통해 스윔레인의 `strokeWidth`, `stroke`, `fill` 설정을 사용자 지정할 수 있습니다. + +~~~jsx +const data = [ + { + "type": "$swimlane", + "width": 970, + "height": 790, + "header": { + "text": "Game levels and locations", + "closable": true + }, + "layout": [ + ["1"], + ["2"], + ["3"], + ["4"], + ["5"] + ], + "style": { + "strokeWidth": 5, + "stroke": "#083796", + "fill": "#D4DAE4" + } + } +]; +~~~ + +### 스윔레인 헤더/서브헤더 스타일 지정 {#styling-the-swimlane-headerssub-headers} + +[스윔레인 객체](swimlanes/configuration_properties.md#properties-of-a-swimlane)의 `header`, `subHeaderRows`, `subHeaderCols` 속성에는 스윔레인의 헤더와 서브헤더를 사용자 지정하기 위한 추가 속성 세트가 포함되어 있습니다. + +예를 들어, `subHeaderCols` 속성을 통해 스윔레인 상단 서브헤더의 배경 색상을 변경할 수 있습니다. + +~~~jsx +const data = [ + { + "id": "main", + "type": "$swimlane", + "height": 730, + "width": 1195, + "header": { + "closable": true, + "text": "Waterfall diagram template" + }, + "layout": [ + [1, 2, 3, 4] + ], + "subHeaderCols": { + "headers": [ + { + "text": "September", + "fill": "#f35c4f66" + }, + { + "text": "October", + "fill": "#9b60f866" + }, + { + "text": "November", + "fill": "#ffae1266" + }, + { + "text": "December", + "fill": "#3cc97a66" + } + ] + } + } +]; +~~~ + +전체 예제를 확인하세요. + + + +### 스윔레인 셀 스타일 지정 {#styling-swimlane-cells} + +스윔레인의 개별 셀을 사용자 지정해야 하는 경우, [스윔레인 셀 객체](swimlanes/configuration_properties.md#properties-of-a-swimlane-cell) (`type:"$sgroup"`)의 `style` 속성을 사용하세요. + +~~~jsx +const data = [ + { + "id": "main", + "type": "$swimlane", + "height": 730, + "width": 1195, + "layout": [ + [1, 2, 3, 4] + ], + // ... + }, + { + "id": 1, + "type": "$sgroup", + "style": { + "fill": "#D4DAE4" + }, + "x": 0, + "y": 80 + } +]; +~~~ + +**관련 샘플**: [Diagram. 기본 모드. Waterfall Diagram 템플릿](https://snippet.dhtmlx.com/k5vlvj8i) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/data_export.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/data_export.md new file mode 100644 index 000000000..764de3652 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/data_export.md @@ -0,0 +1,41 @@ +--- +sidebar_label: 다이어그램 내보내기 +title: 다이어그램 내보내기 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 다이어그램 내보내기에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드해 보십시오. +--- + +# 다이어그램 내보내기 + +Export 객체의 [pdf()](api/export/pdf_method.md)/[png()](api/export/png_method.md) 메서드를 통해 다이어그램을 PDF 또는 PNG 형식으로 내보낼 수 있습니다: + + + +내보내기 설정을 조정하려면 필요한 메서드에 구성 옵션이 있는 객체를 전달합니다. + +사용 가능한 설정 목록을 확인하십시오: + +- [pdf()](api/export/pdf_method.md) 메서드의 경우 +- [png()](api/export/png_method.md) 메서드의 경우 + +## 스타일 내보내기 {#exporting-styles} + +기본적으로 Diagram 페이지에 포함된 모든 CSS 스타일이 내보내기 서비스로 전송됩니다. 그 결과 요청 크기가 증가하여 실패할 수 있습니다. + +라이브러리를 사용하면 다음을 수행할 수 있습니다: + +- 내보내기 서비스로 모든 스타일이 전송되지 않도록 +Diagram 객체의 [`exportStyles`](api/diagram/exportstyles_property.md) 구성 속성을 *false*로 설정합니다: + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + exportStyles: false +}); +~~~ + +- 원하는 스타일의 절대 경로를 [`exportStyles`](api/diagram/exportstyles_property.md) 배열에 설정하여 내보낼 스타일 집합을 정의합니다: + + + +:::note +상대 경로가 아닌 절대 경로만 사용해야 합니다. +::: diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram/configuration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram/configuration.md new file mode 100644 index 000000000..b9f6affde --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram/configuration.md @@ -0,0 +1,179 @@ +--- +sidebar_label: 구성 +title: Diagram 구성 +description: Diagram 구성에 대해 DHTMLX JavaScript Diagram 라이브러리 문서에서 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, 무료 30일 평가판 DHTMLX Diagram을 다운로드하세요. +--- + +# Diagram 구성 {#diagram-configuration} + +DHTMLX Diagram은 다양한 구성 옵션을 제공합니다. Diagram의 배율을 변경하고, 도형과 선의 기본 유형을 설정하고, 도형 간의 여백을 설정하고, 선택 기능을 적용하고, 도형용 아이콘이 있는 툴바를 설정할 수 있습니다. + +### Diagram 모드 설정 {#setting-the-diagram-mode} + +다음 Diagram 모드 중에서 선택할 수 있습니다: `"default"`, `"org"`, `"mindmap"`, `"pert"`. 각 모드에 대한 자세한 설명은 [Diagram 개요](/) 문서를 참고하세요. 필요한 유형은 [type](api/diagram/type_property.md) 구성 옵션을 통해 다음과 같이 지정할 수 있습니다: + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + type: "default" // `type: "org"` | `type: "mindmap"` | `type: "pert"` +}); +diagram.data.parse(data); +~~~ + +### 기본 도형 유형 설정 {#setting-the-default-shape-type} + +Diagram 구성 객체의 [`defaultShapeType`](api/diagram/defaultshapetype_property.md) 속성을 통해 모든 도형의 기본 유형을 설정할 수 있습니다: + +~~~jsx {3} +const diagram = new dhx.Diagram("diagram_container", { + type: "default", // or type: "org", or type: "mindmap" + defaultShapeType: "rectangle" +}); +diagram.data.parse(data); +~~~ + +도형의 구성 객체에 `type` 속성이 없는 경우 이 값이 적용됩니다. + +도형의 기본 유형은 다음과 같습니다: + +- `"rectangle"` - 기본 모드의 Diagram에 사용 +- `"card"` - 기본 모드 또는 조직도 모드의 Diagram에 사용 +- `"topic"` - 마인드맵 모드의 Diagram에 사용 +- `"task"` - PERT 모드의 Diagram에 사용 + +## 기본 선 유형 설정 {#setting-the-default-line-type} + +Diagram 구성 객체의 [`lineConfig`](api/diagram/lineconfig_property.md) 속성에 있는 `lineType` 매개변수를 통해 Diagram의 모든 커넥터 라인에 공통 유형을 설정할 수 있습니다: + +~~~jsx {3-5} +const diagram = new dhx.Diagram("diagram_container", { + type: "default", + lineConfig: { + lineType: "dash" // "dash" | "line" + } +}); +diagram.data.parse(data); +~~~ + +선 객체에 `type` 속성이 없는 경우 이 값이 적용됩니다. + +## 도형의 기본 구성 설정 {#setting-the-default-configuration-of-a-shape} + +Diagram에 로드할 데이터를 준비할 때 대량의 데이터 세트를 다루지 않아도 됩니다. 필요한 유형의 모든 도형과 선에 대한 기본 구성을 지정하여 코드의 레코드 수를 줄일 수 있습니다. + +이를 위해 Diagram 구성 객체의 [`defaults`](api/diagram/defaults_property.md) 속성을 사용하세요: + + + +`defaults` 객체에는 여러 개의 `key:value` 쌍이 포함되어 있으며, *key*는 도형 또는 선의 유형이고 *value*는 해당 도형 또는 선의 기본 구성입니다. + +:::note +도형/선의 기본 구성에서는 `type` 및 `id` 속성을 정의할 수 없습니다 +::: + +[도형](shapes/configuration_properties.md) 및 [선](lines/configuration_properties.md)의 전체 구성 속성 목록을 확인하세요. + +## Diagram의 마인드맵 모드에서 도형 배치하기 {#arranging-shapes-in-the-mindmap-mode-of-diagram} + +Diagram의 마인드맵 모드에서는 루트 도형을 기준으로 한 하위 도형의 배치가 기본 알고리즘에 의해 자동으로 결정됩니다. +Diagram을 초기화할 때 하위 도형의 기본 방향을 변경하려면 [`typeConfig`](api/diagram/typeconfig_property.md) 구성 속성을 사용하세요. + +:::note +`typeConfig` 구성 속성은 Diagram Editor에서 사용할 수 없습니다 +::: + +이 속성을 사용하면 다음을 수행할 수 있습니다: + +- [모든 하위 도형의 방향을 한 번에 설정](#setting-direction-for-all-child-shapes) +- [특정 하위 도형에 개별 방향 지정](#setting-direction-for-individual-child-shape) + +### 모든 하위 도형의 방향 설정 {#setting-direction-for-all-child-shapes} + +하위 도형을 루트 도형의 오른쪽/왼쪽에 배치하려면 [`typeConfig`](api/diagram/typeconfig_property.md) 속성의 `direction` 속성을 사용하세요: + + + +### 개별 하위 도형의 방향 설정 {#setting-direction-for-individual-child-shape} + +[`typeConfig`](api/diagram/typeconfig_property.md) 속성의 `side` 속성을 통해 특정 하위 도형에 대한 필수 방향을 설정할 수 있습니다. 이 속성은 `key:value` 쌍의 집합을 포함하는 객체로, *key*는 도형의 방향(left, right)이고 *value*는 도형의 id가 담긴 배열입니다. + + + +side 옵션에서 설정되지 않은 다른 하위 도형은 기본 알고리즘에 따라 자동으로 배치됩니다. + +## Diagram의 PERT 모드에서 날짜 형식 설정 {#setting-date-format-in-the-pert-mode-of-diagram} + +Diagram의 PERT 모드에서는 `task` 유형의 도형에 날짜를 표시하는 데 필요한 형식을 지정할 수 있습니다. 이를 위해 [`typeConfig`](api/diagram/typeconfig_property.md) 속성의 `dateFormat` 속성을 사용하세요: + +~~~jsx {3-5} +const diagram = new dhx.Diagram("diagram_container", { + type: "pert", + typeConfig: { + dateFormat: "%d/%m/%Y" + } +}); +~~~ + +## Diagram 및 도형 배치 {#positioning-diagram-and-shapes} + +Diagram 구성 객체의 [`margin`](api/diagram/margin_property.md) 속성을 사용하여 페이지에서 Diagram의 위치를 지정하고 도형 내부의 여백을 설정할 수 있습니다: + + + +## 도형의 자동 배치 구성 {#configuring-autoplacement-for-shapes} + +DHTMLX Diagram 라이브러리를 사용하면 Diagram에서 연결된 도형을 계층 구조로 자동 배치하도록 설정을 구성할 수 있습니다. Diagram의 구성 객체에서 [`autoplacement`](api/diagram/autoplacement_property.md) 속성을 지정하여 도형 연결 모드와 연결되지 않은 Diagram 간의 거리를 구성할 수 있습니다: + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + autoplacement: { + mode: "edges", + graphPadding: 100, + placeMode: "radial", + itemPadding: 10, + levelPadding: 10 + } +}); + +diagram.data.parse(data); + +diagram.autoPlace(); +~~~ + +이 속성은 다음 옵션을 포함할 수 있습니다: + +- `mode` - (*string*) 선택 사항, 도형 연결 모드, 기본값은 `"direct"`이며 `"edges"`로 설정 가능 +- `graphPadding` - (*number*) 선택 사항, 연결되지 않은 Diagram 간의 거리를 설정, 기본값은 *200* +- `placeMode` - (*string*) 선택 사항, 도형 배치 모드를 설정, 기본값은 `"orthogonal"`이며 `"radial"`로 설정 가능 +- `itemPadding` - (*number*) 선택 사항, 항목 간 최소 여백(최소값은 *1*), 기본값은 *20* +- `levelPadding` - (*number*) 선택 사항, 계층 레벨 간 최소 여백(최소값은 *1*), 기본값은 *20* + +:::note +자동 배치는 [`autoPlace()`](api/diagram/autoplace_method.md) 메서드가 적용된 후에만 적용됩니다. 이 기능은 Diagram의 기본 모드에서 도형에 대해서만 작동합니다. 그룹 또는 스윔레인을 사용하는 경우 자동 배치는 작동하지 않습니다. +::: + + + +**Related sample**: [Diagram. 기본 모드. 패딩 옵션이 있는 방사형 자동 배치](https://snippet.dhtmlx.com/huut0l1s) + +## Diagram 배율 조정 {#adjusting-the-diagram-scale} + +필요한 경우 애플리케이션에 맞게 Diagram의 배율을 조정할 수 있습니다. 이는 [`scale`](api/diagram/scale_property.md) 옵션을 통해 수행할 수 있습니다. +기본값은 1로 설정되어 있습니다. 따라서 Diagram을 확대하려면 옵션 값을 1보다 크게 설정하고, 축소하려면 1보다 작게 설정하면 됩니다. + + + +## 도형의 툴바 설정 {#setting-toolbar-for-shapes} + +DHTMLX Diagram을 사용하면 Diagram 도형과의 상호작용을 간편하게 하기 위해 아이콘이 있는 툴바를 지정할 수 있습니다. Diagram 구성 객체의 [`toolbar`](api/diagram/toolbar_property.md) 옵션을 통해 도형 툴바를 활성화할 수 있습니다: + + + +## 항목 선택 활성화 {#enabling-items-selection} + +Diagram 구성 객체의 [`select`](api/diagram/select_property.md) 속성을 통해 Diagram에서 항목 선택을 활성화할 수 있습니다. Diagram에서 선택 기능을 활성화한 후에는 Selection 객체 API를 사용하여 [항목 선택 작업](guides/manipulating_items.md#selecting-items)을 수행할 수 있습니다. + +:::note +선택 객체의 [사전 정의된 이벤트 세트](/api/selection/#events)를 사용하면 항목을 선택/선택 해제하는 동안 Diagram의 동작을 처리하는 방식을 정의하는 데 도움이 됩니다 +::: + + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram/initialization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram/initialization.md new file mode 100644 index 000000000..2a9b3e570 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram/initialization.md @@ -0,0 +1,155 @@ +--- +sidebar_label: 초기화 +title: 초기화 +description: Diagram을 시작하는 방법에 대해 DHTMLX JavaScript Diagram 라이브러리 문서에서 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, 무료 30일 평가판 DHTMLX Diagram을 다운로드하세요. +--- + +# Diagram 초기화 {#diagram-initialization} + +이 문서에서는 페이지에 DHTMLX Diagram을 추가하는 단계에 대해 설명합니다. 이 과정은 다음과 같은 몇 가지 간단한 단계로 이루어집니다: + +- [DHTMLX Diagram 패키지 다운로드](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml) 후 프로젝트 폴더에 압축을 풉니다 +- [페이지에 DHTMLX Diagram 소스 파일 포함하기](#including-required-code-files) +- [객체 생성자를 사용하여 Diagram 초기화하기](#initializing-diagram) +- [Diagram에 데이터 로드하기](#loading-data-into-diagram) + +~~~html + + + + + + + + + + + + +~~~ + +## 필수 코드 파일 포함하기 {#including-required-code-files} + +Diagram을 생성하려면 페이지에 2개의 소스 파일을 포함해야 합니다: + +- **diagram.js** +- **diagram.css** + +이 파일들에 대해 올바른 상대 경로를 설정했는지 확인하세요: + +~~~html + + +~~~ + +DHTMLX Diagram 패키지의 구조는 다음과 같습니다: + +- **sources** - 라이브러리의 소스 코드 파일입니다. 파일은 최소화(minify)되어 있지 않아 읽기 쉬우며, 이 패키지는 주로 컴포넌트 디버깅에 사용하기 위한 것입니다 + +:::note +Diagram 라이브러리의 **Trial** 버전에는 sources 폴더가 포함되어 있지 않습니다. +::: + +- **samples** - 코드 샘플 +- **codebase** - 라이브러리의 패키징된 코드 파일입니다. 이 파일들은 훨씬 작으며 프로덕션 환경에서 사용하기 위한 것입니다 +:::info +앱에서는 **codebase** 폴더의 파일을 사용해야 합니다 +::: + +## Diagram 초기화하기 {#initializing-diagram} + +Diagram은 컨테이너, 문서 본문, 또는 레이아웃 셀 안에서 초기화할 수 있습니다. + +### 컨테이너에서의 초기화 {#initialization-in-a-container} + +컨테이너 안에서 Diagram을 초기화하려면 `dhx.Diagram` 생성자를 사용하고 다음 두 개의 매개변수를 생성자 함수에 전달하세요: + +- Diagram을 배치할 컨테이너, 여기서는 `"diagram_container"` id를 지정하겠습니다: + +~~~html title="index.html" + +~~~ + +- [구성 속성](#configuration-properties)이 담긴 객체입니다. 이 인자가 생성자에 전달되지 않으면 기본 설정이 적용됩니다 + +~~~jsx title="index.js" +const diagram = new dhx.Diagram("diagram_container", { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### 문서 본문에서의 초기화 {#initialization-in-the-document-body} + +Diagram의 컨테이너 설정을 생략하고 문서 본문에 직접 추가할 수 있습니다: + +~~~jsx +const diagram = new dhx.Diagram(document.body, { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### 레이아웃 셀에서의 초기화 {#initialization-in-a-layout-cell} + +[Layout 셀](https://docs.dhtmlx.com/suite/layout/) 안에서도 Diagram을 초기화할 수 있습니다. 이 경우 컨테이너 대신 *null*을 사용하세요: + +~~~jsx +const diagram = new dhx.Diagram(null, { + type: "default" // "default" | "org" | "mindmap" +}); +const layout = new dhx.Layout("layout", { + cols: [ + { + id: "diagram" + } + ] +}); + +layout.getCell("diagram").attach(diagram); +~~~ + +### 구성 속성 {#configuration-properties} + +[Diagram의 구성](guides/diagram/configuration.md)을 변경하려면 생성자 함수의 두 번째 매개변수로 전달되는 config 객체에서 원하는 속성을 지정하면 됩니다. + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + scale: 0.7, + // other config options +}); +~~~ + +[Diagram의 전체 구성 속성 목록](api/diagram/api_overview.md#diagram-properties)을 참고하세요. + +**Related sample**: [Diagram Editor. 기본 모드. 넓은 순서도](https://snippet.dhtmlx.com/4d4k3o8p) + +또는 Diagram의 `config` 객체를 통해 특정 옵션에 접근하여 값을 설정/수정할 수도 있습니다. 새로운 구성으로 Diagram을 다시 렌더링하려면 [`paint()`](api/diagram/paint_method.md) 메서드를 호출하는 것을 잊지 마세요: + +~~~jsx +const diagram = new dhx.Diagram("diagram_container"); +diagram.data.parse(data); + +diagram.config.scale = 0.7; +diagram.paint(); +~~~ + +## Diagram에 데이터 로드하기 {#loading-data-into-diagram} + +DHTMLX Diagram에 데이터를 로드하는 방법에 대한 자세한 내용은 [데이터 로드 및 저장](guides/loading_data.md) 문서를 참고하세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram/scrolling_diagram.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram/scrolling_diagram.md new file mode 100644 index 000000000..62c7caeab --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram/scrolling_diagram.md @@ -0,0 +1,42 @@ +--- +sidebar_label: Diagram 스크롤 +title: Diagram 스크롤 +description: Diagram 스크롤에 대해 DHTMLX JavaScript Diagram 라이브러리 문서에서 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, 무료 30일 평가판 DHTMLX Diagram을 다운로드하세요. +--- + +# Diagram 스크롤 {#scrolling-diagram} + +기본적으로 컴포넌트의 크기는 콘텐츠에 맞게 자동으로 설정됩니다. 필요한 경우 컴포넌트는 HTML 컨테이너의 크기를 따르며, 콘텐츠에 맞게 가로 및 세로 내부 스크롤을 렌더링합니다. + +## Diagram 스크롤 {#scrolling-diagram-1} + +Diagram 객체의 [`showItem()`](api/diagram/showitem_method.md) 메서드를 사용하면 필요한 항목이 위치한 영역으로 Diagram을 스크롤할 수 있습니다. + + + +또는 [`scrollTo()`](api/diagram/scrollto_method.md) 메서드를 사용하여 Diagram의 원하는 위치로 스크롤할 수 있습니다. + + + +## 스크롤 상태 가져오기 {#getting-scroll-state} + +Diagram API를 사용하면 관련된 [`getScrollState()`](api/diagram/getscrollstate_method.md) 메서드를 통해 현재 스크롤 위치를 가져올 수 있습니다: + +~~~jsx +// 초기 스크롤 위치를 반환 +const coords = diagram.getScrollState(); // -> {x:0,y:0} +~~~ + +이 메서드는 가로 및 세로 스크롤 위치가 담긴 객체를 반환합니다. + +## Diagram 스크롤 감지하기 {#catching-diagram-scrolling} + +[`scroll`](api/diagram/scroll_event.md) 이벤트를 사용하여 Diagram 스크롤의 시작을 감지할 수 있습니다. 핸들러 함수는 스크롤의 위치를 매개변수로 받습니다: + +- `pos` - (*object*) x 및 y 속성을 가진 객체 형태의 스크롤 위치 + +~~~jsx +diagram.events.on("Scroll", (position) => { + alert("The diagram has been scrolled:" + position); +}); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/editbar.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/editbar.md new file mode 100644 index 000000000..09bdd9835 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/editbar.md @@ -0,0 +1,163 @@ +--- +sidebar_label: 편집 바 +title: 에디터 가이드 - 편집 바 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터의 편집 바에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram 무료 30일 평가판을 다운로드하세요. +--- + +# 편집 바 {#editbar} + +각 Diagram 요소별로, 또는 다양한 조건을 고려하여 [요소 그룹](guides/items_index.md) 단위로 편집 바 컨트롤을 구성할 수 있습니다. 이를 위해 편집 바의 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 설정을 사용합니다. + +개별 [도형](/category/shapes)에 대해 편집 바 컨트롤을 구성하려면 아래 예제와 같이 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 설정 내에 해당 **도형 유형**을 지정해야 합니다. + +~~~jsx {6-9} +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + editbar: { + properties: { + rectangle: [ // "pert" 도형에 대한 편집 바 컨트롤 구성 + { type: "arrange", $properties: { angle: { hidden: true } }}, + // ... 기타 편집 바 컨트롤 구성 + ], + // ... 기타 도형 구성 + } + } + } +}); +~~~ + +[요소 그룹](guides/items_index.md)을 구성하려면 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 설정 내에서 다음 서비스 속성을 사용해야 합니다. + +- [`$default`](#configure-editbar-for-the-grid-area) - 요소가 선택되지 않았거나 두 개 이상의 요소가 선택된 경우 편집 바 컨트롤을 구성할 수 있습니다 +- [`$shape`](#configure-editbar-for-shapes) - [커스텀 도형을 포함한 모든 도형](/category/shapes)에 대해 편집 바 컨트롤을 구성할 수 있습니다 +- [`$group`](#configure-editbar-for-group-elements) - [`group`](/groups/) 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다 +- [`$swimlane`](#configure-editbar-for-swimlanes) - [`swimlane`](/swimlanes/) 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다 +- [`$line`](#configure-editbar-for-lines) - [`line`](/lines/) 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다 +- [`$lineTitle`](#configure-editbar-for-line-titles) - [`lineTitle`](/line_titles/) 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다 + + + +## 그리드 영역에 대한 편집 바 구성 {#configure-editbar-for-the-grid-area} + +`$default` 서비스 속성을 사용하면 요소가 선택되지 않았거나 두 개 이상의 요소가 선택된 경우 편집 바 컨트롤을 구성할 수 있습니다. + +~~~jsx +properties: { + $default: [ + { + type: "gridStep", + readOnly: true, + // ... + } + ] +} +~~~ + +**관련 복합 컨트롤:** [그리드 스텝](api/diagram_editor/editbar/complex_controls/gridstep.md), [테두리](api/diagram_editor/editbar/complex_controls/border.md), [배치](api/diagram_editor/editbar/complex_controls/arrange.md) + +## 도형에 대한 편집 바 구성 {#configure-editbar-for-shapes} + +`$shape` 서비스 속성을 사용하면 [커스텀 도형을 포함한 모든 도형](/category/shapes)에 대해 편집 바 컨트롤을 구성할 수 있습니다. + +~~~jsx +properties: { + $shape: [ + { + type: "position", + $properties: { + dx: { disabled: true }, + // ... + }, + // ... + } + ] +} +~~~ + +**관련 복합 컨트롤:** [테두리](api/diagram_editor/editbar/complex_controls/border.md), [배치](api/diagram_editor/editbar/complex_controls/arrange.md), [위치](api/diagram_editor/editbar/complex_controls/position.md), [크기](api/diagram_editor/editbar/complex_controls/size.md), [텍스트 정렬](api/diagram_editor/editbar/complex_controls/textalign.md), [텍스트 스타일](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## 그룹 요소에 대한 편집 바 구성 {#configure-editbar-for-group-elements} + +`$group` 서비스 속성을 사용하면 [`group`](/groups/) 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다. + +~~~jsx +properties: { + $group: [ + { + type: "header", + label: "Group header style", + // ... + } + ] +} +~~~ + +**관련 복합 컨트롤:** [테두리](api/diagram_editor/editbar/complex_controls/border.md), [배치](api/diagram_editor/editbar/complex_controls/arrange.md), [헤더](api/diagram_editor/editbar/complex_controls/header.md), [공통 헤더](api/diagram_editor/editbar/complex_controls/headercommon.md), [헤더 위치](api/diagram_editor/editbar/complex_controls/headerposition.md), [크기](api/diagram_editor/editbar/complex_controls/size.md), [텍스트 정렬](api/diagram_editor/editbar/complex_controls/textalign.md), [텍스트 스타일](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## 스윔레인에 대한 편집 바 구성 {#configure-editbar-for-swimlanes} + +`$swimlane` 서비스 속성을 사용하면 [`swimlane`](/swimlanes/) 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다. + +~~~jsx +properties: { + $swimlane: [ + { + type: "header", + label: "Swimlane header style", + // ... + } + ] +} +~~~ + +**관련 복합 컨트롤:** [테두리](api/diagram_editor/editbar/complex_controls/border.md), [배치](api/diagram_editor/editbar/complex_controls/arrange.md), [헤더](api/diagram_editor/editbar/complex_controls/header.md), [공통 헤더](api/diagram_editor/editbar/complex_controls/headercommon.md), [헤더 위치](api/diagram_editor/editbar/complex_controls/headerposition.md), [크기](api/diagram_editor/editbar/complex_controls/size.md), [텍스트 정렬](api/diagram_editor/editbar/complex_controls/textalign.md), [텍스트 스타일](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## 선에 대한 편집 바 구성 {#configure-editbar-for-lines} + +`$line` 서비스 속성을 사용하면 [`line`](/lines/) 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다. + +~~~jsx +properties: { + $line: [ + { + type: "lineShape", + label: "Line connection type", + // ... + } + ] +} +~~~ + +**관련 복합 컨트롤:** [테두리](api/diagram_editor/editbar/complex_controls/border.md), [선 모양](api/diagram_editor/editbar/complex_controls/lineshape.md), [포인터 보기](api/diagram_editor/editbar/complex_controls/pointerview.md) + +## 선 제목에 대한 편집 바 구성 {#configure-editbar-for-line-titles} + +`$lineTitle` 서비스 속성을 사용하면 [`lineTitle`](/line_titles/) 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다. + +~~~jsx +properties: { + $lineTitles: [ + { + type: "textAlign", + label: "Text align", + // ... + }, + // ... + ] +} +~~~ + +**관련 복합 컨트롤:** [텍스트 정렬](api/diagram_editor/editbar/complex_controls/textalign.md), [텍스트 스타일](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## 커스텀 편집 바 컨트롤 생성 및 구성 {#create-and-configure-custom-editbar-controls} + +편집 바 뷰의 [`controls`](api/diagram_editor/editbar/config/controls_property.md) 속성을 사용하여 [**기본 컨트롤**](api/diagram_editor/editbar/basic_controls_overview.md) 및/또는 [**복합 컨트롤**](api/diagram_editor/editbar/complex_controls_overview.md)을 기반으로 커스텀 컨트롤을 생성할 수 있습니다. + +:::warning +[***기본 컨트롤***](api/diagram_editor/editbar/basic_controls_overview.md) 및/또는 [***복합 컨트롤***](api/diagram_editor/editbar/complex_controls_overview.md)에서 사용하는 기본 컨트롤 유형의 이름을 커스텀 컨트롤의 이름으로 사용하지 않는 것이 좋습니다. 오류를 방지하려면 각 커스텀 컨트롤에 고유한 이름을 사용하세요! +::: + +커스텀 컨트롤을 생성한 후에는 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 속성을 통해 필요한 Diagram 요소에 적용해야 합니다. + + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/grid_area.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/grid_area.md new file mode 100644 index 000000000..4733f5a10 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/grid_area.md @@ -0,0 +1,181 @@ +--- +sidebar_label: 그리드 영역 +title: 에디터 가이드 - 그리드 영역 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터의 그리드 영역에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram 무료 30일 평가판을 다운로드하세요. +--- + +# 그리드 영역 {#grid-area} + +그리드 영역은 다이어그램을 편집하기 위한 영역입니다. 새 항목을 추가하거나 항목의 모양과 위치를 변경하거나 제거할 수 있습니다. + +이 섹션에서는 에디터가 초기화된 모드에 따라 각 다이어그램 항목에 사용할 수 있는 인터페이스 요소를 설명합니다. 또한 키보드 단축키를 사용하거나 여러 개의 선택된 항목을 한 번에 조작하여 다이어그램 설계를 단순화하는 방법도 설명합니다. + +:::note +그리드 영역에서 점 사이의 간격은 [그리드 스텝](api/diagram_editor/editor/config/gridstep_property.md) 값에 따라 달라집니다. +::: + +## 도형 관리 {#managing-shapes} + +### 기본 모드의 인터페이스 요소 {#interface-elements-in-the-default-mode} + +도형 바에서 그리드 영역으로 도형을 드래그하여 원하는 위치에 배치하고 서로 연결할 수 있습니다. + + + +도형을 클릭하면 해당 도형이 편집 가능한 상태가 되며 전용 인터페이스 요소가 표시됩니다. + +- 다음 컨트롤이 있는 툴바: + - `"copy"` - 도형의 사본을 생성합니다(그룹이나 스윔레인 내부에 배치된 도형은 제외) + - `"connect"` - 다른 도형에 연결을 설정하는 모드를 활성화합니다 + - `"remove"` - 선택한 도형을 삭제합니다 +- 크기 조절 핸들(편집 가능한 도형의 핸들을 당겨 크기를 변경합니다) +- 회전 아이콘(아이콘을 눌러 도형을 회전합니다) + +도형에 연결 모드가 활성화되면 다른 도형에 링크를 설정하고, 위치와 형태를 조정하고, `"remove"` 툴바 컨트롤을 통해 불필요한 링크를 삭제할 수 있습니다. + +도형의 텍스트를 편집하려면 더블클릭하세요. + +### 조직도 모드의 인터페이스 요소 {#interface-elements-in-the-org-chart-mode} + +루트 도형을 기준으로 원하는 위치에 도형을 드래그하여 배치하거나, 루트 도형을 드래그하여 전체 다이어그램을 이동할 수 있습니다. 새 도형을 추가하려면 도형을 선택하고 새 하위 항목을 추가하세요. *어시스턴트* 또는 *파트너* 항목을 추가할 수도 있습니다. 상위 도형과 파트너 사이의 연결은 항상 수평입니다. + +도형을 한 상위 항목에서 다른 상위 항목으로 드래그할 수 있습니다. 이동된 항목은 모든 하위 항목과 함께 드래그됩니다. + + + + + +도형을 클릭하면 해당 도형이 편집 가능한 상태가 되며 전용 인터페이스 요소가 표시됩니다. + +- 다음 컨트롤을 포함할 수 있는 툴바: + - `"add"` - 선택한 도형에 새 하위 항목을 추가합니다 + - *"add assistant"* - 선택한 도형에 어시스턴트를 추가합니다 + - *"add partner"* - 선택한 도형에 파트너를 추가합니다 + - *"align vertically"* - 도형의 하위 항목을 수직으로 배치합니다 + - *"align horizontally"* - 도형의 하위 항목을 수평으로 배치합니다 + - `"remove"` - 선택한 도형(루트 도형 제외)을 하위 항목과 함께 삭제합니다 +- 크기 조절 핸들(편집 가능한 도형의 핸들을 당겨 크기를 변경합니다) +- 하위 도형을 접거나 펼치는 아이콘(하위 도형이 있는 경우) + +어시스턴트 또는 파트너 도형을 클릭하면 해당 도형이 편집 가능한 상태가 되며 전용 인터페이스 요소가 표시됩니다. + +- `"remove"` - 선택한 도형을 삭제합니다 + +도형의 텍스트를 편집하려면 더블클릭하세요. + +### 마인드맵 모드의 인터페이스 요소 {#interface-elements-in-the-mindmap-mode} + +루트 도형을 기준으로 원하는 위치에 도형을 드래그하여 배치하거나, 루트 도형을 드래그하여 전체 다이어그램을 이동할 수 있습니다. 상위 도형을 드래그하면 모든 하위 도형과 함께 이동됩니다. 새 도형을 추가하려면 도형을 선택하고 새 하위 항목을 추가하세요. 도형은 한 상위 항목에서 다른 상위 항목으로 드래그할 수 있습니다. 이동된 항목은 모든 하위 항목과 함께 드래그됩니다. + + + +도형을 클릭하면 해당 도형이 편집 가능한 상태가 되며 전용 인터페이스 요소가 표시됩니다. + +- 다음 컨트롤이 있는 툴바: + - `"add"` - 선택한 도형(루트 도형 제외)에 새 하위 항목을 추가합니다 + - `"addLeft"` - 루트 도형 왼쪽에 새 하위 항목을 추가합니다 + - `"addRight"` - 루트 도형 오른쪽에 새 하위 항목을 추가합니다 + - `"remove"` - 선택한 도형(루트 도형 제외)을 하위 항목과 함께 삭제합니다 +- 크기 조절 핸들(편집 가능한 도형의 핸들을 당겨 크기를 변경합니다) +- 하위 도형을 접거나 펼치는 아이콘 + +도형의 텍스트를 편집하려면 더블클릭하세요. + +## 선 관리 {#managing-lines} + +기본 모드에서는 다른 도형에 링크를 설정하고, 위치와 형태를 조정하고, 선에 텍스트를 추가하거나 불필요한 링크를 삭제할 수 있습니다. + + + +기본 모드에서는 선을 더블클릭하여 텍스트를 추가할 수도 있습니다. 텍스트를 클릭하여 방향을 지정하거나 삭제할 수 있습니다. 텍스트를 편집하려면 더블클릭하세요. + + + +## 그룹 관리 {#managing-groups} + +도형 바에서 그리드 영역으로 그룹을 드래그하여 원하는 위치에 배치할 수 있습니다. 여러 도형이나 다른 그룹을 하나의 그룹에 넣어 단위로 이동, 복사, 삭제할 수 있습니다. + + + +그룹을 클릭하면 해당 그룹이 편집 가능한 상태가 되며 전용 인터페이스 요소가 표시됩니다. + +- 다음 컨트롤이 있는 툴바: + - `"copy"` - 그룹의 사본을 생성합니다(다른 그룹이나 스윔레인 내부에 배치된 그룹은 제외); + - `"remove"` - 선택한 그룹을 삭제합니다; +- 크기 조절 핸들(편집 가능한 그룹의 핸들을 당겨 크기를 변경합니다). + +그룹 헤더의 텍스트를 편집하려면 더블클릭하세요. + +## 스윔레인 관리 {#managing-swimlanes} + +도형 바에서 그리드 영역으로 스윔레인을 드래그하여 원하는 위치에 배치할 수 있습니다. + + + +스윔레인을 클릭하면 해당 스윔레인이 편집 가능한 상태가 되며 전용 인터페이스 요소가 표시됩니다. + +- 다음 컨트롤이 있는 툴바: + - `"addRowLast"` - 스윔레인 끝에 새 행을 추가합니다 + - `"addColumnLast"` - 스윔레인 끝에 새 열을 추가합니다 + - `"copy"` - 스윔레인의 사본을 생성합니다 + - `"remove"` - 선택한 스윔레인을 삭제합니다 +- 크기 조절 핸들(편집 가능한 스윔레인의 핸들을 당겨 크기를 변경합니다) + +컨텍스트 메뉴 옵션을 통해 스윔레인의 열이나 행을 추가, 이동, 삭제할 수도 있습니다. 컨텍스트 메뉴는 사용자가 스윔레인 서브헤더의 아이콘을 클릭하면 나타납니다. + + + +일부 첫 번째/마지막 열 및 행 이동 옵션은 스윔레인의 내부 설정에 의해 비활성화될 수 있습니다. + +## 항목 속성 편집 {#editing-attributes-of-an-item} + +그리드 영역에서 항목을 선택한 후 [에디터의 편집 바에 있는 사이드바 옵션을 통해](guides/diagram_editor/editbar.md) 해당 항목의 속성을 업데이트할 수 있습니다. + +## 항목 툴바 구성 {#configuring-the-toolbar-of-an-item} + +에디터의 [shapeToolbar](api/diagram_editor/editor/config/shapetoolbar_property.md) 속성을 통해 필요에 따라 도형, 그룹, 스윔레인의 전용 툴바를 사용자 지정할 수 있습니다. + +## 스냅 라인 활성화/비활성화 {#enablingdisabling-snap-lines} + +:::note +이 기능은 에디터의 기본 모드에서만 사용할 수 있습니다. +::: + +v5.0부터 그리드 영역에 스냅 라인이 추가되어 도형을 서로 대칭으로 배치하는 작업을 더 쉽게 할 수 있습니다. + +선의 너비와 색상을 변경하거나 완전히 숨기려면 에디터의 [magnetic](api/diagram_editor/editor/config/magnetic_property.md) 속성을 사용하세요. + +## 여러 항목 조작 {#manipulating-multiple-items} + +마우스 왼쪽 버튼을 누른 상태로 항목 위에 커서를 올려 여러 다이어그램 항목을 선택할 수 있습니다. 키보드 단축키(Shift+왼쪽 클릭)를 사용하여 필요한 항목을 선택할 수도 있습니다. + +선택한 모든 항목을 한 번에 다음과 같이 조작할 수 있습니다. + +- 항목 복사 및 붙여넣기(*기본 모드에서만 가능*) +- 항목 드래그 +- 항목 삭제 +- 복사한 항목의 스타일 붙여넣기 +- [항목 그룹 정렬](#aligning-multiple-items)(*기본 모드에서만 가능*) + +에디터가 기본 모드로 초기화된 경우에만 선을 선택하고 삭제할 수 있습니다. + +### 여러 항목 정렬 {#aligning-multiple-items} + +:::note +이 기능은 에디터의 기본 모드에서만 사용할 수 있습니다. +::: + +v5.0부터 항목 그룹을 선택하고 툴바에서 필요한 컨트롤을 클릭하여 정렬하거나 분산 배치할 수 있습니다. 사용 가능한 컨트롤은 다음과 같습니다. + +| Control | Description | +| --------------------------------- | -------------------------------------------| +| **왼쪽 정렬** | 항목을 x축을 따라 왼쪽으로 정렬합니다 | +| **가로 중앙 정렬** | 항목을 x축을 따라 중앙으로 정렬합니다 | +| **오른쪽 정렬** | 항목을 x축을 따라 오른쪽으로 정렬합니다 | +| **가로 간격 균등 배치** | 항목을 x축을 따라 균등하게 배치합니다 | +| **세로 간격 균등 배치** | 항목을 y축을 따라 균등하게 배치합니다 | +| **위쪽 정렬** | 항목을 y축을 따라 위쪽으로 정렬합니다 | +| **세로 중앙 정렬** | 항목을 y축을 따라 중앙으로 정렬합니다 | +| **아래쪽 정렬** | 항목을 y축을 따라 아래쪽으로 정렬합니다 | + + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/hot_keys.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/hot_keys.md new file mode 100644 index 000000000..128def223 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/hot_keys.md @@ -0,0 +1,42 @@ +--- +sidebar_label: 단축키 +title: 에디터 가이드 - 단축키 목록 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터의 단축키에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram 무료 30일 평가판을 다운로드하세요. +--- + +# 단축키 목록 {#hotkey-list} + +이 섹션에서는 에디터에서 다이어그램을 만들 때 사용할 수 있는 표준 단축키 목록, 각 단축키가 수행하는 작업에 대한 설명, 재정의할 수 있는 단축키의 키 문자열 매개변수를 설명합니다. 에디터 내에서 키보드 단축키를 관리하려면 [`hotkeys`](api/diagram_editor/editor/config/hotkeys_property.md) 속성을 적용하세요. + +| Hotkey combination | Description | Parameter key string | +|--------------------------------|------------------------------------------------------|-------------------------| +| `Alt+1` | 도형 바 표시/숨기기(기본 모드에서만) | `"alt+1"` | +| `Alt+2` | 편집 바 표시/숨기기 | `"alt+2"` | +| `Alt+3` | 그리드 영역 표시/숨기기 | `"alt+3"` | +| `Ctrl+Z` (Win), `CMD+Z` (macOS)| 최근 작업을 취소합니다 | `"ctrl+z"` | +| `Ctrl+Shift+Z` (Win), `CMD+Shift+Z` (macOS)| 취소한 작업을 다시 실행합니다 | `"ctrl+shift+z"` | +| `Ctrl+D` (Win), `CMD+D` (macOS)| 선택한 요소를 복제합니다(기본 모드에서만) | `"ctrl+d"` | +| `Ctrl+C` (Win), `CMD+C` (macOS)| 선택한 요소를 복사합니다(기본 모드에서만) | `"ctrl+c"` | +| `Ctrl+V` (Win), `CMD+V` (macOS)| 선택한 요소를 붙여넣습니다(기본 모드에서만) | `"ctrl+v"` | +| `Ctrl+Alt+C` (Win), `CMD+Alt+C` (macOS)| 선택한 항목의 스타일을 복사합니다(동일한 종류의 요소에만 적용 가능)| `"alt+ctrl+c"` | +| `Ctrl+Alt+V` (Win), `CMD+Alt+V` (macOS)| 복사한 스타일을 선택한 항목에 적용합니다(동일한 종류의 요소에만 적용 가능)| `"alt+ctrl+v"` | +| `Ctrl+A` (Win), `CMD+A` (macOS)| 모든 항목을 선택합니다 | `"ctrl+a"` | +| `Ctrl+Shift+A` (Win), `CMD+Shift+A` (macOS)| 선택한 모든 항목의 선택을 해제합니다 | `"ctrl+shift+a"` | +| `Shift+Left Click` | 선택한 항목 목록에 항목을 추가합니다 | (`hotkeys` 매개변수 키에 직접 해당하지 않음) | +| `Alt+Left Click` | 선택한 항목의 선택을 해제합니다 | (`hotkeys` 매개변수 키에 직접 해당하지 않음) | +| `Delete` (`Del`), `Backspace` | 항목을 삭제합니다 | `"delete"`, `"backspace"` | +| `Arrow-Left`, `Arrow-Right`, `Arrow-Up`, `Arrow-Down`| 선택한 항목을 이동합니다 | `"arrowLeft"`, `"arrowRight"`, `"arrowUp"`, `"arrowDown"` | +| `Ctrl+Mousewheel` (Win), `CMD+Mousewheel` (macOS)| 배율 값을 늘리거나 줄입니다 | (`hotkeys` 매개변수 키에 직접 해당하지 않음) | +| `Ctrl+Enter` (Win), `CMD+Enter` (macOS) | 선택한 요소에 대한 인라인 텍스트 에디터를 엽니다. 더블클릭의 대안으로 사용할 수 있습니다. 편집 가능한 `text` 속성이 있는 도형에만 적용됩니다. | `"ctrl+enter"` | + +## 인라인 텍스트 에디터 단축키 {#inline-text-editor-shortcuts} + +다음 단축키는 [인라인 텍스트 에디터](guides/inline_editing.md)가 활성화되어 있을 때 사용할 수 있습니다. 이 단축키는 `hotkeys` 속성을 통해 구성할 수 없습니다. + +| Hotkey | Description | +|--------|-------------| +| `Ctrl+Enter` (Win), `CMD+Enter` (macOS) | 선택한 요소에 대한 인라인 텍스트 에디터를 엽니다. 더블클릭의 대안으로 사용할 수 있습니다. 편집 가능한 `text` 속성이 있는 도형에만 적용됩니다. | +| `Shift+Enter` | 에디터를 닫지 않고 줄바꿈(`\n`)을 삽입합니다. | +| `Delete` (`Del`), `Backspace` | 커서 위치의 문자를 삭제합니다. 요소 자체는 삭제되지 않습니다. | +| `Enter` | 현재 텍스트를 확정하고 에디터를 닫습니다. 에디터는 입력하는 동안 변경 사항을 동적으로 적용하므로 Enter를 누르면 편집이 성공적으로 완료된 것으로 표시됩니다. | +| `Escape` | 저장되지 않은 모든 변경 사항을 취소하고 에디터를 닫아 요소의 텍스트를 편집을 시작하기 전 값으로 복원합니다. | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/initialization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/initialization.md new file mode 100644 index 000000000..e79e2435c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/initialization.md @@ -0,0 +1,148 @@ +--- +sidebar_label: 초기화 +title: Diagram Editor 초기화 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Diagram Editor를 시작하는 방법을 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram 무료 30일 평가판을 다운로드하세요. +--- + +# Diagram Editor 초기화 {#diagram-editor-initialization} + +이 문서에서는 페이지에 Diagram Editor를 표시하는 과정을 다룹니다. 에디터를 초기화하려면 Editor 전용 소스 파일을 포함하고 `DiagramEditor` 인스턴스를 사용해야 합니다. 그 외의 모든 측면에서 초기화 단계는 Diagram 구성 요소와 동일합니다. + +- [DHTMLX Diagram 패키지를 다운로드](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml)하여 프로젝트 폴더에 압축을 풉니다 +- [페이지에 소스 파일 포함하기](#including-required-code-files) +- [객체 생성자로 Diagram Editor 초기화하기](#initializing-diagram-editor) +- [Diagram Editor에 데이터 로드하기](#loading-data-into-diagram-editor) + +~~~html + + + + + + + + + + + + +~~~ + +## 필요한 코드 파일 포함하기 {#including-required-code-files} + +Diagram Editor를 생성하려면 페이지에 2개의 소스 파일을 포함해야 합니다. + +- **diagramWithEditor.js** +- **diagramWithEditor.css** + +이 파일에 대한 올바른 상대 경로를 설정했는지 확인하세요. + +~~~html + + +~~~ + +### npm 또는 yarn을 통해 Diagram Editor 설치하기 {#installing-diagram-editor-via-npm-or-yarn} + +#### npm 또는 yarn을 통해 체험판 Diagram Editor 설치하기 {#installing-trial-diagram-editor-via-npm-or-yarn} + +:::info +Diagram Editor의 체험판을 사용하려면 [**체험판 Diagram 패키지**](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml)를 다운로드하고 *README* 파일에 안내된 단계를 따르세요. 체험판 Diagram Editor는 30일 동안만 사용할 수 있습니다. +::: + +#### npm 또는 yarn을 통해 PRO Diagram Editor 설치하기 {#installing-pro-diagram-editor-via-npm-or-yarn} + +:::info +[클라이언트 영역](https://dhtmlx.com/clients/)에서 **npm**용 로그인 및 비밀번호를 생성하여 DHTMLX 프라이빗 **npm**에 직접 액세스할 수 있습니다. 자세한 설치 가이드도 해당 페이지에서 확인할 수 있습니다. 프라이빗 **npm** 액세스는 사용자의 독점 Diagram 라이선스가 유효한 동안에만 가능합니다. +::: + +## Diagram Editor 초기화하기 {#initializing-diagram-editor} + +Diagram Editor는 컨테이너, 문서 body, 또는 레이아웃 셀 안에 초기화할 수 있습니다. + +### 컨테이너에서 초기화하기 {#initialization-in-a-container} + +컨테이너에서 Diagram Editor를 초기화하려면 `dhx.DiagramEditor` 생성자를 사용하고 다음 두 개의 매개변수를 생성자 함수에 전달합니다. + +- Diagram Editor를 배치할 컨테이너. 여기서는 `"editor_container"` id를 지정합니다: + +~~~html title="index.html" + +~~~ + +- [구성 속성](#configuration-properties)이 담긴 객체. 이 인수를 생성자에 전달하지 않으면 기본 설정이 적용됩니다 + +~~~jsx title="index.js" +const editor = new dhx.DiagramEditor("editor_container", { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### 문서 body에서 초기화하기 {#initialization-in-the-document-body} + +Diagram Editor의 컨테이너 설정을 생략하고 문서 body에 직접 추가할 수도 있습니다. + +~~~jsx +const editor = new dhx.DiagramEditor(document.body, { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### 레이아웃 셀에서 초기화하기 {#initialization-in-a-layout-cell} + +[레이아웃 셀](https://docs.dhtmlx.com/suite/layout/) 안에서도 에디터를 초기화할 수 있습니다. 이 경우 컨테이너 대신 *null*을 사용합니다. + +~~~jsx +const editor = new dhx.DiagramEditor(null, { + type: "default" // "default" | "org" | "mindmap" +}); +const layout = new dhx.Layout("layout", { + cols: [ + { + id: "diagram_editor" + } + ] +}); + +layout.getCell("diagram_editor").attach(editor); +~~~ + +### 구성 속성 {#configuration-properties} + +에디터의 구성을 변경하려면 생성자 함수의 두 번째 매개변수로 전달되는 구성 객체에서 원하는 속성을 지정하면 됩니다. + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", // "default" | "org" | "mindmap" + shapeBarWidth: 320, + lineGap: 20 +}); +~~~ + +### 속성 {#properties} + +[Editor의 전체 구성 속성 목록](api/diagram_editor/editor/config/overview.md)을 확인하세요. + +## Diagram Editor에 데이터 로드하기 {#loading-data-into-diagram-editor} + +에디터의 [parse()](api/diagram_editor/editor/methods/parse_method.md) 메서드를 통해 [적절한 데이터 세트](guides/loading_data.md#preparing-data-to-load)를 에디터에 로드할 수 있습니다. + + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/shapebar.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/shapebar.md new file mode 100644 index 000000000..5f310be71 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/shapebar.md @@ -0,0 +1,307 @@ +--- +sidebar_label: Shapebar +title: 에디터 가이드 - Shapebar +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터의 Shapebar에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# Shapebar + +Shapebar는 Diagram 항목의 미리보기를 렌더링하는 에디터의 일부입니다. 필요한 항목을 선택하여 shapebar에서 그리드 영역으로 드래그할 수 있습니다. + +:::note +Shapebar는 기본 모드(type: `"default"`)로 초기화된 에디터에서만 사용할 수 있습니다. +::: + +## 기본 섹션 {#default-sections} + +기본적으로 shapebar는 *Shapes*, *Groups*, *Swimlanes*의 세 섹션으로 나뉩니다. *Shapes* 섹션에는 모든 기본 도형과 사용자 정의 도형이 포함됩니다. +*Groups*와 *Swimlanes* 섹션에는 항목의 기본 세트가 포함됩니다. + + + +## 사용자 정의 섹션 {#custom-sections} + +shapebar의 구조를 사용자 정의하려면 [`sections`](api/diagram_editor/shapebar/config/sections_property.md) 속성을 사용해야 합니다. 이 속성을 사용하면 원하는 순서로 자체 섹션을 지정하고 해당 섹션에 항목을 배치할 수 있습니다. + +`sections` 속성은 *key:value* 쌍의 집합으로 이루어진 객체이며, 여기서 `key`는 섹션의 이름이고 `value`는 해당 섹션에 렌더링될 항목 목록을 담은 배열입니다. + +선택한 요소에 따라 특정 섹션의 항목 구성은 다음과 같을 수 있습니다. + +1. 기본 섹션 렌더링 + +`sections` 구성 객체를 사용하여 기본 도형 세트를 렌더링할 수 있습니다. 예를 들면 다음과 같습니다. + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Base flow shapes": [{ flowShapes: true }], + "Base org cards": [{ org: true }], + "Base groups": [{ group: true }], + "Base swimlane": [{ swimlane: true }] + } + } + } +}); +~~~ + +2. 문자열 리터럴을 사용한 항목 지정 + +문자열 리터럴을 사용하여 도형 유형을 지정함으로써 Shapebar 항목을 렌더링할 수 있습니다. 아래 예제를 확인하세요. + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Custom section": ["custom_shape"], + "Other shapes": ["text", "topic", "circle"] + } + } + } +}); +~~~ + +3.
기본 구성 재정의
+ +또 다른 방법은 도형의 기본 속성을 재정의하여 필요한 매개변수로 렌더링하는 것입니다. 아래 예제는 다양한 텍스트 및 색상 설정을 가진 `circle` 유형의 도형을 렌더링하는 방법을 보여줍니다. + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Circles": [ + { + type: "circle", + fill: "#fcba03", + text: "Orange" + }, + { + type: "circle", + fill: "#03d7fc", + text: "Blue" + }, + { + type: "circle", + fill: "#03fc88", + text: "Green" + } + ] + } + } + } +}); +~~~ + +이러한 방식으로 모든 유형의 도형을 재구성할 수 있습니다. + +4. 한 섹션에서 여러 유형의 항목 결합 + +프로젝트에서 다양한 요소를 사용하는 경우, Shapebar에 혼합된 유형의 항목으로 섹션을 만들 수 있습니다. 다음 예제를 확인하세요. + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Base flow shapes": [{ flowShapes: true }, "text", "topic"], + "Circles": [ + "circle", + { + type: "circle", + fill: "#fcba03", + text: "Orange" + }, + { + type: "circle", + fill: "#03d7fc", + text: "Blue" + }, + { + type: "circle", + fill: "#03fc88", + text: "Green" + } + ] + } + } + } +}); +~~~ + +## 동일한 유형의 항목을 다른 설정으로 추가하기 {#adding-items-of-the-same-type-with-different-settings} + +라이브러리를 사용하면 에디터의 shapebar에 서로 다른 설정을 가진 동일한 유형(즉, 같은 유형)의 항목을 여러 개 추가할 수 있습니다. +이를 위해서는 다음을 수행해야 합니다. + +- 필요한 유형의 항목에 대해 서로 다른 구성을 가진 별도의 객체를 생성합니다. 필요한 만큼 많은 객체를 생성할 수 있습니다 +- 생성한 객체의 *이름*을 항목의 *유형*으로 사용하여 [`sections`](api/diagram_editor/shapebar/config/sections_property.md) 속성을 통해 shapebar의 섹션에 추가합니다 + +## 도형 미리보기 설정 {#setting-the-preview-of-shapes} + +에디터의 shapebar에 렌더링되는 항목의 미리보기를 구성하려면 [`preview`](api/diagram_editor/shapebar/config/preview_property.md) 속성을 사용하세요. 이 속성은 두 개의 속성을 포함하는 객체입니다. + +- `scale` - (선택 사항) shapebar에 렌더링되는 항목의 배율을 정의하며, 기본값은 0.5입니다 +- `gap` - (선택 사항) shapebar에 렌더링되는 항목 사이의 간격을 지정하며, 기본값은 "6px 8px"입니다 +(위아래에는 6px, 좌우에는 8px의 간격을 설정합니다) + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + preview: { + scale: 0.65, + gap: 8 + } + } + } +}); +~~~ + +### 도형 미리보기 사용자 정의 {#customizing-a-shape-preview} + +특정 도형의 모양을 사용자 정의하려면 도형 객체의 [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) 구성 속성을 적용할 수 있습니다. + +이 속성은 다음 두 가지 경우에 적용할 수 있습니다. + +- 에디터 객체의 [`defaults`](api/diagram_editor/editor/config/defaults_property.md) 속성을 통해 기본 도형의 기본 구성을 설정할 때 +- [`addShape()`](api/diagram/addshape_method.md) 메서드의 `defaults` 속성을 통해 사용자 정의 도형의 기본 구성을 설정할 때 + +도형 미리보기를 구성하는 세 가지 예제를 살펴보겠습니다. + +1\. 사용자 정의 도형에 대해 shapebar에 표시할 이미지를 지정할 수 있습니다. 이를 위해서는 `preview` 속성에 이미지를 로드할 URL 또는 base64 이미지를 문자열 값으로 전달해야 합니다. + +~~~jsx {6} +const defaults = { + title: "Name and First name", + img: "../avatar-1.jpg", + height: 115, + width: 330, + preview: "../shape_preview.png" +}; + +editor.diagram.addShape("template", { + template, + defaults +}); +~~~ + +2\. 이미지를 지정하고 너비와 높이를 정의해야 하는 경우, `preview` 속성을 `img`, `height`, `width` 속성을 가진 객체로 제공해야 합니다. + +~~~jsx {4-8} +const defaults = { + title: "Name and First name", email: "some@mail.com", + img: "../avatar-1.jpg", height: 115, width: 330, + preview: { + img: "../shape_preview.png", + height: 58, + width: 165 + } +} + +editor.diagram.addShape("template", { + template, + defaults +}); +~~~ + +:::note +이미지의 정확한 너비와 높이는 설정할 수 있지만, 이미지의 배율은 설정할 수 없습니다. +::: + +3\. `scale` 속성을 통해 shapebar에 렌더링되는 특정 도형의 배율을 재정의할 수 있습니다. + +~~~jsx {2-4} +const defaults = { + preview: { + scale: 0.72 + } +}; + +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Custom shapes": ["personalCard"], + "OrgChart shapes": ["card", "img-card"] + }, + preview: { + scale: 0.65 + } + } + } +}); + +editor.diagram.addShape("personalCard", { + defaults, + // ... +}); +~~~ + +:::note +`preview` 속성은 데이터를 JSON 형식으로 내보낼 때 생략됩니다. +::: + +## Shapebar 너비 설정 {#setting-the-width-of-shapebar} + +shapebar의 기본 너비는 300입니다. [`width`](api/diagram_editor/shapebar/config/width_property.md) 속성을 통해 이를 변경하고 다른 너비를 설정할 수 있습니다. 예를 들면 다음과 같습니다. + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + width: 400 // 기본적으로 300 + } + } +}); +~~~ + +## Shapebar 표시/숨기기 {#showinghiding-the-shapebar} + +shapebar의 표시 여부를 제어해야 할 때마다 [`show`](api/diagram_editor/shapebar/config/show_property.md) 속성을 사용할 수 있습니다. 이 속성을 사용하면 Diagram Editor 초기화 시 특정 설정으로 shapebar를 숨겼다가 필요할 때 나중에 표시할 수 있습니다. 기본적으로 shapebar는 표시됩니다. + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + show: false // 기본적으로 true + } + } +}); +~~~ + +## Shapebar 및 도형 모양 {#shapebar-and-shapes-appearance} + +[`css`](api/diagram_editor/shapebar/config/css_property.md) 속성을 사용하여 shapebar에 원하는 모양과 느낌을 제공할 수 있습니다. 이 속성을 사용하면 사용자 정의 CSS 클래스를 지정하여 shapebar의 항목 표시를 원하는 방식으로 스타일링할 수 있습니다. + +~~~html {6} + + + +~~~ + +특정 테마에 대한 기본 색상 구성표를 재정의하거나 자체 CSS 변수를 사용하여 Shapebar 항목의 색상 구성표를 관리하는 방식으로 [도형의 모양을 조정](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar)할 수도 있습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/toolbar.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/toolbar.md new file mode 100644 index 000000000..47b6ed3f5 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/diagram_editor/toolbar.md @@ -0,0 +1,445 @@ +--- +sidebar_label: Toolbar +title: 에디터 가이드 - Toolbar +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 에디터의 Toolbar에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# Toolbar + +Toolbar는 사용자가 편집 프로세스를 제어하는 데 도움이 되는 Diagram Editor의 상단 부분입니다. + + + +Toolbar를 구성하려면 다음 속성을 사용할 수 있습니다. + +- [`css`](api/diagram_editor/toolbar/config/css_property.md) - 사용자 정의 CSS 클래스를 적용합니다 + +- [`navigationType`](api/diagram_editor/toolbar/config/navigationtype_property.md) - Toolbar 항목을 활성화하는 동작을 정의합니다. 다음 동작 중 하나를 지정할 수 있습니다. + - `"click"` - 사용자가 클릭하면 Toolbar 항목을 활성화합니다 + - `"pointer"` - 사용자가 마우스 포인터를 올리면 Toolbar 항목을 활성화합니다 + +- [`items`](api/diagram_editor/toolbar/config/items_property.md) - Toolbar에 배치된 [`items`](#service-elements)(컨트롤)의 배열입니다. Toolbar 항목을 구성하는 방법은 두 가지입니다. + - [**문자열을 통한 항목 구성**](api/diagram_editor/toolbar/config/items_property.md#configuring-items-via-strings) + - [**객체를 통한 항목 구성**](api/diagram_editor/toolbar/config/items_property.md#configuring-items-via-objects) + +~~~jsx {9-40} +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + // toolbar: true, // 기본 Toolbar를 표시합니다 + // 또는 객체를 통해 Toolbar를 구성합니다 + toolbar: { + css: "custom_css", + navigationType: "pointer", + items: [ + { + type: "file", + items: [ + "importJson", + { + type: "exportJson", + value: "Export to JSON" + }, + { + id: "custom_id_1", + type: "menuItem", + value: "Server export", + icon: "dxi dxi-vault", + items: [ + "exportPdf", + { + id: "custom_id_2", + type: "menuItem", + value: "PNG", + handler: editor => { + editor.diagram.export.png(); + // 사용자 정의 로직 작성 위치 + } + } + ] + } + ] + }, + "spacer", + "scale" + ] + } + } +}); +~~~ + +## 서비스 요소 {#service-elements} + +Toolbar 항목은 **서비스 요소**로 표현됩니다. 다음 서비스 요소를 사용하고 구성할 수 있습니다. + +- `file` - 파일 가져오기 및 내보내기를 위한 서비스 요소 그룹을 형성합니다 + +
+ `file` 항목은 다음과 같은 구조를 가집니다.
+
+ ~~~jsx
+ - file
+ - importJson
+ - export
+ - exportJson
+ - exportPdf
+ - exportPng
+ ~~~
+
+ `file` 항목 컬렉션은 다음과 같이 표시됩니다.
+
+ 
+
+
+- `importJson` - JSON 형식의 파일을 가져오기 위한 대화 상자를 엽니다
+
+- `export` - 선택한 형식으로 파일을 내보내기 위한 서비스 요소 그룹을 형성합니다
+
+
+ `export` 항목은 다음과 같은 구조를 가집니다.
+
+ ~~~jsx
+ - export
+ - exportJson
+ - exportPdf
+ - exportPng
+ ~~~
+
+
+- `exportJson` - JSON 형식으로 파일을 내보냅니다
+
+- `exportPdf` - PDF 형식으로 파일을 내보냅니다
+
+- `exportPng` - PNG 형식으로 파일을 내보냅니다
+
++ +- `edit` - 도형, 선, 그룹, 스윔레인을 관리하고 편집하기 위한 서비스 요소 그룹을 형성합니다 + +
+ `default` 모드에서 `edit` 항목 컬렉션은 다음과 같은 기본 구조를 가집니다.
+
+ ~~~jsx
+ - edit
+ - undo
+ - redo
+ - separator
+ - duplicate
+ - copy
+ - paste
+ - separator
+ - copyStyle
+ - pasteStyle
+ - separator
+ - selectAll
+ - selectNone
+ ~~~
+
+ 
+
+ `org`/`mindmap` 모드에서 `edit` 항목 컬렉션은 다음과 같은 기본 구조를 가집니다.
+
+ ~~~jsx
+ - edit
+ - undo
+ - redo
+ - separator
+ - copyStyle
+ - pasteStyle
+ - separator
+ - selectAll
+ - selectNone
+ ~~~
+
+ 
+
+
+- `undo` - 변경 기록에서 한 단계 뒤로 이동합니다
+
+- `redo` - 변경 기록에서 한 단계 앞으로 이동합니다
+
+- `duplicate` - 선택한 요소를 복제합니다
+
+- `copy` - 선택한 파일을 `model` 객체에 복사합니다
+
+- `paste` - `model` 객체에서 복사된 파일을 붙여넣습니다
+
+- `copyStyle` - 선택한 요소의 스타일을 `model` 객체에 복사합니다
+
+- `pasteStyle` - `model` 객체에 저장된 스타일을 선택한 요소에 적용합니다
+
+- `selectAll` - 선택 가능한 모든 요소를 선택합니다
+
+- `selectNone` - 사용 가능한 모든 항목의 선택을 해제합니다
+
++ +- `view` - Diagram Editor 요소의 보기를 관리하기 위한 서비스 요소 그룹을 형성합니다 + +
+ `default` 모드에서 `view` 항목 컬렉션은 다음과 같은 기본 구조를 가집니다.
+
+ ~~~jsx
+ - view
+ - theme
+ - themeLight
+ - themeDark
+ - themeLightContrast
+ - themeDarkContrast
+ - separator
+ - shapebar
+ - editbar
+ - grid
+ - separator
+ - connectionPoints
+ - resizePoints
+ - magnetic
+ - separator
+ - zoomIn
+ - zoomOut
+ ~~~
+
+ 
+
+ `org`/`mindmap` 모드에서 `view` 항목 컬렉션은 다음과 같은 기본 구조를 가집니다.
+
+ ~~~jsx
+ - view
+ - theme
+ - themeLight
+ - themeDark
+ - themeLightContrast
+ - themeDarkContrast
+ - separator
+ - editbar
+ - separator
+ - grid
+ - separator
+ - resizePoints
+ - itemsDraggable
+ - separator
+ - zoomIn
+ - zoomOut
+ ~~~
+
+ 
+
+
+- `theme` - 테마를 적용하기 위한 서비스 요소 그룹을 형성합니다
+
+
+ `theme` 항목은 다음과 같은 구조를 가집니다.
+
+ ~~~jsx
+ - theme
+ - themeLight
+ - themeDark
+ - themeLightContrast
+ - themeDarkContrast
+ ~~~
+
+
+- `themeLight` - **Light** 테마를 적용합니다
+
+- `themeDark` - **Dark** 테마를 적용합니다
+
+- `themeLightContrast` - **LightContrast** 테마를 적용합니다
+
+- `themeDarkContrast` - **DarkContrast** 테마를 적용합니다
+
+- `shapebar` - `Shapebar` 패널을 표시하거나 숨깁니다
+
+- `editbar` - `Editbar` 패널을 표시하거나 숨깁니다
+
+- `grid` - Grid 영역에서 `grid`를 표시하거나 숨깁니다
+
+- `connectionPoints` - **연결 지점**을 표시하거나 숨깁니다
+
+- `resizePoints` - **크기 조정 지점**을 표시하거나 숨깁니다
+
+- `magnetic` - `magnetic` 기능을 켜거나 끕니다
+
+- `zoomIn` - 배율 값을 0.05(5%)만큼 늘립니다
+
+- `zoomOut` - 배율 값을 0.05(5%)만큼 줄입니다
+
++ +- `arrange` - Diagram Editor 요소를 정렬하기 위한 서비스 요소 그룹을 형성합니다 + +
+ `default` 모드에서 `arrange` 항목 컬렉션은 다음과 같은 기본 구조를 가집니다.
+
+ ~~~jsx
+ - arrange
+ - layout
+ - layoutMode
+ - layoutModeDirect
+ - layoutModeEdges
+ - separator
+ - layoutOrthogonal
+ - layoutRadial
+ - align
+ - alignHorizontalLeft
+ - alignHorizontalCenter
+ - alignHorizontalRight
+ - separator
+ - alignVerticalTop
+ - alignVerticalCenter
+ - alignVerticalBottom
+ - distribute
+ - distributeVertical
+ - distributeHorizontal
+ ~~~
+
+ 
+
+
+- `layout` - Diagram Editor 요소를 자동 배치하기 위한 서비스 요소 그룹을 형성합니다
+
+
+ `layout` 항목은 다음과 같은 구조를 가집니다.
+
+ ~~~jsx
+ - layout
+ - layoutMode
+ - layoutModeDirect
+ - layoutModeEdges
+ - separator
+ - layoutOrthogonal
+ - layoutRadial
+ ~~~
+
+
+- `layoutMode` - 자동 배치 모드를 관리하기 위한 서비스 요소 그룹을 형성합니다
+
+
+ `layoutMode` 항목은 다음과 같은 구조를 가집니다.
+
+ ~~~jsx
+ - layoutMode
+ - layoutModeDirect
+ - layoutModeEdges
+ ~~~
+
+
+- `layoutModeDirect` - 요소 커넥터의 `direct` 모드를 적용합니다
+
+- `layoutModeEdges` - 요소 커넥터의 `edges` 모드를 적용합니다
+
+- `layoutOrthogonal` - 요소 배치의 `orthogonal` 모드를 적용합니다
+
+- `layoutRadial` - 요소 배치의 `radial` 모드를 적용합니다
+
+- `align` - Diagram Editor 요소의 정렬을 관리하기 위한 서비스 요소 그룹을 형성합니다
+
+
+ `align` 항목은 다음과 같은 구조를 가집니다.
+
+ ~~~jsx
+ - align
+ - alignHorizontalLeft
+ - alignHorizontalCenter
+ - alignHorizontalRight
+ - separator
+ - alignVerticalTop
+ - alignVerticalCenter
+ - alignVerticalBottom
+ ~~~
+
+
+- `alignHorizontalLeft` - 요소를 수평으로 왼쪽에 정렬합니다
+
+- `alignHorizontalCenter` - 요소를 수평으로 가운데에 정렬합니다
+
+- `alignHorizontalRight` - 요소를 수평으로 오른쪽에 정렬합니다
+
+- `alignVerticalTop` - 요소를 수직으로 위쪽에 정렬합니다
+
+- `alignVerticalCenter` - 요소를 수직으로 가운데에 정렬합니다
+
+- `alignVerticalBottom` - 요소를 수직으로 아래쪽에 정렬합니다
+
+- `distribute` - Diagram Editor 요소를 분산 배치하기 위한 서비스 요소 그룹을 형성합니다
+
+
+ `distribute` 항목은 다음과 같은 구조를 가집니다.
+ ~~~jsx
+ - distribute
+ - distributeVertical
+ - distributeHorizontal
+ ~~~
+
+
+- `distributeVertical` - 요소를 수직으로 분산합니다
+
+- `distributeHorizontal` - 요소를 수평으로 분산합니다
+
++ +- `scale` - 사용자가 배율 값을 0.05(5%)만큼 늘리거나 줄일 수 있는 컨트롤입니다 + +
+ `scale` 항목은 다음과 같이 표시됩니다.
+
+ 
+
+
+- [`separator`](https://docs.dhtmlx.com/suite/toolbar/api/api_separator_properties/) - 항목/항목 그룹을 서로 구분하는 수평(메뉴 옵션 사이) 또는 수직(툴바 컨트롤 사이) 선입니다.
+
+- [`spacer`](https://docs.dhtmlx.com/suite/toolbar/api/api_spacer_properties/) - 컨트롤 정렬에 사용되는 툴바의 공간입니다
+
+## 기본 요소 {#base-elements}
+
+[**서비스 요소**](#service-elements) 외에도, [객체](api/diagram_editor/toolbar/config/items_property.md#configuring-items-via-objects) 방식을 사용하여 다음과 같은 **기본 요소**를 지정하고 구성할 수도 있습니다.
+
+- [Button](https://docs.dhtmlx.com/suite/toolbar/button/)
+- [Custom HTML](https://docs.dhtmlx.com/suite/toolbar/customhtmlbutton/)
+- [Datepicker](https://docs.dhtmlx.com/suite/toolbar/datepicker/)
+- [ImageButton]( https://docs.dhtmlx.com/suite/toolbar/image_button/)
+- [Input](https://docs.dhtmlx.com/suite/toolbar/input/)
+- [MenuItem](https://docs.dhtmlx.com/suite/toolbar/menuitem/)
+- [NavItem](https://docs.dhtmlx.com/suite/toolbar/navitem/)
+- [SelectButton](https://docs.dhtmlx.com/suite/toolbar/selectbutton/)
+- [Separator](https://docs.dhtmlx.com/suite/toolbar/separator/)
+- [Spacer](https://docs.dhtmlx.com/suite/toolbar/spacer/)
+- [Title](https://docs.dhtmlx.com/suite/toolbar/title/)
+
+아래 예제는 Toolbar에 [Button](https://docs.dhtmlx.com/suite/toolbar/button/) 컨트롤을 추가하는 방법을 보여줍니다.
+
+~~~jsx {8-11}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org", // "default" | "org" | "mindmap"
+ view: {
+ // toolbar: true, // 기본 Toolbar를 표시합니다
+ // 또는 객체를 통해 Toolbar를 구성합니다
+ toolbar: {
+ items: [
+ {
+ type: "button",
+ value: "Best button"
+ }
+ ]
+ }
+ }
+});
+~~~
+
+**기본 요소**의 내부 속성 외에도([Separator](https://docs.dhtmlx.com/suite/toolbar/separator/), [Spacer](https://docs.dhtmlx.com/suite/toolbar/spacer/), [Title](https://docs.dhtmlx.com/suite/toolbar/title/) 제외) 다음 속성도 사용할 수 있습니다.
+
+- `checkIcon` - (선택 사항) - 아이콘 CSS 클래스를 반환하는 핸들러입니다. 다음 인수와 함께 호출됩니다.
+ - `editor` - Diagram Editor 객체
+
+~~~jsx
+checkIcon?: (editor: IDiagramEditor) => string; // 아이콘을 포함하는 기본 요소에만 사용하세요
+~~~
+
+- `handler` - (선택 사항) - `click` 또는 `inputChange` 이벤트가 발생할 때 실행되는 핸들러입니다. 다음 인수와 함께 호출됩니다.
+ - `editor` - Diagram Editor 객체
+ - `event` - [네이티브 이벤트](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+
+~~~jsx
+handler?: (editor: object, event: Event) => void;
+~~~
+
+**관련 샘플**: [에디터가 포함된 Diagram. 기본 모드. 카드, editbar, toolbar, shapebar 사용자 정의](https://snippet.dhtmlx.com/1p0wemnn)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/event_handling.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/event_handling.md
new file mode 100644
index 000000000..a9a65e99c
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/event_handling.md
@@ -0,0 +1,86 @@
+---
+sidebar_label: 이벤트 처리
+title: 이벤트 처리
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 이벤트 처리에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# 이벤트 처리
+
+## 이벤트 리스너 연결 {#attaching-event-listeners}
+
+사용 가능한 모든 이벤트에 사용자 정의 핸들러를 추가할 수 있습니다. 이를 위해 다음 매개변수와 함께 `diagram.events.on()` 메서드를 사용하세요.
+
+- `name` - (*string*) 이벤트의 이름
+- `handler` - (*function*) 핸들러 함수
+
+~~~jsx
+diagram.events.on("ShapeClick", (id) => {
+ alert("You've just clicked an item with id="+id);
+});
+~~~
+
+동일한 이벤트에 여러 핸들러를 연결할 수 있으며, 연결된 모든 핸들러가 실행됩니다. 일부 핸들러가 *false*를 반환하면 관련 작업이 차단됩니다. 이벤트 핸들러는 연결된 순서대로 처리됩니다.
+
+## 이벤트 리스너 분리 {#detaching-event-listeners}
+
+이벤트를 분리하려면 `diagram.events.detach()` 메서드를 사용하세요.
+
+~~~jsx
+diagram.events.on("CustomEvent", args);
+
+diagram.events.detach("CustomEvent");
+~~~
+
+## 이벤트 호출 {#calling-events}
+
+이벤트를 호출하려면 `diagram.events.fire()` 메서드를 사용하세요.
+
+~~~jsx
+diagram.events.fire("CustomEvent", args);
+// args는 인수의 배열입니다
+~~~
+
+일반적으로 이벤트는 자동으로 호출되므로 이 메서드를 사용할 필요가 없습니다.
+
+## 지원되는 이벤트 목록 {#list-of-supported-events}
+
+### Diagram 이벤트 {#diagram-events}
+
+[API 참조](api/diagram/api_overview.md#diagram-events)에서 Diagram API 이벤트의 전체 목록을 확인하세요.
+
+### 에디터 이벤트 {#editor-events}
+
+Diagram Editor API 이벤트 목록은 [API 섹션](api/diagram_editor/editor/events/overview.md)에서 확인할 수 있습니다.
+
+:::note
+Diagram Editor의 이벤트 외에도, 에디터 화면에서 작업하는 동안 [Diagram 객체의 이벤트](api/diagram/api_overview.md#diagram-events)를 적용할 수도 있습니다. 예를 들면 다음과 같습니다.
+:::
+
+~~~jsx {6-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ controls: { autoLayout: false }
+});
+editor.parse(data);
+
+editor.diagram.events.on("ShapeClick", (id) => {
+ alert("You've just clicked an item with id=" + id);
+});
+~~~
+
+아래 나열된 이벤트를 적용해야 하는 경우에도 이 방법을 사용할 수 있습니다.
+
+### CellManager 이벤트 {#cellmanager-events}
+
+[API 참조](/api/cell_manager/#events)에서 CellManager API 이벤트의 전체 목록을 확인하세요.
+
+### DataCollection 이벤트 {#datacollection-events}
+
+[API 참조](/api/data_collection/#events)에서 DataCollection API 이벤트의 전체 목록을 확인하세요.
+
+### InlineEditor 이벤트 {#inlineeditor-events}
+
+[API 참조](/api/inline_editor/#events)에서 InlineEditor API 이벤트의 전체 목록을 확인하세요.
+
+### Selection 이벤트 {#selection-events}
+
+[API 참조](/api/selection/#events)에서 Selection API 이벤트의 전체 목록을 확인하세요.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/inline_editing.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/inline_editing.md
new file mode 100644
index 000000000..528b48386
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/inline_editing.md
@@ -0,0 +1,121 @@
+---
+sidebar_label: 인라인 편집
+title: 인라인 편집
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 인라인 편집에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# 인라인 편집
+
+인라인 편집을 사용하면 Diagram 항목을 더블클릭하여 텍스트 콘텐츠를 편집할 수 있습니다. Diagram과 에디터 양쪽에서 모두 항목을 편집할 수 있습니다.
+
+선에 대한 인라인 편집은 Diagram의 기본 모드에서만 활성화됩니다.
+
+
+
+:::note
+인라인 편집은 사용자 지정 도형에는 작동하지 않습니다.
+:::
+
+이 기능은 기본적으로 활성화되어 있습니다. 인라인 편집을 비활성화하려면 편집할 수 없게 만들고 싶은 요소의 `editable` 속성을 *false*로 설정하세요.
+
+아래에서 Diagram 항목에 대한 인라인 편집을 비활성화하는 예제를 확인할 수 있습니다.
+
+#### 선 제목 {#line-titles}
+
+~~~jsx title="선의 텍스트 콘텐츠 편집 기능 비활성화" {18}
+const data = [
+ // 도형 구성
+ { "id": "shape_1", "type": "start", "x": 0, "text": "Start" },
+ { "id": "shape_2", "type": "process", "x": 400, "text": "Step 1" },
+ // 선 구성
+ {
+ "id": "line_1",
+ "type": "line",
+ "from": "shape_1",
+ "to": "shape_2"
+ },
+ // 선 제목 구성
+ {
+ "id": "title_1",
+ "type": "lineTitle",
+ "parent": "line_1",
+ "text": "Some text",
+ "editable": false // 선의 텍스트 항목에 대한 인라인 편집 비활성화
+ }
+];
+~~~
+
+#### 도형 {#shapes}
+
+~~~jsx title="도형의 텍스트 콘텐츠 편집 기능 비활성화"
+const data = [
+ { "id": 1, "x": 280, "y": 0, "text": "Start", "type": "start", "editable": false}
+];
+~~~
+
+#### 그룹 {#groups}
+
+~~~jsx title="그룹 헤더의 텍스트 콘텐츠 편집 기능 비활성화"
+const data = [
+ {
+ "type": "$group",
+ "id": 1,
+ "width": 400,
+ "height": 200,
+ "x": 0,
+ "y": 0,
+ "header": {
+ "text": "Group 1",
+ "editable": false
+ }
+ }
+];
+~~~
+
+#### 스윔레인 {#swimlanes}
+
+~~~jsx title="스윔레인 헤더와 서브헤더의 텍스트 콘텐츠 편집 기능 구성"
+const data = [
+ {
+ "id": "main",
+ "type": "$swimlane",
+ "height": 730,
+ "width": 1195,
+ "header": {
+ "closable": true,
+ "text": "Waterfall diagram template",
+ // 헤더에 대한 인라인 편집 비활성화
+ "editable": false
+ },
+ "layout": [
+ [1, 2, 3]
+ ],
+ "subHeaderCols": {
+ "headers": [
+ { "text": "September", "fill": "rgba(243, 92, 79, 0.4)" },
+ // 서브헤더에 대한 인라인 편집 활성화
+ { "text": "October", "fill": "rgba(155, 96, 248, 0.4)", "editable": true },
+ { "text": "November", "fill": "rgba(255, 174, 18, 0.4)" }
+ ],
+ // 모든 서브헤더에 대한 인라인 편집 비활성화
+ "editable": false
+ }
+ }
+];
+~~~
+
+## 키보드 단축키 {#keyboard-shortcuts}
+
+인라인 텍스트 에디터는 다음 키보드 단축키를 지원합니다.
+
+| 단축키 | 설명 |
+|--------|-------------|
+| `Ctrl+Enter` (Win), `CMD+Enter` (macOS) | 선택한 요소에 대해 인라인 텍스트 에디터를 엽니다. 더블클릭의 대안으로 작동합니다. 편집 가능한 `text` 속성이 있는 도형에만 적용됩니다. |
+| `Shift+Enter` | 에디터를 연 상태로 유지하면서 줄 바꿈(`\n`)을 삽입합니다. |
+| `Delete` (`Del`), `Backspace` | 커서 위치의 문자를 삭제합니다. 요소 자체는 삭제하지 않습니다. |
+| `Enter` | 현재 텍스트를 확정하고 에디터를 닫습니다. 에디터는 입력하는 대로 변경 사항을 동적으로 적용하므로, Enter를 누르면 편집이 성공적으로 완료되었음을 나타냅니다. |
+| `Escape` | 저장하지 않은 모든 변경 사항을 취소하고 에디터를 닫아, 요소의 텍스트를 편집을 시작하기 전 값으로 복원합니다. |
+
+## API 이벤트 {#api-events}
+
+라이브러리에는 에디터가 열리고 닫힐 때의 동작을 제어하고, 항목의 텍스트를 편집하는 과정을 제어하는 데 사용할 수 있는 유용한 [API 이벤트](/api/inline_editor/) 세트가 포함되어 있습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integrations/angular_integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integrations/angular_integration.md
new file mode 100644
index 000000000..18078f92a
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integrations/angular_integration.md
@@ -0,0 +1,269 @@
+---
+sidebar_label: Angular와의 통합
+title: Angular와의 통합
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Angular와의 통합에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# Angular와의 통합
+
+:::tip
+이 문서를 사용하려면 **Angular**의 기본 개념과 패턴에 익숙해야 합니다. 지식을 되짚어 보려면 [**Angular 문서**](https://angular.dev/overview)를 참고하세요.
+:::
+
+DHTMLX Diagram Editor는 **Angular**와 호환됩니다. DHTMLX Diagram Editor를 **Angular**와 함께 사용하는 방법에 대한 코드 예제를 준비했습니다. 자세한 내용은 해당 [**GitHub 예제**](https://github.com/DHTMLX/angular-diagram-demo)를 참고하세요.
+
+## 프로젝트 생성 {#creating-a-project}
+
+:::info
+새 프로젝트를 생성하기 전에 [**Angular CLI**](https://angular.dev/tools/cli)와 [**Node.js**](https://nodejs.org/en/)를 설치하세요.
+:::
+
+Angular CLI를 사용하여 새 **my-angular-diagram-app** 프로젝트를 생성합니다. 이를 위해 다음 명령을 실행하세요.
+
+~~~json
+ng new my-angular-diagram-app
+~~~
+
+:::note
+이 가이드를 따르려면 새 Angular 앱을 생성할 때 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG/Prerendering)을 비활성화하세요!
+:::
+
+위 명령은 필요한 모든 도구를 설치하므로 추가 명령을 실행할 필요가 없습니다.
+
+### 종속성 설치 {#installation-of-dependencies}
+
+그런 다음 앱 디렉터리로 이동합니다.
+
+~~~json
+cd my-angular-diagram-app
+~~~
+
+종속성을 설치하고 개발 서버를 시작합니다. 이를 위해 [**yarn**](https://yarnpkg.com/) 패키지 관리자를 사용하세요.
+
+~~~json
+yarn
+yarn start
+~~~
+
+앱은 로컬호스트에서 실행되어야 합니다(예: `http://localhost:3000`).
+
+## Diagram Editor 생성 {#creating-diagram-editor}
+
+이제 DHTMLX Diagram Editor 소스 코드를 받아야 합니다. 먼저 앱을 중지하고 Diagram Editor 패키지 설치를 진행하세요.
+
+### 1단계. 패키지 설치 {#step-1-package-installation}
+
+[**평가판 Diagram 패키지**](guides/diagram_editor/initialization.md#installing-diagram-editor-via-npm-or-yarn)를 다운로드하고 README 파일에 언급된 단계를 따르세요. 평가판 Diagram Editor는 30일 동안만 사용할 수 있습니다.
+
+### 2단계. 컴포넌트 생성 {#step-2-component-creation}
+
+이제 애플리케이션에 Diagram Editor를 추가하기 위한 Angular 컴포넌트를 생성해야 합니다. **src/app/** 디렉터리에 **diagram-editor** 폴더를 생성하고, 그 안에 새 파일을 추가한 다음 **diagram-editor.component.ts**로 이름을 지정하세요. 그런 다음 아래 설명된 단계를 완료하세요.
+
+#### 소스 파일 가져오기 {#import-source-files}
+
+파일을 열고 Diagram Editor 소스 파일을 가져옵니다. 참고 사항:
+
+- PRO 버전을 사용하고 로컬 폴더에서 Diagram Editor 패키지를 설치하는 경우, 가져오기 경로는 다음과 같습니다.
+
+~~~jsx
+import { DiagramEditor } from 'dhx-diagram-package';
+~~~
+
+- Diagram의 평가판 버전을 사용하는 경우, 다음 경로를 지정하세요.
+
+~~~jsx
+import { DiagramEditor } from '@dhx/trial-diagram';
+~~~
+
+이 튜토리얼에서는 Diagram의 **평가판(trial)** 버전을 구성하는 방법을 확인할 수 있습니다.
+
+#### 컨테이너 설정 및 Diagram Editor 초기화 {#set-the-container-and-initialize-diagram-editor}
+
+페이지에 Diagram Editor를 표시하려면 컴포넌트를 렌더링할 컨테이너를 설정하고 해당 생성자를 사용하여 Diagram Editor를 초기화해야 합니다.
+
+~~~jsx {1,9,13-14,19-20} title="diagram-editor.component.ts"
+import { DiagramEditor } from "@dhx/trial-diagram";
+import { IDefaultEditorConfig } from "@dhx/trial-diagram/codebase/types/ts-diagram-editor";
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ encapsulation: ViewEncapsulation.None,
+ selector: 'diagram-editor', // "app.component.ts" 파일에서 Other content
+
+
+~~~
+
+- 임의의 HTML 요소(예: Toolbar 컨트롤)에 테마 설정하기
+
+~~~jsx {10-11}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: {
+ css: "toolbar"
+ }
+ }
+});
+
+const toolbarEl = document.querySelector(".toolbar");
+dhx.setTheme("dark", toolbarEl);
+~~~
+
+**관련 샘플:** [Diagram Editor. 기본 모드. 기본 테마와 사용자 지정 테마](https://snippet.dhtmlx.com/9twmlfus)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/touch_support.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/touch_support.md
new file mode 100644
index 000000000..f8892dcf1
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/touch_support.md
@@ -0,0 +1,20 @@
+---
+sidebar_label: 터치 지원
+title: 터치 지원
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 터치 지원에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# 터치 지원
+
+
+
+버전 4.2부터 DHTMLX Diagram 라이브러리는 별도의 설정 없이 바로 사용할 수 있는 내장 터치 지원을 제공합니다.
+
+화면을 터치하여 애플리케이션과 상호작용할 때, 탭은 마우스 클릭과 동일하게 작동합니다.
+따라서 클릭 이벤트(항목을 클릭하거나 더블 클릭할 때 발생)는 터치스크린 기기에서도 계속 작동합니다. 단, mouseover 이벤트는 발생하지 않는다는 점에 유의하세요.
+
+터치 지원은 다음과 같은 터치 제스처를 인식할 수 있게 합니다.
+
+- **더블 탭** - 도형/그룹/스윔레인의 텍스트를 편집하거나, 커넥터 라인의 텍스트를 생성 및 편집합니다
+- **누르기, 유지, 드래그** - `blockSelection`을 호출하여 여러 항목을 선택합니다
+- **드래그** - 도형/그룹/스윔레인을 드래그하거나, 에디터의 왼쪽 패널에서 도형/텍스트/그룹/스윔레인을 드래그합니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/using_typescript.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/using_typescript.md
new file mode 100644
index 000000000..f7f454fba
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/using_typescript.md
@@ -0,0 +1,23 @@
+---
+sidebar_label: TypeScript 지원
+title: TypeScript 지원
+description: TypeScript와 함께 Diagram을 사용하는 방법에 대해 DHTMLX JavaScript Diagram 라이브러리 문서에서 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, 무료 30일 평가판 DHTMLX Diagram을 다운로드하세요.
+---
+
+# TypeScript 지원 {#typescript-support}
+
+v3.1부터 DHTMLX Diagram 라이브러리는 TypeScript 정의를 사용할 수 있는 기능을 제공합니다. TypeScript의 기본 지원은 별도의 설정 없이 바로 작동합니다.
+
+:::note
+이 기능은 저희 Snippet Tool에서 직접 사용해 볼 수 있습니다.
+:::
+
+
+
+## TypeScript 사용의 장점 {#advantages-of-using-typescript}
+
+왜 DHTMLX Diagram을 TypeScript와 함께 사용하는 것을 권장할까요?
+
+TypeScript의 가장 큰 장점은 DHTMLX Diagram 라이브러리의 API가 어떤 유형의 데이터를 필요로 하는지 정확하게 알 수 있다는 점입니다.
+
+타입 검사와 자동 완성 기능을 함께 사용하면 잠재적인 실수를 방지할 수 있을 뿐만 아니라 문서를 계속 참고하지 않고도 코드를 작성할 수 있어, 애플리케이션을 구축하는 방식이 더욱 지능적으로 발전합니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/line_titles/configuration_properties.md b/i18n/ko/docusaurus-plugin-content-docs/current/line_titles/configuration_properties.md
new file mode 100644
index 000000000..060782e54
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/line_titles/configuration_properties.md
@@ -0,0 +1,79 @@
+---
+sidebar_label: LineTitle 속성
+title: LineTitle 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 LineTitle 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드해 보십시오.
+---
+
+# LineTitle 속성 {#linetitle-properties}
+
+:::note
+색상 값은 HEX 형식으로 지정합니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx
+const data = [
+ // line title 객체
+ {
+ type: "lineTitle",
+ id?: string | number,
+ text: string,
+ parent: string | number,
+
+ distance?: number, // 기본값은 50
+ autoPosition?: boolean, // 기본값은 true
+ editable?: boolean, // 기본값은 true
+ fixed?: boolean, // 기본값은 false
+ hidden?: boolean, // 기본값은 false
+
+ fill?: string,
+ fontSize?: string | number, // 기본값은 14
+ lineHeight?: string | number, // 기본값은 14
+ fontStyle?: "normal" | "italic" | "oblique", // 기본값은 "normal"
+ fontColor?: string, // 기본값은 "#4C4C4C"
+ fontWeight?: string, // 기본값은 "500"
+ textAlign?: "center" | "left" | "right" // 기본값은 "center"
+ },
+ // 그 밖의 line 객체
+];
+~~~
+
+### 설명 {#description}
+
+각 line title 객체에는 다음 속성이 포함될 수 있습니다:
+
+- `type` - (필수) 항목의 유형, `"lineTitle"`로 설정합니다
+- `id` - (선택 사항) line title의 id, 기본적으로 자동 생성됩니다
+- `parent` - (필수) 제목을 표시할 대상 line의 id
+- `text` - (필수) line title의 텍스트
+- `distance` - (선택 사항) line 위에서 제목이 표시되는 지점까지의 거리를 0에서 100 범위로 지정하며, 기본값은 50입니다
+- `autoPosition` - (선택 사항) 텍스트의 방향을 정의합니다. *true*로 설정하면 텍스트의 방향이 line의 방향과 동일해지고, *false*이면 텍스트의 방향이 항상 수평이 됩니다; 기본값은 *true*입니다
+- `editable` - (선택 사항) 더블 클릭하여 항목의 텍스트를 편집하는 기능을 활성화/비활성화합니다; 기본값은 *true*입니다
+- `fixed` - (선택 사항) 지정된 `distance` 값으로 항목의 텍스트를 고정하는 기능을 활성화/비활성화합니다; 기본값은 *false*입니다
+- `hidden` - (선택 사항) 텍스트를 숨길지 여부를 정의합니다; 기본값은 *false*입니다
+- `fill` - (선택 사항) line title 항목의 배경 색상
+- `fontSize` - (선택 사항) 글꼴 크기, 기본값은 14입니다
+- `lineHeight` - (선택 사항) 텍스트 줄의 높이, 기본값은 14입니다
+- `fontStyle` - (선택 사항) 텍스트 글꼴의 스타일: `"normal"` (기본값), `"italic"`, `"oblique"`
+- `fontColor` - (선택 사항) 텍스트 글꼴의 색상, 기본값은 "#4C4C4C"입니다
+- `fontWeight` - (선택 사항) 텍스트 글꼴 굵기, 가능한 값은 다음과 같습니다: `"normal"`, `"bold"`, `"bolder"`, `"lighter"`, `"100"`~`"900"` 값이며, `"400"`은 normal과 동일하고, `"600"` 이상은 가장 굵은 글꼴입니다; 기본값은 `"500"`입니다
+- `textAlign` - (선택 사항) 텍스트의 정렬: `"center"`(기본값), `"left"`, `"right"`
+
+### 예제 {#example}
+
+~~~jsx
+const data = [
+ // 도형 구성하기
+ { type: "rectangle", id: "shape_1" },
+ { type: "rectangle", id: "shape_2", x: 400 },
+
+ // line 구성하기
+ { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
+
+ // line title 구성하기
+ { type: "lineTitle", id: "title_1", parent: "line_1", text: "Some text" }
+];
+~~~
+
+**관련 문서**: [LineTitle 구성하기](/line_titles/)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/line_titles/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/line_titles/index.md
new file mode 100644
index 000000000..bf30eec08
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/line_titles/index.md
@@ -0,0 +1,106 @@
+---
+sidebar_label: LineTitles
+title: LineTitles
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Line에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드해 보십시오.
+---
+
+# LineTitles {#linetitles}
+
+## 개요 {#overview}
+
+LineTitle은 도형을 연결하는 line에 텍스트를 설정합니다. 다이어그램과 에디터 모두에서 line을 더블 클릭하여 텍스트를 추가하거나, 에디터에서 line의 툴바를 사용하여(line을 클릭하여 활성화한 후) 텍스트를 추가할 수 있습니다. 또한 다이어그램과 에디터 모두에서 더블 클릭을 사용하여 line title을 편집할 수 있습니다.
+
+line에 텍스트를 추가하고 조작하는 또 다른 방법은 [데이터 세트](guides/loading_data.md#preparing-data-to-load)를 준비하는 것입니다.
+
+:::note
+LineTitle은 Diagram/Diagram Editor의 기본 모드(type: `"default"`)에서만 사용할 수 있습니다.
+:::
+
+
+
+## LineTitle 생성하기 {#creating-line-titles}
+
+line title을 생성하려면, 다이어그램에 로드할 데이터 세트를 준비하는 동안 line title 객체 내부에 `type: "lineTitle"`을 지정해야 합니다:
+
+~~~jsx {5-6}
+const data = [
+ { type: "rectangle", id: "shape_1" },
+ { type: "rectangle", id: "shape_2", x: 400 },
+ { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
+ // line title 구성하기
+ { type: "lineTitle", id: "title_1", parent: "line_1", text: "Some text" }
+];
+
+// Diagram 초기화
+const diagram = new dhx.Diagram("diagram_container");
+diagram.data.parse(data);
+~~~
+
+### LineTitle 객체의 속성 {#properties-of-a-line-title-object}
+
+line title의 모양과 느낌을 조정하고 위치를 구성할 수 있도록 [line title 객체의 전체 구성 속성 목록](line_titles/configuration_properties.md)을 확인하십시오.
+
+## LineTitle 다루기 {#working-with-line-titles}
+
+[DataCollection API](/api/data_collection/)를 통해 line title을 조작할 수 있습니다.
+
+:::note
+아래 예제는 Diagram과 Diagram Editor 모두에 적합합니다.
+:::
+
+### LineTitle 추가하기 {#adding-a-line-title}
+
+DataCollection의 [`add`](api/data_collection/add_method.md) 메서드를 통해 line title을 추가할 수 있습니다:
+
+~~~jsx {5-10}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+editor.diagram.data.add({
+ type: "lineTitle",
+ parent: "line_1",
+ text: "Some text",
+ fill: "#BCE4CE"
+});
+~~~
+
+메서드의 매개변수로 새 line title의 구성이 담긴 객체를 전달하십시오.
+
+:::note
+[line title 객체의 전체 구성 속성 목록](line_titles/configuration_properties.md)을 참조하십시오.
+:::
+
+### LineTitle 추가 차단하기 {#blocking-line-titles-adding}
+
+line title 추가를 방지해야 하는 경우, DataCollection의 [`beforeAdd`](api/data_collection/beforeadd_event.md) 이벤트를 사용할 수 있습니다:
+
+~~~jsx {5}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+editor.diagram.data.events.on("beforeAdd", (item) => item.type !== "lineTitle");
+~~~
+
+### LineTitle 반복하기 {#iterating-over-line-titles}
+
+DataCollection의 [`eachChild()`](api/data_collection/eachchild_method.md) 메서드를 사용하여 line의 하위 항목으로서 line title을 반복 처리할 수 있습니다:
+
+~~~jsx {7-9,11-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse([
+ { type: "rectangle", id: "shape_1" },
+ { type: "rectangle", id: "shape_2", x: 400 },
+ { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
+ { type: "lineTitle", id: "title_1", parent: "line_1", text: "Text 1", distance: 50 },
+ { type: "lineTitle", id: "title_2", parent: "line_1", text: "Text 2", distance: 70 }
+]);
+editor.diagram.data.eachChild("line_1", (child) => {
+ console.log(child.id); // => "title_1", "title_2"
+});
+~~~
+
+반복 처리할 title을 가진 line의 id를 첫 번째 매개변수로 전달하십시오. 위 예제에서 콜백 함수는 지정된 line의 각 하위 항목에 적용되어 그 id를 반환합니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/lines/configuration_properties.md b/i18n/ko/docusaurus-plugin-content-docs/current/lines/configuration_properties.md
new file mode 100644
index 000000000..569eabf68
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/lines/configuration_properties.md
@@ -0,0 +1,180 @@
+---
+sidebar_label: 라인 속성
+title: 라인 속성
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 라인 속성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# 라인 속성
+
+:::note
+색상 값은 HEX 형식으로 지정합니다.
+:::
+
+## 공통 속성 {#common-properties}
+
+### 사용법 {#usage}
+
+~~~jsx
+const data = [
+ // 라인 객체
+ {
+ type: "line" | "dash",
+ id?: string | number,
+ from?: string | number,
+ to?: string | number,
+ connectType?: "straight" | "elbow" | "curved",
+ strokeWidth?: number, // 기본값은 2
+ stroke?: string
+ },
+ // 추가 라인 객체
+]
+~~~
+
+### 설명 {#description}
+
+각 라인 객체는 다음 속성을 포함할 수 있습니다:
+
+- `type` - (필수) 커넥터 라인의 유형입니다: "*line*" 또는 "*dash*"
+- `id` - (선택 사항) 커넥터의 id입니다
+- `from` - (선택 사항) 상위 도형의 id입니다
+- `to` - (선택 사항) 하위 도형의 id입니다
+- `connectType` - (선택 사항) 라인의 연결 유형입니다: ["straight"](/lines/#lines-in-the-default-mode), ["elbow"](/lines/#lines-in-the-org-chart-mode)(기본/조직도 모드의 기본 유형), ["curved"](/lines/#lines-in-the-mindmap-mode)(마인드맵 모드의 기본 유형)
+- `strokeWidth` - (선택 사항) 라인의 두께입니다. 기본값은 2입니다
+- `stroke` - (선택 사항) 라인의 색상입니다. 기본값은 기본 모드에서 "#2198F3", 조직도/마인드맵 모드에서 "#CCC"입니다
+
+## 기본 모드 전용 속성 {#properties-specific-for-the-default-mode}
+
+### 사용법 {#usage-1}
+
+~~~jsx
+const data = [
+ // 라인 객체
+ {
+ // ... 공통 속성
+ forwardArrow?: string, // 기본값은 "filled"
+ backArrow?: string, // 기본값은 "filled"
+ fromSide?: "top" | "bottom" | "left" | "right" | "center",
+ toSide?: "top" | "bottom" | "left" | "right" | "center",
+ cornersRadius?: number,
+ customGap?: number,
+ points?: [
+ { x: number, y: number, custom?: boolean },
+ // 추가 포인트 객체
+ ]
+ },
+ // 추가 라인 객체
+]
+~~~
+
+### 설명 {#description-1}
+
+기본 모드의 다이어그램에 로드할 라인용 데이터 세트를 준비할 때 라인의 구성 객체에 다음 속성을 추가할 수 있습니다:
+
+- `forwardArrow` - (선택 사항) 정방향 화살표 커넥터를 설정하고 화살표의 유형을 정의합니다(기본값은 `"filled"`)
+- `backArrow` - (선택 사항) 역방향 화살표 커넥터를 설정하고 화살표의 유형을 정의합니다(기본값은 `"filled"`)
+- `fromSide` - (선택 사항) 연결이 시작되는 도형의 측면입니다("*top*", "*bottom*", "*left*","*right*", "*center*")
+- `toSide` - (선택 사항) 다른 도형이 연결되는 도형의 측면입니다("*top*", "*bottom*", "*left*", "*right*", "*center*")
+- `cornersRadius` - (선택 사항) 커넥터 모서리의 라운딩 반경입니다
+- `customGap` - (선택 사항) 도형에서 커넥터 라인의 직각 굴곡부까지의 거리를 설정합니다
+- `points` - (선택 사항) 라인의 포인트 객체 배열을 설정합니다. 각 객체는 다음 속성을 포함합니다:
+ - `x` - (필수) 포인트의 x 좌표입니다
+ - `y` - (필수) 포인트의 y 좌표입니다
+ - `custom` - (선택 사항) 포인트의 고정 여부를 정의합니다. *true*인 경우 포인트의 위치는 상호작용 후에만 변경할 수 있습니다
+
+### 예제 {#example}
+
+~~~jsx
+const data = [
+ // 도형 구성
+ { "id": 1, "x": 200, "y": 0, "text": "Start", "type": "start" },
+ { "id": 2, "x": 200, "y": 320, "text": "Call Client and \n set-up Appointment", "type": "process" },
+ // 라인 구성
+ {
+ "type": "line",
+ "stroke": "#0AB169",
+ "connectType": "straight",
+ "from": 1,
+ "to": 2,
+ "fromSide": "bottom",
+ "toSide": "top",
+ "forwardArrow": "filled"
+ }
+];
+~~~
+
+## PERT 모드의 링크 전용 속성 {#properties-specific-for-links-in-the-pert-mode}
+
+### 사용법 {#usage-2}
+
+~~~jsx
+const dataset = {
+ data: [...], // 도형 배열(작업, 마일스톤, 프로젝트)
+ links: [
+ // 링크 객체
+ {
+ id?: string | number,
+ source: string | number,
+ target: string | number
+ },
+ // 추가 링크 객체
+ ]
+}
+~~~
+
+### 설명 {#description-2}
+
+PERT 모드의 다이어그램에 로드할 링크용 데이터 세트를 준비할 때 링크의 구성 객체에 다음 속성을 추가할 수 있습니다:
+
+- `id` - (선택 사항) 링크 커넥터의 id입니다
+- `source` - (필수) 링크가 시작되는 작업의 id입니다
+- `target` - (필수) 링크가 종료되는 작업의 id입니다
+
+:::info 중요
+PERT Diagram에서는 `type: "0"`("finish" -> "start") 유형의 링크만 지원된다는 점에 유의하세요. [DHTMLX Gantt 차트에서 사용되는 다른 모든 링크 유형](https://docs.dhtmlx.com/gantt/desktop__link_properties.html)도 `type: "0"`으로 처리됩니다.
+:::
+
+:::tip
+Diagram의 데이터 컬렉션에 있는 항목의 id는 고유해야 하므로, 데이터를 로드하거나 새 링크를 추가할 때 기존 링크의 id에 `$link` 접두사가 추가된다는 점에 유의하세요.
+
+예를 들어:
+
+~~~jsx
+{
+ data: [...],
+ links: [
+ { id: "1" }, // 다이어그램에서 "$link:1"로 사용할 수 있습니다
+ ]
+}
+
+// diagram.data.getItem("$link:1");
+~~~
+:::
+
+### 예제 {#example-1}
+
+~~~jsx {11-16}
+const dataset = {
+ data: [
+ // 프로젝트 도형 구성
+ { id: "1", text: "Project #1", type: "project", parent: null },
+ // 작업 도형 구성
+ { id: "1.1", text: "Task #1", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+ { id: "1.2", text: "Task #2", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+ { id: "2.1", text: "Task #3", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+ { id: "2.2", text: "Task #4", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 }
+ ],
+ links: [
+ // 링크 객체 구성
+ { id: "line-1", source: "1.1", target: "1.2" },
+ { id: "line-2", source: "1.2", target: "2.1" },
+ { id: "line-3", source: "2.1", target: "2.2" }
+ ]
+};
+~~~
+
+**변경 로그**:
+
+- Diagram의 PERT 모드에서 사용되는 `links` 유형의 커넥터가 v6.1에서 추가되었습니다
+- `line` 객체의 `title` 속성이 v6.0에서 지원 중단되었습니다
+
+**관련 문서**: [라인 구성](/lines/)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/lines/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/lines/index.md
new file mode 100644
index 000000000..d8898963c
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/lines/index.md
@@ -0,0 +1,132 @@
+---
+sidebar_label: 라인
+title: 라인
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 라인에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# 라인
+
+## 개요 {#overview}
+
+도형을 연결하는 라인의 모양과 느낌은 다이어그램을 초기화하는 모드([기본](#lines-in-the-default-mode), [조직도](#lines-in-the-org-chart-mode), [마인드맵](#lines-in-the-mindmap-mode) 또는 [PERT](#links-in-the-pert-mode))에 따라 정의됩니다.
+
+### 기본 모드의 라인 {#lines-in-the-default-mode}
+
+Diagram의 기본 모드에서는 다양한 도형을 필요한 순서로 ["straight"(기본값) 또는 "elbow"](lines/configuration_properties.md) 라인으로 연결하여 특정 프로세스의 구성도를 만들 수 있습니다.
+
+Diagram/Diagram Editor의 기본 모드에서 라인에 텍스트를 추가하려면 [lineTitle](/line_titles/) 객체의 `text` 속성을 사용하세요.
+
+
+
+### 조직도 모드의 라인 {#lines-in-the-org-chart-mode}
+
+Diagram의 조직도 모드는 계층적 순서로 ["elbow" 라인](lines/configuration_properties.md)으로 연결된 도형 세트를 포함하는 조직도를 나타냅니다.
+
+
+
+도형 객체의 `dir: "vertical"` 구성 어트리뷰트를 통해 상위 도형에 대해 도형을 연결하는 세로 방향을 정의할 수 있습니다.
+
+### 마인드맵 모드의 라인 {#lines-in-the-mindmap-mode}
+
+Diagram의 마인드맵 모드는 또 다른 종류의 계층적 다이어그램을 렌더링하는 데 사용됩니다. 도형은 ["curved" 라인](lines/configuration_properties.md)으로 연결되며 중앙 도형을 중심으로 배치됩니다.
+
+
+
+이 모드는 하위 주제의 가지로 둘러싸인 핵심 주제나 아이디어를 표현해야 할 때 유용합니다.
+
+루트 도형을 기준으로 한 하위 도형의 배치는 메인 알고리즘에 의해 자동으로 정의됩니다.
+하위 도형의 기본 방향을 변경하려면 다이어그램을 초기화할 때 [`typeConfig`](api/diagram/typeconfig_property.md) 구성 속성을 사용하세요.
+
+### PERT 모드의 링크 {#links-in-the-pert-mode}
+
+Diagram의 PERT 모드는 작업 및 프로젝트의 시퀀스와 그들 간의 연결을 렌더링하기 위한 것입니다. `"task"`, `"milestone"`, `"project"` 유형의 도형은 [`"links"` 커넥터](lines/configuration_properties.md#properties-specific-for-links-in-the-pert-mode)로 연결됩니다.
+
+
+
+
+## 도형 간 연결 설정 {#setting-connections-between-shapes}
+
+Diagram에서 도형을 연결하려면 다음 두 가지 방법 중 하나를 사용할 수 있습니다:
+
+- **라인 객체 사용**
+
+도형을 연결하는 로직을 설명하는 별도의 객체를 지정해야 합니다. 예를 들어:
+
+~~~jsx
+const data = [
+ // 도형
+ { id: "1", text: "Chairman & CEO" },
+ { id: "2", text: "Manager" },
+ { id: "3", text: "Technical Director" },
+ { id: "4", text: "Manager" },
+ { id: "5", text: "Technical Director" },
+ // 커넥터
+ { "id": "1-2", "from": "1", "to": "2", "type": "dash" },
+ { "id": "1-3", "from": "1", "to": "3", "type": "dash" },
+ { "id": "1-4", "from": "1", "to": "4", "type": "line" },
+ { "id": "1-5", "from": "1", "to": "5", "type": "line" }
+];
+~~~
+
+라인 객체의 `type` 속성을 사용하면 각 라인에 개별 유형을 설정할 수 있습니다.
+
+:::note
+[라인 객체의 전체 구성 속성 목록](lines/configuration_properties.md)을 참조하세요.
+:::
+
+- **`"parent"` 어트리뷰트 사용**
+
+:::note
+이 방법은 Diagram/Diagram Editor의 기본 모드에서는 작동하지 않습니다.
+:::
+
+도형의 구성 객체에 `parent` 속성을 지정하고 그 값으로 상위 도형의 id를 설정할 수 있습니다:
+
+~~~jsx
+const data = [
+ // 도형
+ { id: "1", text: "Chairman & CEO" },
+ { id: "2", text: "Manager", parent: "1" },
+ { id: "3", text: "Technical Director", parent: "1" },
+ { id: "4", text: "Manager", parent: "1" },
+ { id: "5", text: "Technical Director", parent: "1" }
+];
+~~~
+
+이 경우, 모든 커넥터는 동일한 유형을 갖습니다.
+
+### 기본 라인 유형 설정 {#setting-the-default-line-type}
+
+다이어그램 구성 객체의 [`lineConfig`](api/diagram/lineconfig_property.md) 속성에 있는 `lineType` 매개변수를 통해 다이어그램의 모든 커넥터 라인에 공통 유형을 설정할 수 있습니다:
+
+~~~jsx
+const diagram = new dhx.Diagram("diagram_container", {
+ type: "default",
+ lineConfig: {
+ lineType: "dash" // "dash" | "line"
+ }
+});
+diagram.data.parse(data);
+~~~
+
+[라인 객체](lines/configuration_properties.md)에 `type` 속성이 없는 경우 `lineType` 매개변수의 값이 적용됩니다.
+
+### 라인의 연결 유형 설정 {#setting-the-connection-type-of-the-line}
+
+다이어그램 구성 객체의 [`lineConfig`](api/diagram/lineconfig_property.md) 속성에 있는 `connectType` 매개변수를 통해 다이어그램 라인의 연결 유형을 지정할 수 있습니다. 다음과 같은 유형을 제공합니다:
+
+- `"elbow"`(기본 및 조직도 Diagram 모드의 기본 유형)
+- `"straight"`
+- `"curved"`(마인드맵 Diagram 모드의 기본 유형). `"curved"` 유형의 커넥터 라인은 마인드맵 Diagram 모드에서만 사용된다는 점에 유의하세요
+
+~~~jsx
+const diagram = new dhx.Diagram("diagram_container", {
+ type: "default",
+ lineConfig: {
+ connectType: "straight" // 기본 모드의 경우 "elbow" | "straight"
+ }
+});
+diagram.data.parse(data);
+~~~
+
+[라인 객체](lines/configuration_properties.md)에 `connectType` 속성이 없는 경우 `connectType` 매개변수의 값이 적용됩니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/migration.md b/i18n/ko/docusaurus-plugin-content-docs/current/migration.md
new file mode 100644
index 000000000..33ff4d8d0
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/migration.md
@@ -0,0 +1,612 @@
+---
+sidebar_label: 최신 버전으로 마이그레이션
+title: 최신 버전으로 마이그레이션
+description: DHTMLX JavaScript Diagram 라이브러리 문서에서 최신 버전으로의 마이그레이션에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요.
+---
+
+# 최신 버전으로 마이그레이션 {#migration-to-newer-versions}
+
+## 5.0 -> 6.0 {#50---60}
+
+### Diagram Editor 구조 {#diagram-editor-structure}
+
+Diagram Editor의 주요 구성 요소 이름이 변경되었습니다:
+
+- 왼쪽 패널 -> [Shapebar](guides/diagram_editor/shapebar.md)
+- 오른쪽 패널 -> [Editbar](guides/diagram_editor/editbar.md)에는 [유연한 구성이 제공됩니다](whats_new.md#new-functionality)
+
+기본 [Toolbar](guides/diagram_editor/toolbar.md) 구조가 변경되었습니다. Toolbar도 세부적으로 구성할 수 있게 되어 사용자 지정 Toolbar 요소를 추가할 수도 있습니다.
+
+### Diagram Editor API {#diagram-editor-api}
+
+Diagram Editor 패널을 구성하기 위한 `view` 객체가 도입되었습니다:
+
+~~~jsx
+view?: {
+ toolbar?: boolean | obj,
+ shapebar?: boolean | obj,
+ editbar?: boolean | obj
+}
+~~~
+
+패널 관리의 새로운 가능성을 살펴보려면 관련 API 개요 가이드를 확인하세요:
+
+- [View API 개요](api/diagram_editor/view/api_overview.md)
+- [Toolbar API 개요](api/diagram_editor/toolbar/api_overview.md)
+- [Shapebar API 개요](api/diagram_editor/shapebar/api_overview.md)
+- [Editbar API 개요](api/diagram_editor/editbar/api_overview.md)
+
+#### 지원 중단된 메서드 {#deprecated-methods}
+
+- Diagram Editor의 `setViewMode()` 메서드는 지원이 중단되어 더 이상 사용할 수 없습니다. 대신 `view` 객체의 [`show()`](api/diagram_editor/view/methods/show_method.md)/[`hide()`](api/diagram_editor/view/methods/hide_method.md) 메서드를 사용하세요.
+
+~~~jsx {4} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.setViewMode("preview"); // "preview" 또는 "edit"
+~~~
+
+~~~jsx {4-5} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.view.hide("shapebar");
+editor.view.hide("editbar");
+~~~
+
+#### 지원 중단된 속성 {#deprecated-properties}
+
+- Diagram Editor의 `reservedWidth` 속성은 지원이 중단되어 더 이상 사용할 수 없습니다.
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ reservedWidth: 150
+});
+~~~
+
+대신 다음 구문을 사용하세요:
+
+~~~jsx title="From v6.0"
+editor.diagram.config.margin.x = 40;
+~~~
+
+- Diagram Editor의 `editMode` 속성은 지원이 중단되어 더 이상 사용할 수 없습니다. 대신 `view` 객체의 해당 속성([toolbar](api/diagram_editor/toolbar/api_overview.md), [shapebar](api/diagram_editor/shapebar/api_overview.md), [editbar](api/diagram_editor/editbar/api_overview.md))을 사용하세요.
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ editMode: false
+});
+~~~
+
+~~~jsx {2-6} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ view: {
+ toolbar: false,
+ shapebar: false, // "default" 모드에서만 해당
+ editbar: false
+ }
+});
+~~~
+
+- Diagram Editor의 `controls` 속성은 지원이 중단되어 더 이상 사용할 수 없습니다. 대신 `view.toolbar` 구성의 [`items`](api/diagram_editor/toolbar/config/items_property.md) 속성을 사용하세요.
+
+~~~jsx {2-4} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ controls: {
+ // ...
+ }
+});
+~~~
+
+~~~jsx {2-6} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ view: {
+ toolbar: {
+ items: []
+ }
+ }
+});
+~~~
+
+- Diagram Editor의 `shapeBarWidth` 속성은 지원이 중단되어 더 이상 사용할 수 없습니다. 대신 `view.shapebar` 구성의 [`width`](api/diagram_editor/shapebar/config/width_property.md) 속성을 사용하세요.
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeBarWidth: 190
+});
+~~~
+
+~~~jsx {3-7} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ width: 400 // 기본값은 300
+ }
+ }
+});
+~~~
+
+- Diagram Editor의 `shapeSections` 속성은 지원이 중단되어 더 이상 사용할 수 없습니다. 대신 `view.shapebar` 구성의 [`sections`](api/diagram_editor/shapebar/config/sections_property.md) 속성을 사용하세요.
+
+~~~jsx {2-7} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeSections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+});
+~~~
+
+~~~jsx {3-12} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+ }
+ }
+});
+~~~
+
+- Diagram Editor의 `gapPreview` 속성은 지원이 중단되어 더 이상 사용할 수 없습니다. 대신 `view.shapebar` 구성의 [`preview`](api/diagram_editor/shapebar/config/preview_property.md) 객체의 `gap` 속성을 사용하세요.
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ gapPreview: 10
+});
+~~~
+
+~~~jsx {3-10} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 8
+ }
+ }
+ }
+});
+~~~
+
+- Diagram Editor의 `scalePreview` 속성은 지원이 중단되어 더 이상 사용할 수 없습니다. 대신 `view.shapebar` 구성의 [`preview`](api/diagram_editor/shapebar/config/preview_property.md) 객체의 `scale` 속성을 사용하세요.
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ gapPreview: 10
+});
+~~~
+
+~~~jsx {3-10} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 8
+ }
+ }
+ }
+});
+~~~
+
+#### 지원 중단된 이벤트 {#deprecated-events}
+
+- Toolbar에 해당 버튼이 없으므로 Diagram Editor의 다음 이벤트는 지원이 중단되어 더 이상 사용할 수 없습니다: `resetButton`, `applyButton`, `visibility`, `exportData`, `importData`, `autoLayout`. 대신 Diagram Editor의 `toolbar` 객체에서 발생하는 `click` 이벤트를 리스닝할 수 있습니다:
+
+~~~jsx
+editor.toolbar.events.on("click", id => console.log(id));
+~~~
+
+:::note
+[서비스 요소](guides/diagram_editor/toolbar.md#service-elements)의 이름 ID는 `$` 기호로 시작합니다.
+:::
+
+- Diagram Editor의 `changeGridStep` 이벤트는 지원이 중단되어 더 이상 사용할 수 없습니다.
+
+### Diagram API {#diagram-api}
+
+- [`addShape`](api/diagram/addshape_method.md) 메서드의 `properties` 속성은 지원이 중단되어 더 이상 사용되지 않습니다. Editor의 Editbar에서 사용자 지정 도형을 구성하는 방식은 Editbar 패널의 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 속성을 통해 구현됩니다:
+
+~~~jsx {13-16} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+
+editor.diagram.addShape("network", {
+ template: config => (
+ `${config.title}
+- ${config.text.join("
- ")}
*이 속성은 사용자 지정 도형에는 사용할 수 없습니다.* +- `height` - (선택 사항) 도형의 높이입니다 +- `width` - (선택 사항) 도형의 너비입니다 +- `fixed` - (선택 사항) 도형의 이동 및 크기 조정을 활성화/비활성화합니다. 기본값은 *false*입니다 +- `hidden` - (선택 사항) 도형을 숨길지 여부를 정의합니다 + +:::note +`"text"`/`"topic"` 도형의 경우 `height`와 `width` 값은 도형의 콘텐츠에 따라 자동으로 계산됩니다. +::: + +## 사용자 지정 속성 {#custom-properties} + +### 사용법 {#usage-1} + +~~~jsx +const data = [ + // 도형 객체 + { + // ... 공통 속성 + [key: string]?: any, // 사용자 지정 속성 + // ... 추가 사용자 지정 속성 + }, + // 추가 도형 객체 +] +~~~ + +### 설명 {#description-1} + +사용자 지정 도형용 데이터 세트를 준비할 때 도형의 구성 객체에 원하는 사용자 지정 속성을 추가할 수 있습니다: + +- `key` - (선택 사항) 사용자 지정 도형을 위한 사용자 지정 속성입니다. 자세한 내용은 [사용자 지정 도형](shapes/custom_shape.md) 문서를 참조하세요.
*사용자 지정 속성의 이름으로는 고유한 이름을 사용하세요. 다이어그램 도형 객체의 내부 속성을 재정의하는 것은 금지되어 있으며, 이를 어길 경우 다이어그램과 편집기가 올바르게 작동하지 않습니다.* + +### 예제 {#example} + +~~~jsx +const data = [ + { + "id": "main", + "name": "Kristin Mccoy", + "post": "Medical director", + "phone": "(405) 555-0128", + "mail": "kmccoy@gmail.com", + "photo": "../img/avatar-01.jpg" + } +]; +~~~ + +## 기본 모드 전용 속성 {#properties-specific-for-the-default-mode} + +### 사용법 {#usage-2} + +~~~jsx +const data = [ + // 도형 객체 + { + // ... 공통 속성 + angle?: number, + + // 또는 + preview?: string, + // 또는 + preview?: { + img?: string, + width?: number | string, + height?: number | string, + gap?: number | string, + scale?: number + } + }, + // 추가 도형 객체 +] +~~~ + +### 설명 {#description-2} + +기본 모드의 다이어그램에 로드할 도형용 데이터 세트를 준비할 때 도형의 구성 객체에 다음 속성을 추가할 수 있습니다: + +- `angle` - (선택 사항) 도형 회전 각도입니다 +- `preview` - (선택 사항) 이미지 경로/base64 이미지이거나, [편집기의 shapebar에 표시되는 도형 미리보기를 구성하기 위한](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes) 설정을 담은 객체입니다. 객체인 경우 다음과 같은 선택적 속성 집합을 포함할 수 있습니다: + - `img` - (선택 사항) 이미지 경로 또는 base64 이미지입니다 + - `width` - (선택 사항) 이미지의 너비입니다 + - `height` - (선택 사항) 이미지의 높이입니다 + - `gap` - (선택 사항) 지정된 도형 유형에 대한 [preview](api/diagram_editor/shapebar/config/preview_property.md) 속성의 `gap` 어트리뷰트 값을 설정합니다 + - `scale` - (선택 사항) 지정된 도형 유형에 대한 [preview](api/diagram_editor/shapebar/config/preview_property.md) 속성의 `scale` 어트리뷰트 값을 설정합니다 + :::info + `scale` 속성은 `img`, `width`, `height` 속성과 함께 적용할 수 없습니다 + ::: + +### 예제 {#example-1} + +~~~jsx +const data = [ + { id: 1, x: 280, y: 0, text: "Start", type: "start", angle: 10 } +]; +~~~ + +## 조직도 모드 전용 속성 {#properties-specific-for-the-org-chart-mode} + +### 사용법 {#usage-3} + +~~~jsx +const data = [ + // 도형 객체 + { + // ... 공통 속성 + parent?: string | number, + dx?: number, + dy?: number, + dir?: string, + open?: boolean, // 기본값은 true + assistant?: boolean, + partner?: boolean, + catchItem?: boolean, + giveItem?: boolean + + }, + // 추가 도형 객체 +] +~~~ + +### 설명 {#description-3} + +조직도 모드의 다이어그램에 로드할 도형용 데이터 세트를 준비할 때 도형의 구성 객체에 다음 속성을 추가할 수 있습니다: + +- `parent` - (선택 사항) 상위 도형의 id입니다 +- `dx` - (선택 사항) 도형의 왼쪽 오프셋입니다 +- `dy` - (선택 사항) 도형의 위쪽 오프셋입니다 +- `dir` - (선택 사항) 도형을 연결하는 방향입니다. 도형을 세로로 연결하려면 이 어트리뷰트를 `"vertical"` 값으로 설정하세요 +- `open` - (선택 사항) 현재 도형의 하위 항목 표시 여부를 정의합니다. 기본값은 *true*입니다 +- `assistant` - (선택 사항) 도형이 상위 도형의 어시스턴트 항목인지 여부를 정의합니다 +- `partner` - (선택 사항) 도형이 상위 도형의 파트너 항목인지 여부를 정의합니다 +- `catchItem` - (선택 사항) 항목이 이동 중인 항목을 캐치할 수 있는지 여부를 정의합니다 +- `giveItem` - (선택 사항) 항목을 이동할 수 있는지 여부를 정의합니다 + +### 예제 {#example-2} + +~~~jsx +const data = [ + { + "id": "1", + "text": "item 1", + }, + { + "id": "2", + "text": "item 2", + "parent": "1", + "dir": "vertical" + }, + { + "id": "1.1", + "text": "assistant for 1", + "parent": "1", + "assistant": true + }, + { + "id": "1.2", + "text": "partner for 1", + "parent": "1", + "partner": true + } +]; +~~~ + +**관련 샘플**: [Diagram. 조직도 모드. 중첩된 세로 목록](https://snippet.dhtmlx.com/98tzmzpg) + +## 마인드맵 모드 전용 속성 {#properties-specific-for-the-mindmap-mode} + +### 사용법 {#usage-4} + +~~~jsx +const data = [ + // 도형 객체 + { + // ... 공통 속성 + parent?: string | number, + dx?: number, + dy?: number, + open?: boolean, // 기본값은 true + openDir?:{ + left?: boolean, + right?: boolean + }, + catchItem?: boolean, + giveItem?: boolean + }, + // 추가 도형 객체 +] +~~~ + +### 설명 {#description-4} + +마인드맵 모드의 다이어그램에 로드할 도형용 데이터 세트를 준비할 때 도형의 구성 객체에 다음 속성을 추가할 수 있습니다: + +- `parent` - (선택 사항) 상위 도형의 id입니다 +- `dx` - (선택 사항) 도형의 왼쪽 오프셋입니다 +- `dy` - (선택 사항) 도형의 위쪽 오프셋입니다 +- `open` - (선택 사항) 현재 도형의 하위 항목 표시 여부를 정의합니다. 기본값은 *true*입니다 +- `openDir` - (선택 사항) 루트 도형의 하위 항목을 표시/숨김 처리합니다. 이 객체는 두 개의 어트리뷰트를 사용합니다: + - `left` - (선택 사항) 루트 도형 왼쪽의 하위 항목을 표시/숨김 처리합니다 + - `right` - (선택 사항) 루트 도형 오른쪽의 하위 항목을 표시/숨김 처리합니다 +- `catchItem` - (선택 사항) 항목이 이동 중인 항목을 캐치할 수 있는지 여부를 정의합니다 +- `giveItem` - (선택 사항) 항목을 이동할 수 있는지 여부를 정의합니다 + +**관련 샘플**: [Diagram editor. 마인드맵 모드. 감정 마인드맵](https://snippet.dhtmlx.com/lo1vm0e8) + +:::info +자세한 내용은 [DHTMLX 라이브러리로 JavaScript 마인드맵 다이어그램을 만드는 방법](https://dhtmlx.com/blog/create-javascript-mindmap-diagram-dhtmlx-library/) 문서를 참조하세요 +::: + +### 예제 {#example-3} + +~~~jsx +const data = [ + { + id: "1", + text: "main", + openDir: { + left: true, + right: false + } + }, + { + id: "2", + text: "2", + parent: "1", + giveItem: false + }, + { + id: "3", + text: "3", + parent: "1", + catchItem: false + }, + { + id: "4", + text: "4", + parent: "1" + } +]; +~~~ + +## "text", "topic" 및 플로우차트 도형 전용 속성 {#properties-specific-for-text-topic-and-flow-chart-shapes} + +### 사용법 {#usage-5} + +~~~jsx +const data = [ + // 도형 객체 + { + // ... 공통 속성 + fill?: string, + stroke?: string, + strokeWidth?: number, // 기본값은 1 + strokeType?: "line" | "dash", // 기본값은 "line" + strokeDash?: string, + fontColor?: string, + fontStyle?: "normal" | "italic" | "oblique", // 기본값은 "normal" + fontWeight?: string, // 기본값은 "normal" + fontSize?: number, // 기본값은 14 + textAlign?: "left" | "center" | "right", // 기본값은 "center" + textVerticalAlign?: "top" | "center" | "bottom", // 기본값은 "center" + lineHeight?: number // 기본값은 14 + }, + // 추가 도형 객체 +] +~~~ + +### 설명 {#description-5} + +`"text"`, `"topic"` 및 플로우차트 도형용 데이터 세트를 준비할 때 도형의 구성 객체에 다음 속성을 추가할 수 있습니다: + +- `fill` - (선택 사항) 도형의 색상입니다 +- `stroke` - (선택 사항) 도형 외곽선의 색상입니다 +- `strokeWidth` - (선택 사항) 도형 외곽선의 두께입니다. 기본값은 1입니다 +- `strokeType` - (선택 사항) 외곽선 스트로크의 유형입니다. `"line"`(기본값), 점선의 경우 `"dash"`입니다 +- `strokeDash` - (선택 사항) 점선 외곽선의 대시와 간격 패턴입니다 +- `fontColor` - (선택 사항) 텍스트 글꼴의 색상입니다 +- `fontStyle` - (선택 사항) 텍스트 글꼴의 스타일입니다. `"normal"`(기본값), `"italic"` 또는 `"oblique"`가 가능합니다 +- `fontWeight` - (선택 사항) 텍스트 글꼴의 두께입니다. 가능한 값은 `"normal"`(기본값), `"bold"`, `"bolder"`, `"lighter"`, `"100"`~`"900"` 값이며, `"400"`은 normal과 동일하고 `"600"` 이상은 가장 굵은 글꼴입니다 +- `fontSize` - (선택 사항) 픽셀 단위의 글꼴 크기입니다. 기본값은 14입니다 +- `textAlign` - (선택 사항) 도형 내 텍스트의 정렬 방식입니다: `"left"`, `"center"`(기본값), `"right"` +- `textVerticalAlign` - (선택 사항) 도형 내 텍스트의 세로 정렬 방식입니다:`"top"`,`"center"`(기본값),`"bottom"` +- `lineHeight` - (선택 사항) 줄의 높이입니다. 기본값은 14입니다 + +### 예제 {#example-4} + +~~~jsx +const data = [ + { + "id": "u1585139915192", + "type": "text", + "x": 25, + "y": 280, + "text": "Investment decision", + "width": 150, + "height": 16, + "lineHeight": 14, + "fontSize": "16", + "fontColor": "rgba(0,0,0,0.70)" + } +]; +~~~ + +## "card" 도형 전용 속성 {#properties-specific-for-card-shapes} + +### 사용법 {#usage-6} + +~~~jsx +const data = [ + // 도형 객체 + { + // ... 공통 속성 + headerColor?: string + }, + // 추가 도형 객체 +] +~~~ + +### 설명 {#description-6} + +`"card"` 도형용 데이터 세트를 준비할 때 도형의 구성 객체에 다음 속성을 추가할 수 있습니다: + +- `headerColor` - (선택 사항) 도형 헤더의 색상입니다 + +### 예제 {#example-5} + +~~~jsx +const data = [ + { + "id": 1, + "type": "card", + "text": "item: 1", + }, + { + "id": 2, + "type": "card", + "text": "item: 2", + "parent": 1, + "headerColor": "#5874CD" + }, +]; +~~~ + +## "img-card" 도형 전용 속성 {#properties-specific-for-img-card-shapes} + +### 사용법 {#usage-7} + +~~~jsx +const data = [ + // 도형 객체 + { + // ... 공통 속성 + img?: string, + title?: string, + headerColor?: string + }, + // 추가 도형 객체 +] +~~~ + +### 설명 {#description-7} + +`"img-card"` 도형용 데이터 세트를 준비할 때 도형의 구성 객체에 다음 속성을 추가할 수 있습니다: + +- `img` - (선택 사항) 도형의 이미지입니다 +- `title` - (선택 사항) 도형의 제목입니다 +- `headerColor` - (선택 사항) 도형 헤더의 색상입니다 + +### 예제 {#example-6} + +~~~jsx +const data = [ + { + "id": "1", + "type": "img-card", + "text": "Chairman & CEO", + "title": "Henry Bennett", + "img": "../img/avatar-01.png", + "headerColor": "" + }, + { + "id": "2", + "type": "img-card", + "text": "QA Lead", + "title": "Emma Lynch", + "img": "../img/avatar-02.png", + "parent": "1", + "headerColor": "#5874CD" + } +]; +~~~ + +## "task" 도형 전용 속성 {#properties-specific-for-task-shapes} + +### 사용법 {#usage-8} + +~~~jsx +const data = [ + // 도형 객체 + { + type: "task", + duration: number, + start_date: string | Date, + end_date?: string | Date, + text?: string, + parent?: string | number | null + //... 공통 속성 + }, + // 추가 도형 객체 +] +~~~ + +### 설명 {#description-8} + +`"task"` 도형용 데이터 세트를 준비할 때 도형의 구성 객체에 다음 속성을 추가할 수 있습니다: + +- `text` - (선택 사항) 작업에 대한 설명입니다 +- `start_date` - (필수) 작업의 시작 날짜입니다 +- `end_date` - (선택 사항) 작업의 종료 날짜입니다 +- `duration` - (필수) 작업의 기간입니다 +- `parent` - (선택 사항) 작업의 상위 프로젝트 id입니다 + +### 예제 {#example-7} + +~~~jsx +const data = [ + { + "id": "4.2.1", + "text": "Functional Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 18), + "duration": 2 + } +]; +~~~ + +## "milestone" 도형 전용 속성 {#properties-specific-for-milestone-shapes} + +### 사용법 {#usage-9} + +~~~jsx +const data = [ + // 도형 객체 + { + type: "milestone", + text?: string, + parent?: string | number | null + //... 공통 속성 + } + // 추가 도형 객체 +] +~~~ + +### 설명 {#description-9} + +`"milestone"` 도형용 데이터 세트를 준비할 때 도형의 구성 객체에 다음 속성을 추가할 수 있습니다: + +- `text` - (선택 사항) 작업에 대한 설명입니다 +- `parent` - (선택 사항) 작업의 상위 프로젝트 id입니다 + +### 예제 {#example-8} + +~~~jsx +const data = [ + { + "id": "5.2", + "text": "Product Launch", + "type": "milestone", + "parent": "5", + "start_date": new Date(2026, 2, 1), + "duration": 1 + } +]; +~~~ + + +**관련 문서**: + +- [기본 도형](shapes/default_shapes.md) +- [사용자 지정 도형](shapes/custom_shape.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/shapes/custom_shape.md b/i18n/ko/docusaurus-plugin-content-docs/current/shapes/custom_shape.md new file mode 100644 index 000000000..e85482a9a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/shapes/custom_shape.md @@ -0,0 +1,80 @@ +--- +sidebar_label: 사용자 지정 도형 +title: 사용자 지정 도형 +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 사용자 지정 도형에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# 사용자 지정 도형 + +기본 도형이 요구 사항에 맞지 않는 경우 사용자 지정 도형을 만들 수 있습니다. + +이미지, 텍스트, IP 주소를 표시하는 새로운 `networkCard` 도형을 만들고 싶다고 가정해 보겠습니다. + + + +이를 위해서는 다음 단계를 수행해야 합니다: + +1\. [`addShape()`](api/diagram/addshape_method.md) 메서드를 적용하여 도형에 대한 고유한 이름(이 예제에서는 *"networkCard"*)을 추가하고 템플릿을 제공합니다: + +~~~jsx +diagram.addShape("networkCard", { + template: ({ img, text, ip }) => (` +
+ :::tip + `padding` 속성은 `groupBehavior`가 `"boundNoBorderExtension"`으로 설정된 경우에 사용할 수 있습니다 + ::: + +### 예제 {#example} + +~~~jsx +const data = [ + // swimlane 구성하기 + { + "id": "main", + "type": "$swimlane", + "height": 730, + "width": 1195, + "layout": [ + [1, 2, 3, 4] + ] + }, + // swimlane 셀 구성하기 + { + "id": 1, + "type": "$sgroup", + "groupChildren": ["s1"], + "style": { + "fill": "#D4DAE4" + }, + "x": 0, + "y": 80 + }, + // 셀에 넣을 도형을 구성합니다 + { + "id": "s1", "type": "end", "text": "Step 1", "x": 20, "y": 110 + } +]; +~~~ + +**관련 문서**: [Swimlane 구성하기](/swimlanes/) + +**관련 예제**: + +- [Diagram. 기본 모드. 게임 레벨과 위치](https://snippet.dhtmlx.com/1h4j9gb3?tag=diagram&mode=wide) +- [Diagram. 기본 모드. Swimlane 템플릿](https://snippet.dhtmlx.com/z6x5m3gb?tag=diagram&mode=wide) +- [Diagram. 기본 모드. Waterfall 다이어그램 템플릿](https://snippet.dhtmlx.com/k5vlvj8i?tag=diagram&mode=wide) +- [Diagram. 기본 모드. 아이젠하워 매트릭스 예제](https://snippet.dhtmlx.com/yfvccvc4?mode=wide)
[DHTMLX로 JavaScript 아이젠하워 매트릭스를 만드는 방법](https://dhtmlx.com/blog/build-javascript-eisenhower-matrix-dhtmlx/) 문서에서 자세한 내용을 확인하십시오 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/swimlanes/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/swimlanes/index.md new file mode 100644 index 000000000..eb98f84a3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/swimlanes/index.md @@ -0,0 +1,232 @@ +--- +sidebar_label: Swimlanes +title: Swimlanes +description: DHTMLX JavaScript Diagram 라이브러리 문서에서 Swimlane에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드해 보십시오. +--- + +# Swimlanes {#swimlanes} + +## Swimlane 개요 {#swimlane-overview} + +Swimlane은 세로 또는 가로로 배열된 셀(또는 레인)로 구성된 Diagram의 직사각형 요소를 나타냅니다. 각 셀(*type: "$sgroup"*)에는 도형이나 group과 같은 하위 항목이 포함될 수 있습니다. + +:::note +Swimlane은 Diagram/Diagram Editor의 기본 모드(type: `"default"`)에서만 사용할 수 있습니다. +::: + + + + + +Swimlane은 모든 프로세스(비즈니스, 제조, 서비스 등 어떤 프로세스든)나 그 개별 부분을 처음부터 끝까지 시각화하는 데 도움이 됩니다. + +## Swimlane 생성하기 {#creating-swimlanes} + +swimlane을 생성하려면, 다이어그램에 로드할 데이터 세트를 준비하는 동안 swimlane 객체 안에서 `type: "$swimlane"`을 지정하고 swimlane 레이아웃의 구조를 정의해야 합니다: + +~~~jsx +const data = [ + // swimlane 구성하기 + { + type: "$swimlane", + height: 500, + width: 850, + // swimlane의 레이아웃에는 최소 하나의 셀이 포함되어야 합니다 + layout: [ + [1] // id가 "1"이고 type이 "$sgroup"인 셀 + ] + } +]; + +// Diagram 초기화 +const diagram = new dhx.Diagram("diagram_container"); +diagram.data.parse(data); +~~~ + +위의 코드 예제는 기본 설정을 사용하는 가장 단순한 swimlane 구성(즉, 헤더와 서브헤더가 없는 구성)을 보여줍니다. + +### Swimlane 구조 {#swimlane-structure} + +swimlane의 구조는 상당히 다양할 수 있습니다. 이 구조는 swimlane 객체의 [layout](swimlanes/configuration_properties.md) 구성 속성을 통해 정의됩니다. 이 속성을 사용하면 swimlane의 셀을 행과 열로 배열할 수 있습니다. + +이 속성의 값으로 행렬을 나타내는 배열을 지정하기만 하면 됩니다. 행렬은 다음과 같이 하나의 배열이거나: + +~~~jsx +// 열이 3개인 swimlane +layout: [ + [1, 2, 3] +] +~~~ + +또는 쉼표로 구분된 여러 배열의 집합일 수도 있습니다: + +~~~jsx +// 행이 2개, 열이 3개인 swimlane +layout: [ + [1, 2, 3], + [4, 5, 6] +] +~~~ + +여기서: + +- 레이아웃의 각 셀은 고유한 번호를 가집니다; +- 배열의 개수는 행의 개수를 정의합니다(배열이 여러 개인 경우, 모든 배열의 셀 개수가 동일해야 합니다); +- 배열 내 셀의 개수는 열의 개수를 정의합니다. + +### Swimlane 객체의 속성 {#properties-of-a-swimlane-object} + +필요에 따라 다양한 설정으로 다양한 swimlane을 생성할 수 있도록 [swimlane 객체의 전체 구성 속성 목록](swimlanes/configuration_properties.md)을 확인하십시오. + +## Swimlane 셀 구성하기 {#configuring-a-swimlane-cell} + +페이지에서 swimlane을 초기화하면 swimlane 셀의 id와 그 구성이 자동으로 생성됩니다. 셀의 기본 구성을 변경하려면 `type: "$sgroup"` 및 `id` 속성을 반드시 포함하는 셀 객체를 생성하고, 그 안에 필요한 구성 설정을 지정하십시오: + +~~~jsx +const data = [ + // swimlane 구성하기 + { + type: "$swimlane", + id: "main", + height: 500, + width: 850, + layout: [ + [1, 2, 3] + ] + }, + // swimlane 셀 구성하기 + { + type: "$sgroup", + id: 3, + style: { + fill: "#D4DAE4" + } + } +]; +~~~ + +### 셀 객체의 속성 {#properties-of-a-cell-object} + +[swimlane 셀의 전체 구성 속성 목록](swimlanes/configuration_properties.md#properties-of-a-swimlane-cell)을 확인하십시오. + +## 셀 그룹화하기 {#grouping-cells} + +각 셀에 고유한 번호를 지정하면, 모든 셀이 테두리와 함께 렌더링됩니다: + +~~~jsx +layout: [ + [1, 2, 3], + [4, 5, 6] +] +~~~ + + + +필요한 경우, 셀의 범위를 그룹화하고 그 사이의 테두리를 제거할 수 있습니다. 이를 위해 범위에서 임의의 셀을 선택하고, 범위에 속한 셀(들)의 고유 번호를 이 셀의 번호로 바꾸십시오.
+다음은 첫 번째 행에 배치된 처음 두 셀을 그룹화하는 예입니다: + +~~~jsx +layout: [ + [1, 1, 3], + [4, 5, 6] +] +~~~ + +결과는 다음과 같이 표시됩니다: + + + +다음은 두 번째 열에 배치된 셀을 그룹화하는 예입니다: + +~~~jsx +layout: [ + [1, 2, 3], + [4, 2, 6] +] +~~~ + +결과: + + + +**관련 샘플**: [Diagram 에디터. 기본 모드. Swimlane에서 열과 행 구성하기](https://snippet.dhtmlx.com/uzx5ulal) + +## Swimlane과 셀의 크기 {#sizes-of-a-swimlane-and-its-cells} + +swimlane의 크기는 swimlane의 `width` 및 `height` 구성 속성에 의해 정의됩니다. + +~~~jsx +const data = [ + // swimlane 구성하기 + { + type: "$swimlane", + id: "main", + height: 500, + width: 850, + layout: [ + [1, 2, 3] + ] + } +]; +~~~ + +### 셀 너비 {#cell-width} + +셀의 너비는 swimlane의 너비, 열의 개수, 왼쪽/오른쪽 swimlane 헤더와 서브헤더의 높이에 따라 달라집니다. 예를 들면: + +~~~jsx +const data = [ + { + type: "$swimlane", + id: "main", + height: 500, + width: 830, + layout: [ + // 열 3개 + [1, 2, 3] + ], + header: { + position: "left", + height: 40 + }, + subHeaderRows: { + enable: true, + position: "left", + height: 40 + } + } +]; +~~~ + +각 셀의 너비는 *(830-40-40)/3 = 250*으로 계산할 수 있습니다. + +### 셀 높이 {#cell-height} + +셀의 높이는 swimlane의 높이, 행의 개수, 위쪽/아래쪽 swimlane 헤더와 서브헤더의 높이에 따라 달라집니다. 예를 들면: + +~~~jsx +const data = [ + { + type: "$swimlane", + id: "main", + height: 500, + width: 830, + layout: [ + // 행 2개 + [1, 2, 3], + [4, 5, 6] + ], + header: { + position: "top", + height: 40 + }, + subHeaderCols: { + enable: true, + position: "top", + height: 40 + } + } +]; +~~~ + +각 셀의 높이는 *(500-40-40)/2 = 210*으로 계산할 수 있습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/whats_new.md b/i18n/ko/docusaurus-plugin-content-docs/current/whats_new.md new file mode 100644 index 000000000..d82f687f8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/whats_new.md @@ -0,0 +1,695 @@ +--- +sidebar_label: 새로운 기능 +title: 새로운 기능 +description: DHTMLX JavaScript Diagram 라이브러리에 대한 새로운 정보를 확인할 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Diagram의 무료 30일 평가판을 다운로드하세요. +--- + +# 새로운 기능 {#whats-new} + +Diagram을 이전 버전에서 업데이트하는 경우, 자세한 내용은 [최신 버전으로 마이그레이션](migration.md) 문서를 확인하십시오. + +## 버전 6.1.6 {#version-6.1.6} + +2026년 7월 1일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram. `mindmap` 모드에서 `ShapeCollection`(`DataCollection`)을 통해 Diagram에 데이터를 로드할 때 발생하던 오류를 수정했습니다. + +## 버전 6.1.5 {#version-6.1.5} + +2026년 6월 17일에 출시되었습니다. + +### 업데이트 {#updates} + +- Diagram Editor. 새로운 키보드 단축키로 텍스트 편집 경험을 개선했습니다: 편집을 시작하려면 Ctrl+Enter, 줄바꿈에는 Shift+Enter, 확인에는 Enter, 변경 사항을 취소하려면 Escape를 사용합니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. swimlane 그룹을 통과하는 선을 선택할 수 없던 문제를 수정했습니다. +- Diagram Editor. 연결선을 현재 화면 밖의 도형으로 드래그할 때 자동 스크롤 기능을 추가했습니다. +- Diagram Editor. 텍스트 편집 중 도형이 삭제되던 버그를 수정했습니다. +- Diagram. `backArrow: "filled"` 속성을 사용하는 선이 Safari에서 올바르게 렌더링되지 않던 버그를 수정했습니다. + +## 버전 6.1.3 {#version-6.1.3} + +2026년 5월 21일에 출시되었습니다. + +### 업데이트 {#updates} + +- Diagram / Diagram Editor. 자동 배치 로직을 개선했습니다. [`autoPlace()`](api/diagram/autoplace_method.md) Diagram 메서드와 [`autoplacement`](api/diagram/autoplacement_property.md) 설정 객체에 새로운 `itemPadding` 및 `levelPadding` 속성을 추가하여 도형과 레벨 사이의 간격을 제어할 수 있도록 했습니다. + +### 수정 사항 {#fixes} + +- Diagram. 자동 배치를 적용할 때 도형 간 거리가 잘못 계산되던 문제를 수정했습니다. +- Diagram. [`autoPlace()`](api/diagram/autoplace_method.md) 호출 시 [`fromSide` 및 `toSide`](lines/configuration_properties.md) 선 값이 무시되던 문제를 수정하여 다이어그램 구조가 일관되게 유지되도록 했습니다. +- Diagram. `Radial` 자동 배치 알고리즘을 리팩터링하여 도형 간 거리가 지나치게 커지는 문제를 수정하고, 더 조밀한 레이아웃을 제공하도록 했습니다. + +## 버전 6.1.2 {#version-6.1.2} + +2026년 4월 2일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. 좌표가 음수인 도형에 대한 커넥터 생성 문제를 수정했습니다. +- Diagram Editor. 인라인 텍스트 편집 중 Backspace 키를 누르면 도형 또는 선 제목이 삭제되던 문제를 수정했습니다. +- Export. HTML 삽입을 통해 임의의 로컬 파일에 접근할 수 있었던 PDF/PNG 내보내기의 보안 취약점을, 정제 처리 개선과 환경 강화를 통해 수정했습니다. + +## 버전 6.1.1 {#version-6.1.1} + +2026년 2월 5일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. 항목을 아래쪽 및 오른쪽으로 이동할 때 캔버스가 자동으로 스크롤되지 않는 문제. + +## 버전 6.1 {#version-6.1} + +2025년 11월 25일에 출시되었습니다. + +### 새로운 기능 {#new-functionality} + +- Gantt 데이터 세트로부터 Diagram PERT 차트를 생성하는 기능: + - [새로운 `"pert"` 타입](api/diagram/type_property.md)을 통해 설정하는 [새로운 PERT 모드](/#diagram-in-the-pert-mode) + - [새로운 도형 타입: `"task"` 및 `"milestone"`](shapes/default_shapes.md#shapes-in-the-pert-mode) + - [새로운 그룹 타입: `"project"`](/groups/#grouping-shapes-in-the-pert-mode) (작업과 마일스톤을 그룹화하기 위한) +- Diagram Editor. 편집기 내에서 키보드 단축키(hotkey)를 관리하는 기능: + - 새로운 [`hotkeys`](api/diagram_editor/editor/config/hotkeys_property.md) 설정 속성을 통해 기존 단축키를 수정하거나 끄고, 새로운 단축키를 추가할 수 있습니다. +- Diagram Editor. 새로운 이벤트 세트를 통해 도형의 크기 조정 및 회전을 관리하는 기능: +[`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md), +[`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md), +[`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md), +[`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md), +[`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md), +[`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md) + +### 업데이트 {#updates} + +- DataCollection API. PERT 모드 관련 업데이트: + - [`parse()`](api/data_collection/parse_method.md) 메서드는 첫 번째 매개변수로 `data` 및 `links` 배열을 포함하는 객체를 받을 수 있습니다. + - [`serialize()`](api/data_collection/serialize_method.md) 메서드는 `data` 및 `links` 배열을 포함하는 객체를 반환할 수 있습니다. +- Diagram API. PERT 모드의 작업(task) 도형에서 날짜 렌더링 형식을 설정하는 기능: + - [`typeConfig`](api/diagram/typeconfig_property.md) 설정 속성에 새로운 `dateFormat` 매개변수가 추가되었습니다. +- Diagram/Diagram Editor API. 선의 연결 타입을 정의하는 기능: + - Diagram의 [`lineConfig`](api/diagram/lineconfig_property.md) 설정 속성에 새로운 `connectType` 매개변수가 추가되었습니다. + - Diagram Editor의 [`lineConfig`](api/diagram_editor/editor/config/lineconfig_property.md) 설정 속성에 새로운 `connectType` 매개변수가 추가되었습니다. +- Export API. [`pdf()`](api/export/pdf_method.md) 및 [`png()`](api/export/png_method.md) 내보내기 함수가 데이터 내보내기의 프로미스(promise)를 반환합니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. Safari 브라우저에서 도형에 마우스를 올렸을 때 발생하던 스크립트 오류. +- Diagram Editor. 항목 제거 후 발생하던 콘솔 경고. + +### [AI 통합](guides/ai-integrations/ai-demo.md)에 관한 새로운 데모 {#new-demo-on-ai-integration} + +- [DHTMLX Diagram Org Chart AI Builder](https://dhtmlx.com/docs/demo/ai-org-chart-builder/) + + +### 새로운 샘플 {#new-samples} + +- [Diagram. PERT 차트. 초기화](https://snippet.dhtmlx.com/4h5fi7xd) +- [Diagram 및 Gantt. PERT 차트. 초기화](https://snippet.dhtmlx.com/409jj9uh) +- [Diagram 및 Gantt. PERT 차트. 전체 통합](https://snippet.dhtmlx.com/gcnx4a9h) +- [Diagram 및 Gantt. PERT 차트. 팝업 창](https://snippet.dhtmlx.com/fvfysbdb) +- [Diagram 및 Gantt. PERT 차트. 사용자 지정 도형과 스타일링(사용자 지정 CSS)](https://snippet.dhtmlx.com/mtk92awx) +- [Diagram. PERT 차트. 다양한 데이터 세트](https://snippet.dhtmlx.com/2j2y8vy6) +- [Diagram. PERT 차트. 작업 필터링/검색](https://snippet.dhtmlx.com/1b2bmmxk) +- [Diagram. PERT 차트. 작업 정보를 위한 사용자 지정 사이드바](https://snippet.dhtmlx.com/712lsox0) +- [Diagram. PERT 차트. 테마](https://snippet.dhtmlx.com/2e5y5u6m) +- [Diagram. Export. 왼쪽 하단 워터마크](https://snippet.dhtmlx.com/d56spdsc) +- [Diagram. Export. 반복되는 워터마크](https://snippet.dhtmlx.com/emkea55j) +- [Diagram. 인터랙티브 전기 회로도](https://snippet.dhtmlx.com/cisyixkq) +- [Diagram Editor. 이벤트를 통한 도형의 이동, 회전, 크기 조정 관리](https://snippet.dhtmlx.com/qldjbbm7) +- [Diagram Editor. API를 통한 단축키 추가, 수정, 비활성화 관리](https://snippet.dhtmlx.com/8ads5dq8) +- [Diagram Editor. 피시본 다이어그램. 원인과 해결책](https://snippet.dhtmlx.com/7vhwtiba) +- [Diagram Editor. 피시본 다이어그램. 다중 원인](https://snippet.dhtmlx.com/0dgjwt6u) + + +## 버전 6.0.11 {#version-6.0.11} + +2025년 6월 18일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. 확대/축소 시 도형이 잘못 이동하는 문제. + +## 버전 6.0.10 {#version-6.0.10} + +2025년 3월 10일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram. 선 너비를 편집하는 동안 선 도형의 화살표 크기가 조정되던 문제. + +## 버전 6.0.9 {#version-6.0.9} + +2025년 2월 4일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. 항목이 있는 그룹을 이동하거나 항목을 그룹으로/그룹에서 이동하는 문제. +- Diagram. 선택된 도형에 대해 `itemMouseOver` 및 `itemMouseOut` 이벤트가 발생하지 않는 문제. + +## 버전 6.0.8 {#version-6.0.8} + +2024년 12월 5일에 출시되었습니다. + +- 프레임워크로 가져오기(import) 시 로컬 평가판 패키지와 관련된 문제. + +## 버전 6.0.7 {#version-6.0.7} + +2024년 11월 27일에 출시되었습니다. + +- Diagram Editor. Editbar를 사용한 도형 편집 중 발생하던 오류. +- Diagram Editor. 인라인 편집 탐색 중 도형 이동과 관련된 문제. + +## 버전 6.0.4 {#version-6.0.4} + +2024년 10월 1일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. `destructor()` 메서드를 호출하면 오류가 발생하는 문제. + +## 버전 6.0.3 {#version-6.0.3} + +2024년 8월 28일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. Editbar의 `calendar`, `combobox`, `colorpicker`, `form`, `timepicker`에 서로 다른 로케일을 적용하는 문제. +- Diagram Editor. Layout 셀에 Diagram Editor를 추가하는 문제. +- Diagram Editor. `default` 모드에서 `shapeToolbar` 속성이 선택 사항이 아닌 문제. +- Diagram Editor. 사용자 지정 도형에 미리 보기 이미지가 있을 때 호버 동작이 올바르지 않은 문제. + + +## 버전 6.0.2 {#version-6.0.2} + +2024년 7월 16일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram. 자동 배치. 도형이 다른 도형 아래에 가려지는 문제. + +## 버전 6.0.1 {#version-6.0.1} + +2024년 6월 24일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. 메모리 누수. +- Diagram Editor. Toolbar에서 수직 및 수평 분산 배치를 클릭할 때 발생하는 스크립트 오류. +- Diagram. [`getSubHeaderCellId()`](api/cell_manager/getsubheadercellid_method.md) 메서드 호출 시 발생하는 타입 문제. + +## 버전 6.0 {#version-6.0} + +2024년 5월 16일에 출시되었습니다. + +### 주요 변경 사항 {#breaking-changes} + +이번 업데이트는 Diagram과 Diagram Editor의 구조와 기능에 중요한 변경 사항을 도입합니다. 최신 버전에 맞춰 대응하려면 [마이그레이션 문서](migration.md#50---60)를 확인하십시오. + +### 새로운 기능 {#new-functionality} + +- Diagram Editor 재구성: [`view`](api/diagram_editor/editor/config/view_property.md) 속성을 통해 각 부분과 상호작용하고 가시성을 관리할 수 있는 기능을 제공하며, 다음과 같은 설정을 포함합니다: + - [Toolbar](guides/diagram_editor/toolbar.md) - 사용자가 편집 과정을 제어할 수 있도록 돕는 Diagram Editor의 상단 부분입니다([API 개요](api/diagram_editor/toolbar/api_overview.md) 참조). + - [Shapebar](guides/diagram_editor/shapebar.md) - (이전 왼쪽 패널) Diagram 항목의 미리 보기를 렌더링하는 Diagram Editor의 부분입니다([API 개요](api/diagram_editor/shapebar/api_overview.md) 참조). + - [Editbar](guides/diagram_editor/editbar.md) - (이전 오른쪽 패널) 사용자가 Diagram 항목을 편집할 수 있도록 하는 Diagram Editor의 부분입니다([API 개요](api/diagram_editor/editbar/api_overview.md) 참조). 다음 작업을 수행할 수 있습니다: + - 미리 정의된 [기본 컨트롤](api/diagram_editor/editbar/basic_controls_overview.md) 및 [복합 컨트롤](api/diagram_editor/editbar/complex_controls_overview.md) 세트 + - 제공된 조건에 따른 [기본 컨트롤](api/diagram_editor/editbar/basic_controls_overview.md) 및 [복합 컨트롤](api/diagram_editor/editbar/complex_controls_overview.md)의 조정 가능한 설정 + - 제공된 조건에 따른 Editbar 패널의 동적 관리([예제](https://snippet.dhtmlx.com/ealq0m4l?mode=wide)) + - 사용자 지정 컨트롤 생성([예제](https://snippet.dhtmlx.com/1p0wemnn?mode=wide)) + - HTML 콘텐츠 생성([예제](https://snippet.dhtmlx.com/vcnt647v?mode=wide)) +- Diagram Editor. [Copy manager API](api/diagram_editor/copymanager/api_overview.md)가 추가되었습니다. +- Diagram Editor. [Shapebar](api/diagram_editor/shapebar/config/show_property.md), [Editbar](guides/diagram_editor/editbar.md), [Toolbar](guides/diagram_editor/toolbar.md)를 표시/숨김 처리하는 기능. +- Diagram Editor. [destructor()](api/diagram_editor/editor/methods/destructor_method.md) 메서드가 추가되었습니다. +- Diagram Editor. [연결 지점을 숨기는](api/diagram_editor/editor/config/connectionpoints_property.md) 기능. +- Diagram Editor. [크기 조정 지점을 숨기는](api/diagram_editor/editor/config/resizepoints_property.md) 기능. +- Diagram Editor. [그리드를 숨기는](api/diagram_editor/editor/config/grid_property.md) 기능. +- 다중 선택 기능이 추가된 [Selection API](/api/selection/)의 업그레이드. +- 선의 제목은 자체 [설정 속성](line_titles/configuration_properties.md)을 가진 별도의 객체인 [`lineTitles`](/line_titles/)로 선언됩니다. +- [새로운 테마 지원](../category/themes/): Dark, Light High Contrast, Dark High Contrast([예제](https://snippet.dhtmlx.com/9twmlfus)) +- Diagram Editor. CSS 변수를 재정의하고 사용자 지정 변수를 사용하여 [Shapebar 항목의 색상 구성표](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar)를 사용자 지정하는 기능. + +### 업데이트 {#updates} + +- Diagram Editor. [로케일](guides/localization.md)이 업데이트되었습니다. +- Diagram Editor. [단축키](guides/diagram_editor/hot_keys.md) 목록이 확장되었습니다. +- Diagram Editor. Shapebar 항목을 그리드로 끌어다 놓을 때의 동작과 모양이 개선되었습니다. +- Diagram Editor. [`zoomIn`](api/diagram_editor/editor/events/zoomin_event.md) / [`zoomOut`](api/diagram_editor/editor/events/zoomout_event.md) 이벤트의 콜백 함수가 `step` 매개변수와 함께 호출됩니다. +- Diagram Editor. [`magnetic`](api/diagram_editor/editor/config/magnetic_property.md) 설정 옵션의 기능이 확장되었습니다. +- Diagram Editor. Editor 객체의 이동 [이벤트](api/diagram_editor/editor/events/overview.md)가 업데이트되었습니다: +[`afterGroupMove`](api/diagram_editor/editor/events/aftergroupmove_event.md), +[`afterItemCatch`](api/diagram_editor/editor/events/afteritemcatch_event.md), +[`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md), +[`afterLineTitleMove`](api/diagram_editor/editor/events/afterlinetitlemove_event.md), +[`afterShapeMove`](api/diagram_editor/editor/events/aftershapemove_event.md), +[`beforeGroupMove`](api/diagram_editor/editor/events/beforegroupmove_event.md), +[`beforeItemCatch`](api/diagram_editor/editor/events/beforeitemcatch_event.md), +[`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md), +[`beforeLineTitleMove`](api/diagram_editor/editor/events/beforelinetitlemove_event.md), +[`beforeShapeMove`](api/diagram_editor/editor/events/beforeshapemove_event.md), +[`groupMoveEnd`](api/diagram_editor/editor/events/groupmoveend_event.md), +[`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md), +[`itemTarget`](api/diagram_editor/editor/events/itemtarget_event.md), +[`lineTitleMoveEnd`](api/diagram_editor/editor/events/linetitlemoveend_event.md), +[`shapeMoveEnd`](api/diagram_editor/editor/events/shapemoveend_event.md) +- [DataCollection API를 통해 선 제목을 다루는](/line_titles/#working-with-line-titles) 기능. + +### 지원 중단된 API {#deprecated-api} + +- #### 속성 + + - Diagram Editor의 `controls` 속성은 지원 중단되었으며 더 이상 지원되지 않습니다. + - Diagram Editor의 `editMode` 속성은 지원 중단되었으며 더 이상 지원되지 않습니다. + - Diagram Editor의 `gapPreview` 속성은 지원 중단되었으며 더 이상 지원되지 않습니다. + - Diagram Editor의 `reservedWidth` 속성은 지원 중단되었으며 더 이상 지원되지 않습니다. + - Diagram Editor의 `scalePreview` 속성은 지원 중단되었으며 더 이상 지원되지 않습니다. + - Diagram Editor의 `shapeBarWidth` 속성은 지원 중단되었으며 더 이상 지원되지 않습니다. + - Diagram Editor의 `shapeSections` 속성은 지원 중단되었으며 더 이상 지원되지 않습니다. + - [Line](lines/configuration_properties.md) 데이터의 `title` 속성은 지원 중단되었으며 더 이상 지원되지 않습니다. + +- #### 메서드 + + - Diagram의 Selection 객체의 `getId()` 메서드는 지원 중단되었으며 더 이상 지원되지 않습니다. + - Diagram의 Selection 객체의 `getSubId()` 메서드는 지원 중단되었으며 더 이상 지원되지 않습니다. + - Diagram Editor의 `setViewMode()` 메서드는 지원 중단되었으며 더 이상 지원되지 않습니다. + +- #### 이벤트 + + - Toolbar에 해당 버튼이 없으므로 Diagram Editor의 다음 이벤트는 지원 중단되었으며 더 이상 지원되지 않습니다: `resetButton`, `applyButton`, `visibility`, `exportData`, `importData`, `autoLayout` + - Diagram Editor의 `changeGridStep` 이벤트는 지원 중단되었으며 더 이상 지원되지 않습니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. 데이터 가져오기 후 파일을 선택하지 않고 "Import data" 버튼을 두 번째로 클릭할 때 발생하는 콘솔 오류를 수정했습니다. +- Diagram Editor. 새 도형 추가가 차단되는 문제를 수정했습니다. +- Diagram Editor. 요소를 수동으로 선택하는 동안 선을 복사하는 문제를 수정했습니다. +- Diagram Editor. `mindmap`/`org` 모드에서 루트 도형이 하위 도형에 가까울 때 드래그가 되지 않는 문제를 수정했습니다. +- Diagram Editor. Shift 키로 도형을 선택할 때 추가 클릭이 필요했던 잘못된 선택 동작을 수정했습니다. +- Diagram Editor. 그룹과 swimlane을 함께 이동하는 문제를 수정했습니다. +- Diagram Editor. 사용하지 않는 선/커넥터 제거 문제를 수정했습니다. +- Diagram Editor. 서로 다른 부모의 항목을 대상 항목으로 이동하는 기능을 수정했습니다(`org`/`mindmap` 모드용). +- Diagram Editor. Shapebar 요소의 기본값을 설정하는 기능을 수정했습니다. +- Diagram Editor. 이동한 항목을 도형 위로 호버할 때 커넥터가 나타나는 문제를 수정했습니다. +- Diagram Editor. `mindmap`/`org` 모드에서 메뉴를 통해 선택된 항목을 제거할 수 없는 문제를 수정했습니다. +- Diagram Editor. 데이터 가져오기가 한 번만 작동하는 문제를 수정했습니다. +- Diagram Editor. 커넥터 이동 중 성능을 개선했습니다. +- Diagram Editor. `historyManager`에서 커넥터 이동 중 작업 기록 저장을 제한했습니다. +- Diagram Editor. 가장 가까운 커넥터를 검색하는 로직을 최적화했습니다. +- 복잡한 위젯에서의 로컬라이제이션을 수정했습니다. + +## 버전 5.0.3 {#version-5.0.3} + +2023년 7월 12일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- 데이터 파싱 후 [autoPlace()](api/diagram/autoplace_method.md) 메서드를 호출할 때 오류가 발생하던 문제를 수정했습니다. + +## 버전 5.0.2 {#version-5.0.2} + +2023년 5월 30일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. 다중 선택 이동 중 사용자 지정 지점이 이동하지 않는 문제를 수정했습니다. +- Diagram Editor. 도형을 자기 자신에게 연결할 수 없는 문제를 수정했습니다. +- [exportStyles](api/diagram/exportstyles_property.md) 없이 기본 다이어그램을 내보낼 때 발생하는 문제를 수정했습니다. +- 소스를 가져오는 동안 `setImmediate()` 메서드 정의와 관련하여 promiz.js 라이브러리에서 오류가 발생하던 문제를 수정했습니다. +- Export 객체의 URL 경로 형성 문제를 수정했습니다. +- Export를 위한 타입이 추가되었습니다. + +## 버전 5.0.1 {#version-5.0.1} + +2023년 1월 19일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. 데이터를 내보낸 후 다시 불러올 때 선이 항상 제자리에 그려지지 않던 문제를 수정했습니다. + - 이제 default 모드에서 선의 좌표를 정의할 수 있습니다(선 객체의 새로운 [`points`](lines/configuration_properties.md#properties-specific-for-the-default-mode) 속성). +- Diagram Editor. 확대/축소 레벨을 변경한 후 그리드에서 도형을 드래그하는 문제를 수정했습니다. +- 도형이 없는 상태에서 "Auto layout" 버튼을 클릭한 후 발생하는 오류를 수정했습니다. +- 편집기를 통해 선을 생성한 후 [기본 설정](api/diagram/defaults_property.md) 표시 문제를 수정했습니다. +- `"radial"` 모드에서 도형을 자동 배치할 때 나타나던 Diagram/Diagram Editor의 스케일 문제를 수정했습니다. + +## 버전 5.0 {#version-5.0} + +2022년 9월 7일에 출시되었습니다. + +블로그에서 릴리스 리뷰 보기 + +### 주요 변경 사항 {#breaking-changes} + +새 릴리스는 `lineGap` 속성에 일부 변경 사항을 도입합니다. 최신 버전에 맞춰 대응하려면 [마이그레이션 문서](migration.md#42---50)를 확인하십시오. + +### 새로운 기능 {#new-functionality} + +#### Diagram {#diagram} + +- [도형 자동 배치](guides/diagram/configuration.md#configuring-autoplacement-for-shapes)의 Radial 알고리즘: + - [`autoplacement`](api/diagram/autoplacement_property.md) 속성에 `placemode` 매개변수가 추가되었습니다. + - [`autoPlace()`](api/diagram/autoplace_method.md) 메서드에 `placemode` 매개변수가 추가되었습니다. +- 툴바 아이콘에 대한 툴팁을 설정하는 기능: + - [`toolbar`](api/diagram/toolbar_property.md) 속성에 아이콘 객체의 `tooltip` 매개변수가 추가되었습니다. + +#### Diagram Editor {#diagram-editor} + +- 도형 자동 배치의 Radial 알고리즘: + - [`autoplacement`](api/diagram_editor/editor/config/autoplacement_property.md) 속성에 `placemode` 매개변수가 추가되었습니다. + - [Toolbar](guides/diagram_editor/toolbar.md)의 **Auto Layout** 버튼은 이제 도형 자동 배치를 위한 *Orthogonal*과 *Radial* 두 가지 옵션을 제공합니다. +- 그리드 영역에서 도형을 더 정밀하게 배치하기 위한 [스냅 라인](guides/diagram_editor/grid_area.md#enablingdisabling-snap-lines). +- 새로운 [`magnetic`](api/diagram_editor/editor/config/magnetic_property.md) 속성을 통해 스냅 라인을 설정하는 기능. +- Alt (Option) + Ctrl (Cmd) + С => Alt (Option) + Ctrl (Cmd) + V를 통해 항목의 스타일을 복사하고 붙여넣는 기능(**[예제](https://snippet.dhtmlx.com/klgvu3jq)** 참조). +- 그리드 영역에서 [여러 항목을 정렬하고 분산 배치하는](guides/diagram_editor/grid_area.md#aligning-multiple-items) 기능. +- 이제 항목의 개인 툴바에서 컨트롤 위에 마우스를 올리면 툴팁이 나타납니다. +- 항목별 툴바에서 툴팁을 로컬라이제이션하기 위한 [로케일 옵션](guides/localization.md) 목록이 확장되었습니다. +- [사용자 지정 툴바 아이콘](guides/diagram_editor/grid_area.md#configuring-the-toolbar-of-an-item)에 대한 툴팁을 설정하는 기능: + - [`shapeToolbar`](api/diagram_editor/editor/config/shapetoolbar_property.md) 속성에 아이콘 객체의 `tooltip` 매개변수가 추가되었습니다. +- [그리드 영역](guides/diagram_editor/grid_area.md)의 디자인이 개선되었습니다. 이제 그리드 영역의 점 사이 간격이 그리드 간격 값에 따라 달라집니다. + +### 수정 사항 {#fixes} + +- 파일을 로드한 후 Editor의 오른쪽 패널에서 로딩 아이콘이 사라지지 않던 문제를 수정했습니다. + +## 버전 4.2 {#version-4.2} + +2022년 3월 3일에 출시되었습니다. + +블로그에서 릴리스 리뷰 보기 + +### 새로운 기능 {#new-functionality} + +- [터치 지원](guides/touch_support.md) +- Diagram의 [`lineConfig`](api/diagram/lineconfig_property.md) 속성을 통해 선의 기본 설정을 지정하는 기능 +- Diagram Editor의 [`lineConfig`](api/diagram_editor/editor/config/lineconfig_property.md) 속성을 통해 편집기에서 생성된 새 선의 기본 설정을 지정하는 기능 +- [편집기 왼쪽 패널의 섹션을 설정할 때](guides/diagram_editor/shapebar.md#custom-sections) 필요한 순서로 org 도형, 그룹, swimlane의 기본 세트를 추가하는 기능 + +### 업데이트 {#updates} + +- Diagram의 `defaultLinkType` 속성은 지원 중단되었습니다. [마이그레이션](migration.md#41---42) 문서를 확인하십시오. +- Diagram Editor의 `shapeSections` 속성이 업데이트되었습니다. [마이그레이션](migration.md#41---42) 문서를 확인하십시오. +- 이제 특정 타입의 도형뿐만 아니라 선에 대해서도 기본 설정을 정의할 수 있습니다: + - Diagram의 [`defaults`](api/diagram/defaults_property.md) 속성이 업데이트되었습니다. + - Diagram Editor의 [`defaults`](api/diagram_editor/editor/config/defaults_property.md) 속성이 업데이트되었습니다. +- [도형 연결 모드](api/diagram/autoplace_method.md#modes-of-connecting-shapes)에 대한 문서가 업데이트되었습니다. + +## 버전 4.1 {#version-4.1} + +2021년 12월 7일에 출시되었습니다. + +블로그에서 릴리스 리뷰 보기 + +### 새로운 기능 {#new-functionality} + +- org chart 모드에서 [파트너 도형](/#assistant-and-partner-shapes)을 추가하는 기능 +- org chart 모드에서 [어시스턴트 도형](/#assistant-and-partner-shapes)을 추가하는 기능 +- default 모드에서 [선에 제목을 추가하는](/#line-titles) 기능 +- org chart 및 mindmap 모드의 Editor에서 [도형을 드래그 앤 드롭하여](editor_overview.md#editor-in-the-org-chart-mode) 한 부모에서 다른 부모로 이동하는 기능. 도형은 하위 항목과 함께 드래그됩니다. +- org chart 및 mindmap 모드의 Editor에서 [대상 항목의 스타일을 지정하는](guides/customization.md#styling-target-shapes) 기능 + +### API {#api} + +- Diagram 객체의 새로운 이벤트: [`emptyAreaDblClick`](api/diagram/emptyareadblclick_event.md), [`emptyAreaMouseDown`](api/diagram/emptyareamousedown_event.md), [`lineTitleClick`](api/diagram/linetitleclick_event.md), [`lineTitleDblClick`](api/diagram/linetitledblclick_event.md), [`lineTitleMouseDown`](api/diagram/linetitlemousedown_event.md) +- org chart 모드에 특화된 새로운 [도형 속성](shapes/configuration_properties.md#properties-specific-for-the-org-chart-mode): `assistant`, `partner`, `catchItem`, `giveItem` +- mindmap 모드에 특화된 새로운 [도형 속성](shapes/configuration_properties.md#properties-specific-for-the-mindmap-mode): `catchItem`, `giveItem` +- default 모드에 특화된 새로운 [선 속성](lines/configuration_properties.md#properties-specific-for-the-default-mode): `title` +- Editor 객체의 새로운 메서드: `setViewMode()`, `zoomIn()`, `zoomOut()` +- Editor 객체의 새로운 이벤트: [`beforeLineTitleMove`](api/diagram_editor/editor/events/beforelinetitlemove_event.md), [`afterLineTitleMove`](api/diagram_editor/editor/events/afterlinetitlemove_event.md), [`lineTitleMoveEnd`](api/diagram_editor/editor/events/linetitlemoveend_event.md), [`itemTarget`](api/diagram_editor/editor/events/itemtarget_event.md), [`beforeItemCatch`](api/diagram_editor/editor/events/beforeitemcatch_event.md), [`afterItemCatch`](api/diagram_editor/editor/events/afteritemcatch_event.md) +- Editor 객체의 새로운 속성: [`itemsDraggable`](api/diagram_editor/editor/config/itemsdraggable_property.md) +- 새로운 HistoryManager 메서드: [`add()`](api/diagram_editor/historymanager/methods/add_method.md), [`disable()`](api/diagram_editor/historymanager/methods/disable_method.md), [`enable()`](api/diagram_editor/historymanager/methods/enable_method.md), [`isRedo()`](api/diagram_editor/historymanager/methods/isredo_method.md), [`redo()`](api/diagram_editor/historymanager/methods/redo_method.md), [`reset()`](api/diagram_editor/historymanager/methods/reset_method.md), [`undo()`](api/diagram_editor/historymanager/methods/undo_method.md) +- 새로운 HistoryManager 속성: `disabled`, [`saveDelay`](api/diagram_editor/historymanager/config/savedelay_property.md) +- 새로운 Selection 메서드: `getSubId()` + +### 업데이트 {#updates} + +- [InlineEditor](/api/inline_editor/)의 이벤트가 업데이트되었습니다: *subHeaderId* 매개변수가 *subId*로 변경되었습니다. +- [Selection API](/api/selection/#events)의 이벤트가 업데이트되었습니다: *subId* 매개변수가 추가되었습니다. +- default 모드의 도형 기본 타입이 [*"rectangle"*](shapes/configuration_properties.md#common-properties)로 변경되었습니다. + +### 수정 사항 {#fixes} + +- 모든 유형의 다이어그램에 대한 성능이 개선되었습니다. +- Editor의 Toolbar에서 *undo/redo* 버튼의 잘못된 동작을 수정했습니다. + +## 버전 4.0.1 {#version-4.0.1} + +2021년 9월 16일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- 도형을 회전할 때 커넥터 표시 문제를 수정했습니다. +- 다이어그램의 축소된(minified) 스타일을 수정했습니다. +- org chart/mindmap 모드에서 다이어그램 편집기에 새 항목을 추가할 때 알고리즘 동작 문제를 수정했습니다. +- 텍스트 스타일 작업 시 편집기 오른쪽 패널의 동작 문제를 수정했습니다. + +## 버전 4.0 {#version-4.0} + +2021년 9월 7일에 출시되었습니다. + +블로그에서 릴리스 리뷰 보기 + +### 새로운 기능 {#new-functionality} + +- 새로운 다이어그램 항목이 추가되었습니다: [그룹](/groups/), [Swimlanes](/swimlanes/) +- Diagram Editor 왼쪽 패널에 새로운 섹션이 추가되었습니다: [그룹, Swimlanes](guides/diagram_editor/shapebar.md#default-sections) +- [그룹, Swimlanes를 위해 편집기 오른쪽 패널에 새로운 사이드바 옵션이 추가되었습니다](guides/diagram_editor/editbar.md) +- UI를 통해 [그룹](guides/diagram_editor/grid_area.md#managing-groups) 및 [Swimlanes](guides/diagram_editor/grid_area.md#managing-swimlanes)를 편집하는 기능 +- [로케일 옵션](guides/localization.md) 목록이 확장되었습니다. +- [CellManager API](/api/cell_manager/)를 통해 swimlane의 셀을 조작하는 기능 +- 항목을 더블클릭하여 텍스트를 편집하는 기능 +- [Angular용 DHTMLX Diagram](guides/integrations/angular_integration.md) 데모가 추가되었습니다. +- [React용 DHTMLX Diagram](guides/integrations/react_integration.md) 데모가 추가되었습니다. +- [Vue.js용 DHTMLX Diagram](guides/integrations/vue_integration.md) 데모가 추가되었습니다. +- [스타일과 설정이 다른 동일한 항목을 편집기 왼쪽 패널에 추가하는](guides/diagram_editor/shapebar.md) 기능 + +### API {#api} + +- 새로운 [CellManager API](/api/cell_manager/) 메서드: [add()](api/cell_manager/add_method.md), [getCellId()](api/cell_manager/getcellid_method.md), [getCellIndex()](api/cell_manager/getcellindex_method.md), [getSubHeaderCellId()](api/cell_manager/getsubheadercellid_method.md), [getSubHeaderCellIndex()](api/cell_manager/getsubheadercellindex_method.md), [getSubHeaderType()](api/cell_manager/getsubheadertype_method.md), [move()](api/cell_manager/move_method.md), [remove()](api/cell_manager/remove_method.md), [resetSwimlane()](api/cell_manager/resetswimlane_method.md), [setSwimlane()](api/cell_manager/setswimlane_method.md), [validation()](api/cell_manager/validation_method.md) +- 새로운 [CellManager API](/api/cell_manager/) 이벤트: [afterCellsAdd](api/cell_manager/aftercellsadd_event.md), [afterCellsMove](api/cell_manager/aftercellsmove_event.md), [afterCellsRemove](api/cell_manager/aftercellsremove_event.md), [afterCellsValidation](api/cell_manager/aftercellsvalidation_event.md), [beforeCellsAdd](api/cell_manager/beforecellsadd_event.md), [beforeCellsMove](api/cell_manager/beforecellsmove_event.md), [beforeCellsRemove](api/cell_manager/beforecellsremove_event.md), [beforeCellsValidation](api/cell_manager/beforecellsvalidation_event.md) +- Diagram 객체의 새로운 이벤트: [afterSubmenuOpen](api/diagram/aftersubmenuopen_event.md), [beforeSubmenuOpen](api/diagram/beforesubmenuopen_event.md), [groupClick](api/diagram/groupclick_event.md), [groupDblClick](api/diagram/groupdblclick_event.md), [groupHeaderClick](api/diagram/groupheaderclick_event.md), [groupHeaderDblClick](api/diagram/groupheaderdblclick_event.md), [groupMouseDown](api/diagram/groupmousedown_event.md), [itemClick](api/diagram/itemclick_event.md), [itemDblClick](api/diagram/itemdblclick_event.md), [itemMouseDown](api/diagram/itemmousedown_event.md), [itemMouseOut](api/diagram/itemmouseout_event.md), [itemMouseOver](api/diagram/itemmouseover_event.md), [lineDblClick](api/diagram/linedblclick_event.md), [lineMouseDown](api/diagram/linemousedown_event.md) +- Editor 객체의 새로운 이벤트: [shapeMoveEnd](api/diagram_editor/editor/events/shapemoveend_event.md), [beforeItemMove](api/diagram_editor/editor/events/beforeitemmove_event.md), [afterItemMove](api/diagram_editor/editor/events/afteritemmove_event.md), [itemMoveEnd](api/diagram_editor/editor/events/itemmoveend_event.md), [beforeGroupMove](api/diagram_editor/editor/events/beforegroupmove_event.md), [afterGroupMove](api/diagram_editor/editor/events/aftergroupmove_event.md), [groupMoveEnd](api/diagram_editor/editor/events/groupmoveend_event.md) +- DataCollection의 새로운 메서드: [eachChild()](api/data_collection/eachchild_method.md), [eachParent()](api/data_collection/eachparent_method.md), [getRoot()](api/data_collection/getroot_method.md), [getRoots()](api/data_collection/getroots_method.md) +- InlineEditor의 새로운 이벤트: [afterEditorClose](api/inline_editor/aftereditorclose_event.md), [afterEditorEditing](api/inline_editor/aftereditorediting_event.md), [afterEditorOpen](api/inline_editor/aftereditoropen_event.md), [beforeEditorClose](api/inline_editor/beforeeditorclose_event.md), [beforeEditorEditing](api/inline_editor/beforeeditorediting_event.md), [beforeEditorOpen](api/inline_editor/beforeeditoropen_event.md) +- [도형 객체](shapes/configuration_properties.md)의 새로운 "editable" 및 "fixed" 설정 속성 + +### 업데이트 {#updates} + +- 키보드 탐색이 개선되었습니다. +- 도형 디자인이 재설계되었습니다. +- Editor 객체의 이벤트가 업데이트되었습니다: [beforeShapeMove](api/diagram_editor/editor/events/beforeshapemove_event.md) 및 [afterShapeMove](api/diagram_editor/editor/events/aftershapemove_event.md) +- Shape Collection API의 구조가 업그레이드되었습니다. + +### 수정 사항 {#fixes} + +- 편집기에서 TypeScript 타입 정의의 잘못된 동작을 수정했습니다. +- HTML 폼 내부에 배치된 편집기에서 툴바 버튼을 누르면 폼 전송이 트리거되던 문제를 수정했습니다. +- 이제 회전 각도가 0도 또는 360도인 경우에만 요소의 크기를 조정할 수 있습니다. +- Diagram 스타일의 성능을 대폭 최적화했습니다. + +## 버전 3.1 {#version-3.1} + +2021년 4월 15일에 출시되었습니다. + +### 새로운 기능 {#new-functionality} + +- [TypeScript 지원](guides/using_typescript.md) +- DHTMLX Diagram에 새로운 mindmap 모드([type:"mindmap"](api/diagram/type_property.md))가 추가되었습니다. +- diagram 객체의 [typeConfig](api/diagram/typeconfig_property.md) 설정 속성을 통해 [Diagram의 mindmap 모드에서 루트 도형에 대한 하위 도형의 방향을 설정하는](guides/diagram/configuration.md#arranging-shapes-in-the-mindmap-mode-of-diagram) 기능 +- [addShape()](api/diagram/addshape_method.md) 메서드의 "eventHandlers" 속성을 통해 [사용자 지정 도형에 대한 사용자 지정 이벤트 핸들러를 추가하는](shapes/custom_shape.md#event-handlers-for-custom-shapes) 기능 +- Editor 객체의 [shapeToolbar](api/diagram_editor/editor/config/shapetoolbar_property.md) 속성을 통해 [그리드 영역](guides/diagram_editor/grid_area.md)에서 항목 편집을 위한 개인 툴바를 사용자 지정하는 기능 +- Editor 객체의 새로운 이벤트: [BeforeShapeIconClick](api/diagram_editor/editor/events/beforeshapeiconclick_event.md) 및 [AfterShapeIconClick](api/diagram_editor/editor/events/aftershapeiconclick_event.md), [BeforeShapeMove](api/diagram_editor/editor/events/beforeshapemove_event.md) 및 [AfterShapeMove](api/diagram_editor/editor/events/aftershapeiconclick_event.md) +- diagram 객체의 [exportStyles](api/diagram/exportstyles_property.md) 설정 옵션을 통해 내보내기 서비스로 CSS 스타일을 전송하지 않도록 취소하는 기능 + +### 업데이트 {#updates} + +- diagram 객체의 [type](api/diagram/type_property.md) 설정 속성이 업데이트되었습니다: 새로운 "default" 및 "mindmap" 값이 추가되었습니다. +- [collapseItem()](api/diagram/collapseitem_method.md) 및 [expandItem()](api/diagram/expanditem_method.md) 메서드가 업데이트되었습니다: 두 번째 "dir" 매개변수가 추가되었습니다. +- [beforeCollapse](api/diagram/beforecollapse_event.md), [afterCollapse](api/diagram/aftercollapse_event.md), [beforeExpand](api/diagram/beforeexpand_event.md), [afterExpand](api/diagram/afterexpand_event.md) 이벤트가 업데이트되었습니다: 두 번째 "dir" 매개변수가 추가되었습니다. + +### 수정 사항 {#fixes} + +- 모든 유형의 DHTMLX Diagram에 대한 선택 모듈 문제를 수정했습니다. +- 확대된 다이어그램에 "showItem()" 메서드를 적용할 때, default 모드로 초기화된 다이어그램의 스크롤 문제를 수정했습니다. +- HTML 템플릿에 대한 DOM Parser의 잘못된 동작을 수정했습니다. +- 하위 도형을 축소한 후 루트 도형이 축소되던 문제를 수정했습니다. +- 도형 텍스트 서식 지정 문제를 수정했습니다. +- 편집기 오른쪽 패널의 텍스트 영역 필드에 긴 텍스트를 추가한 후 나타나던 문제를 수정했습니다. +- 사용자 지정 도형의 텍스트에 특수 문자를 추가하는 문제를 수정했습니다. +- 사용자 지정 도형에 대해 콘솔에 표시되는 경고 문제를 수정했습니다. +- 편집기에서 루트 도형을 삭제할 때 발생하는 스크립트 오류를 수정했습니다. +- 편집기가 설정되지 않은 상태에서 "Auto Layout" 버튼을 적용할 때 콘솔에 표시되는 오류 문제를 수정했습니다. +- default 모드로 초기화된 편집기에서 오른쪽 패널의 도형 매개변수 추적 문제를 수정했습니다. +- 편집기의 default 모드에서 도형의 포커스 제거 문제를 수정했습니다. +- 편집기가 default 모드로 초기화되었을 때 필요한 순서로 도형 사이에 커넥터를 설정하는 문제를 수정했습니다. +- 편집기의 org chart 모드에서 Ctrl+A 조합의 잘못된 동작을 수정했습니다. +- 연결된 도형을 복사할 때 도형이 커넥터 없이 붙여넣기되던 문제를 수정했습니다. +- 이제 편집기가 org chart 모드로 초기화되었을 때 키보드 탐색을 사용하여 편집기에서 루트 도형을 제거할 수 없습니다. + +## 버전 3.0.4 {#version-3.0.4} + +2021년 1월 27일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- 페이지의 입력 필드로 작업할 때, default 모드로 초기화된 Editor에서 선택된 도형의 잘못된 동작을 수정했습니다. +- 축소/확장된 항목이 부모 항목과 함께 작동하지 않던 문제를 수정했습니다. +- 하위 항목이 숨겨져 있을 때 [showItem()](api/diagram/showitem_method.md) 메서드의 잘못된 동작을 수정했습니다. + +## 버전 3.0.3 {#version-3.0.3} + +2020년 12월 23일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram 내보내기 서비스 관련 문제를 수정했습니다. + +## 버전 3.0.2 {#version-3.0.2} + +2020년 7월 14일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- org chart 모드로 초기화된 Editor로 JSON에서 데이터를 가져오는 문제를 수정했습니다. +- 편집기 오른쪽 패널을 설정하는 동안 [addShape()](api/diagram/addshape_method.md) 메서드의 잘못된 동작을 수정했습니다. +- Editor의 툴바에서 historyManager 컨트롤의 동작이 개선되었습니다. + +## 버전 3.0.1 {#version-3.0.1} + +2020년 5월 29일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- [autoPlace()](api/diagram/autoplace_method.md) 메서드 관련 문제를 수정했습니다. +- PNG/PDF 내보내기 모듈 관련 문제를 수정했습니다. + +## 버전 3.0 {#version-3.0} + +2020년 5월 12일에 출시되었습니다. + +### 주요 변경 사항 {#breaking-changes} + +새 업데이트는 몇 가지 변경 사항과 개선 사항을 도입합니다. 최신 버전에 맞춰 대응하려면 [마이그레이션](migration.md#22---30) 문서를 확인하십시오. + +### 새로운 기능 {#new-functionality} + +- 계층 구조에서 [연결된 도형을 자동으로 배치하기](guides/manipulating_items.md#arranging-shapes-automatically) 위한 새로운 [autoPlace()](api/diagram/autoplace_method.md) 메서드와 [autoplacement](api/diagram/autoplacement_property.md) 속성이 추가되었습니다. +- [Diagram](api/diagram/defaults_property.md) 또는 [Diagram Editor](api/diagram_editor/editor/config/defaults_property.md) 초기화 시 `defaults` 속성을 통해 [도형의 기본 설정을 지정하는](guides/diagram/configuration.md#setting-the-default-configuration-of-a-shape) 기능 +- Diagram과 Diagram Editor에서 [사용자 지정 도형을 생성하기](shapes/custom_shape.md) 위한 [addShape()](api/diagram/addshape_method.md) 메서드가 추가되었습니다. +- Editor 객체의 새로운 속성: `controls`, [defaults](api/diagram_editor/editor/config/defaults_property.md), `shapeSections`, `shapeBarWidth`, `scalePreview`, [scale](api/diagram_editor/editor/config/scale_property.md), `gapPreview` +- *Grid Step* 사이드바 옵션이 [편집기 오른쪽 패널](guides/diagram_editor/editbar.md)에 추가되었습니다. +- Editor 객체의 `controls` 속성을 통해 Editor의 툴바 버튼과 *Grid Step* 사이드바 옵션을 표시/숨김 처리하는 기능 +- [addShape()](api/diagram/addshape_method.md) 메서드의 `properties` 속성을 통해 [편집기 오른쪽 패널에서 사용자 지정 도형의 속성을 편집하기 위한 사이드바 옵션을 설정하는](guides/diagram_editor/editbar.md) 기능 +- [편집기 왼쪽 패널의 섹션을 사용자 지정하는](guides/diagram_editor/shapebar.md#custom-sections) 기능 +- 도형 객체의 [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) 속성을 통해 [편집기 왼쪽 패널에 렌더링되는 도형의 모양을 사용자 지정하는](guides/diagram_editor/shapebar.md) 기능 +- Editor에서 [여러 도형을 선택, 복사, 붙여넣기, 삭제, 이동하는](guides/diagram_editor/grid_area.md#manipulating-multiple-items) 기능 +- default 모드로 초기화된 편집기에서 [여러 커넥터 선을 선택하고 삭제하는](guides/diagram_editor/grid_area.md#manipulating-multiple-items) 기능 +- 툴바의 ["Import Data"](guides/diagram_editor/toolbar.md) 버튼을 통해 JSON 파일에서 Editor로 데이터를 가져오는 기능 +- [destructor()](api/diagram/destructor_method.md) 메서드가 추가되었습니다. + +### 업데이트 {#updates} + +- IE에서 사용자 지정 HTML 템플릿을 사용하는 기능 +- Diagram Editor UI가 업데이트되고 개선되었습니다. +- 중심에서 중심으로 도형을 연결하는 기능 +- Editor의 단축키 세트가 업데이트되었습니다. +- default 모드로 초기화된 편집기에서 *text* 도형에 커넥터 선을 설정하는 기능 +- *text* 도형의 콘텐츠 너비 자동 맞춤이 추가되었습니다. + +## 버전 2.2.1 {#version-2.2.1} + +2019년 12월 30일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram 편집기에서 이미지 로더에 대한 IE 지원 문제. + +## 버전 2.2 {#version-2.2} + +2019년 11월 27일에 출시되었습니다. + +### 새로운 기능 {#new-functionality} + +- SVG와 HTML 템플릿을 사용하여 사용자 지정 도형을 생성하는 기능 +- 다양한 유형의 도형으로 다이어그램을 구성하는 기능 +- [툴바](guides/diagram_editor/toolbar.md)의 Export data 버튼을 통해 Diagram Editor에서 JSON 형식으로 데이터를 내보내는 기능 +- [showExport](migration.md#toolbar-buttons-in-editor) 옵션과 `exportData` 이벤트가 Diagram Editor에 추가되었습니다. + +### 수정 사항 {#fixes} + +- 다이어그램을 PDF 및 PNG 형식으로 내보낼 때 발생하는 문제를 수정했습니다. +- 마우스 이벤트의 잘못된 동작을 수정했습니다. +- org chart 모드로 초기화된 다이어그램에서 하위 도형을 삭제하는 문제를 수정했습니다. +- Diagram Editor의 오른쪽 및 왼쪽 패널의 잘못된 동작을 수정했습니다. +- 도형과 커넥터의 고유 ID 자동 생성 문제를 수정했습니다. + +## 버전 2.1.1 {#version-2.1.1} + +2019년 10월 11일에 출시되었습니다. + +### 수정 사항 {#fixes} +- IE에서 img-card 관련 문제. + +## 버전 2.1 {#version-2.1} + +2017년 5월 22일에 출시되었습니다. + +### 새로운 기능 {#new-functionality} + +- 명확한 다이어그램을 구축하기 위한 편리한 [Diagram 편집기](guides/diagram_editor/initialization.md) +- [도형](shapes/configuration_properties.md) 및 [선](lines/configuration_properties.md)에 대한 풍부한 설정 옵션 세트 +- [Diagram](guides/customization.md)을 사용자 지정하는 더 다양한 가능성 + +### 업데이트 {#updates} + +- 편집기에서 Diagram을 편집하기 위한 [단축키](guides/diagram_editor/hot_keys.md)가 추가되었습니다. +- 새로운 이벤트 [emptyAreaClick](api/diagram/emptyareaclick_event.md)이 추가되었습니다. +- `lineGap` 설정 옵션이 추가되었습니다. + +## 버전 2.0 {#version-2.0} + +2017년 2월 15일에 출시되었습니다. + +### 주요 변경 사항 {#breaking-changes} + +API 구조가 작업을 단순화하기 위해 완전히 재구성되고 개선되었습니다. 모든 변경 사항을 확인하려면 [마이그레이션](migration.md#11---20) 문서를 따르십시오. + +### 새로운 기능 {#new-functionality} + +- 다양한 다이어그램을 생성하고 스타일을 지정하는 기능 +- 다양한 [도형](shapes/default_shapes.md) 및 [선](/lines/) +- [PDF 형식으로 내보내기](guides/data_export.md) +- [PNG 형식으로 내보내기](guides/data_export.md) + +### 업데이트 {#updates} + +- [필요한 도형을 찾는](guides/manipulating_items.md#finding-the-necessary-item) 기능 +- [지정된 조건으로 도형을 필터링하는](guides/manipulating_items.md#filtering-items) 기능 +- 도형과의 상호작용을 단순화하기 위해 [도형에 아이콘이 있는 툴바를 추가하는](guides/diagram/configuration.md#setting-toolbar-for-shapes) 기능 +- 향상된 성능 +- 모든 HTML 컨테이너에 맞추고 내장된 자동 크기 조정을 지원하는 기능 + +## 버전 1.1 {#version-1.1} + +2017년 12월 5일에 출시되었습니다. + +### 새로운 기능 {#new-functionality} + +- [org chart 모드에서 Editor 사용하기](api/diagram_editor/editor/config/type_property.md) +- [상태를 저장하고 복원하는](guides/loading_data.md#saving-and-restoring-state) 기능 +- 확장된 [사용자 지정 가능성](guides/customization.md) + +### 업데이트 {#updates} + +- [확장된 API](api/diagram/api_overview.md): 새로운 메서드, 속성, 이벤트 + +## 버전 1.0 {#version-1.0} + +2017년 9월 29일에 출시되었습니다. + +### 초기 기능 {#initial-functionality} + +- Organogram 모드 +- 수직 및 수평 자동 배치 전략 +- JSON에서 데이터 로드 +- 데이터 및 분기 상태를 관리하는 API diff --git a/i18n/ko/docusaurus-theme-classic/footer.json b/i18n/ko/docusaurus-theme-classic/footer.json new file mode 100644 index 000000000..93e4ff60c --- /dev/null +++ b/i18n/ko/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Development center", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "Community", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "Company", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download Diagram": { + "message": "Download Diagram", + "description": "The label of footer link with label=Download Diagram linking to https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml" + }, + "link.item.label.Examples": { + "message": "Examples", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/xdvi4fek?tag=diagram" + }, + "link.item.label.Blog": { + "message": "Blog", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/" + }, + "link.item.label.Forum": { + "message": "Forum", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/diagram/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "About us", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Contact us", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Licensing", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxDiagram/#licensing" + } +} diff --git a/i18n/ko/docusaurus-theme-classic/navbar.json b/i18n/ko/docusaurus-theme-classic/navbar.json new file mode 100644 index 000000000..c1338bbaf --- /dev/null +++ b/i18n/ko/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript Diagram Documentation", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "DHTMLX Diagram Documentation", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "Examples", + "description": "Navbar item with label Examples" + }, + "item.label.Forum": { + "message": "Forum", + "description": "Navbar item with label Forum" + }, + "item.label.Support": { + "message": "Support", + "description": "Navbar item with label Support" + }, + "item.label.Download": { + "message": "Download", + "description": "Navbar item with label Download" + } +} diff --git a/i18n/ru/code.json b/i18n/ru/code.json new file mode 100644 index 000000000..dee1b759e --- /dev/null +++ b/i18n/ru/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "На странице произошёл сбой.", + "description": "The title of the fallback page when the page crashed" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "Прокрутка к началу", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "Архив", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "Архив", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "Навигация по странице списка блогов", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "Следующие записи", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "Предыдущие записи", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "Навигация по странице поста блога", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "Следующий пост", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "Предыдущий пост", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "Посмотреть все теги", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "system mode", + "description": "The name for the system color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "Светлый режим", + "description": "The name for the light color mode" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "Тёмный режим", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel": { + "message": "Переключение между темным и светлым режимом (сейчас используется {mode})", + "description": "The ARIA label for the color mode toggle" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "Навигационная цепочка текущей страницы", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "{count} элемент|{count} элемента|{count} элементов", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "Страница документа", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "Предыдущая страница", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "Следующая страница", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "Одна страница|{count} страницы|{count} страниц", + "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.tagDocListPageTitle": { + "message": "{nDocsTagged} с тегом \"{tagName}\"", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "Версия: {versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "Это документация для будущей версии {siteTitle} {versionLabel}.", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "Это документация {siteTitle} для версии {versionLabel}, которая уже не поддерживается.", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "Актуальная документация находится на странице {latestVersionLink} ({versionLabel}).", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "последней версии", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "Отредактировать эту страницу", + "description": "The link label to edit the current page" + }, + "theme.common.headingLinkTitle": { + "message": "Прямая ссылка на {heading}", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": " {date}", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": " от {user}", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "Последнее обновление{atDate}{byUser}", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "Версии", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.NotFound.title": { + "message": "Страница не найдена", + "description": "The title of the 404 page" + }, + "theme.tags.tagsListLabel": { + "message": "Теги:", + "description": "The label alongside a tag list" + }, + "theme.admonition.caution": { + "message": "Осторожно", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "Опасно", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "К сведению", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.note": { + "message": "Примечание", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "Подсказка", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "Предупреждение", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "Закрыть", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "Навигация по последним постам в блоге", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "Expand sidebar category '{label}'", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "Collapse sidebar category '{label}'", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "(opens in new tab)", + "description": "The ARIA label for the external link icon" + }, + "theme.NavBar.navAriaLabel": { + "message": "Main", + "description": "The ARIA label for the main navigation" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "Языки", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.NotFound.p1": { + "message": "К сожалению, мы не смогли найти запрашиваемую вами страницу.", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "Пожалуйста, обратитесь к владельцу сайта, с которого вы перешли на эту ссылку, чтобы сообщить ему, что ссылка не работает.", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "Содержание этой страницы", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "Читать дальше", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "Подробнее о {title}", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.CodeBlock.copy": { + "message": "Скопировать", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.copied": { + "message": "Скопировано", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "Скопировать в буфер обмена", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "Переключить перенос по строкам", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.docs.breadcrumbs.home": { + "message": "Главная страница", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.blog.post.readingTime.plurals": { + "message": "{readingTime} мин. чтения|{readingTime} мин. чтения|{readingTime} мин. чтения", + "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "Свернуть сайдбар", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "Свернуть сайдбар", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "Docs sidebar", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "Закрыть панель навигации", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← Перейти к главному меню", + "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "Переключить навигационную панель", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "Развернуть сайдбар", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "Развернуть сайдбар", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "Expand the dropdown", + "description": "The ARIA label of the button to expand the mobile dropdown navbar item" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "Collapse the dropdown", + "description": "The ARIA label of the button to collapse the mobile dropdown navbar item" + }, + "theme.SearchBar.seeAll": { + "message": "Посмотреть все результаты ({count})" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "{count} документ|{count} документа|{count} документов", + "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.SearchPage.existingResultsTitle": { + "message": "Результаты поиска по запросу \"{query}\"", + "description": "The search page title for non-empty query" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "Поиск по сайту", + "description": "The search page title for empty query" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "Введите фразу для поиска", + "description": "The placeholder for search page input" + }, + "theme.SearchPage.inputLabel": { + "message": "Поиск", + "description": "The ARIA label for search page input" + }, + "theme.SearchPage.algoliaLabel": { + "message": "При поддержке Algolia", + "description": "The description label for Algolia mention" + }, + "theme.SearchPage.noResultsText": { + "message": "По запросу ничего не найдено", + "description": "The paragraph for empty search result" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "Загрузка новых результатов поиска...", + "description": "The paragraph for fetching new search results" + }, + "theme.SearchBar.label": { + "message": "Поиск", + "description": "The ARIA label and placeholder for search button" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "Очистить", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "Отменить", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "Search docs", + "description": "The placeholder text for the main search input field" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "Ask another question...", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "Answering...", + "description": "The placeholder text for search box when AI is streaming an answer" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "search", + "description": "The hint for the search box enter key text" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "enter", + "description": "The hint for the Ask AI search box enter key text" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "Search", + "description": "The ARIA label for search input" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "Back to keyword search", + "description": "The text for back to keyword search button" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "Back to keyword search", + "description": "The ARIA label for back to keyword search button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "Недавнее", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "Нет истории поиска", + "description": "The text when there are no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "Сохранить поисковый запрос", + "description": "The title for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "Удалить запись из историю", + "description": "The title for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "Избранное", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "Удалить запись из избранное", + "description": "The title for remove favorite search button" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "Recent conversations", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "Remove this conversation from history", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "Невозможно загрузить результаты поиска", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "Проверьте подключение к интернету.", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "Ask AI: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "Answers are generated with AI which can make mistakes. Verify responses.", + "description": "The disclaimer text for AI answers" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "Related sources", + "description": "The text for related sources" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "Thinking...", + "description": "The text when AI is thinking" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "Copy", + "description": "The text for copy button" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "Copied!", + "description": "The text for copy button when copied" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "Copy", + "description": "The title for copy button" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "Like", + "description": "The title for like button" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "Dislike", + "description": "The title for dislike button" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "Thanks for your feedback!", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "Searching...", + "description": "The text before tool call" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "Searching for ", + "description": "The text during tool call" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "Searched for", + "description": "The text after tool call" + }, + "theme.SearchModal.footer.selectText": { + "message": "выбрать", + "description": "The select text for footer" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "Submit question", + "description": "The submit question text for footer" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "Клавиша Enter", + "description": "The ARIA label for select key in footer" + }, + "theme.SearchModal.footer.navigateText": { + "message": "навигация", + "description": "The navigate text for footer" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "Клавиша стрелка вверх", + "description": "The ARIA label for navigate up key in footer" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "Клавиша стрелка вниз", + "description": "The ARIA label for navigate down key in footer" + }, + "theme.SearchModal.footer.closeText": { + "message": "закрыть", + "description": "The close text for footer" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Клавиша Escape", + "description": "The ARIA label for close key in footer" + }, + "theme.SearchModal.footer.searchByText": { + "message": "Поиск от", + "description": "The 'Powered by' text for footer" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "Back to search", + "description": "The back to search text for footer" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "Нет результатов по запросу", + "description": "The text when there are no results" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "Попробуйте", + "description": "The text for suggested query" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "Нет подходящего результата поиска?", + "description": "The text for reporting missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "Сообщите нам.", + "description": "The link text for reporting missing results" + }, + "theme.SearchModal.placeholder": { + "message": "Поиск", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "theme.blog.post.plurals": { + "message": "{count} запись|{count} записи|{count} записей", + "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.blog.tagTitle": { + "message": "{nPosts} с тегом \"{tagName}\"", + "description": "The title of the page for a blog tag" + }, + "theme.blog.author.pageTitle": { + "message": "{authorName} - {nPosts}", + "description": "The title of the page for a blog author" + }, + "theme.blog.authorsList.pageTitle": { + "message": "Authors", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "View All Authors", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "This author has not written any posts yet.", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "Unlisted page", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "Draft page", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "This page is a draft. It will only be visible in dev and be excluded from the production build.", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "Попробуйте ещё раз", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "Перейти к основному содержимому", + "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" + }, + "theme.tags.tagsPageTitle": { + "message": "Теги", + "description": "The title of the tag list page" + } +} diff --git a/i18n/ru/docusaurus-plugin-content-blog/options.json b/i18n/ru/docusaurus-plugin-content-blog/options.json new file mode 100644 index 000000000..9239ff706 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/ru/docusaurus-plugin-content-docs/current.json b/i18n/ru/docusaurus-plugin-content-docs/current.json new file mode 100644 index 000000000..6db8ff5af --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,262 @@ +{ + "version.label": { + "message": "Next", + "description": "The label for version current" + }, + "sidebar.docs.category.What's new and migration": { + "message": "What's new and migration", + "description": "The label for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.What's new and migration.link.generated-index.title": { + "message": "What's new and migration", + "description": "The generated-index page title for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.API": { + "message": "API", + "description": "The label for category 'API' in sidebar 'docs'" + }, + "sidebar.docs.category.API.link.generated-index.title": { + "message": "API", + "description": "The generated-index page title for category 'API' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram API": { + "message": "Diagram API", + "description": "The label for category 'Diagram API' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram methods": { + "message": "Diagram methods", + "description": "The label for category 'Diagram methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram events": { + "message": "Diagram events", + "description": "The label for category 'Diagram events' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram properties": { + "message": "Diagram properties", + "description": "The label for category 'Diagram properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram Editor API": { + "message": "Diagram Editor API", + "description": "The label for category 'Diagram Editor API' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram Editor API.link.generated-index.title": { + "message": "Diagram Editor API", + "description": "The generated-index page title for category 'Diagram Editor API' in sidebar 'docs'" + }, + "sidebar.docs.category.Editor API": { + "message": "Editor API", + "description": "The label for category 'Editor API' in sidebar 'docs'" + }, + "sidebar.docs.category.Editor methods": { + "message": "Editor methods", + "description": "The label for category 'Editor methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Editor events": { + "message": "Editor events", + "description": "The label for category 'Editor events' in sidebar 'docs'" + }, + "sidebar.docs.category.Editor properties": { + "message": "Editor properties", + "description": "The label for category 'Editor properties' in sidebar 'docs'" + }, + "sidebar.docs.category.History manager API": { + "message": "History manager API", + "description": "The label for category 'History manager API' in sidebar 'docs'" + }, + "sidebar.docs.category.History manager methods": { + "message": "History manager methods", + "description": "The label for category 'History manager methods' in sidebar 'docs'" + }, + "sidebar.docs.category.History manager properties": { + "message": "History manager properties", + "description": "The label for category 'History manager properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Copy manager API": { + "message": "Copy manager API", + "description": "The label for category 'Copy manager API' in sidebar 'docs'" + }, + "sidebar.docs.category.Copy manager methods": { + "message": "Copy manager methods", + "description": "The label for category 'Copy manager methods' in sidebar 'docs'" + }, + "sidebar.docs.category.View API": { + "message": "View API", + "description": "The label for category 'View API' in sidebar 'docs'" + }, + "sidebar.docs.category.View methods": { + "message": "View methods", + "description": "The label for category 'View methods' in sidebar 'docs'" + }, + "sidebar.docs.category.View events": { + "message": "View events", + "description": "The label for category 'View events' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar API": { + "message": "Toolbar API", + "description": "The label for category 'Toolbar API' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar methods": { + "message": "Toolbar methods", + "description": "The label for category 'Toolbar methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar properties": { + "message": "Toolbar properties", + "description": "The label for category 'Toolbar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar properties.link.generated-index.title": { + "message": "Toolbar properties", + "description": "The generated-index page title for category 'Toolbar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar events": { + "message": "Toolbar events", + "description": "The label for category 'Toolbar events' in sidebar 'docs'" + }, + "sidebar.docs.category.Editbar API": { + "message": "Editbar API", + "description": "The label for category 'Editbar API' in sidebar 'docs'" + }, + "sidebar.docs.category.Editbar properties": { + "message": "Editbar properties", + "description": "The label for category 'Editbar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Editbar properties.link.generated-index.title": { + "message": "Editbar properties", + "description": "The generated-index page title for category 'Editbar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Basic controls": { + "message": "Basic controls", + "description": "The label for category 'Basic controls' in sidebar 'docs'" + }, + "sidebar.docs.category.Complex controls": { + "message": "Complex controls", + "description": "The label for category 'Complex controls' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapebar API": { + "message": "Shapebar API", + "description": "The label for category 'Shapebar API' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapebar properties": { + "message": "Shapebar properties", + "description": "The label for category 'Shapebar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapebar properties.link.generated-index.title": { + "message": "Shapebar properties", + "description": "The generated-index page title for category 'Shapebar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Items API": { + "message": "Items API", + "description": "The label for category 'Items API' in sidebar 'docs'" + }, + "sidebar.docs.category.Items API.link.generated-index.title": { + "message": "Items API", + "description": "The generated-index page title for category 'Items API' in sidebar 'docs'" + }, + "sidebar.docs.category.Common API": { + "message": "Common API", + "description": "The label for category 'Common API' in sidebar 'docs'" + }, + "sidebar.docs.category.Common API.link.generated-index.title": { + "message": "Common API", + "description": "The generated-index page title for category 'Common API' in sidebar 'docs'" + }, + "sidebar.docs.category.CellManager API": { + "message": "CellManager API", + "description": "The label for category 'CellManager API' in sidebar 'docs'" + }, + "sidebar.docs.category.CellManager methods": { + "message": "CellManager methods", + "description": "The label for category 'CellManager methods' in sidebar 'docs'" + }, + "sidebar.docs.category.CellManager events": { + "message": "CellManager events", + "description": "The label for category 'CellManager events' in sidebar 'docs'" + }, + "sidebar.docs.category.DataCollection API": { + "message": "DataCollection API", + "description": "The label for category 'DataCollection API' in sidebar 'docs'" + }, + "sidebar.docs.category.DataCollection methods": { + "message": "DataCollection methods", + "description": "The label for category 'DataCollection methods' in sidebar 'docs'" + }, + "sidebar.docs.category.DataCollection events": { + "message": "DataCollection events", + "description": "The label for category 'DataCollection events' in sidebar 'docs'" + }, + "sidebar.docs.category.Export methods": { + "message": "Export methods", + "description": "The label for category 'Export methods' in sidebar 'docs'" + }, + "sidebar.docs.category.InlineEditor events": { + "message": "InlineEditor events", + "description": "The label for category 'InlineEditor events' in sidebar 'docs'" + }, + "sidebar.docs.category.Selection API": { + "message": "Selection API", + "description": "The label for category 'Selection API' in sidebar 'docs'" + }, + "sidebar.docs.category.Selection methods": { + "message": "Selection methods", + "description": "The label for category 'Selection methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Selection events": { + "message": "Selection events", + "description": "The label for category 'Selection events' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides": { + "message": "Guides", + "description": "The label for category 'Guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram": { + "message": "Diagram", + "description": "The label for category 'Diagram' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram.link.generated-index.title": { + "message": "Diagram", + "description": "The generated-index page title for category 'Diagram' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram items": { + "message": "Diagram items", + "description": "The label for category 'Diagram items' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapes": { + "message": "Shapes", + "description": "The label for category 'Shapes' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapes.link.generated-index.title": { + "message": "Shapes", + "description": "The generated-index page title for category 'Shapes' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram Editor": { + "message": "Diagram Editor", + "description": "The label for category 'Diagram Editor' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram Editor.link.generated-index.title": { + "message": "Diagram editor", + "description": "The generated-index page title for category 'Diagram Editor' in sidebar 'docs'" + }, + "sidebar.docs.category.Themes": { + "message": "Themes", + "description": "The label for category 'Themes' in sidebar 'docs'" + }, + "sidebar.docs.category.Themes.link.generated-index.title": { + "message": "Themes", + "description": "The generated-index page title for category 'Themes' in sidebar 'docs'" + }, + "sidebar.docs.category.Integrations": { + "message": "Integrations", + "description": "The label for category 'Integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.Integrations.link.generated-index.title": { + "message": "Integrations", + "description": "The generated-index page title for category 'Integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.AI Integrations": { + "message": "AI Integrations", + "description": "The label for category 'AI Integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.AI Integrations.link.generated-index.title": { + "message": "AI Integrations", + "description": "The generated-index page title for category 'AI Integrations' in sidebar 'docs'" + } +} diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/.sync b/i18n/ru/docusaurus-plugin-content-docs/current/.sync new file mode 100644 index 000000000..034fab473 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +514fd410a52ca700b6c2e21b472b47960760a347 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/add_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/add_method.md new file mode 100644 index 000000000..a86ffc072 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/add_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: add() +title: Метод add() Cell Manager +description: Изучите метод add() объекта Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и демонстрации в реальном времени, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# add() + +:::info +Метод `add()` автоматически проверяется системой. Ячейка не будет добавлена, если это невозможно согласно структуре swimlane. +::: + +### Описание {#description} + +@short: Добавляет ячейки в виде строк или столбцов в swimlane + +### Использование {#usage} + +~~~jsx +add( + cellIndex: number, + dir: string // "up" | "down" | "left" | "right" +): void; +~~~ + +### Параметры {#parameters} + +- `cellIndex` - (обязательный) начальный индекс ячейки в макете. Отсчет индекса начинается с 0 +- `dir` - (обязательный) направление действия: `"up"` | `"down"` | `"left"` | `"right"` + +### Пример {#example} + +~~~jsx +// инициализация диаграммы +const diagram = new dhx.Diagram("diagram_container", { + // параметры конфигурации +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // устанавливает активный swimlane + +diagram.cellManager.add(0, "down"); // добавляет ячейки как строки +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsadd_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsadd_event.md new file mode 100644 index 000000000..3beeab971 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsadd_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: afterCellsAdd +title: Событие afterCellsAdd Cell Manager +description: Изучите событие afterCellsAdd объекта Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и демонстрации в реальном времени, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# afterCellsAdd + +### Описание {#description} + +@short: Срабатывает после добавления новых ячеек в swimlane + +### Использование {#usage} + +~~~jsx +afterCellsAdd: (swimlaneId: string | number) => void; +~~~ + +### Параметры {#parameters} + +Колбек события принимает следующий параметр: + +- `swimlaneId` - (обязательный) идентификатор элемента + +### Пример {#example} + +~~~jsx {9-11} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика к событию +diagram.events.on("afterCellsAdd", (swimlaneId) => { + console.log(swimlaneId); +}); +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsmove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsmove_event.md new file mode 100644 index 000000000..4fe5a9117 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsmove_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: afterCellsMove +title: Событие afterCellsMove Cell Manager +description: Изучите событие afterCellsMove объекта Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и демонстрации в реальном времени, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# afterCellsMove + +### Описание {#description} + +@short: Срабатывает после перемещения ячеек swimlane + +### Использование {#usage} + +~~~jsx +afterCellsMove: (swimlaneId: string | number) => void; +~~~ + +### Параметры {#parameters} + +Колбек события принимает следующий параметр: + +- `swimlaneId` - (обязательный) идентификатор элемента + +### Пример {#example} + +~~~jsx {9-11} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика к событию +diagram.events.on("afterCellsMove", (swimlaneId) => { + console.log(swimlaneId); +}); +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsremove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsremove_event.md new file mode 100644 index 000000000..6773d9850 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsremove_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: afterCellsRemove +title: Событие afterCellsRemove Cell Manager +description: Изучите событие afterCellsRemove объекта Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и демонстрации в реальном времени, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# afterCellsRemove + +### Описание {#description} + +@short: Срабатывает после удаления ячеек swimlane + +### Использование {#usage} + +~~~jsx +afterCellsRemove: (swimlaneId: string | number) => void; +~~~ + +### Параметры {#parameters} + +Колбек события принимает следующий параметр: + +- `swimlaneId` - (обязательный) идентификатор элемента + +### Пример {#example} + +~~~jsx {9-11} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика к событию +diagram.events.on("afterCellsRemove", (swimlaneId) => { + console.log(swimlaneId); +}); +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsvalidation_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsvalidation_event.md new file mode 100644 index 000000000..ede27be89 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsvalidation_event.md @@ -0,0 +1,49 @@ +--- +sidebar_label: afterCellsValidation +title: Событие afterCellsValidation Cell Manager +description: Изучите событие afterCellsValidation объекта Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и демонстрации в реальном времени, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# afterCellsValidation + +### Описание {#description} + +@short: Срабатывает после проверки ячеек swimlane + +### Использование {#usage} + +~~~jsx +afterCellsValidation: ( + swimlaneId: string | number, + validate: boolean, + action: "move" | "remove" | "add" +) => void; +~~~ + +### Параметры {#parameters} + +Колбек события принимает следующие параметры: + +- `swimlaneId` - (обязательный) идентификатор элемента +- `validate` - (обязательный) указывает, пройдена проверка или нет +- `action` - (обязательный) тип действия + +### Пример {#example} + +~~~jsx {9-11} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика к событию +diagram.events.on("afterCellsValidation", (swimlaneId, validate, action) => { + console.log(swimlaneId, validate, action); +}); +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsadd_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsadd_event.md new file mode 100644 index 000000000..7901bc2b9 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsadd_event.md @@ -0,0 +1,48 @@ +--- +sidebar_label: beforeCellsAdd +title: Событие beforeCellsAdd в Cell Manager +description: Узнайте о событии beforeCellsAdd компонента Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо-версии, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# beforeCellsAdd + +### Описание {#description} + +@short: Срабатывает перед добавлением новых ячеек в swimlane + +### Использование {#usage} + +~~~jsx +beforeCellsAdd: (swimlaneId: string | number) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбек события принимает следующий параметр: + +- `swimlaneId` — (обязательный) идентификатор элемента + +### Возвращаемое значение {#returns} + +Верните `false`, чтобы предотвратить добавление новых ячеек, в противном случае — `true` + +### Пример {#example} + +~~~jsx {9-12} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика события +diagram.events.on("beforeCellsAdd", (swimlaneId) => { + console.log(swimlaneId); + return true; +}); +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsmove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsmove_event.md new file mode 100644 index 000000000..9e8ba5c70 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsmove_event.md @@ -0,0 +1,48 @@ +--- +sidebar_label: beforeCellsMove +title: Событие beforeCellsMove в Cell Manager +description: Узнайте о событии beforeCellsMove компонента Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо-версии, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# beforeCellsMove + +### Описание {#description} + +@short: Срабатывает перед перемещением ячеек swimlane + +### Использование {#usage} + +~~~jsx +beforeCellsMove: (swimlaneId: string | number) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбек события принимает следующий параметр: + +- `swimlaneId` — (обязательный) идентификатор элемента + +### Возвращаемое значение {#returns} + +Верните `false`, чтобы предотвратить перемещение ячеек, в противном случае — `true` + +### Пример {#example} + +~~~jsx {9-12} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика события +diagram.events.on("beforeCellsMove", (swimlaneId) => { + console.log(swimlaneId); + return true; +}); +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsremove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsremove_event.md new file mode 100644 index 000000000..b1bef580c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsremove_event.md @@ -0,0 +1,48 @@ +--- +sidebar_label: beforeCellsRemove +title: Событие beforeCellsRemove в Cell Manager +description: Узнайте о событии beforeCellsRemove компонента Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо-версии, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# beforeCellsRemove + +### Описание {#description} + +@short: Срабатывает перед удалением ячеек swimlane + +### Использование {#usage} + +~~~jsx +beforeCellsRemove: (swimlaneId: string | number) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбек события принимает следующий параметр: + +- `swimlaneId` — (обязательный) идентификатор элемента + +### Возвращаемое значение {#returns} + +Верните `false`, чтобы предотвратить удаление ячеек, в противном случае — `true` + +### Пример {#example} + +~~~jsx {9-12} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика события +diagram.events.on("beforeCellsRemove", (swimlaneId) => { + console.log(swimlaneId); + return true; +}); +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsvalidation_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsvalidation_event.md new file mode 100644 index 000000000..98add98ca --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsvalidation_event.md @@ -0,0 +1,52 @@ +--- +sidebar_label: beforeCellsValidation +title: Событие beforeCellsValidation в Cell Manager +description: Узнайте о событии beforeCellsValidation компонента Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо-версии, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# beforeCellsValidation + +### Описание {#description} + +@short: Срабатывает перед валидацией ячеек swimlane + +### Использование {#usage} + +~~~jsx +beforeCellsValidation: ( + swimlaneId: string | number, + action: "move" | "remove" | "add" +) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбек события принимает следующие параметры: + +- `swimlaneId` — (обязательный) идентификатор элемента +- `action` — (обязательный) тип действия + +### Возвращаемое значение {#returns} + +Верните `false`, чтобы предотвратить валидацию новых ячеек, в противном случае — `true` + +### Пример {#example} + +~~~jsx {9-12} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика события +diagram.events.on("beforeCellsValidation", (swimlaneId, action) => { + console.log(swimlaneId, action); + return true; +}); +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getcellid_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getcellid_method.md new file mode 100644 index 000000000..fc6b8a646 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getcellid_method.md @@ -0,0 +1,49 @@ +--- +sidebar_label: getCellId() +title: Метод getCellId в Cell Manager +description: Узнайте о методе getCellId компонента Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо-версии, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# getCellId() + +### Описание {#description} + +@short: Возвращает идентификатор ячейки swimlane по индексу + +### Использование {#usage} + +~~~jsx +getCellId( + cellIndex: number, + type: string // "row" | "col" +): string | number | undefined; +~~~ + +### Параметры {#parameters} + +- `cellIndex` — (обязательный) начальный индекс ячейки в макете. Отсчет индекса начинается с 0 +- `type` — (обязательный) тип направления для подсчета индекса: `"row"` | `"col"` + +### Возвращаемое значение {#returns} + +Метод возвращает идентификатор ячейки + +### Пример {#example} + +~~~jsx +// инициализация diagram +const diagram = new dhx.Diagram("diagram_container", { + // параметры конфигурации +}); +diagram.data.parse(data); + +// устанавливает активный swimlane +diagram.cellManager.setSwimlane("main"); + +// получает идентификатор ячейки +diagram.cellManager.getCellId(0, "row"); // -> "r01" +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getcellindex_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getcellindex_method.md new file mode 100644 index 000000000..14fc6fbb8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getcellindex_method.md @@ -0,0 +1,49 @@ +--- +sidebar_label: getCellIndex() +title: Метод getCellIndex объекта Cell Manager +description: В документации библиотеки DHTMLX JavaScript Diagram вы можете узнать о методе getCellIndex объекта Cell Manager. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram. +--- + +# getCellIndex() + +### Описание {#description} + +@short: Возвращает индекс ячейки Swimlane по идентификатору + +### Использование {#usage} + +~~~jsx +getCellIndex( + cellId: string | number, + type: string // "row" | "col" +): number | undefined; +~~~ + +### Параметры {#parameters} + +- `cellId` - (обязательный) идентификатор ячейки +- `type` - (обязательный) тип направления для подсчета индекса: `"row"` | `"col"` + +### Возвращаемое значение {#returns} + +Метод возвращает индекс ячейки. Отсчет индекса начинается с 0 + +### Пример {#example} + +~~~jsx +// инициализация диаграммы +const diagram = new dhx.Diagram("diagram_container", { + // параметры конфигурации +}); +diagram.data.parse(data); + +// устанавливает активную Swimlane +diagram.cellManager.setSwimlane("main"); + +// получает индекс ячейки +diagram.cellManager.getCellIndex("r01", "row"); // -> 0 +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellid_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellid_method.md new file mode 100644 index 000000000..ac647ea6d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellid_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: getSubHeaderCellId() +title: Метод getSubHeaderCellId объекта Cell Manager +description: В документации библиотеки DHTMLX JavaScript Diagram вы можете узнать о методе getSubHeaderCellId объекта Cell Manager. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram. +--- + +# getSubHeaderCellId() + +### Описание {#description} + +@short: Возвращает идентификатор ячейки Swimlane по идентификатору подзаголовка + +### Использование {#usage} + +~~~jsx +getSubHeaderCellId(subheaderId: string): string | number; +~~~ + +### Параметры {#parameters} + +- `subheaderId` - (обязательный) идентификатор подзаголовка Swimlane + +### Возвращаемое значение {#returns} + +Метод возвращает идентификатор ячейки + +### Пример {#example} + +~~~jsx +// инициализация диаграммы +const diagram = new dhx.Diagram("diagram_container", { + // параметры конфигурации +}); +diagram.data.parse(data); + +// устанавливает активную Swimlane +diagram.cellManager.setSwimlane("main"); + +// получает идентификатор ячейки +diagram.cellManager.getSubHeaderCellId("sub01"); // -> "r01" +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellindex_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellindex_method.md new file mode 100644 index 000000000..1372bc9b0 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellindex_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: getSubHeaderCellIndex() +title: Метод getSubHeaderCellIndex объекта Cell Manager +description: В документации библиотеки DHTMLX JavaScript Diagram вы можете узнать о методе getSubHeaderCellIndex объекта Cell Manager. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram. +--- + +# getSubHeaderCellIndex() + +### Описание {#description} + +@short: Возвращает индекс ячейки Swimlane по идентификатору подзаголовка + +### Использование {#usage} + +~~~jsx +getSubHeaderCellIndex(subheaderId: string): number; +~~~ + +### Параметры {#parameters} + +- `subheaderId` - (обязательный) идентификатор подзаголовка Swimlane + +### Возвращаемое значение {#returns} + +Метод возвращает индекс ячейки. Отсчет индекса начинается с 0 + +### Пример {#example} + +~~~jsx +// инициализация диаграммы +const diagram = new dhx.Diagram("diagram_container", { + // параметры конфигурации +}); +diagram.data.parse(data); + +// устанавливает активную Swimlane +diagram.cellManager.setSwimlane("main"); + +// получает индекс ячейки +diagram.cellManager.getSubHeaderCellIndex("sub01"); // -> 0 +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadertype_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadertype_method.md new file mode 100644 index 000000000..c837bc791 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadertype_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: getSubHeaderType() +title: Метод getSubHeaderType объекта Cell Manager +description: В документации библиотеки DHTMLX JavaScript Diagram вы можете узнать о методе getSubHeaderType объекта Cell Manager. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram. +--- + +# getSubHeaderType() + +### Описание {#description} + +@short: Возвращает тип подзаголовка Swimlane по его идентификатору + +### Использование {#usage} + +~~~jsx +getSubHeaderType(subheaderId: string): "row" | "col" | undefined; +~~~ + +### Параметры {#parameters} + +- `subheaderId` - (обязательный) идентификатор подзаголовка Swimlane + +### Возвращаемое значение {#returns} + +Метод возвращает тип подзаголовка Swimlane: `"row"` | `"col"` | undefined + +### Пример {#example} + +~~~jsx +// инициализация диаграммы +const diagram = new dhx.Diagram("diagram_container", { + // параметры конфигурации +}); +diagram.data.parse(data); + +// устанавливает активную Swimlane +diagram.cellManager.setSwimlane("main"); + +// получает тип направления +diagram.cellManager.getSubHeaderType("sub01"); // -> "row" +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/index.md new file mode 100644 index 000000000..f445a44c8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/index.md @@ -0,0 +1,38 @@ +--- +sidebar_label: Обзор +title: Обзор CellManager +description: В документации библиотеки DHTMLX JavaScript Diagram вы можете ознакомиться с обзором CellManager. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram. +--- + +# Обзор CellManager + +Библиотека DHTMLX Diagram предоставляет набор API для динамического управления [Swimlane и её ячейками](/swimlanes/). Этот API можно использовать как в диаграмме, так и в редакторе. + +## Методы {#methods} + +| Название | Описание | +| :---------------------------------------------------- | :---------------------------------------------------------- | +| [](api/cell_manager/add_method.md) | @getshort(api/cell_manager/add_method.md) | +| [](api/cell_manager/getcellid_method.md) | @getshort(api/cell_manager/getcellid_method.md) | +| [](api/cell_manager/getcellindex_method.md) | @getshort(api/cell_manager/getcellindex_method.md) | +| [](api/cell_manager/getsubheadercellid_method.md) | @getshort(api/cell_manager/getsubheadercellid_method.md) | +| [](api/cell_manager/getsubheadercellindex_method.md) | @getshort(api/cell_manager/getsubheadercellindex_method.md) | +| [](api/cell_manager/getsubheadertype_method.md) | @getshort(api/cell_manager/getsubheadertype_method.md) | +| [](api/cell_manager/move_method.md) | @getshort(api/cell_manager/move_method.md) | +| [](api/cell_manager/remove_method.md) | @getshort(api/cell_manager/remove_method.md) | +| [](api/cell_manager/resetswimlane_method.md) | @getshort(api/cell_manager/resetswimlane_method.md) | +| [](api/cell_manager/setswimlane_method.md) | @getshort(api/cell_manager/setswimlane_method.md) | +| [](api/cell_manager/validation_method.md) | @getshort(api/cell_manager/validation_method.md) | + +## Events {#events} + +| Название | Описание | +| :--------------------------------------------------- | :--------------------------------------------------------- | +| [](api/cell_manager/aftercellsadd_event.md) | @getshort(api/cell_manager/aftercellsadd_event.md) | +| [](api/cell_manager/aftercellsmove_event.md) | @getshort(api/cell_manager/aftercellsmove_event.md) | +| [](api/cell_manager/aftercellsremove_event.md) | @getshort(api/cell_manager/aftercellsremove_event.md) | +| [](api/cell_manager/aftercellsvalidation_event.md) | @getshort(api/cell_manager/aftercellsvalidation_event.md) | +| [](api/cell_manager/beforecellsadd_event.md) | @getshort(api/cell_manager/beforecellsadd_event.md) | +| [](api/cell_manager/beforecellsmove_event.md) | @getshort(api/cell_manager/beforecellsmove_event.md) | +| [](api/cell_manager/beforecellsremove_event.md) | @getshort(api/cell_manager/beforecellsremove_event.md) | +| [](api/cell_manager/beforecellsvalidation_event.md) | @getshort(api/cell_manager/beforecellsvalidation_event.md) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/move_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/move_method.md new file mode 100644 index 000000000..be94b579e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/move_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: move() +title: Метод move класса Cell Manager +description: Вы можете узнать о методе move класса Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# move() + +:::info +Метод `move()` автоматически проверяется системой. Ячейка не будет перемещена, если это невозможно согласно структуре swimlane. +::: + +### Описание {#description} + +@short: Перемещает ячейки swimlane в виде строк или столбцов + +### Использование {#usage} + +~~~jsx +move( + cellIndex: number, + dir: string // "up" | "down" | "left" | "right" +): void; +~~~ + +### Параметры {#parameters} + +- `cellIndex` - (обязательный) начальный индекс ячейки в макете. Отсчет индекса начинается с 0 +- `dir` - (обязательный) направление действия: `"up"` | `"down"` | `"left"` | `"right"` + +### Пример {#example} + +~~~jsx +// инициализация диаграммы +const diagram = new dhx.Diagram("diagram_container", { + // параметры конфигурации +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // устанавливает активный swimlane + +diagram.cellManager.move(0, "down"); // перемещает ячейки в виде строк +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlane](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/remove_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/remove_method.md new file mode 100644 index 000000000..840c72a6b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/remove_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: remove() +title: Метод remove класса Cell Manager +description: Вы можете узнать о методе remove класса Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# remove() + +:::info +Метод `remove()` автоматически проверяется системой. Ячейка не будет удалена, если это невозможно согласно структуре swimlane. +::: + +### Описание {#description} + +@short: Удаляет ячейки swimlane в виде строк или столбцов + +### Использование {#usage} + +~~~jsx +remove( + cellIndex: number, + type: string // "row" | "col" +): void; +~~~ + +### Параметры {#parameters} + +- `cellIndex` - (обязательный) начальный индекс ячейки в макете. Отсчет индекса начинается с 0 +- `type` - (обязательный) тип направления для отсчета индекса + +### Пример {#example} + +~~~jsx +// инициализация диаграммы +const diagram = new dhx.Diagram("diagram_container", { + // параметры конфигурации +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // устанавливает активный swimlane + +diagram.cellManager.remove(0, "row"); // удаляет ячейки в виде строк +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlane](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/resetswimlane_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/resetswimlane_method.md new file mode 100644 index 000000000..1d6eee0c1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/resetswimlane_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: resetSwimlane() +title: Метод resetSwimlane класса Cell Manager +description: Вы можете узнать о методе resetSwimlane класса Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# resetSwimlane() + +### Описание {#description} + +@short: Сбрасывает активный swimlane + +### Использование {#usage} + +~~~jsx +resetSwimlane(): void; +~~~ + +### Пример {#example} + +~~~jsx +// инициализация диаграммы +const diagram = new dhx.Diagram("diagram_container", { + // параметры конфигурации +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // устанавливает активный swimlane + +// ваши действия со swimlane + +diagram.cellManager.resetSwimlane(); // сбрасывает активный swimlane +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlane](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/setswimlane_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/setswimlane_method.md new file mode 100644 index 000000000..911c3f6e5 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/setswimlane_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: setSwimlane() +title: Метод setSwimlane класса Cell Manager +description: Вы можете узнать о методе setSwimlane класса Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# setSwimlane() + +### Описание {#description} + +@short: Устанавливает активный swimlane для дальнейших действий с ним + +### Использование {#usage} + +~~~jsx +setSwimlane(id: string | number): boolean; +~~~ + +### Параметры {#parameters} + +- `id` - (обязательный) идентификатор swimlane + +### Возвращаемое значение {#returns} + +Метод возвращает `true`, если swimlane установлен, иначе `false`. + +### Пример {#example} + +~~~jsx +// инициализация диаграммы +const diagram = new dhx.Diagram("diagram_container", { + // параметры конфигурации +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // устанавливает активный swimlane +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlane](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/validation_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/validation_method.md new file mode 100644 index 000000000..7750f1bab --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/cell_manager/validation_method.md @@ -0,0 +1,51 @@ +--- +sidebar_label: validation() +title: Метод validation класса Cell Manager +description: Вы можете узнать о методе validation класса Cell Manager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# validation() + +### Описание {#description} + +@short: Проверяет ячейки swimlane по направлению и типу действия + +### Использование {#usage} + +~~~jsx +validation( + cellIndex: number, + dir: string, // "up" | "down" | "left" | "right" + action: string // "move" | "remove" | "add" +): boolean; +~~~ + +### Параметры {#parameters} + +- `cellIndex` - (обязательный) начальный индекс ячейки в макете. Отсчет индекса начинается с 0 +- `dir` - (обязательный) направление действия: `"up"` | `"down"` | `"left"` | `"right"` +- `action` - (обязательный) тип действия: `"move"` | `"remove"` | `"add"` + +### Возвращаемое значение {#returns} + +Метод возвращает `true`, если ячейка прошла проверку, иначе `false` + +### Пример {#example} + +~~~jsx +// инициализация диаграммы +const diagram = new dhx.Diagram("diagram_container", { + // параметры конфигурации +}); +diagram.data.parse(data); + +// устанавливает активный swimlane +diagram.cellManager.setSwimlane("main"); + +// проверяет, можно ли переместить ячейку с индексом 0 вниз +diagram.cellManager.validation(0, "down", "move"); // -> true +~~~ + +**Журнал изменений**: Добавлено в v4.0 + +**Полезная статья**: [Настройка Swimlane](/swimlanes/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/add_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/add_method.md new file mode 100644 index 000000000..d48bcae1e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/add_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: add() +title: Метод add объекта Data Collection +description: В этой статье вы можете узнать о методе add объекта data collection в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, испытайте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# add() + +### Описание {#description} + +@short: Добавляет новый элемент в диаграмму + +### Использование {#usage} + +~~~jsx +add(new_item: object | array): string | number | array; +~~~ + +### Параметры {#parameters} + +- `new_item` - (обязательный) объект нового элемента или массив объектов элементов + +### Возвращаемое значение {#returns} + +Метод возвращает id элемента или массив id элементов + +### Пример {#example} + +Существует два способа связать фигуры. Вы можете добавить фигуру с указанным родительским ID: + +~~~jsx {2,6} +const diagram = new dhx.Diagram("diagram_container", { + type: "org" +}); +diagram.data.parse(data); + +diagram.data.add({ id: "3.2", text: "New Item", type: "card", parent: "3" }); +~~~ + +или вы можете добавить объекты фигуры и соединительной линии: + +~~~jsx {2,6-7} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.add({ type: "card", id: "3.2", text: "New Item" }); +diagram.data.add({ type: "line", from: "3", to: "3.2" }); +~~~ + +**Полезная статья**: [Добавление элемента](guides/manipulating_items.md#adding-an-item) + +**Связанный пример**: [Diagram. Данные. Добавление/удаление элемента](https://snippet.dhtmlx.com/8wi20uop) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/afteradd_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/afteradd_event.md new file mode 100644 index 000000000..9c6b984bb --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/afteradd_event.md @@ -0,0 +1,41 @@ +--- +sidebar_label: afterAdd +title: Событие afterAdd объекта Data Collection +description: В этой статье вы можете узнать о событии afterAdd объекта data collection в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, испытайте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# afterAdd + +### Описание {#description} + +@short: Происходит после добавления элемента + +### Использование {#usage} + +~~~jsx +afterAdd: (newItem: object) => void; +~~~ + +### Параметры {#parameters} + +Калбэк события принимает следующий параметр: + +- `newItem` - (обязательный) объект добавленного элемента + +### Пример {#example} + +~~~jsx {9-11} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика события +diagram.events.on("afterAdd", (newItem) => { + console.log("A new item is added"); +}); +~~~ + +Событие можно использовать для задания значений по умолчанию или форматирования данных элемента по умолчанию diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/afterremove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/afterremove_event.md new file mode 100644 index 000000000..9d464d9bf --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/afterremove_event.md @@ -0,0 +1,39 @@ +--- +sidebar_label: afterRemove +title: Событие afterRemove объекта Data Collection +description: В этой статье вы можете узнать о событии afterRemove объекта data collection в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, испытайте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# afterRemove + +### Описание {#description} + +@short: Происходит после удаления элемента из data collection + +### Использование {#usage} + +~~~jsx +afterRemove: (removedItem: object) => void; +~~~ + +### Параметры {#parameters} + +Калбэк события принимает следующий параметр: + +- `removedItem` - (обязательный) объект удалённого элемента + +### Пример {#example} + +~~~jsx {9-11} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика события +diagram.events.on("afterRemove", (newItem) => { + console.log("afterRemove "+ item); +}); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/beforeadd_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/beforeadd_event.md new file mode 100644 index 000000000..96c0db7c1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/beforeadd_event.md @@ -0,0 +1,45 @@ +--- +sidebar_label: beforeAdd +title: Событие beforeAdd объекта Data Collection +description: В этой статье вы можете узнать о событии beforeAdd объекта data collection в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, испытайте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# beforeAdd + +### Описание {#description} + +@short: Происходит перед добавлением элемента + +### Использование {#usage} + +~~~jsx +beforeAdd: (newItem: object) => boolean | void; +~~~ + +### Параметры {#parameters} + +Калбэк события принимает следующий параметр: + +- `newItem` - (обязательный) объект добавляемого элемента + +### Возвращаемое значение {#returns} + +Верните `false`, чтобы предотвратить добавление элемента в data collection; в противном случае — `true` + +### Пример {#example} + +~~~jsx {9-13} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика события +diagram.events.on("beforeAdd", (newItem) => { + if (some_check) + return false; + return true; +}); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/beforeremove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/beforeremove_event.md new file mode 100644 index 000000000..84a2ef746 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/beforeremove_event.md @@ -0,0 +1,44 @@ +--- +sidebar_label: beforeRemove +title: Событие beforeRemove объекта Data Collection +description: В этой статье вы можете узнать о событии beforeRemove объекта data collection в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, испытайте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# beforeRemove + +### Описание {#description} + +@short: Происходит после удаления элемента из data collection + +### Использование {#usage} + +~~~jsx +beforeRemove: (removedItem: any) => boolean | void; +~~~ + +### Параметры {#parameters} + +Калбэк события принимает следующий параметр: + +- `removedItem` - (обязательный) объект удаляемого элемента + +### Возвращаемое значение {#returns} + +Верните `false`, чтобы заблокировать удаление элемента из data collection; в противном случае — `true`. + +### Пример {#example} + +~~~jsx {9-12} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика события +diagram.events.on("beforeRemove", (newItem) => { + console.log("beforeRemove "+ item); + return true; +}); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/change_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/change_event.md new file mode 100644 index 000000000..68a6e2a5c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/change_event.md @@ -0,0 +1,49 @@ +--- +sidebar_label: change +title: Событие change объекта Data Collection +description: Вы можете узнать о событии change объекта data collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# change + +### Описание {#description} + +@short: Срабатывает при изменении набора данных диаграммы + +### Использование {#usage} + +~~~jsx +change: ( + id?: string, + status?: "add" | "update" | "delete" | "load" + updatedItem?: object +) => void; +~~~ + +### Параметры {#parameters} + +Колбек события принимает следующие параметры: + +- `id` - (необязательный) ID измененного элемента +- `status` - (необязательный) статус изменения: `"add"`, `"update"`, `"delete"`, `"load"` +- `updatedItem` - (необязательный) объект измененного элемента + +:::info +Бывают случаи, когда функция-обработчик не принимает никаких параметров, например, когда набор данных парсится в диаграмму и все фигуры удаляются +::: + +### Пример {#example} + +~~~jsx {9-11} +// инициализация диаграммы +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика к событию +diagram.events.on("change", function (id, status, shape) { + console.log("The " + id + " has been " + status); +}); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/copy_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/copy_method.md new file mode 100644 index 000000000..4b4c3f0d5 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/copy_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: copy() +title: Метод copy объекта Data Collection +description: Вы можете узнать о методе copy объекта data collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# copy() + +### Описание {#description} + +@short: Создает копию элемента в заданной позиции + +### Использование {#usage} + +~~~jsx +copy( + id: string | number | array, + index: number, + target?: object +): string | number | array; +~~~ + +### Параметры {#parameters} + +- `id` - (обязательный) ID элемента(ов) для копирования +- `index` - (обязательный) индекс, в котором создается копия +- `target` - (необязательный) целевой объект data collection + +### Возвращаемое значение {#returns} + +Метод возвращает ID элемента или массив ID элементов + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.copy("4",5); // копирует фигуру с id=4 на позицию с индексом 5 +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/eachchild_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/eachchild_method.md new file mode 100644 index 000000000..e959c4a18 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/eachchild_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: eachChild() +title: Метод eachChild объекта Data Collection +description: Вы можете узнать о методе eachChild объекта data collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# eachChild() + +### Описание {#description} + +@short: Проходит по дочерним элементам указанного элемента + +### Использование {#usage} + +~~~jsx +eachChild( + id: string | number, + callback: function, + isTree?: boolean +): void; +~~~ + +### Параметры {#parameters} + +- `id` - (обязательный) ID элемента +- `callback` - (обязательный) колбек, который будет применён к каждому дочернему элементу указанного элемента +- `isTree` - (необязательный) определяет, должна ли функция проходить по всем дочерним элементам (любого уровня) указанного элемента. Если задано значение *false*, функция будет проходить только по дочерним элементам первого уровня указанного элемента; по умолчанию — *true*. + +### Пример {#example} + +~~~jsx {6-8} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.eachChild("id_1", (item) => { + console.log(item); +}, true); +~~~ + +**Журнал изменений**: Добавлено в v4.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/eachparent_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/eachparent_method.md new file mode 100644 index 000000000..722481f04 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/eachparent_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: eachParent() +title: Метод eachParent объекта Data Collection +description: Вы можете узнать о методе eachParent объекта data collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# eachParent() + +### Описание {#description} + +@short: Проходит по всем родительским элементам указанного элемента + +### Использование {#usage} + +~~~jsx +eachParent( + id: string | number, + callback: function, + self?: boolean +): void +~~~ + +### Параметры {#parameters} + +- `id` - (обязательный) ID элемента +- `callback` - (обязательный) колбек, который будет применён к каждому родительскому элементу указанного элемента +- `self` - (необязательный) определяет, должна ли колбек также обрабатывать сам указанный элемент; по умолчанию — *false* + +### Пример {#example} + +~~~jsx {6-8} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.eachParent("id_1.1.1", (item) => { + console.log(item); +}, false); +~~~ + +**Журнал изменений**: Добавлено в v4.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/exists_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/exists_method.md new file mode 100644 index 000000000..cd41a870f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/exists_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: exists() +title: Метод exists объекта Data Collection +description: Вы можете узнать о методе exists объекта data collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# exists() + +### Описание {#description} + +@short: Проверяет, существует ли указанный элемент в диаграмме + +### Использование {#usage} + +~~~jsx +exists(id: string | number): boolean; +~~~ + +### Параметры {#parameters} + +- `id` - (обязательный) ID проверяемого элемента + +### Возвращаемое значение {#returns} + +Метод возвращает `true`, если элемент существует, иначе `false` + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const shape = diagram.data.exists("1"); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/filter_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/filter_event.md new file mode 100644 index 000000000..9bcb493e7 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/filter_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: filter +title: Событие filter объекта Data Collection +description: Вы можете узнать больше о событии filter объекта Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник по API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# filter + +### Описание {#description} + +@short: срабатывает после фильтрации объекта Data Collection + +### Использование {#usage} + +~~~jsx +filter: (filter?: object) => void; +~~~ + +### Параметры {#parameters} + +Колбек события `filter` вызывается со следующим параметром: + +- `object: {key: object }` - объект со всеми активными фильтрами, где + - `key` - id активного фильтра + - `object` - объект со свойствами [`rule` и `config`](api/data_collection/filter_method.md#parameters) + +:::info +Для обработки внутренних событий объекта Data Collection в Diagram используйте метод `on()`. +::: + +### Пример {#example} + +~~~jsx {7-9} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.events.on("filter", (filter) => { + console.log("Items were filtered"); +}); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/filter_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/filter_method.md new file mode 100644 index 000000000..1bade88b8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/filter_method.md @@ -0,0 +1,84 @@ +--- +sidebar_label: filter() +title: Метод filter объекта Data Collection +description: Вы можете узнать больше о методе filter объекта Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник по API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# filter() + +### Описание {#description} + +@short: Фильтрует элементы диаграммы + +### Использование {#usage} + +~~~jsx +filter( + rule?: function, + config?: { + id?: string, + add?: boolean, + permanent?: boolean + } +): void; + +// или + +filter( + rule?:{ + by?: string | number, + match?: string | number | boolean, + compare?: (value, match, item) => {} + }, + config?:{ + id?: string, + add?: boolean, + permanent?: boolean + } +): void; +~~~ + +### Параметры {#parameters} + +- `rule` - (необязательный) критерий фильтрации + - Если задан как *функция*, фильтрация будет выполнена по правилу, указанному в этой функции. Функция принимает объект элемента данных в качестве параметра + - Если задан как *объект*, параметр может иметь следующие атрибуты: + - `by` - (необязательный) ключ атрибута элемента + - `match` - (необязательный) шаблон для сопоставления + - `compare` - (необязательный) функция для расширенной фильтрации. Функция возвращает *true* или *false* и принимает три параметра: + - `value` - значение для сравнения + - `match` - шаблон для сопоставления + - `item` - элемент данных, значения которого нужно сравнить (например, фигура) +- `config` - (необязательный) объект, определяющий параметры фильтрации. Объект может содержать следующие свойства: + - `id` - (необязательный) id фильтра + - `add` - (необязательный) определяет, будет ли каждая следующая фильтрация применяться к уже отфильтрованным данным (true), или к исходным данным (*false*, по умолчанию) + - `permanent` - (необязательный) *true*, чтобы сделать текущий фильтр постоянным. Он будет применяться, даже если в объекте конфигурации следующей фильтрации отсутствует свойство `add:true`. Такой фильтр можно удалить только с помощью метода [`resetFilter()`](api/data_collection/resetfilter_method.md) + +### Пример {#example} + +~~~jsx {6-9,11-12} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +// фильтрация по правилу, заданному в функции +diagram.data.filter(function (shape) { + return shape.id > 3; +}); + +// фильтрация по ключу атрибута фигуры +diagram.data.filter({ by: "text", match: "Read N" }); +~~~ + +Чтобы вернуть диаграмму в исходное состояние, вызовите метод `filter()` без параметров. + +~~~jsx +diagram.data.filter(); +~~~ + +**Полезная статья**: [Фильтрация элементов](guides/manipulating_items.md#filtering-items) + +**Связанный пример**: [Diagram. Данные. Фильтрация фигур](https://snippet.dhtmlx.com/tm43bsgn) + +**Журнал изменений**: Обновлено в v6.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/find_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/find_method.md new file mode 100644 index 000000000..b03cc9656 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/find_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: find() +title: Метод find объекта Data Collection +description: Вы можете узнать больше о методе find объекта Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник по API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# find() + +### Описание {#description} + +@short: Находит элемент, соответствующий указанным параметрам + +### Использование {#usage} + +~~~jsx +find(rule: object): object; + +// или + +find(rule: function): object; +~~~ + +### Параметры {#parameters} + +- `rule` - (обязательный) критерий поиска, который может быть задан: + - как объект, содержащий следующие параметры: + - `by: string | function` - критерий поиска (либо ключ атрибута элемента, либо функция поиска) + - `match: string` - значение атрибута элемента + - как функция: `DataCallback(item: T, index?: number, array?: T[])` + +### Возвращаемое значение {#returns} + +Метод возвращает первый объект элемента, соответствующий указанному критерию + +### Пример {#example} + +~~~jsx {7,10-12} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +//поиск фигуры по ключу атрибута +const shape = diagram.data.find({ by: "text", match: "Manager" }); + +//поиск фигуры по правилу, заданному в функции +const shape = diagram.data.find((shape) => { + if(shape.text==="Manager"||shape.text==="Marketer"){return true} +}); +~~~ + +**Полезная статья**: [Поиск нужного элемента](guides/manipulating_items.md#finding-the-necessary-item) + +**Связанный пример**: [Diagram. Данные. Поиск нужной фигуры](https://snippet.dhtmlx.com/sete9z73) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/findall_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/findall_method.md new file mode 100644 index 000000000..751342d58 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/findall_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: findAll() +title: Метод findAll объекта Data Collection +description: Вы можете узнать больше о методе findAll объекта Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник по API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# findAll() + +### Описание {#description} + +@short: Находит все элементы, соответствующие указанным параметрам + +### Использование {#usage} + +~~~jsx +findAll(rule: object): array; + +// или + +findAll(rule: function): array; +~~~ + +### Параметры {#parameters} + +- `rule` - (обязательный) критерий поиска, который может быть задан: + - как объект, содержащий следующие параметры: + - `by: string | function` - критерий поиска (либо ключ атрибута элемента, либо функция поиска) + - `match: string` - значение атрибута элемента + - как функция: `DataCallback(item: T, index?: number, array?: T[])` + +### Возвращаемое значение {#returns} + +Метод возвращает массив объектов найденных элементов + +### Пример {#example} + +~~~jsx {7,10-14} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +//поиск фигур по ключу атрибута +const shapes = diagram.data.findAll({ by: "text", match: "Manager" }); + +//поиск фигур с помощью функции +const shapes = diagram.data.findAll(function (shapes) { + if( shapes.text === "Manager" || shapes.text === "Marketer" ){ + return true; + } +}); +~~~ + +**Полезная статья**: [Поиск нужного элемента](guides/manipulating_items.md#finding-the-necessary-item) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getfilters_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getfilters_method.md new file mode 100644 index 000000000..f7691491b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getfilters_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: getFilters() +title: Метод getFilters объекта Data Collection +description: Вы можете узнать больше о методе getFilters объекта Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник по API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# getFilters() + +### Описание {#description} + +@short: Возвращает объект с применёнными фильтрами + +### Использование {#usage} + +~~~jsx +getFilters({ permanent?: boolean }): object; +~~~ + +### Параметры {#parameters} + +- `permanent` - (необязательный) *false* по умолчанию. Позволяет получить список постоянных фильтров + +### Возвращаемое значение {#returns} + +Метод возвращает объект с применёнными фильтрами, где: +- `key` - id фильтра +- `value` - объект со свойствами [`rule` и `config`](api/data_collection/filter_method.md#parameters) + +### Пример {#example} + +~~~jsx {6-7} +const diagram = new dhx.Diagram("diagram_container", { + // настройки конфигурации +}); +diagram.data.parse(data); + +const filters = diagram.data.getFilters(); // получает все применённые фильтры +console.log(filters); +~~~ + +**Журнал изменений**: Добавлено в v6.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getid_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getid_method.md new file mode 100644 index 000000000..5ee6a3802 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getid_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: getId() +title: Метод getId для Data Collection +description: Узнайте о методе getId модуля Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# getId() + +### Описание {#description} + +@short: Возвращает ID элемента по его индексу + +### Использование {#usage} + +~~~jsx +getId(index: number): string | number; +~~~ + +### Параметры {#parameters} + +- `index` - (обязательный) индекс элемента + +### Возвращаемое значение {#returns} + +Метод возвращает ID элемента + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const id = diagram.data.getId(0); // -> возвращает "1" +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getindex_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getindex_method.md new file mode 100644 index 000000000..9f2775c1b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getindex_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: getIndex() +title: Метод getIndex для Data Collection +description: Узнайте о методе getIndex модуля Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# getIndex() + +### Описание {#description} + +@short: Возвращает индекс элемента по его ID + +### Использование {#usage} + +~~~jsx +getIndex(id: string | number): number; +~~~ + +### Параметры {#parameters} + +- `id` - (обязательный) ID элемента + +### Возвращаемое значение {#returns} + +Метод возвращает индекс элемента + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const index = diagram.data.getIndex("1"); // -> возвращает 0 +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getitem_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getitem_method.md new file mode 100644 index 000000000..2feb47ac2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getitem_method.md @@ -0,0 +1,46 @@ +--- +sidebar_label: getItem() +title: Метод getItem для Data Collection +description: Узнайте о методе getItem модуля Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# getItem() + +### Описание {#description} + +@short: Возвращает объект элемента по его ID + +### Использование {#usage} + +~~~jsx +getItem(id: string | number): object; +~~~ + +### Параметры {#parameters} + +- `id` - (обязательный) ID выбранного элемента + +### Возвращаемое значение {#returns} + +Метод возвращает объект элемента + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const shape = diagram.data.getItem(123); +~~~ + +Вы можете получить доступ к исходным свойствам элемента следующим образом: + +~~~jsx +// доступ к свойствам фигуры +const shape = diagram.data.getItem(123); +const text = shape.text; +~~~ + +**Полезная статья**: [Получение элемента](guides/manipulating_items.md#getting-an-item) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getnearid_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getnearid_method.md new file mode 100644 index 000000000..c9b3cd946 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getnearid_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: getNearId() +title: Метод getNearId для Data Collection +description: Узнайте о методе getNearId модуля Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# getNearId() + +### Описание {#description} + +@short: Ищет ближайший элемент относительно указанного + +### Использование {#usage} + +~~~jsx +getNearId(id: string | number): string | number; +~~~ + +### Параметры {#parameters} + +- `id` - (обязательный) ID элемента + +### Возвращаемое значение {#returns} + +Метод возвращает ID ближайшего элемента + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const nearId = diagram.data.getNearId(id); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getroot_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getroot_method.md new file mode 100644 index 000000000..7b55e853a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getroot_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: getRoot() +title: Метод getRoot для Data Collection +description: Узнайте о методе getRoot модуля Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# getRoot() + +### Описание {#description} + +@short: Возвращает ID корневого элемента по ID его дочернего элемента + +### Использование {#usage} + +~~~jsx +getRoot(id: string | number): string | number; +~~~ + +### Параметры {#parameters} + +- `id` - (обязательный) ID дочернего элемента + +### Возвращаемое значение {#returns} + +Метод возвращает ID корневого элемента. Корневой элемент — это первый элемент древовидной структуры + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.getRoot("id_1.1.1"); // -> "id_1" +~~~ + +**Журнал изменений**: Добавлено в v4.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getroots_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getroots_method.md new file mode 100644 index 000000000..7632087e3 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/getroots_method.md @@ -0,0 +1,34 @@ +--- +sidebar_label: getRoots() +title: Метод getRoots класса Data Collection +description: Узнайте о методе getRoots класса Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram. +--- + +# getRoots() + +### Описание {#description} + +@short: Возвращает массив с id всех корневых элементов диаграммы + +### Использование {#usage} + +~~~jsx +getRoots(): array +~~~ + +### Возвращаемое значение {#returns} + +Метод возвращает массив с id корневых элементов + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.getRoots(); +~~~ + +**Журнал изменений**: Добавлено в v4.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/index.md new file mode 100644 index 000000000..e557f8db2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/index.md @@ -0,0 +1,50 @@ +--- +sidebar_label: Обзор +title: Обзор DataCollection +description: Ознакомьтесь с обзором DataCollection в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram. +--- + +# Обзор DataCollection {#datacollection-overview} + +Набор API, который позволяет работать с данными диаграммы. Этот API можно использовать как в диаграмме, так и в редакторе. + +## Методы {#methods} + +| Name | Описание | +| :------------------------------------------- | :-------------------------------------------------- | +| [](api/data_collection/add_method.md) | @getshort(api/data_collection/add_method.md) | +| [](api/data_collection/copy_method.md) | @getshort(api/data_collection/copy_method.md) | +| [](api/data_collection/eachchild_method.md) | @getshort(api/data_collection/eachchild_method.md) | +| [](api/data_collection/eachparent_method.md) | @getshort(api/data_collection/eachparent_method.md) | +| [](api/data_collection/exists_method.md) | @getshort(api/data_collection/exists_method.md) | +| [](api/data_collection/filter_method.md) | @getshort(api/data_collection/filter_method.md) | +| [](api/data_collection/find_method.md) | @getshort(api/data_collection/find_method.md) | +| [](api/data_collection/findall_method.md) | @getshort(api/data_collection/findall_method.md) | +| [](api/data_collection/getfilters_method.md) | @getshort(api/data_collection/getfilters_method.md) | +| [](api/data_collection/getid_method.md) | @getshort(api/data_collection/getid_method.md) | +| [](api/data_collection/getindex_method.md) | @getshort(api/data_collection/getindex_method.md) | +| [](api/data_collection/getitem_method.md) | @getshort(api/data_collection/getitem_method.md) | +| [](api/data_collection/getnearid_method.md) | @getshort(api/data_collection/getnearid_method.md) | +| [](api/data_collection/getroot_method.md) | @getshort(api/data_collection/getroot_method.md) | +| [](api/data_collection/getroots_method.md) | @getshort(api/data_collection/getroots_method.md) | +| [](api/data_collection/load_method.md) | @getshort(api/data_collection/load_method.md) | +| [](api/data_collection/map_method.md) | @getshort(api/data_collection/map_method.md) | +| [](api/data_collection/move_method.md) | @getshort(api/data_collection/move_method.md) | +| [](api/data_collection/parse_method.md) | @getshort(api/data_collection/parse_method.md) | +| [](api/data_collection/remove_method.md) | @getshort(api/data_collection/remove_method.md) | +| [](api/data_collection/removeall_method.md) | @getshort(api/data_collection/removeall_method.md) | +| [](api/data_collection/resetfilter_method.md)| @getshort(api/data_collection/resetfilter_method.md)| +| [](api/data_collection/serialize_method.md) | @getshort(api/data_collection/serialize_method.md) | +| [](api/data_collection/update_method.md) | @getshort(api/data_collection/update_method.md) | + +## События {#events} + +| Name | Описание | +| :-------------------------------------------- | :--------------------------------------------------- | +| [](api/data_collection/afteradd_event.md) | @getshort(api/data_collection/afteradd_event.md) | +| [](api/data_collection/afterremove_event.md) | @getshort(api/data_collection/afterremove_event.md) | +| [](api/data_collection/beforeadd_event.md) | @getshort(api/data_collection/beforeadd_event.md) | +| [](api/data_collection/beforeremove_event.md) | @getshort(api/data_collection/beforeremove_event.md) | +| [](api/data_collection/change_event.md) | @getshort(api/data_collection/change_event.md) | +| [](api/data_collection/filter_event.md) | @getshort(api/data_collection/filter_event.md) | +| [](api/data_collection/load_event.md) | @getshort(api/data_collection/load_event.md) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/load_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/load_event.md new file mode 100644 index 000000000..a93894317 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/load_event.md @@ -0,0 +1,33 @@ +--- +sidebar_label: load +title: Событие load класса Data Collection +description: Узнайте о событии load класса Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram. +--- + +# load + +### Описание {#description} + +@short: Срабатывает при загрузке данных в диаграмму + +### Использование {#usage} + +~~~jsx +load: () => void; +~~~ + +### Пример {#example} + +~~~jsx {9-11} +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// загрузка данных +diagram.data.parse(data); + +// подключение обработчика к событию +diagram.events.on("load", () => { + // некоторая логика +}); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/load_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/load_method.md new file mode 100644 index 000000000..34fd4f116 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/load_method.md @@ -0,0 +1,56 @@ +--- +sidebar_label: load() +title: Метод load класса Data Collection +description: Узнайте о методе load класса Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram. +--- + +# load() + +### Описание {#description} + +@short: Загружает данные из внешнего файла + +### Использование {#usage} + +~~~jsx +load( + url: string | object, + driver?: object | string +): promise; +~~~ + +### Параметры {#parameters} + +- `url` - (обязательный) URL внешнего файла или `DataProxy` с настроенным URL +- `driver` - (необязательный) `DataDriver` или тип данных (`"json"`, `"csv"`, `"xml"`), по умолчанию `"json"` + +### Возвращаемое значение {#returns} + +Метод возвращает промис загрузки данных + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.load("../common/data.json"); +~~~ + +### Подробности {#details} + +Компонент выполнит AJAX-запрос и будет ожидать, что удалённый URL вернёт корректные данные в формате JSON. + +Загрузка данных выполняется асинхронно, поэтому весь код, который должен выполняться после загрузки, нужно обернуть в промис: + +~~~jsx +diagram.data.load("../some/data").then(() => { + diagram.selection.add(123); +}); +~~~ + +**Полезная статья**: [Загрузка и хранение данных](guides/loading_data.md) + +**Связанный пример**: [Diagram. Данные. Загрузка данных](https://snippet.dhtmlx.com/09isp2d8) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/map_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/map_method.md new file mode 100644 index 000000000..2652289a6 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/map_method.md @@ -0,0 +1,39 @@ +--- +sidebar_label: map() +title: Метод map класса Data Collection +description: Узнайте о методе map класса Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram. +--- + +# map() + +### Описание {#description} + +@short: Проходит по всем элементам диаграммы + +### Использование {#usage} + +~~~jsx +map(callback: function): array; +~~~ + +### Параметры {#parameters} + +- `callback` - (обязательный) калбэк-функция, которая будет вызываться для каждого элемента диаграммы + +### Возвращаемое значение {#returns} + +Метод возвращает новый массив элементов, где каждый элемент — результат выполнения калбэк-функции + +### Пример {#example} + +~~~jsx {7-9} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +//получение id всех элементов диаграммы (фигур, связей, групп, дорожек) +diagram.data.map((item) => { + console.log(item.id); +}); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/move_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/move_method.md new file mode 100644 index 000000000..f92431466 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/move_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: move() +title: Метод move для Data Collection +description: Вы можете узнать о методе move объекта Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# move() + +### Описание {#description} + +@short: Перемещает элемент в указанную позицию + +### Использование {#usage} + +~~~jsx +move( + id: string | number | array, + index: number, + target?: object +): string | number | array; +~~~ + +### Параметры {#parameters} + +- `id` - (обязательный) идентификатор(ы) элемента(ов), который(е) нужно переместить +- `index` - (обязательный) индекс, на который нужно переместить элемент(ы) +- `target` - (опциональный) целевой объект Data Collection + +### Возвращаемое значение {#returns} + +Метод возвращает либо строку с идентификатором элемента, либо массив строковых значений с идентификаторами элементов + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.move("4",5); // перемещает фигуру с id=4 на позицию с индексом 5 +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/parse_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/parse_method.md new file mode 100644 index 000000000..fd66e6033 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/parse_method.md @@ -0,0 +1,104 @@ +--- +sidebar_label: parse() +title: Метод parse для Data Collection +description: Вы можете узнать о методе parse объекта Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# parse() + +### Описание {#description} + +@short: Загружает данные из локального источника данных в диаграмму и обрабатывает их + +### Использование {#usage} + +~~~jsx +parse( + data: object[] | { data: object[]; links: object[] } | string, + driver?: object | string +): void; +~~~ + +### Параметры {#parameters} + +- `data: object[] | { data: object[]; links: object[] } | string` - (обязательный) данные для загрузки. Вы можете загружать данные в любом поддерживаемом формате. Структура данных зависит от режима диаграммы: + - для режимов Diagram default, org chart и mindmap данные задаются в виде массива, содержащего набор объектов данных + ~~~jsx + data: object[]; // массив всех фигур и соединений + ~~~ + - для режима Diagram PERT это объект, который содержит: + - массив `data` (для фигур: `"task"`, `"milestone"`, `"project"`) + - массив `links` (для соединений между фигурами) + ~~~jsx + { + data: object[]; // массив фигур (задач, вех, проектов) + links: object[] // массив соединений между фигурами + }; + ~~~ +- `driver` - (опциональный) `DataDriver` или тип данных (`"json"`, `"csv"`, `"xml"`); по умолчанию — `"json"` + +### Пример {#example} + +- для режима org chart диаграммы: + +~~~jsx +const data = [ + { + id: "1", + text: "Chairman & CEO", + title: "Henry Bennett", + img: "../common/img/avatar-1.png" + }, + { + id: "2", + text: "Manager", + title: "Mildred Kim", + img: "../common/img/avatar-2.png" + }, + { + id: "3", + text: "Technical Director", + title: "Jerry Wagner", + img: "../common/img/avatar-3.png" + }, + { id: "1-2", from: "1", to: "2", type: "line" }, + { id: "1-3", from: "1", to: "3", type: "line" } +]; + +const diagram = new dhx.Diagram("diagram_container", { + type: "org" +}); + +diagram.data.parse(data); +~~~ + +- для режима PERT диаграммы: + +~~~jsx +const dataset = { + data: [ + { id: "1", text: "Project #1", type: "project", parent: null }, + { id: "1.1", text: "Task #1", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, + { id: "1.2", text: "Task #2", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, + { id: "2.1", text: "Task #3", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, + { id: "2.2", text: "Task #4", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, + ], + links: [ + { id: "line-1", source: "1.1", target: "1.2" }, + { id: "line-2", source: "1.2", target: "2.1" }, + { id: "line-3", source: "2.1", target: "2.2" }, + ] +}; + +const diagram = new dhx.Diagram("diagram_container", { + type: "pert" +}); + +diagram.data.parse(dataset); +~~~ + +**Related article**: [Загрузка и хранение данных](guides/loading_data.md) + +**Related samples**: +- [Diagram. Режим Org chart. Базовая инициализация](https://snippet.dhtmlx.com/5ign6fyy) +- [Diagram. PERT-диаграмма. Инициализация](https://snippet.dhtmlx.com/4h5fi7xd) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/remove_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/remove_method.md new file mode 100644 index 000000000..a796e2132 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/remove_method.md @@ -0,0 +1,40 @@ +--- +sidebar_label: remove() +title: Метод remove для Data Collection +description: Вы можете узнать о методе remove объекта Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# remove() + +### Описание {#description} + +@short: Удаляет указанный элемент из диаграммы + +:::note +Если диаграмма инициализирована в режиме org (`type: "org"`) или mindmap (`type: "mindmap"`), удаление фигуры также приведёт к удалению связи с этой фигурой и всех дочерних фигур +::: + +### Использование {#usage} + +~~~jsx +remove(id: string | number | array): void; +~~~ + +### Параметры {#parameters} + +- `id` - (обязательный) идентификатор(ы) элементов, которые должны быть удалены + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.remove("2"); +~~~ + +**Related article**: [Удаление элементов](guides/manipulating_items.md#deleting-items) + +**Related sample**: [Diagram. Данные. Добавление/удаление элемента](https://snippet.dhtmlx.com/8wi20uop) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/removeall_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/removeall_method.md new file mode 100644 index 000000000..5923fd35d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/removeall_method.md @@ -0,0 +1,32 @@ +--- +sidebar_label: removeAll() +title: Метод removeAll для Data Collection +description: Вы можете узнать о методе removeAll объекта Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# removeAll() + +### Описание {#description} + +@short: Удаляет все элементы из диаграммы + +### Использование {#usage} + +~~~jsx +removeAll(): void; +~~~ + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.removeAll(); +~~~ + +**Related article**: [Удаление элементов](guides/manipulating_items.md#deleting-items) + +**Related sample**: [Diagram. Данные. Добавление/удаление элемента](https://snippet.dhtmlx.com/8wi20uop) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/resetfilter_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/resetfilter_method.md new file mode 100644 index 000000000..3ee172bf2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/resetfilter_method.md @@ -0,0 +1,50 @@ +--- +sidebar_label: resetFilter() +title: Метод resetFilter для Data Collection +description: Вы можете изучить метод resetFilter объекта Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# resetFilter() + +### Описание {#description} + +@short: Сбрасывает активные фильтры + +### Использование {#usage} + +~~~jsx +resetFilter({ + id?: string, + permanent?: boolean +}): boolean; +~~~ + +### Параметры {#parameters} + +- `config` - (опциональный) задаёт параметры сброса активных фильтров. Если конфигурация не указана или пуста, будут сброшены все фильтры, кроме тех, у которых в конфигурационном объекте задано свойство `permanent`. Может содержать следующие свойства: + - `id` - (опциональный) идентификатор фильтра, который нужно сбросить + - `permanent` - (опциональный) *true* — сбросить все активные фильтры, включая те, у которых в конфигурации задана настройка `permanent:true` + +### Возвращаемое значение {#returns} + +Метод возвращает *true*, если сброшены все фильтры, включая те, что помечены как `permanent`; в противном случае — *false* + +### Пример {#example} + +~~~jsx {6-7,9-10,12-13} +const diagram = new dhx.Diagram("diagram_container", { + // configuration settings +}); +diagram.data.parse(data); + +// сбрасывает все фильтры, кроме тех, у которых в конфигурации задано свойство "permanent" +diagram.data.resetFilter(); + +// сбрасывает все фильтры, включая те, у которых в конфигурации задано свойство "permanent" +diagram.data.resetFilter({ permanent: true }); + +// сбрасывает фильтр с указанным идентификатором +diagram.data.resetFilter({ id: "filter_id" }); +~~~ + +**Change log**: Добавлено в v6.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/serialize_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/serialize_method.md new file mode 100644 index 000000000..6f432de12 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/serialize_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: serialize() +title: Метод serialize объекта Data Collection +description: Узнайте о методе serialize объекта Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, тестируйте примеры кода и интерактивные демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# serialize() + +### Описание {#description} + +@short: Экспортирует текущие данные диаграммы + +### Использование {#usage} + +~~~jsx +serialize(): object[] | { data: object[]; links: object[] }; +~~~ + +### Возвращаемое значение {#returns} + +В зависимости от режима диаграммы метод возвращает: + +- `object[]` — (для стандартного режима диаграммы, режима организационной диаграммы и режима ментальной карты) массив объектов для каждого элемента и связи диаграммы +- `{ data: object[]; links: object[] }` — (для режима диаграммы PERT) объект, содержащий: + - массив объектов `data` (для фигур: `"task"`, `"milestone"`, `"project"`) + - массив объектов `links` (для соединений между фигурами) + +### Пример {#example} + +- для стандартного режима диаграммы + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const data = diagram.data.serialize(); // -> [{...}, {...}, {...}, {...}] +~~~ + +- для режима диаграммы PERT + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "pert" +}); +diagram.data.parse(dataset); + +const dataset = diagram.data.serialize(); // -> { data: [...], links: [...] }; +~~~ + +Обратите внимание, что для режима диаграммы PERT объекты `links` в экспортированном объекте данных будут иметь [такие же типы, как в диаграмме Ганта DHTMLX](https://docs.dhtmlx.com/gantt/desktop__link_properties.html). Это значит, что если тип связи в данных диаграммы совпадает с одним из типов связей Ганта, он останется прежним при сериализации. Если тип связи не указан или задан иначе (например, `type: "line"`), он будет преобразован в `type: "0"`. + +**Полезная статья**: [Сохранение и восстановление состояния](guides/loading_data.md#saving-and-restoring-state) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/update_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/update_method.md new file mode 100644 index 000000000..3fdcb94e9 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/data_collection/update_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: update() +title: Метод update объекта Data Collection +description: Узнайте о методе update объекта Data Collection в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, тестируйте примеры кода и интерактивные демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# update() + +### Описание {#description} + +@short: Обновляет свойства элемента + +:::note +Этот метод нельзя использовать для изменения *id* или *type* элемента +::: + +### Использование {#usage} + +~~~jsx +update( + id: string | number, + newItem: object +): void; +~~~ + +### Параметры {#parameters} + +- `id` — (обязательный) id элемента, который нужно обновить +- `newItem` — (обязательный) набор свойств, которые нужно обновить + +### Пример {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.update(123, { text:"New text" }); +~~~ + +**Полезная статья**: [Обновление элемента](guides/manipulating_items.md#updating-an-item) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md new file mode 100644 index 000000000..216c6383d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md @@ -0,0 +1,147 @@ +--- +sidebar_label: addShape() +title: Метод addShape +description: Подробнее о методе addShape вы можете узнать в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram. +--- + +# addShape() + +### Описание {#description} + +@short: Создает пользовательскую фигуру + +Метод `addShape()` можно использовать как в диаграмме, так и в редакторе. [Смотрите примеры ниже](#example) + +### Использование {#usage} + +~~~jsx +addShape( + type: string, + parameters: object +): void; +~~~ + +### Параметры {#parameters} + +- `type` - (обязательный) уникальное имя для типа пользовательской фигуры. Имя должно отличаться от имён фигур по умолчанию +- `parameters` - (обязательный) объект с дополнительными параметрами метода `addShape()`. Здесь можно указать следующие атрибуты: + - `template: function` - (обязательный) функция, которая принимает объект конфигурации фигуры в качестве параметра и возвращает HTML- или SVG-шаблон + - [`defaults: object`](shapes/custom_shape.md) - (необязательный) конфигурация по умолчанию для создаваемой фигуры. См. [полный список свойств конфигурации фигуры](shapes/configuration_properties.md) + - [`eventHandlers: object`](shapes/custom_shape.md#event-handlers-for-custom-shapes) - (необязательный) добавляет пользовательские обработчики событий к HTML-элементам шаблона фигуры. Объект `eventHandlers` включает набор пар `key:value`, где: + - `key: string` - имя события. Обратите внимание, что в начале имени события используется префикс 'on' (onclick, onmouseover) + - `value: object` - объект, содержащий пару `key:value`, где + - `key` — имя CSS-класса, к которому будет применён обработчик + - `value` — функция, принимающая два параметра: + - `event: object` - (обязательный) объект события + - `shape: object` - (обязательный) объект фигуры + + :::tip + Рекомендуем использовать разные CSS-классы для разных пользовательских фигур при инициализации пользовательских обработчиков событий. + ::: + +### Пример {#example} + +~~~jsx {8-37} title="Добавление фигуры в Diagram" +const diagram = new dhx.Diagram("diagram_container", { + type: "org", // или type: "default", или type: "mindmap" + defaultShapeType: "personal", +}); + +diagram.data.parse(data); + +diagram.addShape("personal", { + template: ({ name, photo, post }) => (` +
+
+ `),
+ defaults: {
+ height: 115, width: 330,
+ name: "Name and First name",
+ post: "Resident",
+ photo: "",
+ },
+ eventHandlers: {
+ onclick: {
+ "toggle--open-menu": () => console.log("open menu")
+ }
+ }
+});
+~~~
+
+**Связанный пример**: [Diagram с редактором. Режим организационной диаграммы. Настройка карточек, editbar и панели инструментов](https://snippet.dhtmlx.com/vcnt647v)
+
+В примере ниже показано, как добавить пользовательскую фигуру в Diagram Editor, а также настроить панели [Shapebar](guides/diagram_editor/shapebar.md) и [Editbar](guides/diagram_editor/editbar.md) редактора. Настройка пользовательской фигуры в editbar редактора реализована через свойство [`properties`](api/diagram_editor/editbar/config/properties_property.md) панели Editbar.
+
+~~~jsx {34-49} title="Добавление фигуры в Diagram Editor"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Network shapes": [
+ { type: "network", text: "Core", img: src + "core.svg" },
+ { type: "network", text: "Server", img: src + "server.svg" }
+ ],
+ "Flow shapes": [{ flowShapes: true }]
+ }
+ },
+ editbar: {
+ properties: {
+ network: [
+ { type: "arrange" },
+ {
+ type: "fieldset",
+ label: "Network information",
+ rows: [
+ { type: "avatar", key: "img", circle: true, readOnly: true },
+ { type: "textarea", key: "text", label: "Description" },
+ { type: "input", key: "ip", label: "IP" }
+ ]
+ }
+ ]
+ }
+ }
+ }
+});
+
+editor.parse(data);
+
+editor.diagram.addShape("network", {
+ template: ({ img, text, ip }) => {
+ return `
+
+
+
+
+
+
+ ${name}
+
+ ${post}
+
+ DHTMLX Diagram
+This is an example of simple customization of the editing panel using the container control.
+You can also use this control to create your own controls.
+
+ `
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/datepicker.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/datepicker.md
new file mode 100644
index 000000000..637791218
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/datepicker.md
@@ -0,0 +1,147 @@
+---
+sidebar_label: Datepicker
+title: Базовые элементы управления Editbar - Datepicker
+description: Изучите элемент управления Datepicker панели Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+# Datepicker
+
+@short: Базовый элемент управления для выбора даты.
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "datepicker",
+ key?: string | string[],
+ wrap?: boolean, // по умолчанию false
+
+ css?: string,
+ disabled?: boolean, // по умолчанию false
+ hidden?: boolean, // по умолчанию false
+ height?: string | number | "content", // по умолчанию "content"
+ width?: string | number | "content", // по умолчанию "content"
+ padding?: string | number,
+
+ date?: Date | string,
+ dateFormat?: string, // по умолчанию "%d/%m/%y"
+ disabledDates?: (date: Date) => boolean,
+ icon?: string,
+ mark?: (date: Date) => string,
+ mode?: "calendar" | "month" | "year", // по умолчанию "calendar"
+ placeholder?: string,
+ thisMonthOnly?: boolean, // по умолчанию false
+ timeFormat?: 24 | 12, // по умолчанию 24
+ timePicker?: boolean, // по умолчанию false
+ valueFormat?: "string" | "Date", // по умолчанию "string"
+ weekNumbers?: boolean, // по умолчанию false
+ weekStart?: "saturday" | "sunday" | "monday", // по умолчанию "sunday"
+
+ // для `wrap:true` см. свойства label элемента Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // по умолчанию "top"
+
+ // служебные свойства и методы
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## Описание {#description}
+
+### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"datepicker"`
+- `key` - (опциональный) имя указанного/изменяемого свойства или путь к нему в объекте элемента Diagram
+- `wrap` - (опциональный) позволяет отображать внешнюю обёртку. По умолчанию *false*
+- `css` - (опциональный) добавляет строку классов стилей к элементу управления
+- `disabled` - (опциональный) определяет, включён (*false*) или отключён (*true*) элемент управления. По умолчанию *false*
+- `hidden` - (опциональный) определяет, скрыт ли элемент управления. По умолчанию *false*
+- `height` - (опциональный) высота элемента управления. По умолчанию `"content"`
+- `width` - (опциональный) ширина элемента управления. По умолчанию `"content"`
+- `padding` - (опциональный) задаёт отступ между ячейкой и границей элемента управления Datepicker
+- `date` - (опциональный) определяет дату, которая будет открыта при создании календаря
+- `dateFormat` - (опциональный) определяет формат дат в календаре. По умолчанию *"%d/%m/%y"*. Формат даты должен включать разделители (пробел или символ), иначе будет выброшена ошибка
+- `disabledDates` - (опциональный) позволяет отключать отдельные интервалы дат, при этом подписи дней затемняются
+- `icon` - (опциональный) класс CSS иконки из используемого шрифта иконок
+- `mark` - (опциональный) позволяет добавлять класс CSS к определённым дням
+- `mode` - (опциональный) задаёт режим отображения календаря: `"calendar"` | `"month"` | `"year"`. По умолчанию `"calendar"`
+- `placeholder` - (опциональный) подсказка для поля ввода
+- `thisMonthOnly` - (опциональный) скрывает даты предыдущего/следующего месяца относительно текущего отображаемого
+- `timeFormat` - (опциональный) определяет формат времени в timepicker, 12-часовой или 24-часовой: *12* | *24*. По умолчанию *24*
+- `timePicker` - (опциональный) добавляет timepicker в календарь. По умолчанию *false*
+- `valueFormat` - (опциональный) определяет формат значения, которое будет возвращено при получении текущего значения элемента управления: `"string"` | `"Date"`. По умолчанию `"string"`
+- `weekNumbers` - (опциональный) определяет, отображать ли номера недель. По умолчанию *false*
+- `weekStart` - (опциональный) задаёт первый день недели: `"saturday"` | `"monday"` | `"sunday"`. По умолчанию `"sunday"`
+- `label` - (опциональный) задаёт подпись для элемента управления
+- `labelWidth` - (опциональный) задаёт ширину подписи элемента управления
+- `labelPosition` - (опциональный) определяет положение подписи: `"left"` | `"top"`. По умолчанию `"top"`
+
+### Служебные свойства и методы {#service-properties-and-methods}
+
+:::warning
+Обратите внимание: настоятельно рекомендуется не переопределять служебные свойства и методы для стандартных типов элементов управления, поскольку это может нарушить их работу.
+:::
+
+- `$on` - (опциональный) - позволяет задать обработчик события. Объект содержит следующие свойства:
+ - `eventName` - колбек, который вызывается со следующими параметрами:
+ - `object` - объект со следующими свойствами:
+ - `control` - элемент управления Form [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/)
+ - `editor` - объект Diagram Editor
+ - `id` - идентификатор элемента Diagram
+ - `arguments` - (опциональный) - [исходные аргументы события](https://docs.dhtmlx.com/suite/category/form-datepicker-events/)
+- `$handler` - (опциональный) - колбек, позволяющий обрабатывать действия при возникновении событий `change` и `input` элемента управления формы и события `change` DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `id` - идентификатор элемента Diagram
+ - `key` - имя указанного/изменяемого свойства или путь к нему в объекте элемента Diagram
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления Form [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/), на основе которого построен компонент
+ - `value` - новое значение элемента управления Form [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/)
+- `$setValue` - (опциональный) - колбек, позволяющий задавать значение элемента управления Form [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) при инициализации элемента управления и при изменении значения в DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления Form [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/), на основе которого построен компонент
+ - `value` - значение элемента Diagram
+- `$layout` - (опциональный) - колбек, позволяющий задавать структуру элемента управления. Возвращает конфигурацию элемента управления Form [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/). Вызывается со следующим параметром:
+ - `object` - конфигурация элемента управления без служебных свойств
+
+## Пример {#example}
+
+~~~jsx {7-21}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "datepicker",
+ key: "date_start",
+ label: "Date start",
+ wrap: true,
+ },
+ {
+ type: "datepicker",
+ key: "date_end",
+ label: "Date end",
+ wrap: true,
+ valueFormat: "Date",
+ timePicker: true,
+ weekStart: "monday"
+ }
+ ]
+ }
+ }
+ }
+});
+editor.parse([
+ { "id": "shape_1" },
+ { "id": "shape_2", "parent": "shape_1", "date_start": "25/03/24", "date_end": new Date },
+ { "id": "shape_3", "parent": "shape_1", "date_start": "25/03/24", "date_end": new Date }
+]);
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/fieldset.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/fieldset.md
new file mode 100644
index 000000000..a949b8571
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/fieldset.md
@@ -0,0 +1,155 @@
+---
+sidebar_label: Fieldset
+title: Базовые элементы управления Editbar - Fieldset
+description: Изучите элемент управления Fieldset панели Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+# Fieldset
+
+@short: Базовый элемент управления для создания сложных элементов управления с помощью параметров конфигурации Editbar [`controls`](api/diagram_editor/editbar/config/controls_property.md) или [`properties`](api/diagram_editor/editbar/config/properties_property.md).
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "fieldset",
+
+ compact?: boolean,
+ hidden?: boolean, // по умолчанию false
+ disabled?: boolean, // по умолчанию false
+
+ css?: string,
+ width?: string | number | "content", // по умолчанию "content"
+ height?: string | number | "content", // по умолчанию "content"
+ padding?: string | number,
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // по умолчанию "start"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // по умолчанию "left"
+
+ rows?: object[],
+ cols?: object[],
+
+ $layout?: function
+}
+~~~
+
+Свойства `rows` и `cols` могут содержать массив объектов указанных элементов управления или вложенную структуру, приведённую ниже:
+
+~~~jsx
+{
+ css?: string,
+ width?: string | number | "content", // по умолчанию "content"
+ height?: string | number | "content", // по умолчанию "content"
+ padding?: string | number,
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // по умолчанию "start"
+ rows?: object[],
+ cols?: object[]
+}
+~~~
+
+## Описание {#description}
+
+### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"fieldset"`
+- `compact` - (опциональный) задаёт компактный режим, убирает отступы и рамку. По умолчанию *false*
+- `disabled` - (опциональный) определяет, включена (*false*) или отключена (*true*) группа элементов управления. По умолчанию *false*
+- `hidden` - (опциональный) определяет, скрыта ли группа элементов управления. По умолчанию *false*
+- `css` - (опциональный) имя класса(ов) CSS, применяемого к группе элементов управления
+- `width` - (опциональный) задаёт ширину группы элементов управления. По умолчанию `"content"`
+- `height` - (опциональный) задаёт высоту группы элементов управления. По умолчанию `"content"`
+- `padding` - (опциональный) задаёт отступ для содержимого внутри группы элементов управления
+- `align` - (опциональный) задаёт выравнивание элементов управления внутри группы. По умолчанию `"start"`
+- `label` - (опциональный) задаёт подпись для элемента управления
+- `labelAlignment` - (опциональный) определяет положение подписи: `"left"` | `"right"` | `"center"`. По умолчанию `"left"`
+- `rows` - (опциональный) располагает элементы управления внутри группы вертикально
+- `cols` - (опциональный) располагает элементы управления внутри группы горизонтально
+
+#### Служебные свойства и методы {#service-properties-and-methods}
+
+:::warning
+Обратите внимание: настоятельно рекомендуется не переопределять служебные свойства и методы для стандартных типов элементов управления, поскольку это может нарушить их работу.
+:::
+
+- `$layout` - (опциональный) - колбек, позволяющий задавать структуру элемента управления. Возвращает конфигурацию элемента управления Form [Fieldset](https://docs.dhtmlx.com/suite/form/fieldset/). Вызывается со следующим параметром:
+ - `object` - конфигурация элемента управления без служебных свойств
+
+## Пример {#example}
+
+~~~jsx {7-28} title="Создание fieldset с помощью свойства properties"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "fieldset",
+ label: "Task details",
+ rows: [
+ { type: "input", key: "name", label: "Task name" },
+ { type: "input", key: "id", label: "ID", readOnly: true },
+ {
+ align: "between",
+ cols: [
+ { type: "datepicker", key: "date_start", label: "Date start", width: "48%" },
+ { type: "datepicker", key: "date_end", label: "Date end", width: "48%" },
+ ]
+ },
+ {
+ type: "combo",
+ key: "responsible",
+ label: "Responsible",
+ placeholder: "Select responsible",
+ options: ["Henry Bennet", "Mike Frebel", "Greg Mash"]
+ }
+ ]
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+~~~jsx {10-33} title="Создание сложного элемента управления с помощью свойства controls"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ { type: "details" }
+ ]
+ },
+ controls: {
+ details: {
+ type: "fieldset",
+ label: "Task details",
+ rows: [
+ { type: "input", key: "name", label: "Task name" },
+ { type: "input", key: "id", label: "ID", readOnly: true },
+ {
+ align: "between",
+ cols: [
+ { type: "datepicker", key: "date_start", label: "Date start", width: "48%" },
+ { type: "datepicker", key: "date_end", label: "Date end", width: "48%" }
+ ]
+ },
+ {
+ type: "combo",
+ key: "responsible",
+ label: "Responsible",
+ placeholder: "Select responsible",
+ options: ["Henry Bennet", "Mike Frebel", "Greg Mash"]
+ }
+ ]
+ }
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/input.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/input.md
new file mode 100644
index 000000000..e246734ec
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/input.md
@@ -0,0 +1,134 @@
+---
+sidebar_label: Input
+title: Базовые элементы управления Editbar - Input
+description: Изучите элемент управления Input панели Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+# Input
+
+@short: Базовый элемент управления с полем ввода для набора текста.
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "input",
+ key?: string | string[],
+ wrap?: boolean, // по умолчанию false
+
+ css?: string,
+ disabled?: boolean, // по умолчанию false
+ hidden?: boolean, // по умолчанию false
+ height?: string | number | "content", // по умолчанию "content"
+ width?: string | number | "content", // по умолчанию "content"
+ padding?: string | number,
+
+ icon?: string,
+ inputType?: "text" | "password" | "number", // по умолчанию "text"
+ max?: number | string,
+ maxlength?: number | string,
+ min?: number | string,
+ minlength?: number | string,
+ placeholder?: string,
+ readOnly?: boolean, // по умолчанию false
+
+ // для `wrap:true` см. свойства label элемента Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // по умолчанию "top"
+
+ // служебные свойства и методы
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## Описание {#description}
+
+### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"input"`
+- `key` - (опциональный) имя указанного/изменяемого свойства или путь к нему в объекте элемента Diagram
+- `wrap` - (опциональный) позволяет отображать внешнюю обёртку. По умолчанию *false*
+- `css` - (опциональный) добавляет классы стилей к элементу управления
+- `disabled` - (опциональный) определяет, включён (*false*) или отключён (*true*) элемент управления. По умолчанию *false*
+- `hidden` - (опциональный) определяет, скрыт ли элемент управления. По умолчанию *false*
+- `height` - (опциональный) высота элемента управления. По умолчанию `"content"`
+- `width` - (опциональный) ширина элемента управления. По умолчанию `"content"`
+- `padding` - (опциональный) задаёт отступ между ячейкой и границей элемента управления Input
+- `icon` - (опциональный) класс CSS [иконки](https://docs.dhtmlx.com/suite/helpers/icon/) из используемого шрифта иконок
+- `inputType` - (опциональный) задаёт тип поля ввода: `"text"` | `"password"` | `"number"`. По умолчанию `"text"`
+Используйте значение `"password"`, чтобы задать поле для ввода пароля
+- `max` - (опциональный) - [максимальное значение, допустимое в поле ввода](https://docs.dhtmlx.com/suite/form/work_with_form/#minimal-and-maximal-values). Атрибут работает только с типом поля ввода: *"number"*
+- `maxlength` - (опциональный) максимальное [количество символов, допустимое в поле ввода](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters). Атрибут работает со следующими типами поля ввода: *"text", "password"*
+- `min` - (опциональный) [минимальное значение, допустимое в поле ввода](https://docs.dhtmlx.com/suite/form/work_with_form/#minimal-and-maximal-values). Атрибут работает только с типом поля ввода: *"number"*
+- `minlength` - (опциональный) минимальное [количество символов, допустимое в поле ввода](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters). Атрибут работает со следующими типами поля ввода: *"text", "password"*
+- `placeholder` - (опциональный) подсказка для поля ввода
+- `readOnly` - (опциональный) определяет, доступно ли поле ввода только для чтения. По умолчанию *false*
+- `label` - (опциональный) задаёт подпись для элемента управления
+- `labelWidth` - (опциональный) задаёт ширину подписи элемента управления
+- `labelPosition` - (опциональный) определяет положение подписи: `"left"` | `"top"`. По умолчанию `"top"`
+
+### Служебные свойства и методы {#service-properties-and-methods}
+
+:::warning
+Обратите внимание: настоятельно рекомендуется не переопределять служебные свойства и методы для стандартных типов элементов управления, поскольку это может нарушить их работу.
+:::
+
+- `$on` - (опциональный) - позволяет задать обработчик события. Объект содержит следующие свойства:
+ - `eventName` - колбек, который вызывается со следующими параметрами:
+ - `object` - объект со следующими свойствами:
+ - `control` - элемент управления Form [Input](https://docs.dhtmlx.com/suite/form/input/)
+ - `editor` - объект Diagram Editor
+ - `id` - идентификатор элемента Diagram
+ - `arguments` - (опциональный) - [исходные аргументы события](https://docs.dhtmlx.com/suite/category/form-input-events/)
+- `$handler` - (опциональный) - колбек, позволяющий обрабатывать действия при возникновении событий `change` и `input` элемента управления Form [Input](https://docs.dhtmlx.com/suite/form/input/) и события `change` DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `id` - идентификатор элемента Diagram
+ - `key` - имя указанного/изменяемого свойства или путь к нему в объекте элемента Diagram
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления Form [Input](https://docs.dhtmlx.com/suite/form/input/), на основе которого построен компонент
+ - `value` - новое значение элемента управления Form [Input](https://docs.dhtmlx.com/suite/form/input/)
+- `$setValue` - (опциональный) - колбек, позволяющий задавать значение элемента управления Form [Input](https://docs.dhtmlx.com/suite/form/input/) при инициализации элемента управления и при изменении значения в DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления Form [Input](https://docs.dhtmlx.com/suite/form/input/), на основе которого построен компонент
+ - `value` - значение элемента Diagram
+- `$layout` - (опциональный) - колбек, позволяющий задавать структуру элемента управления. Возвращает конфигурацию элемента управления Form [Input](https://docs.dhtmlx.com/suite/form/input/). Вызывается со следующим параметром:
+ - `object` - конфигурация элемента управления без служебных свойств
+
+## Пример {#example}
+
+~~~jsx {7-22}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "input",
+ inputType: "text",
+ key: "text",
+ label: "Input with a string value",
+ placeholder: "Enter a string value"
+ },
+ {
+ type: "input",
+ inputType: "number",
+ key: "x",
+ label: "Input with a number value",
+ placeholder: "Enter a number value",
+ min: 0,
+ max: 100,
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/radiogroup.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/radiogroup.md
new file mode 100644
index 000000000..ebf057e1e
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/radiogroup.md
@@ -0,0 +1,167 @@
+---
+sidebar_label: RadioGroup
+title: Базовые элементы управления Editbar - RadioGroup
+description: Изучите элемент управления RadioGroup панели Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+# RadioGroup
+
+@short: Базовый элемент управления для создания групп радиокнопок.
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "radiogroup",
+ options: {
+ rows?: object[],
+ cols?: object[],
+ css?: string,
+ height?: string | number | "content",
+ padding?: string | number,
+ width?: string | number | "content"
+ },
+ key?: string | string[],
+ wrap?: boolean, // по умолчанию false
+
+ disabled?: boolean, // по умолчанию false
+ hidden?: boolean, // по умолчанию false
+
+ css?: string,
+ height?: string | number | "content", // по умолчанию "content"
+ width?: string | number | "content", // по умолчанию "content"
+ padding?: string | number,
+
+ // для `wrap:true` см. свойства label элемента Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // по умолчанию "top"
+
+ // служебные свойства и методы
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+Конфигурационный объект радиокнопки внутри RadioGroup:
+
+~~~jsx
+{
+ value: string,
+ text?: string,
+
+ disabled?: boolean,
+ hidden?: boolean,
+ css?: string,
+ height?: string | number | "content",
+ width?: string | number | "content",
+ padding?: string | number
+}
+~~~
+
+## Описание {#description}
+
+### Свойства RadioGroup {#radiogroup-properties}
+
+#### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"radioGroup"`
+- `key` - (опциональный) имя указанного/изменяемого свойства или путь к нему в объекте элемента Diagram
+- `wrap` - (опциональный) позволяет отображать внешнюю обёртку. По умолчанию *false*
+- `options` - (обязательный) объект с параметрами RadioGroup. Объект может содержать следующие атрибуты:
+ - `rows` - (опциональный) располагает [радиокнопки](#radio-button-properties) внутри элемента управления RadioGroup вертикально
+ - `cols` - (опциональный) располагает [радиокнопки](#radio-button-properties) внутри элемента управления RadioGroup горизонтально
+ - `css` - (опциональный) добавляет классы стилей к RadioGroup
+ - `height` - (опциональный) высота RadioGroup
+ - `padding` - (опциональный) задаёт отступ между ячейкой и границей RadioGroup
+ - `width` - (опциональный) ширина RadioGroup
+- `disabled` - (опциональный) определяет, включён (*false*) или отключён (*true*) элемент управления. По умолчанию *false*
+- `hidden` - (логический) определяет, скрыт ли RadioGroup. По умолчанию *false*
+- `css` - (опциональный) добавляет классы стилей к элементу управления
+- `height` - (опциональный) высота элемента управления. По умолчанию `"content"`
+- `width` - (опциональный) ширина элемента управления. По умолчанию `"content"`
+- `padding` - (опциональный) задаёт отступ между ячейкой и границей элемента управления RadioGroup
+- `label` - (опциональный) задаёт подпись для элемента управления
+- `labelWidth` - (опциональный) задаёт ширину подписи элемента управления
+- `labelPosition` - (опциональный) определяет положение подписи: `"left"` | `"top"`. По умолчанию `"top"`
+
+#### Служебные свойства и методы {#service-properties-and-methods}
+
+:::warning
+Обратите внимание: настоятельно рекомендуется не переопределять служебные свойства и методы для стандартных типов элементов управления, поскольку это может нарушить их работу.
+:::
+
+- `$on` - (опциональный) - позволяет задать обработчик события. Объект содержит следующие свойства:
+ - `eventName` - колбек, который вызывается со следующими параметрами:
+ - `object` - объект со следующими свойствами:
+ - `control` - элемент управления Form [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/)
+ - `editor` - объект Diagram Editor
+ - `id` - идентификатор элемента Diagram
+ - `arguments` - (опциональный) - [исходные аргументы события](https://docs.dhtmlx.com/suite/category/form-radiogroup-events/)
+- `$handler` - (опциональный) - колбек, позволяющий обрабатывать действия при возникновении события `change` элемента управления Form [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) и события `change` DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `id` - идентификатор элемента Diagram
+ - `key` - имя указанного/изменяемого свойства или путь к нему в объекте элемента Diagram
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления Form [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/), на основе которого построен компонент
+ - `value` - новое значение элемента управления Form [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/)
+- `$setValue` - (опциональный) - колбек, позволяющий задавать значение элемента управления Form [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) при инициализации элемента управления и при изменении значения в DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления Form [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/), на основе которого построен компонент
+ - `value` - значение элемента Diagram
+- `$layout` - (опциональный) - колбек, позволяющий задавать структуру элемента управления. Возвращает конфигурацию элемента управления Form [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/). Вызывается со следующим параметром:
+ - `object` - конфигурация элемента управления без служебных свойств
+
+### Свойства радиокнопки {#radio-button-properties}
+
+- `value` - (обязательный) значение радиокнопки
+- `text` - (опциональный) текстовая подпись радиокнопки
+- `disabled` - (опциональный) определяет, включена (*false*) или отключена (*true*) радиокнопка. По умолчанию *false*
+- `hidden` - (опциональный) определяет, скрыта ли радиокнопка. По умолчанию *false*
+- `css` - (опциональный) добавляет классы стилей к элементу управления
+- `height` - (опциональный) высота элемента управления. По умолчанию `"content"`
+- `width` - (опциональный) ширина элемента управления. По умолчанию `"content"`
+- `padding` - (опциональный) задаёт отступ между ячейкой и границей радиокнопки
+
+## Пример {#example}
+
+~~~jsx {7-28}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "radioGroup",
+ key: "textAlign",
+ label: "Text align",
+ wrap: true,
+ options: {
+ rows: [
+ {
+ text: "Left",
+ value: "left"
+ },
+ {
+ text: "Center",
+ value: "center"
+ },
+ {
+ text: "Right",
+ value: "right"
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/select.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/select.md
new file mode 100644
index 000000000..570c2a847
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/select.md
@@ -0,0 +1,136 @@
+---
+sidebar_label: Select
+title: Базовые элементы управления Editbar - Select
+description: Изучите элемент управления Select панели Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+# Select
+
+@short: Базовый элемент управления, представляющий собой расширенное поле выбора с набором опций.
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "select",
+ options: (object | string)[],
+ key?: string | string[],
+ wrap?: boolean, // по умолчанию false
+
+ css?: string,
+ disabled?: boolean, // по умолчанию false
+ hidden?: boolean, // по умолчанию false
+ height?: string | number | "content", // по умолчанию "content"
+ width?: string | number | "content", // по умолчанию "content"
+ padding?: string | number,
+ icon?: string,
+
+ // для `wrap:true` см. свойства label элемента Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // по умолчанию "top"
+
+ // служебные свойства и методы
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+Конфигурационный объект опции внутри Select:
+
+~~~jsx
+{
+ value: string | number,
+ content: string,
+ disabled?: boolean
+}
+~~~
+
+## Описание {#description}
+
+### Свойства Select {#select-properties}
+
+#### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"select"`
+- `options` - (обязательный) массив опций Select, каждая опция может быть задана как *строка* или как *объект* с набором пар `key:value` - [атрибуты опций и их значения](#option-properties)
+- `key` - (опциональный) имя указанного/изменяемого свойства или путь к нему в объекте элемента Diagram
+- `wrap` - (опциональный) позволяет отображать внешнюю обёртку. По умолчанию *false*
+- `css` - (опциональный) добавляет классы стилей к элементу управления
+- `disabled` - (опциональный) определяет, включён (*false*) или отключён (*true*) элемент управления. По умолчанию *false*
+- `hidden` - (логический) определяет, скрыт ли Select. По умолчанию *false*
+- `height` - (опциональный) высота элемента управления. По умолчанию `"content"`
+- `width` - (опциональный) ширина элемента управления. По умолчанию `"content"`
+- `padding` - (опциональный) задаёт отступ между ячейкой и границей элемента управления Select
+- `icon` - (опциональный) класс CSS [иконки](https://docs.dhtmlx.com/suite/helpers/icon/) из используемого шрифта иконок
+- `label` - (опциональный) задаёт подпись для элемента управления
+- `labelWidth` - (опциональный) задаёт ширину подписи элемента управления
+- `labelPosition` - (опциональный) определяет положение подписи: `"left"` | `"top"`. По умолчанию `"top"`
+
+#### Служебные свойства и методы {#service-properties-and-methods}
+
+:::warning
+Обратите внимание: настоятельно рекомендуется не переопределять служебные свойства и методы для стандартных типов элементов управления, поскольку это может нарушить их работу.
+:::
+
+- `$on` - (опциональный) - позволяет задать обработчик события. Объект содержит следующие свойства:
+ - `eventName` - колбек, который вызывается со следующими параметрами:
+ - `object` - объект со следующими свойствами:
+ - `control` - элемент управления Form [Select](https://docs.dhtmlx.com/suite/form/select/)
+ - `editor` - объект Diagram Editor
+ - `id` - идентификатор элемента Diagram
+ - `arguments` - (опциональный) - [исходные аргументы события](https://docs.dhtmlx.com/suite/category/form-select-events/)
+- `$handler` - (опциональный) - колбек, позволяющий обрабатывать действия при возникновении события `change` элемента управления Form [Select](https://docs.dhtmlx.com/suite/form/select/) и события `change` DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `id` - идентификатор элемента Diagram
+ - `key` - имя указанного/изменяемого свойства или путь к нему в объекте элемента Diagram
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления Form [Select](https://docs.dhtmlx.com/suite/form/select/), на основе которого построен компонент
+ - `value` - новое значение элемента управления Form [Select](https://docs.dhtmlx.com/suite/form/select/)
+- `$setValue` - (опциональный) - колбек, позволяющий задавать значение элемента управления Form [Select](https://docs.dhtmlx.com/suite/form/select/) при инициализации элемента управления и при изменении значения в DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления Form [Select](https://docs.dhtmlx.com/suite/form/select/), на основе которого построен компонент
+ - `value` - значение элемента Diagram
+- `$layout` - (опциональный) - колбек, позволяющий задавать структуру элемента управления. Возвращает конфигурацию элемента управления Form [Select](https://docs.dhtmlx.com/suite/form/select/). Вызывается со следующим параметром:
+ - `object` - конфигурация элемента управления без служебных свойств
+
+### Свойства опции {#option-properties}
+
+- `value` - (обязательный) задаёт значение опции select
+- `content` - (обязательный) содержимое, отображаемое в опции select
+- `disabled` - (опциональный) определяет, включена (*false*) или отключена (*true*) опция. По умолчанию *false*
+
+## Пример {#example}
+
+~~~jsx {7-20}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "select",
+ label: "Position",
+ key: "position",
+ wrap: true,
+ options: [
+ "",
+ "Technical Director",
+ "Manager",
+ "QA Lead",
+ { value: 4, content: "Team Lead", disabled: true },
+ { value: 5, content: "Programmer" }
+ ]
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/slider.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/slider.md
new file mode 100644
index 000000000..d6e702058
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/slider.md
@@ -0,0 +1,136 @@
+---
+sidebar_label: Slider
+title: Основные элементы управления Editbar - Slider
+description: Изучите элемент управления Slider панели Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+# Slider
+
+@short: Базовый элемент управления для выбора числового значения путём перемещения ползунка вдоль шкалы с фиксированным набором значений.
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "slider",
+ key?: string | string[],
+ wrap?: boolean, // по умолчанию false
+
+ disabled?: boolean, // по умолчанию false
+ hidden?: boolean, // по умолчанию false
+ css?: string,
+ padding?: string | number,
+ height?: string | number | "content", // по умолчанию "content"
+ width?: string | number | "content", // по умолчанию "content"
+
+ inverse?: boolean, // по умолчанию false
+ majorTick?: number,
+ max?: number, // по умолчанию 100
+ min?: number, // по умолчанию 0
+ mode?: "vertical" | "horizontal", // по умолчанию "horizontal"
+ range?: boolean, // по умолчанию false
+ step?: number, // по умолчанию 1
+ tick?: number,
+ tickTemplate?: (position: number) => string,
+ tooltip?: boolean, // по умолчанию true
+
+ // для `wrap:true` ознакомьтесь со свойствами label компонента Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // по умолчанию "top"
+
+ // служебные свойства и методы
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## Описание {#description}
+
+### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"slider"`
+- `key` - (необязательный) имя задаваемого/изменяемого свойства или путь к нему в объекте элемента Diagram
+- `wrap` - (необязательный) позволяет отображать внешнюю обёртку. По умолчанию *false*
+- `disabled` - (необязательный) определяет, включён (*false*) или отключён (*true*) элемент управления. По умолчанию *false*
+- `hidden` - (необязательный) определяет, скрыт ли элемент управления. По умолчанию *false*
+- `css` - (необязательный) добавляет стилевые классы к элементу управления
+- `height` - (необязательный) высота элемента управления. По умолчанию `"content"`
+- `width` - (необязательный) ширина элемента управления. По умолчанию `"content"`
+- `padding` - (необязательный) задаёт отступ между ячейкой и границей элемента управления slider
+- `inverse` - (необязательный) включает/отключает инверсный режим слайдера. По умолчанию *false*
+- `majorTick` - (необязательный) задаёт интервал отображения числовых значений на шкале слайдера
+- `max` - (необязательный) максимальное значение слайдера. По умолчанию *100*
+- `min` - (необязательный) минимальное значение слайдера. По умолчанию *0*
+- `mode` - (необязательный) направление шкалы слайдера. По умолчанию `"horizontal"`
+- `range` - (необязательный) включает/отключает выбор диапазона значений на слайдере. По умолчанию *false*
+- `step` - (необязательный) шаг, с которым будет перемещаться ползунок слайдера. По умолчанию *1*
+- `tick` - (необязательный) задаёт интервал шагов для отображения шкалы слайдера
+- `tickTemplate` - (необязательный) задаёт шаблон для отображения значений на шкале
+- `tooltip` - (необязательный) включает всплывающие подсказки со значениями делений при наведении на ползунок слайдера. По умолчанию *true*
+
+### Служебные свойства и методы {#service-properties-and-methods}
+
+:::warning
+Обратите внимание, что мы настоятельно не рекомендуем переопределять служебные свойства и методы для стандартных типов элементов управления, так как это может нарушить их функциональность.
+:::
+
+- `$on` - (необязательный) - позволяет задать обработчик события. Объект содержит следующие свойства:
+ - `eventName` - колбек, который вызывается со следующими параметрами:
+ - `object` - объект со следующими свойствами:
+ - `control` - элемент управления [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form
+ - `editor` - объект Diagram Editor
+ - `id` - id элемента Diagram
+ - `arguments` - (необязательный) - [исходные аргументы события](https://docs.dhtmlx.com/suite/category/form-slider-events/)
+- `$handler` - (необязательный) - колбек, который позволяет обрабатывать действия при возникновении события `change` элемента управления [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form и события `change` DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `id` - id элемента Diagram
+ - `key` - имя задаваемого/изменяемого свойства или путь к нему в объекте элемента Diagram
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form, на основе которого построен компонент
+ - `value` - новое значение элемента управления [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form
+- `$setValue` - (необязательный) - колбек, который позволяет задавать значение элемента управления [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form при инициализации элемента управления и при изменении значения в DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form, на основе которого построен компонент
+ - `value` - значение элемента Diagram
+- `$layout` - (необязательный) - колбек, который позволяет задавать структуру элемента управления. Возвращает конфигурацию элемента управления [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form. Вызывается со следующим параметром:
+ - `object` - конфигурация элемента управления без служебных свойств
+
+## Пример {#example}
+
+~~~jsx {7-18}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $lineTitle: [
+ {
+ type: "slider",
+ key: "distance",
+ label: "Distance",
+ wrap: true,
+ min: 0,
+ max: 100,
+ step: 1,
+ tick: 5,
+ majorTick: 10,
+ tickTemplate: value => value
+ },
+ ]
+ }
+ }
+ }
+});
+editor.parse([
+ { "id": "shape_1", "type": "rectangle", "text": "shape" },
+ { "id": "shape_2","type": "rectangle", "text": "shape", "x": 400 },
+ { "id": "line", "type": "line", "from": "shape_1", "to": "shape_2" },
+ { "type": "lineTitle", "parent": "line", "text": "Title", "distance": 50 }
+]);
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/spacer.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/spacer.md
new file mode 100644
index 000000000..76d4530c2
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/spacer.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: Spacer
+title: Основные элементы управления Editbar - Spacer
+description: Изучите элемент управления Spacer панели Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+# Spacer
+
+@short: Базовый элемент управления для расположения и выравнивания элементов управления на панели Editbar за счёт занимаемого пространства.
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "spacer"
+}
+~~~
+
+## Описание {#description}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"spacer"`
+
+## Пример {#example}
+
+~~~jsx {10,12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ show: true,
+ properties: {
+ $shape: [
+ { type: "input", key: "name", label: "Task name" },
+ { type: "input", key: "id", label: "ID", readOnly: true },
+ { type: "spacer" },
+ { type: "button", text: "Send", full: true },
+ { type: "spacer" }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/textarea.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/textarea.md
new file mode 100644
index 000000000..c1448b967
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/textarea.md
@@ -0,0 +1,116 @@
+---
+sidebar_label: Textarea
+title: Основные элементы управления Editbar - Textarea
+description: Изучите элемент управления Textarea панели Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+# Textarea
+
+@short: Базовый элемент управления для ввода простого многострочного текста.
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "textarea",
+ key?: string | string[],
+ wrap?: boolean, // по умолчанию false
+
+ css?: string,
+ disabled?: boolean, // по умолчанию false
+ hidden?: boolean, // по умолчанию false
+ height?: string | number | "content", // по умолчанию "content"
+ width?: string | number | "content", // по умолчанию "content"
+ padding?: string | number,
+
+ maxlength?: number | string,
+ minlength?: number | string,
+ placeholder?: string,
+ readOnly?: boolean, // по умолчанию false
+
+ // для `wrap:true` ознакомьтесь со свойствами label компонента Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // по умолчанию "top"
+
+ // служебные свойства и методы
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## Описание {#description}
+
+### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"textarea"`
+- `key` - (необязательный) имя задаваемого/изменяемого свойства или путь к нему в объекте элемента Diagram
+- `wrap` - (необязательный) позволяет отображать внешнюю обёртку. По умолчанию *false*
+- `css` - (необязательный) добавляет стилевые классы к элементу управления
+- `hidden` - (необязательный) определяет, скрыт ли элемент управления. По умолчанию *false*
+- `disabled` - (необязательный) определяет, включён (*false*) или отключён (*true*) элемент управления. По умолчанию *false*
+- `width` - (необязательный) ширина элемента управления. По умолчанию `"content"`
+- `height` - (необязательный) высота элемента управления. По умолчанию `"content"`
+- `padding` - (необязательный) задаёт отступ между ячейкой и границей элемента управления Textarea
+- `maxlength` - (необязательный) максимальное [количество символов, разрешённое в textarea](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)
+- `minlength` - (необязательный) минимальное [количество символов, разрешённое в textarea](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)
+- `placeholder` - (необязательный) подсказка для textarea
+- `readOnly` - (необязательный) определяет, доступен ли textarea только для чтения. По умолчанию *false*
+- `label` - (необязательный) задаёт метку для элемента управления
+- `labelWidth` - (необязательный) задаёт ширину метки элемента управления
+- `labelPosition` - (необязательный) определяет положение метки: `"left"` | `"top"`. По умолчанию `"top"`
+
+### Служебные свойства и методы {#service-properties-and-methods}
+
+:::warning
+Обратите внимание, что мы настоятельно не рекомендуем переопределять служебные свойства и методы для стандартных типов элементов управления, так как это может нарушить их функциональность.
+:::
+
+- `$on` - (необязательный) - позволяет задать обработчик события. Объект содержит следующие свойства:
+ - `eventName` - колбек, который вызывается со следующими параметрами:
+ - `object` - объект со следующими свойствами:
+ - `control` - элемент управления [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form
+ - `editor` - объект Diagram Editor
+ - `id` - id элемента Diagram
+ - `arguments` - (необязательный) - [исходные аргументы события](https://docs.dhtmlx.com/suite/category/form-textarea-events/)
+- `$handler` - (необязательный) - колбек, который позволяет обрабатывать действия при возникновении событий `change` и `input` элемента управления [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form и события `change` DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `id` - id элемента Diagram
+ - `key` - имя задаваемого/изменяемого свойства или путь к нему в объекте элемента Diagram
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form, на основе которого построен компонент
+ - `value` - новое значение элемента управления [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form
+- `$setValue` - (необязательный) - колбек, который позволяет задавать значение элемента управления [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form при инициализации элемента управления и при изменении значения в DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form, на основе которого построен компонент
+ - `value` - значение элемента Diagram
+- `$layout` - (необязательный) - колбек, который позволяет задавать структуру элемента управления. Возвращает конфигурацию элемента управления [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form. Вызывается со следующим параметром:
+ - `object` - конфигурация элемента управления без служебных свойств
+
+## Пример {#example}
+
+~~~jsx {7-13}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "textarea",
+ key: "text",
+ label: "Textarea label",
+ height: 250,
+ wrap: true
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/timepicker.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/timepicker.md
new file mode 100644
index 000000000..0ae66a809
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/timepicker.md
@@ -0,0 +1,123 @@
+---
+sidebar_label: Timepicker
+title: Основные элементы управления Editbar - Timepicker
+description: Изучите элемент управления Timepicker панели Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+# Timepicker
+
+@short: Базовый элемент управления для выбора значения времени путём перемещения ползунков вдоль шкал или непосредственного ввода значений часов и минут в соответствующие поля.
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "timepicker",
+ key?: string | string[],
+ wrap?: boolean, // по умолчанию false
+
+ css?: string,
+ disabled?: boolean, // по умолчанию false
+ hidden?: boolean, // по умолчанию false
+ height?: string | number | "content", // по умолчанию "content"
+ width?: string | number | "content", // по умолчанию "content"
+ padding?: string | number,
+
+ controls?: boolean, // по умолчанию false
+ icon?: string,
+ placeholder?: string,
+ timeFormat?: 12 | 24, // по умолчанию 24
+ valueFormat?: "string" | "timeObject", // по умолчанию "string"
+
+ // для `wrap:true` ознакомьтесь со свойствами label компонента Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // по умолчанию "top"
+
+ // служебные свойства и методы
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## Описание {#description}
+
+### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"timepicker"`
+- `key` - (необязательный) имя задаваемого/изменяемого свойства или путь к нему в объекте элемента Diagram
+- `wrap` - (необязательный) позволяет отображать внешнюю обёртку. По умолчанию *false*
+- `css` - (необязательный) добавляет стилевые классы к элементу управления
+- `hidden` - (необязательный) определяет, скрыт ли элемент управления. По умолчанию *false*
+- `disabled` - (необязательный) определяет, включён (*false*) или отключён (*true*) элемент управления. По умолчанию *false*
+- `width` - (необязательный) ширина элемента управления. По умолчанию `"content"`
+- `height` - (необязательный) высота элемента управления. По умолчанию `"content"`
+- `padding` - (необязательный) задаёт отступ между ячейкой и границей элемента управления Timepicker
+- `controls` - (необязательный) определяет, оснащён ли timepicker кнопками Close и Save. По умолчанию *false*
+- `icon` - (необязательный) CSS-класс иконки из используемого шрифта иконок
+- `placeholder` - (необязательный) подсказка для поля ввода
+- `timeFormat` - (необязательный) определяет, какой формат часов активирован: 12-часовой или 24-часовой. Установите значение *12* или *24* соответственно. По умолчанию *24*
+- `valueFormat` - (необязательный) определяет формат значения, применяемого при работе с событиями элемента управления timepicker: `"string"` | `"timeObject"`. По умолчанию `"string"`
+- `label` - (необязательный) задаёт метку для элемента управления
+- `labelWidth` - (необязательный) задаёт ширину метки элемента управления
+- `labelPosition` - (необязательный) определяет положение метки: `"left"` | `"top"`. По умолчанию `"top"`
+
+### Служебные свойства и методы {#service-properties-and-methods}
+
+:::warning
+Обратите внимание, что мы настоятельно не рекомендуем переопределять служебные свойства и методы для стандартных типов элементов управления, так как это может нарушить их функциональность.
+:::
+
+- `$on` - (необязательный) - позволяет задать обработчик события. Объект содержит следующие свойства:
+ - `eventName` - колбек, который вызывается со следующими параметрами:
+ - `object` - объект со следующими свойствами:
+ - `control` - элемент управления [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form
+ - `editor` - объект Diagram Editor
+ - `id` - id элемента Diagram
+ - `arguments` - (необязательный) - [исходные аргументы события](https://docs.dhtmlx.com/suite/category/form-timepicker-events/)
+- `$handler` - (необязательный) - колбек, который позволяет обрабатывать действия при возникновении событий `change` и `input` элемента управления [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form и события `change` DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `id` - id элемента Diagram
+ - `key` - имя задаваемого/изменяемого свойства или путь к нему в объекте элемента Diagram
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form, на основе которого построен компонент
+ - `value` - новое значение элемента управления [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form
+- `$setValue` - (необязательный) - колбек, который позволяет задавать значение элемента управления [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form при инициализации элемента управления и при изменении значения в DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form, на основе которого построен компонент
+ - `value` - значение элемента Diagram
+- `$layout` - (необязательный) - колбек, который позволяет задавать структуру элемента управления. Возвращает конфигурацию элемента управления [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form. Вызывается со следующим параметром:
+ - `object` - конфигурация элемента управления без служебных свойств
+
+## Пример {#example}
+
+~~~jsx {8-13}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ show: true,
+ properties: {
+ $shape: [
+ {
+ type: "timepicker",
+ key: "time",
+ label: "Select time",
+ controls: true
+ }
+ ]
+ }
+ }
+ }
+});
+editor.parse([
+ { "id": "shape_1" },
+ { "id": "shape_2", "parent": "shape_1", "time": "14:00" },
+ { "id": "shape_3", "parent": "shape_1", "time": "18:30" }
+]);
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/toggle.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/toggle.md
new file mode 100644
index 000000000..e87c39c39
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/toggle.md
@@ -0,0 +1,134 @@
+---
+sidebar_label: Toggle
+title: Основные элементы управления Editbar - Toggle
+description: Изучите элемент управления Toggle панели Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+# Toggle
+
+@short: Базовый элемент управления, представляющий собой специальную кнопку, которая может менять своё состояние с нажатого на ненажатое при клике.
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "toggle",
+ key?: string | string[],
+
+ hidden?: boolean, // по умолчанию false
+ disabled?: boolean, // по умолчанию false
+ full?: boolean, // по умолчанию false
+
+ text?: string,
+ icon?: string,
+ offText?: string,
+ offIcon?: string,
+ value?: string | number,
+
+ css?: string,
+ width?: string | number | "content", // по умолчанию "content"
+ height?: string | number | "content", // по умолчанию "content"
+ padding?: string | number,
+
+ // служебные свойства и методы
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+Элемент управления можно использовать как со значением типа *boolean*, так и со значением типа *string*, если задано свойство `value`. Свойство `value` необходимо для присвоения заданного значения в качестве значения применяемого свойства. [Смотрите пример ниже](#example), чтобы понять принцип работы.
+
+## Описание {#description}
+
+### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"toggle"`
+- `key` - (необязательный) имя задаваемого/изменяемого свойства или путь к нему в объекте элемента Diagram
+- `hidden` - (необязательный) определяет, скрыт ли элемент управления. По умолчанию *false*
+- `disabled` - (необязательный) определяет, включён (*false*) или отключён (*true*) элемент управления. По умолчанию *false*
+- `full` - (необязательный) определяет, будет ли toggle растянут на ширину, заданную свойством `width`. По умолчанию *false*
+- `text` - (необязательный) задаёт текст внутри toggle. При инициализации вместе со свойством `offText` указанный текст будет отображаться в выбранном (нажатом) состоянии
+- `offText` - (необязательный) задаёт текст, который будет отображаться в невыбранном (ненажатом) состоянии toggle
+- `icon` - (необязательный) задаёт CSS-класс иконки, отображаемой внутри toggle. При инициализации вместе со свойством `offIcon` указанные CSS-классы иконок будут отображаться в выбранном (нажатом) состоянии toggle
+- `offIcon` - (необязательный) задаёт CSS-класс иконки, которая будет отображаться в невыбранном (ненажатом) состоянии toggle
+- `value` - (необязательный) задаёт значение в выбранном (нажатом) состоянии. Если не определено, элемент управления используется со значением типа *boolean*
+- `css` - (необязательный) добавляет стилевые классы к элементу управления
+- `width` - (необязательный) ширина элемента управления. По умолчанию `"content"`
+- `height` - (необязательный) высота элемента управления. По умолчанию `"content"`
+- `padding` - (необязательный) задаёт отступ между ячейкой и границей элемента управления Toggle
+
+### Служебные свойства и методы {#service-properties-and-methods}
+
+:::warning
+Обратите внимание, что мы настоятельно не рекомендуем переопределять служебные свойства и методы для стандартных типов элементов управления, так как это может нарушить их функциональность.
+:::
+
+- `$on` - (необязательный) - позволяет задать обработчик события. Объект содержит следующие свойства:
+ - `eventName` - колбек, который вызывается со следующими параметрами:
+ - `object` - объект со следующими свойствами:
+ - `control` - элемент управления [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form
+ - `editor` - объект Diagram Editor
+ - `id` - id элемента Diagram
+ - `arguments` - (необязательный) - [исходные аргументы события](https://docs.dhtmlx.com/suite/category/form-toggle-events/)
+- `$handler` - (необязательный) - колбек, который позволяет обрабатывать действия при возникновении события `change` элемента управления [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form и события `change` DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `id` - id элемента Diagram
+ - `key` - имя задаваемого/изменяемого свойства или путь к нему в объекте элемента Diagram
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form, на основе которого построен компонент
+ - `value` - новое значение элемента управления [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form
+- `$setValue` - (необязательный) - колбек, который позволяет задавать значение элемента управления [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form при инициализации элемента управления и при изменении значения в DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form, на основе которого построен компонент
+ - `value` - значение элемента Diagram
+- `$layout` - (необязательный) - колбек, который позволяет задавать структуру элемента управления. Возвращает конфигурацию элемента управления [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form. Вызывается со следующим параметром:
+ - `object` - конфигурация элемента управления без служебных свойств
+
+## Пример {#example}
+
+~~~jsx {7-14} title="Применение значения типа boolean для toggle"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "toggle",
+ key: ["header", "enable"],
+ icon: "dxi dxi-eye",
+ offIcon: "dxi dxi-eye-off",
+ text: "Visible",
+ offText: "Invisible"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+~~~jsx {7-12} title="Присвоение заданного значения в качестве значения применяемого свойства"
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "toggle",
+ key: "fontStyle",
+ value: "italic",
+ icon: "dxi dxi-format-italic"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/togglegroup.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/togglegroup.md
new file mode 100644
index 000000000..a8a3e3309
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/togglegroup.md
@@ -0,0 +1,151 @@
+---
+sidebar_label: ToggleGroup
+title: Editbar Basic Controls - ToggleGroup
+description: Вы можете изучить элемент управления ToggleGroup компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, опробуйте примеры кода и live-демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+# ToggleGroup
+
+@short: Базовый элемент управления для создания групп кнопок-переключателей.
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "toggleGroup",
+ options: object[],
+ key?: string | string[],
+
+ full?: boolean, // по умолчанию false
+ gap?: number, // по умолчанию 0
+ hidden?: boolean, // по умолчанию false
+ disabled?: boolean, // по умолчанию false
+
+ css?: string,
+ width?: string | number | "content", // по умолчанию "content"
+ height?: string | number | "content", // по умолчанию "content"
+ padding?: string | number,
+
+ // служебные свойства и методы
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+Объект конфигурации Toggle внутри ToggleGroup:
+
+~~~jsx
+{
+ id?: string,
+ hidden?: boolean,
+ disabled?: boolean,
+ full?: boolean,
+ text?: string,
+ icon?: string,
+ offText?: string,
+ offIcon?: string,
+ value?: string | number
+}
+~~~
+
+Объекты с конфигурацией `toggle` внутри элемента управления можно использовать как со значением типа *boolean*, так и со значением типа *string*, если указано свойство `value`. Свойство `value` необходимо для назначения заданного значения в качестве значения применяемого свойства. [Смотрите пример ниже](#example), чтобы разобраться в этом.
+
+## Описание {#description}
+
+### Свойства ToggleGroup {#togglegroup-properties}
+
+#### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"toggleGroup"`
+- `key` - (опционально) имя указанного/изменяемого свойства или путь к нему в объекте элемента Diagram
+- `options` - (обязательный) массив опций ToggleGroup, каждая опция задаётся в виде *объекта* с набором пар `key:value` - [атрибуты опций и их значения](#toggle-properties)
+- `hidden` - (опционально) определяет, скрыт ли ToggleGroup. По умолчанию - *false*
+- `disabled` - (опционально) определяет, включён (*false*) или отключён (*true*) элемент управления. По умолчанию - *false*
+- `full` - (опционально) определяет, будет ли ToggleGroup растянут до ширины, указанной свойством `width`. По умолчанию - *false*
+- `gap` - (опционально) задаёт отступ между элементами (кнопками) опции. По умолчанию - *0*
+- `css` - (опционально) добавляет CSS-классы стилей к элементу управления
+- `width` - (опционально) ширина элемента управления. По умолчанию - `"content"`
+- `height` - (опционально) высота элемента управления. По умолчанию - `"content"`
+- `padding` - (опционально) задаёт отступ между ячейкой и границей элемента управления ToggleGroup
+
+#### Служебные свойства и методы {#service-properties-and-methods}
+
+:::warning
+Обратите внимание, что мы настоятельно рекомендуем не переопределять служебные свойства и методы для стандартных типов элементов управления, так как это может нарушить их работу.
+:::
+
+- `$on` - (опционально) - позволяет задать обработчик события. Объект содержит следующие свойства:
+ - `eventName` - колбек, который вызывается со следующими параметрами:
+ - `object` - объект со следующими свойствами:
+ - `control` - элемент управления [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) компонента Form
+ - `editor` - объект Diagram Editor
+ - `id` - идентификатор элемента Diagram
+ - `arguments` - (опционально) - [исходные аргументы события](https://docs.dhtmlx.com/suite/category/form-togglegroup-events/)
+- `$handler` - (опционально) - колбек, который позволяет обрабатывать действия при возникновении события `change` элемента управления [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) компонента Form и события `change` DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `id` - идентификатор элемента Diagram
+ - `key` - имя указанного/изменяемого свойства или путь к нему в объекте элемента Diagram
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) компонента Form, на основе которого построен компонент
+ - `value` - новое значение элемента управления [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) компонента Form
+- `$setValue` - (опционально) - колбек, который позволяет задавать значение элемента управления [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) компонента Form при инициализации элемента управления и при изменении значения в DataCollection. Вызывается со следующим параметром:
+ - `object` - объект со следующими свойствами:
+ - `editor` - объект Diagram Editor
+ - `control` - объект элемента управления [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) компонента Form, на основе которого построен компонент
+ - `value` - значение элемента Diagram
+- `$layout` - (опционально) - колбек, который позволяет задавать структуру элемента управления. Возвращает конфигурацию элемента управления [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) компонента Form. Вызывается со следующим параметром:
+ - `object` - конфигурация элемента управления без служебных свойств
+
+### Свойства Toggle {#toggle-properties}
+
+- `id` - (опционально) идентификатор элемента управления, генерируется автоматически, если не задан
+- `hidden` - (опционально) определяет, скрыта ли опция. По умолчанию - *false*
+- `disabled` - (опционально) определяет, включена (*false*) или отключена (*true*) опция. По умолчанию - *false*
+- `full` - (опционально) определяет, будет ли опция растянута до ширины, указанной свойством `width`. По умолчанию - *false*
+- `text` - (опционально) задаёт текст внутри опции. Если инициализирован вместе со свойством `offText`, указанный текст будет отображаться в выбранном (нажатом) состоянии
+- `icon` - (опционально) задаёт CSS-класс иконки, отображаемой внутри опции. Если инициализирован вместе со свойством `offIcon`, указанные CSS-классы иконок будут отображаться в выбранном (нажатом) состоянии опции
+- `offText` - (опционально) задаёт текст, который будет отображаться в невыбранном (ненажатом) состоянии опции
+- `offIcon` - (опционально) задаёт CSS-класс иконки, которая будет отображаться в невыбранном (ненажатом) состоянии опции
+- `value` - (опционально) задаёт значение в выбранном (нажатом) состоянии. Если не определено, опция используется со значением типа *boolean*
+
+## Пример {#example}
+
+~~~jsx {7-28}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "toggleGroup",
+ key: "textAlign",
+ gap: 4,
+ $on: {
+ beforeChange: (spec, values) => !Object.values(values).every(i => !i),
+ },
+ options: [
+ {
+ icon: "dxi dxi-format-align-left",
+ value: "left"
+ },
+ {
+ icon: "dxi dxi-format-align-center",
+ value: "center"
+ },
+ {
+ icon: "dxi dxi-format-align-right",
+ value: "right"
+ }
+ ]
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls_overview.md
new file mode 100644
index 000000000..15626aa4c
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls_overview.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: Базовые элементы управления
+title: Гайды по Editbar - Базовые элементы управления
+description: Узнайте больше о базовых элементах управления Editbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите гайды для разработчиков и справочник API, попробуйте примеры кода и демонстрации в реальном времени, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# Базовые элементы управления {#basic-controls}
+
+Базовые элементы управления Editbar можно использовать самостоятельно или создавать на их основе сложные элементы управления. Ниже приведён список базовых элементов управления. Перейдите в соответствующий раздел, чтобы ознакомиться с подробным описанием свойств конфигурации каждого элемента управления.
+
+:::info
+Подробнее о настройке читайте в гайде [Конфигурация Editbar](guides/diagram_editor/editbar.md)!
+:::
+
+## Обзор базовых элементов управления Editbar {#overview-of-editbar-basic-controls}
+
+| Название | Описание |
+| :-------------------------------------------------------------- | :------------------------------------------------------------------- |
+| [](api/diagram_editor/editbar/basic_controls/avatar.md) | @getshort(api/diagram_editor/editbar/basic_controls/avatar.md) |
+| [](api/diagram_editor/editbar/basic_controls/button.md) | @getshort(api/diagram_editor/editbar/basic_controls/button.md) |
+| [](api/diagram_editor/editbar/basic_controls/checkbox.md) | @getshort(api/diagram_editor/editbar/basic_controls/checkbox.md) |
+| [](api/diagram_editor/editbar/basic_controls/checkboxgroup.md) | @getshort(api/diagram_editor/editbar/basic_controls/checkboxgroup.md)|
+| [](api/diagram_editor/editbar/basic_controls/colorpicker.md) | @getshort(api/diagram_editor/editbar/basic_controls/colorpicker.md) |
+| [](api/diagram_editor/editbar/basic_controls/combo.md) | @getshort(api/diagram_editor/editbar/basic_controls/combo.md) |
+| [](api/diagram_editor/editbar/basic_controls/container.md) | @getshort(api/diagram_editor/editbar/basic_controls/container.md) |
+| [](api/diagram_editor/editbar/basic_controls/datepicker.md) | @getshort(api/diagram_editor/editbar/basic_controls/datepicker.md) |
+| [](api/diagram_editor/editbar/basic_controls/fieldset.md) | @getshort(api/diagram_editor/editbar/basic_controls/fieldset.md) |
+| [](api/diagram_editor/editbar/basic_controls/input.md) | @getshort(api/diagram_editor/editbar/basic_controls/input.md) |
+| [](api/diagram_editor/editbar/basic_controls/radiogroup.md) | @getshort(api/diagram_editor/editbar/basic_controls/radiogroup.md) |
+| [](api/diagram_editor/editbar/basic_controls/select.md) | @getshort(api/diagram_editor/editbar/basic_controls/select.md) |
+| [](api/diagram_editor/editbar/basic_controls/slider.md) | @getshort(api/diagram_editor/editbar/basic_controls/slider.md) |
+| [](api/diagram_editor/editbar/basic_controls/spacer.md) | @getshort(api/diagram_editor/editbar/basic_controls/spacer.md) |
+| [](api/diagram_editor/editbar/basic_controls/textarea.md) | @getshort(api/diagram_editor/editbar/basic_controls/textarea.md) |
+| [](api/diagram_editor/editbar/basic_controls/timepicker.md) | @getshort(api/diagram_editor/editbar/basic_controls/timepicker.md) |
+| [](api/diagram_editor/editbar/basic_controls/toggle.md) | @getshort(api/diagram_editor/editbar/basic_controls/toggle.md) |
+| [](api/diagram_editor/editbar/basic_controls/togglegroup.md) | @getshort(api/diagram_editor/editbar/basic_controls/togglegroup.md) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/arrange.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/arrange.md
new file mode 100644
index 000000000..7846d33ab
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/arrange.md
@@ -0,0 +1,92 @@
+---
+sidebar_label: Arrange
+title: Editbar Complex Controls - Arrange
+description: Вы можете изучить элемент управления Arrange компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, опробуйте примеры кода и live-демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Arrange
+
+@short: Комплексный элемент управления для редактирования ширины, высоты, угла поворота, координат x и y элемента Diagram
+
+
+
+:::info
+Элемент управления **Arrange** доступен для всех элементов (кроме элементов `line` и `lineTitle`) в режиме *default* редактора Diagram.
+:::
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "arrange",
+
+ hidden?: boolean, // по умолчанию false
+ disabled?: boolean, // по умолчанию false
+
+ css?: string,
+ width?: string | number | "content", // по умолчанию "content"
+ height?: string | number | "content", // по умолчанию "content"
+ padding?: string | number, // по умолчанию "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // по умолчанию "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // по умолчанию "start"
+ compact?: boolean, // по умолчанию false
+
+ // служебные свойства
+ $properties?: object
+}
+~~~
+
+## Описание {#description}
+
+### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"arrange"`
+- `hidden` - (опционально) определяет, скрыт ли элемент управления. По умолчанию - *false*
+- `disabled` - (опционально) определяет, включён (*false*) или отключён (*true*) элемент управления
+- `css` - (опционально) добавляет CSS-классы стилей к элементу управления
+- `width` - (опционально) ширина элемента управления. По умолчанию - `"content"`
+- `height` - (опционально) высота элемента управления. По умолчанию - `"content"`
+- `padding` - (опционально) задаёт отступ для содержимого внутри группы элементов управления. По умолчанию - *"0 16px"*
+- `label` - (опционально) задаёт метку для элемента управления
+- `labelAlignment` - (опционально) определяет положение метки элемента управления. По умолчанию - `"left"`
+- `align` - (опционально) задаёт выравнивание элементов управления внутри группы элементов управления. По умолчанию - `"start"`
+- `compact` - (опционально) задаёт компактный режим, убирает отступы и рамку. По умолчанию - *false*
+
+### Служебные свойства {#service-properties}
+
+- `$properties` - (опционально) позволяет переопределить значения [базовых элементов управления](api/diagram_editor/editbar/basic_controls_overview.md) внутри комплексного элемента управления. Вы можете настроить следующие элементы **Arrange** на основе базовых элементов управления:
+ - `x` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) задаёт положение элемента Diagram по оси x
+ - `y` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) задаёт положение элемента Diagram по оси y
+ - `width` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) задаёт ширину элемента Diagram (px)
+ - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) задаёт высоту элемента Diagram (px)
+ - `angle` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) задаёт угол поворота элемента Diagram
+
+## Пример {#example}
+
+~~~jsx {7-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ rectangle: [
+ {
+ type: "arrange",
+ disabled: true,
+ $properties: {
+ angle: { hidden: true } // конфигурация базового элемента управления "input"
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/border.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/border.md
new file mode 100644
index 000000000..2a97dcd1f
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/border.md
@@ -0,0 +1,90 @@
+---
+sidebar_label: Border
+title: Editbar Complex Controls - Border
+description: Вы можете изучить элемент управления Border компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, опробуйте примеры кода и live-демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Border
+
+@short: Комплексный элемент управления для отображения и изменения границ элемента Diagram
+
+
+
+:::info
+Элемент управления **Border** недоступен для элемента `lineTitle`.
+:::
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "border",
+
+ hidden?: boolean, // по умолчанию false
+ disabled?: boolean, // по умолчанию false
+
+ css?: string,
+ width?: string | number | "content", // по умолчанию "content"
+ height?: string | number | "content", // по умолчанию "content"
+ padding?: string | number, // по умолчанию "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // по умолчанию "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // по умолчанию "between"
+ compact?: boolean, // по умолчанию false
+
+ // служебные свойства
+ $properties?: object
+}
+~~~
+
+## Описание {#description}
+
+### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"border"`
+- `hidden` - (опционально) определяет, скрыт ли элемент управления. По умолчанию - *false*
+- `disabled` - (опционально) определяет, включён (*false*) или отключён (*true*) элемент управления. По умолчанию - *false*
+- `css` - (опционально) добавляет CSS-классы стилей к элементу управления
+- `width` - (опционально) ширина элемента управления. По умолчанию - `"content"`
+- `height` - (опционально) высота элемента управления. По умолчанию - `"content"`
+- `padding` - (опционально) задаёт отступ для содержимого внутри группы элементов управления. По умолчанию - *"0 16px"*
+- `label` - (опционально) задаёт метку для элемента управления
+- `labelAlignment` - (опционально) определяет положение метки. По умолчанию - `"left"`
+- `align` - (опционально) задаёт выравнивание элементов управления внутри группы элементов управления. По умолчанию - `"between"`
+- `compact` - (опционально) задаёт компактный режим, убирает отступы и рамку. По умолчанию - *false*
+
+### Служебные свойства {#service-properties}
+
+- `$properties` - (опционально) позволяет переопределить значения [базовых элементов управления](api/diagram_editor/editbar/basic_controls_overview.md) внутри комплексного элемента управления. Вы можете настроить следующие элементы **Border** на основе базовых элементов управления:
+ - `stroke` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) задаёт цвет границы
+ - `strokeType` - ([combo](api/diagram_editor/editbar/basic_controls/combo.md)) задаёт тип границы
+ - `strokeWidth` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) задаёт ширину границы
+
+## Пример {#example}
+
+~~~jsx {7-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ rectangle: [
+ {
+ type: "border",
+ label: "Border style",
+ $properties: {
+ strokeType: { hidden: true }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/gridstep.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/gridstep.md
new file mode 100644
index 000000000..f4dfcef44
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/gridstep.md
@@ -0,0 +1,73 @@
+---
+sidebar_label: Grid step
+title: Editbar Complex Controls - Grid step
+description: Вы можете изучить элемент управления Grid step компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, опробуйте примеры кода и live-демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Grid step
+
+@short: Комплексный элемент управления для отображения и изменения шага сетки редактора Diagram
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "gridStep",
+
+ hidden?: boolean, // по умолчанию false
+ disabled?: boolean, // по умолчанию false
+
+ css?: string,
+ width?: string | number | "content", // по умолчанию "content"
+ height?: string | number | "content", // по умолчанию "content"
+ padding?: string | number, // по умолчанию "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // по умолчанию "left"
+ readOnly?: boolean, // по умолчанию false
+ wrap?: boolean // по умолчанию true
+}
+~~~
+
+## Описание {#description}
+
+### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"gridStep"`
+- `hidden` - (опционально) определяет, скрыт ли элемент управления. По умолчанию - *false*
+- `disabled` - (опционально) определяет, включён (*false*) или отключён (*true*) элемент управления. По умолчанию - *false*
+- `css` - (опционально) добавляет CSS-классы стилей к элементу управления
+- `width` - (опционально) ширина элемента управления. По умолчанию - `"content"`
+- `height` - (опционально) высота элемента управления. По умолчанию - `"content"`
+- `padding` - (опционально) задаёт отступ для содержимого внутри группы элементов управления. По умолчанию - *"0 16px"*
+- `label` - (опционально) задаёт метку для элемента управления
+- `labelAlignment` - (опционально) определяет положение метки. По умолчанию - `"left"`
+- `readOnly` - (опционально) задаёт режим "только для чтения" для элемента управления. По умолчанию - *false*
+- `wrap` - (опционально) позволяет отображать внешнюю обёртку. По умолчанию - *true*
+
+## Пример {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $default: [
+ {
+ type: "gridStep",
+ readOnly: true
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/header.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/header.md
new file mode 100644
index 000000000..c9aab192e
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/header.md
@@ -0,0 +1,77 @@
+---
+sidebar_label: Header
+title: Editbar Complex Controls - Header
+description: Вы можете изучить элемент управления Header компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, опробуйте примеры кода и live-демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Header
+
+@short: Комплексный элемент управления для отображения и изменения заголовка элементов `"group"` и `"swimlane"` редактора Diagram
+
+
+
+:::info
+Элемент управления **Header** доступен только для элементов `group` и `swimlane` в режиме *default* редактора Diagram.
+:::
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "header",
+
+ hidden?: boolean, // по умолчанию false
+ disabled?: boolean, // по умолчанию false
+
+ css?: string,
+ width?: string | number | "content", // по умолчанию "content"
+ height?: string | number | "content", // по умолчанию "content"
+ padding?: string | number, // по умолчанию "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // по умолчанию "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // по умолчанию "start"
+ compact?: boolean // по умолчанию false
+}
+~~~
+
+## Описание {#description}
+
+### Основные свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"header"`
+- `hidden` - (опционально) определяет, скрыт ли элемент управления. По умолчанию - *false*
+- `disabled` - (опционально) определяет, включён (*false*) или отключён (*true*) элемент управления. По умолчанию - *false*
+- `css` - (опционально) добавляет CSS-классы стилей к элементу управления
+- `width` - (опционально) ширина элемента управления. По умолчанию - `"content"`
+- `height` - (опционально) высота элемента управления. По умолчанию - `"content"`
+- `padding` - (опционально) задаёт отступ для содержимого внутри группы элементов управления. По умолчанию - *"0 16px"*
+- `label` - (опционально) задаёт метку для элемента управления
+- `labelAlignment` - (опционально) определяет положение метки. По умолчанию - `"left"`
+- `align` - (опционально) задаёт выравнивание элементов управления внутри группы элементов управления. По умолчанию - `"start"`
+- `compact` - (опционально) задаёт компактный режим, убирает отступы и рамки. По умолчанию - *false*
+
+## Пример {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "header",
+ label: "Group header style"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headercommon.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headercommon.md
new file mode 100644
index 000000000..4ff1f2263
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headercommon.md
@@ -0,0 +1,90 @@
+---
+sidebar_label: Header common
+title: Сложные элементы управления Editbar - Header common
+description: Вы можете изучить элемент управления Header common компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Header common
+
+@short: Комплексный элемент управления для изменения видимости, цвета и высоты заголовка группы
+
+
+
+:::info
+Элемент управления **Header common** доступен только для элементов `group` и `swimlane` в режиме *default* в Diagram Editor.
+:::
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "headerCommon",
+
+ hidden?: boolean, // false по умолчанию
+ disabled?: boolean, // false по умолчанию
+
+ css?: string,
+ width?: string | number | "content", // "content" по умолчанию
+ height?: string | number | "content", // "content" по умолчанию
+ padding?: string | number, // "0 16px" по умолчанию
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // "left" по умолчанию
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // "between" по умолчанию
+ compact?: boolean, // false по умолчанию
+
+ // Служебные свойства
+ $properties?: object
+}
+~~~
+
+## Описание {#description}
+
+### Базовые свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"headerCommon"`
+- `hidden` - (опциональный) определяет, скрыт ли элемент управления. *false* по умолчанию
+- `disabled` - (опциональный) определяет, включен (*false*) или отключен (*true*) элемент управления. *false* по умолчанию
+- `css` - (опциональный) добавляет CSS-классы к элементу управления
+- `width` - (опциональный) ширина элемента управления. `"content"` по умолчанию
+- `height` - (опциональный) высота элемента управления. `"content"` по умолчанию
+- `padding` - (опциональный) задаёт отступы для содержимого внутри группы элементов управления. *"0 16px"* по умолчанию
+- `label` - (опциональный) задаёт подпись для элемента управления
+- `labelAlignment` - (опциональный) определяет положение подписи. `"left"` по умолчанию
+- `align` - (опциональный) задаёт выравнивание элементов управления внутри группы. `"between"` по умолчанию
+- `compact` - (опциональный) задаёт компактный режим, убирает отступы и рамку. *false* по умолчанию
+
+### Служебные свойства {#service-properties}
+
+- `$properties` - (опциональный) позволяет переопределить значения [базовых элементов управления](api/diagram_editor/editbar/basic_controls_overview.md) внутри сложного элемента управления. Вы можете настроить следующие элементы **Header common** на основе базовых элементов управления:
+ - `enable` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) переключает видимость заголовка группы
+ - `fill` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) задаёт цвет фона заголовка группы
+ - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) задаёт высоту заголовка группы (px)
+
+## Пример {#example}
+
+~~~jsx {6-14}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "headerCommon",
+ label: "Header common",
+ $properties: {
+ fill: { key: ["header", "fill"] }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headerposition.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headerposition.md
new file mode 100644
index 000000000..7c7c27415
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headerposition.md
@@ -0,0 +1,99 @@
+---
+sidebar_label: Header position
+title: Сложные элементы управления Editbar - Header position
+description: Вы можете изучить элемент управления Header position компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Header position
+
+@short: Комплексный элемент управления для изменения положения заголовка группы
+
+
+
+:::info
+Элемент управления **Header position** доступен только для элементов `group` и `swimlane` в режиме *default* в Diagram Editor.
+:::
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "headerPosition",
+
+ hidden?: boolean, // false по умолчанию
+ disabled?: boolean, // false по умолчанию
+
+ css?: string,
+ width?: string | number | "content", // "content" по умолчанию
+ height?: string | number | "content", // "content" по умолчанию
+ padding?: string | number, // "0 16px" по умолчанию
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // "left" по умолчанию
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // "start" по умолчанию
+ compact?: boolean, // false по умолчанию
+
+ // Служебные свойства
+ $properties?: object
+}
+~~~
+
+## Описание {#description}
+
+### Базовые свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"headerPosition"`
+- `hidden` - (опциональный) определяет, скрыт ли элемент управления. *false* по умолчанию
+- `disabled` - (опциональный) определяет, включен (*false*) или отключен (*true*) элемент управления. *false* по умолчанию
+- `css` - (опциональный) добавляет CSS-классы к элементу управления
+- `width` - (опциональный) ширина элемента управления. `"content"` по умолчанию
+- `height` - (опциональный) высота элемента управления. `"content"` по умолчанию
+- `padding` - (опциональный) задаёт отступы для содержимого внутри группы элементов управления. *"0 16px"* по умолчанию
+- `label` - (опциональный) задаёт подпись для элемента управления
+- `labelAlignment` - (опциональный) определяет положение подписи. `"left"` по умолчанию
+- `align` - (опциональный) задаёт выравнивание элементов управления внутри группы. `"start"` по умолчанию
+- `compact` - (опциональный) задаёт компактный режим, убирает отступы и рамку. *false* по умолчанию
+
+### Служебные свойства {#service-properties}
+
+- `$properties` - (опциональный) позволяет переопределить значения [базовых элементов управления](api/diagram_editor/editbar/basic_controls_overview.md) внутри сложного элемента управления. Вы можете настроить следующий элемент **Header position** на основе базовых элементов управления:
+ - `position` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) - задаёт положение заголовка группы
+
+## Пример {#example}
+
+~~~jsx {6-25}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "headerPosition",
+ label: "Header position",
+ $properties: {
+ position: {
+ options: [
+ {
+ icon: "dxi dxi-format-vertical-align-top",
+ value: "top"
+ },
+ {
+ icon: "dxi dxi-format-vertical-align-bottom",
+ value: "bottom"
+ }
+ ]
+ }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/lineshape.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/lineshape.md
new file mode 100644
index 000000000..7598eefc2
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/lineshape.md
@@ -0,0 +1,85 @@
+---
+sidebar_label: Line shape
+title: Сложные элементы управления Editbar - Line shape
+description: Вы можете изучить элемент управления Line shape компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Line shape
+
+@short: Комплексный элемент управления для отображения коннекторов и управления ими
+
+
+
+:::info
+Элемент управления **Line shape** доступен только для элемента `line` в режиме *default* в Diagram Editor.
+:::
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "lineShape",
+
+ hidden?: boolean, // false по умолчанию
+ disabled?: boolean, // false по умолчанию
+
+ css?: string,
+ width?: string | number | "content", // "content" по умолчанию
+ height?: string | number | "content", // "content" по умолчанию
+ padding?: string | number, // "0 16px" по умолчанию
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // "left" по умолчанию
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // "between" по умолчанию
+ compact?: boolean, // false по умолчанию
+
+ // Служебные свойства
+ $properties?: object
+}
+~~~
+
+## Описание {#description}
+
+### Базовые свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"lineShape"`
+- `hidden` - (опциональный) определяет, скрыт ли элемент управления. *false* по умолчанию
+- `disabled` - (опциональный) определяет, включен (*false*) или отключен (*true*) элемент управления. *false* по умолчанию
+- `css` - (опциональный) добавляет CSS-классы к элементу управления
+- `width` - (опциональный) ширина элемента управления. `"content"` по умолчанию
+- `height` - (опциональный) высота элемента управления. `"content"` по умолчанию
+- `padding` - (опциональный) задаёт отступы для содержимого внутри группы элементов управления. *"0 16px"* по умолчанию
+- `label` - (опциональный) задаёт подпись для элемента управления
+- `labelAlignment` - (опциональный) определяет положение подписи. `"left"` по умолчанию
+- `align` - (опциональный) задаёт выравнивание элементов управления внутри группы. `"between"` по умолчанию
+- `compact` - (опциональный) задаёт компактный режим, убирает отступы и рамку. *false* по умолчанию
+
+### Служебные свойства {#service-properties}
+
+- `$properties` - (опциональный) позволяет переопределить значения [базовых элементов управления](api/diagram_editor/editbar/basic_controls_overview.md) внутри сложного элемента управления. Вы можете настроить следующий элемент **Line shape** на основе базовых элементов управления:
+ - `connectType` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) задаёт тип коннектора
+
+## Пример {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $line: [
+ {
+ type: "lineShape",
+ label: "Line connection type"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/pointerview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/pointerview.md
new file mode 100644
index 000000000..e5a6dcf4f
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/pointerview.md
@@ -0,0 +1,86 @@
+---
+sidebar_label: Pointer view
+title: Сложные элементы управления Editbar - Pointer view
+description: Вы можете изучить элемент управления Pointer view компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Pointer view
+
+@short: Комплексный элемент управления для отображения стрелок коннектора и управления ими
+
+
+
+:::info
+Элемент управления **Pointer view** доступен только для элемента `line` в режиме *default* в Diagram Editor.
+:::
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "pointerView",
+
+ hidden?: boolean, // false по умолчанию
+ disabled?: boolean, // false по умолчанию
+
+ css?: string,
+ width?: string | number | "content", // "content" по умолчанию
+ height?: string | number | "content", // "content" по умолчанию
+ padding?: string | number, // "0 16px" по умолчанию
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // "left" по умолчанию
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // "between" по умолчанию
+ compact?: boolean, // false по умолчанию
+
+ // Служебные свойства
+ $properties?: object
+}
+~~~
+
+## Описание {#description}
+
+### Базовые свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"pointerView"`
+- `hidden` - (опциональный) определяет, скрыт ли элемент управления. *false* по умолчанию
+- `disabled` - (опциональный) определяет, включен (*false*) или отключен (*true*) элемент управления. *false* по умолчанию
+- `css` - (опциональный) добавляет CSS-классы к элементу управления
+- `width` - (опциональный) ширина элемента управления. `"content"` по умолчанию
+- `height` - (опциональный) высота элемента управления. `"content"` по умолчанию
+- `padding` - (опциональный) задаёт отступы для содержимого внутри группы элементов управления. *"0 16px"* по умолчанию
+- `label` - (опциональный) задаёт подпись для элемента управления
+- `labelAlignment` - (опциональный) определяет положение подписи. `"left"` по умолчанию
+- `align` - (опциональный) задаёт выравнивание элементов управления внутри группы. `"between"` по умолчанию
+- `compact` - (опциональный) задаёт компактный режим, убирает отступы и рамку. *false* по умолчанию
+
+### Служебные свойства {#service-properties}
+
+- `$properties` - (опциональный) позволяет переопределить значения [базовых элементов управления](api/diagram_editor/editbar/basic_controls_overview.md) внутри сложного элемента управления. Вы можете настроить следующие элементы **Pointer view** на основе базовых элементов управления:
+ - `backArrow` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) задаёт тип стрелки в конце коннектора
+ - `forwardArrow` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) задаёт тип стрелки в начале коннектора
+
+## Пример {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $line: [
+ {
+ type: "pointerView",
+ disabled: true
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/position.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/position.md
new file mode 100644
index 000000000..0c2e5c512
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/position.md
@@ -0,0 +1,88 @@
+---
+sidebar_label: Position
+title: Сложные элементы управления Editbar - Position
+description: Вы можете изучить элемент управления Position компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Suite.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Position
+
+@short: Комплексный элемент управления для настройки смещения фигуры относительно предустановленного алгоритма по осям X и Y
+
+
+
+:::info
+Элемент управления **Position** доступен только для элемента `shape` в режимах *org* или *mindmap* в Diagram Editor.
+:::
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "position",
+
+ hidden?: boolean, // false по умолчанию
+ disabled?: boolean, // false по умолчанию
+
+ css?: string,
+ width?: string | number | "content", // "content" по умолчанию
+ height?: string | number | "content", // "content" по умолчанию
+ padding?: string | number, // "0 16px" по умолчанию
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // "left" по умолчанию
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // "start" по умолчанию
+ compact?: boolean, // false по умолчанию
+
+ // Служебные свойства
+ $properties?: object
+}
+~~~
+
+## Описание {#description}
+
+### Базовые свойства {#basic-properties}
+
+- `type` - (обязательный) тип элемента управления. Установите значение `"position"`
+- `hidden` - (опциональный) определяет, скрыт ли элемент управления. *false* по умолчанию
+- `disabled` - (опциональный) определяет, включен (*false*) или отключен (*true*) элемент управления. *false* по умолчанию
+- `css` - (опциональный) добавляет CSS-классы к элементу управления
+- `width` - (опциональный) ширина элемента управления. `"content"` по умолчанию
+- `height` - (опциональный) высота элемента управления. `"content"` по умолчанию
+- `padding` - (опциональный) задаёт отступы для содержимого внутри группы элементов управления. *"0 16px"* по умолчанию
+- `label` - (опциональный) задаёт подпись для элемента управления
+- `labelAlignment` - (опциональный) определяет положение подписи. `"left"` по умолчанию
+- `align` - (опциональный) задаёт выравнивание элементов управления внутри группы. `"start"` по умолчанию
+- `compact` - (опциональный) задаёт компактный режим, убирает отступы и рамку. *false* по умолчанию
+
+### Служебные свойства {#service-properties}
+
+- `$properties` - (опциональный) позволяет переопределить значения [базовых элементов управления](api/diagram_editor/editbar/basic_controls_overview.md)) внутри сложного элемента управления. Вы можете настроить следующие элементы **Position** на основе базовых элементов управления:
+ - `dx` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) задаёт смещение фигуры относительно предустановленного алгоритма по оси X
+ - `dy` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) задаёт смещение фигуры относительно предустановленного алгоритма по оси Y
+
+## Пример {#example}
+
+~~~jsx {6-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "mindmap",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "position",
+ $properties: {
+ dx: { disabled: true }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/size.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/size.md
new file mode 100644
index 000000000..cf609c4ae
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/size.md
@@ -0,0 +1,86 @@
+---
+sidebar_label: Size
+title: Сложные элементы управления Editbar - Size
+description: Вы можете изучить элемент управления Size компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Suite.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Size
+
+@short: Сложный элемент управления для изменения ширины и высоты элементов Diagram
+
+
+
+:::info
+Элемент управления **Size** доступен только для элементов `shape`, `group` и `swimlane` в Diagram Editor.
+:::
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "size",
+
+ hidden?: boolean, // по умолчанию false
+ disabled?: boolean, // по умолчанию false
+
+ css?: string,
+ width?: string | number | "content", // по умолчанию "content"
+ height?: string | number | "content", // по умолчанию "content"
+ padding?: string | number, // по умолчанию "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // по умолчанию "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // по умолчанию "start"
+ compact?: boolean, // по умолчанию false
+
+ // Служебные свойства
+ $properties?: object
+}
+~~~
+
+## Описание {#description}
+
+### Базовые свойства {#basic-properties}
+
+- `type` - (обязательно) тип элемента управления. Укажите значение `"size"`
+- `hidden` - (опционально) определяет, скрыт ли элемент управления. По умолчанию — *false*
+- `disabled` - (опционально) определяет, включен (*false*) или отключен (*true*) элемент управления. По умолчанию — *false*
+- `css` - (опционально) добавляет стилевые классы к элементу управления
+- `width` - (опционально) ширина элемента управления. По умолчанию — `"content"`
+- `height` - (опционально) высота элемента управления. По умолчанию — `"content"`
+- `padding` - (опционально) задает отступы для содержимого внутри группы элементов управления. По умолчанию — *"0 16px"*
+- `label` - (опционально) задает подпись для элемента управления
+- `labelAlignment` - (опционально) определяет положение подписи. По умолчанию — `"left"`
+- `align` - (опционально) задает выравнивание элементов управления внутри группы. По умолчанию — `"start"`
+- `compact` - (опционально) задает компактный режим, убирает отступы и рамку. По умолчанию — *false*
+
+### Служебные свойства {#service-properties}
+
+- `$properties` - (опционально) позволяет переопределить значения [базовых элементов управления](api/diagram_editor/editbar/basic_controls_overview.md) внутри сложного элемента управления. Вы можете настроить следующие элементы элемента управления **Size** на основе базовых элементов управления:
+ - `width` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) задает ширину элемента Diagram (в пикселях)
+ - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) задает высоту элемента Diagram (в пикселях)
+
+## Пример {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "mindmap",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "size",
+ label: "Shape size"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textalign.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textalign.md
new file mode 100644
index 000000000..b88966a22
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textalign.md
@@ -0,0 +1,82 @@
+---
+sidebar_label: Text align
+title: Сложные элементы управления Editbar - Text align
+description: Вы можете изучить элемент управления Text align компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Suite.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Text align
+
+@short: Сложный элемент управления для настройки выравнивания текста в элементах Diagram
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "textAlign",
+
+ hidden?: boolean, // по умолчанию false
+ disabled?: boolean, // по умолчанию false
+
+ css?: string,
+ width?: string | number | "content", // по умолчанию "content"
+ height?: string | number | "content", // по умолчанию "content"
+ padding?: string | number, // по умолчанию "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // по умолчанию "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // по умолчанию "between"
+ compact?: boolean, // по умолчанию false
+
+ // Служебные свойства
+ $properties?: object
+}
+~~~
+
+## Описание {#description}
+
+### Базовые свойства {#basic-properties}
+
+- `type` - (обязательно) тип элемента управления. Укажите значение `"textAlign"`
+- `hidden` - (опционально) определяет, скрыт ли элемент управления. По умолчанию — *false*
+- `disabled` - (опционально) определяет, включен (*false*) или отключен (*true*) элемент управления. По умолчанию — *false*
+- `css` - (опционально) добавляет стилевые классы к элементу управления
+- `width` - (опционально) ширина элемента управления. По умолчанию — `"content"`
+- `height` - (опционально) высота элемента управления. По умолчанию — `"content"`
+- `padding` - (опционально) задает отступы для содержимого внутри группы элементов управления. По умолчанию — *"0 16px"*
+- `label` - (опционально) задает подпись для элемента управления
+- `labelAlignment` - (опционально) определяет положение подписи. По умолчанию — `"left"`
+- `align` - (опционально) задает выравнивание элементов управления внутри группы. По умолчанию — `"between"`
+- `compact` - (опционально) задает компактный режим, убирает отступы и рамку. По умолчанию — *false*
+
+### Служебные свойства {#service-properties}
+
+- `$properties` - (опционально) позволяет переопределить значения [базовых элементов управления](api/diagram_editor/editbar/basic_controls_overview.md) внутри сложного элемента управления. Вы можете настроить следующие элементы элемента управления **Text align** на основе базовых элементов управления:
+ - `textAlign` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) задает горизонтальное выравнивание текста
+ - `textVerticalAlign` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) задает вертикальное выравнивание текста
+
+## Пример {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "mindmap",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "textAlign",
+ label: "Text align"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textstyle.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textstyle.md
new file mode 100644
index 000000000..bb069be82
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textstyle.md
@@ -0,0 +1,96 @@
+---
+sidebar_label: Text style
+title: Сложные элементы управления Editbar - Text style
+description: Вы можете изучить элемент управления Text style компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Suite.
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Text style
+
+@short: Сложный элемент управления для настройки стиля текста в элементах Diagram
+
+
+
+## Использование {#usage}
+
+~~~jsx
+{
+ type: "textStyle",
+
+ hidden?: boolean, // по умолчанию false
+ disabled?: boolean, // по умолчанию false
+
+ css?: string,
+ width?: string | number | "content", // по умолчанию "content"
+ height?: string | number | "content", // по умолчанию "content"
+ padding?: string | number, // по умолчанию "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // по умолчанию "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // по умолчанию "between"
+ compact?: boolean, // по умолчанию false
+
+ // Служебные свойства
+ $properties?: object
+}
+~~~
+
+## Описание {#description}
+
+### Базовые свойства {#basic-properties}
+
+- `type` - (обязательно) тип элемента управления. Укажите значение `"textStyle"`
+- `hidden` - (опционально) определяет, скрыт ли элемент управления. По умолчанию — *false*
+- `disabled` - (опционально) определяет, включен (*false*) или отключен (*true*) элемент управления. По умолчанию — *false*
+- `css` - (опционально) добавляет стилевые классы к элементу управления
+- `width` - (опционально) ширина элемента управления. По умолчанию — `"content"`
+- `height` - (опционально) высота элемента управления. По умолчанию — `"content"`
+- `padding` - (опционально) задает отступы для содержимого внутри группы элементов управления. По умолчанию — *"0 16px"*
+- `label` - (опционально) задает подпись для элемента управления
+- `labelAlignment` - (опционально) определяет положение подписи. По умолчанию — `"left"`
+- `align` - (опционально) задает выравнивание элементов управления внутри группы. По умолчанию — `"between"`
+- `compact` - (опционально) задает компактный режим, убирает отступы и рамку. По умолчанию — *false*
+
+### Служебные свойства {#service-properties}
+
+- `$properties` - (опционально) позволяет переопределить значения [базовых элементов управления](api/diagram_editor/editbar/basic_controls_overview.md) внутри сложного элемента управления. Вы можете настроить следующие элементы элемента управления **Text style** на основе базовых элементов управления:
+ - `fontSize` - ([combo](api/diagram_editor/editbar/basic_controls/combo.md)) задает размер шрифта
+ - `lineHeight` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) задает высоту строки
+ - `fontColor` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) задает цвет шрифта
+ - `fontWeight` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) задает насыщенность шрифта
+ - `fontStyle` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) задает стиль шрифта
+
+## Пример {#example}
+
+~~~jsx {6-22}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "mindmap",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "textStyle",
+ label: "Text style",
+ $properties: {
+ fontSize: {
+ value: 20,
+ options: [
+ { id: 10, value: "10px" },
+ { id: 20, value: "20px" },
+ { id: 30, value: "30px" },
+ { id: 40, value: "40px" }
+ ]
+ }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls_overview.md
new file mode 100644
index 000000000..5be7347a3
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls_overview.md
@@ -0,0 +1,30 @@
+---
+sidebar_label: Сложные элементы управления
+title: Гайды по Editbar - Сложные элементы управления
+description: Узнайте больше о сложных элементах управления Editbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите гайды для разработчиков и справочник API, попробуйте примеры кода и демонстрации в реальном времени, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# Сложные элементы управления {#complex-controls}
+
+Сложные элементы управления Editbar используются для настройки Editbar применительно к элементам Diagram. Ниже приведён список сложных элементов управления. Перейдите в соответствующий раздел, чтобы ознакомиться с подробным описанием свойств конфигурации каждого элемента управления.
+
+:::info
+Подробнее о настройке читайте в гайде [Конфигурация Editbar](guides/diagram_editor/editbar.md)!
+:::
+
+## Обзор сложных элементов управления Editbar {#overview-of-editbar-complex-controls}
+
+| Название | Описание |
+| :-------------------------------------------------------------------- | :---------------------------------------------------------------------- |
+| [](api/diagram_editor/editbar/complex_controls/arrange.md) | @getshort(api/diagram_editor/editbar/complex_controls/arrange.md) |
+| [](api/diagram_editor/editbar/complex_controls/border.md) | @getshort(api/diagram_editor/editbar/complex_controls/border.md) |
+| [](api/diagram_editor/editbar/complex_controls/gridstep.md) | @getshort(api/diagram_editor/editbar/complex_controls/gridstep.md) |
+| [](api/diagram_editor/editbar/complex_controls/header.md) | @getshort(api/diagram_editor/editbar/complex_controls/header.md) |
+| [](api/diagram_editor/editbar/complex_controls/headercommon.md) | @getshort(api/diagram_editor/editbar/complex_controls/headercommon.md) |
+| [](api/diagram_editor/editbar/complex_controls/headerposition.md) | @getshort(api/diagram_editor/editbar/complex_controls/headerposition.md)|
+| [](api/diagram_editor/editbar/complex_controls/lineshape.md) | @getshort(api/diagram_editor/editbar/complex_controls/lineshape.md) |
+| [](api/diagram_editor/editbar/complex_controls/pointerview.md) | @getshort(api/diagram_editor/editbar/complex_controls/pointerview.md) |
+| [](api/diagram_editor/editbar/complex_controls/position.md) | @getshort(api/diagram_editor/editbar/complex_controls/position.md) |
+| [](api/diagram_editor/editbar/complex_controls/size.md) | @getshort(api/diagram_editor/editbar/complex_controls/size.md) |
+| [](api/diagram_editor/editbar/complex_controls/textalign.md) | @getshort(api/diagram_editor/editbar/complex_controls/textalign.md) |
+| [](api/diagram_editor/editbar/complex_controls/textstyle.md) | @getshort(api/diagram_editor/editbar/complex_controls/textstyle.md) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/controls_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/controls_property.md
new file mode 100644
index 000000000..d1964eaf0
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/controls_property.md
@@ -0,0 +1,83 @@
+---
+sidebar_label: controls
+title: Свойство controls Editbar
+description: Узнайте больше о свойстве controls компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите гайды для разработчиков и справочник API, попробуйте примеры кода и демонстрации в реальном времени, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# controls
+
+### Описание {#description}
+
+@short: Необязательный параметр. Набор конфигураций, определяющих один или несколько пользовательских элементов управления
+
+:::info
+Свойство `controls` позволяет создавать пользовательские элементы управления `Editbar` на основе [**Базовых элементов управления**](api/diagram_editor/editbar/basic_controls_overview.md) и/или [**Сложных элементов управления**](api/diagram_editor/editbar/complex_controls_overview.md). Используйте свойство [`properties`](api/diagram_editor/editbar/config/properties_property.md), чтобы применять пользовательские элементы управления к нужным элементам (фигурам, группам, дорожкам и т. д.).
+
+Подробнее о настройке читайте в гайде [**Конфигурация Editbar**](guides/diagram_editor/editbar.md)!
+:::
+
+:::important
+Не рекомендуется переопределять элементы управления по умолчанию при создании пользовательского элемента управления. Используйте уникальное имя для каждого пользовательского элемента управления!
+:::
+
+### Использование {#usage}
+
+~~~jsx
+controls?: {
+ [type: string]: object, // пользовательский элемент управления
+};
+~~~
+
+### Параметры {#parameters}
+
+- `type` - имя типа пользовательского элемента управления
+ - `object` - конфигурационный объект нового элемента управления на основе [**Базовых элементов управления**](api/diagram_editor/editbar/basic_controls_overview.md) и/или [**Сложных элементов управления**](api/diagram_editor/editbar/complex_controls_overview.md)
+
+~~~jsx
+controls: {
+ estimate: { /*...*/ }, // создание нового элемента управления "estimate" с пользовательскими конфигурациями
+ // другой элемент управления
+}
+~~~
+
+### Пример {#example}
+
+~~~jsx {16-28}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // отображает Editbar по умолчанию
+ // или настройте Editbar через объект
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ properties: {
+ $shape: [
+ { type: "estimate" }, // применение пользовательского элемента управления "estimate"
+ { type: "name" } // применение пользовательского элемента управления "name"
+ ]
+ },
+ controls: {
+ // создание пользовательского элемента управления "estimate"
+ estimate: {
+ type: "fieldset",
+ label: "Time estimate",
+ rows: [
+ { type: "datepicker", key: "date_start", label: "Date start" },
+ { type: "datepicker", key: "date_end", label: "Date end" }
+ ]
+ },
+ // создание пользовательского элемента управления "name"
+ name: { type: "input", label: "Name", key: "name" }
+ }
+ }
+ }
+});
+~~~
+
+**Журнал изменений**: Свойство добавлено в v6.0
+
+**Полезная статья:** [**Конфигурация Editbar**](guides/diagram_editor/editbar.md)
+
+**Связанный пример:** [Diagram Editor. Стандартный режим. PERT-диаграмма с легендой](https://snippet.dhtmlx.com/w8mrh3ay?mode=wide)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/css_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/css_property.md
new file mode 100644
index 000000000..356297677
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/css_property.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: css
+title: Свойство css Editbar
+description: Узнайте больше о свойстве css компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите гайды для разработчиков и справочник API, попробуйте примеры кода и демонстрации в реальном времени, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# css
+
+### Описание {#description}
+
+@short: Необязательный параметр. Применяет пользовательский класс CSS к Editbar
+
+### Использование {#usage}
+
+~~~jsx
+css?: string;
+~~~
+
+### Пример {#example}
+
+~~~jsx {7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // отображает Editbar по умолчанию
+ // или настройте Editbar через объект
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ controls: {...},
+ properties: {...}
+ }
+ }
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/properties_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/properties_property.md
new file mode 100644
index 000000000..41249c8b9
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/properties_property.md
@@ -0,0 +1,131 @@
+---
+sidebar_label: properties
+title: Свойство properties компонента Editbar
+description: Вы можете ознакомиться со свойством properties компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# properties
+
+### Описание {#description}
+
+@short: Необязательно. Набор конфигураций, которые изменяют элементы управления для элементов Diagram (фигур, групп, дорожек и т. д.)
+
+:::info
+Конфигурация `properties` позволяет выполнять следующие действия:
+- изменять элементы управления Editbar для всех или отдельных элементов Diagram на основе [**Базовых элементов управления**](api/diagram_editor/editbar/basic_controls_overview.md) и/или [**Сложных элементов управления**](api/diagram_editor/editbar/complex_controls_overview.md)
+- применять пользовательские элементы управления Editbar, заданные с помощью свойства [`controls`](api/diagram_editor/editbar/config/controls_property.md), к элементам Diagram
+- задавать условия применения элемента управления Editbar (пользовательского или стандартного) к элементам Diagram
+
+Подробнее о настройке см. руководство [**Настройка Editbar**](guides/diagram_editor/editbar.md)!
+:::
+
+### Использование {#usage}
+
+~~~jsx
+properties?: {
+ [type: string]: object[] | function, // пользовательские конфигурации для элементов управления, применяемых к элементам диаграммы
+};
+~~~
+
+### Параметры {#parameters}
+
+- `type` - имя элемента Diagram или группы элементов
+ - `object` - объект конфигурации элемента Diagram
+
+ или
+
+ - `function` - колбек, который должен возвращать массив объектов с конфигурацией элементов управления элемента Diagram. Функция вызывается с объектом, включающим следующие параметры:
+ - `item` - (необязательно) объект выбранного элемента
+ - `editor` - (обязательно) объект Diagram Editor
+
+Вы можете настроить элементы управления Editbar для отдельного элемента Diagram, например `rectangle`, `circle`, `card` и т. д.:
+
+~~~jsx
+properties: {
+ // изменение элементов управления Editbar для отдельных элементов (фигур)
+ rectangle: [], // настройка элементов управления для типа "rectangle"
+ circle: [], // настройка элементов управления для типа "circle"
+ card: [], // настройка элементов управления для типа "card"
+ estimate: [], // настройка элементов управления для пользовательского типа "estimate"
+ // другие элементы
+}
+~~~
+
+Вы также можете настроить элементы управления Editbar для отдельной группы элементов Diagram. Для настройки групп предусмотрены следующие служебные свойства:
+
+- [`$default`](guides/diagram_editor/editbar.md#configure-editbar-for-the-grid-area) - позволяет настраивать элементы управления Editbar, если не выбран ни один элемент или выбрано несколько элементов
+- [`$shape`](guides/diagram_editor/editbar.md#configure-editbar-for-shapes) - позволяет настраивать элементы управления Editbar для всех фигур, включая пользовательские
+- [`$group`](guides/diagram_editor/editbar.md#configure-editbar-for-group-elements) - позволяет настраивать элементы управления Editbar для всех элементов с типом "group"
+- [`$swimlane`](guides/diagram_editor/editbar.md#configure-editbar-for-swimlanes) - позволяет настраивать элементы управления Editbar для всех элементов с типом "swimlane"
+- [`$line`](guides/diagram_editor/editbar.md#configure-editbar-for-lines) - позволяет настраивать элементы управления Editbar для всех элементов с типом "line"
+- [`$lineTitle`](guides/diagram_editor/editbar.md#configure-editbar-for-line-titles) - позволяет настраивать элементы управления Editbar для всех элементов с типом "lineTitle"
+
+~~~jsx
+properties: {
+ $default: [],
+ $shape: [],
+ $group: [],
+ $swimlane: [],
+ $line: [],
+ $lineTitle: [],
+ // ... другие параметры
+}
+~~~
+
+### Пример {#example}
+
+~~~jsx {10-44}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // отображает Editbar по умолчанию
+ // или настройте Editbar с помощью объекта
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ properties: {
+ $shape: ({ item, editor }) => {
+ const controls = [
+ { type: "position" },
+ { type: "size" }
+ ];
+ if (item.hasOwnProperty("title")) {
+ controls.push({ type: "input", key: "title", label: "Title", wrap: true });
+ }
+ if (item.hasOwnProperty("text")) {
+ controls.push({ type: "textarea", key: "text", height: 200, label: "Text", wrap: true });
+ }
+ if (item.hasOwnProperty("img")) {
+ controls.push({ type: "avatar", key: "img", label: "Image", wrap: true });
+ }
+ return controls;
+ },
+ $group: [
+ {
+ type: "arrange",
+ $properties: {
+ angle: { hidden: true }
+ }
+ },
+ { type: "header" },
+ {
+ type: "border",
+ $properties: {
+ stroke: { key: ["style", "stroke"] },
+ strokeType: { hidden: true },
+ strokeWidth: { key: ["style", "strokeWidth"], width: "85%" }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+**Журнал изменений**: Свойство добавлено в v6.0
+
+**Полезная статья:** [**Настройка Editbar**](guides/diagram_editor/editbar.md)
+
+**Связанный пример:** [Diagram Editor. Режим по умолчанию. Настройка editbar. Добавлен счётчик фигур](https://snippet.dhtmlx.com/ealq0m4l?mode=wide)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/show_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/show_property.md
new file mode 100644
index 000000000..69f794973
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/show_property.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: show
+title: Свойство show компонента Editbar
+description: Вы можете ознакомиться со свойством show компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# show
+
+### Описание {#description}
+
+@short: Необязательно. Определяет, отображать ли Editbar при инициализации
+
+### Использование {#usage}
+
+~~~jsx
+show?: boolean;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+show: true
+~~~
+
+### Пример {#example}
+
+~~~jsx {8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // отображает Editbar по умолчанию
+ // или настройте Editbar с помощью объекта
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ controls: {...},
+ properties: {...}
+ }
+ }
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/width_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/width_property.md
new file mode 100644
index 000000000..eb31c4e5b
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/width_property.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: width
+title: Свойство width компонента Editbar
+description: Вы можете ознакомиться со свойством width компонента Editbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# width
+
+### Описание {#description}
+
+@short: Необязательно. Определяет ширину Editbar
+
+### Использование {#usage}
+
+~~~jsx
+width?: number;
+~~~
+
+### Пример {#example}
+
+~~~jsx {9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // отображает Editbar по умолчанию
+ // или настройте Editbar с помощью объекта
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ controls: {...},
+ properties: {...}
+ }
+ }
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/api_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/api_overview.md
new file mode 100644
index 000000000..70e7c4aa2
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/api_overview.md
@@ -0,0 +1,72 @@
+---
+sidebar_label: Обзор API
+title: Обзор API редактора
+description: Ознакомьтесь с обзором API редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник по API, тестируйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Обзор API редактора {#editor-api-overview}
+
+## Методы редактора {#editor-methods}
+
+| Название | Описание |
+| :------------------------------------------------------------ | :-------------------------------------------------------------------- |
+| [](api/diagram_editor/editor/methods/destructor_method.md) | @getshort(api/diagram_editor/editor/methods/destructor_method.md) |
+| [](api/diagram_editor/editor/methods/import_method.md) | @getshort(api/diagram_editor/editor/methods/import_method.md) |
+| [](api/diagram_editor/editor/methods/paint_method.md) | @getshort(api/diagram_editor/editor/methods/paint_method.md) |
+| [](api/diagram_editor/editor/methods/parse_method.md) | @getshort(api/diagram_editor/editor/methods/parse_method.md) |
+| [](api/diagram_editor/editor/methods/serialize_method.md) | @getshort(api/diagram_editor/editor/methods/serialize_method.md) |
+| [](api/diagram_editor/editor/methods/zoomin_method.md) | @getshort(api/diagram_editor/editor/methods/zoomin_method.md) |
+| [](api/diagram_editor/editor/methods/zoomout_method.md) | @getshort(api/diagram_editor/editor/methods/zoomout_method.md) |
+
+## События редактора {#editor-events}
+
+| Название | Описание |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------- |
+| [](api/diagram_editor/editor/events/aftergroupmove_event.md) | @getshort(api/diagram_editor/editor/events/aftergroupmove_event.md) |
+| [](api/diagram_editor/editor/events/afteritemcatch_event.md) | @getshort(api/diagram_editor/editor/events/afteritemcatch_event.md) |
+| [](api/diagram_editor/editor/events/afteritemmove_event.md) | @getshort(api/diagram_editor/editor/events/afteritemmove_event.md) |
+| [](api/diagram_editor/editor/events/afteritemresize_event.md) | @getshort(api/diagram_editor/editor/events/afteritemresize_event.md) |
+| [](api/diagram_editor/editor/events/afteritemrotate_event.md) | @getshort(api/diagram_editor/editor/events/afteritemrotate_event.md) |
+| [](api/diagram_editor/editor/events/afterlinetitlemove_event.md) | @getshort(api/diagram_editor/editor/events/afterlinetitlemove_event.md) |
+| [](api/diagram_editor/editor/events/aftershapeiconclick_event.md) | @getshort(api/diagram_editor/editor/events/aftershapeiconclick_event.md) |
+| [](api/diagram_editor/editor/events/aftershapemove_event.md) | @getshort(api/diagram_editor/editor/events/aftershapemove_event.md) |
+| [](api/diagram_editor/editor/events/beforegroupmove_event.md) | @getshort(api/diagram_editor/editor/events/beforegroupmove_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemcatch_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemcatch_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemmove_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemmove_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemresize_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemresize_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemrotate_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemrotate_event.md) |
+| [](api/diagram_editor/editor/events/beforelinetitlemove_event.md) | @getshort(api/diagram_editor/editor/events/beforelinetitlemove_event.md) |
+| [](api/diagram_editor/editor/events/beforeshapeiconclick_event.md)| @getshort(api/diagram_editor/editor/events/beforeshapeiconclick_event.md) |
+| [](api/diagram_editor/editor/events/beforeshapemove_event.md) | @getshort(api/diagram_editor/editor/events/beforeshapemove_event.md) |
+| [](api/diagram_editor/editor/events/groupmoveend_event.md) | @getshort(api/diagram_editor/editor/events/groupmoveend_event.md) |
+| [](api/diagram_editor/editor/events/itemmoveend_event.md) | @getshort(api/diagram_editor/editor/events/itemmoveend_event.md) |
+| [](api/diagram_editor/editor/events/itemresizeend_event.md) | @getshort(api/diagram_editor/editor/events/itemresizeend_event.md) |
+| [](api/diagram_editor/editor/events/itemrotateend_event.md) | @getshort(api/diagram_editor/editor/events/itemrotateend_event.md) |
+| [](api/diagram_editor/editor/events/itemtarget_event.md) | @getshort(api/diagram_editor/editor/events/itemtarget_event.md) |
+| [](api/diagram_editor/editor/events/linetitlemoveend_event.md) | @getshort(api/diagram_editor/editor/events/linetitlemoveend_event.md) |
+| [](api/diagram_editor/editor/events/shapemoveend_event.md) | @getshort(api/diagram_editor/editor/events/shapemoveend_event.md) |
+| [](api/diagram_editor/editor/events/shaperesize_event.md) | @getshort(api/diagram_editor/editor/events/shaperesize_event.md) |
+| [](api/diagram_editor/editor/events/zoomin_event.md) | @getshort(api/diagram_editor/editor/events/zoomin_event.md) |
+| [](api/diagram_editor/editor/events/zoomout_event.md) | @getshort(api/diagram_editor/editor/events/zoomout_event.md) |
+
+
+## Свойства редактора {#editor-properties}
+
+| Название | Описание |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------ |
+| [](api/diagram_editor/editor/config/autoplacement_property.md) | @getshort(api/diagram_editor/editor/config/autoplacement_property.md) |
+| [](api/diagram_editor/editor/config/connectionpoints_property.md) | @getshort(api/diagram_editor/editor/config/connectionpoints_property.md) |
+| [](api/diagram_editor/editor/config/defaults_property.md) | @getshort(api/diagram_editor/editor/config/defaults_property.md) |
+| [](api/diagram_editor/editor/config/editmode_property.md) | @getshort(api/diagram_editor/editor/config/editmode_property.md) |
+| [](api/diagram_editor/editor/config/grid_property.md) | @getshort(api/diagram_editor/editor/config/grid_property.md) |
+| [](api/diagram_editor/editor/config/gridstep_property.md) | @getshort(api/diagram_editor/editor/config/gridstep_property.md) |
+| [](api/diagram_editor/editor/config/hotkeys_property.md) | @getshort(api/diagram_editor/editor/config/hotkeys_property.md) |
+| [](api/diagram_editor/editor/config/itemsdraggable_property.md) | @getshort(api/diagram_editor/editor/config/itemsdraggable_property.md) |
+| [](api/diagram_editor/editor/config/lineconfig_property.md) | @getshort(api/diagram_editor/editor/config/lineconfig_property.md) |
+| [](api/diagram_editor/editor/config/magnetic_property.md) | @getshort(api/diagram_editor/editor/config/magnetic_property.md) |
+| [](api/diagram_editor/editor/config/resizepoints_property.md) | @getshort(api/diagram_editor/editor/config/resizepoints_property.md) |
+| [](api/diagram_editor/editor/config/scale_property.md) | @getshort(api/diagram_editor/editor/config/scale_property.md) |
+| [](api/diagram_editor/editor/config/shapetoolbar_property.md) | @getshort(api/diagram_editor/editor/config/shapetoolbar_property.md) |
+| [](api/diagram_editor/editor/config/shapetype_property.md) | @getshort(api/diagram_editor/editor/config/shapetype_property.md) |
+| [](api/diagram_editor/editor/config/type_property.md) | @getshort(api/diagram_editor/editor/config/type_property.md) |
+| [](api/diagram_editor/editor/config/view_property.md) | @getshort(api/diagram_editor/editor/config/view_property.md) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md
new file mode 100644
index 000000000..272ecac85
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md
@@ -0,0 +1,125 @@
+---
+sidebar_label: autoplacement
+title: Свойство autoplacement редактора
+description: Изучите свойство autoplacement редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником по API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# autoplacement
+
+### Описание {#description}
+
+@short: Необязательный. Объект с настройками конфигурации для автоматического размещения фигур
+
+:::info
+Свойство `autoplacement` работает только в режиме по умолчанию редактора и только для фигур. Оно не работает при использовании групп или дорожек (swimlanes).
+:::
+
+### Использование {#usage}
+
+~~~ts
+autoplacement?: {
+ mode?: "direct" | "edges", // по умолчанию "direct"
+ graphPadding?: number, // по умолчанию 200
+ placeMode?: "orthogonal" | "radial", // по умолчанию "orthogonal"
+ itemPadding?: number, // по умолчанию 20
+ levelPadding?: number // по умолчанию 20
+};
+~~~
+
+### Параметры {#parameters}
+
+Объект `autoplacement` содержит следующие параметры:
+
+- `mode` — (необязательный) режим соединения фигур, `"direct"` (по умолчанию) или `"edges"`
+- `graphPadding` — (необязательный) задаёт расстояние между несвязанными диаграммами, *200* по умолчанию
+- `placeMode` — (необязательный) задаёт режим размещения фигур, `"orthogonal"` (по умолчанию) или `"radial"`
+- `itemPadding` — (необязательный) минимальный отступ между элементами (минимальное значение — *1*), *20* по умолчанию
+- `levelPadding` — (необязательный) минимальный отступ между уровнями иерархии (минимальное значение — *1*), *20* по умолчанию
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+autoplacement: {
+ mode: "direct",
+ graphPadding: 200,
+ placeMode: "orthogonal",
+ itemPadding: 20,
+ levelPadding: 20
+}
+~~~
+
+### Пример {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ autoplacement: {
+ placeMode: "radial",
+ mode: "direct",
+ itemPadding: 10,
+ levelPadding: 10,
+ graphPadding: 100
+ }
+});
+
+editor.parse(data);
+~~~
+
+## Режимы соединения фигур {#modes-of-connecting-shapes}
+
+### Режим "direct" {#direct-mode}
+
+Линии-соединители без стрелок выравниваются "от центра к центру". Они прямые и диагональные.
+
+
+
+### Режим "edges" {#edges-mode}
+
+Линии-соединители выравниваются "от края к краю".
+
+:::info
+Чтобы добавить стрелки к линиям, укажите `forwardArrow: "filled"` или `backArrow: "filled"` в конфигурации [объекта линии](lines/configuration_properties.md).
+:::
+
+Линии-соединители в режиме `"edges"` могут быть:
+
+- прямыми (если задать свойство `connectType: "straight"` [объекта линии](lines/configuration_properties.md))
+
+
+
+- или изогнутыми под углом 90 градусов (если задать свойство `connectType: "elbow"` [объекта линии](lines/configuration_properties.md))
+
+
+
+## Режимы размещения фигур {#modes-of-placement-of-shapes}
+
+### Режим "orthogonal" {#orthogonal-mode}
+
+Фигуры располагаются вдоль вертикальных и горизонтальных линий
+
+- расположение `"orthogonal"` с линиями в режиме `"direct"`
+
+
+
+- расположение `"orthogonal"` с линиями в режиме `"edges"`
+
+
+
+### Режим "radial" {#radial-mode}
+
+Фигуры располагаются на воображаемых окружностях относительно центральной фигуры, то есть фигуры с наибольшим количеством соединений
+
+- расположение `"radial"` с линиями в режиме `"direct"`
+
+
+
+- расположение `"radial"` с линиями в режиме `"edges"`
+
+
+
+**Журнал изменений**:
+
+- Параметры `itemPadding` и `levelPadding` добавлены в v6.1.3
+- Параметр `placeMode` добавлен в v5.0
+- Свойство `autoplacement` добавлено в v3.0
+
+**Связанный пример**: [Diagram editor. Режим по умолчанию. Алгоритм радиального автоматического размещения](https://snippet.dhtmlx.com/f0cespbk)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/connectionpoints_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/connectionpoints_property.md
new file mode 100644
index 000000000..f2c603a83
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/connectionpoints_property.md
@@ -0,0 +1,39 @@
+---
+sidebar_label: connectionPoints
+title: Свойство connectionPoints редактора
+description: Изучите свойство connectionPoints редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником по API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# connectionPoints
+
+### Описание {#description}
+
+@short: Необязательный. Включает/отключает возможность соединения фигур с помощью элементов соединения
+
+:::info
+Свойство `connectionPoints` работает только в режиме `default`.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+connectionPoints?: boolean;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+connectionPoints: true
+~~~
+
+### Пример {#example}
+
+~~~jsx {3}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default", // только "default"
+ connectionPoints: false, // по умолчанию true
+ // другие настройки
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/defaults_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/defaults_property.md
new file mode 100644
index 000000000..31abee66b
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/defaults_property.md
@@ -0,0 +1,71 @@
+---
+sidebar_label: defaults
+title: Свойство defaults редактора
+description: Изучите свойство defaults редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником по API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# defaults
+
+### Описание {#description}
+
+@short: Необязательный. Объект, задающий конфигурацию по умолчанию для фигуры или линии
+
+### Использование {#usage}
+
+~~~jsx
+defaults?: {
+ [type: string]: object
+};
+~~~
+
+### Параметры {#parameters}
+
+Объект `defaults` может содержать набор пар `key:value`, где *key* — тип фигуры или линии, а *value* — набор настроек конфигурации соответствующей [фигуры](shapes/configuration_properties.md) или [линии](lines/configuration_properties.md).
+
+:::note
+Атрибуты `type` и `id` нельзя задавать в конфигурации фигуры/линии по умолчанию.
+:::
+
+### Пример {#example}
+
+~~~jsx {24}
+const defaults = {
+ // настройки по умолчанию для всех фигур типа "rectangle"
+ rectangle: {
+ fill: "#CEEFE1",
+ stroke: "#0AB169",
+ strokeWidth: 2,
+ width: 140,
+ height: 140,
+ text: "Default text"
+ },
+ // настройки по умолчанию для всех линий типа "line"
+ line: {
+ strokeWidth: 3,
+ stroke: "#245CE0"
+ },
+ // настройки по умолчанию для всех линий типа "dash"
+ dash: {
+ strokeWidth: 3,
+ stroke: "#245CE0"
+ }
+};
+
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ defaults
+});
+~~~
+
+:::info
+После определения настроек по умолчанию для фигуры/линии определённых типов вы можете либо опускать эти свойства, либо переопределять их значения при [подготовке набора данных](guides/loading_data.md#preparing-data-to-load) для фигур/линий этих типов.
+:::
+
+**Журнал изменений**: Возможность задавать конфигурацию по умолчанию для линий была добавлена в v4.2
+
+**Полезные статьи**:
+
+- [Настройка конфигурации фигуры по умолчанию](guides/diagram/configuration.md#setting-the-default-configuration-of-a-shape)
+- [Настройка предпросмотра фигур](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes)
+
+**Связанный пример**: [Diagram editor. Настройка типа линии (коннектора) по умолчанию. Попробуйте соединить фигуру A с фигурой B](https://snippet.dhtmlx.com/22abzn5m)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/editmode_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/editmode_property.md
new file mode 100644
index 000000000..4a305189c
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/editmode_property.md
@@ -0,0 +1,25 @@
+---
+sidebar_label: editMode
+title: Свойство editMode редактора
+description: Изучите свойство editMode редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником по API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# editMode
+
+### Описание {#description}
+
+@short: Необязательный. Скрывает/показывает левую/правую панели редактора
+
+### Использование {#usage}
+
+~~~jsx
+editMode?: boolean;
+~~~
+
+### Пример {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ editMode: false
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/grid_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/grid_property.md
new file mode 100644
index 000000000..98d978212
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/grid_property.md
@@ -0,0 +1,35 @@
+---
+sidebar_label: grid
+title: Свойство grid редактора Editor
+description: Изучите свойство grid редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# grid
+
+### Описание {#description}
+
+@short: Необязательный параметр. Включает/отключает сетку, отображаемую на холсте редактора
+
+### Использование {#usage}
+
+~~~jsx
+grid?: boolean;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+grid: true
+~~~
+
+### Пример {#example}
+
+~~~jsx {3}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default", // "org" | "mindmap" | "default"
+ grid: false, // по умолчанию true
+ // другие параметры конфигурации
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/gridstep_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/gridstep_property.md
new file mode 100644
index 000000000..fc5145133
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/gridstep_property.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: gridStep
+title: Свойство gridStep редактора Editor
+description: Изучите свойство gridStep редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# gridStep
+
+### Описание {#description}
+
+@short: Необязательный параметр. Задает размер шага сетки, который определяет шаг перемещения элемента
+
+При изменении значения шага сетки также изменится расстояние между точками в области сетки
+
+### Использование {#usage}
+
+~~~jsx
+gridStep?: number;
+~~~
+
+:::info
+Указанное число должно быть больше или равно 1
+:::
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+gridStep: 10
+~~~
+
+### Пример {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ gridStep:20
+});
+~~~
+
+:::note
+Рекомендуется использовать стрелки при перемещении элемента в редакторе. Такой способ обеспечивает перемещение элемента ровно на один шаг сетки, тогда как использование мыши может привести к смещению элемента на несколько шагов сетки.
+:::
+
+**Полезная статья**: [Область сетки](guides/diagram_editor/grid_area.md)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/hotkeys_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/hotkeys_property.md
new file mode 100644
index 000000000..cca6df8a3
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/hotkeys_property.md
@@ -0,0 +1,104 @@
+---
+sidebar_label: hotkeys
+title: Свойство hotkeys редактора Editor
+description: Изучите свойство hotkeys редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# hotkeys
+
+### Описание {#description}
+
+@short: Необязательный параметр. Позволяет управлять комбинациями клавиш (горячими клавишами) для различных действий в редакторе
+
+Вы можете полностью отключить все горячие клавиши, отключить отдельные комбинации или переопределить их поведение с помощью пользовательских функций.
+
+:::note
+Обратите внимание, что включение или отключение стандартных горячих клавиш также повлияет на их отображение в виде подсказок или меток на панели инструментов редактора.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+hotkeys?:
+ | boolean
+ | {
+ [key: string]: false | ((event: KeyboardEvent) => void);
+ };
+~~~
+
+### Параметры {#parameters}
+
+- `hotkeys: boolean` - если задано значение *false*, все стандартные горячие клавиши будут отключены. Если задано значение *true*, все стандартные горячие клавиши включены
+- `hotkeys: object` - объект, в котором ключи соответствуют названиям горячих клавиш (например, `"ctrl+c"`, `"delete"`), а значения определяют их поведение следующим образом:
+ - `false` - отключает указанную горячую клавишу
+ - `(event: KeyboardEvent) => void` - определяет пользовательскую функцию, которая будет выполнена при нажатии этой горячей клавиши. Функция получает объект `KeyboardEvent` в качестве аргумента
+
+### Пример {#example}
+
+- отключение всех горячих клавиш
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ hotkeys: false,
+});
+~~~
+
+- отключение отдельных горячих клавиш (в примере ниже - `Ctrl+C` и `Ctrl+V`)
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ hotkeys: {
+ "ctrl+c": false,
+ "ctrl+v": false
+ },
+});
+~~~
+
+- переопределение поведения горячей клавиши
+
+~~~jsx
+let editor = null;
+
+editor = new dhx.DiagramEditor("editor_container", {
+ hotkeys: {
+ // Переопределяет клавишу "delete" для удаления выбранных элементов
+ "delete": () => editor.diagram.data.remove(editor.diagram.selection.getIds()),
+ // Добавляет пользовательскую горячую клавишу "Ctrl+F"
+ "ctrl+f": () => console.log("custom search"),
+ },
+});
+~~~
+
+### Описание {#description-1}
+
+В таблице ниже перечислены действия, выполняемые стандартными горячими клавишами, а также приведены строковые параметры клавиш, которые можно переопределить:
+
+#### Таблица горячих клавиш {#hotkeys-table}
+
+| Комбинация клавиш | Описание | Строковый параметр |
+|--------------------------------|------------------------------------------------------|-------------------------|
+| `Alt+1` | Показывает/скрывает Shapebar (только в режиме по умолчанию) | `"alt+1"` |
+| `Alt+2` | Показывает/скрывает Editbar | `"alt+2"` |
+| `Alt+3` | Показывает/скрывает область сетки | `"alt+3"` |
+| `Ctrl+Z` (Win), `CMD+Z` (macOS)| Отменяет последнее действие | `"ctrl+z"` |
+| `Ctrl+Shift+Z` (Win), `CMD+Shift+Z` (macOS)| Возвращает отмененное действие | `"ctrl+shift+z"` |
+| `Ctrl+D` (Win), `CMD+D` (macOS)| Дублирует выбранный элемент (только в режиме по умолчанию) | `"ctrl+d"` |
+| `Ctrl+C` (Win), `CMD+C` (macOS)| Копирует выбранный элемент (только в режиме по умолчанию) | `"ctrl+c"` |
+| `Ctrl+V` (Win), `CMD+V` (macOS)| Вставляет выбранный элемент (только в режиме по умолчанию) | `"ctrl+v"` |
+| `Ctrl+Alt+C` (Win), `CMD+Alt+C` (macOS)| Копирует стиль выбранного элемента (применимо для элементов одного типа)| `"alt+ctrl+c"` |
+| `Ctrl+Alt+V` (Win), `CMD+Alt+V` (macOS)| Применяет скопированный стиль к выбранному элементу (применимо для элементов одного типа)| `"alt+ctrl+v"` |
+| `Ctrl+A` (Win), `CMD+A` (macOS)| Выбирает все элементы | `"ctrl+a"` |
+| `Ctrl+Shift+A` (Win), `CMD+Shift+A` (macOS)| Снимает выделение со всех выбранных элементов | `"ctrl+shift+a"` |
+| `Shift+Left Click` | Добавляет элемент в список выбранных элементов | (Не является параметром `hotkeys` напрямую) |
+| `Alt+Left Click` | Снимает выделение с выбранного элемента | (Не является параметром `hotkeys` напрямую) |
+| `Delete` (`Del`), `Backspace` | Удаляет элемент(ы) | `"delete"`, `"backspace"` |
+| `Arrow-Left`, `Arrow-Right`, `Arrow-Up`, `Arrow-Down`| Перемещает выбранные элементы | `"arrowLeft"`, `"arrowRight"`, `"arrowUp"`, `"arrowDown"` |
+| `Ctrl+Mousewheel` (Win), `CMD+Mousewheel` (macOS)| Увеличивает/уменьшает значение масштаба | (Не является параметром `hotkeys` напрямую) |
+
+**Журнал изменений**:
+
+- Свойство `hotkeys` добавлено в v6.1
+
+**Связанный пример**:
+
+- [Diagram Editor. Управление добавлением, изменением и отключением горячих клавиш через API](https://snippet.dhtmlx.com/8ads5dq8)
\ No newline at end of file
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/itemsdraggable_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/itemsdraggable_property.md
new file mode 100644
index 000000000..15ceffacf
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/itemsdraggable_property.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: itemsDraggable
+title: Свойство itemsDraggable редактора Editor
+description: Изучите свойство itemsDraggable редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# itemsDraggable
+
+:::info
+Свойство работает только в режимах организационной диаграммы и ментальной карты. Перемещаемый элемент перетаскивается вместе со всеми дочерними элементами.
+:::
+
+### Описание {#description}
+
+@short: Необязательный параметр. Включает/отключает перетаскивание элемента от одного родительского элемента к другому
+
+### Использование {#usage}
+
+~~~jsx
+itemsDraggable?: boolean;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+itemsDraggable: true
+~~~
+
+### Пример {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor(document.body, {
+ type: "org", // org" или "mindmap"
+ itemsDraggable: false
+});
+~~~
+
+**Журнал изменений**: Добавлено в v4.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/lineconfig_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/lineconfig_property.md
new file mode 100644
index 000000000..6874ba68f
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/lineconfig_property.md
@@ -0,0 +1,85 @@
+---
+sidebar_label: lineConfig
+title: Свойство lineConfig
+description: Изучите свойство lineConfig в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# lineConfig
+
+### Описание {#description}
+
+@short: Необязательный параметр. Объект с конфигурацией по умолчанию для соединительных линий
+
+:::info
+Настройки `lineType`, `lineDirection` и `arrowsHidden` будут применяться к новым соединительным линиям, добавляемым через редактор.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+lineConfig?: {
+ lineType?: "dash" | "line",
+ lineDirection?: "backArrow" | "forwardArrow",
+ arrowsHidden?: boolean,
+ lineGap?: number,
+ connectType?: "elbow" | "straight" | "curved" // тип "curved" используется только в режиме ментальной карты
+};
+~~~
+
+### Параметры {#parameters}
+
+Объект `lineConfig` содержит следующие параметры:
+
+- `lineType` - (необязательный) тип новых соединительных линий по умолчанию. Значение применяется, если объект линии не содержит свойство `"type"`
+- `lineDirection` - (необязательный) направление новых соединительных линий
+- `arrowsHidden` - (необязательный) определяет, должны ли быть скрыты стрелки новых соединительных линий
+- `lineGap` - (необязательный) задает расстояние до прямоугольного изгиба соединительной линии
+- `connectType` - (необязательный) задает тип соединения линий: `"elbow"` | `"straight"` | `"curved"` (тип `"curved"` используется только в режиме ментальной карты Diagram). Значение применяется, если объект линии не содержит свойство `"connectType"`
+
+:::note
+Параметры `lineDirection`, `arrowsHidden` и `lineGap` работают только в режиме по умолчанию редактора (*type: `"default"`*)
+:::
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+lineConfig: {
+ lineType:"line",
+ lineDirection: "forwardArrow",
+ arrowsHidden: false,
+ lineGap: 10
+}
+~~~
+
+Параметр `connectType` имеет следующие значения по умолчанию:
+
+- `"elbow"` - для режима по умолчанию и режима организационной диаграммы
+- `"curved"` - для режима ментальной карты (этот тип используется только в режиме ментальной карты)
+
+### Пример {#example}
+
+~~~jsx {2-9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ lineConfig: {
+ lineType: "dash",
+ lineDirection: "backArrow",
+ arrowsHidden: true,
+ lineGap: 50,
+ connectType: "straight"
+ },
+ // другие параметры конфигурации
+});
+~~~
+
+Результат применения свойства `lineGap` показан на изображении ниже:
+
+
+
+**Журнал изменений**:
+
+- Параметр `connectType` добавлен в v6.1
+- Параметр `lineGap` добавлен в v5.0 (см. [статью о миграции](migration.md#42---50))
+- Добавлено в v4.2
+
+**Связанный пример**: [Diagram editor. Настройка типа линии (соединителя) по умолчанию. Попробуйте соединить фигуру A с фигурой B](https://snippet.dhtmlx.com/22abzn5m)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/magnetic_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/magnetic_property.md
new file mode 100644
index 000000000..5f4b5ad47
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/magnetic_property.md
@@ -0,0 +1,68 @@
+---
+sidebar_label: magnetic
+title: Свойство magnetic редактора
+description: Узнайте о свойстве magnetic редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# magnetic
+
+:::info
+Свойство `magnetic` работает только в режиме `default` редактора (`type: "default"`)
+:::
+
+### Описание {#description}
+
+@short: Необязательный параметр. Определяет, отображаются ли линии привязки при перемещении фигуры. Если да, позволяет настроить их внешний вид
+
+:::tip
+Линии привязки появляются, когда центральные или крайние боковые координаты перемещаемой фигуры совпадают с центральными или крайними боковыми координатами статичных фигур поблизости
+:::
+
+### Использование {#usage}
+
+~~~jsx
+magnetic?: {
+ show?: boolean,
+ lineWidth?: number,
+ lineColor?: string
+} | boolean;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+magnetic: true
+~~~
+
+Режим magnetic включается со следующей конфигурацией:
+
+~~~jsx
+magnetic: {
+ show: true,
+ lineWidth: 2,
+ lineColor: "#000"
+}
+~~~
+
+### Параметры {#parameters}
+
+В виде объекта свойство `magnetic` может включать следующие параметры:
+
+- `show` - (необязательный) включает/отключает линии привязки при перемещении фигуры
+- `lineWidth` - (необязательный) ширина линий привязки (по умолчанию 2)
+- `lineColor` - (необязательный) цвет линий привязки (по умолчанию *"#000"*)
+
+### Пример {#example}
+
+~~~jsx {3-7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ magnetic: {
+ show: true,
+ lineWidth: 2,
+ lineColor: "#B0B8CD"
+ }
+});
+~~~
+
+**Журнал изменений**: Параметр `show` добавлен в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/overview.md
new file mode 100644
index 000000000..0ae38f941
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/overview.md
@@ -0,0 +1,26 @@
+---
+sidebar_label: Свойства редактора
+title: Обзор свойств редактора
+description: Изучите свойства редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Обзор свойств редактора
+
+| Name | Описание |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------ |
+| [](api/diagram_editor/editor/config/autoplacement_property.md) | @getshort(api/diagram_editor/editor/config/autoplacement_property.md) |
+| [](api/diagram_editor/editor/config/connectionpoints_property.md) | @getshort(api/diagram_editor/editor/config/connectionpoints_property.md) |
+| [](api/diagram_editor/editor/config/defaults_property.md) | @getshort(api/diagram_editor/editor/config/defaults_property.md) |
+| [](api/diagram_editor/editor/config/editmode_property.md) | @getshort(api/diagram_editor/editor/config/editmode_property.md) |
+| [](api/diagram_editor/editor/config/grid_property.md) | @getshort(api/diagram_editor/editor/config/grid_property.md) |
+| [](api/diagram_editor/editor/config/gridstep_property.md) | @getshort(api/diagram_editor/editor/config/gridstep_property.md) |
+| [](api/diagram_editor/editor/config/hotkeys_property.md) | @getshort(api/diagram_editor/editor/config/hotkeys_property.md) |
+| [](api/diagram_editor/editor/config/itemsdraggable_property.md) | @getshort(api/diagram_editor/editor/config/itemsdraggable_property.md) |
+| [](api/diagram_editor/editor/config/lineconfig_property.md) | @getshort(api/diagram_editor/editor/config/lineconfig_property.md) |
+| [](api/diagram_editor/editor/config/magnetic_property.md) | @getshort(api/diagram_editor/editor/config/magnetic_property.md) |
+| [](api/diagram_editor/editor/config/resizepoints_property.md) | @getshort(api/diagram_editor/editor/config/resizepoints_property.md) |
+| [](api/diagram_editor/editor/config/scale_property.md) | @getshort(api/diagram_editor/editor/config/scale_property.md) |
+| [](api/diagram_editor/editor/config/shapetoolbar_property.md) | @getshort(api/diagram_editor/editor/config/shapetoolbar_property.md) |
+| [](api/diagram_editor/editor/config/shapetype_property.md) | @getshort(api/diagram_editor/editor/config/shapetype_property.md) |
+| [](api/diagram_editor/editor/config/type_property.md) | @getshort(api/diagram_editor/editor/config/type_property.md) |
+| [](api/diagram_editor/editor/config/view_property.md) | @getshort(api/diagram_editor/editor/config/view_property.md) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/resizepoints_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/resizepoints_property.md
new file mode 100644
index 000000000..853e320a6
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/resizepoints_property.md
@@ -0,0 +1,35 @@
+---
+sidebar_label: resizePoints
+title: Свойство resizePoints редактора
+description: Узнайте о свойстве resizePoints редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# resizePoints
+
+### Описание {#description}
+
+@short: Необязательный параметр. Включает/отключает возможность изменения размера фигур с помощью элементов управления размером
+
+### Использование {#usage}
+
+~~~jsx
+resizePoints?: boolean;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+resizePoints: true
+~~~
+
+### Пример {#example}
+
+~~~jsx {3}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default", // "org" | "mindmap" | "default"
+ resizePoints: false, // по умолчанию true
+ // остальные настройки
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/scale_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/scale_property.md
new file mode 100644
index 000000000..833336654
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/scale_property.md
@@ -0,0 +1,31 @@
+---
+sidebar_label: scale
+title: Свойство scale редактора
+description: Узнайте о свойстве scale редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# scale
+
+### Описание {#description}
+
+@short: Необязательный параметр. Определяет масштаб редактора диаграмм
+
+### Использование {#usage}
+
+~~~jsx
+scale?: number;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+scale: 1
+~~~
+
+### Пример {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ scale: 0.9
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetoolbar_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetoolbar_property.md
new file mode 100644
index 000000000..ef1f499c9
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetoolbar_property.md
@@ -0,0 +1,89 @@
+---
+sidebar_label: shapeToolbar
+title: Свойство shapeToolbar редактора
+description: Узнайте о свойстве shapeToolbar редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# shapeToolbar
+
+### Описание {#description}
+
+@short: Необязательный параметр. Определяет, какие элементы управления отображаются в персональной панели инструментов элементов диаграммы
+
+### Использование {#usage}
+
+~~~jsx
+shapeToolbar?: boolean | array;
+~~~
+
+### Параметры {#parameters}
+
+В виде массива свойство `shapeToolbar` может включать:
+
+- значение типа *boolean* - для отображения/скрытия панели инструментов по умолчанию
+- строковые значения с именами элементов управления панели инструментов. Порядок значений в массиве определяет порядок отображения элементов управления на панели инструментов. Доступны следующие значения:
+ - в режиме по умолчанию: `"copy"` | `"connect"` | `"remove"` | `"addRowLast"` | `"addColumnLast"`
+ - в режиме организационной диаграммы: `"add"` | `"horizontal"` | `"vertical"` | `"remove"`
+ - в режиме интеллект-карты: `"add"` | `"addLeft"` | `"addRight"` | `"remove"`
+- набор объектов иконок. Каждый объект иконки может иметь следующие свойства:
+ - `id: string` - (обязательный) идентификатор иконки. Обратите внимание, что использование стандартных имён элементов управления панели инструментов в качестве идентификаторов новых элементов управления запрещено
+ - `content: string` - (обязательный) содержимое иконки. Может содержать HTML-элемент с именем класса иконки
+ - `check: function` - (необязательный) проверяет, должна ли иконка применяться к фигуре. Функция принимает объект фигуры и возвращает *true*, если иконка будет отображена для этой фигуры
+ - `css: function` - (необязательный) функция, которая возвращает имя (имена) CSS-класса(ов), которые должны применяться к фигуре
+ - `tooltip: string` - (необязательный) подсказка, которая появляется при наведении курсора на иконку
+
+### Пример {#example}
+
+~~~jsx title="Настройка свойства в виде булевого значения"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ shapeToolbar: false, // по умолчанию true
+});
+~~~
+
+~~~jsx title="Настройка свойства в виде массива имён иконок или объектов иконок"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ shapeToolbar: [
+ "add",
+ // добавление пользовательского элемента управления "download"
+ {
+ id: "download",
+ content: "",
+ tooltip: "Download to PDF"
+ },
+ {
+ id: "remove",
+ content: "",
+ check: item => item.parent,
+ css: () => "dhx_diagram_toolbar__icon--remove",
+ tooltip: "Remove"
+ }
+ ]
+});
+~~~
+
+### Переопределение панели инструментов по умолчанию для отдельных элементов {#redefining-the-default-toolbar-for-certain-items}
+
+Возможно, вам потребуется задать для некоторых элементов особые элементы управления панели инструментов, в то время как для остальных элементов будет использоваться панель по умолчанию. В этом случае необходимо включить панель инструментов по умолчанию, указав значение *true* в массиве `shapeToolbar`, и добавить нужный объект иконки, который будет содержать функцию check, определяющую, к какой фигуре будет применяться иконка.
+
+~~~jsx title="Настройка иконки загрузки для элементов с типом start"
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeToolbar:
+ [
+ true,
+ {
+ id: "download",
+ content: "",
+ tooltip: "Download to PDF",
+ check: item => item.type === "start"
+ }
+ ]
+});
+~~~
+
+**Журнал изменений:** Параметр `tooltip` объекта иконки добавлен в v5.0
+
+**Полезная статья**: [Область сетки](guides/diagram_editor/grid_area.md#configuring-the-toolbar-of-an-item)
+
+**Связанный пример**: [Diagram Editor. Режим организационной диаграммы. Настройка панели инструментов фигур](https://snippet.dhtmlx.com/b2agwets)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetype_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetype_property.md
new file mode 100644
index 000000000..401c671cc
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetype_property.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: shapeType
+title: Свойство shapeType редактора Editor
+description: Вы можете узнать о свойстве shapeType редактора Editor в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник по API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# shapeType
+
+### Описание {#description}
+
+@short: Необязательный. Тип элементов
+
+Это значение применяется, если объект фигуры не содержит свойства `"type"`
+
+### Использование {#usage}
+
+~~~jsx
+shapeType?: string;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+В режиме по умолчанию редактора Editor (type: `"default"`):
+
+~~~jsx
+shapeType: "rectangle"
+~~~
+
+В режиме организационной диаграммы редактора Editor (type: `"card"`):
+
+~~~jsx
+shapeType: "card"
+~~~
+
+В режиме ментальной карты редактора Editor (type: `"topic"`):
+
+~~~jsx
+shapeType: "topic"
+~~~
+
+### Пример {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeType: "circle"
+});
+~~~
+
+**Полезная статья:** [Фигуры по умолчанию](shapes/default_shapes.md)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/type_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/type_property.md
new file mode 100644
index 000000000..889f7928a
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/type_property.md
@@ -0,0 +1,39 @@
+---
+sidebar_label: type
+title: Свойство type редактора Editor
+description: Вы можете узнать о свойстве type редактора Editor в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник по API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# type
+
+### Описание {#description}
+
+@short: Обязательный. Определяет режим работы редактора Editor
+
+### Использование {#usage}
+
+~~~jsx
+type?: "default" | "org" | "mindmap";
+~~~
+
+### Подробности {#details}
+
+Diagram Editor можно инициализировать в одном из трёх режимов:
+
+- `type:"default"` используется для визуализации связей между сущностями
+
+
+
+- `type:"org"` используется для отображения структуры группы людей путём представления их взаимосвязей в иерархическом порядке
+
+
+
+- `type:"mindmap"` используется для организации информации по определённой теме путём представления основной идеи, окружённой связанными с ней идеями
+
+
+
+**Полезные статьи**:
+
+- [Обзор](editor_overview.md)
+- [Как начать работу с Diagram Editor](guides/diagram_editor/initialization.md)
+
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/view_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/view_property.md
new file mode 100644
index 000000000..247cba05b
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/view_property.md
@@ -0,0 +1,58 @@
+---
+sidebar_label: view
+title: Свойство view редактора Editor
+description: Вы можете узнать о свойстве view редактора Editor в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник по API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# view
+
+### Описание {#description}
+
+@short: Объект, который настраивает представления Toolbar, Shapebar и Editbar в Diagram Editor
+
+### Использование {#usage}
+
+~~~jsx
+view: {
+ toolbar?: boolean | object,
+ shapebar?: boolean | object,
+ editbar?: boolean | object
+};
+~~~
+
+### Параметры {#parameters}
+
+- `toolbar` - (необязательно) позволяет показать/скрыть `Toolbar` (если *boolean*) или настроить его внешний вид (если *object*). Подробнее о настройке панели инструментов см. раздел [Toolbar API](api/diagram_editor/toolbar/api_overview.md)
+- `shapebar` - (необязательно) позволяет показать/скрыть `Shapebar` (если *boolean*) или настроить его внешний вид (если *object*). Подробнее о настройке Shapebar см. раздел [Shapebar API](api/diagram_editor/shapebar/api_overview.md)
+- `editbar` - (необязательно) позволяет показать/скрыть `Editbar` (если *boolean*) или настроить его внешний вид (если *object*). Подробнее о настройке Editbar см. раздел [Editbar API](api/diagram_editor/editbar/api_overview.md)
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+view: {
+ toolbar: true,
+ shapebar: true,
+ editbar: true
+}
+~~~
+
+### Пример {#example}
+
+~~~jsx {3-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: {
+ css: "toolbar_custom",
+ data: ["file", "separator", "scale"]
+ },
+ shapebar: {
+ width: 400
+ },
+ editbar: false
+ }
+ // другие настройки
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftergroupmove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftergroupmove_event.md
new file mode 100644
index 000000000..238836628
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftergroupmove_event.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: afterGroupMove
+title: Событие afterGroupMove редактора Editor
+description: Вы можете узнать о событии afterGroupMove редактора Editor в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник по API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# afterGroupMove
+
+### Описание {#description}
+
+@short: Происходит при перемещении группы или свимлейна на один шаг сетки
+
+:::note
+Событие срабатывает только для целевого элемента, независимо от количества выбранных элементов. Идентификаторы перетаскиваемых элементов передаются в параметре `batch` колбека.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+"afterGroupMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом со следующими параметрами:
+
+ - `id` - идентификатор элемента
+ - `batch` - массив идентификаторов перемещённых элементов
+ - `coords` - объект с координатами `x` и `y` положения группы или свимлейна после перемещения, где:
+ - `x` - горизонтальная позиция группы/свимлейна при перемещении слева направо
+ - `y` - вертикальная позиция группы/свимлейна при перемещении сверху вниз
+ - `event` - объект события
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-13}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// привязка обработчика к событию
+editor.events.on("afterGroupMove", ({ id, coords }) => {
+ console.log(`
+ Group ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**Журнал изменений**:
+
+- Параметр `batch` был добавлен в v6.0
+- Начиная с v6.0, колбек принимает объект в качестве параметра
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemcatch_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemcatch_event.md
new file mode 100644
index 000000000..e46f97720
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemcatch_event.md
@@ -0,0 +1,56 @@
+---
+sidebar_label: afterItemCatch
+title: Событие afterItemCatch редактора Editor
+description: Вы можете узнать о событии afterItemCatch редактора Editor в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник по API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# afterItemCatch
+
+### Описание {#description}
+
+@short: Происходит после захвата элемента
+
+:::info
+Событие работает только в режимах **организационной диаграммы** и `mindmap` библиотеки Diagram, свойство `itemsDraggable` должно быть установлено в `true`.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+"afterItemCatch": ({
+ id: string | number,
+ targetId: string | number,
+ batch: (string | number)[],
+ event: PointerEvent
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом со следующими параметрами:
+
+ - `id` - идентификатор перемещённого элемента
+ - `targetId` - идентификатор целевого элемента
+ - `batch` - массив идентификаторов перемещённых элементов
+ - `event` - объект события
+
+### Пример {#example}
+
+~~~jsx {6-11}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// привязка обработчика к событию
+editor.events.on("afterItemCatch", ({ id, targetId }) => {
+ console.log(`
+ item ${id} is caught by the item ${targetId}
+ `);
+});
+~~~
+
+**Журнал изменений**:
+
+- Параметр `batch` был добавлен в v6.0
+- Начиная с v6.0, колбек принимает объект в качестве параметра
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemmove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemmove_event.md
new file mode 100644
index 000000000..de68947c9
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemmove_event.md
@@ -0,0 +1,75 @@
+---
+sidebar_label: afterItemMove
+title: Событие afterItemMove редактора
+description: Здесь вы можете узнать о событии afterItemMove редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загрузите бесплатную ознакомительную версию DHTMLX Diagram сроком на 30 дней.
+---
+
+# afterItemMove
+
+### Описание {#description}
+
+@short: Срабатывает при перемещении элемента на один шаг сетки
+
+:::note
+Событие не работает с объектом `line`.
+
+Событие срабатывает только для целевого элемента, независимо от количества выбранных элементов. Идентификаторы перетаскиваемых элементов передаются в параметре `batch` колбека.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+"afterItemMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом, содержащим следующие параметры:
+
+- `id` - идентификатор элемента
+- `batch` - массив идентификаторов перемещённых элементов
+- `coords` - объект с координатами `x` и `y` положения элемента после перемещения, где:
+ - `x` - горизонтальное положение элемента при перемещении слева направо
+ - `y` - вертикальное положение элемента при перемещении сверху вниз
+- `event` - объект события
+
+:::info
+Для обработки внутренних событий Diagram Editor используйте метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-13}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика к событию
+editor.events.on("afterItemMove", ({ id, coords }) => {
+ console.log(`
+ Item ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**Журнал изменений**:
+
+- Параметр `batch` добавлен в v6.0
+- Колбек принимает объект в качестве параметра начиная с v6.0
+
+**Похожее API**:
+
+- [`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md)
+- [`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md)
+
+**Связанный пример**:
+
+- [Diagram Editor. Управление перемещением, поворотом и изменением размера фигур с помощью событий](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemresize_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemresize_event.md
new file mode 100644
index 000000000..53ce7b3b5
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemresize_event.md
@@ -0,0 +1,74 @@
+---
+sidebar_label: afterItemResize
+title: Событие afterItemResize редактора
+description: Здесь вы можете узнать о событии afterItemResize редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загрузите бесплатную ознакомительную версию DHTMLX Diagram сроком на 30 дней.
+---
+
+# afterItemResize
+
+### Описание {#description}
+
+@short: Срабатывает после изменения размера элемента
+
+### Использование {#usage}
+
+~~~jsx
+"afterItemResize": ({
+ id: string | number,
+ width: number,
+ height: number,
+ x: number,
+ y: number,
+ dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "ne"
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом, содержащим следующие параметры:
+
+- `id` - идентификатор элемента, размер которого изменён
+- `width` - новая ширина элемента
+- `height` - новая высота элемента
+- `x` - новая координата X элемента
+- `y` - новая координата Y элемента
+- `dir` - направление операции изменения размера:
+ - `"n"` - север
+ - `"ne"` - северо-восток
+ - `"e"` - восток
+ - `"se"` - юго-восток
+ - `"s"` - юг
+ - `"sw"` - юго-запад
+ - `"w"` - запад
+ - `"nw"` - северо-запад
+
+### Пример {#example}
+
+~~~jsx
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика к событию
+editor.events.on("afterItemResize", ({ id, width, height }) => {
+ console.log(`
+ The item ${id} has been resized:
+ width: ${width}
+ height: ${height}
+ `);
+});
+~~~
+
+**Журнал изменений**:
+
+- Событие добавлено в v6.1
+
+**Похожее API**:
+
+- [`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md)
+- [`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md)
+
+**Связанный пример**:
+
+- [Diagram Editor. Управление перемещением, поворотом и изменением размера фигур с помощью событий](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemrotate_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemrotate_event.md
new file mode 100644
index 000000000..d66776275
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemrotate_event.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: afterItemRotate
+title: Событие afterItemRotate редактора
+description: Здесь вы можете узнать о событии afterItemRotate редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загрузите бесплатную ознакомительную версию DHTMLX Diagram сроком на 30 дней.
+---
+
+# afterItemRotate
+
+### Описание {#description}
+
+@short: Срабатывает после поворота элемента
+
+### Использование {#usage}
+
+~~~jsx
+"afterItemRotate": ({
+ id: string | number,
+ angle: number
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом, содержащим следующие параметры:
+
+- `id` - идентификатор повёрнутого элемента
+- `angle` - новый угол поворота элемента в градусах
+
+### Пример {#example}
+
+~~~jsx
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика к событию
+editor.events.on("afterItemRotate", ({ id, angle }) => {
+ console.log(`The item ${id} has been rotated by the angle: ${angle}`);
+});
+~~~
+
+**Журнал изменений**:
+
+- Событие добавлено в v6.1
+
+**Похожее API**:
+
+- [`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md)
+- [`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md)
+
+**Связанный пример**:
+
+- [Diagram Editor. Управление перемещением, поворотом и изменением размера фигур с помощью событий](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afterlinetitlemove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afterlinetitlemove_event.md
new file mode 100644
index 000000000..9de20c72f
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afterlinetitlemove_event.md
@@ -0,0 +1,57 @@
+---
+sidebar_label: afterLineTitleMove
+title: Событие afterLineTitleMove редактора
+description: Здесь вы можете узнать о событии afterLineTitleMove редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загрузите бесплатную ознакомительную версию DHTMLX Diagram сроком на 30 дней.
+---
+
+# afterLineTitleMove
+
+### Описание {#description}
+
+@short: Срабатывает при перемещении текстового элемента линии на один шаг сетки
+
+### Использование {#usage}
+
+~~~jsx
+"afterLineTitleMove": ({
+ event: PointerEvent,
+ lineId: string | number,
+ titleId: string | number,
+ coords: object
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом, содержащим следующие параметры:
+
+ - `event` - объект события
+ - `lineId` - идентификатор линии
+ - `titleId` - идентификатор текстового элемента линии
+ - `coords` - объект с координатами `x` и `y` положения текстового элемента после перемещения, где:
+ - `x` - горизонтальное положение текстового элемента при перемещении слева направо
+ - `y` - вертикальное положение текстового элемента при перемещении сверху вниз
+
+:::info
+Для обработки внутренних событий Diagram Editor используйте метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-13}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика к событию
+editor.events.on("afterLineTitleMove", ({ titleId, coords }) => {
+ console.log(`
+ LineTitle ${titleId} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**Журнал изменений**: Колбек принимает объект в качестве параметра начиная с v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapeiconclick_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapeiconclick_event.md
new file mode 100644
index 000000000..341eef6ef
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapeiconclick_event.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: afterShapeIconClick
+title: Событие afterShapeIconClick редактора
+description: Здесь вы можете узнать о событии afterShapeIconClick редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загрузите бесплатную ознакомительную версию DHTMLX Diagram сроком на 30 дней.
+---
+
+# afterShapeIconClick
+
+### Описание {#description}
+
+@short: Срабатывает после нажатия элемента управления на индивидуальной панели инструментов элемента
+
+### Использование {#usage}
+
+~~~jsx
+"afterShapeIconClick": (
+ iconId: string,
+ shape: object
+) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается со следующими параметрами:
+
+- `iconId` - тип или идентификатор элемента управления панели инструментов
+- `shape` - объект с конфигурацией элемента
+
+:::info
+Для обработки внутренних событий Diagram Editor используйте метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-11}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика к событию
+editor.events.on("afterShapeIconClick", (iconId, shape) => {
+ console.log(`
+ You've clicked the ${iconId} toolbar control of the shape ${shape.id}
+ `);
+});
+~~~
+
+**Журнал изменений**: Добавлено в v3.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapemove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapemove_event.md
new file mode 100644
index 000000000..b57279f65
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapemove_event.md
@@ -0,0 +1,65 @@
+---
+sidebar_label: afterShapeMove
+title: Событие afterShapeMove редактора
+description: Изучите событие afterShapeMove редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо-версии, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# afterShapeMove
+
+### Описание {#description}
+
+@short: Срабатывает, когда фигура перемещается на один шаг сетки
+
+:::note
+Событие срабатывает только для целевого элемента, независимо от количества выбранных элементов. Идентификаторы перетаскиваемых элементов передаются в параметре `batch` колбека.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+"afterShapeMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent,
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом со следующими параметрами:
+
+ - `id` - идентификатор фигуры
+ - `batch` - массив идентификаторов перемещённых элементов
+ - `coords` - объект с координатами `x` и `y` положения фигуры после перемещения, где:
+ - `x` - горизонтальное положение фигуры при перемещении слева направо
+ - `y` - вертикальное положение фигуры при перемещении сверху вниз
+ - `event` - объект события
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-13}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// прикрепление обработчика к событию
+editor.events.on("afterShapeMove", ({ id, coords }) => {
+ console.log(`
+ Shape ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**Журнал изменений**:
+
+- Параметр `batch` добавлен в v6.0
+- Начиная с v6.0, колбек принимает объект в качестве параметра
+- Параметры `id` и `coords` добавлены в v4.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforegroupmove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforegroupmove_event.md
new file mode 100644
index 000000000..547b1c451
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforegroupmove_event.md
@@ -0,0 +1,69 @@
+---
+sidebar_label: beforeGroupMove
+title: Событие beforeGroupMove редактора
+description: Изучите событие beforeGroupMove редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо-версии, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# beforeGroupMove
+
+### Описание {#description}
+
+@short: Срабатывает перед перемещением группы или дорожки
+
+:::note
+Событие срабатывает только для целевого элемента, независимо от количества выбранных элементов. Идентификаторы перетаскиваемых элементов передаются в параметре `batch` колбека.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+"beforeGroupMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом со следующими параметрами:
+
+ - `id` - идентификатор элемента
+ - `batch` - массив идентификаторов перемещённых элементов
+ - `coords` - объект с координатами `x` и `y` положения группы или дорожки до перемещения, где:
+ - `x` - горизонтальное положение группы/дорожки при перемещении слева направо
+ - `y` - вертикальное положение группы/дорожки при перемещении сверху вниз
+ - `event` - объект события
+
+### Возвращаемое значение {#returns}
+
+Колбек возвращает `false`, чтобы предотвратить перемещение группы или дорожки; в противном случае — `true`
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-14}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// прикрепление обработчика к событию
+editor.events.on("beforeGroupMove", ({ id, coords }) => {
+ console.log(`
+ Group ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+ return true;
+});
+~~~
+
+**Журнал изменений**:
+
+- Параметр `batch` добавлен в v6.0
+- Начиная с v6.0, колбек принимает объект в качестве параметра
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemcatch_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemcatch_event.md
new file mode 100644
index 000000000..8ff1da9da
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemcatch_event.md
@@ -0,0 +1,73 @@
+---
+sidebar_label: beforeItemCatch
+title: Событие beforeItemCatch редактора
+description: Изучите событие beforeItemCatch редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо-версии, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# beforeItemCatch
+
+### Описание {#description}
+
+@short: Срабатывает перед захватом элемента
+
+:::info
+Событие работает только в режимах **организационной диаграммы** и `mindmap` компонента Diagram, при этом свойство `itemsDraggable` должно быть установлено в значение `true`.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+"beforeItemCatch": ({
+ id: string | number,
+ targetId: string | number,
+ batch: (string | number)[],
+ event: PointerEvent
+}) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом со следующими параметрами:
+
+ - `id` - идентификатор перемещаемого элемента
+ - `targetId` - идентификатор целевого элемента
+ - `batch` - массив идентификаторов перемещённых элементов
+ - `event` - объект события
+
+### Возвращаемое значение {#returns}
+
+Колбек возвращает `false`, чтобы предотвратить захват элемента; в противном случае — `true`
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-20}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// прикрепление обработчика к событию
+editor.events.on("beforeItemCatch", ({ id, targetId }) => {
+ if (targetId === "2.1"){
+ console.log(`
+ Item ${id} won't be be caught by the item "2.1"
+ `);
+ return false;
+ }
+ else{
+ console.log(`
+ Item ${id} will be caught by the item ${targetId}
+ `);
+ return true;
+ }
+});
+~~~
+
+**Журнал изменений**:
+
+- Параметр `batch` добавлен в v6.0
+- Начиная с v6.0, колбек принимает объект в качестве параметра
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemmove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemmove_event.md
new file mode 100644
index 000000000..d20bbf51f
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemmove_event.md
@@ -0,0 +1,80 @@
+---
+sidebar_label: beforeItemMove
+title: Событие beforeItemMove редактора
+description: Изучите событие beforeItemMove редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо-версии, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# beforeItemMove
+
+### Описание {#description}
+
+@short: Срабатывает перед перемещением элемента
+
+:::note
+Событие не работает с объектом `line`.
+
+Событие срабатывает только для целевого элемента, независимо от количества выбранных элементов. Идентификаторы перетаскиваемых элементов передаются в параметре `batch` колбека.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+"beforeItemMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent,
+}) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом со следующими параметрами:
+
+ - `id` - идентификатор элемента
+ - `batch` - массив идентификаторов перемещённых элементов
+ - `coords` - объект с координатами `x` и `y` положения элемента до перемещения, где:
+ - `x` - горизонтальное положение элемента при перемещении слева направо
+ - `y` - вертикальное положение элемента при перемещении сверху вниз
+ - `event` - объект события
+
+### Возвращаемое значение {#returns}
+
+Колбек возвращает `false`, чтобы предотвратить перемещение элемента; в противном случае — `true`
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-14}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// прикрепление обработчика к событию
+editor.events.on("beforeItemMove", ({ id, coords }) => {
+ console.log(`
+ Item ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+ return true;
+});
+~~~
+
+**Журнал изменений**:
+
+- Параметр `batch` добавлен в v6.0
+- Начиная с v6.0, колбек принимает объект в качестве параметра
+
+**Похожее API**:
+
+- [`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md)
+- [`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md)
+
+**Связанный пример**:
+
+- [Diagram Editor. Управление перемещением, поворотом и изменением размера фигур с помощью событий](https://snippet.dhtmlx.com/qldjbbm7)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemresize_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemresize_event.md
new file mode 100644
index 000000000..374d43e8e
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemresize_event.md
@@ -0,0 +1,78 @@
+---
+sidebar_label: beforeItemResize
+title: Событие beforeItemResize редактора
+description: Изучите событие beforeItemResize редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо-версии, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# beforeItemResize
+
+### Описание {#description}
+
+@short: Срабатывает перед изменением размера элемента
+
+### Использование {#usage}
+
+~~~jsx
+"beforeItemResize": ({
+ id: string | number,
+ width: number,
+ height: number,
+ x: number,
+ y: number,
+ dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "ne"
+}) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом со следующими параметрами:
+
+- `id` - идентификатор элемента, размер которого изменяется
+- `width` - новая ширина элемента
+- `height` - новая высота элемента
+- `x` - новая координата X элемента
+- `y` - новая координата Y элемента
+- `dir` - направление операции изменения размера:
+ - `"n"` - север
+ - `"ne"` - северо-восток
+ - `"e"` - восток
+ - `"se"` - юго-восток
+ - `"s"` - юг
+ - `"sw"` - юго-запад
+ - `"w"` - запад
+ - `"nw"` - северо-запад
+
+### Возвращаемое значение {#returns}
+
+Колбек возвращает `false`, чтобы предотвратить изменение размера элемента; в противном случае — `true`.
+
+### Пример {#example}
+
+~~~jsx
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// прикрепление обработчика к событию
+editor.events.on("beforeItemResize", ({ id, width, height }) => {
+ if (width < 50 || height < 50) {
+ console.log(`Preventing resize of item ${id} because it's too small.`);
+ return false; // Предотвращение изменения размера
+ }
+ console.log(`Resizing the item ${id} to the width: ${width}, height: ${height}`);
+});
+~~~
+
+**Журнал изменений**:
+
+- Событие добавлено в v6.1
+
+**Похожее API**:
+
+- [`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md)
+- [`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md)
+
+**Связанный пример**:
+
+- [Diagram Editor. Управление перемещением, поворотом и изменением размера фигур с помощью событий](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemrotate_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemrotate_event.md
new file mode 100644
index 000000000..6f8dcba3b
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemrotate_event.md
@@ -0,0 +1,62 @@
+---
+sidebar_label: beforeItemRotate
+title: beforeItemRotate — событие Editor
+description: Изучите событие beforeItemRotate редактора Editor в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# beforeItemRotate
+
+### Описание {#description}
+
+@short: Срабатывает перед поворотом элемента
+
+### Использование {#usage}
+
+~~~jsx
+"beforeItemRotate": ({
+ id: string | number,
+ angle: number
+}) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом, содержащим следующие параметры:
+
+- `id` - идентификатор поворачиваемого элемента
+- `angle` - новый угол поворота элемента в градусах
+
+### Возвращаемое значение {#returns}
+
+Колбек возвращает `false`, чтобы предотвратить поворот элемента; в противном случае — `true`.
+
+### Пример {#example}
+
+~~~jsx
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика события
+editor.events.on("beforeItemRotate", ({ id, angle }) => {
+ if (angle > 90 && angle < 270) {
+ console.log(`Preventing rotation of the item ${id} by this angle.`);
+ return false; // Предотвратить поворот
+ }
+ console.log(`Rotating the item ${id} by the angle: ${angle}`);
+});
+~~~
+
+**Журнал изменений**:
+
+- Событие добавлено в v6.1
+
+**Похожее API**:
+
+- [`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md)
+- [`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md)
+
+**Связанный пример**:
+
+- [Diagram Editor. Управление перемещением, поворотом и изменением размера фигур с помощью событий](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforelinetitlemove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforelinetitlemove_event.md
new file mode 100644
index 000000000..a009df68e
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforelinetitlemove_event.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: beforeLineTitleMove
+title: beforeLineTitleMove — событие Editor
+description: Изучите событие beforeLineTitleMove редактора Editor в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# beforeLineTitleMove
+
+### Описание {#description}
+
+@short: Срабатывает перед перемещением текстового элемента линии
+
+### Использование {#usage}
+
+~~~jsx
+"beforeLineTitleMove": ({
+ event: PointerEvent,
+ lineId: string | number,
+ titleId: string | number,
+ coords: obj
+}) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом, содержащим следующие параметры:
+
+ - `event` - объект события
+ - `lineId` - идентификатор линии
+ - `titleId` - идентификатор текстового элемента линии
+ - `coords` - объект с координатами `x` и `y` положения текстового элемента до перемещения, где:
+ - `x` - горизонтальное положение текстового элемента при перемещении слева направо
+ - `y` - вертикальное положение текстового элемента при перемещении сверху вниз
+
+### Возвращаемое значение {#returns}
+
+Колбек возвращает `false`, чтобы предотвратить перемещение текстового элемента линии; в противном случае — `true`
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-14}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика события
+editor.events.on("beforeLineTitleMove", ({ titleId, coords }) => {
+ console.log(`
+ LineTitle ${titleId} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+ return true;
+});
+~~~
+
+**Журнал изменений**:
+
+- Колбек принимает объект в качестве параметра начиная с v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapeiconclick_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapeiconclick_event.md
new file mode 100644
index 000000000..9ade28008
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapeiconclick_event.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: beforeShapeIconClick
+title: beforeShapeIconClick — событие Editor
+description: Изучите событие beforeShapeIconClick редактора Editor в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# beforeShapeIconClick
+
+### Описание {#description}
+
+@short: Срабатывает перед нажатием элемента управления на панели инструментов элемента
+
+### Использование {#usage}
+
+~~~jsx
+"beforeShapeIconClick": (
+ iconId: string,
+ shape: object
+) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается со следующими параметрами:
+
+- `iconId` - тип или идентификатор элемента управления панели инструментов
+- `shape` - объект с конфигурацией элемента
+
+### Возвращаемое значение {#returns}
+
+Колбек возвращает `false`, чтобы предотвратить нажатие элемента управления панели инструментов; в противном случае — `true`
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-12}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика события
+editor.events.on("beforeShapeIconClick", (iconId, shape) => {
+ console.log(`
+ You will click the ${iconId} toolbar control of the shape ${shape.id}
+ `);
+ return true;
+});
+~~~
+
+**Журнал изменений**: Добавлено в v3.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapemove_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapemove_event.md
new file mode 100644
index 000000000..61f444d22
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapemove_event.md
@@ -0,0 +1,70 @@
+---
+sidebar_label: beforeShapeMove
+title: beforeShapeMove — событие Editor
+description: Изучите событие beforeShapeMove редактора Editor в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# beforeShapeMove
+
+### Описание {#description}
+
+@short: Срабатывает перед перемещением фигуры
+
+:::note
+Событие срабатывает только для целевого элемента независимо от количества выбранных элементов. Идентификаторы перетаскиваемых элементов передаются в параметре `batch` колбека.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+"beforeShapeMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом, содержащим следующие параметры:
+
+ - `id` - идентификатор фигуры
+ - `batch` - массив идентификаторов перемещённых элементов
+ - `coords` - объект с координатами `x` и `y` положения фигуры до перемещения, где:
+ - `x` - горизонтальное положение фигуры при перемещении слева направо
+ - `y` - вертикальное положение фигуры при перемещении сверху вниз
+ - `event` - объект события
+
+### Возвращаемое значение {#returns}
+
+Колбек возвращает `false`, чтобы предотвратить перемещение фигуры; в противном случае — `true`
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-14}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика события
+editor.events.on("beforeShapeMove", ({ id, coords }) => {
+ console.log(`
+ Shape ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+ return true;
+});
+~~~
+
+**Журнал изменений**:
+
+- Параметр `batch` добавлен в v6.0
+- Колбек принимает объект в качестве параметра начиная с v6.0
+- Параметры `id` и `coords` добавлены в v4.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/groupmoveend_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/groupmoveend_event.md
new file mode 100644
index 000000000..4278ccf55
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/groupmoveend_event.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: groupMoveEnd
+title: groupMoveEnd — событие Editor
+description: Изучите событие groupMoveEnd редактора Editor в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# groupMoveEnd
+
+### Описание {#description}
+
+@short: Срабатывает после перемещения группы или дорожки
+
+:::note
+Событие срабатывает только для целевого элемента независимо от количества выбранных элементов. Идентификаторы перетаскиваемых элементов передаются в параметре `batch` колбека.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+"groupMoveEnd": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent,
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом, содержащим следующие параметры:
+
+ - `id` - идентификатор элемента
+ - `batch` - массив идентификаторов перемещённых элементов
+ - `coords` - объект с координатами `x` и `y` положения группы или дорожки после перемещения, где:
+ - `x` - горизонтальное положение группы/дорожки при перемещении слева направо
+ - `y` - вертикальное положение группы/дорожки при перемещении сверху вниз
+ - `event` - объект события
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-13}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика события
+editor.events.on("groupMoveEnd", ({ id, coords }) => {
+ console.log(`
+ Group ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**Журнал изменений**:
+
+- Параметр `batch` добавлен в v6.0
+- Колбек принимает объект в качестве параметра начиная с v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemmoveend_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemmoveend_event.md
new file mode 100644
index 000000000..e2e8d8d2b
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemmoveend_event.md
@@ -0,0 +1,72 @@
+---
+sidebar_label: itemMoveEnd
+title: Событие itemMoveEnd редактора
+description: Узнайте больше о событии itemMoveEnd редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную пробную версию DHTMLX Diagram сроком на 30 дней.
+---
+
+# itemMoveEnd
+
+### Описание {#description}
+
+@short: Срабатывает после перемещения элемента
+
+:::note
+Событие не работает с объектом `line`.
+
+Событие срабатывает только для целевого элемента, независимо от количества выбранных элементов. Идентификаторы перетаскиваемых элементов передаются в параметре `batch` колбека.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+"itemMoveEnd": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом со следующими параметрами:
+
+ - `id` - идентификатор элемента
+ - `batch` - массив идентификаторов перемещённых элементов
+ - `coords` - объект с координатами `x` и `y` позиции элемента после перемещения, где:
+ - `x` - горизонтальная позиция элемента при перемещении слева направо
+ - `y` - вертикальная позиция элемента при перемещении сверху вниз
+ - `event` - объект события
+
+### Пример {#example}
+
+~~~jsx {6-13}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика события
+editor.events.on("itemMoveEnd", ({ id, coords }) => {
+ console.log(`
+ Item ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**Журнал изменений**:
+
+- Параметр `batch` добавлен в v6.0
+- Начиная с v6.0 колбек принимает объект в качестве параметра
+
+**Похожее API**:
+
+- [`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md)
+- [`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md)
+
+**Связанный пример**:
+
+- [Diagram Editor. Управление перемещением, поворотом и изменением размера фигур через события](https://snippet.dhtmlx.com/qldjbbm7)
+
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemresizeend_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemresizeend_event.md
new file mode 100644
index 000000000..325a8e83a
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemresizeend_event.md
@@ -0,0 +1,76 @@
+---
+sidebar_label: itemResizeEnd
+title: Событие itemResizeEnd редактора
+description: Узнайте больше о событии itemResizeEnd редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную пробную версию DHTMLX Diagram сроком на 30 дней.
+---
+
+# itemResizeEnd
+
+### Описание {#description}
+
+@short: Срабатывает после завершения операции изменения размера элемента (когда пользователь отпускает кнопку мыши)
+
+### Использование {#usage}
+
+~~~jsx
+"itemResizeEnd": ({
+ id: string | number,
+ width: number,
+ height: number,
+ x: number,
+ y: number,
+ dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "ne"
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом со следующими параметрами:
+
+- `id` - идентификатор элемента, размер которого был изменён
+- `width` - итоговая ширина элемента
+- `height` - итоговая высота элемента
+- `x` - итоговая координата X элемента
+- `y` - итоговая координата Y элемента
+- `dir` - направление операции изменения размера:
+ - `"n"` - север
+ - `"ne"` - северо-восток
+ - `"e"` - восток
+ - `"se"` - юго-восток
+ - `"s"` - юг
+ - `"sw"` - юго-запад
+ - `"w"` - запад
+ - `"nw"` - северо-запад
+
+
+### Пример {#example}
+
+~~~jsx
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика события
+editor.events.on("itemResizeEnd", ({ id, width, height }) => {
+ console.log(`
+ The item ${id} finished resizing:
+ the final width: ${width}
+ the final height: ${height}
+ `);
+ // Здесь можно сохранить новые размеры элемента на сервере
+});
+~~~
+
+**Журнал изменений**:
+
+- Событие добавлено в v6.1
+
+**Похожее API**:
+
+- [`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md)
+- [`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md)
+
+**Связанный пример**:
+
+- [Diagram Editor. Управление перемещением, поворотом и изменением размера фигур через события](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemrotateend_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemrotateend_event.md
new file mode 100644
index 000000000..9bdae1048
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemrotateend_event.md
@@ -0,0 +1,55 @@
+---
+sidebar_label: itemRotateEnd
+title: Событие itemRotateEnd редактора
+description: Узнайте больше о событии itemRotateEnd редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную пробную версию DHTMLX Diagram сроком на 30 дней.
+---
+
+# itemRotateEnd
+
+### Описание {#description}
+
+@short: Срабатывает после завершения операции поворота элемента (когда пользователь отпускает кнопку мыши)
+
+### Использование {#usage}
+
+~~~jsx
+"itemRotateEnd": ({
+ id: string | number,
+ angle: number
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом со следующими параметрами:
+
+- `id` - идентификатор повёрнутого элемента
+- `angle` - итоговый угол поворота элемента в градусах
+
+### Пример {#example}
+
+~~~jsx
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика события
+editor.events.on("itemRotateEnd", ({ id, angle }) => {
+ console.log(`The item ${id} finished rotating, the final angle: ${angle}`);
+ // Здесь можно сохранить новый угол поворота элемента на сервере
+});
+~~~
+
+**Журнал изменений**:
+
+- Событие добавлено в v6.1
+
+**Похожее API**:
+
+- [`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md)
+- [`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md)
+
+**Связанный пример**:
+
+- [Diagram Editor. Управление перемещением, поворотом и изменением размера фигур через события](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemtarget_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemtarget_event.md
new file mode 100644
index 000000000..b66136da9
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemtarget_event.md
@@ -0,0 +1,66 @@
+---
+sidebar_label: itemTarget
+title: Событие itemTarget редактора
+description: Узнайте больше о событии itemTarget редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную пробную версию DHTMLX Diagram сроком на 30 дней.
+---
+
+# itemTarget
+
+### Описание {#description}
+
+@short: Срабатывает, когда перемещаемый элемент наводится на целевой элемент
+
+:::info
+Событие работает только в режимах **организационная диаграмма** и `mindmap` компонента Diagram, при этом свойство `itemsDraggable` должно быть установлено в значение `true`.
+
+Событие не работает с *родительским элементом перемещаемого элемента*, а также с *перемещаемым элементом, у которого установлено свойство `giveItem: false`*.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+"itemTarget": ({
+ id: string | number,
+ targetId: string | number,
+ batch: (string | number)[],
+ event: PointerEvent
+}) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом со следующими параметрами:
+
+ - `id` - идентификатор перемещаемого элемента
+ - `targetId` - идентификатор целевого элемента
+ - `batch` - массив идентификаторов перемещённых элементов
+ - `event` - объект события
+
+### Возвращаемое значение {#returns}
+
+Колбек возвращает `false`, чтобы предотвратить наведение элемента на целевой элемент; в противном случае - `true`
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-11}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика события
+editor.events.on("itemTarget", ({ id, targetId }) => {
+ console.log(`
+ Item ${id} is hovering over the item ${targetId}
+ `);
+});
+~~~
+
+**Журнал изменений**:
+
+- Параметр `batch` добавлен в v6.0
+- Начиная с v6.0 колбек принимает объект в качестве параметра
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/linetitlemoveend_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/linetitlemoveend_event.md
new file mode 100644
index 000000000..59ef3670d
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/linetitlemoveend_event.md
@@ -0,0 +1,57 @@
+---
+sidebar_label: lineTitleMoveEnd
+title: Событие lineTitleMoveEnd редактора
+description: Узнайте больше о событии lineTitleMoveEnd редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную пробную версию DHTMLX Diagram сроком на 30 дней.
+---
+
+# lineTitleMoveEnd
+
+### Описание {#description}
+
+@short: Срабатывает после перемещения текстового элемента линии
+
+### Использование {#usage}
+
+~~~jsx
+"lineTitleMoveEnd": ({
+ event: PointerEvent,
+ lineId: string | number,
+ titleId: string | number,
+ coords: obj
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом со следующими параметрами:
+
+ - `event` - объект события
+ - `lineId` - идентификатор линии
+ - `titleId` - идентификатор текстового элемента линии
+ - `coords` - объект с координатами `x` и `y` позиции текстового элемента после перемещения, где:
+ - `x` - горизонтальная позиция текстового элемента при перемещении слева направо
+ - `y` - вертикальная позиция текстового элемента при перемещении сверху вниз
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-13}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// загрузка данных
+editor.parse(data);
+
+// подключение обработчика события
+editor.events.on("lineTitleMoveEnd", ({ titleId, coords }) => {
+ console.log(`
+ LineTitle ${titleId} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**Журнал изменений**: Начиная с v6.0 колбек принимает объект в качестве параметра
\ No newline at end of file
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/overview.md
new file mode 100644
index 000000000..16ba92e59
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/overview.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: События редактора
+title: Обзор событий редактора
+description: Вы можете ознакомиться с событиями редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Обзор событий редактора {#editor-events-overview}
+
+| Название | Описание |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------- |
+| [](api/diagram_editor/editor/events/aftergroupmove_event.md) | @getshort(api/diagram_editor/editor/events/aftergroupmove_event.md) |
+| [](api/diagram_editor/editor/events/afteritemcatch_event.md) | @getshort(api/diagram_editor/editor/events/afteritemcatch_event.md) |
+| [](api/diagram_editor/editor/events/afteritemmove_event.md) | @getshort(api/diagram_editor/editor/events/afteritemmove_event.md) |
+| [](api/diagram_editor/editor/events/afteritemresize_event.md) | @getshort(api/diagram_editor/editor/events/afteritemresize_event.md) |
+| [](api/diagram_editor/editor/events/afteritemrotate_event.md) | @getshort(api/diagram_editor/editor/events/afteritemrotate_event.md) |
+| [](api/diagram_editor/editor/events/afterlinetitlemove_event.md) | @getshort(api/diagram_editor/editor/events/afterlinetitlemove_event.md) |
+| [](api/diagram_editor/editor/events/aftershapeiconclick_event.md) | @getshort(api/diagram_editor/editor/events/aftershapeiconclick_event.md) |
+| [](api/diagram_editor/editor/events/aftershapemove_event.md) | @getshort(api/diagram_editor/editor/events/aftershapemove_event.md) |
+| [](api/diagram_editor/editor/events/beforegroupmove_event.md) | @getshort(api/diagram_editor/editor/events/beforegroupmove_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemcatch_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemcatch_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemmove_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemmove_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemresize_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemresize_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemrotate_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemrotate_event.md) |
+| [](api/diagram_editor/editor/events/beforelinetitlemove_event.md) | @getshort(api/diagram_editor/editor/events/beforelinetitlemove_event.md) |
+| [](api/diagram_editor/editor/events/beforeshapeiconclick_event.md)| @getshort(api/diagram_editor/editor/events/beforeshapeiconclick_event.md) |
+| [](api/diagram_editor/editor/events/beforeshapemove_event.md) | @getshort(api/diagram_editor/editor/events/beforeshapemove_event.md) |
+| [](api/diagram_editor/editor/events/groupmoveend_event.md) | @getshort(api/diagram_editor/editor/events/groupmoveend_event.md) |
+| [](api/diagram_editor/editor/events/itemmoveend_event.md) | @getshort(api/diagram_editor/editor/events/itemmoveend_event.md) |
+| [](api/diagram_editor/editor/events/itemresizeend_event.md) | @getshort(api/diagram_editor/editor/events/itemresizeend_event.md) |
+| [](api/diagram_editor/editor/events/itemrotateend_event.md) | @getshort(api/diagram_editor/editor/events/itemrotateend_event.md) |
+| [](api/diagram_editor/editor/events/itemtarget_event.md) | @getshort(api/diagram_editor/editor/events/itemtarget_event.md) |
+| [](api/diagram_editor/editor/events/linetitlemoveend_event.md) | @getshort(api/diagram_editor/editor/events/linetitlemoveend_event.md) |
+| [](api/diagram_editor/editor/events/shapemoveend_event.md) | @getshort(api/diagram_editor/editor/events/shapemoveend_event.md) |
+| [](api/diagram_editor/editor/events/shaperesize_event.md) | @getshort(api/diagram_editor/editor/events/shaperesize_event.md) |
+| [](api/diagram_editor/editor/events/zoomin_event.md) | @getshort(api/diagram_editor/editor/events/zoomin_event.md) |
+| [](api/diagram_editor/editor/events/zoomout_event.md) | @getshort(api/diagram_editor/editor/events/zoomout_event.md) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shapemoveend_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shapemoveend_event.md
new file mode 100644
index 000000000..586bbfe46
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shapemoveend_event.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: shapeMoveEnd
+title: Событие shapeMoveEnd редактора
+description: Вы можете узнать больше о событии shapeMoveEnd редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# shapeMoveEnd
+
+### Описание {#description}
+
+@short: Срабатывает после перемещения фигуры
+
+:::note
+Событие срабатывает только для целевого элемента независимо от количества выбранных элементов. Идентификаторы перетаскиваемых элементов передаются в параметре `batch` колбека.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+"shapeMoveEnd": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события вызывается с объектом, содержащим следующие параметры:
+
+ - `id` - идентификатор элемента
+ - `batch` - массив идентификаторов перемещённых элементов
+ - `coords` - объект с координатами `x` и `y` положения фигуры после перемещения, где:
+ - `x` - горизонтальное положение фигуры при перемещении слева направо
+ - `y` - вертикальное положение фигуры при перемещении сверху вниз
+ - `event` - объект события
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-13}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("shapeMoveEnd", ({ id, coords }) => {
+ console.log(`
+ Shape ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**Журнал изменений**:
+
+- Параметр `batch` был добавлен в v6.0
+- Колбек принимает объект в качестве параметра начиная с v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shaperesize_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shaperesize_event.md
new file mode 100644
index 000000000..5d867c2a5
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shaperesize_event.md
@@ -0,0 +1,35 @@
+---
+sidebar_label: shapeResize
+title: Событие shapeResize редактора
+description: Вы можете узнать больше о событии shapeResize редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# shapeResize
+
+### Описание {#description}
+
+@short: Срабатывает после изменения размера фигуры
+
+### Использование {#usage}
+
+~~~jsx
+"shapeResize": () => void;
+~~~
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-9}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("shapeResize", () => {
+ console.log("The shape has been resized");
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md
new file mode 100644
index 000000000..cc6648e3e
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: zoomIn
+title: Событие zoomIn редактора
+description: Вы можете узнать больше о событии zoomIn редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# zoomIn
+
+### Описание {#description}
+
+@short: Срабатывает после нажатия кнопки Zoom In или вызова метода zoomIn()
+
+### Использование {#usage}
+
+~~~jsx
+"zoomIn": (step: number) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события `zoomIn` вызывается со следующим параметром:
+
+- `step` - (обязательный) значение, отображающее шаг свойства [`scale`](api/diagram_editor/editor/config/scale_property.md).
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {7-9}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("zoomIn", (step) => {
+ console.log("The diagram in the editor is zoomed in. The step is" + step);
+});
+~~~
+
+**Журнал изменений**: Параметр `step` был добавлен в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md
new file mode 100644
index 000000000..edb6c41e6
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: zoomOut
+title: Событие zoomOut редактора
+description: Вы можете узнать больше о событии zoomOut редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# zoomOut
+
+### Описание {#description}
+
+@short: Срабатывает после нажатия кнопки Zoom Out или вызова метода `zoomOut()`
+
+### Использование {#usage}
+
+~~~jsx
+"zoomOut": (step) => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события `zoomOut` вызывается со следующим параметром:
+
+- `step` - (обязательный) значение, отображающее шаг изменения свойства [`scale`](api/diagram_editor/editor/config/scale_property.md).
+
+:::info
+Для обработки внутренних событий Diagram Editor можно использовать метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {7-9}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("zoomOut", (step) => {
+ console.log("The diagram in the editor is zoomed out");
+});
+~~~
+
+**Журнал изменений**: Параметр `step` был добавлен в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/destructor_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/destructor_method.md
new file mode 100644
index 000000000..867fdeaf8
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/destructor_method.md
@@ -0,0 +1,30 @@
+---
+sidebar_label: destructor()
+title: Метод destructor класса Editor
+description: Вы можете узнать больше о методе destructor в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# destructor()
+
+### Описание {#description}
+
+@short: Удаляет экземпляр редактора диаграмм и освобождает занятые ресурсы
+
+### Использование {#usage}
+
+~~~jsx
+destructor(): void;
+~~~
+
+### Пример {#example}
+
+~~~jsx {6}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+
+editor.destructor();
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/import_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/import_method.md
new file mode 100644
index 000000000..21c66fb77
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/import_method.md
@@ -0,0 +1,42 @@
+---
+sidebar_label: import()
+title: Метод import класса Editor
+description: Вы можете узнать больше о методе import редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# import()
+
+### Описание {#description}
+
+@short: Импортирует данные из существующей диаграммы в редактор
+
+### Использование {#usage}
+
+~~~jsx
+import(diagram: object): void;
+~~~
+
+### Параметры {#parameters}
+
+- `diagram` - (обязательный) объект диаграммы
+
+### Пример {#example}
+
+~~~jsx
+// инициализация Diagram
+const diagram = new dhx.Diagram("diagram", {
+ type: "org"
+});
+// загрузка данных в Diagram
+diagram.data.parse(data);
+
+// инициализация Editor
+const editor = new dhx.DiagramEditor("editor_container");
+
+// импорт данных из Diagram в Editor
+editor.import(diagram);
+~~~
+
+Вы можете загружать данные в любом поддерживаемом формате. Подробности см. в статье [`parse()`](api/data_collection/parse_method.md).
+
+**Связанный пример**: [Diagram Editor. Режим организационной диаграммы. Интерактивный редактор](https://snippet.dhtmlx.com/bng7ego7)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/overview.md
new file mode 100644
index 000000000..5fa7d4a1a
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/overview.md
@@ -0,0 +1,17 @@
+---
+sidebar_label: Методы Editor
+title: Обзор методов Editor
+description: Вы можете изучить методы Editor в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Обзор методов Editor {#editor-methods-overview}
+
+| Название | Описание |
+| :------------------------------------------------------------ | :---------------------------------------------------------------- |
+| [](api/diagram_editor/editor/methods/destructor_method.md) | @getshort(api/diagram_editor/editor/methods/destructor_method.md) |
+| [](api/diagram_editor/editor/methods/import_method.md) | @getshort(api/diagram_editor/editor/methods/import_method.md) |
+| [](api/diagram_editor/editor/methods/paint_method.md) | @getshort(api/diagram_editor/editor/methods/paint_method.md) |
+| [](api/diagram_editor/editor/methods/parse_method.md) | @getshort(api/diagram_editor/editor/methods/parse_method.md) |
+| [](api/diagram_editor/editor/methods/serialize_method.md) | @getshort(api/diagram_editor/editor/methods/serialize_method.md) |
+| [](api/diagram_editor/editor/methods/zoomin_method.md) | @getshort(api/diagram_editor/editor/methods/zoomin_method.md) |
+| [](api/diagram_editor/editor/methods/zoomout_method.md) | @getshort(api/diagram_editor/editor/methods/zoomout_method.md) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/paint_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/paint_method.md
new file mode 100644
index 000000000..f3fc8f80e
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/paint_method.md
@@ -0,0 +1,26 @@
+---
+sidebar_label: paint()
+title: Метод paint класса Editor
+description: Вы можете узнать больше о методе paint редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# paint()
+
+### Описание {#description}
+
+@short: Перерисовывает редактор
+
+### Использование {#usage}
+
+~~~jsx
+paint(): void;
+~~~
+
+### Пример {#example}
+
+~~~jsx {4}
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.paint();
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/parse_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/parse_method.md
new file mode 100644
index 000000000..7c53fab16
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/parse_method.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: parse()
+title: Метод parse класса Editor
+description: Вы можете узнать больше о методе parse редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# parse()
+
+### Описание {#description}
+
+@short: Загружает данные в редактор из локального источника данных
+
+### Использование {#usage}
+
+~~~jsx
+parse(data: array): void;
+~~~
+
+### Параметры {#parameters}
+
+- `data` - (обязательный) данные, которые необходимо загрузить в редактор
+
+Вы можете загружать данные в любом поддерживаемом формате. Подробности см. в статье [`parse()`](api/data_collection/parse_method.md).
+
+### Пример {#example}
+
+~~~jsx
+const data = [
+ // фигуры
+ {
+ "id": "a",
+ "x": 50,
+ "y": 53,
+ "type": "triangle",
+ "text": "Shape 1",
+ "height": 50,
+ "width": 50
+ },
+ {
+ "id": "b",
+ "x": 367,
+ "y": 158,
+ "type": "rectangle",
+ "text": "Shape 2"
+ },
+
+ // соединительная линия
+ {
+ "id": "ab",
+ "from":"a",
+ "to":"b",
+ "type": "line"
+ },
+];
+
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+~~~
+
+**Связанные примеры**:
+
+- [Diagram Editor. Режим по умолчанию. Базовая инициализация](https://snippet.dhtmlx.com/xshe9ut7)
+- [Diagram Editor. Режим организационной диаграммы. Базовая инициализация](https://snippet.dhtmlx.com/og4qm3ja)
+- [Diagram Editor. Режим ментальной карты. Ментальная карта эмоций](https://snippet.dhtmlx.com/lo1vm0e8)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/serialize_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/serialize_method.md
new file mode 100644
index 000000000..60d41e4d2
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/serialize_method.md
@@ -0,0 +1,32 @@
+---
+sidebar_label: serialize()
+title: Метод serialize редактора
+description: Узнайте больше о методе serialize редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# serialize()
+
+### Описание {#description}
+
+@short: Сериализует данные редактора в массив объектов JSON
+
+### Использование {#usage}
+
+~~~jsx
+serialize(): array;
+~~~
+
+### Возвращаемое значение {#returns}
+
+Метод возвращает массив объектов JSON для каждого элемента данных редактора
+
+### Пример {#example}
+
+~~~jsx {4}
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+const data = editor.serialize();
+~~~
+
+**Связанный пример**: [Diagram Editor. Режим организационной диаграммы. Живой редактор](https://snippet.dhtmlx.com/bng7ego7)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomin_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomin_method.md
new file mode 100644
index 000000000..6b375166e
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomin_method.md
@@ -0,0 +1,32 @@
+---
+sidebar_label: zoomIn()
+title: Метод zoomIn редактора
+description: Узнайте больше о методе zoomIn редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# zoomIn()
+
+### Описание {#description}
+
+@short: Увеличивает масштаб диаграммы
+
+### Использование {#usage}
+
+~~~jsx
+zoomIn(step?: number): void;
+~~~
+
+### Параметры {#parameters}
+
+- `step` - (необязательный) шаг увеличения масштаба диаграммы; *по умолчанию: 0.05*
+
+### Пример {#example}
+
+~~~jsx {4}
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.zoomIn(0.1);
+~~~
+
+**Журнал изменений**: Добавлено в v4.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomout_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomout_method.md
new file mode 100644
index 000000000..088d5c7fe
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomout_method.md
@@ -0,0 +1,32 @@
+---
+sidebar_label: zoomOut()
+title: Метод zoomOut редактора
+description: Узнайте больше о методе zoomOut редактора в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# zoomOut()
+
+### Описание {#description}
+
+@short: Уменьшает масштаб диаграммы
+
+### Использование {#usage}
+
+~~~jsx
+zoomOut(step?: number): void;
+~~~
+
+### Параметры {#parameters}
+
+- `step` - (необязательный) шаг уменьшения масштаба диаграммы; *по умолчанию: 0.05*
+
+### Пример {#example}
+
+~~~jsx {4}
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.zoomOut(0.1);
+~~~
+
+**Журнал изменений**: Добавлено в v4.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/api_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/api_overview.md
new file mode 100644
index 000000000..424345629
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/api_overview.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: Обзор API History manager
+title: Обзор API History manager
+description: Ознакомьтесь с обзором History manager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# Обзор API History manager
+
+Набор API, которые можно использовать для управления историей действий в Diagram Editor. Используйте ключевое слово `history` для доступа к History manager через объект `editor`:
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default" // только default
+});
+// ...
+editor.history.redo(); // восстанавливает действие, отменённое операцией отмены
+~~~
+
+## Обзор методов History manager {#history-manager-methods-overview}
+
+| Name | Описание |
+| :---------------------------------------------------------- | :----------------------------------------------------------------- |
+| [](api/diagram_editor/historymanager/methods/add_method.md) | @getshort(api/diagram_editor/historymanager/methods/add_method.md) |
+| [](api/diagram_editor/historymanager/methods/disable_method.md) | @getshort(api/diagram_editor/historymanager/methods/disable_method.md) |
+| [](api/diagram_editor/historymanager/methods/enable_method.md) | @getshort(api/diagram_editor/historymanager/methods/enable_method.md) |
+| [](api/diagram_editor/historymanager/methods/isredo_method.md) | @getshort(api/diagram_editor/historymanager/methods/isredo_method.md) |
+| [](api/diagram_editor/historymanager/methods/isundo_method.md) | @getshort(api/diagram_editor/historymanager/methods/isundo_method.md) |
+| [](api/diagram_editor/historymanager/methods/redo_method.md) | @getshort(api/diagram_editor/historymanager/methods/redo_method.md) |
+| [](api/diagram_editor/historymanager/methods/reset_method.md) | @getshort(api/diagram_editor/historymanager/methods/reset_method.md) |
+| [](api/diagram_editor/historymanager/methods/undo_method.md) | @getshort(api/diagram_editor/historymanager/methods/undo_method.md) |
+
+## Обзор свойств History manager {#history-manager-properties-overview}
+
+| Name | Описание |
+| :---------------------------------------------------------- | :----------------------------------------------------------------- |
+| [](api/diagram_editor/historymanager/config/savedelay_property.md) | @getshort(api/diagram_editor/historymanager/config/savedelay_property.md) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/overview.md
new file mode 100644
index 000000000..97689ca74
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/overview.md
@@ -0,0 +1,11 @@
+---
+sidebar_label: Свойства History manager
+title: Обзор свойств History manager
+description: Изучите свойства History manager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# Обзор свойств History manager
+
+| Name | Описание |
+| :----------------------------------------------------------------- | :------------------------------------------------------------------------ |
+| [](api/diagram_editor/historymanager/config/savedelay_property.md) | @getshort(api/diagram_editor/historymanager/config/savedelay_property.md) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/savedelay_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/savedelay_property.md
new file mode 100644
index 000000000..5918bfd4f
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/savedelay_property.md
@@ -0,0 +1,35 @@
+---
+sidebar_label: saveDelay
+title: Свойство saveDelay объекта HistoryManager
+description: Узнайте о свойстве disabled объекта HistoryManager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# saveDelay
+
+### Описание {#description}
+
+@short: Задает интервал времени для сохранения текущего состояния в мс
+
+### Использование {#usage}
+
+~~~jsx
+saveDelay: number;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+saveDelay: 500
+~~~
+
+### Пример {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+
+editor.history.saveDelay = 1000;
+~~~
+
+**Журнал изменений**: Добавлено в v4.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/add_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/add_method.md
new file mode 100644
index 000000000..218cc56bb
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/add_method.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: add()
+title: Метод add объекта HistoryManager
+description: Узнайте о методе add объекта HistoryManager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# add()
+
+### Описание {#description}
+
+@short: Добавляет новое состояние
+
+:::info
+Добавление нового состояния выполняется автоматически, поэтому этот метод не рекомендуется использовать вручную
+:::
+
+### Использование {#usage}
+
+~~~jsx
+add(newState: array): void;
+~~~
+
+### Параметры {#parameters}
+
+- `newState` - (обязательный) массив JSON-объектов текущего состояния диаграммы
+
+### Пример {#example}
+
+~~~jsx {5-9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.add([
+ { "id": "shape_1", "type": "start", "x": 200, y: 0, "text": "Start" },
+ { "id": "shape_2", "type": "process", "x": 200, y: 120, "text": "Call the client" },
+ { "id": "line_1", "type": "line", "from": "shape_1", "to": "shape_2" }
+]);
+~~~
+
+**Журнал изменений**: Добавлено в v4.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/disable_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/disable_method.md
new file mode 100644
index 000000000..8495139ac
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/disable_method.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: disable()
+title: Метод disable объекта HistoryManager
+description: Узнайте о методе disable объекта HistoryManager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# disable()
+
+### Описание {#description}
+
+@short: Блокирует HistoryManager
+
+### Использование {#usage}
+
+~~~jsx
+disable(): void;
+~~~
+
+### Пример {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.disable();
+~~~
+
+:::note
+Обратите внимание: при отключении History manager вы не сможете работать с историей с помощью горячих клавиш.
+:::
+
+**Журнал изменений**: Добавлено в v4.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/enable_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/enable_method.md
new file mode 100644
index 000000000..1bd00a6fc
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/enable_method.md
@@ -0,0 +1,29 @@
+---
+sidebar_label: enable()
+title: Метод enable класса HistoryManager
+description: Вы можете узнать о методе enable класса HistoryManager в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# enable()
+
+### Описание {#description}
+
+@short: Перезапускает работу HistoryManager, сохраняя текущее состояние как исходное
+
+### Использование {#usage}
+
+~~~jsx
+enable(): void;
+~~~
+
+### Пример {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.enable();
+~~~
+
+**Журнал изменений**: Добавлено в v4.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isredo_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isredo_method.md
new file mode 100644
index 000000000..89abdadc3
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isredo_method.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: isRedo()
+title: Метод isRedo класса HistoryManager
+description: Вы можете узнать о методе isRedo класса HistoryManager в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# isRedo()
+
+### Описание {#description}
+
+@short: Проверяет, было ли восстановлено действие, отменённое действием Undo
+
+### Использование {#usage}
+
+~~~jsx
+isRedo(): boolean;
+~~~
+
+### Пример {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+...
+editor.history.isRedo();
+~~~
+
+### Возвращаемое значение {#returns}
+
+Метод возвращает `true`, если действие, отменённое действием Undo, было восстановлено; в противном случае — `false`
+
+**Журнал изменений**: Добавлено в v4.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isundo_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isundo_method.md
new file mode 100644
index 000000000..91529def7
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isundo_method.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: isUndo()
+title: Метод isUndo класса HistoryManager
+description: Вы можете узнать о методе isUndo класса HistoryManager в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# isUndo()
+
+### Описание {#description}
+
+@short: Проверяет, было ли отменено действие
+
+### Использование {#usage}
+
+~~~jsx
+isUndo(): boolean;
+~~~
+
+### Пример {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.isUndo();
+~~~
+
+### Возвращаемое значение {#returns}
+
+Метод возвращает `true`, если действие было отменено; в противном случае — `false`
+
+**Журнал изменений**: Добавлено в v4.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/overview.md
new file mode 100644
index 000000000..8f464b251
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/overview.md
@@ -0,0 +1,20 @@
+---
+sidebar_label: Методы History manager
+title: Обзор методов History manager
+description: Вы можете изучить методы History manager в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Обзор API History manager {#history-manager-api-overview}
+
+## Обзор методов History manager {#history-manager-methods-overview}
+
+| Название | Описание |
+| :---------------------------------------------------------- | :----------------------------------------------------------------- |
+| [](api/diagram_editor/historymanager/methods/add_method.md) | @getshort(api/diagram_editor/historymanager/methods/add_method.md) |
+| [](api/diagram_editor/historymanager/methods/disable_method.md) | @getshort(api/diagram_editor/historymanager/methods/disable_method.md) |
+| [](api/diagram_editor/historymanager/methods/enable_method.md) | @getshort(api/diagram_editor/historymanager/methods/enable_method.md) |
+| [](api/diagram_editor/historymanager/methods/isredo_method.md) | @getshort(api/diagram_editor/historymanager/methods/isredo_method.md) |
+| [](api/diagram_editor/historymanager/methods/isundo_method.md) | @getshort(api/diagram_editor/historymanager/methods/isundo_method.md) |
+| [](api/diagram_editor/historymanager/methods/redo_method.md) | @getshort(api/diagram_editor/historymanager/methods/redo_method.md) |
+| [](api/diagram_editor/historymanager/methods/reset_method.md) | @getshort(api/diagram_editor/historymanager/methods/reset_method.md) |
+| [](api/diagram_editor/historymanager/methods/undo_method.md) | @getshort(api/diagram_editor/historymanager/methods/undo_method.md) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/redo_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/redo_method.md
new file mode 100644
index 000000000..f26aa6df3
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/redo_method.md
@@ -0,0 +1,29 @@
+---
+sidebar_label: redo()
+title: Метод redo класса HistoryManager
+description: Вы можете узнать о методе redo класса HistoryManager в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# redo()
+
+### Описание {#description}
+
+@short: Восстанавливает действие, отменённое действием Undo
+
+### Использование {#usage}
+
+~~~jsx
+redo(): void;
+~~~
+
+### Пример {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.redo();
+~~~
+
+**Журнал изменений**: Добавлено в v4.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/reset_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/reset_method.md
new file mode 100644
index 000000000..55c39f530
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/reset_method.md
@@ -0,0 +1,29 @@
+---
+sidebar_label: reset()
+title: Метод reset класса HistoryManager
+description: Узнайте больше о методе reset класса HistoryManager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# reset()
+
+### Описание {#description}
+
+@short: Сбрасывает предыдущие изменения и сохраняет текущее состояние
+
+### Использование {#usage}
+
+~~~jsx
+reset(): void;
+~~~
+
+### Пример {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.reset();
+~~~
+
+**Журнал изменений**: Добавлено в v4.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/undo_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/undo_method.md
new file mode 100644
index 000000000..d19c9861a
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/undo_method.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: undo()
+title: Метод undo класса HistoryManager
+description: Узнайте больше о методе undo класса HistoryManager в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# undo()
+
+### Описание {#description}
+
+@short: Отменяет последнее действие в Diagram Editor
+
+### Использование {#usage}
+
+~~~jsx
+undo(first?: boolean): void;
+~~~
+
+### Параметры {#parameters}
+
+- `first` - (необязательный) *true* для отмены всей истории изменений
+
+### Пример {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.undo();
+~~~
+
+**Журнал изменений**: Добавлено в v4.1
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/api_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/api_overview.md
new file mode 100644
index 000000000..5e6afbcf5
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/api_overview.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: Обзор API Shapebar
+title: Обзор API Shapebar
+description: Вы можете ознакомиться с обзором Shapebar в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Обзор API Shapebar {#shapebar-api-overview}
+
+[Shapebar](guides/diagram_editor/shapebar.md) — это часть Diagram Editor, которая отображает превью элементов Diagram (фигур, групп и дорожек). Используйте свойство `shapebar` конфигурационного объекта [`view`](api/diagram_editor/editor/config/view_property.md) для отображения, скрытия и настройки Shapebar. Есть два способа инициализации, один из которых можно выбрать:
+
+- создание Shapebar по умолчанию с помощью настройки `shapebar:true`:
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: true // отображение Shapebar по умолчанию
+ }
+});
+~~~
+
+- настройка Shapebar путём указания его в виде объекта с [набором свойств](/category/shapebar-properties/):
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // настройка Shapebar через объект
+ shapebar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ preview: {
+ scale: 0.65,
+ gap: 8
+ },
+ sections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+ }
+ }
+});
+~~~
+
+Изучите [связанный раздел API](/category/shapebar-properties/), чтобы ознакомиться с доступными свойствами Shapebar.
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/css_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/css_property.md
new file mode 100644
index 000000000..98d4abeb2
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/css_property.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: css
+title: Свойство css Shapebar
+description: Вы можете узнать о свойстве css объекта Shapebar в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# css
+
+### Описание {#description}
+
+@short: Необязательно. Позволяет применять пользовательские классы CSS для настройки внешнего вида shapebar
+
+### Использование {#usage}
+
+~~~jsx
+css?: string;
+~~~
+
+### Пример {#example}
+
+~~~html {8}
+
+
+
+~~~
+
+**Полезные статьи**:
+
+- [Внешний вид Shapebar и фигур](guides/diagram_editor/shapebar.md#shapebar-and-shapes-appearance)
+- [Настройка внешнего вида фигур в Shapebar](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar)
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/preview_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/preview_property.md
new file mode 100644
index 000000000..8d90ce22c
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/preview_property.md
@@ -0,0 +1,85 @@
+---
+sidebar_label: preview
+title: Свойство preview Shapebar
+description: Вы можете узнать о свойстве preview объекта Shapebar в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# preview
+
+### Описание {#description}
+
+@short: Необязательно. Объект, который настраивает предпросмотр элементов
+
+### Использование {#usage}
+
+~~~jsx
+preview?: {
+ scale?: number,
+ gap?: string | number
+}
+~~~
+
+### Параметры {#parameters}
+
+- `scale` — (необязательно) определяет масштаб элементов, отображаемых в shapebar редактора
+- `gap` — (необязательно) задаёт расстояние между элементами, отображаемыми в shapebar
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+preview: {
+ scale: 0.5,
+ gap: "6px 8px"
+ // задаёт отступ 6px сверху и снизу и 8px справа и слева
+};
+~~~
+
+### Пример {#example}
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // отображает Shapebar по умолчанию
+ // или настройка Shapebar через объект
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 8
+ }
+ }
+ }
+});
+~~~
+
+### Подробнее {#details}
+
+Значения свойств `gap` и `scale` можно переопределить для отдельной фигуры с помощью атрибутов `gap` и `scale` свойства [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) объекта фигуры:
+
+~~~jsx {14-17}
+const defaults = {
+ rectangle: {
+ preview: {
+ scale: 0.72,
+ gap: 8
+ }
+ }
+}
+
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 2
+ }
+ }
+ },
+ defaults
+});
+~~~
+
+**Полезная статья**: [Shapebar](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes)
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/sections_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/sections_property.md
new file mode 100644
index 000000000..2d59e23dd
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/sections_property.md
@@ -0,0 +1,174 @@
+---
+sidebar_label: sections
+title: Свойство sections Shapebar
+description: Вы можете узнать о свойстве sections объекта Shapebar в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# sections
+
+[Разделы shapebar по умолчанию](guides/diagram_editor/shapebar.md#default-sections): *Фигуры*, *Группы*, *Дорожки*.
+
+С помощью свойства `sections` вы можете изменить структуру shapebar и отобразить нужные элементы.
+
+### Описание {#description}
+
+@short: Необязательно. Объект, который определяет разделы элементов, отображаемых в shapebar редактора
+
+### Использование {#usage}
+
+~~~jsx
+sections?: {
+ [name: string]: (obj | string)[]
+};
+~~~
+
+### Параметры {#parameters}
+
+Объект `sections` может содержать набор пар *ключ:значение*, где:
+- `key` — имя раздела, заданное пользователем
+- `value` — массив, который может включать:
+ - объект с одной парой *ключ:значение* для отображения базового набора фигур. Список доступных пар приведён ниже:
+ - `{flowShapes: true}` — (необязательно) отображает все доступные типы фигур [блок-схемы](shapes/default_shapes.md#shapes-in-the-default-mode)
+ - `{org: true}` — (необязательно) отображает организационные фигуры: типы `"card"` и `"img-card"`
+ - `{group: true}` — (необязательно) отображает базовый набор групп
+ - `{swimlane: true}` — (необязательно) отображает базовый набор дорожек
+ - строковое значение с конкретным типом элемента, который будет отображён в разделе (например, `"text"`, `"topic"` и т. д.)
+ - объект с несколькими парами *ключ:значение* для переопределения свойств по умолчанию любой фигуры
+
+### Пример {#example}
+
+~~~jsx {7-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // отображает Shapebar по умолчанию
+ // или настройка Shapebar через объект
+ shapebar: {
+ sections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+ }
+ }
+});
+~~~
+
+### Подробнее {#details}
+
+В зависимости от выбранных элементов конфигурация элементов конкретного раздела может быть следующей:
+
+1. Отображение базовых разделов
+
+Вы можете отобразить базовый набор фигур с помощью конфигурационного объекта `sections`. Например:
+
+~~~jsx {5-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Base flow shapes": [{ flowShapes: true }],
+ "Base org cards": [{ org: true }],
+ "Base groups": [{ group: true }],
+ "Base swimlane": [{ swimlane: true }]
+ }
+ }
+ }
+});
+~~~
+
+2. Указание элементов с помощью строковых литералов
+
+Вы можете отобразить элементы Shapebar, указав типы фигур с помощью строковых литералов. Смотрите пример ниже:
+
+~~~jsx {5-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Custom section": ["custom_shape"],
+ "Other shapes": ["text", "topic", "circle"]
+ }
+ }
+ }
+});
+~~~
+
+3. Переопределение базовых конфигураций
+
+Другой вариант — переопределить базовые свойства любой фигуры и отобразить её с нужными параметрами. В примере ниже показано отображение фигуры типа `circle` с различными настройками текста и цвета:
+
+~~~jsx {5-23}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Circles": [
+ {
+ type: "circle",
+ fill: "#fcba03",
+ text: "Orange"
+ },
+ {
+ type: "circle",
+ fill: "#03d7fc",
+ text: "Blue"
+ },
+ {
+ type: "circle",
+ fill: "#03fc88",
+ text: "Green"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+Таким образом можно переопределить любой тип фигур.
+
+4. Объединение элементов разных типов в одном разделе
+
+Если ваш проект предполагает использование различных элементов, вы можете создавать в Shapebar разделы со смешанными типами элементов. Смотрите следующий пример:
+
+~~~jsx {7-27}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // отображает Shapebar по умолчанию
+ // или настройка Shapebar через объект
+ shapebar: {
+ sections: {
+ "Base flow shapes": [{ flowShapes: true }, "text", "topic"],
+ "Circles": [
+ "circle",
+ {
+ type: "circle",
+ fill: "#fcba03",
+ text: "Orange"
+ },
+ {
+ type: "circle",
+ fill: "#03d7fc",
+ text: "Blue"
+ },
+ {
+ type: "circle",
+ fill: "#03fc88",
+ text: "Green"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+**Полезная статья**: [Shapebar](guides/diagram_editor/shapebar.md#custom-sections)
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/show_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/show_property.md
new file mode 100644
index 000000000..16b67fbb2
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/show_property.md
@@ -0,0 +1,42 @@
+---
+sidebar_label: show
+title: Свойство show Shapebar
+description: Вы можете узнать о свойстве show объекта Shapebar в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# show
+
+### Описание {#description}
+
+@short: Необязательно. Определяет, отображается ли shapebar с пользовательскими настройками при инициализации Diagram Editor
+
+### Использование {#usage}
+
+~~~jsx
+show?: boolean;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+show: true
+~~~
+
+### Пример {#example}
+
+~~~jsx {7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // отображает Shapebar по умолчанию
+ // или настройка Shapebar через объект
+ shapebar: {
+ show: false // по умолчанию true
+ }
+ }
+});
+~~~
+
+**Полезная статья**: [Shapebar](guides/diagram_editor/shapebar.md#showinghiding-the-shapebar)
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/width_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/width_property.md
new file mode 100644
index 000000000..3906b6498
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/width_property.md
@@ -0,0 +1,42 @@
+---
+sidebar_label: width
+title: Свойство width Shapebar
+description: Вы можете узнать о свойстве width объекта Shapebar в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# width
+
+### Описание {#description}
+
+@short: Необязательно. Задаёт ширину shapebar редактора
+
+### Использование {#usage}
+
+~~~jsx
+width?: number;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+width: 300
+~~~
+
+### Пример {#example}
+
+~~~jsx {7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // отображает Shapebar по умолчанию
+ // или настройка Shapebar через объект
+ shapebar: {
+ width: 400 // по умолчанию 300
+ }
+ }
+});
+~~~
+
+**Полезная статья**: [Shapebar](guides/diagram_editor/shapebar.md#setting-the-width-of-shapebar)
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/api_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/api_overview.md
new file mode 100644
index 000000000..37105a6cd
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/api_overview.md
@@ -0,0 +1,50 @@
+---
+sidebar_label: Обзор API Toolbar
+title: Обзор API Toolbar
+description: Ознакомьтесь с обзором Toolbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и live-демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Обзор API Toolbar
+
+[Toolbar](guides/diagram_editor/toolbar.md) является частью Diagram Editor и помогает пользователям управлять процессом редактирования. Используйте свойство `toolbar` конфигурационного объекта [`view`](api/diagram_editor/editor/config/view_property.md), чтобы показывать, скрывать и настраивать Toolbar. Доступны два способа инициализации на выбор:
+
+- создание Toolbar по умолчанию с помощью настройки `toolbar:true`:
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true // отображение Toolbar по умолчанию
+ }
+});
+~~~
+
+- настройка Toolbar в виде объекта с [набором свойств](/category/toolbar-properties/):
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // настройка Toolbar через объект
+ toolbar: {
+ css: "custom_css",
+ items: ["file", "spacer", "scale"],
+ navigationType: "pointer"
+ }
+ }
+});
+~~~
+
+Изучите соответствующие разделы API, чтобы ознакомиться с доступными методами, свойствами и событиями Toolbar.
+
+## Методы Toolbar {#toolbar-methods}
+
+- [Список методов Toolbar](api/diagram_editor/toolbar/methods/overview.md)
+
+## Свойства Toolbar {#toolbar-properties}
+
+- [Список свойств Toolbar](/category/toolbar-properties/)
+
+## События Toolbar {#toolbar-events}
+
+- [Список событий Toolbar](api/diagram_editor/toolbar/events/overview.md)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/css_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/css_property.md
new file mode 100644
index 000000000..f7a0ee750
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/css_property.md
@@ -0,0 +1,42 @@
+---
+sidebar_label: css
+title: Свойство css Toolbar
+description: Узнайте о свойстве css компонента Toolbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и live-демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# css
+
+### Описание {#description}
+
+@short: Необязательный. Применяет пользовательский класс CSS
+
+:::info
+Пользовательский класс CSS также применяется к развёрнутым элементам. К таким элементам добавляется префикс `--popup-menu`.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+css?: string;
+~~~
+
+### Пример {#example}
+
+~~~jsx {7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // toolbar: true, // отображение Toolbar по умолчанию
+ // или настройте Toolbar через объект
+ toolbar: {
+ css: "custom_css",
+ items: ["file", "spacer", "scale"],
+ navigationType: "pointer"
+ }
+ }
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
+
+**Полезная статья**: [Настройка Toolbar](guides/diagram_editor/toolbar.md)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/items_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/items_property.md
new file mode 100644
index 000000000..4294f9c04
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/items_property.md
@@ -0,0 +1,146 @@
+---
+sidebar_label: items
+title: Свойство items Toolbar
+description: Узнайте о свойстве items компонента Toolbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и live-демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# items
+
+### Описание {#description}
+
+@short: Необязательный. Массив элементов управления, отображаемых на Toolbar Diagram Editor
+
+### Использование {#usage}
+
+~~~jsx
+items?: (object | string)[];
+~~~
+
+### Настройка items через строки {#configuring-items-via-strings}
+
+Свойство `items` позволяет указать [**служебные элементы**](guides/diagram_editor/toolbar.md#service-elements) в виде массива строк:
+
+~~~jsx
+items: [ "file", "edit", "view", "arrange", "spacer", "scale" ];
+~~~
+
+Полный список служебных элементов вы можете посмотреть [здесь](guides/diagram_editor/toolbar.md#service-elements).
+
+### Настройка items через объекты {#configuring-items-via-objects}
+
+Свойство `items` позволяет указать [**служебные элементы**](guides/diagram_editor/toolbar.md#service-elements) и [**базовые элементы**](guides/diagram_editor/toolbar.md#base-elements) в виде массива объектов:
+
+~~~jsx
+items: [
+ {
+ type: string,
+ id?: string,
+ value?: string,
+ hotkey?: string,
+ icon?: string,
+ hidden?: boolean,
+ disabled?: boolean,
+ css?: string | string[],
+ items?: (string | object)[],
+ checkIcon?: (editor: object) => string,
+ handler?: (editor: object, event: Event) => void
+ }, {...}
+];
+~~~
+
+#### Параметры {#parameters}
+
+Для всех [**служебных элементов**](guides/diagram_editor/toolbar.md#service-elements), кроме `separator` / `spacer` / `scale`, можно указать объект со следующими параметрами:
+
+- `type` - (обязательный) - тип служебного элемента. Полный список типов служебных элементов вы можете посмотреть [здесь](guides/diagram_editor/toolbar.md)
+- `id` - (необязательный) - ID служебного элемента. По умолчанию ID служебного элемента включает `$` и `type` служебного элемента: `$file`
+- `value` - (необязательный) - метка служебного элемента
+- `hotkey` - (необязательный) - метка сочетания горячих клавиш служебного элемента
+- `icon` - (необязательный) - класс css для иконки служебного элемента
+- `hidden` - (необязательный) - скрывает служебный элемент
+- `disabled` - (необязательный) - отключает служебный элемент
+- `css` - (необязательный) - применяет пользовательский класс css к служебному элементу
+- `items` - (необязательный) - определяет структуру дочерних элементов
+- `checkIcon` - (необязательный) - обработчик, который возвращает класс css иконки. Вызывается со следующим аргументом:
+ - `editor` - объект Diagram Editor
+- `handler` - (необязательный) - обработчик, который запускается при возникновении события `click` или `inputChange`. Вызывается со следующими аргументами:
+ - `editor` - объект Diagram Editor
+ - `event` - [нативное событие](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+
+### Пример 1 {#example-1}
+
+В примере ниже показано, как настроить элементы Toolbar через строки:
+
+~~~jsx {10-14}
+// Настройка элементов Toolbar через строки
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // toolbar: true, // отображение Toolbar по умолчанию
+ // или настройте Toolbar через объект
+ toolbar: {
+ css: "custom_css",
+ navigationType: "pointer",
+ items: [
+ "file",
+ "spacer",
+ "scale"
+ ]
+ }
+ }
+});
+~~~
+
+### Пример 2 {#example-2}
+
+В примере ниже показано, как настроить элементы Toolbar через объекты:
+
+~~~jsx {7-38}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: {
+ css: "custom_css",
+ navigationType: "pointer",
+ items: [
+ {
+ type: "file",
+ items: [
+ "importJson",
+ {
+ type: "exportJson",
+ value: "Export to JSON"
+ },
+ {
+ id: "custom_id_1",
+ type: "menuItem",
+ value: "Server export",
+ icon: "dxi dxi-vault",
+ items: [
+ "exportPdf",
+ {
+ id: "custom_id_2",
+ type: "menuItem",
+ value: "PNG",
+ handler: editor => {
+ editor.diagram.export.png();
+ // пользовательская логика здесь
+ }
+ }
+ ]
+ }
+ ]
+ },
+ "spacer",
+ "scale"
+ ]
+ }
+ }
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
+
+**Полезная статья**: [Настройка Toolbar](guides/diagram_editor/toolbar.md)
+
+**Связанный пример**: [Diagram Editor. Режим по умолчанию. Настройка toolbar. Добавлен поиск по фигурам ](https://snippet.dhtmlx.com/846cz71r)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/navigationtype_property.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/navigationtype_property.md
new file mode 100644
index 000000000..f5b3e7a58
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/navigationtype_property.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: navigationType
+title: Свойство navigationType Toolbar
+description: Узнайте о свойстве css компонента Toolbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и live-демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# navigationType
+
+### Описание {#description}
+
+@short: Необязательный. Задаёт действие, которое открывает опции меню
+
+### Использование {#usage}
+
+~~~jsx
+navigationType?: "click" | "pointer";
+~~~
+
+:::info
+- `"click"` - отображает меню при клике пользователя на нём
+- `"pointer"` - отображает меню при наведении курсора мыши пользователем на него
+:::
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+navigationType: "click"
+~~~
+
+### Пример {#example}
+
+~~~jsx {9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // toolbar: true, // отображение Toolbar по умолчанию
+ // или настройте Toolbar через объект
+ toolbar: {
+ css: "custom_css",
+ items: ["file", "spacer", "scale"],
+ navigationType: "pointer"
+ }
+ }
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
+
+**Полезная статья**: [Настройка Toolbar](guides/diagram_editor/toolbar.md)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/overview.md
new file mode 100644
index 000000000..8a651f1a5
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/overview.md
@@ -0,0 +1,65 @@
+---
+sidebar_label: Обзор событий
+title: Обзор событий Toolbar
+description: Узнайте о событиях Toolbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и live-демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Обзор событий Toolbar
+
+Вы можете использовать следующие события [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-events/) из [**Suite**](https://docs.dhtmlx.com/suite/):
+
+| Название | Описание |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
+| [afterHide](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_afterhide_event/) | Срабатывает после скрытия дочернего элемента Toolbar |
+| [beforeHide](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_beforehide_event/) | Срабатывает перед скрытием дочернего элемента Toolbar |
+| [click](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_click_event/) | Срабатывает после клика по элементу управления |
+| [input](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_input_event/) | Срабатывает при вводе текста в поле ввода |
+| [inputBlur](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputblur_event/) | Срабатывает при потере фокуса элементом управления |
+| [inputChange](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputchange_event/) | Срабатывает при изменении значения в элементе управления Input компонента Toolbar |
+| [inputFocus](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputfocus_event/) | Срабатывает при получении фокуса элементом управления |
+| [keydown](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_keydown_event/) | Срабатывает при нажатии любой клавиши, когда элемент управления Toolbar находится в фокусе |
+| [openMenu](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_openmenu_event/) | Срабатывает при разворачивании элемента управления меню |
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// обрабатывает событие "click"
+editor.toolbar.events.on("click", (id, event) => {
+ // некоторая логика
+});
+~~~
+
+# Обзор событий TreeCollection
+
+Вы можете использовать следующие события [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-events/) из [**Suite**](https://docs.dhtmlx.com/suite/):
+
+| Название | Описание |
+| ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| [afterAdd](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_afteradd_event/) | Срабатывает после добавления нового элемента в древовидную коллекцию |
+| [afterRemove](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_afterremove_event/) | Срабатывает после удаления нового элемента из древовидной коллекции |
+| [beforeAdd](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_beforeadd_event/) | Срабатывает перед добавлением нового элемента в древовидную коллекцию |
+| [beforeRemove](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_beforeremove_event/) | Срабатывает перед удалением элемента из древовидной коллекции |
+| [change](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_change_event/) | Срабатывает при изменении древовидной коллекции |
+| [filter](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_filter_event/) | Срабатывает после фильтрации древовидной коллекции |
+| [load](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_load_event/) | Срабатывает при загрузке элементов в древовидную коллекцию |
+| [loadError](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_loaderror_event/) | Срабатывает при ошибке загрузки данных |
+| [removeAll](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_removeall_event/) | Срабатывает при удалении всех элементов из древовидной коллекции|
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// обрабатывает событие "load"
+editor.toolbar.events.on("load", () => {
+ // некоторая логика здесь
+});
+// загружает новые данные toolbar
+editor.toolbar.parse(["file", "spacer", "scale"]);
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/toolbar_events.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/toolbar_events.md
new file mode 100644
index 000000000..da669447b
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/toolbar_events.md
@@ -0,0 +1,32 @@
+---
+sidebar_label: События Toolbar
+title: События Toolbar
+description: Вы можете узнать о событиях Toolbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+Вы можете использовать следующие события [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-events/) библиотеки [**Suite**](https://docs.dhtmlx.com/suite/):
+
+| Название | Описание |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
+| [afterHide](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_afterhide_event/) | Происходит после скрытия дочернего элемента Toolbar |
+| [beforeHide](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_beforehide_event/) | Происходит перед скрытием дочернего элемента Toolbar |
+| [click](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_click_event/) | Происходит после клика по элементу управления |
+| [input](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_input_event/) | Происходит при вводе текста в поле ввода |
+| [inputBlur](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputblur_event/) | Происходит при потере фокуса элементом управления |
+| [inputChange](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputchange_event/) | Происходит при изменении значения в элементе управления Input панели Toolbar |
+| [inputFocus](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputfocus_event/) | Происходит при получении фокуса элементом управления |
+| [keydown](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_keydown_event/) | Происходит при нажатии любой клавиши, когда элемент управления Toolbar находится в фокусе |
+| [openMenu](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_openmenu_event/) | Происходит при раскрытии элемента управления меню |
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// обрабатывает событие "click"
+editor.toolbar.events.on("click", (id, event) => {
+ // некоторая логика
+});
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/treecollection_events.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/treecollection_events.md
new file mode 100644
index 000000000..c82a40b41
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/treecollection_events.md
@@ -0,0 +1,34 @@
+---
+sidebar_label: События TreeCollection
+title: События TreeCollection в Toolbar
+description: Вы можете узнать о событиях TreeCollection в Toolbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+Вы можете использовать следующие события [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-events/) библиотеки [**Suite**](https://docs.dhtmlx.com/suite/):
+
+| Название | Описание |
+| ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| [afterAdd](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_afteradd_event/) | Происходит после добавления нового элемента в древовидную коллекцию |
+| [afterRemove](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_afterremove_event/) | Происходит после удаления элемента из древовидной коллекции|
+| [beforeAdd](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_beforeadd_event/) | Происходит перед добавлением нового элемента в древовидную коллекцию |
+| [beforeRemove](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_beforeremove_event/) | Происходит перед удалением элемента из древовидной коллекции|
+| [change](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_change_event/) | Происходит при изменении древовидной коллекции |
+| [filter](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_filter_event/) | Происходит после фильтрации древовидной коллекции |
+| [load](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_load_event/) | Происходит при загрузке элементов в древовидную коллекцию |
+| [loadError](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_loaderror_event/) | Происходит при ошибке загрузки данных |
+| [removeAll](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_removeall_event/) | Происходит при удалении всех элементов из древовидной коллекции|
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// обрабатывает событие "load"
+editor.toolbar.events.on("load", () => {
+ // некоторая логика
+});
+// загружает новые данные Toolbar
+editor.toolbar.parse(["file", "spacer", "scale"]);
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/overview.md
new file mode 100644
index 000000000..789c119d2
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/overview.md
@@ -0,0 +1,89 @@
+---
+sidebar_label: Обзор методов
+title: Обзор методов Toolbar
+description: Вы можете узнать о методах Toolbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# Обзор методов Toolbar {#toolbar-methods-overview}
+
+:::info
+Используйте метод [`parse()`](api/diagram_editor/toolbar/methods/parse_method.md) для управления данными Toolbar.
+:::
+
+Вы можете использовать следующие методы [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-methods/) библиотеки [**Suite**](https://docs.dhtmlx.com/suite/):
+
+| Название | Описание |
+| :------------------------------------------------------------------------------------ | :--------------------------------------------------------- |
+| [disable()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_disable_method/) | Отключает и затемняет элемент(ы) Toolbar |
+| [enable()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_enable_method/) | Включает отключенный элемент(ы) Toolbar |
+| [getSelected()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_getselected_method/)| Возвращает массив с ID выбранных элементов |
+| [getState()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_getstate_method/) | Получает текущие значения/состояния элементов управления |
+| [hide()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_hide_method/) | Скрывает элемент Toolbar |
+| [isDisabled()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_isdisabled_method/) | Проверяет, отключен ли элемент Toolbar |
+| [isSelected()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_isselected_method/) | Проверяет, выбран ли указанный элемент Toolbar |
+| [paint()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_paint_method/) | Перерисовывает Toolbar на странице |
+| [select()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_select_method/) | Выбирает указанный элемент Toolbar |
+| [setFocus()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_setfocus_method/) | Устанавливает фокус на элемент управления Input по его ID |
+| [setState()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_setstate_method/) | Устанавливает значения/состояния элементов управления |
+| [show()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_show_method/) | Показывает элемент Toolbar |
+| [unselect()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_unselect_method/) | Снимает выделение с выбранного элемента Toolbar |
+
+~~~jsx {7-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// отключает элемент "file"
+editor.toolbar.disable("$file");
+// отключает элементы "file" и "scale"
+editor.toolbar.disable(["$file", "$scale"]);
+// отключает все элементы
+editor.toolbar.disable();
+~~~
+
+# Обзор методов TreeCollection {#treecollection-methods-overview}
+
+Вы можете использовать следующие методы [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-methods/) библиотеки [**Suite**](https://docs.dhtmlx.com/suite/):
+
+| Название | Описание |
+| ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| [add()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_add_method/) | Добавляет элемент в компонент |
+| [canCopy()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_cancopy_method/) | Проверяет, можно ли скопировать элемент управления в другой элемент управления |
+| [copy()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_copy_method/) | Добавляет копию элемента и размещает её в указанной позиции |
+| [eachChild()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_eachchild_method/) | Перебирает дочерние элементы элемента управления |
+| [eachParent()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_eachparent_method/) | Перебирает все родительские элементы (непосредственного родителя и его родителя и так далее, пока родителем не станет сам компонент) |
+| [exists()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_exists_method/) | Проверяет, существует ли указанный элемент в компоненте |
+| [filter()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_filter_method/) | Фильтрует элементы управления по определённому критерию |
+| [forEach()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_foreach_method/) | Перебирает все элементы древовидной коллекции |
+| [getFilters()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getfilters_method/) | Возвращает объект с применёнными фильтрами |
+| [getId()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getid_method/) | Получает ID элемента |
+| [getIndex()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getindex_method/) | Получает текущую позицию элемента |
+| [getItem()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getitem_method/) | Получает элемент по его ID |
+| [getItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getitems_method/) | Получает дочерние элементы элемента управления |
+| [getLength()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getlength_method/) | Подсчитывает дочерние элементы элемента управления |
+| [getParent()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getparent_method/) | Получает ID родителя элемента управления |
+| [getRoot()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getroot_method/) | Возвращает ID главного компонента |
+| [haveItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_haveitems_method/) | Проверяет, есть ли у элемента дочерние элементы |
+| [move()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_move_method/) | Перемещает элементы на другие позиции |
+| [refreshItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_refreshitems_method/) | Обновляет дочерние элементы элемента управления |
+| [remove()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_remove_method/) | Удаляет элемент |
+| [removeAll()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_removeall_method/) | Очищает компонент от всех элементов управления |
+| [resetFilter()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_resetfilter_method/) | Сбрасывает активные фильтры |
+| [restoreOrder()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_restoreorder_method/) | Восстанавливает компонент в состояние, предшествовавшее сортировке/фильтрации |
+| [save()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_save_method/) | Сохраняет изменения, внесённые в древовидную коллекцию, на стороне сервера |
+| [serialize()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_serialize_method/) | Сериализует данные компонента в формат JSON, XML или CSV |
+| [sort()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_sort_method/) | Сортирует элементы управления по определённому критерию |
+| [update()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_update_method/) | Изменяет элемент |
+
+~~~jsx {7-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// удаляет все элементы Toolbar
+editor.toolbar.data.removeAll();
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/parse_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/parse_method.md
new file mode 100644
index 000000000..33a102bee
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/parse_method.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: parse()
+title: Метод parse Toolbar
+description: Вы можете узнать о методе parse Toolbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# parse()
+
+### Описание {#description}
+
+@short: Загружает элементы в Toolbar редактора Diagram Editor
+
+### Использование {#usage}
+
+~~~jsx
+parse(items: (object | string)[]): void;
+~~~
+
+### Параметры {#parameters}
+
+- `items` - (обязательный) массив элементов, который передаётся в Toolbar. Полный список доступных элементов см. [здесь](api/diagram_editor/toolbar/config/items_property.md)
+
+### Пример {#example}
+
+~~~jsx {7-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ toolbar: true
+ }
+});
+// отображает Toolbar с указанными элементами
+editor.toolbar.parse([{ type: "file", disabled: false }, "spacer", "scale"]);
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/toolbar_methods.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/toolbar_methods.md
new file mode 100644
index 000000000..71ade69ca
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/toolbar_methods.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: Методы Toolbar
+title: Методы Toolbar
+description: Вы можете узнать о методах Toolbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+Вы можете использовать следующие методы [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-methods/) библиотеки [**Suite**](https://docs.dhtmlx.com/suite/):
+
+| Название | Описание |
+| :------------------------------------------------------------------------------------ | :--------------------------------------------------------- |
+| [disable()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_disable_method/) | Отключает и затемняет элемент(ы) Toolbar |
+| [enable()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_enable_method/) | Включает отключенный элемент(ы) Toolbar |
+| [getSelected()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_getselected_method/)| Возвращает массив с ID выбранных элементов |
+| [getState()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_getstate_method/) | Получает текущие значения/состояния элементов управления |
+| [hide()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_hide_method/) | Скрывает элемент Toolbar |
+| [isDisabled()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_isdisabled_method/) | Проверяет, отключен ли элемент Toolbar |
+| [isSelected()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_isselected_method/) | Проверяет, выбран ли указанный элемент Toolbar |
+| [paint()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_paint_method/) | Перерисовывает Toolbar на странице |
+| [select()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_select_method/) | Выбирает указанный элемент Toolbar |
+| [setFocus()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_setfocus_method/) | Устанавливает фокус на элемент управления Input по его ID |
+| [setState()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_setstate_method/) | Устанавливает значения/состояния элементов управления |
+| [show()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_show_method/) | Показывает элемент Toolbar |
+| [unselect()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_unselect_method/) | Снимает выделение с выбранного элемента Toolbar |
+
+~~~jsx {7-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// отключает элемент "file"
+editor.toolbar.disable("$file");
+// отключает элементы "file" и "scale"
+editor.toolbar.disable(["$file", "$scale"]);
+// отключает все элементы
+editor.toolbar.disable();
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/treecollection_methods.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/treecollection_methods.md
new file mode 100644
index 000000000..1a57daf8b
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/treecollection_methods.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: Методы TreeCollection
+title: Методы TreeCollection в Toolbar
+description: Вы можете узнать о методах TreeCollection в Toolbar в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+Вы можете использовать следующие методы [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-methods/) библиотеки [**Suite**](https://docs.dhtmlx.com/suite/):
+
+| Название | Описание |
+| ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| [add()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_add_method/) | Добавляет элемент в компонент |
+| [canCopy()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_cancopy_method/) | Проверяет, можно ли скопировать элемент управления в другой элемент управления |
+| [copy()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_copy_method/) | Добавляет копию элемента и размещает её в указанной позиции |
+| [eachChild()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_eachchild_method/) | Перебирает дочерние элементы элемента управления |
+| [eachParent()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_eachparent_method/) | Перебирает все родительские элементы (непосредственного родителя и его родителя и так далее, пока родителем не станет сам компонент) |
+| [exists()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_exists_method/) | Проверяет, существует ли указанный элемент в компоненте |
+| [filter()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_filter_method/) | Фильтрует элементы управления по определённому критерию |
+| [forEach()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_foreach_method/) | Перебирает все элементы древовидной коллекции |
+| [getFilters()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getfilters_method/) | Возвращает объект с применёнными фильтрами |
+| [getId()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getid_method/) | Получает ID элемента |
+| [getIndex()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getindex_method/) | Получает текущую позицию элемента |
+| [getItem()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getitem_method/) | Получает элемент по его ID |
+| [getItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getitems_method/) | Получает дочерние элементы элемента управления |
+| [getLength()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getlength_method/) | Подсчитывает дочерние элементы элемента управления |
+| [getParent()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getparent_method/) | Получает ID родителя элемента управления |
+| [getRoot()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getroot_method/) | Возвращает ID главного компонента |
+| [haveItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_haveitems_method/) | Проверяет, есть ли у элемента дочерние элементы |
+| [move()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_move_method/) | Перемещает элементы на другие позиции |
+| [refreshItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_refreshitems_method/) | Обновляет дочерние элементы элемента управления |
+| [remove()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_remove_method/) | Удаляет элемент |
+| [removeAll()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_removeall_method/) | Очищает компонент от всех элементов управления |
+| [resetFilter()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_resetfilter_method/) | Сбрасывает активные фильтры |
+| [restoreOrder()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_restoreorder_method/) | Восстанавливает компонент в состояние, предшествовавшее сортировке/фильтрации |
+| [save()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_save_method/) | Сохраняет изменения, внесённые в древовидную коллекцию, на стороне сервера |
+| [serialize()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_serialize_method/) | Сериализует данные компонента в формат JSON, XML или CSV |
+| [sort()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_sort_method/) | Сортирует элементы управления по определённому критерию |
+| [update()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_update_method/) | Изменяет элемент |
+
+~~~jsx {7-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// удаляет все элементы Toolbar
+editor.toolbar.data.removeAll();
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/api_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/api_overview.md
new file mode 100644
index 000000000..e4d85c68f
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/api_overview.md
@@ -0,0 +1,26 @@
+---
+sidebar_label: Обзор API View
+title: Обзор API View
+description: Вы можете ознакомиться с обзором View в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Обзор API View {#view-api-overview}
+
+Набор API, которые можно использовать для управления видимостью представлений Diagram Editor: Toolbar, Shapebar и Editbar.
+
+## Обзор методов View {#view-methods-overview}
+
+| Название | Описание |
+| :---------------------------------------------------------- | :------------------------------------------------------------ |
+| [](api/diagram_editor/view/methods/hide_method.md) | @getshort(api/diagram_editor/view/methods/hide_method.md) |
+| [](api/diagram_editor/view/methods/isvisible_method.md) | @getshort(api/diagram_editor/view/methods/isvisible_method.md)|
+| [](api/diagram_editor/view/methods/show_method.md) | @getshort(api/diagram_editor/view/methods/show_method.md) |
+
+## Обзор событий View {#view-events-overview}
+
+| Название | Описание |
+| :--------------------------------------------------------- | :---------------------------------------------------------- |
+| [](api/diagram_editor/view/events/afterhide_event.md) | @getshort(api/diagram_editor/view/events/afterhide_event) |
+| [](api/diagram_editor/view/events/aftershow_event.md) | @getshort(api/diagram_editor/view/events/aftershow_event) |
+| [](api/diagram_editor/view/events/beforehide_event.md) | @getshort(api/diagram_editor/view/events/beforehide_event) |
+| [](api/diagram_editor/view/events/beforeshow_event.md) | @getshort(api/diagram_editor/view/events/beforeshow_event) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/afterhide_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/afterhide_event.md
new file mode 100644
index 000000000..765afaf89
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/afterhide_event.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: afterHide
+title: Событие afterHide для View
+description: Вы можете узнать о событии afterHide для View в документации Diagram Editor библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# afterHide {#afterhide}
+
+### Описание {#description}
+
+@short: Срабатывает после скрытия представления Toolbar, Editbar или Shapebar
+
+### Использование {#usage}
+
+~~~jsx
+"afterHide": (view: "toolbar" | "shapebar" | "editbar") => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события `afterHide` вызывается со следующим параметром:
+
+- `view` — (обязательный) представление, которое было скрыто. Подробнее см. в описании свойства [`view`](api/diagram_editor/editor/config/view_property.md).
+
+:::info
+Для обработки внутренних событий Diagram Editor используйте метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {9-12}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: true
+ }
+});
+
+// подключение обработчика события
+editor.view.events.on("afterHide", (view) => {
+ console.log("The " + view + " view of Diagram Editor was hidden");
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/aftershow_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/aftershow_event.md
new file mode 100644
index 000000000..98bf1aa40
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/aftershow_event.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: afterShow
+title: Событие afterShow для View
+description: Вы можете узнать о событии afterShow для View в документации Diagram Editor библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# afterShow {#aftershow}
+
+### Описание {#description}
+
+@short: Срабатывает после отображения представления Toolbar, Editbar или Shapebar
+
+### Использование {#usage}
+
+~~~jsx
+"afterShow": (view: "toolbar" | "shapebar" | "editbar") => void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события `afterShow` вызывается со следующим параметром:
+
+- `view` — (обязательный) представление, которое было отображено. Подробнее см. в описании свойства [`view`](api/diagram_editor/editor/config/view_property.md).
+
+:::info
+Для обработки внутренних событий Diagram Editor используйте метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {9-12}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: false
+ }
+});
+
+// подключение обработчика события
+editor.view.events.on("afterShow", (view) => {
+ console.log("The " + view + " view of Diagram Editor was displayed");
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforehide_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforehide_event.md
new file mode 100644
index 000000000..c2d061ca8
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforehide_event.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: beforeHide
+title: Событие beforeHide для View
+description: Вы можете узнать о событии beforeHide для View в документации Diagram Editor библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# beforeHide {#beforehide}
+
+### Описание {#description}
+
+@short: Срабатывает перед скрытием представления Toolbar, Editbar или Shapebar
+
+### Использование {#usage}
+
+~~~jsx
+"beforeHide": (view: "toolbar" | "shapebar" | "editbar") => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события `beforeHide` вызывается со следующим параметром:
+
+- `view` — (обязательный) представление, которое будет скрыто. Подробнее см. в описании свойства [`view`](api/diagram_editor/editor/config/view_property.md).
+
+:::info
+Для обработки внутренних событий Diagram Editor используйте метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {9-12}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: true
+ }
+});
+
+// подключение обработчика события
+editor.view.events.on("beforeHide", (view) => {
+ console.log("The " + view + " view of Diagram Editor will be hidden");
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforeshow_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforeshow_event.md
new file mode 100644
index 000000000..89043f392
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforeshow_event.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: beforeShow
+title: Событие beforeShow для View
+description: Вы можете узнать о событии beforeShow для View в документации Diagram Editor библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# beforeShow {#beforeshow}
+
+### Описание {#description}
+
+@short: Срабатывает перед отображением представления Toolbar, Editbar или Shapebar
+
+### Использование {#usage}
+
+~~~jsx
+"beforeShow": (view: "toolbar" | "shapebar" | "editbar") => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбек события `beforeShow` вызывается со следующим параметром:
+
+- `view` — (обязательный) представление, которое будет отображено. Подробнее см. в описании свойства [`view`](api/diagram_editor/editor/config/view_property.md).
+
+:::info
+Для обработки внутренних событий Diagram Editor используйте метод `on()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {9-12}
+// инициализация Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: false
+ }
+});
+
+// подключение обработчика события
+editor.view.events.on("beforeShow", (view) => {
+ console.log("The " + view + " view of Diagram Editor will be displayed");
+});
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/overview.md
new file mode 100644
index 000000000..232c95ec6
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/overview.md
@@ -0,0 +1,14 @@
+---
+sidebar_label: События View
+title: Обзор событий View
+description: Вы можете изучить события View в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# Обзор событий View {#view-events-overview}
+
+| Название | Описание |
+| :--------------------------------------------------------- | :---------------------------------------------------------------- |
+| [](api/diagram_editor/view/events/afterhide_event.md) | @getshort(api/diagram_editor/view/events/afterhide_event) |
+| [](api/diagram_editor/view/events/aftershow_event.md) | @getshort(api/diagram_editor/view/events/aftershow_event) |
+| [](api/diagram_editor/view/events/beforehide_event.md) | @getshort(api/diagram_editor/view/events/beforehide_event) |
+| [](api/diagram_editor/view/events/beforeshow_event.md) | @getshort(api/diagram_editor/view/events/beforeshow_event) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/hide_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/hide_method.md
new file mode 100644
index 000000000..1bcb794a0
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/hide_method.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: hide()
+title: Метод hide View
+description: Вы можете узнать о методе hide объекта view в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# hide()
+
+### Описание {#description}
+
+@short: Скрывает панель инструментов, панель редактирования и панель фигур Diagram Editor.
+
+:::info
+Если вам нужно скрыть элементы `Toolbar`, `Editbar` и `Shapebar` по отдельности, вызовите метод `hide()` с соответствующим параметром. Чтобы скрыть все эти элементы, вызовите метод `hide()` без параметров.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+hide(view?: "toolbar" | "shapebar" | "editbar"): void;
+~~~
+
+### Параметры {#parameters}
+
+- `toolbar` - (опционально) скрывает панель инструментов
+- `shapebar` - (опционально) скрывает панель фигур
+- `editbar` - (опционально) скрывает панель редактирования
+
+### Пример {#example}
+
+~~~jsx {5-6,8-9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+
+// скрывает панель фигур
+editor.view.hide("shapebar");
+
+// скрывает панель фигур, панель редактирования и панель инструментов
+editor.view.hide();
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/isvisible_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/isvisible_method.md
new file mode 100644
index 000000000..b6f468cd5
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/isvisible_method.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: isVisible()
+title: Метод isVisible View
+description: Вы можете узнать о методе isVisible объекта view в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# isVisible()
+
+### Описание {#description}
+
+@short: Проверяет, видна ли панель инструментов, панель редактирования или панель фигур Diagram Editor.
+
+### Использование {#usage}
+
+~~~jsx
+isVisible(view: "toolbar" | "shapebar" | "editbar"): boolean;
+~~~
+
+### Параметры {#parameters}
+
+- `toolbar` - (обязательно) проверяет, видна ли панель инструментов
+- `shapebar` - (обязательно) проверяет, видна ли панель фигур
+- `editbar` - (обязательно) проверяет, видна ли панель редактирования
+
+### Пример {#example}
+
+~~~jsx {9-11}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: false,
+ toolbar: true
+ }
+});
+
+// проверяет видимость панели инструментов и панели фигур
+editor.view.isVisible("shapebar"); // вернёт false
+editor.view.isVisible("toolbar"); // вернёт true
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/overview.md
new file mode 100644
index 000000000..78402b7c2
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/overview.md
@@ -0,0 +1,13 @@
+---
+sidebar_label: Методы View
+title: Обзор методов View
+description: Вы можете изучить методы View в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# Обзор методов View {#view-methods-overview}
+
+| Название | Описание |
+| :----------------------------------------------------- | :------------------------------------------------------------- |
+| [](api/diagram_editor/view/methods/hide_method.md) | @getshort(api/diagram_editor/view/methods/hide_method.md) |
+| [](api/diagram_editor/view/methods/isvisible_method.md)| @getshort(api/diagram_editor/view/methods/isvisible_method.md) |
+| [](api/diagram_editor/view/methods/show_method.md) | @getshort(api/diagram_editor/view/methods/show_method.md) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/show_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/show_method.md
new file mode 100644
index 000000000..d07fbe0b4
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/show_method.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: show()
+title: Метод show View
+description: Вы можете узнать о методе show объекта view в документации библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# show()
+
+### Описание {#description}
+
+@short: Показывает панель инструментов, панель редактирования и панель фигур Diagram Editor
+
+:::info
+Если вам нужно показать элементы `Toolbar`, `Editbar` или `Shapebar` по отдельности, вызовите метод `show()` с соответствующим параметром. Чтобы показать все эти элементы, вызовите метод `show()` без параметров.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+show(view?: "toolbar" | "shapebar" | "editbar"): void;
+~~~
+
+### Параметры {#parameters}
+
+- `toolbar` - (опционально) показывает панель инструментов
+- `shapebar` - (опционально) показывает панель фигур
+- `editbar` - (опционально) показывает панель редактирования
+
+### Пример {#example}
+
+~~~jsx {5-6,8-9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+
+// показывает панель фигур
+editor.view.show("shapebar");
+
+// показывает панель фигур, панель редактирования и панель инструментов
+editor.view.show();
+~~~
+
+**Журнал изменений**: Добавлено в v6.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/export/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/export/index.md
new file mode 100644
index 000000000..4deec1aca
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/export/index.md
@@ -0,0 +1,16 @@
+---
+sidebar_label: Методы экспорта
+title: Обзор методов экспорта
+description: Ознакомьтесь с обзором методов экспорта диаграммы в документации библиотеки DHTMLX JavaScript Diagram. Изучите гайды для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Обзор методов экспорта {#export-methods-overview}
+
+Методы API объекта `diagram.export` позволяют экспортировать данные из Diagram или Diagram Editor.
+
+## Методы {#methods}
+
+| Название | Описание |
+| :--------------------------- | :---------------------------------- |
+| [](api/export/pdf_method.md) | @getshort(api/export/pdf_method.md) |
+| [](api/export/png_method.md) | @getshort(api/export/png_method.md) |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/export/pdf_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/export/pdf_method.md
new file mode 100644
index 000000000..eb0b0d1c0
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/export/pdf_method.md
@@ -0,0 +1,110 @@
+---
+sidebar_label: pdf()
+title: Метод pdf
+description: Узнайте больше о методе pdf в документации библиотеки DHTMLX JavaScript Diagram. Изучите гайды для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# pdf()
+
+### Описание {#description}
+
+@short: Экспортирует диаграмму в файл PDF
+
+:::note
+Чтобы избежать проблем при экспорте, все изображения для фигур Diagram должны быть заданы либо в формате base64, либо через абсолютный URL.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+pdf(config?: object): Promise
+
+Соединение между родительской фигурой и её партнёром всегда горизонтальное. Кроме того, соединения между родительской фигурой и всеми её дочерними элементами становятся горизонтальными после добавления партнёрского элемента для родителя, даже если ранее соединения были вертикальными.
+
+### Редактор в режиме интеллект-карты {#editor-in-the-mindmap-mode}
+
+Интерфейс редактора, инициализированного в режиме интеллект-карты, состоит из трёх частей:
+
+- [панель инструментов](guides/diagram_editor/toolbar.md)
+- [область сетки](guides/diagram_editor/grid_area.md)
+- [панель редактирования](guides/diagram_editor/editbar.md)
+
+:::note
+В этом режиме у редактора нет панели фигур
+:::
+
+Чтобы построить диаграмму в режиме интеллект-карты редактора, нужно выбрать фигуру и добавить для неё новый дочерний элемент. Вы можете перетаскивать фигуры от одного родительского элемента к другому. При перетаскивании элемент перемещается вместе со всеми своими дочерними элементами.
+
+Вы можете настраивать атрибуты фигур через доступные [боковые параметры панели редактирования](guides/diagram_editor/editbar.md). Чтобы ускорить процесс оформления, используйте комбинацию `Alt (Option) + Ctrl (Cmd) + С` для копирования стилей элемента и `Alt (Option) + Ctrl (Cmd) + V` для применения этих стилей к выбранным элементам.
+
+ 
+
+ **Связанный пример:** [Diagram Editor. Режим интеллект-карты. Интеллект-карта эмоций](https://snippet.dhtmlx.com/lo1vm0e8?text=diagram&mode=wide)
+
+Если вы добавили пользовательскую фигуру в редактор в режиме интеллект-карты, вы можете [настроить панель редактирования](api/diagram_editor/editbar/config/properties_property.md), чтобы иметь возможность редактировать пользовательские свойства фигуры.
+
+## Что дальше {#whats-next}
+
+Это всё. Теперь вы можете начать работу с диаграммами или продолжить изучение внутреннего устройства JavaScript Diagram и Diagram Editor в разделе [руководства](guides/overview.md).
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/groups/configuration_properties.md b/i18n/ru/docusaurus-plugin-content-docs/current/groups/configuration_properties.md
new file mode 100644
index 000000000..e37b7d0da
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/groups/configuration_properties.md
@@ -0,0 +1,243 @@
+---
+sidebar_label: Свойства Group
+title: Свойства Group
+description: Вы можете узнать о свойствах Group в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и демонстрации в реальном времени, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Свойства Group {#group-properties}
+
+:::note
+Указывайте значения цвета в формате HEX.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+const data = [
+ // объект группы
+ {
+ type: "$group",
+ id?: string | number,
+ x?: number,
+ y?: number,
+ width: number,
+ height: number,
+ groupChildren?: array,
+ open?: boolean, // true по умолчанию
+ fixed?: boolean, // false по умолчанию
+ style?: {
+ strokeWidth?: number, // 1 по умолчанию
+ stroke?: string, // "#DEDEDE" по умолчанию
+ fill?: string,
+ overFill?: string,
+ partiallyFill?: string
+ },
+ exitArea?: {
+ // "unbound" по умолчанию
+ groupBehavior?: "unbound" | "boundNoBorderExtension" | "boundBorderExtension",
+ padding?: number
+ },
+ header?: {
+ height?: number, // 40 по умолчанию
+ fill?: string,
+ text?: string,
+ fontSize?: number, // 14 по умолчанию
+ lineHeight?: number, // 14 по умолчанию
+ textAlign?: "left" | "center" | "right", // "center" по умолчанию
+ textVerticalAlign?: "top" | "center" | "bottom", // "center" по умолчанию
+ fontStyle?: "normal" | "italic" | "oblique", // "normal" по умолчанию
+ fontColor?: string, // "#4C4C4C" по умолчанию
+ fontWeight?: string, // "500" по умолчанию
+ iconColor?: string, // "#808080" по умолчанию
+ position?: "top" | "bottom" | "left" | "right", // "top" по умолчанию
+ editable?: boolean, // true по умолчанию
+ closable?: boolean, // false по умолчанию
+ enable?: boolean // true по умолчанию
+ },
+ [key: string]?: any
+ },
+ // другие объекты групп
+];
+~~~
+
+### Описание {#description}
+
+Объект группы содержит список свойств конфигурации, которые позволяют настроить позиционирование и внешний вид группы:
+
+- `type` - (обязательное) тип элемента, укажите значение "$group"
+- `id` - (необязательное) уникальный id группы
+- `x` - (необязательное) координата x положения группы
+- `y` - (необязательное) координата y положения группы
+- `width` - (обязательное) ширина группы, включая её заголовок (*position: left/right*)
+- `height` - (обязательное) высота группы, включая её заголовок (*position: top/bottom*)
+- `groupChildren` - (необязательное) массив с id дочерних элементов первого уровня вложенности группы
+- `open` - (необязательное) определяет, инициализируется ли группа в развёрнутом (*true*, по умолчанию) или свёрнутом (*false*) состоянии
+:::tip
+Свойство `open` работает, если `header` инициализирован с атрибутом `closable`
+:::
+- `fixed` - (необязательное) включает/отключает возможность перемещения и изменения размера группы; *false* по умолчанию
+- `style` - (необязательное) объект с настройками стиля группы. Объект может содержать следующие атрибуты:
+ - `strokeWidth` - (необязательное) ширина границы группы, 1 по умолчанию
+ - `stroke` - (необязательное) цвет границы группы, "#DEDEDE" по умолчанию
+ - `fill` - (необязательное) цвет фона группы
+ - `overFill` - (необязательное) цвет фона группы, когда пользователь удерживает элемент и перемещает его внутрь/наружу группы *при условии, что весь элемент находится внутри группы*
+ - `partiallyFill` - (необязательное) цвет фона группы, когда пользователь удерживает элемент и перемещает его внутрь/наружу группы *при условии, что часть элемента находится за пределами группы, а прочие настройки не заданы через атрибут `exitArea`*
+- `exitArea` - (необязательное) объект с настройками, которые будут применены к элементу, когда пользователь перетаскивает его за пределы группы (*применяется только к дочерним элементам первого уровня вложенности группы*). Объект может содержать следующие атрибуты:
+ - `groupBehavior` - (необязательное) поведение дочернего элемента группы, когда пользователь перемещает его за пределы группы:
+ - `"unbound"` (по умолчанию) - пользователь может перемещать элемент внутрь или за пределы группы
+ - `"boundNoBorderExtension"` - пользователь может переместить элемент в группу, но не может перетащить его за пределы группы, если элемент уже был помещён внутрь группы. Элемент не будет расширять границы группы, когда пользователь пытается перетащить его за пределы группы
+ - `"boundBorderExtension"` - пользователь может переместить элемент в группу, но не может перетащить его за пределы группы, если элемент уже был помещён внутрь группы. Элемент будет расширять границы группы, когда пользователь пытается перетащить его за пределы группы **Связанный пример**: [Редактор Diagram. Режим по умолчанию. Взаимодействие Groups и фигур](https://snippet.dhtmlx.com/4gxy38ek) + - `padding` - (необязательное) определяет отступ между группой и краем элемента при перемещении элемента внутри группы + :::tip + Атрибут `padding` доступен, если `groupBehavior` установлен в значение `"boundNoBorderExtension"` или `"boundBorderExtension"` + ::: +- `header` - (необязательное) объект с настройками конфигурации заголовка группы. Атрибуты: + - `height` - (необязательное) высота заголовка, 40 по умолчанию + - `fill` - (необязательное) цвет фона заголовка + - `text` - (необязательное) текст, отображаемый в заголовке + - `fontSize` - (необязательное) размер шрифта в пикселях, 14 по умолчанию + - `lineHeight` - (необязательное) высота строки, 14 по умолчанию + - `textAlign` - (необязательное) выравнивание текста в заголовке: `"left"`, `"center"` (по умолчанию), `"right"` + - `textVerticalAlign` - (необязательное) вертикальное выравнивание текста в заголовке: `"top"`, `"center"` (по умолчанию), `"bottom"` + - `fontStyle` - (необязательное) стиль шрифта текста: `"normal"` (по умолчанию), `"italic"`, `"oblique"` + - `fontColor` - (необязательное) цвет шрифта текста, "#4C4C4C" по умолчанию + - `fontWeight` - (необязательное) насыщенность шрифта текста, возможные значения: `"normal"`, `"bold"`, `"bolder"`, `"lighter"`, значения `"100"`-`"900"`, где `"400"` соответствует normal, а `"600"` и выше - самый жирный шрифт; `"500"` по умолчанию + - `iconColor` - (необязательное) цвет иконки заголовка, "#808080" по умолчанию + - `position` - (необязательное) позиционирование заголовка группы: `"top"` (по умолчанию) | `"bottom"` | `"left"` | `"right"` + - `editable` - (необязательное) включает/отключает возможность редактирования текста заголовка двойным щелчком по нему; *true* по умолчанию + - `closable` - (необязательное) показывает/скрывает иконку, предназначенную для разворачивания/сворачивания группы; *false* по умолчанию + - `enable` - (необязательное) показывает/скрывает заголовок группы; *true* по умолчанию +- `key` - (необязательное) пользовательское свойство с вашей собственной логикой, реализованной "под капотом" + +### Пример {#example} + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: { + text: "Top and collapsed header with tеxt alignment", + editable: true, + closable: true, + textAlign: "left", // "left", "center", "right" + textVerticalAlign: "center", // "top", "center", "bottom" + }, + // дочерние элементы группы + groupChildren: [1.1, 1.2], + open: false + }, + // настройка фигур для добавления в группу + { type: "rectangle", id: 1.1, x: 50, y: 75, text: "Shape 1.1" }, + { type: "rectangle", id: 1.2, x: 200, y: 75, text: "Shape 1.2" } +]; +~~~ + +**Полезная статья**: [Настройка Groups](/groups/) + +## Свойства, специфичные для объекта "project" {#properties-specific-for-project-object} + +Объект "project" используется как контейнер для задач и вех. Он работает как [Group](/groups/), позволяет создавать PERT-диаграммы различных уровней вложенности и обеспечивает визуальную группировку. + +### Использование {#usage-1} + +~~~jsx +const data = [ + // объект project + { + type: "project", + id: string | number, + parent?: string | number | null, + text?: string, // задаёт свойство header.text + open?: boolean, + + // генерируется автоматически + x?: number, + y?: number, + width?: number, + height?: number, + groupChildren?: (string | number)[], + style?: { + fill?: string, // "#20B56D08" по умолчанию + stroke?: string, // "#20B56D33" по умолчанию + borderStyle?: string, // "dashed" по умолчанию + }, + header?: { + height?: number, // 40 по умолчанию + text?: string, // генерируется автоматически на основе свойства text + closable?: boolean, // false по умолчанию + enable?: boolean, // true по умолчанию + fill?: string // "inherit" по умолчанию + } + }, + // другие объекты project +] +~~~ + +### Описание {#description-1} + +При подготовке набора данных для объекта `"project"` вы можете использовать следующие свойства конфигурации: + +- `type` - (обязательное) тип элемента, укажите значение `"project"` +- `id` - (необязательное) уникальный id проекта +- `parent` - (необязательное) id родителя проекта +- `text` - (необязательное) описание проекта +- `open` - (необязательное) определяет, инициализируется ли проект в развёрнутом (*true*, по умолчанию) или свёрнутом (*false*) состоянии + +Свойства ниже генерируются автоматически. Они вычисляются во время рендеринга, и их не следует задавать вручную. + +- `x` - (необязательное) координата x положения проекта +- `y` - (необязательное) координата y положения проекта +- `width` - (обязательное) ширина проекта, включая его заголовок (*position: left/right*) +- `height` - (обязательное) высота проекта, включая его заголовок (*position: top/bottom*) +- `groupChildren` - (необязательное) массив с id дочерних элементов первого уровня вложенности проекта +- `style` - (необязательное) объект с настройками стиля проекта. Объект может содержать следующие атрибуты: + - `fill` - (необязательное) цвет фона проекта + - `stroke` - (необязательное) цвет границы проекта + - `borderStyle` - (необязательное) стиль границы проекта +- `header` - (необязательное) объект с настройками конфигурации заголовка проекта. Атрибуты: + - `height` - (необязательное) высота заголовка, 40 по умолчанию + - `text` - (необязательное) текст, отображаемый в заголовке (генерируется автоматически на основе свойства `text`) + - `closable` - (необязательное) показывает/скрывает иконку, предназначенную для разворачивания/сворачивания группы; *false* по умолчанию + - `enable` - (необязательное) показывает/скрывает заголовок проекта; *true* по умолчанию + - `fill` - (необязательное) цвет фона заголовка + + +### Пример {#example-1} + +~~~jsx +const data = [ + { + "id": "4.2", + "text": "QA Testing", + "type": "project", + "parent": "4", + "start_date": new Date(2026, 1, 18), + "duration": 3, + "progress": 0, + "open": true + }, + { + "id": "4.2.1", + "text": "Functional Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 18), + "duration": 2 + }, + { + "id": "4.2.2", + "text": "Usability Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 20), + "duration": 1 + } +]; +~~~ + +**Полезная статья**: [Группировка фигур в режиме PERT](/groups/#grouping-shapes-in-the-pert-mode) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/groups/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/groups/index.md new file mode 100644 index 000000000..b218aed44 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/groups/index.md @@ -0,0 +1,186 @@ +--- +sidebar_label: Groups +title: Groups +description: Вы можете узнать о Groups в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и демонстрации в реальном времени, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Groups {#groups} + +## Обзор Group {#group-overview} + +Group — это отдельный тип элемента Diagram. Вы можете рисовать простые или более сложные схемы, группируя фигуры или другие Groups различными способами. Вы можете создавать как одноуровневые, так и вложенные Groups, а также настраивать их внешний вид и поведение. + +:::note +Groups доступны только в режиме по умолчанию для Diagram/Diagram Editor (type: `"default"`). +::: + + + +## Создание Groups {#creating-groups} + +Чтобы создать Group, укажите *"$group"* в качестве значения атрибута `type` внутри объекта группы при подготовке соответствующей JSON-структуры для загрузки в Diagram: + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: { + text: "User Access" + }, + groupChildren: ["1.1", "1.2"] + }, + { + type: "it", + id: "1.1", + x: 50, + y: 75, + text: "Remote Desktop" + }, + { + type: "it", + id: "1.2", + x: 200, + y: 75, + text: "Login Server" + }, +]; + +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container"); +diagram.data.parse(data); +~~~ + +### Свойства {#properties} + +Смотрите [полный список свойств конфигурации объекта `group`](groups/configuration_properties.md), которые позволяют настроить позиционирование и внешний вид Group. + +## Группировка фигур в режиме PERT {#grouping-shapes-in-the-pert-mode} + +Чтобы сгруппировать фигуры типов `"task"` и `"milestone"` в режиме PERT Diagram, используйте объект `"project"` в наборе данных Diagram. Объект `"project"` служит контейнером для задач и вех, работая как Group. Он позволяет создавать PERT-диаграммы с различными уровнями вложенности и обеспечивает визуальную группировку. + +~~~jsx +const data = [ + { + "id": "4.2", + "text": "QA Testing", + "type": "project", + "parent": "4", + "start_date": new Date(2026, 1, 18), + "duration": 3, + "progress": 0, + "open": true + }, + { + "id": "4.2.1", + "text": "Functional Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 18), + "duration": 2 + }, + { + "id": "4.2.2", + "text": "Usability Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 20), + "duration": 1 + } +]; +~~~ + + + +### Свойства {#properties-1} + +Смотрите [полный список свойств конфигурации объекта `"project"`](groups/configuration_properties.md#properties-specific-for-project-object), которые позволяют настроить позиционирование и внешний вид задач и вех в проекте. + +## Настройка заголовка Group {#configuring-the-group-header} + +Заголовок Group по умолчанию отключён. Чтобы создать Group с заголовком, укажите свойство `header` в объекте конфигурации Group. + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: {} + } +]; +~~~ + +Это свойство содержит несколько атрибутов, которые позволяют легко настроить конфигурацию заголовка Group. +Например, вы можете задать высоту заголовка и его позицию, указать текст заголовка и настроить остальные параметры. + + + +Ознакомьтесь с [полным списком свойств API объекта Group](groups/configuration_properties.md). + +### Иконка заголовка {#a-header-icon} + +Чтобы свернуть или развернуть Group, включите атрибут `closable` свойства [заголовка](groups/configuration_properties.md). В результате в заголовок будет добавлена иконка, позволяющая пользователю разворачивать/сворачивать Group. + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: { + text: "Top and collapsed header with tеxt alignment", + closable: true + } + } +]; +~~~ + +Вы можете изменить цвет иконки с помощью атрибута `iconColor` [объекта Group](groups/configuration_properties.md). + +## Настройка поведения элементов Group {#configuring-the-behavior-of-group-items} + +По умолчанию вы можете перетащить любой дочерний элемент Group за пределы Group и переместить его в другую Group. +Чтобы изменить поведение элементов Group, используйте атрибуты `groupBehavior` и `padding` свойства `exitArea` объекта [Group](groups/configuration_properties.md). + +:::note +Свойство `exitArea` определяет поведение только дочерних элементов первого уровня вложенности настраиваемой Group. +::: + + + +Значения `"unbound"` и `"boundBorderExtension"` атрибута `groupBehavior` позволяют определить, можно ли перемещать дочерние элементы за пределы Group, а также задать расширение границ Group, когда пользователь пытается перетащить элемент за её пределы. При необходимости вы также можете отключить возможность перетаскивания элементов за пределы Group с помощью значения `"boundNoBorderExtension"`. + + + +Если `groupBehavior` установлено в значение `"boundNoBorderExtension"` или `"boundBorderExtension"`, вы можете задать отступ между Group и краем элемента при перемещении элемента внутри Group. Для этого используйте атрибут `padding`: + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 830, + height: 400, + x: 0, + y: 0, + exitArea: { + groupBehavior: "boundBorderExtension", + padding: 10 + }, + //fixed: true, + groupChildren: ["1.1", "1.2", "1.3"] + }, + // ... +]; +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/ai-integrations/ai-demo.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/ai-integrations/ai-demo.md new file mode 100644 index 000000000..229653d63 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/ai-integrations/ai-demo.md @@ -0,0 +1,88 @@ +--- +sidebar_label: Демонстрация интеграции ИИ +title: Создание Diagram на основе ИИ +description: Пошаговое руководство по запуску ИИ-демонстрации DHTMLX Diagram. Генерация организационной диаграммы из текста с помощью OpenAI API, с живым предпросмотром и редактором JSON. +--- + +# Создание Diagram на основе ИИ {#building-ai-powered-diagram} + +DHTMLX Diagram можно интегрировать с ИИ для создания приложений для построения диаграмм на основе ИИ. Мы подготовили пример того, как использовать DHTMLX Diagram с ИИ для создания приложения, формирующего организационную диаграмму на основе запроса, сформулированного на естественном языке. + +[Демонстрационное приложение](https://dhtmlx.com/docs/demo/ai-org-chart-builder/) включает такие функции, как преобразование текста в диаграмму, генерацию JSON на основе ИИ, мгновенный живой предпросмотр готовой диаграммы и встроенный редактор кода для просмотра и корректировки сгенерированных данных JSON с обновлением предпросмотра диаграммы «на лету». Дополнительную информацию см. в соответствующем [репозитории GitHub](https://github.com/DHTMLX/diagram-org-chart-builder-ai-demo). + +## Настройка проекта {#project-setup} + +Чтобы скачать проект, клонируйте репозиторий с помощью следующей команды: + +~~~jsx +git clone diagram-org-chart-builder-ai-demo +~~~ + +затем перейдите в репозиторий проекта с помощью команды ниже: + +~~~jsx +cd diagram-org-chart-builder-ai-demo +~~~ + +### Установка зависимостей {#installing-dependencies} + +Для установки зависимостей и запуска приложения вам понадобится менеджер пакетов. В этом руководстве используется [npm](https://www.npmjs.com/) — установите демонстрационное приложение, выполнив следующую команду: + +~~~jsx +npm install +~~~ + +### Настройка переменных окружения {#adjusting-environment-variables} + +Затем необходимо настроить переменные окружения. Для этого создайте новый файл с именем `.env` внутри директории **diagram-org-chart-builder-ai-demo**, скопировав содержимое файла `env.sample`. +Новый созданный файл `.env` будет хранить ваши ключи и настройки. Заполните обязательные значения, указанные ниже: + +~~~jsx title="diagram-org-chart-builder-ai-demo/.env" +# --- Конфигурация OpenAI API --- +OPENAI_API_KEY=sk-YourSecretApiKeyGoesHere +OPENAI_BASE_URL=https://api.openai.com/v1 + +# --- Конфигурация безопасности --- +CORS_ALLOWED_ORIGINS=http://localhost:3001,http://127.0.0.1:3001,http://localhost:5500,http://127.0.0.1:5500 + +# --- Конфигурация сервера (опционально) --- +PORT=3001 +~~~ + +:::info +НЕ загружайте файл `.env`, так как он содержит конфиденциальную информацию! +::: + +Ниже приведено описание переменных файла `.env`: + +- `OPENAI_API_KEY`: (Обязательно) Ваш секретный API-ключ для сервиса ИИ. +- `OPENAI_BASE_URL`: Конечная точка API для сервиса ИИ. Можно изменить для использования прокси или другого провайдера, совместимого с OpenAI API. +- `CORS_ALLOWED_ORIGINS`: Важная настройка безопасности. Это список веб-адресов, разделённых запятыми, которым разрешено подключаться к вашему бэкенд-серверу. Для продакшена вы **обязательно должны** изменить это значение на URL вашего публичного фронтенда (например, `https://myapp.com`). +- `PORT`: (Опционально) Номер порта, на котором будет работать сервер. Если не задан, по умолчанию используется 3001. + +### Запуск приложения {#running-the-application} + +Чтобы запустить приложение, выполните следующую команду в директории приложения: + +~~~jsx +npm start // это обязательная команда запуска +~~~ + +В терминале вы должны увидеть следующий вывод: + +~~~jsx +Server started on port 3001. +~~~ + +Затем откройте веб-браузер и перейдите по адресу `http://localhost:3001`, чтобы увидеть приложение, готовое к генерации диаграмм. + +## Как работает демонстрационное приложение {#how-the-demo-app-works} + +Ниже перечислены основные шаги преобразования текстового запроса в диаграмму: + +- Сначала пользователь вводит текстовое описание диаграммы простыми словами, например: «Диаграмма с топ-менеджером и пятью отделами, в каждом из которых по два сотрудника». +- Затем запрос отправляется на бэкенд, где сервис ИИ генерирует структурированную конфигурацию JSON на основе запроса. +- После этого фронтенд получает полученные данные и мгновенно отрисовывает интерактивную диаграмму DHTMLX. +- Далее соответствующий код JSON отображается в редакторе кода под диаграммой. Пользователь может настроить код и редактировать итоговую диаграмму в режиме реального времени. +- Наконец, пользователь может сохранить сгенерированные данные в файл JSON или экспортировать диаграмму в файл PDF или PNG. + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md new file mode 100644 index 000000000..13bd28f4f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md @@ -0,0 +1,242 @@ +--- +sidebar_label: MCP-сервер DHTMLX +title: Использование MCP-сервера DHTMLX с ИИ-ассистентами для написания кода +description: Подключите ИИ-ассистентов для написания кода к актуальной документации DHTMLX Diagram через MCP-сервер. Рассматриваются фигуры, дорожки, организационные диаграммы, Diagram Editor и другое. +--- + +# Использование MCP-сервера DHTMLX с ИИ-ассистентами для написания кода + +Разработка приложений с диаграммами требует точного контроля над фигурами, соединениями, компоновкой и конфигурацией редактора. Когда ИИ-инструмент генерирует код [DHTMLX Diagram](/) на основе устаревших данных обучения, результатом становятся несоответствующие API, отсутствующие свойства и параметры конфигурации, которых больше не существует. + +MCP-сервер DHTMLX (Model Context Protocol) решает эту проблему, предоставляя ИИ-инструментам прямой доступ к актуальной документации Diagram. Работаете ли вы с [дорожками](/swimlanes/), [пользовательскими фигурами](shapes/custom_shape.md), [Diagram Editor](guides/diagram_editor/initialization.md) или любой другой частью библиотеки — ассистент получает актуальные справочные материалы перед формированием ответа. + +**Конечная точка MCP** + +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +:::note +MCP-сервер DHTMLX охватывает все основные продукты DHTMLX, а не только DHTMLX Diagram. Та же конечная точка и те же шаги настройки применяются независимо от того, с каким компонентом вы работаете. +::: + +## Где MCP-сервер помогает при работе с Diagram {#where-mcp-server-helps-with-diagram} + +MCP-сервер индексирует полную документацию DHTMLX Diagram. Вот распространённые сценарии, в которых MCP-сервер оказывается полезен: + +- Поиск актуального API для [фигур](shapes/default_shapes.md), [линий](/lines/), [групп](/groups/) или [дорожек](/swimlanes/). +- Генерация готового к запуску кода Diagram на основе описания. +- Изучение параметров конфигурации [Editor](guides/diagram_editor/initialization.md), элементов управления панели инструментов и обработки событий. +- Проверка параметров [экспорта](guides/data_export.md) и понимание того, как получить PDF- или PNG-файл. +- Настройка параметров автоматического размещения элементов (auto-layout) для диаграмм в режиме по умолчанию с помощью [конфигурации диаграммы](guides/diagram/configuration.md). +- Загрузка данных диаграммы и их обратная сериализация с помощью доступных [методов работы с данными](guides/loading_data.md). +- Обработка [событий Diagram и Editor](guides/event_handling.md) для реакции на действия пользователя. +- Изучение [поддержки TypeScript](guides/using_typescript.md) и интеграции с фреймворками React, Vue, Angular и Svelte. + +## Как работает MCP-сервер DHTMLX {#how-dhtmlx-mcp-server-works} + +Сервер объединяет конвейер Retrieval-Augmented Generation (RAG) с MCP, чтобы ИИ-ассистенты могли запрашивать документацию по требованию, а не полагаться исключительно на данные обучения. + +Например, когда вы спрашиваете: *«Как настроить диаграмму с дорожками и пользовательскими заголовками ячеек?»*, ассистент отправляет запрос через конечную точку MCP. Сервер сопоставляет его с документацией по дорожкам, находит соответствующие справочные страницы и возвращает их в качестве контекста. После этого ассистент генерирует код на основе актуального API, а не снимка данных обучения. + +## Подключение ИИ-инструментов к Diagram {#connecting-ai-tools-to-diagram} + +ИИ-инструменты для разработки обычно поддерживают MCP через команду CLI или файл конфигурации JSON. В обоих случаях ключевой шаг — регистрация URL-адреса сервера: + +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +Ниже приведены инструкции по настройке для наиболее часто используемых инструментов. + +### Настройка Claude Code {#claude-code-setup} + +:::info +Подробные сведения о подключении MCP-серверов к Claude Code доступны в [официальной документации](https://code.claude.com/docs/en/mcp). +::: + +Самый быстрый способ добавить MCP-сервер DHTMLX в Claude Code — через CLI: + +~~~bash +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +Чтобы настроить его вручную, добавьте следующую запись в файл `.mcp.json`: + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Настройка Cursor {#cursor-setup} + +:::info +Пошаговые инструкции по настройке MCP для Cursor можно найти в [официальной документации](https://cursor.com/en-US/docs/mcp). +::: + +Чтобы подключить MCP-сервер DHTMLX к Cursor, выполните следующие шаги: + +1. Откройте настройки (`Cmd+Shift+J` на Mac, `Ctrl+Shift+J` на Windows/Linux) +2. Перейдите в раздел **Tools & MCP** +3. Нажмите **Add Custom MCP** +4. Вставьте следующую конфигурацию: + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Google Antigravity {#google-antigravity} + +#### Antigravity 2.0 {#antigravity-20} + +:::info +Подробные сведения об интеграции MCP-сервера в Antigravity приведены в [официальной документации](https://antigravity.google/docs/mcp). +::: + +Чтобы подключить MCP-сервер DHTMLX к Google Antigravity, выполните следующие шаги: + +1. Откройте палитру команд +2. Введите «mcp add» +3. Выберите «HTTP» +4. Укажите следующие значения: +- Имя: +~~~ +dhtmlx-mcp +~~~ +- URL: +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +#### Antigravity CLI {#antigravity-cli} + +:::info +Ознакомьтесь с [соответствующим руководством](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes), чтобы узнать о переходе с Gemini CLI на Antigravity CLI. +::: + +Чтобы подключить MCP-сервер DHTMLX к Antigravity CLI, создайте файл `mcp_config.json` в одном из следующих расположений: + +- Глобально: `~/.gemini/config/mcp_config.json` +- В рабочей области: `.agents/mcp_config.json` + +Добавьте следующую конфигурацию: + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "serverUrl": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +Затем выполните команду `agy` в терминале. + +### Настройка ChatGPT {#chatgpt-setup} + +:::info +Полное руководство по подключению MCP-серверов к ChatGPT приведено в [официальной документации](https://developers.openai.com/api/docs/guides/tools-connectors-mcp). +::: + +Чтобы подключить MCP-сервер DHTMLX к ChatGPT, выполните следующие шаги: + +1. Перейдите в **Settings** → **Apps & Connectors** +2. Нажмите **Advanced settings** +3. Включите **Developer mode** +4. Вернитесь на экран **Apps & Connectors** и нажмите «Create» +5. Настройте коннектор: +- Имя: +~~~ +dhtmlx-mcp +~~~ +- URL: +~~~ +https://docs.dhtmlx.com/mcp +~~~ +- Authentication: `No authentication` +6. Нажмите **Create** + +После подключения ChatGPT будет получать документацию Diagram при ответах на вопросы в ходе ваших диалогов. + +:::note +Обратите внимание, что интеграция MCP с ChatGPT может приводить к более медленным ответам. Для более быстрой работы рассмотрите другие инструменты, перечисленные на этой странице. +::: + +### Другие инструменты {#other-tools} + +Большинство современных ИИ-инструментов для написания кода (включая Windsurf, Cline, Continue.dev и другие) отображают MCP в настройках под такими названиями, как «Model Context Protocol», «Context Sources» или «Custom integrations». Добавьте `https://docs.dhtmlx.com/mcp` в качестве исходного URL. + +## Конфиденциальность и обработка данных {#privacy-and-data-handling} + +MCP-сервер DHTMLX — это исключительно облачный сервис, который работает удалённо, не затрагивает вашу локальную среду и не хранит персональные данные пользователей. Запросы могут регистрироваться в журнале для отладки и улучшения сервиса. + +Команды, которым требуются более строгие гарантии конфиденциальности, могут запросить коммерческое развёртывание с отключённым логированием запросов. Для получения подробностей свяжитесь с нами по адресу `info@dhtmlx.com`. + +## Примеры запросов для Diagram с использованием ИИ {#example-prompts-for-diagram-with-ai} + +После подключения MCP-сервера формулируйте запросы вокруг конкретной цели, чтобы ассистент понимал, какую часть API Diagram нужно искать. Приведённые ниже запросы сгруппированы по типу задачи. Вы можете скопировать и адаптировать их по своему усмотрению. + +**Создание диаграмм** + +~~~ +How do I create a swimlane diagram with custom sections in DHTMLX Diagram? Use the docs. +~~~ +~~~ +I want to build an org chart from a JSON data set in DHTMLX Diagram. How do I configure the auto-layout? +~~~ +~~~ +How do I create a flowchart with decision nodes and multiple links in DHTMLX Diagram? +~~~ +~~~ +How do I use autoPlace() to automatically arrange shapes in DHTMLX Diagram? +~~~ + +**Работа с фигурами** + +~~~ +I want to add custom shapes with icons to DHTMLX Diagram. How do I define a shape template? +~~~ +~~~ +How do I restrict which shapes a user can place in the DHTMLX Diagram Editor? +~~~ +~~~ +How do I change the default text style and background color for all shapes in DHTMLX Diagram? +~~~ + +**Настройка редактора** + +~~~ +I want to enable inline editing for shape text in DHTMLX Diagram. +~~~ +~~~ +How do I add a custom toolbar button to the DHTMLX Diagram Editor? +~~~ + +**Данные и экспорт** + +~~~ +How do I export a DHTMLX Diagram to a PNG file? +~~~ +~~~ +What format does DHTMLX Diagram use for serialized data, and how do I reload it? +~~~ + +## Советы для эффективных запросов по Diagram {#tips-for-effective-diagram-prompts} + +- **Указывайте область API.** Различайте экземпляр диаграммы и редактор — например, «in the DHTMLX Diagram Editor» и «on the diagram object». Сервер находит более релевантные документы, когда цель запроса очевидна. +- **Указывайте тип фигуры.** Запросы вроде «a swimlane shape» или «a custom shape with HTML content» находят нужные справочные страницы быстрее, чем обобщённое «a shape». +- **Добавляйте фразу «Use the docs»** к своему запросу. Эта формулировка сигнализирует ассистенту, что нужно выполнить поиск через MCP, а не отвечать на основе данных обучения. +- **Уточняйте, какое поведение версии вы ожидаете.** Если сгенерированный код не совпадает с тем, что вы видите в документации, добавьте фразу «based on the current DHTMLX Diagram documentation», чтобы принудительно выполнить новый поиск. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/customization.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/customization.md new file mode 100644 index 000000000..49ca28225 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/customization.md @@ -0,0 +1,225 @@ +--- +sidebar_label: Настройка элементов +title: Настройка элементов +description: Вы можете узнать о настройке элементов в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Настройка элементов {#customizing-items} + +Вы можете изменять внешний вид элементов диаграммы с помощью различных [конфигурационных свойств](/category/items-api/) внутри их объектов. Вы также можете изменить внешний вид диаграммы, создавая пользовательские фигуры. + +## Стилизация фигур и линий с помощью конфигурационных свойств {#styling-shapes-and-lines-via-the-configuration-properties} + +### Стилизация фигур {#styling-shapes} + +Объект фигуры предоставляет широкий набор свойств, которые можно использовать для изменения внешнего вида фигур. + + + +Хороший способ оформить все фигуры одного типа сразу — задать настройки стилизации для фигур через свойство [`defaults`](api/diagram/defaults_property.md) диаграммы: + +~~~jsx +const defaults = { + start: { + fill: "#FE9998", + stroke: "#FE9998", + fontColor: "#FFF", + lineHeight: 16 + }, + end: { + fill: "#FE9998", + stroke: "#FE9998", + fontColor: "#FFF", + lineHeight: 16 + }, + // ... +}; +~~~ + +[Полный список свойств объекта фигуры](shapes/configuration_properties.md). + +### Стилизация линий {#styling-lines} + +Чтобы изменить внешний вид соединительных линий, используйте необходимые конфигурационные свойства внутри объекта линии. + +~~~jsx +const data = [ + { + id: "1-2", + from: "1", + to: "2", + type: "line", + strokeType: "dash", // пунктирная линия + stroke: "#fa55d1" // цвет линии + } +]; +~~~ + +[Полный список свойств объекта линии](lines/configuration_properties.md). + +Посмотрите пример: + + + +## Определение шаблона фигуры {#defining-the-shapes-template} + +Вы можете создать индивидуально настроенную диаграмму, добавляя в неё новые типы фигур и определяя для них шаблоны. Для этого используйте метод [`addShape()`](api/diagram/addshape_method.md) объекта диаграммы. + +### Пример в режиме по умолчанию {#example-in-the-default-mode} + + + +### Пример в режиме org chart {#example-in-the-org-chart-mode} + + + +### Пример в режиме mindmap {#example-in-the-mindmap-mode} + + + +### Пример в режиме PERT {#example-in-the-pert-mode} + + + +## Стилизация целевых фигур {#styling-target-shapes} + +При использовании диаграмм в режимах org chart и mindmap в Diagram Editor вы можете задать пользовательский стиль для целевых элементов. + +:::note +Стилизация не применяется к родителю перемещаемого элемента, а также к перемещаемому элементу, у которого установлено `giveItem: false` +::: + +~~~jsx + +~~~ + +## Стилизация групп с помощью конфигурационных свойств {#styling-groups-via-the-configuration-properties} + +### Стилизация группы {#styling-the-group} + +Чтобы задать пользовательский стиль для группы, используйте свойство `style` [объекта группы](groups/configuration_properties.md). Например: + + + +### Стилизация заголовка группы {#styling-the-group-header} + +Вы можете изменить стиль заголовка группы по умолчанию с помощью атрибутов свойства `header` [объекта группы](groups/configuration_properties.md). + + + +## Стилизация дорожек с помощью конфигурационных свойств {#styling-swimlanes-via-the-configuration-properties} + +### Стилизация дорожки {#styling-the-swimlane} + +Вы можете настроить параметры `strokeWidth`, `stroke` и `fill` дорожки с помощью свойства `style` [объекта дорожки](swimlanes/configuration_properties.md#properties-of-a-swimlane): + +~~~jsx +const data = [ + { + "type": "$swimlane", + "width": 970, + "height": 790, + "header": { + "text": "Game levels and locations", + "closable": true + }, + "layout": [ + ["1"], + ["2"], + ["3"], + ["4"], + ["5"] + ], + "style": { + "strokeWidth": 5, + "stroke": "#083796", + "fill": "#D4DAE4" + } + } +]; +~~~ + +### Стилизация заголовков и подзаголовков дорожки {#styling-the-swimlane-headerssub-headers} + +Свойства `header`, `subHeaderRows` и `subHeaderCols` [объекта дорожки](swimlanes/configuration_properties.md#properties-of-a-swimlane) включают наборы дополнительных атрибутов для настройки заголовка и подзаголовков дорожки. + +Например, вы можете изменить цвета фона верхних подзаголовков дорожки с помощью свойства `subHeaderCols`: + +~~~jsx +const data = [ + { + "id": "main", + "type": "$swimlane", + "height": 730, + "width": 1195, + "header": { + "closable": true, + "text": "Waterfall diagram template" + }, + "layout": [ + [1, 2, 3, 4] + ], + "subHeaderCols": { + "headers": [ + { + "text": "September", + "fill": "#f35c4f66" + }, + { + "text": "October", + "fill": "#9b60f866" + }, + { + "text": "November", + "fill": "#ffae1266" + }, + { + "text": "December", + "fill": "#3cc97a66" + } + ] + } + } +]; +~~~ + +Посмотрите полный пример: + + + +### Стилизация ячеек дорожки {#styling-swimlane-cells} + +Если вам нужно настроить отдельную ячейку дорожки, используйте свойство `style` [объекта ячейки дорожки](swimlanes/configuration_properties.md#properties-of-a-swimlane-cell) (`type:"$sgroup"`). + +~~~jsx +const data = [ + { + "id": "main", + "type": "$swimlane", + "height": 730, + "width": 1195, + "layout": [ + [1, 2, 3, 4] + ], + // ... + }, + { + "id": 1, + "type": "$sgroup", + "style": { + "fill": "#D4DAE4" + }, + "x": 0, + "y": 80 + } +]; +~~~ + +**Связанный пример**: [Diagram. Стандартный режим. Шаблон диаграммы Waterfall](https://snippet.dhtmlx.com/k5vlvj8i) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/data_export.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/data_export.md new file mode 100644 index 000000000..c6b75c996 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/data_export.md @@ -0,0 +1,41 @@ +--- +sidebar_label: Экспорт Diagram +title: Экспорт Diagram +description: Вы можете узнать об экспорте Diagram в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Экспорт Diagram {#exporting-diagram} + +Вы можете экспортировать диаграмму в формат PDF или PNG с помощью соответствующих методов [pdf()](api/export/pdf_method.md)/[png()](api/export/png_method.md) объекта Export: + + + +Чтобы настроить параметры экспорта, передайте нужному методу объект с конфигурационными опциями. + +Посмотрите список доступных настроек: + +- для метода [pdf()](api/export/pdf_method.md) +- для метода [png()](api/export/png_method.md) + +## Экспорт стилей {#exporting-styles} + +По умолчанию все CSS-стили, подключённые на странице Diagram, отправляются в сервис экспорта. Из-за этого размер запроса увеличивается, что может привести к сбою. + +Библиотека позволяет: + +- запретить отправку всех стилей в сервис экспорта, установив +конфигурационное свойство [`exportStyles`](api/diagram/exportstyles_property.md) объекта Diagram в значение *false*: + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + exportStyles: false +}); +~~~ + +- определить набор стилей, которые нужно экспортировать, указав абсолютные пути к нужным стилям в массиве [`exportStyles`](api/diagram/exportstyles_property.md): + + + +:::note +Используйте только абсолютные пути, а не относительные. +::: diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram/configuration.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram/configuration.md new file mode 100644 index 000000000..064cf765a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram/configuration.md @@ -0,0 +1,179 @@ +--- +sidebar_label: Конфигурация +title: Конфигурация Diagram +description: В документации библиотеки DHTMLX JavaScript Diagram вы можете узнать о конфигурации Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Конфигурация Diagram {#diagram-configuration} + +DHTMLX Diagram предоставляет широкий набор опций для конфигурации. Вы можете изменять масштаб диаграммы, задавать тип фигур и линий по умолчанию, устанавливать отступы между фигурами, применять выделение и настраивать панель инструментов со значками для фигур. + +### Настройка режима Diagram {#setting-the-diagram-mode} + +Вы можете выбрать один из следующих режимов Diagram: `"default"`, `"org"`, `"mindmap"`, `"pert"`. Их подробное описание приведено в статье [Обзор Diagram](/). Вы можете указать необходимый тип с помощью параметра конфигурации [type](api/diagram/type_property.md), как показано ниже: + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + type: "default" // `type: "org"` | `type: "mindmap"` | `type: "pert"` +}); +diagram.data.parse(data); +~~~ + +### Настройка типа фигур по умолчанию {#setting-the-default-shape-type} + +Вы можете задать тип по умолчанию для всех фигур с помощью атрибута [`defaultShapeType`](api/diagram/defaultshapetype_property.md) объекта конфигурации диаграммы: + +~~~jsx {3} +const diagram = new dhx.Diagram("diagram_container", { + type: "default", // или type: "org", или type: "mindmap" + defaultShapeType: "rectangle" +}); +diagram.data.parse(data); +~~~ + +Это значение будет применено, если объект конфигурации фигуры не содержит свойство `type`. + +Типы фигур по умолчанию: + +- `"rectangle"` - для диаграммы в режиме по умолчанию +- `"card"` - для диаграммы в режиме по умолчанию или в режиме организационной диаграммы +- `"topic"` - для диаграммы в режиме mindmap +- `"task"` - для диаграммы в режиме PERT + +## Настройка типа линий по умолчанию {#setting-the-default-line-type} + +Вы можете задать общий тип для всех соединительных линий диаграммы с помощью параметра `lineType` свойства [`lineConfig`](api/diagram/lineconfig_property.md) объекта конфигурации диаграммы: + +~~~jsx {3-5} +const diagram = new dhx.Diagram("diagram_container", { + type: "default", + lineConfig: { + lineType: "dash" // "dash" | "line" + } +}); +diagram.data.parse(data); +~~~ + +Это значение применяется, если объект линии не содержит свойство `type`. + +## Настройка конфигурации фигуры по умолчанию {#setting-the-default-configuration-of-a-shape} + +Вы можете избежать работы с большим набором данных при его подготовке для загрузки в диаграмму. Вы можете задать конфигурацию по умолчанию для всех фигур и линий нужных типов и таким образом сократить количество записей в коде. + +Для этого используйте свойство [`defaults`](api/diagram/defaults_property.md) объекта конфигурации диаграммы: + + + +Объект `defaults` содержит набор пар `key:value`, где *key* — это тип фигуры или линии, а *value* — соответствующая конфигурация фигуры или линии по умолчанию. + +:::note +Атрибуты `type` и `id` нельзя задавать в конфигурации фигуры/линии по умолчанию +::: + +Ознакомьтесь с полным списком свойств конфигурации [фигуры](shapes/configuration_properties.md) и [линии](lines/configuration_properties.md). + +## Расположение фигур в режиме mindmap Diagram {#arranging-shapes-in-the-mindmap-mode-of-diagram} + +В режиме mindmap Diagram расположение дочерних фигур относительно корневой фигуры определяется автоматически основным алгоритмом. +Чтобы изменить направление дочерних фигур по умолчанию, используйте свойство конфигурации [`typeConfig`](api/diagram/typeconfig_property.md) при инициализации диаграммы. + +:::note +Свойство конфигурации `typeConfig` недоступно в Diagram Editor +::: + +Это свойство позволяет: + +- [задать направление сразу для всех дочерних фигур](#setting-direction-for-all-child-shapes) +- [указать отдельное направление для конкретных дочерних фигур](#setting-direction-for-individual-child-shape) + +### Настройка направления для всех дочерних фигур {#setting-direction-for-all-child-shapes} + +Чтобы разместить дочерние фигуры справа/слева от корневой фигуры, используйте атрибут `direction` свойства [`typeConfig`](api/diagram/typeconfig_property.md): + + + +### Настройка направления для отдельной дочерней фигуры {#setting-direction-for-individual-child-shape} + +Вы можете задать обязательное направление для конкретных дочерних фигур с помощью атрибута `side` свойства [`typeConfig`](api/diagram/typeconfig_property.md). Этот атрибут представляет собой объект, содержащий набор пар `key:value`, где *key* — направление фигур (left, right), а *value* — массив с идентификаторами фигур. + + + +Остальные дочерние фигуры, не заданные в опции side, будут расположены автоматически в соответствии с основным алгоритмом. + +## Настройка формата даты в режиме PERT Diagram {#setting-date-format-in-the-pert-mode-of-diagram} + +В режиме PERT Diagram вы можете задать необходимый формат отображения дат в фигурах типа `task`. Для этого используйте атрибут `dateFormat` свойства [`typeConfig`](api/diagram/typeconfig_property.md): + +~~~jsx {3-5} +const diagram = new dhx.Diagram("diagram_container", { + type: "pert", + typeConfig: { + dateFormat: "%d/%m/%Y" + } +}); +~~~ + +## Позиционирование Diagram и фигур {#positioning-diagram-and-shapes} + +Вы можете задать позицию диаграммы на странице и установить отступы для фигур внутри атрибута [`margin`](api/diagram/margin_property.md) объекта конфигурации диаграммы: + + + +## Настройка автоматического расположения фигур {#configuring-autoplacement-for-shapes} + +Библиотека DHTMLX Diagram позволяет настроить параметры автоматического расположения связанных фигур Diagram в иерархической структуре. Вы можете задать свойство [`autoplacement`](api/diagram/autoplacement_property.md) в объекте конфигурации Diagram и настроить режим соединения фигур, а также расстояние между несвязанными диаграммами: + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + autoplacement: { + mode: "edges", + graphPadding: 100, + placeMode: "radial", + itemPadding: 10, + levelPadding: 10 + } +}); + +diagram.data.parse(data); + +diagram.autoPlace(); +~~~ + +Это свойство может содержать следующие опции: + +- `mode` - (*string*) необязательный, режим соединения фигур, `"direct"` (по умолчанию) или `"edges"` +- `graphPadding` - (*number*) необязательный, задаёт расстояние между несвязанными диаграммами, по умолчанию *200* +- `placeMode` - (*string*) необязательный, задаёт режим расположения фигур, `"orthogonal"` (по умолчанию) или `"radial"` +- `itemPadding` - (*number*) необязательный, минимальный отступ между элементами (минимальное значение — *1*), по умолчанию *20* +- `levelPadding` - (*number*) необязательный, минимальный отступ между уровнями иерархии (минимальное значение — *1*), по умолчанию *20* + +:::note +Автоматическое расположение будет применено только после вызова метода [`autoPlace()`](api/diagram/autoplace_method.md). Оно работает только в режиме по умолчанию диаграммы и только для фигур. Автоматическое расположение не работает при использовании групп или дорожек. +::: + + + +**Связанный пример**: [Diagram. Режим по умолчанию. Радиальное автоматическое расположение с настройками отступов](https://snippet.dhtmlx.com/huut0l1s) + +## Настройка масштаба Diagram {#adjusting-the-diagram-scale} + +При необходимости вы можете масштабировать диаграмму под ваше приложение. Это можно сделать с помощью опции [`scale`](api/diagram/scale_property.md). +По умолчанию её значение равно 1. Поэтому, чтобы увеличить диаграмму, задайте значение опции больше 1, а чтобы уменьшить — меньше 1 соответственно. + + + +## Настройка панели инструментов для фигур {#setting-toolbar-for-shapes} + +DHTMLX Diagram позволяет задать панель инструментов со значками для фигур Diagram, чтобы упростить взаимодействие с ними. Вы можете включить панель инструментов фигуры с помощью опции [`toolbar`](api/diagram/toolbar_property.md) объекта конфигурации диаграммы: + + + +## Включение выделения элементов {#enabling-items-selection} + +Вы можете активировать выделение элементов диаграммы с помощью атрибута [`select`](api/diagram/select_property.md) объекта конфигурации диаграммы. После того как вы включили выделение в диаграмме, вы можете использовать API объекта Selection, чтобы [работать с выделением элементов](guides/manipulating_items.md#selecting-items). + +:::note +[Предустановленный набор событий](/api/selection/#events) объекта selection поможет вам определить способ обработки поведения диаграммы при выделении/снятии выделения элементов +::: + + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram/initialization.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram/initialization.md new file mode 100644 index 000000000..a070a7491 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram/initialization.md @@ -0,0 +1,155 @@ +--- +sidebar_label: Инициализация +title: Инициализация +description: В документации библиотеки DHTMLX JavaScript Diagram вы можете узнать, как начать работу с Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Инициализация Diagram {#diagram-initialization} + +В этой статье мы рассмотрим этапы добавления DHTMLX Diagram на страницу. Этот процесс включает несколько простых шагов: + +- [Скачайте пакет DHTMLX Diagram](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml) и распакуйте его в папку вашего проекта +- [Подключите исходные файлы DHTMLX Diagram на странице](#including-required-code-files) +- [Инициализируйте Diagram с помощью конструктора объекта](#initializing-diagram) +- [Загрузите данные в Diagram](#loading-data-into-diagram) + +~~~html + + + + + + + + + + + + +~~~ + +## Подключение необходимых файлов кода {#including-required-code-files} + +Чтобы создать Diagram, необходимо подключить на странице 2 исходных файла: + +- **diagram.js** +- **diagram.css** + +Убедитесь, что вы указали правильные относительные пути к этим файлам: + +~~~html + + +~~~ + +Структура пакета DHTMLX Diagram выглядит следующим образом: + +- **sources** - файлы исходного кода библиотеки. Эти файлы не минифицированы и легко читаются. Пакет предназначен в основном для отладки компонента + +:::note +Обратите внимание, что **Trial**-версия библиотеки Diagram не содержит папку sources. +::: + +- **samples** - примеры кода +- **codebase** - упакованные файлы кода библиотеки. Эти файлы значительно меньше по размеру и предназначены для использования в продакшене +:::info +В своих приложениях используйте файлы из папки **codebase** +::: + +## Инициализация Diagram {#initializing-diagram} + +Вы можете инициализировать Diagram в контейнере, в теле документа или в ячейке Layout. + +### Инициализация в контейнере {#initialization-in-a-container} + +Чтобы инициализировать диаграмму в контейнере, используйте конструктор `dhx.Diagram` и передайте следующие два параметра в функцию-конструктор: + +- контейнер, в который будет помещён Diagram; присвоим ему идентификатор `"diagram_container"`: + +~~~html title="index.html" + +~~~ + +- объект со [свойствами конфигурации](#configuration-properties). Если этот аргумент не передан в конструктор, будут применены настройки по умолчанию + +~~~jsx title="index.js" +const diagram = new dhx.Diagram("diagram_container", { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### Инициализация в теле документа {#initialization-in-the-document-body} + +Вы можете не задавать контейнер для Diagram и добавить его напрямую в тело документа: + +~~~jsx +const diagram = new dhx.Diagram(document.body, { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### Инициализация в ячейке Layout {#initialization-in-a-layout-cell} + +Вы также можете инициализировать диаграмму внутри [ячейки Layout](https://docs.dhtmlx.com/suite/layout/). В этом случае используйте *null* вместо контейнера: + +~~~jsx +const diagram = new dhx.Diagram(null, { + type: "default" // "default" | "org" | "mindmap" +}); +const layout = new dhx.Layout("layout", { + cols: [ + { + id: "diagram" + } + ] +}); + +layout.getCell("diagram").attach(diagram); +~~~ + +### Свойства конфигурации {#configuration-properties} + +Чтобы изменить [конфигурацию диаграммы](guides/diagram/configuration.md), укажите нужное свойство в объекте конфигурации, передаваемом вторым параметром функции-конструктора. + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + scale: 0.7, + // другие опции конфигурации +}); +~~~ + +См. [полный список свойств конфигурации Diagram](api/diagram/api_overview.md#diagram-properties). + +**Связанный пример**: [Diagram Editor. Режим по умолчанию. Широкая блок-схема](https://snippet.dhtmlx.com/4d4k3o8p) + +Также вы можете получить доступ к какой-либо опции и задать/изменить её значение через объект `config` диаграммы. Не забудьте вызвать метод [`paint()`](api/diagram/paint_method.md), чтобы перерисовать диаграмму с новой конфигурацией: + +~~~jsx +const diagram = new dhx.Diagram("diagram_container"); +diagram.data.parse(data); + +diagram.config.scale = 0.7; +diagram.paint(); +~~~ + +## Загрузка данных в Diagram {#loading-data-into-diagram} + +Подробная информация о загрузке данных в DHTMLX Diagram приведена в статье [Загрузка и хранение данных](guides/loading_data.md). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram/scrolling_diagram.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram/scrolling_diagram.md new file mode 100644 index 000000000..537108209 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram/scrolling_diagram.md @@ -0,0 +1,42 @@ +--- +sidebar_label: Прокрутка Diagram +title: Прокрутка Diagram +description: В документации библиотеки DHTMLX JavaScript Diagram вы можете узнать о прокрутке Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Прокрутка Diagram {#scrolling-diagram} + +По умолчанию размер компонента задаётся автоматически в соответствии с содержимым. При необходимости компонент примет размер HTML-контейнера и отобразит внутренние горизонтальную и вертикальную прокрутки для соответствия содержимому. + +## Прокрутка диаграммы {#scrolling-diagram-1} + +Вы можете прокрутить диаграмму к области, где расположен нужный элемент, с помощью метода [`showItem()`](api/diagram/showitem_method.md) объекта диаграммы. + + + +Также вы можете прокрутить диаграмму к нужной позиции с помощью метода [`scrollTo()`](api/diagram/scrollto_method.md). + + + +## Получение состояния прокрутки {#getting-scroll-state} + +API Diagram позволяет получить текущую позицию прокрутки с помощью соответствующего метода [`getScrollState()`](api/diagram/getscrollstate_method.md): + +~~~jsx +// возврат начальной позиции прокрутки +const coords = diagram.getScrollState(); // -> {x:0,y:0} +~~~ + +Он возвращает объект с горизонтальной и вертикальной позицией прокрутки. + +## Отслеживание прокрутки диаграммы {#catching-diagram-scrolling} + +Вы можете отслеживать начало прокрутки Diagram с помощью события [`scroll`](api/diagram/scroll_event.md). Функция-обработчик принимает позицию прокрутки в качестве параметра: + +- `pos` - (*object*) позиция прокрутки в виде объекта с атрибутами x и y + +~~~jsx +diagram.events.on("Scroll", (position) => { + alert("The diagram has been scrolled:" + position); +}); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/editbar.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/editbar.md new file mode 100644 index 000000000..a4506c355 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/editbar.md @@ -0,0 +1,163 @@ +--- +sidebar_label: Панель редактирования +title: Руководства по редактору — Панель редактирования +description: Узнайте о панели редактирования редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Панель редактирования + +Вы можете настраивать элементы управления панели редактирования отдельно для каждого элемента Diagram и для [группы элементов](guides/items_index.md), учитывая различные условия. Для этого используйте конфигурацию [`properties`](api/diagram_editor/editbar/config/properties_property.md) панели редактирования. + +Если вы хотите настроить элементы управления панели редактирования для отдельной [фигуры](/category/shapes), укажите соответствующий **тип фигуры** в конфигурации [`properties`](api/diagram_editor/editbar/config/properties_property.md), как показано в примере ниже: + +~~~jsx {6-9} +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + editbar: { + properties: { + rectangle: [ // настройка элементов управления панели редактирования для фигуры "pert" + { type: "arrange", $properties: { angle: { hidden: true } }}, + // ...остальная настройка элементов управления панели редактирования + ], + // ...остальная настройка фигур + } + } + } +}); +~~~ + +Чтобы настроить [группу элементов](guides/items_index.md), используйте следующие служебные свойства в конфигурации [`properties`](api/diagram_editor/editbar/config/properties_property.md): + +- [`$default`](#configure-editbar-for-the-grid-area) — позволяет настраивать элементы управления панели редактирования, если не выбрано ни одного элемента или выбрано несколько элементов +- [`$shape`](#configure-editbar-for-shapes) — позволяет настраивать элементы управления панели редактирования для [всех фигур, включая пользовательские](/category/shapes) +- [`$group`](#configure-editbar-for-group-elements) — позволяет настраивать элементы управления панели редактирования для всех элементов с типом [`group`](/groups/) +- [`$swimlane`](#configure-editbar-for-swimlanes) — позволяет настраивать элементы управления панели редактирования для всех элементов с типом [`swimlane`](/swimlanes/) +- [`$line`](#configure-editbar-for-lines) — позволяет настраивать элементы управления панели редактирования для всех элементов с типом [`line`](/lines/) +- [`$lineTitle`](#configure-editbar-for-line-titles) — позволяет настраивать элементы управления панели редактирования для всех элементов с типом [`lineTitle`](/line_titles/) + + + +## Настройка панели редактирования для области сетки {#configure-editbar-for-the-grid-area} + +Служебное свойство `$default` позволяет настраивать элементы управления панели редактирования, если не выбрано ни одного элемента или выбрано несколько элементов. + +~~~jsx +properties: { + $default: [ + { + type: "gridStep", + readOnly: true, + // ... + } + ] +} +~~~ + +**Похожие сложные элементы управления:** [Шаг сетки](api/diagram_editor/editbar/complex_controls/gridstep.md), [Граница](api/diagram_editor/editbar/complex_controls/border.md), [Упорядочивание](api/diagram_editor/editbar/complex_controls/arrange.md) + +## Настройка панели редактирования для фигур {#configure-editbar-for-shapes} + +Служебное свойство `$shape` позволяет настраивать элементы управления панели редактирования для [всех фигур, включая пользовательские](/category/shapes). + +~~~jsx +properties: { + $shape: [ + { + type: "position", + $properties: { + dx: { disabled: true }, + // ... + }, + // ... + } + ] +} +~~~ + +**Похожие сложные элементы управления:** [Граница](api/diagram_editor/editbar/complex_controls/border.md), [Упорядочивание](api/diagram_editor/editbar/complex_controls/arrange.md), [Позиция](api/diagram_editor/editbar/complex_controls/position.md), [Размер](api/diagram_editor/editbar/complex_controls/size.md), [Выравнивание текста](api/diagram_editor/editbar/complex_controls/textalign.md), [Стиль текста](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## Настройка панели редактирования для элементов группы {#configure-editbar-for-group-elements} + +Служебное свойство `$group` позволяет настраивать элементы управления панели редактирования для всех элементов с типом [`group`](/groups/). + +~~~jsx +properties: { + $group: [ + { + type: "header", + label: "Group header style", + // ... + } + ] +} +~~~ + +**Похожие сложные элементы управления:** [Граница](api/diagram_editor/editbar/complex_controls/border.md), [Упорядочивание](api/diagram_editor/editbar/complex_controls/arrange.md), [Заголовок](api/diagram_editor/editbar/complex_controls/header.md), [Общий заголовок](api/diagram_editor/editbar/complex_controls/headercommon.md), [Позиция заголовка](api/diagram_editor/editbar/complex_controls/headerposition.md), [Размер](api/diagram_editor/editbar/complex_controls/size.md), [Выравнивание текста](api/diagram_editor/editbar/complex_controls/textalign.md), [Стиль текста](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## Настройка панели редактирования для дорожек {#configure-editbar-for-swimlanes} + +Служебное свойство `$swimlane` позволяет настраивать элементы управления панели редактирования для всех элементов с типом [`swimlane`](/swimlanes/). + +~~~jsx +properties: { + $swimlane: [ + { + type: "header", + label: "Swimlane header style", + // ... + } + ] +} +~~~ + +**Похожие сложные элементы управления:** [Граница](api/diagram_editor/editbar/complex_controls/border.md), [Упорядочивание](api/diagram_editor/editbar/complex_controls/arrange.md), [Заголовок](api/diagram_editor/editbar/complex_controls/header.md), [Общий заголовок](api/diagram_editor/editbar/complex_controls/headercommon.md), [Позиция заголовка](api/diagram_editor/editbar/complex_controls/headerposition.md), [Размер](api/diagram_editor/editbar/complex_controls/size.md), [Выравнивание текста](api/diagram_editor/editbar/complex_controls/textalign.md), [Стиль текста](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## Настройка панели редактирования для линий {#configure-editbar-for-lines} + +Служебное свойство `$line` позволяет настраивать элементы управления панели редактирования для всех элементов с типом [`line`](/lines/). + +~~~jsx +properties: { + $line: [ + { + type: "lineShape", + label: "Line connection type", + // ... + } + ] +} +~~~ + +**Похожие сложные элементы управления:** [Граница](api/diagram_editor/editbar/complex_controls/border.md), [Форма линии](api/diagram_editor/editbar/complex_controls/lineshape.md), [Вид указателя](api/diagram_editor/editbar/complex_controls/pointerview.md) + +## Настройка панели редактирования для заголовков линий {#configure-editbar-for-line-titles} + +Служебное свойство `$lineTitle` позволяет настраивать элементы управления панели редактирования для всех элементов с типом [`lineTitle`](/line_titles/). + +~~~jsx +properties: { + $lineTitles: [ + { + type: "textAlign", + label: "Text align", + // ... + }, + // ... + ] +} +~~~ + +**Похожие сложные элементы управления:** [Выравнивание текста](api/diagram_editor/editbar/complex_controls/textalign.md), [Стиль текста](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## Создание и настройка пользовательских элементов управления панели редактирования {#create-and-configure-custom-editbar-controls} + +Вы можете использовать свойство [`controls`](api/diagram_editor/editbar/config/controls_property.md) представления панели редактирования, чтобы создать пользовательский элемент управления на основе [**базовых элементов управления**](api/diagram_editor/editbar/basic_controls_overview.md) и/или [**сложных элементов управления**](api/diagram_editor/editbar/complex_controls_overview.md). + +:::warning +Не рекомендуется использовать тип элемента управления по умолчанию (см. [***базовые элементы управления***](api/diagram_editor/editbar/basic_controls_overview.md) и/или [***сложные элементы управления***](api/diagram_editor/editbar/complex_controls_overview.md)) в качестве имени для пользовательского элемента управления. Используйте уникальное имя для каждого пользовательского элемента управления, чтобы избежать ошибок! +::: + +После создания пользовательского элемента управления примените его к нужному элементу Diagram с помощью свойства [`properties`](api/diagram_editor/editbar/config/properties_property.md). + + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/grid_area.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/grid_area.md new file mode 100644 index 000000000..40c863952 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/grid_area.md @@ -0,0 +1,181 @@ +--- +sidebar_label: Область сетки +title: Руководства по редактору — Область сетки +description: Узнайте об области сетки редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Область сетки + +Область сетки — это область, предназначенная для редактирования диаграммы. Вы можете добавлять новые элементы, изменять их внешний вид и расположение или удалять их. + +В этом разделе описано, какие элементы интерфейса доступны для каждого элемента диаграммы в зависимости от режима, в котором инициализирован редактор. Также в разделе объясняется, как упростить проектирование диаграммы с помощью сочетаний клавиш или работы с несколькими выбранными элементами одновременно. + +:::note +Расстояние между точками в области сетки зависит от значения [шага сетки](api/diagram_editor/editor/config/gridstep_property.md) +::: + +## Управление фигурами {#managing-shapes} + +### Элементы интерфейса в режиме по умолчанию {#interface-elements-in-the-default-mode} + +Вы можете перетаскивать фигуры из панели фигур в область сетки, чтобы разместить их в нужных позициях и соединить между собой. + + + +При щелчке по любой фигуре она становится редактируемой и получает собственные элементы интерфейса: + +- панель инструментов с элементами управления: + - `"copy"` — создать копию фигуры (кроме фигуры, размещённой внутри группы или дорожки) + - `"connect"` — активировать режим установки соединений с другой фигурой + - `"remove"` — удалить выбранную фигуру +- маркеры изменения размера (потяните за маркеры редактируемой фигуры, чтобы изменить её размер) +- иконка поворота (нажмите на иконку, чтобы повернуть фигуру) + +Когда для фигуры включён режим соединения, вы можете устанавливать связи с другими фигурами, изменять их положение и форму, а также удалять ненужные связи с помощью элемента управления `"remove"` на панели инструментов. + +Дважды щёлкните по тексту фигуры, чтобы отредактировать его. + +### Элементы интерфейса в режиме организационной диаграммы {#interface-elements-in-the-org-chart-mode} + +Вы можете перетаскивать фигуры, чтобы разместить их в нужных позициях относительно корневой фигуры, или перетаскивать саму корневую фигуру, чтобы переместить всю диаграмму. Чтобы добавить новую фигуру, выберите фигуру и добавьте для неё нового потомка. Вы также можете добавлять элементы *помощник* или *партнёр*. Соединение между родительской фигурой и её партнёром всегда горизонтальное. + +Вы можете перетаскивать фигуры от одного родительского элемента к другому. Перемещаемый элемент перетаскивается вместе со всеми своими потомками. + + + + + +При щелчке по любой фигуре она становится редактируемой и получает собственные элементы интерфейса: + +- панель инструментов, которая может включать следующие элементы управления: + - `"add"` — добавить нового потомка для выбранной фигуры + - *«добавить помощника»* — добавить помощника для выбранной фигуры + - *«добавить партнёра»* — добавить партнёра для выбранной фигуры + - *«выровнять по вертикали»* — расположить потомков фигуры по вертикали + - *«выровнять по горизонтали»* — расположить потомков фигуры по горизонтали + - `"remove"` — удалить выбранную фигуру (кроме корневой) вместе с её потомками +- маркеры изменения размера (потяните за маркеры редактируемой фигуры, чтобы изменить её размер) +- иконка для сворачивания/разворачивания дочерних фигур (если они есть) + +При щелчке по фигуре-помощнику или фигуре-партнёру она становится редактируемой и получает собственные элементы интерфейса: + +- `"remove"` — удалить выбранную фигуру + +Дважды щёлкните по тексту фигуры, чтобы отредактировать его. + +### Элементы интерфейса в режиме интеллект-карты {#interface-elements-in-the-mindmap-mode} + +Вы можете перетаскивать фигуры, чтобы разместить их в нужных позициях относительно корневой фигуры, или перетаскивать саму корневую фигуру, чтобы переместить всю диаграмму. Если вы перетащите родительскую фигуру, она переместится вместе со всеми дочерними фигурами. Чтобы добавить новую фигуру, выберите фигуру и добавьте для неё нового потомка. Фигуры можно перетаскивать от одного родительского элемента к другому. Перемещаемый элемент перетаскивается вместе со всеми своими потомками. + + + +При щелчке по любой фигуре она становится редактируемой и получает собственные элементы интерфейса: + +- панель инструментов с элементами управления: + - `"add"` — добавить нового потомка для выбранной фигуры (кроме корневой) + - `"addLeft"` — добавить нового потомка слева от корневой фигуры + - `"addRight"` — добавить нового потомка справа от корневой фигуры + - `"remove"` — удалить выбранную фигуру (кроме корневой) вместе с её потомками +- маркеры изменения размера (потяните за маркеры редактируемой фигуры, чтобы изменить её размер) +- иконка для сворачивания/разворачивания дочерних фигур + +Дважды щёлкните по тексту фигуры, чтобы отредактировать его. + +## Управление линиями {#managing-lines} + +В режиме по умолчанию вы можете устанавливать связи с другими фигурами, изменять их положение и форму, а также добавлять текст к линии и удалять ненужные связи. + + + +В режиме по умолчанию вы также можете добавить текст к линии двойным щелчком по ней. Щёлкните по тексту, чтобы задать его направление или удалить его. Дважды щёлкните по тексту, чтобы отредактировать его. + + + +## Управление группами {#managing-groups} + +Вы можете перетаскивать группы из панели фигур в область сетки, чтобы разместить их в нужных позициях. Вы можете поместить несколько фигур или других групп в группу и перемещать их как единое целое, копировать или удалять. + + + +При щелчке по любой группе она становится редактируемой и получает собственные элементы интерфейса: + +- панель инструментов с элементами управления: + - `"copy"` — создать копию группы (кроме группы, размещённой внутри другой группы или дорожки); + - `"remove"` — удалить выбранную группу; +- маркеры изменения размера (потяните за маркеры редактируемой группы, чтобы изменить её размер). + +Дважды щёлкните по тексту в заголовке группы, чтобы отредактировать его. + +## Управление дорожками {#managing-swimlanes} + +Вы можете перетащить дорожку из панели фигур в область сетки, чтобы разместить её в нужной позиции. + + + +При щелчке по любой дорожке она становится редактируемой и получает собственные элементы интерфейса: + +- панель инструментов с элементами управления: + - `"addRowLast"` — добавить новую строку в конец дорожки + - `"addColumnLast"` — добавить новый столбец в конец дорожки + - `"copy"` — создать копию дорожки + - `"remove"` — удалить выбранную дорожку +- маркеры изменения размера (потяните за маркеры редактируемой дорожки, чтобы изменить её размер) + +Вы также можете добавлять, перемещать или удалять столбцы и строки дорожки с помощью параметров контекстного меню. Контекстное меню появляется после того, как пользователь щёлкает по иконке подзаголовка дорожки. + + + +Обратите внимание, что некоторые параметры перемещения первых/последних столбцов и строк отключены внутренними настройками дорожки. + +## Редактирование атрибутов элемента {#editing-attributes-of-an-item} + +После выбора элемента в области сетки вы можете обновить его атрибуты [с помощью боковых параметров панели редактирования редактора](guides/diagram_editor/editbar.md). + +## Настройка панели инструментов элемента {#configuring-the-toolbar-of-an-item} + +Вы можете настраивать персональную панель инструментов фигур, групп и дорожек в соответствии со своими потребностями с помощью свойства [shapeToolbar](api/diagram_editor/editor/config/shapetoolbar_property.md) редактора. + +## Включение/отключение линий привязки {#enablingdisabling-snap-lines} + +:::note +Эта функция доступна только в режиме по умолчанию Editor +::: + +Начиная с v5.0, область сетки оснащена линиями привязки, которые упрощают процесс симметричного размещения фигур относительно друг друга. + +Если вам нужно изменить ширину и цвет линий или полностью скрыть их, используйте свойство [magnetic](api/diagram_editor/editor/config/magnetic_property.md) Editor. + +## Работа с несколькими элементами {#manipulating-multiple-items} + +Вы можете выбрать несколько элементов диаграммы, наводя на них курсор с зажатой левой кнопкой мыши. Вы также можете выбрать нужные элементы с помощью сочетания клавиш Shift+Left Click. + +Вы можете одновременно выполнять действия со всеми выбранными элементами, а именно: + +- копировать и вставлять элементы (*только в режиме по умолчанию*) +- перетаскивать элементы +- удалять элементы +- вставлять скопированные стили элемента +- [выравнивать группу элементов](#aligning-multiple-items) (*только в режиме по умолчанию*) + +Вы можете выбирать и удалять линии, только если редактор инициализирован в режиме по умолчанию. + +### Выравнивание нескольких элементов {#aligning-multiple-items} + +:::note +Эта функция доступна только в режиме по умолчанию Editor. +::: + +Начиная с v5.0, вы можете выравнивать или распределять группу элементов, выбрав их и нажав нужный элемент управления на панели инструментов. Доступны следующие элементы управления: + +| Элемент управления | Описание | +| ---------------------------------- | -------------------------------------------- | +| **Выровнять по левому краю** | Выравнивает элементы по левому краю вдоль оси X | +| **Выровнять по центру по горизонтали** | Выравнивает элементы по центру вдоль оси X | +| **Выровнять по правому краю** | Выравнивает элементы по правому краю вдоль оси X | +| **Распределить по горизонтали** | Равномерно распределяет элементы вдоль оси X | +| **Распределить по вертикали** | Равномерно распределяет элементы вдоль оси Y | +| **Выровнять по верхнему краю** | Выравнивает элементы по верхнему краю вдоль оси Y | +| **Выровнять по центру по вертикали** | Выравнивает элементы по центру вдоль оси Y | +| **Выровнять по нижнему краю** | Выравнивает элементы по нижнему краю вдоль оси Y | + + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/hot_keys.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/hot_keys.md new file mode 100644 index 000000000..0190363d3 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/hot_keys.md @@ -0,0 +1,42 @@ +--- +sidebar_label: Горячие клавиши +title: Руководства по редактору — Список горячих клавиш +description: Узнайте о горячих клавишах редактора в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Список горячих клавиш + +В этом разделе представлен набор стандартных горячих клавиш, которые можно использовать при создании диаграммы в редакторе, описания действий, выполняемых этими горячими клавишами, а также строковые параметры клавиш для тех горячих клавиш, которые можно переопределить. Используйте свойство [`hotkeys`](api/diagram_editor/editor/config/hotkeys_property.md) для управления горячими клавишами в редакторе. + +| Сочетание клавиш | Описание | Строковый параметр клавиши | +|---------------------------------|-------------------------------------------------------|-------------------------| +| `Alt+1` | Показывает/скрывает панель фигур (только в режиме по умолчанию) | `"alt+1"` | +| `Alt+2` | Показывает/скрывает панель редактирования | `"alt+2"` | +| `Alt+3` | Показывает/скрывает область сетки | `"alt+3"` | +| `Ctrl+Z` (Win), `CMD+Z` (macOS)| Отменяет последнее действие | `"ctrl+z"` | +| `Ctrl+Shift+Z` (Win), `CMD+Shift+Z` (macOS)| Возвращает отменённое действие | `"ctrl+shift+z"` | +| `Ctrl+D` (Win), `CMD+D` (macOS)| Дублирует выбранный элемент (только в режиме по умолчанию) | `"ctrl+d"` | +| `Ctrl+C` (Win), `CMD+C` (macOS)| Копирует выбранный элемент (только в режиме по умолчанию) | `"ctrl+c"` | +| `Ctrl+V` (Win), `CMD+V` (macOS)| Вставляет выбранный элемент (только в режиме по умолчанию) | `"ctrl+v"` | +| `Ctrl+Alt+C` (Win), `CMD+Alt+C` (macOS)| Копирует стиль выбранного элемента (применимо для элементов одного типа)| `"alt+ctrl+c"` | +| `Ctrl+Alt+V` (Win), `CMD+Alt+V` (macOS)| Применяет скопированный стиль к выбранному элементу (применимо для элементов одного типа)| `"alt+ctrl+v"` | +| `Ctrl+A` (Win), `CMD+A` (macOS)| Выбирает все элементы | `"ctrl+a"` | +| `Ctrl+Shift+A` (Win), `CMD+Shift+A` (macOS)| Снимает выделение со всех выбранных элементов | `"ctrl+shift+a"` | +| `Shift+Left Click` | Добавляет элемент в список выбранных элементов | (не является напрямую параметром `hotkeys`) | +| `Alt+Left Click` | Снимает выделение с выбранного элемента | (не является напрямую параметром `hotkeys`) | +| `Delete` (`Del`), `Backspace` | Удаляет элемент(ы) | `"delete"`, `"backspace"` | +| `Arrow-Left`, `Arrow-Right`, `Arrow-Up`, `Arrow-Down`| Перемещает выбранные элементы | `"arrowLeft"`, `"arrowRight"`, `"arrowUp"`, `"arrowDown"` | +| `Ctrl+Mousewheel` (Win), `CMD+Mousewheel` (macOS)| Увеличивает/уменьшает значение масштаба | (не является напрямую параметром `hotkeys`) | +| `Ctrl+Enter` (Win), `CMD+Enter` (macOS) | Открывает встроенный текстовый редактор для выбранного элемента. Служит альтернативой двойному щелчку. Применимо только к фигурам с редактируемым свойством `text`. | `"ctrl+enter"` | + +## Сочетания клавиш встроенного текстового редактора {#inline-text-editor-shortcuts} + +Следующие горячие клавиши доступны, когда активен [встроенный текстовый редактор](guides/inline_editing.md). Их нельзя настроить с помощью свойства `hotkeys`. + +| Горячая клавиша | Описание | +|--------|-------------| +| `Ctrl+Enter` (Win), `CMD+Enter` (macOS) | Открывает встроенный текстовый редактор для выбранного элемента. Служит альтернативой двойному щелчку. Применимо только к фигурам с редактируемым свойством `text`. | +| `Shift+Enter` | Вставляет разрыв строки (`\n`), не закрывая редактор. | +| `Delete` (`Del`), `Backspace` | Удаляет символ в позиции курсора. Не удаляет сам элемент. | +| `Enter` | Подтверждает текущий текст и закрывает редактор. Поскольку редактор применяет изменения динамически по мере ввода, нажатие Enter отмечает успешное завершение редактирования. | +| `Escape` | Отменяет все несохранённые изменения и закрывает редактор, восстанавливая текст элемента до значения, которое было до начала редактирования. | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/initialization.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/initialization.md new file mode 100644 index 000000000..3293b70a1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/initialization.md @@ -0,0 +1,150 @@ +--- +sidebar_label: Инициализация +title: Инициализация Diagram Editor +description: Узнайте, как начать работу с Diagram Editor, в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Инициализация Diagram Editor + +В этой статье рассматривается процесс отображения Diagram Editor на странице. Чтобы инициализировать редактор, необходимо подключить исходные файлы, специфичные для Editor, и использовать экземпляр `DiagramEditor`. Во всех остальных аспектах этап инициализации совпадает с инициализацией компонента Diagram: + +- [Скачайте пакет DHTMLX Diagram](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml) и распакуйте его в папку своего проекта +- [Подключите исходные файлы на странице](#including-required-code-files) +- [Инициализируйте Diagram Editor с помощью конструктора объекта](#initializing-diagram-editor) +- [Загрузите данные в Diagram Editor](#loading-data-into-diagram-editor) + +~~~html + + + + + + + + + + + + +~~~ + +## Подключение необходимых файлов кода {#including-required-code-files} + +Чтобы создать Diagram Editor, необходимо подключить на странице 2 исходных файла: + +- **diagramWithEditor.js** +- **diagramWithEditor.css** + +Убедитесь, что вы указали правильные относительные пути к этим файлам: + +~~~html + + +~~~ + +### Установка Diagram Editor через npm или yarn {#installing-diagram-editor-via-npm-or-yarn} + +Вы можете импортировать JavaScript Diagram Editor в свой проект с помощью пакетного менеджера `yarn` или `npm`. + +#### Установка пробной версии Diagram Editor через npm или yarn {#installing-trial-diagram-editor-via-npm-or-yarn} + +:::info +Если вы хотите использовать пробную версию Diagram Editor, скачайте [**пробный пакет Diagram**](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml) и выполните шаги, описанные в файле *README*. Обратите внимание, что пробная версия Diagram Editor доступна только 30 дней. +::: + +#### Установка PRO-версии Diagram Editor через npm или yarn {#installing-pro-diagram-editor-via-npm-or-yarn} + +:::info +Вы можете получить доступ к приватному **npm** DHTMLX напрямую в [Личном кабинете](https://dhtmlx.com/clients/), сгенерировав логин и пароль для **npm**. Там же доступно подробное руководство по установке. Обратите внимание, что доступ к приватному **npm** предоставляется только при активной проприетарной лицензии на Diagram. +::: + +## Инициализация Diagram Editor {#initializing-diagram-editor} + +Вы можете инициализировать Diagram Editor в контейнере, в теле документа или в ячейке Layout. + +### Инициализация в контейнере {#initialization-in-a-container} + +Чтобы инициализировать Diagram Editor в контейнере, используйте конструктор `dhx.DiagramEditor` и передайте функции-конструктору следующие два параметра: + +- контейнер, в который будет помещён Diagram Editor; присвоим ему id `"editor_container"`: + +~~~html title="index.html" + +~~~ + +- объект с [параметрами конфигурации](#configuration-properties). Если этот аргумент не передан конструктору, будут применены настройки по умолчанию + +~~~jsx title="index.js" +const editor = new dhx.DiagramEditor("editor_container", { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### Инициализация в теле документа {#initialization-in-the-document-body} + +Вы также можете не задавать контейнер для Diagram Editor и добавить его непосредственно в тело документа: + +~~~jsx +const editor = new dhx.DiagramEditor(document.body, { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### Инициализация в ячейке Layout {#initialization-in-a-layout-cell} + +Вы также можете инициализировать редактор внутри [ячейки Layout](https://docs.dhtmlx.com/suite/layout/). В этом случае используйте *null* вместо контейнера: + +~~~jsx +const editor = new dhx.DiagramEditor(null, { + type: "default" // "default" | "org" | "mindmap" +}); +const layout = new dhx.Layout("layout", { + cols: [ + { + id: "diagram_editor" + } + ] +}); + +layout.getCell("diagram_editor").attach(editor); +~~~ + +### Параметры конфигурации {#configuration-properties} + +Чтобы изменить конфигурацию редактора, укажите нужное свойство в объекте конфигурации, передаваемом вторым параметром функции-конструктору. + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", // "default" | "org" | "mindmap" + shapeBarWidth: 320, + lineGap: 20 +}); +~~~ + +### Свойства {#properties} + +Ознакомьтесь с [полным списком параметров конфигурации Editor](api/diagram_editor/editor/config/overview.md). + +## Загрузка данных в Diagram Editor {#loading-data-into-diagram-editor} + +Вы можете загрузить [подходящий набор данных](guides/loading_data.md#preparing-data-to-load) в редактор с помощью метода [parse()](api/diagram_editor/editor/methods/parse_method.md) редактора. + + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/shapebar.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/shapebar.md new file mode 100644 index 000000000..2e3b0a04c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/shapebar.md @@ -0,0 +1,307 @@ +--- +sidebar_label: Панель фигур +title: Руководства редактора - Панель фигур +description: В документации библиотеки DHTMLX JavaScript Diagram вы можете узнать о панели фигур редактора. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Панель фигур {#shapebar} + +Панель фигур — это часть редактора, которая отображает превью элементов Diagram. Вы можете выбрать нужные элементы и перетащить их из панели фигур в область сетки. + +:::note +Панель фигур доступна только в редакторе, инициализированном в режиме по умолчанию (type: `"default"`). +::: + +## Разделы по умолчанию {#default-sections} + +По умолчанию панель фигур разделена на три раздела: *Shapes*, *Groups* и *Swimlanes*. Раздел *Shapes* включает все фигуры по умолчанию, а также пользовательские фигуры. +Разделы *Groups* и *Swimlanes* содержат базовые наборы элементов. + + + +## Пользовательские разделы {#custom-sections} + +Чтобы настроить структуру панели фигур, используйте свойство [`sections`](api/diagram_editor/shapebar/config/sections_property.md). Оно позволяет задавать собственные разделы в нужном порядке и распределять элементы по соответствующим разделам. + +Свойство `sections` представляет собой объект с набором пар *key:value*, где `key` — это имя раздела, а `value` — массив со списком элементов, которые должны отображаться в этом разделе. + +В зависимости от выбранных элементов конфигурация элементов конкретного раздела может выглядеть следующим образом: + +1. Отображение базовых разделов + +Вы можете отобразить базовый набор фигур с помощью объекта конфигурации `sections`. Например: + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Base flow shapes": [{ flowShapes: true }], + "Base org cards": [{ org: true }], + "Base groups": [{ group: true }], + "Base swimlane": [{ swimlane: true }] + } + } + } +}); +~~~ + +2. Указание элементов с помощью строковых литералов + +Вы можете отображать элементы панели фигур, указывая типы фигур с помощью строковых литералов. Ознакомьтесь с примером ниже: + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Custom section": ["custom_shape"], + "Other shapes": ["text", "topic", "circle"] + } + } + } +}); +~~~ + +3.
Переопределение базовых конфигураций
+ +Другой вариант — переопределить базовые свойства любой фигуры и отобразить её с нужными параметрами. В примере ниже показано отображение фигуры типа `circle` с различными настройками текста и цвета: + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Circles": [ + { + type: "circle", + fill: "#fcba03", + text: "Orange" + }, + { + type: "circle", + fill: "#03d7fc", + text: "Blue" + }, + { + type: "circle", + fill: "#03fc88", + text: "Green" + } + ] + } + } + } +}); +~~~ + +Таким образом вы можете переопределить конфигурацию любого типа фигур. + +4. Комбинирование элементов разных типов в одном разделе + +Если в вашем проекте используются различные элементы, вы можете создавать в панели фигур разделы со смешанными типами элементов. Ознакомьтесь со следующим примером: + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Base flow shapes": [{ flowShapes: true }, "text", "topic"], + "Circles": [ + "circle", + { + type: "circle", + fill: "#fcba03", + text: "Orange" + }, + { + type: "circle", + fill: "#03d7fc", + text: "Blue" + }, + { + type: "circle", + fill: "#03fc88", + text: "Green" + } + ] + } + } + } +}); +~~~ + +## Добавление элементов одного типа с разными настройками {#adding-items-of-the-same-type-with-different-settings} + +Библиотека позволяет добавлять в панель фигур редактора несколько идентичных элементов (то есть элементов одного типа) с разными настройками. +Для этого необходимо: + +- создать отдельные объекты с разными конфигурациями для элементов нужного типа. Вы можете создать столько объектов, сколько потребуется +- использовать *имена* созданных объектов в качестве *типов* элементов и добавить их в разделы панели фигур с помощью свойства [`sections`](api/diagram_editor/shapebar/config/sections_property.md) + +## Настройка предпросмотра фигур {#setting-the-preview-of-shapes} + +Чтобы настроить предпросмотр элементов, отображаемых на панели фигур редактора, используйте свойство [`preview`](api/diagram_editor/shapebar/config/preview_property.md). Это объект, содержащий два атрибута: + +- `scale` - (необязательный) определяет масштаб элементов, отображаемых на панели фигур редактора, по умолчанию 0.5 +- `gap` - (необязательный) задаёт расстояние между элементами, отображаемыми на панели фигур, по умолчанию "6px 8px" +(задаёт отступ 6px сверху и снизу и отступ 8px справа и слева) + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + preview: { + scale: 0.65, + gap: 8 + } + } + } +}); +~~~ + +### Настройка предпросмотра фигуры {#customizing-a-shape-preview} + +Чтобы настроить внешний вид конкретной фигуры, можно применить свойство конфигурации [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) объекта фигуры. + +Это свойство можно применять в двух случаях: + +- при настройке конфигурации по умолчанию для стандартной фигуры с помощью свойства [`defaults`](api/diagram_editor/editor/config/defaults_property.md) объекта редактора +- при настройке конфигурации по умолчанию для пользовательской фигуры с помощью атрибута `defaults` метода [`addShape()`](api/diagram/addshape_method.md) + +Рассмотрим три примера настройки предпросмотра фигуры: + +1\. Вы можете указать изображение, которое будет отображаться на панели фигур для пользовательской фигуры. Для этого нужно передать в свойство `preview` либо URL-адрес для загрузки изображения, либо изображение в формате base64 в виде строки: + +~~~jsx {6} +const defaults = { + title: "Name and First name", + img: "../avatar-1.jpg", + height: 115, + width: 330, + preview: "../shape_preview.png" +}; + +editor.diagram.addShape("template", { + template, + defaults +}); +~~~ + +2\. Если нужно указать изображение и задать его ширину и высоту, передайте свойство `preview` в виде объекта с атрибутами `img`, `height` и `width`: + +~~~jsx {4-8} +const defaults = { + title: "Name and First name", email: "some@mail.com", + img: "../avatar-1.jpg", height: 115, width: 330, + preview: { + img: "../shape_preview.png", + height: 58, + width: 165 + } +} + +editor.diagram.addShape("template", { + template, + defaults +}); +~~~ + +:::note +Вы можете задать точную ширину и высоту изображения, но нет возможности задать его масштаб. +::: + +3\. Вы можете переопределить масштаб конкретной фигуры, отображаемой на панели фигур, с помощью свойства `scale`: + +~~~jsx {2-4} +const defaults = { + preview: { + scale: 0.72 + } +}; + +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Custom shapes": ["personalCard"], + "OrgChart shapes": ["card", "img-card"] + }, + preview: { + scale: 0.65 + } + } + } +}); + +editor.diagram.addShape("personalCard", { + defaults, + // ... +}); +~~~ + +:::note +Свойство `preview` будет опущено при экспорте данных в формат JSON. +::: + +## Настройка ширины панели фигур {#setting-the-width-of-shapebar} + +Ширина панели фигур по умолчанию равна 300. Вы можете изменить её и задать любую другую ширину с помощью свойства [`width`](api/diagram_editor/shapebar/config/width_property.md), например: + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + width: 400 // 300 по умолчанию + } + } +}); +~~~ + +## Отображение/скрытие панели фигур {#showinghiding-the-shapebar} + +Когда нужно управлять видимостью панели фигур, используйте свойство [`show`](api/diagram_editor/shapebar/config/show_property.md). Оно позволяет скрыть панель фигур с определёнными настройками при инициализации Diagram Editor и показать её позже, когда потребуется. По умолчанию панель фигур отображается. + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + show: false // true по умолчанию + } + } +}); +~~~ + +## Внешний вид панели фигур и фигур {#shapebar-and-shapes-appearance} + +Вы можете задать желаемый внешний вид панели фигур с помощью свойства [`css`](api/diagram_editor/shapebar/config/css_property.md). Оно позволяет указывать собственные классы CSS для стилизации отображения элементов на панели фигур по вашему усмотрению. + +~~~html {6} + + + +~~~ + +Вы также можете [настроить внешний вид фигур](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar), переопределив цветовую схему по умолчанию для конкретной темы, или использовать собственные CSS-переменные для управления цветовой схемой элементов панели фигур. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/toolbar.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/toolbar.md new file mode 100644 index 000000000..639f10574 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/diagram_editor/toolbar.md @@ -0,0 +1,445 @@ +--- +sidebar_label: Панель инструментов +title: Руководства редактора - Панель инструментов +description: В документации библиотеки DHTMLX JavaScript Diagram вы можете узнать о панели инструментов редактора. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Панель инструментов {#toolbar} + +Панель инструментов — это верхняя часть Diagram Editor, которая помогает пользователям управлять процессом редактирования. + + + +Чтобы настроить панель инструментов, вы можете использовать следующие свойства: + +- [`css`](api/diagram_editor/toolbar/config/css_property.md) — применяет пользовательский класс CSS + +- [`navigationType`](api/diagram_editor/toolbar/config/navigationtype_property.md) — определяет действие, которое активирует элемент панели инструментов. Вы можете указать одно из следующих действий: + - `"click"` — активирует элемент панели инструментов при клике пользователя + - `"pointer"` — активирует элемент панели инструментов при наведении указателя мыши + +- [`items`](api/diagram_editor/toolbar/config/items_property.md) — массив [`items`](#service-elements) (элементов управления), размещённых на панели инструментов. Есть 2 способа настроить элементы панели инструментов: + - [**Настройка элементов с помощью строк**](api/diagram_editor/toolbar/config/items_property.md#configuring-items-via-strings) + - [**Настройка элементов с помощью объектов**](api/diagram_editor/toolbar/config/items_property.md#configuring-items-via-objects) + +~~~jsx {9-40} +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + // toolbar: true, // отображает панель инструментов по умолчанию + // или настройте панель инструментов через объект + toolbar: { + css: "custom_css", + navigationType: "pointer", + items: [ + { + type: "file", + items: [ + "importJson", + { + type: "exportJson", + value: "Export to JSON" + }, + { + id: "custom_id_1", + type: "menuItem", + value: "Server export", + icon: "dxi dxi-vault", + items: [ + "exportPdf", + { + id: "custom_id_2", + type: "menuItem", + value: "PNG", + handler: editor => { + editor.diagram.export.png(); + // custom logic here + } + } + ] + } + ] + }, + "spacer", + "scale" + ] + } + } +}); +~~~ + +## Служебные элементы {#service-elements} + +Элементы панели инструментов представлены **служебными элементами**. Вы можете использовать и настраивать следующие служебные элементы: + +- `file` — формирует группу служебных элементов для импорта и экспорта файлов + +
+ Элемент `file` имеет следующую структуру:
+
+ ~~~jsx
+ - file
+ - importJson
+ - export
+ - exportJson
+ - exportPdf
+ - exportPng
+ ~~~
+
+ Набор элементов `file` выглядит следующим образом:
+
+ 
+
+
+- `importJson` — открывает диалоговое окно для импорта файла в формате JSON
+
+- `export` — формирует группу служебных элементов для экспорта файла в выбранном формате
+
+
+ Элемент `export` имеет следующую структуру:
+
+ ~~~jsx
+ - export
+ - exportJson
+ - exportPdf
+ - exportPng
+ ~~~
+
+
+- `exportJson` — экспортирует файл в формате JSON
+
+- `exportPdf` — экспортирует файл в формате PDF
+
+- `exportPng` — экспортирует файл в формате PNG
+
++ +- `edit` — формирует группу служебных элементов для управления и редактирования фигур, линий, групп и дорожек + +
+ В режиме `default` набор элементов `edit` имеет следующую структуру по умолчанию:
+
+ ~~~jsx
+ - edit
+ - undo
+ - redo
+ - separator
+ - duplicate
+ - copy
+ - paste
+ - separator
+ - copyStyle
+ - pasteStyle
+ - separator
+ - selectAll
+ - selectNone
+ ~~~
+
+ 
+
+ В режимах `org`/`mindmap` набор элементов `edit` имеет следующую структуру по умолчанию:
+
+ ~~~jsx
+ - edit
+ - undo
+ - redo
+ - separator
+ - copyStyle
+ - pasteStyle
+ - separator
+ - selectAll
+ - selectNone
+ ~~~
+
+ 
+
+
+- `undo` — выполняет шаг назад в истории изменений
+
+- `redo` — выполняет шаг вперёд в истории изменений
+
+- `duplicate` — дублирует выбранные элементы
+
+- `copy` — копирует выбранные файлы в объект `model`
+
+- `paste` — вставляет скопированные файлы из объекта `model`
+
+- `copyStyle` — копирует стили выбранного элемента в объект `model`
+
+- `pasteStyle` — применяет стили, сохранённые в объекте `model`, к выбранным элементам
+
+- `selectAll` — выбирает все элементы, доступные для выбора
+
+- `selectNone` — снимает выделение со всех доступных элементов
+
++ +- `view` — формирует группу служебных элементов для управления отображением элементов Diagram Editor + +
+ В режиме `default` набор элементов `view` имеет следующую структуру по умолчанию:
+
+ ~~~jsx
+ - view
+ - theme
+ - themeLight
+ - themeDark
+ - themeLightContrast
+ - themeDarkContrast
+ - separator
+ - shapebar
+ - editbar
+ - grid
+ - separator
+ - connectionPoints
+ - resizePoints
+ - magnetic
+ - separator
+ - zoomIn
+ - zoomOut
+ ~~~
+
+ 
+
+ В режимах `org`/`mindmap` набор элементов `view` имеет следующую структуру по умолчанию:
+
+ ~~~jsx
+ - view
+ - theme
+ - themeLight
+ - themeDark
+ - themeLightContrast
+ - themeDarkContrast
+ - separator
+ - editbar
+ - separator
+ - grid
+ - separator
+ - resizePoints
+ - itemsDraggable
+ - separator
+ - zoomIn
+ - zoomOut
+ ~~~
+
+ 
+
+
+- `theme` — формирует группу служебных элементов для применения тем
+
+
+ Элемент `theme` имеет следующую структуру:
+
+ ~~~jsx
+ - theme
+ - themeLight
+ - themeDark
+ - themeLightContrast
+ - themeDarkContrast
+ ~~~
+
+
+- `themeLight` — применяет тему **Light**
+
+- `themeDark` — применяет тему **Dark**
+
+- `themeLightContrast` — применяет тему **LightContrast**
+
+- `themeDarkContrast` — применяет тему **DarkContrast**
+
+- `shapebar` — показывает/скрывает панель `Shapebar`
+
+- `editbar` — показывает/скрывает панель `Editbar`
+
+- `grid` — показывает/скрывает `grid` в области сетки
+
+- `connectionPoints` — показывает/скрывает **точки соединения**
+
+- `resizePoints` — показывает/скрывает **точки изменения размера**
+
+- `magnetic` — включает/выключает функциональность `magnetic`
+
+- `zoomIn` — увеличивает значение масштаба на 0.05 (5%)
+
+- `zoomOut` — уменьшает значение масштаба на 0.05 (5%)
+
++ +- `arrange` — формирует группу служебных элементов для упорядочивания элементов Diagram Editor + +
+ В режиме `default` набор элементов `arrange` имеет следующую структуру по умолчанию:
+
+ ~~~jsx
+ - arrange
+ - layout
+ - layoutMode
+ - layoutModeDirect
+ - layoutModeEdges
+ - separator
+ - layoutOrthogonal
+ - layoutRadial
+ - align
+ - alignHorizontalLeft
+ - alignHorizontalCenter
+ - alignHorizontalRight
+ - separator
+ - alignVerticalTop
+ - alignVerticalCenter
+ - alignVerticalBottom
+ - distribute
+ - distributeVertical
+ - distributeHorizontal
+ ~~~
+
+ 
+
+
+- `layout` — формирует группу служебных элементов для автоматического размещения элементов Diagram Editor
+
+
+ Элемент `layout` имеет следующую структуру:
+
+ ~~~jsx
+ - layout
+ - layoutMode
+ - layoutModeDirect
+ - layoutModeEdges
+ - separator
+ - layoutOrthogonal
+ - layoutRadial
+ ~~~
+
+
+- `layoutMode` — формирует группу служебных элементов для управления режимом автоматического размещения
+
+
+ Элемент `layoutMode` имеет следующую структуру:
+
+ ~~~jsx
+ - layoutMode
+ - layoutModeDirect
+ - layoutModeEdges
+ ~~~
+
+
+- `layoutModeDirect` — применяет режим `direct` для соединителей элементов
+
+- `layoutModeEdges` — применяет режим `edges` для соединителей элементов
+
+- `layoutOrthogonal` — применяет режим `orthogonal` для расположения элементов
+
+- `layoutRadial` — применяет режим `radial` для расположения элементов
+
+- `align` — формирует группу служебных элементов для управления выравниванием элементов Diagram Editor
+
+
+ Элемент `align` имеет следующую структуру:
+
+ ~~~jsx
+ - align
+ - alignHorizontalLeft
+ - alignHorizontalCenter
+ - alignHorizontalRight
+ - separator
+ - alignVerticalTop
+ - alignVerticalCenter
+ - alignVerticalBottom
+ ~~~
+
+
+- `alignHorizontalLeft` — выравнивает элементы по горизонтали слева
+
+- `alignHorizontalCenter` — выравнивает элементы по горизонтали по центру
+
+- `alignHorizontalRight` — выравнивает элементы по горизонтали справа
+
+- `alignVerticalTop` — выравнивает элементы по вертикали сверху
+
+- `alignVerticalCenter` — выравнивает элементы по вертикали по центру
+
+- `alignVerticalBottom` — выравнивает элементы по вертикали снизу
+
+- `distribute` — формирует группу служебных элементов для распределения элементов Diagram Editor
+
+
+ Элемент `distribute` имеет следующую структуру:
+ ~~~jsx
+ - distribute
+ - distributeVertical
+ - distributeHorizontal
+ ~~~
+
+
+- `distributeVertical` — распределяет элементы по вертикали
+
+- `distributeHorizontal` — распределяет элементы по горизонтали
+
++ +- `scale` — элемент управления, который позволяет пользователям увеличивать или уменьшать значение масштаба на 0.05 (5%) + +
+ Элемент `scale` выглядит следующим образом:
+
+ 
+
+
+- [`separator`](https://docs.dhtmlx.com/suite/toolbar/api/api_separator_properties/) — горизонтальная (между пунктами меню) или вертикальная (между элементами управления панели инструментов) линия, разделяющая элементы/группы элементов между собой.
+
+- [`spacer`](https://docs.dhtmlx.com/suite/toolbar/api/api_spacer_properties/) — пространство на панели инструментов, используемое для выравнивания элементов управления
+
+## Базовые элементы {#base-elements}
+
+Помимо [**служебных элементов**](#service-elements), вы также можете указывать и настраивать следующие **базовые элементы**, используя подход с [объектами](api/diagram_editor/toolbar/config/items_property.md#configuring-items-via-objects):
+
+- [Button](https://docs.dhtmlx.com/suite/toolbar/button/)
+- [Custom HTML](https://docs.dhtmlx.com/suite/toolbar/customhtmlbutton/)
+- [Datepicker](https://docs.dhtmlx.com/suite/toolbar/datepicker/)
+- [ImageButton]( https://docs.dhtmlx.com/suite/toolbar/image_button/)
+- [Input](https://docs.dhtmlx.com/suite/toolbar/input/)
+- [MenuItem](https://docs.dhtmlx.com/suite/toolbar/menuitem/)
+- [NavItem](https://docs.dhtmlx.com/suite/toolbar/navitem/)
+- [SelectButton](https://docs.dhtmlx.com/suite/toolbar/selectbutton/)
+- [Separator](https://docs.dhtmlx.com/suite/toolbar/separator/)
+- [Spacer](https://docs.dhtmlx.com/suite/toolbar/spacer/)
+- [Title](https://docs.dhtmlx.com/suite/toolbar/title/)
+
+В примере ниже показано, как добавить элемент управления [Button](https://docs.dhtmlx.com/suite/toolbar/button/) на панель инструментов:
+
+~~~jsx {8-11}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org", // "default" | "org" | "mindmap"
+ view: {
+ // toolbar: true, // отображает панель инструментов по умолчанию
+ // или настройте панель инструментов через объект
+ toolbar: {
+ items: [
+ {
+ type: "button",
+ value: "Best button"
+ }
+ ]
+ }
+ }
+});
+~~~
+
+В дополнение к внутренним свойствам **базовых элементов** (за исключением [Separator](https://docs.dhtmlx.com/suite/toolbar/separator/), [Spacer](https://docs.dhtmlx.com/suite/toolbar/spacer/) и [Title](https://docs.dhtmlx.com/suite/toolbar/title/)) вы также можете использовать следующие свойства:
+
+- `checkIcon` - (необязательный) - обработчик, который возвращает класс CSS для иконки. Он вызывается со следующим аргументом:
+ - `editor` - объект Diagram Editor
+
+~~~jsx
+checkIcon?: (editor: IDiagramEditor) => string; // Используйте только для базовых элементов, содержащих иконку
+~~~
+
+- `handler` - (необязательный) - обработчик, который запускается при возникновении события `click` или `inputChange`. Он вызывается со следующими аргументами:
+ - `editor` - объект Diagram Editor
+ - `event` - [нативное событие](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+
+~~~jsx
+handler?: (editor: object, event: Event) => void;
+~~~
+
+**Связанный пример**: [Diagram с редактором. Режим по умолчанию. Настройка карточек, панели редактирования, панели инструментов и панели фигур](https://snippet.dhtmlx.com/1p0wemnn)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/event_handling.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/event_handling.md
new file mode 100644
index 000000000..00aabdabb
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/event_handling.md
@@ -0,0 +1,86 @@
+---
+sidebar_label: Обработка событий
+title: Обработка событий
+description: Вы можете узнать об обработке событий в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Обработка событий {#event-handling}
+
+## Подключение обработчиков событий {#attaching-event-listeners}
+
+Вы можете добавить любой пользовательский обработчик к любому из доступных событий. Для этого используйте метод `diagram.events.on()` со следующими параметрами:
+
+- `name` - (*string*) имя события
+- `handler` - (*function*) функция-обработчик
+
+~~~jsx
+diagram.events.on("ShapeClick", (id) => {
+ alert("You've just clicked an item with id="+id);
+});
+~~~
+
+Вы можете прикрепить к одному событию несколько обработчиков, и все они будут выполнены. Если какой-либо из обработчиков возвращает *false*, связанная операция будет заблокирована. Обработчики событий выполняются в том же порядке, в котором они были прикреплены.
+
+## Отключение обработчиков событий {#detaching-event-listeners}
+
+Чтобы отключить события, используйте метод `diagram.events.detach()`:
+
+~~~jsx
+diagram.events.on("CustomEvent", args);
+
+diagram.events.detach("CustomEvent");
+~~~
+
+## Вызов событий {#calling-events}
+
+Чтобы вызвать событие, используйте метод `diagram.events.fire()`.
+
+~~~jsx
+diagram.events.fire("CustomEvent", args);
+// где args — это массив аргументов
+~~~
+
+Обычно события вызываются автоматически, и использовать этот метод не требуется.
+
+## Список поддерживаемых событий {#list-of-supported-events}
+
+### События Diagram {#diagram-events}
+
+Полный список событий API Diagram см. в [справочнике API](api/diagram/api_overview.md#diagram-events).
+
+### События Editor {#editor-events}
+
+Список событий API редактора Diagram приведён в [разделе API](api/diagram_editor/editor/events/overview.md).
+
+:::note
+Помимо событий редактора Diagram, вы также можете применять [события объекта диаграммы](api/diagram/api_overview.md#diagram-events) при работе в режиме редактора. Например:
+:::
+
+~~~jsx {6-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ controls: { autoLayout: false }
+});
+editor.parse(data);
+
+editor.diagram.events.on("ShapeClick", (id) => {
+ alert("You've just clicked an item with id=" + id);
+});
+~~~
+
+Такой способ также можно использовать, если нужно применить события, перечисленные ниже.
+
+### События CellManager {#cellmanager-events}
+
+Полный список событий API CellManager см. в [справочнике API](/api/cell_manager/#events).
+
+### События DataCollection {#datacollection-events}
+
+Полный список событий API DataCollection см. в [справочнике API](/api/data_collection/#events).
+
+### События InlineEditor {#inlineeditor-events}
+
+Полный список событий API InlineEditor см. в [справочнике API](/api/inline_editor/#events).
+
+### События Selection {#selection-events}
+
+Полный список событий API Selection см. в [справочнике API](/api/selection/#events).
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/inline_editing.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/inline_editing.md
new file mode 100644
index 000000000..e53d92202
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/inline_editing.md
@@ -0,0 +1,121 @@
+---
+sidebar_label: Инлайн-редактирование
+title: Инлайн-редактирование
+description: Вы можете узнать об инлайн-редактировании в документации библиотеки DHTMLX JavaScript Diagram. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Инлайн-редактирование {#inline-editing}
+
+Инлайн-редактирование позволяет редактировать текстовое содержимое элемента диаграммы двойным щелчком по нему. Вы можете редактировать элементы как в диаграмме, так и в редакторе.
+
+Инлайн-редактирование для линий доступно только в стандартном режиме Diagram.
+
+
+
+:::note
+Инлайн-редактирование не работает для пользовательских фигур.
+:::
+
+Эта функциональность включена по умолчанию. Чтобы отключить инлайн-редактирование, установите свойство `editable` элемента, который должен стать нередактируемым, в значение *false*.
+
+Ниже приведены примеры отключения инлайн-редактирования для элементов диаграммы:
+
+#### Заголовки линий {#line-titles}
+
+~~~jsx title="Отключение возможности редактировать текстовое содержимое линии" {18}
+const data = [
+ // configuring shapes
+ { "id": "shape_1", "type": "start", "x": 0, "text": "Start" },
+ { "id": "shape_2", "type": "process", "x": 400, "text": "Step 1" },
+ // configuring a line
+ {
+ "id": "line_1",
+ "type": "line",
+ "from": "shape_1",
+ "to": "shape_2"
+ },
+ // configuring a line title
+ {
+ "id": "title_1",
+ "type": "lineTitle",
+ "parent": "line_1",
+ "text": "Some text",
+ "editable": false // disables inline editing of the text item of a line
+ }
+];
+~~~
+
+#### Фигуры {#shapes}
+
+~~~jsx title="Отключение возможности редактировать текстовое содержимое фигуры"
+const data = [
+ { "id": 1, "x": 280, "y": 0, "text": "Start", "type": "start", "editable": false}
+];
+~~~
+
+#### Группы {#groups}
+
+~~~jsx title="Отключение возможности редактировать текстовое содержимое заголовка группы"
+const data = [
+ {
+ "type": "$group",
+ "id": 1,
+ "width": 400,
+ "height": 200,
+ "x": 0,
+ "y": 0,
+ "header": {
+ "text": "Group 1",
+ "editable": false
+ }
+ }
+];
+~~~
+
+#### Дорожки {#swimlanes}
+
+~~~jsx title="Настройка возможности редактировать текстовое содержимое заголовка и подзаголовков дорожки"
+const data = [
+ {
+ "id": "main",
+ "type": "$swimlane",
+ "height": 730,
+ "width": 1195,
+ "header": {
+ "closable": true,
+ "text": "Waterfall diagram template",
+ // disables inline editing for the header
+ "editable": false
+ },
+ "layout": [
+ [1, 2, 3]
+ ],
+ "subHeaderCols": {
+ "headers": [
+ { "text": "September", "fill": "rgba(243, 92, 79, 0.4)" },
+ // enables inline editing for the subheader
+ { "text": "October", "fill": "rgba(155, 96, 248, 0.4)", "editable": true },
+ { "text": "November", "fill": "rgba(255, 174, 18, 0.4)" }
+ ],
+ // disables inline editing for all subheaders
+ "editable": false
+ }
+ }
+];
+~~~
+
+## Горячие клавиши {#keyboard-shortcuts}
+
+Встроенный текстовый редактор поддерживает следующие горячие клавиши:
+
+| Горячая клавиша | Описание |
+|--------|-------------|
+| `Ctrl+Enter` (Win), `CMD+Enter` (macOS) | Открывает встроенный текстовый редактор для выбранного элемента. Работает как альтернатива двойному щелчку. Применимо только к фигурам с редактируемым свойством `text`. |
+| `Shift+Enter` | Вставляет разрыв строки (`\n`), не закрывая редактор. |
+| `Delete` (`Del`), `Backspace` | Удаляет символ в позиции курсора. Не удаляет сам элемент. |
+| `Enter` | Подтверждает введённый текст и закрывает редактор. Поскольку редактор применяет изменения динамически по мере ввода, нажатие Enter означает успешное завершение редактирования. |
+| `Escape` | Отменяет все несохранённые изменения и закрывает редактор, возвращая тексту элемента значение, которое было до начала редактирования. |
+
+## События API {#api-events}
+
+Библиотека включает набор полезных [событий API](/api/inline_editor/), с помощью которых можно управлять поведением редактора при его открытии/закрытии, а также контролировать процесс редактирования текста элементов.
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integrations/angular_integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integrations/angular_integration.md
new file mode 100644
index 000000000..e314881ca
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integrations/angular_integration.md
@@ -0,0 +1,269 @@
+---
+sidebar_label: Интеграция с Angular
+title: Интеграция с Angular
+description: В документации библиотеки DHTMLX JavaScript Diagram вы можете узнать об интеграции с Angular. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Интеграция с Angular {#integration-with-angular}
+
+:::tip
+Чтобы использовать эту документацию, вы должны быть знакомы с основными концепциями и шаблонами **Angular**. Чтобы освежить знания, обратитесь к [**документации Angular**](https://angular.dev/overview).
+:::
+
+DHTMLX Diagram Editor совместим с **Angular**. Мы подготовили примеры кода, показывающие, как использовать DHTMLX Diagram Editor с **Angular**. Дополнительную информацию можно найти в соответствующем [**примере на GitHub**](https://github.com/DHTMLX/angular-diagram-demo).
+
+## Создание проекта {#creating-a-project}
+
+:::info
+Прежде чем создавать новый проект, установите [**Angular CLI**](https://angular.dev/tools/cli) и [**Node.js**](https://nodejs.org/en/).
+:::
+
+Создайте новый проект **my-angular-diagram-app** с помощью Angular CLI. Для этого выполните следующую команду:
+
+~~~json
+ng new my-angular-diagram-app
+~~~
+
+:::note
+Если вы хотите следовать этому руководству, отключите серверный рендеринг (SSR) и статическую генерацию сайта (SSG/Prerendering) при создании нового приложения Angular!
+:::
+
+Приведённая выше команда устанавливает все необходимые инструменты, поэтому вам не нужно выполнять дополнительные команды.
+
+### Установка зависимостей {#installation-of-dependencies}
+
+После этого перейдите в каталог приложения:
+
+~~~json
+cd my-angular-diagram-app
+~~~
+
+Установите зависимости и запустите сервер разработки. Для этого используйте менеджер пакетов [**yarn**](https://yarnpkg.com/):
+
+~~~json
+yarn
+yarn start
+~~~
+
+Приложение должно запуститься на локальном хосте (например, `http://localhost:3000`).
+
+## Создание Diagram Editor {#creating-diagram-editor}
+
+Теперь вам нужно получить исходный код DHTMLX Diagram Editor. Сначала остановите приложение и переходите к установке пакета Diagram Editor.
+
+### Шаг 1. Установка пакета {#step-1-package-installation}
+
+Скачайте [**пробный пакет Diagram**](guides/diagram_editor/initialization.md#installing-diagram-editor-via-npm-or-yarn) и выполните шаги, описанные в файле README. Обратите внимание, что пробная версия Diagram Editor доступна только в течение 30 дней.
+
+### Шаг 2. Создание компонента {#step-2-component-creation}
+
+Теперь вам нужно создать компонент Angular, чтобы добавить Diagram Editor в приложение. Создайте папку **diagram-editor** в каталоге **src/app/**, добавьте в неё новый файл и назовите его **diagram-editor.component.ts**. Затем выполните шаги, описанные ниже.
+
+#### Импорт исходных файлов {#import-source-files}
+
+Откройте файл и импортируйте исходные файлы Diagram Editor. Обратите внимание:
+
+- если вы используете PRO-версию и устанавливаете пакет Diagram Editor из локальной папки, путь импорта выглядит следующим образом:
+
+~~~jsx
+import { DiagramEditor } from 'dhx-diagram-package';
+~~~
+
+- если вы используете пробную версию Diagram, укажите следующий путь:
+
+~~~jsx
+import { DiagramEditor } from '@dhx/trial-diagram';
+~~~
+
+В этом руководстве показано, как настроить **пробную** версию Diagram.
+
+#### Настройка контейнера и инициализация Diagram Editor {#set-the-container-and-initialize-diagram-editor}
+
+Чтобы отобразить Diagram Editor на странице, нужно задать контейнер, внутри которого будет отрисовываться компонент, и инициализировать Diagram Editor с помощью соответствующего конструктора:
+
+~~~jsx {1,9,13-14,19-20} title="diagram-editor.component.ts"
+import { DiagramEditor } from "@dhx/trial-diagram";
+import { IDefaultEditorConfig } from "@dhx/trial-diagram/codebase/types/ts-diagram-editor";
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ encapsulation: ViewEncapsulation.None,
+ selector: 'diagram-editor', // имя шаблона, используемое в файле "app.component.ts" как Другое содержимое
+
+
+~~~
+
+- задание темы для любого HTML-элемента, например для панели инструментов Toolbar
+
+~~~jsx {10-11}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: {
+ css: "toolbar"
+ }
+ }
+});
+
+const toolbarEl = document.querySelector(".toolbar");
+dhx.setTheme("dark", toolbarEl);
+~~~
+
+**Связанный пример:** [Diagram Editor. Обычный режим. Базовые и пользовательские темы](https://snippet.dhtmlx.com/9twmlfus)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/touch_support.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/touch_support.md
new file mode 100644
index 000000000..bd9876354
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/touch_support.md
@@ -0,0 +1,20 @@
+---
+sidebar_label: Поддержка касаний
+title: Поддержка касаний
+description: Вы можете узнать больше о поддержке касаний в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Поддержка касаний {#touch-support}
+
+
+
+Начиная с версии 4.2 и выше, библиотека DHTMLX Diagram предоставляет встроенную поддержку касаний, которая работает "из коробки".
+
+Когда вы взаимодействуете с приложениями с помощью касаний экрана, тап работает так же, как клик мышью.
+Таким образом, события клика (срабатывающие при клике, двойном клике по элементу) продолжат работать на сенсорных устройствах. Обратите внимание, что события mouseover срабатывать не будут.
+
+Поддержка касаний обеспечивает распознавание следующих сенсорных жестов:
+
+- **Двойной тап** — для редактирования текста фигуры/группы/дорожки; для создания и редактирования текста соединительной линии
+- **Нажатие, удержание и перетаскивание** — для вызова `blockSelection` и выбора нескольких элементов
+- **Перетаскивание** — для перетаскивания фигуры/группы/дорожки; для перетаскивания фигуры/текста/группы/дорожки с левой панели редактора
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/using_typescript.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/using_typescript.md
new file mode 100644
index 000000000..e600fbbfe
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/using_typescript.md
@@ -0,0 +1,23 @@
+---
+sidebar_label: Поддержка TypeScript
+title: Поддержка TypeScript
+description: В документации библиотеки DHTMLX JavaScript Diagram вы можете узнать об использовании Diagram с TypeScript. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Поддержка TypeScript {#typescript-support}
+
+Начиная с v3.1, библиотека DHTMLX Diagram предоставляет возможность использовать определения TypeScript. Встроенная поддержка TypeScript должна работать из коробки.
+
+:::note
+Вы можете попробовать эту функциональность прямо в нашем Snippet Tool.
+:::
+
+
+
+## Преимущества использования TypeScript {#advantages-of-using-typescript}
+
+Почему мы рекомендуем использовать DHTMLX Diagram с TypeScript?
+
+Основное преимущество TypeScript заключается в том, что он позволяет точно знать, какой тип данных ожидают API библиотеки DHTMLX Diagram.
+
+Процесс разработки приложения становится более продуманным, поскольку проверка типов вместе с автозаполнением позволяет избежать потенциальных ошибок, а также писать код, не обращаясь постоянно к документации.
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/line_titles/configuration_properties.md b/i18n/ru/docusaurus-plugin-content-docs/current/line_titles/configuration_properties.md
new file mode 100644
index 000000000..c68995d48
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/line_titles/configuration_properties.md
@@ -0,0 +1,79 @@
+---
+sidebar_label: Свойства заголовка линии
+title: Свойства заголовка линии
+description: Вы можете узнать о свойствах заголовка линии в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и демонстрации в реальном времени, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Свойства заголовка линии {#linetitle-properties}
+
+:::note
+Указывайте значения цвета в формате HEX.
+:::
+
+### Использование {#usage}
+
+~~~jsx
+const data = [
+ // объект заголовка линии
+ {
+ type: "lineTitle",
+ id?: string | number,
+ text: string,
+ parent: string | number,
+
+ distance?: number, // 50 по умолчанию
+ autoPosition?: boolean, // true по умолчанию
+ editable?: boolean, // true по умолчанию
+ fixed?: boolean, // false по умолчанию
+ hidden?: boolean, // false по умолчанию
+
+ fill?: string,
+ fontSize?: string | number, // 14 по умолчанию
+ lineHeight?: string | number, // 14 по умолчанию
+ fontStyle?: "normal" | "italic" | "oblique", // "normal" по умолчанию
+ fontColor?: string, // "#4C4C4C" по умолчанию
+ fontWeight?: string, // "500" по умолчанию
+ textAlign?: "center" | "left" | "right" // "center" по умолчанию
+ },
+ // другие объекты заголовков линий
+];
+~~~
+
+### Описание {#description}
+
+Каждый объект заголовка линии может включать следующие свойства:
+
+- `type` - (обязательное) тип элемента, укажите значение `"lineTitle"`
+- `id` - (необязательное) id заголовка линии, по умолчанию генерируется автоматически
+- `parent` - (обязательное) id линии, для которой отображается заголовок
+- `text` - (обязательное) текст заголовка линии
+- `distance` - (необязательное) задаёт расстояние до точки отображения заголовка на линии в диапазоне от 0 до 100, 50 по умолчанию
+- `autoPosition` - (необязательное) определяет направление текста: если задано значение *true* - направление текста совпадает с направлением линии, *false* - направление текста всегда горизонтальное; *true* по умолчанию
+- `editable` - (необязательное) включает/отключает возможность редактирования текста элемента двойным щелчком по нему, *true* по умолчанию
+- `fixed` - (необязательное) включает/отключает возможность фиксации текста элемента с заданным значением `distance`, *false* по умолчанию
+- `hidden` - (необязательное) определяет, будет ли текст скрыт, *false* по умолчанию
+- `fill` - (необязательное) цвет фона заголовка линии
+- `fontSize` - (необязательное) размер шрифта, 14 по умолчанию
+- `lineHeight` - (необязательное) высота строки текста, 14 по умолчанию
+- `fontStyle` - (необязательное) стиль шрифта текста: `"normal"` (по умолчанию), `"italic"`, `"oblique"`
+- `fontColor` - (необязательное) цвет шрифта текста, "#4C4C4C" по умолчанию
+- `fontWeight` - (необязательное) насыщенность шрифта текста, возможные значения: `"normal"`, `"bold"`, `"bolder"`, `"lighter"`; значения `"100"`-`"900"`, где `"400"` соответствует normal, а `"600"` и выше - самый жирный шрифт; `"500"` по умолчанию
+- `textAlign` - (необязательное) выравнивание текста: `"center"` (по умолчанию), `"left"`, `"right"`
+
+### Пример {#example}
+
+~~~jsx
+const data = [
+ // настройка фигур
+ { type: "rectangle", id: "shape_1" },
+ { type: "rectangle", id: "shape_2", x: 400 },
+
+ // настройка линий
+ { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
+
+ // настройка заголовков линий
+ { type: "lineTitle", id: "title_1", parent: "line_1", text: "Some text" }
+];
+~~~
+
+**Полезная статья**: [Настройка заголовков линий](/line_titles/)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/line_titles/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/line_titles/index.md
new file mode 100644
index 000000000..a342ba895
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/line_titles/index.md
@@ -0,0 +1,106 @@
+---
+sidebar_label: Заголовки линий
+title: Заголовки линий
+description: Вы можете узнать о линиях в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и демонстрации в реальном времени, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Заголовки линий {#linetitles}
+
+## Обзор {#overview}
+
+Заголовки линий задают текст для линий, соединяющих фигуры. Вы можете добавить текст к линии как в Diagram, так и в редакторе, дважды щёлкнув по линии, либо с помощью панели инструментов линии в редакторе (щёлкните по линии, чтобы активировать её). Вы также можете использовать двойной щелчок для редактирования заголовков линий как в Diagram, так и в редакторе.
+
+Ещё один способ добавить текст к линии и работать с ним - подготовить [набор данных](guides/loading_data.md#preparing-data-to-load).
+
+:::note
+Заголовки линий доступны только в режиме по умолчанию для Diagram/Diagram Editor (type: `"default"`).
+:::
+
+
+
+## Создание заголовков линий {#creating-line-titles}
+
+Чтобы создать заголовок линии, укажите `type: "lineTitle"` внутри объекта заголовка линии при подготовке набора данных для загрузки в Diagram:
+
+~~~jsx {5-6}
+const data = [
+ { type: "rectangle", id: "shape_1" },
+ { type: "rectangle", id: "shape_2", x: 400 },
+ { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
+ // настройка заголовка линии
+ { type: "lineTitle", id: "title_1", parent: "line_1", text: "Some text" }
+];
+
+// инициализация Diagram
+const diagram = new dhx.Diagram("diagram_container");
+diagram.data.parse(data);
+~~~
+
+### Свойства объекта заголовка линии {#properties-of-a-line-title-object}
+
+Ознакомьтесь с [полным списком свойств конфигурации объекта заголовка линии](line_titles/configuration_properties.md), чтобы настроить внешний вид, а также позиционирование заголовков линий.
+
+## Работа с заголовками линий {#working-with-line-titles}
+
+Вы можете управлять заголовками линий с помощью [DataCollection API](/api/data_collection/).
+
+:::note
+Примеры ниже подходят как для Diagram, так и для Diagram Editor.
+:::
+
+### Добавление заголовка линии {#adding-a-line-title}
+
+Вы можете добавить заголовок линии с помощью метода [`add`](api/data_collection/add_method.md) DataCollection:
+
+~~~jsx {5-10}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+editor.diagram.data.add({
+ type: "lineTitle",
+ parent: "line_1",
+ text: "Some text",
+ fill: "#BCE4CE"
+});
+~~~
+
+Передайте объект с конфигурацией нового заголовка линии в качестве параметра метода.
+
+:::note
+Смотрите [полный список свойств конфигурации объекта заголовка линии](line_titles/configuration_properties.md).
+:::
+
+### Блокировка добавления заголовков линий {#blocking-line-titles-adding}
+
+Если вам нужно предотвратить добавление заголовков линий, используйте событие [`beforeAdd`](api/data_collection/beforeadd_event.md) DataCollection:
+
+~~~jsx {5}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+editor.diagram.data.events.on("beforeAdd", (item) => item.type !== "lineTitle");
+~~~
+
+### Перебор заголовков линий {#iterating-over-line-titles}
+
+Вы можете перебирать заголовки линий как дочерние элементы линий с помощью метода [`eachChild()`](api/data_collection/eachchild_method.md) DataCollection:
+
+~~~jsx {7-9,11-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse([
+ { type: "rectangle", id: "shape_1" },
+ { type: "rectangle", id: "shape_2", x: 400 },
+ { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
+ { type: "lineTitle", id: "title_1", parent: "line_1", text: "Text 1", distance: 50 },
+ { type: "lineTitle", id: "title_2", parent: "line_1", text: "Text 2", distance: 70 }
+]);
+editor.diagram.data.eachChild("line_1", (child) => {
+ console.log(child.id); // => "title_1", "title_2"
+});
+~~~
+
+Передайте id линии, заголовки которой нужно перебрать, в качестве первого параметра. В приведённом выше примере колбек будет применён к каждому дочернему элементу указанной линии и вернёт их id.
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/lines/configuration_properties.md b/i18n/ru/docusaurus-plugin-content-docs/current/lines/configuration_properties.md
new file mode 100644
index 000000000..829d4bc53
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/lines/configuration_properties.md
@@ -0,0 +1,180 @@
+---
+sidebar_label: Свойства линий
+title: Свойства линий
+description: Вы можете узнать о свойствах линий в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# Свойства линий {#line-properties}
+
+:::note
+Указывайте значения цвета в формате HEX.
+:::
+
+## Общие свойства {#common-properties}
+
+### Использование {#usage}
+
+~~~jsx
+const data = [
+ // объект линии
+ {
+ type: "line" | "dash",
+ id?: string | number,
+ from?: string | number,
+ to?: string | number,
+ connectType?: "straight" | "elbow" | "curved",
+ strokeWidth?: number, // 2 по умолчанию
+ stroke?: string
+ },
+ // другие объекты линий
+]
+~~~
+
+### Описание {#description}
+
+Каждый объект линии может включать следующие свойства:
+
+- `type` - (обязательно) тип соединительной линии: "*line*" или "*dash*"
+- `id` - (опционально) id соединителя
+- `from` - (опционально) id родительской фигуры
+- `to` - (опционально) id дочерней фигуры
+- `connectType` - (опционально) тип соединения линии: ["straight"](/lines/#lines-in-the-default-mode), ["elbow"](/lines/#lines-in-the-org-chart-mode) (тип по умолчанию в режимах по умолчанию/организационной диаграммы), ["curved"](/lines/#lines-in-the-mindmap-mode) (тип по умолчанию в режиме ментальной карты)
+- `strokeWidth` - (опционально) толщина линии, по умолчанию 2
+- `stroke` - (опционально) цвет линии; по умолчанию "#2198F3" в режиме по умолчанию и "#CCC" в режимах организационной диаграммы/ментальной карты
+
+## Свойства, специфичные для режима по умолчанию {#properties-specific-for-the-default-mode}
+
+### Использование {#usage-1}
+
+~~~jsx
+const data = [
+ // объект линии
+ {
+ // ... общие свойства
+ forwardArrow?: string, // "filled" по умолчанию
+ backArrow?: string, // "filled" по умолчанию
+ fromSide?: "top" | "bottom" | "left" | "right" | "center",
+ toSide?: "top" | "bottom" | "left" | "right" | "center",
+ cornersRadius?: number,
+ customGap?: number,
+ points?: [
+ { x: number, y: number, custom?: boolean },
+ // другие объекты точек
+ ]
+ },
+ // другие объекты линий
+]
+~~~
+
+### Описание {#description-1}
+
+При подготовке набора данных для линий, загружаемых в диаграмму в режиме по умолчанию, вы можете добавить следующие свойства в объект конфигурации линии:
+
+- `forwardArrow` - (опционально) задаёт прямую стрелку соединителя и определяет тип стрелки (по умолчанию `"filled"`)
+- `backArrow` - (опционально) задаёт обратную стрелку соединителя и определяет тип стрелки (по умолчанию `"filled"`)
+- `fromSide` - (опционально) сторона фигуры, от которой начнётся соединение ("*top*", "*bottom*", "*left*","*right*", "*center*")
+- `toSide` - (опционально) сторона фигуры, к которой будет присоединена другая фигура ("*top*", "*bottom*", "*left*", "*right*", "*center*")
+- `cornersRadius` - (опционально) радиус скругления углов соединителя
+- `customGap` - (опционально) задаёт расстояние от фигуры до прямоугольного изгиба соединительной линии
+- `points` - (опционально) задаёт массив объектов точек для линии. Каждый объект содержит следующие свойства:
+ - `x` - (обязательно) координата x точки
+ - `y` - (обязательно) координата y точки
+ - `custom` - (опционально) определяет, является ли точка фиксированной. Если *true*, положение точки можно изменить только после взаимодействия с ней
+
+### Пример {#example}
+
+~~~jsx
+const data = [
+ // настройка фигур
+ { "id": 1, "x": 200, "y": 0, "text": "Start", "type": "start" },
+ { "id": 2, "x": 200, "y": 320, "text": "Call Client and \n set-up Appointment", "type": "process" },
+ // настройка линий
+ {
+ "type": "line",
+ "stroke": "#0AB169",
+ "connectType": "straight",
+ "from": 1,
+ "to": 2,
+ "fromSide": "bottom",
+ "toSide": "top",
+ "forwardArrow": "filled"
+ }
+];
+~~~
+
+## Свойства, специфичные для связей в режиме PERT {#properties-specific-for-links-in-the-pert-mode}
+
+### Использование {#usage-2}
+
+~~~jsx
+const dataset = {
+ data: [...], // массив фигур (задачи, вехи, проекты)
+ links: [
+ // объект связи
+ {
+ id?: string | number,
+ source: string | number,
+ target: string | number
+ },
+ // другие объекты связей
+ ]
+}
+~~~
+
+### Описание {#description-2}
+
+При подготовке набора данных для связей, загружаемых в диаграмму в режиме PERT, вы можете добавить следующие свойства в объект конфигурации связи:
+
+- `id` - (опционально) id соединителя связи
+- `source` - (обязательно) id задачи, от которой начинается связь
+- `target` - (обязательно) id задачи, которой заканчивается связь
+
+:::info важно
+Обратите внимание, что в диаграмме PERT поддерживаются только связи типа `type: "0"` ("finish" -> "start"). Все остальные [типы связей, используемые в диаграмме DHTMLX Gantt](https://docs.dhtmlx.com/gantt/desktop__link_properties.html), также будут обрабатываться как `type: "0"`.
+:::
+
+:::tip
+Обратите внимание, что, поскольку id элементов в коллекции данных Diagram должны быть уникальными, при загрузке данных или добавлении новой связи к существующему id связи добавляется префикс `$link`.
+
+Например:
+
+~~~jsx
+{
+ data: [...],
+ links: [
+ { id: "1" }, // будет доступна в диаграмме как "$link:1"
+ ]
+}
+
+// diagram.data.getItem("$link:1");
+~~~
+:::
+
+### Пример {#example-1}
+
+~~~jsx {11-16}
+const dataset = {
+ data: [
+ // настройка объекта проекта
+ { id: "1", text: "Project #1", type: "project", parent: null },
+ // настройка объектов задач
+ { id: "1.1", text: "Task #1", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+ { id: "1.2", text: "Task #2", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+ { id: "2.1", text: "Task #3", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+ { id: "2.2", text: "Task #4", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 }
+ ],
+ links: [
+ // настройка объектов связей
+ { id: "line-1", source: "1.1", target: "1.2" },
+ { id: "line-2", source: "1.2", target: "2.1" },
+ { id: "line-3", source: "2.1", target: "2.2" }
+ ]
+};
+~~~
+
+**Журнал изменений**:
+
+- Тип соединителей `links`, используемый в режиме PERT диаграммы Diagram, был добавлен в v6.1
+- Свойство `title` объекта `line` устарело в v6.0
+
+**Полезная статья**: [Настройка линий](/lines/)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/lines/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/lines/index.md
new file mode 100644
index 000000000..e0c194ecb
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/lines/index.md
@@ -0,0 +1,132 @@
+---
+sidebar_label: Линии
+title: Линии
+description: Вы можете узнать о линиях в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram.
+---
+
+# Линии {#lines}
+
+## Обзор {#overview}
+
+Внешний вид линий, соединяющих фигуры, определяется режимом, в котором инициализирована диаграмма: [по умолчанию](#lines-in-the-default-mode), [организационная диаграмма](#lines-in-the-org-chart-mode), [ментальная карта](#lines-in-the-mindmap-mode) или [PERT](#links-in-the-pert-mode).
+
+### Линии в режиме по умолчанию {#lines-in-the-default-mode}
+
+В режиме по умолчанию Diagram различные фигуры можно соединять ["прямыми" (по умолчанию) или "ломаными"](lines/configuration_properties.md) линиями в нужной последовательности, чтобы составить схему определённого процесса.
+
+Чтобы добавить текст к линии в режиме по умолчанию Diagram/Diagram Editor, используйте свойство `text` объекта [lineTitle](/line_titles/).
+
+
+
+### Линии в режиме организационной диаграммы {#lines-in-the-org-chart-mode}
+
+Режим организационной диаграммы Diagram представляет собой организационную диаграмму, содержащую набор фигур, соединённых [линиями "elbow"](lines/configuration_properties.md) в иерархическом порядке.
+
+
+
+Вы можете задать вертикальное направление соединения фигур для родительской фигуры через атрибут конфигурации `dir: "vertical"` объекта фигуры.
+
+### Линии в режиме ментальной карты {#lines-in-the-mindmap-mode}
+
+Режим ментальной карты Diagram используется для отображения ещё одного вида иерархической диаграммы. Фигуры соединяются [линиями "curved"](lines/configuration_properties.md) и располагаются вокруг центральной фигуры.
+
+
+
+Этот режим полезен, когда нужно представить основную тему или идею, окружённую ветвями подтем.
+
+Расположение дочерних фигур относительно корневой фигуры определяется автоматически основным алгоритмом.
+Чтобы изменить направление дочерних фигур по умолчанию, используйте свойство конфигурации [`typeConfig`](api/diagram/typeconfig_property.md) при инициализации диаграммы.
+
+### Связи в режиме PERT {#links-in-the-pert-mode}
+
+Режим PERT диаграммы Diagram предназначен для отображения последовательностей задач и проектов, а также связей между ними. Фигуры типов `"task"`, `"milestone"` и `"project"` соединяются [соединителями `"links"`](lines/configuration_properties.md#properties-specific-for-links-in-the-pert-mode).
+
+
+
+
+## Настройка соединений между фигурами {#setting-connections-between-shapes}
+
+Чтобы соединить фигуры в Diagram, можно использовать один из следующих двух способов:
+
+- **с помощью объектов линий**
+
+Вам нужно указать отдельные объекты, которые будут описывать логику соединения фигур. Например:
+
+~~~jsx
+const data = [
+ // фигуры
+ { id: "1", text: "Chairman & CEO" },
+ { id: "2", text: "Manager" },
+ { id: "3", text: "Technical Director" },
+ { id: "4", text: "Manager" },
+ { id: "5", text: "Technical Director" },
+ // соединители
+ { "id": "1-2", "from": "1", "to": "2", "type": "dash" },
+ { "id": "1-3", "from": "1", "to": "3", "type": "dash" },
+ { "id": "1-4", "from": "1", "to": "4", "type": "line" },
+ { "id": "1-5", "from": "1", "to": "5", "type": "line" }
+];
+~~~
+
+Свойство `type` в объекте линии позволяет задать индивидуальный тип для каждой линии.
+
+:::note
+См. [полный список свойств конфигурации объекта линии](lines/configuration_properties.md).
+:::
+
+- **с помощью атрибута `"parent"`**
+
+:::note
+Этот способ не работает в режиме по умолчанию Diagram/Diagram Editor.
+:::
+
+Вы можете указать свойство `parent` в объекте конфигурации фигуры и задать в качестве значения id её родительской фигуры:
+
+~~~jsx
+const data = [
+ // фигуры
+ { id: "1", text: "Chairman & CEO" },
+ { id: "2", text: "Manager", parent: "1" },
+ { id: "3", text: "Technical Director", parent: "1" },
+ { id: "4", text: "Manager", parent: "1" },
+ { id: "5", text: "Technical Director", parent: "1" }
+];
+~~~
+
+В этом случае все соединители будут иметь одинаковый тип.
+
+### Установка типа линии по умолчанию {#setting-the-default-line-type}
+
+Вы можете задать общий тип для всех соединительных линий диаграммы через параметр `lineType` свойства [`lineConfig`](api/diagram/lineconfig_property.md) объекта конфигурации диаграммы:
+
+~~~jsx
+const diagram = new dhx.Diagram("diagram_container", {
+ type: "default",
+ lineConfig: {
+ lineType: "dash" // "dash" | "line"
+ }
+});
+diagram.data.parse(data);
+~~~
+
+Значение параметра `lineType` применяется, если [объект линии](lines/configuration_properties.md) не содержит свойства `type`.
+
+### Установка типа соединения линии {#setting-the-connection-type-of-the-line}
+
+Вы можете указать тип соединения для линий диаграммы через параметр `connectType` свойства [`lineConfig`](api/diagram/lineconfig_property.md) объекта конфигурации диаграммы. Он предоставляет следующие типы:
+
+- `"elbow"` (тип по умолчанию для режимов Diagram по умолчанию и организационной диаграммы)
+- `"straight"`
+- `"curved"` (тип по умолчанию для режима ментальной карты Diagram). Обратите внимание, что тип соединительной линии `"curved"` используется только в режиме ментальной карты Diagram
+
+~~~jsx
+const diagram = new dhx.Diagram("diagram_container", {
+ type: "default",
+ lineConfig: {
+ connectType: "straight" // "elbow" | "straight" для режима по умолчанию
+ }
+});
+diagram.data.parse(data);
+~~~
+
+Значение параметра `connectType` применяется, если [объект линии](lines/configuration_properties.md) не содержит свойства `connectType`.
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/migration.md b/i18n/ru/docusaurus-plugin-content-docs/current/migration.md
new file mode 100644
index 000000000..55f60be5c
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/migration.md
@@ -0,0 +1,612 @@
+---
+sidebar_label: Переход на новые версии
+title: Переход на новые версии
+description: Узнайте о переходе на новые версии в документации библиотеки DHTMLX JavaScript Diagram. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram.
+---
+
+# Переход на новые версии {#migration-to-newer-versions}
+
+## 5.0 -> 6.0
+
+### Структура Diagram Editor {#diagram-editor-structure}
+
+Основные части Diagram Editor переименованы:
+
+- Левая панель -> [Shapebar](guides/diagram_editor/shapebar.md)
+- Правая панель -> [Editbar](guides/diagram_editor/editbar.md) [снабжён гибкой конфигурацией](whats_new.md#new-functionality)
+
+Структура [Toolbar](guides/diagram_editor/toolbar.md) по умолчанию была изменена. Она также стала гибко настраиваемой, поэтому вы можете добавлять собственные элементы Toolbar.
+
+### API Diagram Editor {#diagram-editor-api}
+
+Для настройки панелей Diagram Editor введён объект `view`:
+
+~~~jsx
+view?: {
+ toolbar?: boolean | obj,
+ shapebar?: boolean | obj,
+ editbar?: boolean | obj
+}
+~~~
+
+Изучите соответствующие обзорные руководства по API, чтобы узнать о новых возможностях управления панелями:
+
+- [Обзор API View](api/diagram_editor/view/api_overview.md)
+- [Обзор API Toolbar](api/diagram_editor/toolbar/api_overview.md)
+- [Обзор API Shapebar](api/diagram_editor/shapebar/api_overview.md)
+- [Обзор API Editbar](api/diagram_editor/editbar/api_overview.md)
+
+#### Устаревшие методы {#deprecated-methods}
+
+- Метод `setViewMode()` компонента Diagram Editor устарел и больше не поддерживается. Вместо него используйте методы [`show()`](api/diagram_editor/view/methods/show_method.md)/[`hide()`](api/diagram_editor/view/methods/hide_method.md) объекта `view`.
+
+~~~jsx {4} title="До v6.0"
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.setViewMode("preview"); // "preview" или "edit"
+~~~
+
+~~~jsx {4-5} title="С v6.0"
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.view.hide("shapebar");
+editor.view.hide("editbar");
+~~~
+
+#### Устаревшие свойства {#deprecated-properties}
+
+- Свойство `reservedWidth` компонента Diagram Editor устарело и больше не поддерживается.
+
+~~~jsx {2} title="До v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ reservedWidth: 150
+});
+~~~
+
+Вместо него используйте следующий синтаксис:
+
+~~~jsx title="С v6.0"
+editor.diagram.config.margin.x = 40;
+~~~
+
+- Свойство `editMode` компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте соответствующее свойство объекта `view` ([toolbar](api/diagram_editor/toolbar/api_overview.md), [shapebar](api/diagram_editor/shapebar/api_overview.md), [editbar](api/diagram_editor/editbar/api_overview.md)).
+
+~~~jsx {2} title="До v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ editMode: false
+});
+~~~
+
+~~~jsx {2-6} title="С v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ view: {
+ toolbar: false,
+ shapebar: false, // только для режима "default"
+ editbar: false
+ }
+});
+~~~
+
+- Свойство `controls` компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте свойство [`items`](api/diagram_editor/toolbar/config/items_property.md) конфигурации `view.toolbar`.
+
+~~~jsx {2-4} title="До v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ controls: {
+ // ...
+ }
+});
+~~~
+
+~~~jsx {2-6} title="С v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ view: {
+ toolbar: {
+ items: []
+ }
+ }
+});
+~~~
+
+- Свойство `shapeBarWidth` компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте свойство [`width`](api/diagram_editor/shapebar/config/width_property.md) конфигурации `view.shapebar`.
+
+~~~jsx {2} title="До v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeBarWidth: 190
+});
+~~~
+
+~~~jsx {3-7} title="С v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ width: 400 // 300 по умолчанию
+ }
+ }
+});
+~~~
+
+- Свойство `shapeSections` компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте свойство [`sections`](api/diagram_editor/shapebar/config/sections_property.md) конфигурации `view.shapebar`.
+
+~~~jsx {2-7} title="До v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeSections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+});
+~~~
+
+~~~jsx {3-12} title="С v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+ }
+ }
+});
+~~~
+
+- Свойство `gapPreview` компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте свойство `gap` объекта [`preview`](api/diagram_editor/shapebar/config/preview_property.md) конфигурации `view.shapebar`.
+
+~~~jsx {2} title="До v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ gapPreview: 10
+});
+~~~
+
+~~~jsx {3-10} title="С v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 8
+ }
+ }
+ }
+});
+~~~
+
+- Свойство `scalePreview` компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте свойство `scale` объекта [`preview`](api/diagram_editor/shapebar/config/preview_property.md) конфигурации `view.shapebar`.
+
+~~~jsx {2} title="До v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ gapPreview: 10
+});
+~~~
+
+~~~jsx {3-10} title="С v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 8
+ }
+ }
+ }
+});
+~~~
+
+#### Устаревшие события {#deprecated-events}
+
+- Следующие события компонента Diagram Editor устарели и больше не поддерживаются, так как в toolbar отсутствуют соответствующие кнопки: `resetButton`, `applyButton`, `visibility`, `exportData`, `importData`, `autoLayout`. Вместо них вы можете отслеживать событие `click` объекта `toolbar` компонента Diagram Editor:
+
+~~~jsx
+editor.toolbar.events.on("click", id => console.log(id));
+~~~
+
+:::note
+Идентификаторы [служебных элементов](guides/diagram_editor/toolbar.md#service-elements) начинаются с символа `$`.
+:::
+
+- Событие `changeGridStep` компонента Diagram Editor устарело и больше не поддерживается.
+
+### API Diagram {#diagram-api}
+
+- Свойство `properties` метода [`addShape`](api/diagram/addshape_method.md) устарело и больше не используется. Настройка пользовательской фигуры в editbar компонента Editor выполняется через свойство [`properties`](api/diagram_editor/editbar/config/properties_property.md) панели Editbar:
+
+~~~jsx {13-16} title="До v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+
+editor.diagram.addShape("network", {
+ template: config => (
+ `${config.title}
+- ${config.text.join("
- ")}
*Свойство недоступно для пользовательской фигуры.* +- `height` - (опционально) высота фигуры +- `width` - (опционально) ширина фигуры +- `fixed` - (опционально) включает/отключает перемещение и изменение размера фигуры, по умолчанию *false* +- `hidden` - (опционально) определяет, будет ли фигура скрыта + +:::note +Значения `height` и `width` рассчитываются автоматически для фигуры `"text"`/`"topic"` в зависимости от содержимого фигуры. +::: + +## Пользовательские свойства {#custom-properties} + +### Использование {#usage-1} + +~~~jsx +const data = [ + // объект фигуры + { + // ... общие свойства + [key: string]?: any, // пользовательское свойство + // ... другие пользовательские свойства + }, + // другие объекты фигур +] +~~~ + +### Описание {#description-1} + +При подготовке набора данных для пользовательской фигуры вы можете добавить любые пользовательские свойства в объект конфигурации фигуры: + +- `key` - (опционально) пользовательское свойство для пользовательской фигуры. Подробности см. в статье [Пользовательская фигура](shapes/custom_shape.md).
*Используйте уникальные имена для пользовательских свойств. Переопределение внутренних свойств объекта фигуры диаграммы запрещено, так как это приводит к некорректной работе диаграммы и её редактора.* + +### Пример {#example} + +~~~jsx +const data = [ + { + "id": "main", + "name": "Kristin Mccoy", + "post": "Medical director", + "phone": "(405) 555-0128", + "mail": "kmccoy@gmail.com", + "photo": "../img/avatar-01.jpg" + } +]; +~~~ + +## Свойства, специфичные для режима по умолчанию {#properties-specific-for-the-default-mode} + +### Использование {#usage-2} + +~~~jsx +const data = [ + // объект фигуры + { + // ... общие свойства + angle?: number, + + //либо + preview?: string, + // или + preview?: { + img?: string, + width?: number | string, + height?: number | string, + gap?: number | string, + scale?: number + } + }, + // другие объекты фигур +] +~~~ + +### Описание {#description-2} + +При подготовке набора данных для фигур, загружаемых в диаграмму в режиме по умолчанию, вы можете добавить следующие свойства в объект конфигурации фигуры: + +- `angle` - (опционально) угол поворота фигуры +- `preview` - (опционально) путь к изображению/base64-изображение либо объект с настройками [для конфигурации превью фигуры, отображаемого на панели фигур редактора](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes). В виде объекта свойство может содержать набор опциональных свойств: + - `img` - (опционально) путь к изображению или base64-изображение + - `width` - (опционально) ширина изображения + - `height` - (опционально) высота изображения + - `gap` - (опционально) задаёт значение атрибута `gap` свойства [preview](api/diagram_editor/shapebar/config/preview_property.md) для указанного типа фигуры + - `scale` - (опционально) задаёт значение атрибута `scale` свойства [preview](api/diagram_editor/shapebar/config/preview_property.md) для указанного типа фигуры + :::info + Свойство `scale` нельзя применять вместе со свойствами `img`, `width`, `height` + ::: + +### Пример {#example-1} + +~~~jsx +const data = [ + { id: 1, x: 280, y: 0, text: "Start", type: "start", angle: 10 } +]; +~~~ + +## Свойства, специфичные для режима организационной диаграммы {#properties-specific-for-the-org-chart-mode} + +### Использование {#usage-3} + +~~~jsx +const data = [ + // объект фигуры + { + // ... общие свойства + parent?: string | number, + dx?: number, + dy?: number, + dir?: string, + open?: boolean, // true по умолчанию + assistant?: boolean, + partner?: boolean, + catchItem?: boolean, + giveItem?: boolean + + }, + // другие объекты фигур +] +~~~ + +### Описание {#description-3} + +При подготовке набора данных для фигур, загружаемых в диаграмму в режиме организационной диаграммы, вы можете добавить следующие свойства в объект конфигурации фигуры: + +- `parent` - (опционально) id родительской фигуры +- `dx` - (опционально) смещение фигуры слева +- `dy` - (опционально) смещение фигуры сверху +- `dir` - (опционально) направление соединения фигур. Чтобы соединить фигуры вертикально, установите атрибуту значение `"vertical"` +- `open` - (опционально) определяет, будут ли показаны дочерние элементы текущей фигуры; по умолчанию *true* +- `assistant` - (опционально) определяет, является ли фигура элементом-ассистентом для родительской фигуры +- `partner` - (опционально) определяет, является ли фигура элементом-партнёром для родительской фигуры +- `catchItem` - (опционально) определяет, может ли элемент захватывать перемещаемый элемент +- `giveItem` - (опционально) определяет, может ли элемент быть перемещён + +### Пример {#example-2} + +~~~jsx +const data = [ + { + "id": "1", + "text": "item 1", + }, + { + "id": "2", + "text": "item 2", + "parent": "1", + "dir": "vertical" + }, + { + "id": "1.1", + "text": "assistant for 1", + "parent": "1", + "assistant": true + }, + { + "id": "1.2", + "text": "partner for 1", + "parent": "1", + "partner": true + } +]; +~~~ + +**Связанный пример**: [Диаграмма. Режим организационной диаграммы. Вложенные вертикальные списки](https://snippet.dhtmlx.com/98tzmzpg) + +## Свойства, специфичные для режима ментальной карты {#properties-specific-for-the-mindmap-mode} + +### Использование {#usage-4} + +~~~jsx +const data = [ + // объект фигуры + { + // ... общие свойства + parent?: string | number, + dx?: number, + dy?: number, + open?: boolean, // true по умолчанию + openDir?:{ + left?: boolean, + right?: boolean + }, + catchItem?: boolean, + giveItem?: boolean + }, + // другие объекты фигур +] +~~~ + +### Описание {#description-4} + +При подготовке набора данных для фигур, загружаемых в диаграмму в режиме ментальной карты, вы можете добавить следующие свойства в объект конфигурации фигуры: + +- `parent` - (опционально) id родительской фигуры +- `dx` - (опционально) смещение фигуры слева +- `dy` - (опционально) смещение фигуры сверху +- `open` - (опционально) определяет, будут ли показаны дочерние элементы текущей фигуры; по умолчанию *true* +- `openDir` - (опционально) показывает/скрывает дочерние элементы корневой фигуры. Объект принимает два атрибута: + - `left` - (опционально) показывает/скрывает дочерние элементы слева от корневой фигуры + - `right` - (опционально) показывает/скрывает дочерние элементы справа от корневой фигуры +- `catchItem` - (опционально) определяет, может ли элемент захватывать перемещаемый элемент +- `giveItem` - (опционально) определяет, может ли элемент быть перемещён + +**Связанный пример**: [Редактор диаграмм. Режим ментальной карты. Ментальная карта эмоций](https://snippet.dhtmlx.com/lo1vm0e8) + +:::info +Подробности читайте в статье [Как создать диаграмму типа "ментальная карта" на JavaScript с помощью библиотеки DHTMLX](https://dhtmlx.com/blog/create-javascript-mindmap-diagram-dhtmlx-library/) +::: + +### Пример {#example-3} + +~~~jsx +const data = [ + { + id: "1", + text: "main", + openDir: { + left: true, + right: false + } + }, + { + id: "2", + text: "2", + parent: "1", + giveItem: false + }, + { + id: "3", + text: "3", + parent: "1", + catchItem: false + }, + { + id: "4", + text: "4", + parent: "1" + } +]; +~~~ + +## Свойства, специфичные для фигур "text", "topic" и фигур блок-схемы {#properties-specific-for-text-topic-and-flow-chart-shapes} + +### Использование {#usage-5} + +~~~jsx +const data = [ + // объект фигуры + { + // ... общие свойства + fill?: string, + stroke?: string, + strokeWidth?: number, // 1 по умолчанию + strokeType?: "line" | "dash", // "line" по умолчанию + strokeDash?: string, + fontColor?: string, + fontStyle?: "normal" | "italic" | "oblique", // "normal" по умолчанию + fontWeight?: string, // "normal" по умолчанию + fontSize?: number, // 14 по умолчанию + textAlign?: "left" | "center" | "right", // "center" по умолчанию + textVerticalAlign?: "top" | "center" | "bottom", // "center" по умолчанию + lineHeight?: number // 14 по умолчанию + }, + // другие объекты фигур +] +~~~ + +### Описание {#description-5} + +При подготовке набора данных для фигур `"text"`, `"topic"` и фигур блок-схемы вы можете добавить следующие свойства в объект конфигурации фигуры: + +- `fill` - (опционально) цвет фигуры +- `stroke` - (опционально) цвет контура фигуры +- `strokeWidth` - (опционально) толщина контура фигуры, по умолчанию 1 +- `strokeType` - (опционально) тип контура: `"line"` (по умолчанию), `"dash"` для пунктирной линии +- `strokeDash` - (опционально) шаблон штрихов и пробелов для пунктирного контура +- `fontColor` - (опционально) цвет шрифта текста +- `fontStyle` - (опционально) стиль шрифта текста: `"normal"` (по умолчанию), `"italic"` или `"oblique"` +- `fontWeight` - (опционально) насыщенность шрифта текста, возможные значения: `"normal"` (по умолчанию), `"bold"`, `"bolder"`, `"lighter"`, значения от `"100"` до `"900"`, где `"400"` соответствует normal, а `"600"` и выше — самый жирный шрифт +- `fontSize` - (опционально) размер шрифта в пикселях, по умолчанию 14 +- `textAlign` - (опционально) выравнивание текста в фигуре: `"left"`, `"center"` (по умолчанию), `"right"` +- `textVerticalAlign` - (опционально) вертикальное выравнивание текста в фигуре: `"top"`, `"center"` (по умолчанию), `"bottom"` +- `lineHeight` - (опционально) высота строки, по умолчанию 14 + +### Пример {#example-4} + +~~~jsx +const data = [ + { + "id": "u1585139915192", + "type": "text", + "x": 25, + "y": 280, + "text": "Investment decision", + "width": 150, + "height": 16, + "lineHeight": 14, + "fontSize": "16", + "fontColor": "rgba(0,0,0,0.70)" + } +]; +~~~ + +## Свойства, специфичные для фигур "card" {#properties-specific-for-card-shapes} + +### Использование {#usage-6} + +~~~jsx +const data = [ + // объект фигуры + { + // ... общие свойства + headerColor?: string + }, + // другие объекты фигур +] +~~~ + +### Описание {#description-6} + +При подготовке набора данных для фигур `"card"` вы можете добавить следующие свойства в объект конфигурации фигуры: + +- `headerColor` - (опционально) цвет заголовка фигуры + +### Пример {#example-5} + +~~~jsx +const data = [ + { + "id": 1, + "type": "card", + "text": "item: 1", + }, + { + "id": 2, + "type": "card", + "text": "item: 2", + "parent": 1, + "headerColor": "#5874CD" + }, +]; +~~~ + +## Свойства, специфичные для фигур "img-card" {#properties-specific-for-img-card-shapes} + +### Использование {#usage-7} + +~~~jsx +const data = [ + // объект фигуры + { + // ... общие свойства + img?: string, + title?: string, + headerColor?: string + }, + // другие объекты фигур +] +~~~ + +### Описание {#description-7} + +При подготовке набора данных для фигур `"img-card"` вы можете добавить следующие свойства в объект конфигурации фигуры: + +- `img` - (опционально) изображение фигуры +- `title` - (опционально) заголовок фигуры +- `headerColor` - (опционально) цвет заголовка фигуры + +### Пример {#example-6} + +~~~jsx +const data = [ + { + "id": "1", + "type": "img-card", + "text": "Chairman & CEO", + "title": "Henry Bennett", + "img": "../img/avatar-01.png", + "headerColor": "" + }, + { + "id": "2", + "type": "img-card", + "text": "QA Lead", + "title": "Emma Lynch", + "img": "../img/avatar-02.png", + "parent": "1", + "headerColor": "#5874CD" + } +]; +~~~ + +## Свойства, специфичные для фигур "task" {#properties-specific-for-task-shapes} + +### Использование {#usage-8} + +~~~jsx +const data = [ + // объект фигуры + { + type: "task", + duration: number, + start_date: string | Date, + end_date?: string | Date, + text?: string, + parent?: string | number | null + //... общие свойства + }, + // другие объекты фигур +] +~~~ + +### Описание {#description-8} + +При подготовке набора данных для фигур `"task"` вы можете добавить следующие свойства в объект конфигурации фигуры: + +- `text` - (опционально) описание задачи +- `start_date` - (обязательно) дата начала задачи +- `end_date` - (опционально) дата окончания задачи +- `duration` - (обязательно) продолжительность задачи +- `parent` - (опционально) id родительского проекта задачи + +### Пример {#example-7} + +~~~jsx +const data = [ + { + "id": "4.2.1", + "text": "Functional Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 18), + "duration": 2 + } +]; +~~~ + +## Свойства, специфичные для фигур "milestone" {#properties-specific-for-milestone-shapes} + +### Использование {#usage-9} + +~~~jsx +const data = [ + // объект фигуры + { + type: "milestone", + text?: string, + parent?: string | number | null + //... общие свойства + } + // другие объекты фигур +] +~~~ + +### Описание {#description-9} + +При подготовке набора данных для фигур `"milestone"` вы можете добавить следующие свойства в объект конфигурации фигуры: + +- `text` - (опционально) описание задачи +- `parent` - (опционально) id родительского проекта задачи + +### Пример {#example-8} + +~~~jsx +const data = [ + { + "id": "5.2", + "text": "Product Launch", + "type": "milestone", + "parent": "5", + "start_date": new Date(2026, 2, 1), + "duration": 1 + } +]; +~~~ + + +**Полезные статьи**: + +- [Стандартные фигуры](shapes/default_shapes.md) +- [Пользовательская фигура](shapes/custom_shape.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/shapes/custom_shape.md b/i18n/ru/docusaurus-plugin-content-docs/current/shapes/custom_shape.md new file mode 100644 index 000000000..8dff65e78 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/shapes/custom_shape.md @@ -0,0 +1,80 @@ +--- +sidebar_label: Пользовательская фигура +title: Пользовательская фигура +description: Вы можете узнать о пользовательской фигуре в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную пробную версию DHTMLX Diagram. +--- + +# Пользовательская фигура {#custom-shape} + +Если стандартные фигуры не соответствуют вашим потребностям, вы можете создать пользовательскую фигуру. + +Представим, что вы хотите создать новую фигуру `networkCard`, которая отображает изображение, текст и IP-адрес. + + + +Для этого выполните следующие шаги: + +1\. Примените метод [`addShape()`](api/diagram/addshape_method.md), чтобы задать уникальное имя для вашей фигуры (в нашем случае *"networkCard"*) и предоставить для неё шаблон: + +~~~jsx +diagram.addShape("networkCard", { + template: ({ img, text, ip }) => (` +
+ :::tip + Атрибут `padding` доступен, если `groupBehavior` установлен в значение `"boundNoBorderExtension"` + ::: + +### Пример {#example-1} + +~~~jsx +const data = [ + // настройка swimlane + { + "id": "main", + "type": "$swimlane", + "height": 730, + "width": 1195, + "layout": [ + [1, 2, 3, 4] + ] + }, + // настройка ячейки swimlane + { + "id": 1, + "type": "$sgroup", + "groupChildren": ["s1"], + "style": { + "fill": "#D4DAE4" + }, + "x": 0, + "y": 80 + }, + // настройка фигуры для добавления в ячейку + { + "id": "s1", "type": "end", "text": "Step 1", "x": 20, "y": 110 + } +]; +~~~ + +**Полезная статья**: [Настройка Swimlanes](/swimlanes/) + +**Связанные примеры**: + +- [Diagram. Режим по умолчанию. Игровые уровни и локации](https://snippet.dhtmlx.com/1h4j9gb3?tag=diagram&mode=wide) +- [Diagram. Режим по умолчанию. Шаблон Swimlane](https://snippet.dhtmlx.com/z6x5m3gb?tag=diagram&mode=wide) +- [Diagram. Режим по умолчанию. Шаблон каскадной диаграммы](https://snippet.dhtmlx.com/k5vlvj8i?tag=diagram&mode=wide) +- [Diagram. Режим по умолчанию. Пример матрицы Эйзенхауэра](https://snippet.dhtmlx.com/yfvccvc4?mode=wide)
Подробности читайте в статье [Как создать матрицу Эйзенхауэра на JavaScript с помощью DHTMLX](https://dhtmlx.com/blog/build-javascript-eisenhower-matrix-dhtmlx/) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/swimlanes/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/swimlanes/index.md new file mode 100644 index 000000000..43c131d15 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/swimlanes/index.md @@ -0,0 +1,232 @@ +--- +sidebar_label: Swimlanes +title: Swimlanes +description: Вы можете узнать о Swimlanes в документации библиотеки DHTMLX JavaScript Diagram. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и демонстрации в реальном времени, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Swimlanes {#swimlanes} + +## Обзор Swimlane {#swimlane-overview} + +Swimlane представляет собой прямоугольный элемент Diagram, состоящий из ячеек (или дорожек), расположенных вертикально или горизонтально. Каждая ячейка (*type: "$sgroup"*) может включать дочерние элементы, такие как фигуры или Groups. + +:::note +Swimlanes доступны только в режиме по умолчанию для Diagram/Diagram Editor (type: `"default"`). +::: + + + + + +Swimlanes помогут визуализировать любой процесс (бизнес-процесс, производственный, сервисный или любой другой) или его отдельные части от начала до конца. + +## Создание Swimlanes {#creating-swimlanes} + +Чтобы создать Swimlane, укажите `type: "$swimlane"` и определите структуру layout объекта Swimlane при подготовке набора данных для загрузки в Diagram: + +~~~jsx +const data = [ + // настройка swimlane + { + type: "$swimlane", + height: 500, + width: 850, + // layout swimlane должен содержать не менее одной ячейки + layout: [ + [1] // ячейка с id:"1" и type:"$sgroup" + ] + } +]; + +// инициализация Diagram +const diagram = new dhx.Diagram("diagram_container"); +diagram.data.parse(data); +~~~ + +Приведённый выше пример кода показывает простейшую конфигурацию Swimlane с настройками по умолчанию (т.е. без заголовка и подзаголовка). + +### Структура Swimlane {#swimlane-structure} + +Структура Swimlane может быть весьма разной. Она определяется через свойство конфигурации [layout](swimlanes/configuration_properties.md) объекта Swimlane. Это свойство позволяет располагать ячейки Swimlane по строкам и столбцам. + +Всё, что нужно сделать - указать массив с матрицей в качестве значения этого свойства. Матрица может быть как одним массивом: + +~~~jsx +// swimlane с 3 столбцами +layout: [ + [1, 2, 3] +] +~~~ + +так и набором массивов, разделённых запятыми: + +~~~jsx +// swimlane с 2 строками и 3 столбцами +layout: [ + [1, 2, 3], + [4, 5, 6] +] +~~~ + +где: + +- каждая ячейка в layout имеет уникальный номер; +- количество массивов определяет количество строк (если массивов несколько, количество ячеек должно быть одинаковым во всех массивах); +- количество ячеек в массиве определяет количество столбцов. + +### Свойства объекта Swimlane {#properties-of-a-swimlane-object} + +Ознакомьтесь с [полным списком свойств конфигурации объекта Swimlane](swimlanes/configuration_properties.md), чтобы иметь возможность создавать различные Swimlanes с разными настройками в зависимости от ваших потребностей. + +## Настройка ячейки Swimlane {#configuring-a-swimlane-cell} + +При инициализации Swimlane на странице id ячейки Swimlane, а также её конфигурация, генерируются автоматически. Чтобы изменить конфигурацию ячейки по умолчанию, создайте объект ячейки, который должен включать атрибуты `type: "$sgroup"` и `id`, и укажите в нём необходимые настройки конфигурации: + +~~~jsx +const data = [ + // настройка swimlane + { + type: "$swimlane", + id: "main", + height: 500, + width: 850, + layout: [ + [1, 2, 3] + ] + }, + // настройка ячейки swimlane + { + type: "$sgroup", + id: 3, + style: { + fill: "#D4DAE4" + } + } +]; +~~~ + +### Свойства объекта ячейки {#properties-of-a-cell-object} + +Ознакомьтесь с [полным списком свойств конфигурации ячейки Swimlane](swimlanes/configuration_properties.md#properties-of-a-swimlane-cell). + +## Группировка ячеек {#grouping-cells} + +Если для каждой ячейки указан уникальный номер, все ячейки будут отрисованы с границами: + +~~~jsx +layout: [ + [1, 2, 3], + [4, 5, 6] +] +~~~ + + + +При необходимости вы можете сгруппировать диапазон ячеек и убрать границу(ы) между ними. Для этого выберите любую ячейку из диапазона и замените уникальные номера ячейки(ек) из диапазона номером этой ячейки.
+Ниже приведён пример группировки первых двух ячеек, расположенных в первой строке: + +~~~jsx +layout: [ + [1, 1, 3], + [4, 5, 6] +] +~~~ + +Результат будет выглядеть следующим образом: + + + +Ниже приведён пример группировки ячеек, расположенных во втором столбце: + +~~~jsx +layout: [ + [1, 2, 3], + [4, 2, 6] +] +~~~ + +Результат: + + + +**Связанный пример**: [Редактор Diagram. Режим по умолчанию. Настройка столбцов и строк в Swimlanes](https://snippet.dhtmlx.com/uzx5ulal) + +## Размеры Swimlane и её ячеек {#sizes-of-a-swimlane-and-its-cells} + +Размер Swimlane определяется атрибутами конфигурации `width` и `height` Swimlane. + +~~~jsx +const data = [ + // настройка swimlane + { + type: "$swimlane", + id: "main", + height: 500, + width: 850, + layout: [ + [1, 2, 3] + ] + } +]; +~~~ + +### Ширина ячейки {#cell-width} + +Ширина ячейки зависит от ширины Swimlane, количества столбцов и высоты левого/правого заголовка и подзаголовка Swimlane. Например: + +~~~jsx +const data = [ + { + type: "$swimlane", + id: "main", + height: 500, + width: 830, + layout: [ + // 3 столбца + [1, 2, 3] + ], + header: { + position: "left", + height: 40 + }, + subHeaderRows: { + enable: true, + position: "left", + height: 40 + } + } +]; +~~~ + +Ширина каждой ячейки может быть рассчитана как *(830-40-40)/3 = 250*. + +### Высота ячейки {#cell-height} + +Высота ячейки зависит от высоты Swimlane, количества строк и высоты верхнего/нижнего заголовка и подзаголовка Swimlane. Например: + +~~~jsx +const data = [ + { + type: "$swimlane", + id: "main", + height: 500, + width: 830, + layout: [ + // 2 строки + [1, 2, 3], + [4, 5, 6] + ], + header: { + position: "top", + height: 40 + }, + subHeaderCols: { + enable: true, + position: "top", + height: 40 + } + } +]; +~~~ + +Высота каждой ячейки может быть рассчитана как *(500-40-40)/2 = 210*. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/whats_new.md b/i18n/ru/docusaurus-plugin-content-docs/current/whats_new.md new file mode 100644 index 000000000..871aa0f0c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/whats_new.md @@ -0,0 +1,696 @@ +--- +sidebar_label: Что нового +title: Что нового +description: Узнайте о новых возможностях библиотеки DHTMLX JavaScript Diagram. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демонстрации, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Diagram. +--- + +# Что нового {#whats-new} + +Если вы обновляете Diagram с более старой версии, ознакомьтесь со статьей [Переход на новую версию](migration.md) для получения подробной информации. + +## Версия 6.1.6 {#version-616} + +Выпущено 1 июля 2026 г. + +### Исправления {#fixes} + +- Diagram. Исправлена ошибка, возникавшая при загрузке данных в Diagram через `ShapeCollection` (`DataCollection`) в режиме `mindmap` + +## Версия 6.1.5 {#version-615} + +Выпущено 17 июня 2026 г. + +### Обновления {#updates} + +- Diagram Editor. Улучшен процесс редактирования текста благодаря новым сочетаниям клавиш: Ctrl+Enter — начать редактирование, Shift+Enter — новая строка, Enter — подтвердить, Escape — отменить изменения + +### Исправления {#fixes} + +- Diagram Editor. Исправлена проблема, из-за которой линии, проходящие через группы дорожек, не выделялись +- Diagram Editor. Добавлена функция автопрокрутки при перетаскивании соединительных линий к фигурам за пределами текущей области просмотра. +- Diagram Editor. Исправлена ошибка, из-за которой фигура удалялась при редактировании ее текста +- Diagram. Исправлена ошибка, характерная для Safari, из-за которой линии со свойством `backArrow: "filled"` отображались некорректно + +## Версия 6.1.3 {#version-613} + +Выпущено 21 мая 2026 г. + +### Обновления {#updates} + +- Diagram / Diagram Editor. Улучшена логика автоматического размещения. Добавлена возможность управлять отступами между фигурами и уровнями с помощью новых свойств `itemPadding` и `levelPadding` в методе Diagram [`autoPlace()`](api/diagram/autoplace_method.md) и в объекте конфигурации [`autoplacement`](api/diagram/autoplacement_property.md) + +### Исправления {#fixes} + +- Diagram. Исправлена проблема, из-за которой применение автоматического размещения приводило к некорректным расстояниям между фигурами +- Diagram. Исправлена проблема, из-за которой вызов метода [`autoPlace()`](api/diagram/autoplace_method.md) игнорировал значения [`fromSide` и `toSide`](lines/configuration_properties.md) линий, что обеспечивает стабильность структуры диаграммы +- Diagram. Алгоритм автоматического размещения `Radial` был переработан для исправления проблемы с критически большими расстояниями между фигурами, что обеспечивает более компактную компоновку + +## Версия 6.1.2 {#version-612} + +Выпущено 2 апреля 2026 г. + +### Исправления {#fixes} + +- Diagram Editor. Исправлена проблема с созданием соединителей для фигур с отрицательными координатами +- Diagram Editor. Исправлена проблема, из-за которой нажатие клавиши Backspace во время встроенного редактирования текста приводило к удалению фигуры или заголовка линии +- Export. Устранена уязвимость безопасности при экспорте в PDF/PNG, которая позволяла получить произвольный доступ к локальным файлам через HTML-инъекцию, за счет улучшенной санитизации и усиления защиты окружения + +## Версия 6.1.1 {#version-611} + +Выпущено 5 февраля 2026 г. + +### Исправления {#fixes} + +- Diagram Editor. Невозможность автоматической прокрутки холста при перемещении элементов вниз и вправо + +## Версия 6.1 {#version-61} + +Выпущено 25 ноября 2025 г. + +### Новый функционал {#new-functionality} + +- Возможность создания PERT-диаграмм Diagram на основе наборов данных Gantt: + - [новый режим PERT](/#diagram-in-the-pert-mode), задаваемый через [новый тип: `"pert"`](api/diagram/type_property.md) + - [новые типы фигур: `"task"` и `"milestone"`](shapes/default_shapes.md#shapes-in-the-pert-mode) + - [новый тип группы: `"project"`](/groups/#grouping-shapes-in-the-pert-mode) (для группировки задач и вех) +- Diagram Editor. Возможность управления сочетаниями клавиш (горячими клавишами) в редакторе: + - новое свойство конфигурации [`hotkeys`](api/diagram_editor/editor/config/hotkeys_property.md) позволяет изменять или отключать существующие горячие клавиши, а также добавлять новые +- Diagram Editor. Возможность управления изменением размера и поворотом фигур с помощью набора новых событий: +[`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md), +[`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md), +[`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md), +[`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md), +[`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md), +[`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md) + +### Обновления {#updates} + +- DataCollection API. Обновления для режима PERT: + - метод [`parse()`](api/data_collection/parse_method.md) может принимать в качестве первого параметра объект с массивами `data` и `links` + - метод [`serialize()`](api/data_collection/serialize_method.md) может возвращать объект с массивами `data` и `links` +- Diagram API. Возможность задавать формат отображения дат в фигурах задач для режима PERT: + - новый параметр `dateFormat` для свойства конфигурации [`typeConfig`](api/diagram/typeconfig_property.md) +- Diagram/Diagram Editor API. Возможность задавать тип соединения линий: + - новый параметр `connectType` для свойства конфигурации [`lineConfig`](api/diagram/lineconfig_property.md) Diagram + - новый параметр `connectType` для свойства конфигурации [`lineConfig`](api/diagram_editor/editor/config/lineconfig_property.md) Diagram Editor +- Export API. Функции экспорта [`pdf()`](api/export/pdf_method.md) и [`png()`](api/export/png_method.md) возвращают промис экспорта данных + +### Исправления {#fixes} + +- Diagram Editor. Ошибка скрипта, возникавшая при наведении курсора на фигуру в браузере Safari +- Diagram Editor. Предупреждения в консоли, возникавшие после удаления элементов + +### Новая демонстрация на тему [интеграции с ИИ](guides/ai-integrations/ai-demo.md) {#new-demo-on-ai-integration} + +- [Конструктор организационных диаграмм DHTMLX Diagram на основе ИИ](https://dhtmlx.com/docs/demo/ai-org-chart-builder/) + + +### Новые примеры {#new-samples} + +- [Diagram. PERT-диаграмма. Инициализация](https://snippet.dhtmlx.com/4h5fi7xd) +- [Diagram и Gantt. PERT-диаграмма. Инициализация](https://snippet.dhtmlx.com/409jj9uh) +- [Diagram и Gantt. PERT-диаграмма. Полная интеграция](https://snippet.dhtmlx.com/gcnx4a9h) +- [Diagram и Gantt. PERT-диаграмма. Всплывающее окно](https://snippet.dhtmlx.com/fvfysbdb) +- [Diagram и Gantt. PERT-диаграмма. Пользовательские фигуры и стилизация (собственный CSS)](https://snippet.dhtmlx.com/mtk92awx) +- [Diagram. PERT-диаграмма. Разные наборы данных](https://snippet.dhtmlx.com/2j2y8vy6) +- [Diagram. PERT-диаграмма. Фильтрация/поиск задач](https://snippet.dhtmlx.com/1b2bmmxk) +- [Diagram. PERT-диаграмма. Пользовательская боковая панель для информации о задачах](https://snippet.dhtmlx.com/712lsox0) +- [Diagram. PERT-диаграмма. Темы](https://snippet.dhtmlx.com/2e5y5u6m) +- [Diagram. Экспорт. Водяной знак внизу слева](https://snippet.dhtmlx.com/d56spdsc) +- [Diagram. Экспорт. Повторяющийся водяной знак](https://snippet.dhtmlx.com/emkea55j) +- [Diagram. Интерактивная электрическая принципиальная схема](https://snippet.dhtmlx.com/cisyixkq) +- [Diagram Editor. Управление перемещением, поворотом и изменением размера фигур с помощью событий](https://snippet.dhtmlx.com/qldjbbm7) +- [Diagram Editor. Управление добавлением, изменением и отключением горячих клавиш через API](https://snippet.dhtmlx.com/8ads5dq8) +- [Diagram Editor. Диаграмма Исикавы. Причины и решения](https://snippet.dhtmlx.com/7vhwtiba) +- [Diagram Editor. Диаграмма Исикавы. Множественные причины](https://snippet.dhtmlx.com/0dgjwt6u) + + +## Версия 6.0.11 {#version-6011} + +Выпущено 18 июня 2025 г. + +### Исправления {#fixes} + +- Diagram Editor. Некорректное перемещение фигур при увеличении масштаба + +## Версия 6.0.10 {#version-6010} + +Выпущено 10 марта 2025 г. + +### Исправления {#fixes} + +- Diagram. Проблема с изменением размера стрелки линии при редактировании ширины линии + +## Версия 6.0.9 {#version-609} + +Выпущено 4 февраля 2025 г. + +### Исправления {#fixes} + +- Diagram Editor. Проблема с перемещением группы вместе с элементами и перемещением элементов в группу/из группы +- Diagram. События `itemMouseOver` и `itemMouseOut` не срабатывают для выбранной фигуры + +## Версия 6.0.8 {#version-608} + +Выпущено 5 декабря 2024 г. + +- Проблема с локальным пробным пакетом при импорте во фреймворки + +## Версия 6.0.7 {#version-607} + +Выпущено 27 ноября 2024 г. + +- Diagram Editor. Возникала ошибка при редактировании фигуры с помощью Editbar +- Diagram Editor. Проблема с перемещением фигуры при навигации во время встроенного редактирования + +## Версия 6.0.4 {#version-604} + +Выпущено 1 октября 2024 г. + +### Исправления {#fixes} + +- Diagram Editor. Вызов метода `destructor()` вызывает ошибку + +## Версия 6.0.3 {#version-603} + +Выпущено 28 августа 2024 г. + +### Исправления {#fixes} + +- Diagram Editor. Применение разных локалей для `calendar`, `combobox`, `colorpicker`, `form`, `timepicker` в Editbar +- Diagram Editor. Добавление Diagram Editor в ячейку Layout +- Diagram Editor. Свойство `shapeToolbar` не является необязательным для режима `default` +- Diagram Editor. Некорректное поведение при наведении курсора, если пользовательская фигура имеет изображение предпросмотра + + +## Версия 6.0.2 {#version-602} + +Выпущено 16 июля 2024 г. + +### Исправления {#fixes} + +- Diagram. Автоматическое размещение. Фигура скрывается под другой фигурой + +## Версия 6.0.1 {#version-601} + +Выпущено 24 июня 2024 г. + +### Исправления {#fixes} + +- Diagram Editor. Утечка памяти +- Diagram Editor. Ошибка скрипта при нажатии на вертикальное и горизонтальное распределение через Toolbar +- Diagram. Проблема с типами при вызове метода [`getSubHeaderCellId()`](api/cell_manager/getsubheadercellid_method.md) + +## Версия 6.0 {#version-60} + +Выпущено 16 мая 2024 г. + +### Критические изменения {#breaking-changes} + +Новое обновление вносит значительные изменения в структуру и функциональность Diagram и Diagram Editor. Ознакомьтесь со статьей [о миграции](migration.md#50---60), чтобы быть в курсе последней версии. + +### Новый функционал {#new-functionality} + +- Реструктуризация Diagram Editor: возможность взаимодействовать с его частями и управлять их видимостью с помощью свойства [`view`](api/diagram_editor/editor/config/view_property.md), которое включает следующие настройки: + - [Toolbar](guides/diagram_editor/toolbar.md) — верхняя часть Diagram Editor, которая помогает пользователям управлять процессом редактирования (см. [обзор API](api/diagram_editor/toolbar/api_overview.md)) + - [Shapebar](guides/diagram_editor/shapebar.md) — (бывшая левая панель) часть Diagram Editor, отображающая предпросмотр элементов Diagram (см. [обзор API](api/diagram_editor/shapebar/api_overview.md)) + - [Editbar](guides/diagram_editor/editbar.md) — (бывшая правая панель) часть Diagram Editor, позволяющая пользователям редактировать элементы Diagram (см. [обзор API](api/diagram_editor/editbar/api_overview.md)). Доступны следующие действия: + - наборы предопределенных [базовых элементов управления](api/diagram_editor/editbar/basic_controls_overview.md) и [сложных элементов управления](api/diagram_editor/editbar/complex_controls_overview.md) + - настраиваемая конфигурация [базовых элементов управления](api/diagram_editor/editbar/basic_controls_overview.md) и [сложных элементов управления](api/diagram_editor/editbar/complex_controls_overview.md) в зависимости от заданных условий + - динамическое управление панелью Editbar в зависимости от заданных условий ([пример](https://snippet.dhtmlx.com/ealq0m4l?mode=wide)) + - создание пользовательских элементов управления ([пример](https://snippet.dhtmlx.com/1p0wemnn?mode=wide)) + - создание HTML-контента ([пример](https://snippet.dhtmlx.com/vcnt647v?mode=wide)) +- Diagram Editor. Добавлен [Copy manager API](api/diagram_editor/copymanager/api_overview.md) +- Diagram Editor. Возможность показывать/скрывать [Shapebar](api/diagram_editor/shapebar/config/show_property.md), [Editbar](guides/diagram_editor/editbar.md) и [Toolbar](guides/diagram_editor/toolbar.md) +- Diagram Editor. Добавлен метод [destructor()](api/diagram_editor/editor/methods/destructor_method.md) +- Diagram Editor. Возможность [скрывать точки соединения](api/diagram_editor/editor/config/connectionpoints_property.md) +- Diagram Editor. Возможность [скрывать точки изменения размера](api/diagram_editor/editor/config/resizepoints_property.md) +- Diagram Editor. Возможность [скрывать сетку](api/diagram_editor/editor/config/grid_property.md) +- Обновление [Selection API](/api/selection/) с возможностью множественного выделения +- Заголовки линий определяются как отдельные объекты в виде [`lineTitles`](/line_titles/) с собственными [свойствами конфигурации](line_titles/configuration_properties.md) +- [Поддержка новых тем](../category/themes/): Dark, Light High Contrast и Dark High Contrast ([пример](https://snippet.dhtmlx.com/9twmlfus)) +- Diagram Editor. Возможность настраивать [цветовую схему элементов Shapebar](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar) путем переопределения переменных CSS и использования собственных + +### Обновления {#updates} + +- Diagram Editor. Обновлены [локали](guides/localization.md) +- Diagram Editor. Расширен список [горячих клавиш](guides/diagram_editor/hot_keys.md) +- Diagram Editor. Улучшено поведение элементов Shapebar при перетаскивании их на сетку, а также их внешний вид +- Diagram Editor. Колбек событий [`zoomIn`](api/diagram_editor/editor/events/zoomin_event.md) / [`zoomOut`](api/diagram_editor/editor/events/zoomout_event.md) вызывается с параметром `step` +- Diagram Editor. Расширена функциональность параметра конфигурации [`magnetic`](api/diagram_editor/editor/config/magnetic_property.md) +- Diagram Editor. Обновлены [события](api/diagram_editor/editor/events/overview.md) перемещения объекта Editor: +[`afterGroupMove`](api/diagram_editor/editor/events/aftergroupmove_event.md), +[`afterItemCatch`](api/diagram_editor/editor/events/afteritemcatch_event.md), +[`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md), +[`afterLineTitleMove`](api/diagram_editor/editor/events/afterlinetitlemove_event.md), +[`afterShapeMove`](api/diagram_editor/editor/events/aftershapemove_event.md), +[`beforeGroupMove`](api/diagram_editor/editor/events/beforegroupmove_event.md), +[`beforeItemCatch`](api/diagram_editor/editor/events/beforeitemcatch_event.md), +[`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md), +[`beforeLineTitleMove`](api/diagram_editor/editor/events/beforelinetitlemove_event.md), +[`beforeShapeMove`](api/diagram_editor/editor/events/beforeshapemove_event.md), +[`groupMoveEnd`](api/diagram_editor/editor/events/groupmoveend_event.md), +[`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md), +[`itemTarget`](api/diagram_editor/editor/events/itemtarget_event.md), +[`lineTitleMoveEnd`](api/diagram_editor/editor/events/linetitlemoveend_event.md), +[`shapeMoveEnd`](api/diagram_editor/editor/events/shapemoveend_event.md) +- Возможность [работать с заголовками линий через DataCollection API](/line_titles/#working-with-line-titles) + +### Устаревший API {#deprecated-api} + +- #### Свойства + + - Свойство `controls` Diagram Editor устарело и больше не поддерживается + - Свойство `editMode` Diagram Editor устарело и больше не поддерживается + - Свойство `gapPreview` Diagram Editor устарело и больше не поддерживается + - Свойство `reservedWidth` Diagram Editor устарело и больше не поддерживается + - Свойство `scalePreview` Diagram Editor устарело и больше не поддерживается + - Свойство `shapeBarWidth` Diagram Editor устарело и больше не поддерживается + - Свойство `shapeSections` Diagram Editor устарело и больше не поддерживается + - Свойство `title` данных [Line](lines/configuration_properties.md) устарело и больше не поддерживается + +- #### Методы + + - Метод `getId()` объекта Selection Diagram устарел и больше не поддерживается + - Метод `getSubId()` объекта Selection Diagram устарел и больше не поддерживается + - Метод `setViewMode()` Diagram Editor устарел и больше не поддерживается + +- #### События + + - Следующие события Diagram Editor устарели и больше не поддерживаются, так как в панели инструментов отсутствуют соответствующие кнопки: `resetButton`, `applyButton`, `visibility`, `exportData`, `importData`, `autoLayout` + - Событие `changeGridStep` Diagram Editor устарело и больше не поддерживается + +### Исправления {#fixes} + +- Diagram Editor. Исправлена ошибка в консоли, возникавшая при повторном нажатии кнопки «Импорт данных» после импорта данных, если файл не был выбран +- Diagram Editor. Исправлена блокировка добавления новой фигуры +- Diagram Editor. Исправлено копирование линий при ручном выделении элементов +- Diagram Editor. Исправлено перетаскивание, когда корневая фигура находится рядом с дочерней, в режимах `mindmap`/`org` +- Diagram Editor. Исправлено некорректное поведение выделения, требовавшее дополнительного щелчка для выбора фигуры с помощью клавиши Shift +- Diagram Editor. Исправлено совместное перемещение группы и дорожки +- Diagram Editor. Исправлено удаление неиспользуемых линий/соединителей +- Diagram Editor. Исправлена возможность перемещения элементов с разными родителями к целевому элементу (для режимов `org`/`mindmap`) +- Diagram Editor. Исправлена возможность задавать значения по умолчанию для элементов Shapebar +- Diagram Editor. Исправлено отображение соединителей при наведении перемещаемых элементов на любую фигуру +- Diagram Editor. Исправлена невозможность удаления выбранных элементов через меню в режимах `mindmap`/`org` +- Diagram Editor. Исправлена проблема, из-за которой импорт данных работал только один раз +- Diagram Editor. Улучшена производительность при перемещении соединителя +- Diagram Editor. Ограничена запись действий при перемещении соединителя в `historyManager` +- Diagram Editor. Оптимизирована логика поиска ближайшего соединителя +- Исправлена локализация для сложных виджетов + +## Версия 5.0.3 {#version-503} + +Выпущено 12 июля 2023 г. + +### Исправления {#fixes} + +- Исправлена проблема, из-за которой вызов метода [autoPlace()](api/diagram/autoplace_method.md) после парсинга данных вызывал ошибку + +## Версия 5.0.2 {#version-502} + +Выпущено 30 мая 2023 г. + +### Исправления {#fixes} + +- Diagram Editor. Исправлена проблема, из-за которой пользовательские точки не перемещались при множественном выделении +- Diagram Editor. Исправлена невозможность соединения фигуры с самой собой +- Исправлена проблема с экспортом диаграммы по умолчанию без [exportStyles](api/diagram/exportstyles_property.md) +- Исправлена проблема с библиотекой promiz.js, вызывавшая ошибку определения метода setImmediate() при импорте исходников +- Исправлено формирование пути URL в объекте Export +- Добавлены типы для экспорта + +## Версия 5.0.1 {#version-501} + +Выпущено 19 января 2023 г. + +### Исправления {#fixes} + +- Diagram Editor. Исправлена проблема, из-за которой линии не всегда отображались на своих местах при экспорте данных и последующей загрузке + - Теперь можно задавать координаты линий в режиме по умолчанию (новое свойство [`points`](lines/configuration_properties.md#properties-specific-for-the-default-mode) объекта линии) +- Diagram Editor. Исправлена проблема с перетаскиванием фигур в сетке после изменения уровня масштабирования +- Исправлена ошибка, возникавшая при нажатии кнопки «Автоматическая раскладка» при отсутствии фигур +- Исправлена проблема с отображением [настроек по умолчанию](api/diagram/defaults_property.md) после создания линий через редактор +- Исправлена проблема с масштабом Diagram/Diagram Editor, возникавшая при автоматическом размещении фигур в режиме `"radial"` + +## Версия 5.0 {#version-50} + +Выпущено 7 сентября 2022 г. + +Обзор релиза в блоге + +### Критические изменения {#breaking-changes} + +Новый релиз вносит некоторые изменения в свойство `lineGap`. Ознакомьтесь со статьей [о миграции](migration.md#42---50), чтобы быть в курсе последней версии. + +### Новый функционал {#new-functionality} + +#### Diagram {#diagram} + +- Алгоритм Radial для [автоматического размещения фигур](guides/diagram/configuration.md#configuring-autoplacement-for-shapes): + - параметр `placemode` добавлен в свойство [`autoplacement`](api/diagram/autoplacement_property.md) + - параметр `placemode` добавлен в метод [`autoPlace()`](api/diagram/autoplace_method.md) +- Возможность задавать подсказки для значков панели инструментов: + - параметр `tooltip` объекта значка добавлен в свойство [`toolbar`](api/diagram/toolbar_property.md) + +#### Diagram Editor {#diagram-editor} + +- Алгоритм Radial для автоматического размещения фигур: + - параметр `placemode` добавлен в свойство [`autoplacement`](api/diagram_editor/editor/config/autoplacement_property.md) + - кнопка **Автоматическая раскладка** [Toolbar](guides/diagram_editor/toolbar.md) теперь предоставляет два варианта автоматического размещения фигур: *Orthogonal* и *Radial* +- [Линии привязки](guides/diagram_editor/grid_area.md#enablingdisabling-snap-lines) для более точного размещения фигур в рабочей области +- Возможность настраивать линии привязки с помощью нового свойства [`magnetic`](api/diagram_editor/editor/config/magnetic_property.md) +- Возможность копировать и вставлять стили элемента(ов) с помощью Alt (Option) + Ctrl (Cmd) + С => Alt (Option) + Ctrl (Cmd) + V (см. **[пример](https://snippet.dhtmlx.com/klgvu3jq)**) +- Возможность [выравнивать и распределять несколько элементов](guides/diagram_editor/grid_area.md#aligning-multiple-items) +- Теперь при наведении курсора на элементы управления в персональной панели инструментов элементов появляются подсказки +- Расширен список [параметров локали](guides/localization.md) для локализации подсказок в панели инструментов элемента +- Возможность задавать подсказки для [пользовательских значков панели инструментов](guides/diagram_editor/grid_area.md#configuring-the-toolbar-of-an-item): + - параметр `tooltip` объекта значка добавлен в свойство [`shapeToolbar`](api/diagram_editor/editor/config/shapetoolbar_property.md) +- Улучшен дизайн [рабочей области](guides/diagram_editor/grid_area.md). Теперь расстояние между точками в рабочей области зависит от значения шага сетки + +### Исправления {#fixes} + +- Исправлена проблема, из-за которой значок загрузки не исчезал из правой панели редактора после загрузки файла + +## Версия 4.2 {#version-42} + +Выпущено 3 марта 2022 г. + +Обзор релиза в блоге + +### Новый функционал {#new-functionality} + +- [Поддержка сенсорного управления](guides/touch_support.md) +- Возможность задавать настройки по умолчанию для линий с помощью свойства [`lineConfig`](api/diagram/lineconfig_property.md) Diagram +- Возможность задавать настройки по умолчанию для новых линий, создаваемых в редакторе, с помощью свойства [`lineConfig`](api/diagram_editor/editor/config/lineconfig_property.md) Diagram Editor +- Возможность добавлять стандартные наборы фигур org, групп, дорожек в нужном порядке при [настройке разделов в левой панели редактора](guides/diagram_editor/shapebar.md#custom-sections) + +### Обновления {#updates} + +- Свойство `defaultLinkType` Diagram устарело. Ознакомьтесь со статьей [о миграции](migration.md#41---42) +- Обновлено свойство `shapeSections` Diagram Editor. Ознакомьтесь со статьей [о миграции](migration.md#41---42) +- Теперь можно задавать конфигурации по умолчанию не только для фигур определенных типов, но и для линий: + - обновлено свойство [`defaults`](api/diagram/defaults_property.md) Diagram + - обновлено свойство [`defaults`](api/diagram_editor/editor/config/defaults_property.md) Diagram Editor +- Обновлена документация по разделу [Режимы соединения фигур](api/diagram/autoplace_method.md#modes-of-connecting-shapes) + +## Версия 4.1 {#version-41} + +Выпущено 7 декабря 2021 г. + +Обзор релиза в блоге + +### Новый функционал {#new-functionality} + +- Возможность добавлять [фигуры-партнеры](/#assistant-and-partner-shapes) в режиме организационной диаграммы +- Возможность добавлять [фигуры-помощники](/#assistant-and-partner-shapes) в режиме организационной диаграммы +- Возможность добавлять [заголовки к линиям](/#line-titles) в режиме по умолчанию +- Возможность [перетаскивать фигуры](editor_overview.md#editor-in-the-org-chart-mode) от одного родителя к другому в редакторе в режимах организационной диаграммы и ментальной карты. Фигуры перетаскиваются вместе с дочерними элементами +- Возможность [стилизовать целевые элементы](guides/customization.md#styling-target-shapes) в редакторе в режимах организационной диаграммы и ментальной карты + +### API {#api} + +- Новые события объекта Diagram: [`emptyAreaDblClick`](api/diagram/emptyareadblclick_event.md), [`emptyAreaMouseDown`](api/diagram/emptyareamousedown_event.md), [`lineTitleClick`](api/diagram/linetitleclick_event.md), [`lineTitleDblClick`](api/diagram/linetitledblclick_event.md), [`lineTitleMouseDown`](api/diagram/linetitlemousedown_event.md) +- Новые [свойства фигур](shapes/configuration_properties.md#properties-specific-for-the-org-chart-mode), специфичные для режима организационной диаграммы: `assistant`, `partner`, `catchItem`, `giveItem` +- Новые [свойства фигур](shapes/configuration_properties.md#properties-specific-for-the-mindmap-mode), специфичные для режима mindmap: `catchItem`, `giveItem` +- Новые [свойства линий](lines/configuration_properties.md#properties-specific-for-the-default-mode), специфичные для режима по умолчанию: `title` +- Новые методы объекта Editor: `setViewMode()`, `zoomIn()`, `zoomOut()` +- Новые события объекта Editor: [`beforeLineTitleMove`](api/diagram_editor/editor/events/beforelinetitlemove_event.md), [`afterLineTitleMove`](api/diagram_editor/editor/events/afterlinetitlemove_event.md), [`lineTitleMoveEnd`](api/diagram_editor/editor/events/linetitlemoveend_event.md), [`itemTarget`](api/diagram_editor/editor/events/itemtarget_event.md), [`beforeItemCatch`](api/diagram_editor/editor/events/beforeitemcatch_event.md), [`afterItemCatch`](api/diagram_editor/editor/events/afteritemcatch_event.md) +- Новые свойства объекта Editor: [`itemsDraggable`](api/diagram_editor/editor/config/itemsdraggable_property.md) +- Новые методы HistoryManager: [`add()`](api/diagram_editor/historymanager/methods/add_method.md), [`disable()`](api/diagram_editor/historymanager/methods/disable_method.md), [`enable()`](api/diagram_editor/historymanager/methods/enable_method.md), [`isRedo()`](api/diagram_editor/historymanager/methods/isredo_method.md), [`redo()`](api/diagram_editor/historymanager/methods/redo_method.md), [`reset()`](api/diagram_editor/historymanager/methods/reset_method.md), [`undo()`](api/diagram_editor/historymanager/methods/undo_method.md) +- Новые свойства HistoryManager: `disabled`, [`saveDelay`](api/diagram_editor/historymanager/config/savedelay_property.md) +- Новый метод Selection: `getSubId()` + +### Обновления {#updates} + +- Обновлены события [InlineEditor](/api/inline_editor/): параметр *subHeaderId* изменен на *subId* +- Обновлены события [Selection API](/api/selection/#events): добавлен параметр *subId* +- Тип фигуры по умолчанию в режиме по умолчанию изменен на [*"rectangle"*](shapes/configuration_properties.md#common-properties) + +### Исправления {#fixes} + +- Улучшена производительность для всех типов диаграмм +- Исправлена некорректная работа кнопок *undo/redo* в Toolbar редактора + +## Версия 4.0.1 {#version-401} + +Выпущено 16 сентября 2021 г. + +### Исправления {#fixes} + +- Исправлено отображение соединителей при повороте фигуры +- Исправлены минифицированные стили диаграммы +- Исправлена работа алгоритма при добавлении новых элементов в редактор диаграмм в режимах организационной диаграммы/mindmap +- Исправлена работа правой панели редактора при работе со стилями текста + +## Версия 4.0 {#version-40} + +Выпущено 7 сентября 2021 г. + +Обзор релиза в блоге + +### Новый функционал {#new-functionality} + +- Добавлены новые элементы диаграммы: [Группы](/groups/), [Дорожки](/swimlanes/) +- Добавлены новые разделы в левой панели Diagram Editor: [Группы, Дорожки](guides/diagram_editor/shapebar.md#default-sections) +- [В правую панель редактора добавлены новые параметры боковой панели для групп и дорожек](guides/diagram_editor/editbar.md) +- Возможность редактировать [группы](guides/diagram_editor/grid_area.md#managing-groups) и [дорожки](guides/diagram_editor/grid_area.md#managing-swimlanes) через пользовательский интерфейс +- Расширен список [параметров локали](guides/localization.md) +- Возможность управлять ячейками дорожки через [CellManager API](/api/cell_manager/) +- Возможность редактировать текст элемента двойным щелчком по нему +- Добавлена демонстрация [DHTMLX Diagram с Angular](guides/integrations/angular_integration.md) +- Добавлена демонстрация [DHTMLX Diagram с React](guides/integrations/react_integration.md) +- Добавлена демонстрация [DHTMLX Diagram с Vue.js](guides/integrations/vue_integration.md) +- Возможность [добавлять одинаковые элементы с разными стилями и настройками в левую панель редактора](guides/diagram_editor/shapebar.md) + +### API {#api} + +- Новые методы [CellManager API](/api/cell_manager/): [add()](api/cell_manager/add_method.md), [getCellId()](api/cell_manager/getcellid_method.md), [getCellIndex()](api/cell_manager/getcellindex_method.md), [getSubHeaderCellId()](api/cell_manager/getsubheadercellid_method.md), [getSubHeaderCellIndex()](api/cell_manager/getsubheadercellindex_method.md), [getSubHeaderType()](api/cell_manager/getsubheadertype_method.md), [move()](api/cell_manager/move_method.md), [remove()](api/cell_manager/remove_method.md), [resetSwimlane()](api/cell_manager/resetswimlane_method.md), [setSwimlane()](api/cell_manager/setswimlane_method.md), [validation()](api/cell_manager/validation_method.md) +- Новые события [CellManager API](/api/cell_manager/): [afterCellsAdd](api/cell_manager/aftercellsadd_event.md), [afterCellsMove](api/cell_manager/aftercellsmove_event.md), [afterCellsRemove](api/cell_manager/aftercellsremove_event.md), [afterCellsValidation](api/cell_manager/aftercellsvalidation_event.md), [beforeCellsAdd](api/cell_manager/beforecellsadd_event.md), [beforeCellsMove](api/cell_manager/beforecellsmove_event.md), [beforeCellsRemove](api/cell_manager/beforecellsremove_event.md), [beforeCellsValidation](api/cell_manager/beforecellsvalidation_event.md) +- Новые события объекта Diagram: [afterSubmenuOpen](api/diagram/aftersubmenuopen_event.md), [beforeSubmenuOpen](api/diagram/beforesubmenuopen_event.md), [groupClick](api/diagram/groupclick_event.md), [groupDblClick](api/diagram/groupdblclick_event.md), [groupHeaderClick](api/diagram/groupheaderclick_event.md), [groupHeaderDblClick](api/diagram/groupheaderdblclick_event.md), [groupMouseDown](api/diagram/groupmousedown_event.md), [itemClick](api/diagram/itemclick_event.md), [itemDblClick](api/diagram/itemdblclick_event.md), [itemMouseDown](api/diagram/itemmousedown_event.md), [itemMouseOut](api/diagram/itemmouseout_event.md), [itemMouseOver](api/diagram/itemmouseover_event.md), [lineDblClick](api/diagram/linedblclick_event.md), [lineMouseDown](api/diagram/linemousedown_event.md) +- Новые события объекта Editor: [shapeMoveEnd](api/diagram_editor/editor/events/shapemoveend_event.md), [beforeItemMove](api/diagram_editor/editor/events/beforeitemmove_event.md), [afterItemMove](api/diagram_editor/editor/events/afteritemmove_event.md), [itemMoveEnd](api/diagram_editor/editor/events/itemmoveend_event.md), [beforeGroupMove](api/diagram_editor/editor/events/beforegroupmove_event.md), [afterGroupMove](api/diagram_editor/editor/events/aftergroupmove_event.md), [groupMoveEnd](api/diagram_editor/editor/events/groupmoveend_event.md) +- Новые методы DataCollection: [eachChild()](api/data_collection/eachchild_method.md), [eachParent()](api/data_collection/eachparent_method.md), [getRoot()](api/data_collection/getroot_method.md), [getRoots()](api/data_collection/getroots_method.md) +- Новые события InlineEditor: [afterEditorClose](api/inline_editor/aftereditorclose_event.md), [afterEditorEditing](api/inline_editor/aftereditorediting_event.md), [afterEditorOpen](api/inline_editor/aftereditoropen_event.md), [beforeEditorClose](api/inline_editor/beforeeditorclose_event.md), [beforeEditorEditing](api/inline_editor/beforeeditorediting_event.md), [beforeEditorOpen](api/inline_editor/beforeeditoropen_event.md) +- Новые атрибуты конфигурации "editable" и "fixed" [объекта фигуры](shapes/configuration_properties.md) + +### Обновления {#updates} + +- Улучшена навигация с клавиатуры +- Изменен дизайн фигур +- Обновлены события объекта Editor: [beforeShapeMove](api/diagram_editor/editor/events/beforeshapemove_event.md) и [afterShapeMove](api/diagram_editor/editor/events/aftershapemove_event.md) +- Улучшена структура Shape Collection API + +### Исправления {#fixes} + +- Исправлена некорректная работа определений типов TypeScript в редакторе +- Исправлена проблема, из-за которой нажатие кнопки панели инструментов в редакторе, размещенном внутри HTML-формы, вызывало отправку формы +- Теперь изменение размера элемента возможно только в том случае, если угол его поворота равен 0 или 360 градусам. +- Значительная оптимизация стилей Diagram + +## Версия 3.1 {#version-31} + +Выпущено 15 апреля 2021 г. + +### Новый функционал {#new-functionality} + +- [Поддержка TypeScript](guides/using_typescript.md) +- Добавлен новый режим mindmap ([type:"mindmap"](api/diagram/type_property.md)) DHTMLX Diagram +- Возможность [настраивать направление дочерних фигур относительно корневой фигуры в режиме mindmap Diagram](guides/diagram/configuration.md#arranging-shapes-in-the-mindmap-mode-of-diagram) с помощью свойства конфигурации [typeConfig](api/diagram/typeconfig_property.md) объекта диаграммы +- Возможность [добавлять пользовательские обработчики событий для пользовательских фигур](shapes/custom_shape.md#event-handlers-for-custom-shapes) с помощью атрибута "eventHandlers" метода [addShape()](api/diagram/addshape_method.md) +- Возможность настраивать персональные панели инструментов для редактирования элементов в [рабочей области](guides/diagram_editor/grid_area.md) с помощью свойства [shapeToolbar](api/diagram_editor/editor/config/shapetoolbar_property.md) объекта Editor +- Новые события объекта Editor: [BeforeShapeIconClick](api/diagram_editor/editor/events/beforeshapeiconclick_event.md) и [AfterShapeIconClick](api/diagram_editor/editor/events/aftershapeiconclick_event.md), [BeforeShapeMove](api/diagram_editor/editor/events/beforeshapemove_event.md) и [AfterShapeMove](api/diagram_editor/editor/events/aftershapeiconclick_event.md) +- Возможность отменить отправку стилей CSS в сервис экспорта с помощью параметра конфигурации [exportStyles](api/diagram/exportstyles_property.md) объекта диаграммы + +### Обновления {#updates} + +- Обновлено свойство конфигурации [type](api/diagram/type_property.md) объекта диаграммы: добавлены новые значения "default" и "mindmap" +- Обновлены методы [collapseItem()](api/diagram/collapseitem_method.md) и [expandItem()](api/diagram/expanditem_method.md): добавлен второй параметр "dir" +- Обновлены события [beforeCollapse](api/diagram/beforecollapse_event.md), [afterCollapse](api/diagram/aftercollapse_event.md), [beforeExpand](api/diagram/beforeexpand_event.md) и [afterExpand](api/diagram/afterexpand_event.md): добавлен второй параметр "dir" + +### Исправления {#fixes} + +- Исправлена проблема с модулем выделения для всех типов DHTMLX Diagram +- Исправлена проблема с прокруткой диаграммы, инициализированной в режиме по умолчанию, при применении метода "showItem()" к масштабированной диаграмме +- Исправлена некорректная работа DOM Parser с HTML-шаблонами +- Исправлена проблема, из-за которой корневая фигура сворачивалась после сворачивания любой дочерней фигуры +- Исправлена проблема с форматированием текста фигуры +- Исправлена проблема, возникавшая после добавления длинного текста в поле textarea правой панели редактора +- Исправлена проблема с добавлением специальных символов в текст пользовательских фигур +- Исправлена проблема с предупреждениями, отображаемыми в консоли для пользовательских фигур +- Исправлена ошибка скрипта, возникавшая после удаления корневой фигуры в редакторе +- Исправлена проблема с ошибкой, отображаемой в консоли после нажатия кнопки «Автоматическая раскладка» в редакторе, если редактор не настроен +- Исправлена проблема, из-за которой тип контура фигуры не применялся после его изменения в режиме по умолчанию редактора +- Исправлена проблема с отслеживанием параметров фигуры в правой панели редактора, инициализированного в режиме по умолчанию +- Исправлена проблема со снятием фокуса с фигуры в режиме по умолчанию редактора +- Исправлена проблема с установкой соединителей между фигурами в нужном порядке, если редактор инициализирован в режиме по умолчанию +- Исправлена некорректная работа комбинации Ctrl+A в режиме организационной диаграммы редактора +- Исправлена проблема, из-за которой фигуры вставлялись без соединителей при копировании связанных фигур +- Теперь невозможно удалить корневую фигуру из редактора с помощью навигации клавиатурой, если редактор инициализирован в режиме организационной диаграммы + +## Версия 3.0.4 {#version-304} + +Выпущено 27 января 2021 г. + +### Исправления {#fixes} + +- Исправлено некорректное поведение фигуры, выбранной в редакторе, инициализированном в режиме по умолчанию, при работе с полем ввода на странице +- Исправлена проблема, из-за которой свернутый/развернутый элемент не работал со своим родителем +- Исправлена некорректная работа метода [showItem()](api/diagram/showitem_method.md), если дочерний элемент скрыт + +## Версия 3.0.3 {#version-303} + +Выпущено 23 декабря 2020 г. + +### Исправления {#fixes} + +- Исправлена проблема со службой экспорта Diagram + +## Версия 3.0.2 {#version-302} + +Выпущено 14 июля 2020 г. + +### Исправления {#fixes} + +- Исправлена проблема с импортом данных из JSON в редактор, инициализированный в режиме организационной диаграммы +- Исправлена некорректная работа метода [addShape()](api/diagram/addshape_method.md) при настройке правой панели редактора +- Улучшено поведение элемента управления historyManager панели инструментов в редакторе + +## Версия 3.0.1 {#version-301} + +Выпущено 29 мая 2020 г. + +### Исправления {#fixes} + +- Исправлена проблема с методом [autoPlace()](api/diagram/autoplace_method.md) +- Исправлена проблема с модулями экспорта PNG/PDF + +## Версия 3.0 {#version-30} + +Выпущено 12 мая 2020 г. + +### Критические изменения {#breaking-changes} + +Новое обновление вносит некоторые изменения и улучшения. Ознакомьтесь со статьей [о миграции](migration.md#22---30), чтобы быть в курсе последней версии. + +### Новый функционал {#new-functionality} + +- Добавлены новый метод [autoPlace()](api/diagram/autoplace_method.md) и свойство [autoplacement](api/diagram/autoplacement_property.md) для [автоматического упорядочивания связанных фигур](guides/manipulating_items.md#arranging-shapes-automatically) в иерархической структуре +- [Возможность задавать конфигурацию фигуры по умолчанию](guides/diagram/configuration.md#setting-the-default-configuration-of-a-shape) с помощью свойства `defaults` при инициализации [Diagram](api/diagram/defaults_property.md) или [Diagram Editor](api/diagram_editor/editor/config/defaults_property.md) +- Добавлен метод [addShape()](api/diagram/addshape_method.md) для [создания пользовательских фигур](shapes/custom_shape.md) в Diagram и Diagram Editor +- Новые свойства объекта Editor: `controls`, [defaults](api/diagram_editor/editor/config/defaults_property.md), `shapeSections`, `shapeBarWidth`, `scalePreview`, [scale](api/diagram_editor/editor/config/scale_property.md), `gapPreview` +- Параметр боковой панели *Шаг сетки* добавлен в [правую панель редактора](guides/diagram_editor/editbar.md) +- Возможность скрывать/показывать любые кнопки панели инструментов редактора, а также параметр боковой панели *Шаг сетки*, с помощью свойства `controls` объекта Editor +- Возможность [настраивать параметры боковой панели для редактирования атрибутов пользовательских фигур в правой панели редактора](guides/diagram_editor/editbar.md) с помощью атрибута `properties` метода [addShape()](api/diagram/addshape_method.md) +- [Возможность настраивать разделы в левой панели редактора](guides/diagram_editor/shapebar.md#custom-sections) +- [Возможность настраивать внешний вид фигур, отображаемых в левой панели редактора](guides/diagram_editor/shapebar.md), с помощью свойства [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) объекта фигуры +- Возможность [выбирать, копировать, вставлять, удалять и перемещать несколько фигур в редакторе](guides/diagram_editor/grid_area.md#manipulating-multiple-items) +- Возможность [выбирать и удалять несколько соединительных линий](guides/diagram_editor/grid_area.md#manipulating-multiple-items) в редакторе, инициализированном в режиме по умолчанию +- Возможность импортировать данные из файла JSON в редактор с помощью кнопки [«Импорт данных»](guides/diagram_editor/toolbar.md) панели инструментов +- Добавлен метод [destructor()](api/diagram/destructor_method.md) + +### Обновления {#updates} + +- Возможность использовать пользовательские HTML-шаблоны в IE +- Обновлен и улучшен пользовательский интерфейс Diagram Editor +- Возможность соединять фигуры от центра к центру +- Обновлен набор горячих клавиш для редактора +- Возможность подключать соединительную линию к фигуре *text* в редакторе, инициализированном в режиме по умолчанию +- Добавлена автоподгонка ширины содержимого фигуры *text* + +## Версия 2.2.1 {#version-221} + +Выпущено 30 декабря 2019 г. + +### Исправления {#fixes} + +- Проблема с поддержкой IE для загрузчика изображений в редакторе Diagram + +## Версия 2.2 {#version-22} + +Выпущено 27 ноября 2019 г. + +### Новый функционал {#new-functionality} + +- Возможность создавать пользовательские фигуры с помощью SVG- и HTML-шаблонов +- Возможность создавать диаграммы с фигурами разных типов +- Возможность экспортировать данные из Diagram Editor в формат JSON с помощью кнопки «Export data» [панели инструментов](guides/diagram_editor/toolbar.md) +- В Diagram Editor добавлены параметр [showExport](migration.md#toolbar-buttons-in-editor) и событие `exportData` + +### Исправления {#fixes} + +- Исправлена проблема с экспортом диаграммы в форматы PDF и PNG +- Исправлена некорректная работа событий мыши +- Исправлена проблема с удалением дочерних фигур из диаграммы, инициализированной в режиме организационной диаграммы +- Исправлена некорректная работа правой и левой панелей в Diagram Editor +- Исправлена проблема с автоматической генерацией уникальных id фигур и соединителей + +## Версия 2.1.1 {#version-211} + +Выпущено 11 октября 2019 г. + +### Исправления {#fixes} +- Проблемы с img-card в IE + +## Версия 2.1 {#version-21} + +Выпущено 22 мая 2017 г. + +### Новый функционал {#new-functionality} + +- Удобный [редактор Diagram](guides/diagram_editor/initialization.md) для создания четких диаграмм +- Расширенный набор параметров конфигурации для [фигур](shapes/configuration_properties.md) и [линий](lines/configuration_properties.md) +- Более широкие возможности настройки [диаграмм](guides/customization.md) + +### Обновления {#updates} + +- Добавлены [горячие клавиши](guides/diagram_editor/hot_keys.md) для редактирования Diagram в редакторе +- Добавлено новое событие [emptyAreaClick](api/diagram/emptyareaclick_event.md) +- Добавлен параметр конфигурации `lineGap` + +## Версия 2.0 {#version-20} + +Выпущено 15 февраля 2017 г. + +### Критические изменения {#breaking-changes} + +Структура API была полностью реорганизована и улучшена для упрощения работы с ней. Ознакомьтесь со статьей [о миграции](migration.md#11---20), чтобы узнать обо всех изменениях. + +### Новый функционал {#new-functionality} + +- Возможность создавать разные диаграммы и стилизовать их +- Разнообразие [фигур](shapes/default_shapes.md) и [линий](/lines/) +- [Экспорт в формат PDF](guides/data_export.md) +- [Экспорт в формат PNG](guides/data_export.md) + +### Обновления {#updates} + +- Возможность [находить нужные фигуры](guides/manipulating_items.md#finding-the-necessary-item) +- Возможность [фильтровать фигуры по заданным критериям](guides/manipulating_items.md#filtering-items) +- Возможность [добавлять панель инструментов со значками для фигур](guides/diagram/configuration.md#setting-toolbar-for-shapes) для упрощения взаимодействия с ними +- Повышена производительность +- Возможность адаптироваться к любому HTML-контейнеру и встроенное автоматическое изменение размера + +## Версия 1.1 {#version-11} + +Выпущено 5 декабря 2017 г. + +### Новый функционал {#new-functionality} + +- [Использование редактора в режиме организационной диаграммы](api/diagram_editor/editor/config/type_property.md) +- Возможность [сохранять и восстанавливать состояние](guides/loading_data.md#saving-and-restoring-state) +- Расширены [возможности настройки](guides/customization.md) + +### Обновления {#updates} + +- [Расширенный API](api/diagram/api_overview.md): новые методы, свойства и события + +## Версия 1.0 {#version-10} + +Выпущено 29 сентября 2017 г. + +### Начальный функционал {#initial-functionality} + +- Режим организационной диаграммы +- Вертикальная и горизонтальная стратегии автоматического размещения +- Загрузка данных из JSON +- API для управления данными и состоянием ветвей diff --git a/i18n/ru/docusaurus-theme-classic/footer.json b/i18n/ru/docusaurus-theme-classic/footer.json new file mode 100644 index 000000000..93e4ff60c --- /dev/null +++ b/i18n/ru/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Development center", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "Community", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "Company", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download Diagram": { + "message": "Download Diagram", + "description": "The label of footer link with label=Download Diagram linking to https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml" + }, + "link.item.label.Examples": { + "message": "Examples", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/xdvi4fek?tag=diagram" + }, + "link.item.label.Blog": { + "message": "Blog", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/" + }, + "link.item.label.Forum": { + "message": "Forum", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/diagram/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "About us", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Contact us", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Licensing", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxDiagram/#licensing" + } +} diff --git a/i18n/ru/docusaurus-theme-classic/navbar.json b/i18n/ru/docusaurus-theme-classic/navbar.json new file mode 100644 index 000000000..c1338bbaf --- /dev/null +++ b/i18n/ru/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript Diagram Documentation", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "DHTMLX Diagram Documentation", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "Examples", + "description": "Navbar item with label Examples" + }, + "item.label.Forum": { + "message": "Forum", + "description": "Navbar item with label Forum" + }, + "item.label.Support": { + "message": "Support", + "description": "Navbar item with label Support" + }, + "item.label.Download": { + "message": "Download", + "description": "Navbar item with label Download" + } +} diff --git a/i18n/zh/code.json b/i18n/zh/code.json new file mode 100644 index 000000000..339629b4e --- /dev/null +++ b/i18n/zh/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "页面已崩溃。", + "description": "The title of the fallback page when the page crashed" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "回到顶部", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "历史博文", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "历史博文", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "博文列表分页导航", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "较新的博文", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "较旧的博文", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "博文分页导航", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "较新一篇", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "较旧一篇", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "查看所有标签", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "system mode", + "description": "The name for the system color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "浅色模式", + "description": "The name for the light color mode" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "暗黑模式", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel": { + "message": "切换浅色/暗黑模式（当前为{mode}）", + "description": "The ARIA label for the color mode toggle" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "页面路径", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "{count} 个项目", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "文件选项卡", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "上一页", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "下一页", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "{count} 篇文档带有标签", + "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.tagDocListPageTitle": { + "message": "{nDocsTagged}「{tagName}」", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "版本：{versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "此为 {siteTitle} {versionLabel} 版尚未发行的文档。", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "此为 {siteTitle} {versionLabel} 版的文档，现已不再积极维护。", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "最新的文档请参阅 {latestVersionLink} ({versionLabel})。", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "最新版本", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "编辑此页", + "description": "The link label to edit the current page" + }, + "theme.common.headingLinkTitle": { + "message": "{heading}的直接链接", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": "于 {date} ", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": "由 {user} ", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "最后{byUser}{atDate}更新", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "选择版本", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.NotFound.title": { + "message": "找不到页面", + "description": "The title of the 404 page" + }, + "theme.tags.tagsListLabel": { + "message": "标签：", + "description": "The label alongside a tag list" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "关闭", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.admonition.caution": { + "message": "注意", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "危险", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "信息", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.note": { + "message": "备注", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "提示", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "警告", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "最近博文导航", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "展开侧边栏分类 '{label}'", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "折叠侧边栏分类 '{label}'", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "(opens in new tab)", + "description": "The ARIA label for the external link icon" + }, + "theme.NavBar.navAriaLabel": { + "message": "主导航", + "description": "The ARIA label for the main navigation" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "选择语言", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.NotFound.p1": { + "message": "我们找不到您要找的页面。", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "请联系原始链接来源网站的所有者，并告知他们链接已损坏。", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "本页总览", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "阅读更多", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "阅读 {title} 的全文", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.blog.post.readingTime.plurals": { + "message": "阅读需 {readingTime} 分钟", + "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.CodeBlock.copy": { + "message": "复制", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.copied": { + "message": "复制成功", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "复制代码到剪贴板", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "切换自动换行", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.docs.breadcrumbs.home": { + "message": "主页面", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "收起侧边栏", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "收起侧边栏", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "文档侧边栏", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "关闭导航栏", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← 回到主菜单", + "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "切换导航栏", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "Expand the dropdown", + "description": "The ARIA label of the button to expand the mobile dropdown navbar item" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "Collapse the dropdown", + "description": "The ARIA label of the button to collapse the mobile dropdown navbar item" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "展开侧边栏", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "展开侧边栏", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.SearchBar.seeAll": { + "message": "查看全部 {count} 个结果" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "找到 {count} 份文件", + "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.SearchPage.existingResultsTitle": { + "message": "「{query}」的搜索结果", + "description": "The search page title for non-empty query" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "在文档中搜索", + "description": "The search page title for empty query" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "在此输入搜索词", + "description": "The placeholder for search page input" + }, + "theme.SearchPage.inputLabel": { + "message": "搜索", + "description": "The ARIA label for search page input" + }, + "theme.SearchPage.algoliaLabel": { + "message": "由 Algolia 提供", + "description": "The description label for Algolia mention" + }, + "theme.SearchPage.noResultsText": { + "message": "未找到结果", + "description": "The paragraph for empty search result" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "正在获取新的搜索结果...", + "description": "The paragraph for fetching new search results" + }, + "theme.SearchBar.label": { + "message": "搜索", + "description": "The ARIA label and placeholder for search button" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "清除查询", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "取消", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "Search docs", + "description": "The placeholder text for the main search input field" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "Ask another question...", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "Answering...", + "description": "The placeholder text for search box when AI is streaming an answer" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "search", + "description": "The hint for the search box enter key text" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "enter", + "description": "The hint for the Ask AI search box enter key text" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "Search", + "description": "The ARIA label for search input" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "Back to keyword search", + "description": "The text for back to keyword search button" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "Back to keyword search", + "description": "The ARIA label for back to keyword search button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "最近搜索", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "没有最近搜索", + "description": "The text when there are no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "保存这个搜索", + "description": "The title for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "从历史记录中删除这个搜索", + "description": "The title for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "收藏", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "从收藏列表中删除这个搜索", + "description": "The title for remove favorite search button" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "Recent conversations", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "Remove this conversation from history", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "无法获取结果", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "你可能需要检查网络连接。", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "Ask AI: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "Answers are generated with AI which can make mistakes. Verify responses.", + "description": "The disclaimer text for AI answers" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "Related sources", + "description": "The text for related sources" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "Thinking...", + "description": "The text when AI is thinking" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "Copy", + "description": "The text for copy button" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "Copied!", + "description": "The text for copy button when copied" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "Copy", + "description": "The title for copy button" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "Like", + "description": "The title for like button" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "Dislike", + "description": "The title for dislike button" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "Thanks for your feedback!", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "Searching...", + "description": "The text before tool call" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "Searching for ", + "description": "The text during tool call" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "Searched for", + "description": "The text after tool call" + }, + "theme.SearchModal.footer.selectText": { + "message": "选中", + "description": "The select text for footer" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "Submit question", + "description": "The submit question text for footer" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "Enter 键", + "description": "The ARIA label for select key in footer" + }, + "theme.SearchModal.footer.navigateText": { + "message": "导航", + "description": "The navigate text for footer" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "向上键", + "description": "The ARIA label for navigate up key in footer" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "向下键", + "description": "The ARIA label for navigate down key in footer" + }, + "theme.SearchModal.footer.closeText": { + "message": "关闭", + "description": "The close text for footer" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Esc 键", + "description": "The ARIA label for close key in footer" + }, + "theme.SearchModal.footer.searchByText": { + "message": "搜索提供", + "description": "The 'Powered by' text for footer" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "Back to search", + "description": "The back to search text for footer" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "没有结果：", + "description": "The text when there are no results" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "试试搜索", + "description": "The text for suggested query" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "认为这个查询应该有结果？", + "description": "The text for reporting missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "请告知我们。", + "description": "The link text for reporting missing results" + }, + "theme.SearchModal.placeholder": { + "message": "搜索文档", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "theme.blog.post.plurals": { + "message": "{count} 篇博文", + "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.blog.tagTitle": { + "message": "{nPosts} 含有标签「{tagName}」", + "description": "The title of the page for a blog tag" + }, + "theme.blog.author.pageTitle": { + "message": "{authorName} - {nPosts}", + "description": "The title of the page for a blog author" + }, + "theme.blog.authorsList.pageTitle": { + "message": "作者", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "查看所有作者", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "该作者尚未撰写任何文章。", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "未列出页", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "此页面未列出。搜索引擎不会对其索引，只有拥有直接链接的用户才能访问。", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "草稿页", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "此页面是草稿，仅在开发环境中可见，不会包含在正式版本中。", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "重试", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "跳到主要内容", + "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" + }, + "theme.tags.tagsPageTitle": { + "message": "标签", + "description": "The title of the tag list page" + } +} diff --git a/i18n/zh/docusaurus-plugin-content-blog/options.json b/i18n/zh/docusaurus-plugin-content-blog/options.json new file mode 100644 index 000000000..9239ff706 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current.json b/i18n/zh/docusaurus-plugin-content-docs/current.json new file mode 100644 index 000000000..6db8ff5af --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,262 @@ +{ + "version.label": { + "message": "Next", + "description": "The label for version current" + }, + "sidebar.docs.category.What's new and migration": { + "message": "What's new and migration", + "description": "The label for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.What's new and migration.link.generated-index.title": { + "message": "What's new and migration", + "description": "The generated-index page title for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.API": { + "message": "API", + "description": "The label for category 'API' in sidebar 'docs'" + }, + "sidebar.docs.category.API.link.generated-index.title": { + "message": "API", + "description": "The generated-index page title for category 'API' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram API": { + "message": "Diagram API", + "description": "The label for category 'Diagram API' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram methods": { + "message": "Diagram methods", + "description": "The label for category 'Diagram methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram events": { + "message": "Diagram events", + "description": "The label for category 'Diagram events' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram properties": { + "message": "Diagram properties", + "description": "The label for category 'Diagram properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram Editor API": { + "message": "Diagram Editor API", + "description": "The label for category 'Diagram Editor API' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram Editor API.link.generated-index.title": { + "message": "Diagram Editor API", + "description": "The generated-index page title for category 'Diagram Editor API' in sidebar 'docs'" + }, + "sidebar.docs.category.Editor API": { + "message": "Editor API", + "description": "The label for category 'Editor API' in sidebar 'docs'" + }, + "sidebar.docs.category.Editor methods": { + "message": "Editor methods", + "description": "The label for category 'Editor methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Editor events": { + "message": "Editor events", + "description": "The label for category 'Editor events' in sidebar 'docs'" + }, + "sidebar.docs.category.Editor properties": { + "message": "Editor properties", + "description": "The label for category 'Editor properties' in sidebar 'docs'" + }, + "sidebar.docs.category.History manager API": { + "message": "History manager API", + "description": "The label for category 'History manager API' in sidebar 'docs'" + }, + "sidebar.docs.category.History manager methods": { + "message": "History manager methods", + "description": "The label for category 'History manager methods' in sidebar 'docs'" + }, + "sidebar.docs.category.History manager properties": { + "message": "History manager properties", + "description": "The label for category 'History manager properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Copy manager API": { + "message": "Copy manager API", + "description": "The label for category 'Copy manager API' in sidebar 'docs'" + }, + "sidebar.docs.category.Copy manager methods": { + "message": "Copy manager methods", + "description": "The label for category 'Copy manager methods' in sidebar 'docs'" + }, + "sidebar.docs.category.View API": { + "message": "View API", + "description": "The label for category 'View API' in sidebar 'docs'" + }, + "sidebar.docs.category.View methods": { + "message": "View methods", + "description": "The label for category 'View methods' in sidebar 'docs'" + }, + "sidebar.docs.category.View events": { + "message": "View events", + "description": "The label for category 'View events' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar API": { + "message": "Toolbar API", + "description": "The label for category 'Toolbar API' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar methods": { + "message": "Toolbar methods", + "description": "The label for category 'Toolbar methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar properties": { + "message": "Toolbar properties", + "description": "The label for category 'Toolbar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar properties.link.generated-index.title": { + "message": "Toolbar properties", + "description": "The generated-index page title for category 'Toolbar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Toolbar events": { + "message": "Toolbar events", + "description": "The label for category 'Toolbar events' in sidebar 'docs'" + }, + "sidebar.docs.category.Editbar API": { + "message": "Editbar API", + "description": "The label for category 'Editbar API' in sidebar 'docs'" + }, + "sidebar.docs.category.Editbar properties": { + "message": "Editbar properties", + "description": "The label for category 'Editbar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Editbar properties.link.generated-index.title": { + "message": "Editbar properties", + "description": "The generated-index page title for category 'Editbar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Basic controls": { + "message": "Basic controls", + "description": "The label for category 'Basic controls' in sidebar 'docs'" + }, + "sidebar.docs.category.Complex controls": { + "message": "Complex controls", + "description": "The label for category 'Complex controls' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapebar API": { + "message": "Shapebar API", + "description": "The label for category 'Shapebar API' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapebar properties": { + "message": "Shapebar properties", + "description": "The label for category 'Shapebar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapebar properties.link.generated-index.title": { + "message": "Shapebar properties", + "description": "The generated-index page title for category 'Shapebar properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Items API": { + "message": "Items API", + "description": "The label for category 'Items API' in sidebar 'docs'" + }, + "sidebar.docs.category.Items API.link.generated-index.title": { + "message": "Items API", + "description": "The generated-index page title for category 'Items API' in sidebar 'docs'" + }, + "sidebar.docs.category.Common API": { + "message": "Common API", + "description": "The label for category 'Common API' in sidebar 'docs'" + }, + "sidebar.docs.category.Common API.link.generated-index.title": { + "message": "Common API", + "description": "The generated-index page title for category 'Common API' in sidebar 'docs'" + }, + "sidebar.docs.category.CellManager API": { + "message": "CellManager API", + "description": "The label for category 'CellManager API' in sidebar 'docs'" + }, + "sidebar.docs.category.CellManager methods": { + "message": "CellManager methods", + "description": "The label for category 'CellManager methods' in sidebar 'docs'" + }, + "sidebar.docs.category.CellManager events": { + "message": "CellManager events", + "description": "The label for category 'CellManager events' in sidebar 'docs'" + }, + "sidebar.docs.category.DataCollection API": { + "message": "DataCollection API", + "description": "The label for category 'DataCollection API' in sidebar 'docs'" + }, + "sidebar.docs.category.DataCollection methods": { + "message": "DataCollection methods", + "description": "The label for category 'DataCollection methods' in sidebar 'docs'" + }, + "sidebar.docs.category.DataCollection events": { + "message": "DataCollection events", + "description": "The label for category 'DataCollection events' in sidebar 'docs'" + }, + "sidebar.docs.category.Export methods": { + "message": "Export methods", + "description": "The label for category 'Export methods' in sidebar 'docs'" + }, + "sidebar.docs.category.InlineEditor events": { + "message": "InlineEditor events", + "description": "The label for category 'InlineEditor events' in sidebar 'docs'" + }, + "sidebar.docs.category.Selection API": { + "message": "Selection API", + "description": "The label for category 'Selection API' in sidebar 'docs'" + }, + "sidebar.docs.category.Selection methods": { + "message": "Selection methods", + "description": "The label for category 'Selection methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Selection events": { + "message": "Selection events", + "description": "The label for category 'Selection events' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides": { + "message": "Guides", + "description": "The label for category 'Guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram": { + "message": "Diagram", + "description": "The label for category 'Diagram' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram.link.generated-index.title": { + "message": "Diagram", + "description": "The generated-index page title for category 'Diagram' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram items": { + "message": "Diagram items", + "description": "The label for category 'Diagram items' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapes": { + "message": "Shapes", + "description": "The label for category 'Shapes' in sidebar 'docs'" + }, + "sidebar.docs.category.Shapes.link.generated-index.title": { + "message": "Shapes", + "description": "The generated-index page title for category 'Shapes' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram Editor": { + "message": "Diagram Editor", + "description": "The label for category 'Diagram Editor' in sidebar 'docs'" + }, + "sidebar.docs.category.Diagram Editor.link.generated-index.title": { + "message": "Diagram editor", + "description": "The generated-index page title for category 'Diagram Editor' in sidebar 'docs'" + }, + "sidebar.docs.category.Themes": { + "message": "Themes", + "description": "The label for category 'Themes' in sidebar 'docs'" + }, + "sidebar.docs.category.Themes.link.generated-index.title": { + "message": "Themes", + "description": "The generated-index page title for category 'Themes' in sidebar 'docs'" + }, + "sidebar.docs.category.Integrations": { + "message": "Integrations", + "description": "The label for category 'Integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.Integrations.link.generated-index.title": { + "message": "Integrations", + "description": "The generated-index page title for category 'Integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.AI Integrations": { + "message": "AI Integrations", + "description": "The label for category 'AI Integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.AI Integrations.link.generated-index.title": { + "message": "AI Integrations", + "description": "The generated-index page title for category 'AI Integrations' in sidebar 'docs'" + } +} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/.sync b/i18n/zh/docusaurus-plugin-content-docs/current/.sync new file mode 100644 index 000000000..310660cf2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +92695f8ea3eeca4963dc78a6ff38bd5ddc1178e2 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/add_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/add_method.md new file mode 100644 index 000000000..9e78a8db6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/add_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: add() +title: Cell Manager 的 add 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 add 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# add() + +:::info +`add()` 方法会由系统自动进行验证。如果根据 swimlane 的结构判断无法添加，则不会添加该单元格。 +::: + +### 描述 {#description} + +@short: 将单元格作为行或列添加到 swimlane 中 + +### 用法 {#usage} + +~~~jsx +add( + cellIndex: number, + dir: string // "up" | "down" | "left" | "right" +): void; +~~~ + +### 参数 {#parameters} + +- `cellIndex` - （必需）单元格在布局中的起始索引。索引计数从 0 开始 +- `dir` - （必需）操作的方向：`"up"` | `"down"` | `"left"` | `"right"` + +### 示例 {#example} + +~~~jsx +// 初始化 diagram +const diagram = new dhx.Diagram("diagram_container", { + // 配置选项 +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // 设置激活的 swimlane + +diagram.cellManager.add(0, "down"); // 将单元格作为行添加 +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsadd_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsadd_event.md new file mode 100644 index 000000000..6d6414c27 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsadd_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: afterCellsAdd +title: Cell Manager 的 afterCellsAdd 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 afterCellsAdd 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# afterCellsAdd + +### 描述 {#description} + +@short: 在向 swimlane 添加新单元格后触发 + +### 用法 {#usage} + +~~~jsx +afterCellsAdd: (swimlaneId: string | number) => void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `swimlaneId` - （必需）该项目的 id + +### 示例 {#example} + +~~~jsx {9-11} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("afterCellsAdd", (swimlaneId) => { + console.log(swimlaneId); +}); +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsmove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsmove_event.md new file mode 100644 index 000000000..afe97ca7a --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsmove_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: afterCellsMove +title: Cell Manager 的 afterCellsMove 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 afterCellsMove 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# afterCellsMove + +### 描述 {#description} + +@short: 在 swimlane 的单元格被移动后触发 + +### 用法 {#usage} + +~~~jsx +afterCellsMove: (swimlaneId: string | number) => void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `swimlaneId` - （必需）该项目的 id + +### 示例 {#example} + +~~~jsx {9-11} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("afterCellsMove", (swimlaneId) => { + console.log(swimlaneId); +}); +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsremove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsremove_event.md new file mode 100644 index 000000000..b4bbc008c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsremove_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: afterCellsRemove +title: Cell Manager 的 afterCellsRemove 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 afterCellsRemove 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# afterCellsRemove + +### 描述 {#description} + +@short: 在 swimlane 的单元格被移除后触发 + +### 用法 {#usage} + +~~~jsx +afterCellsRemove: (swimlaneId: string | number) => void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `swimlaneId` - （必需）该项目的 id + +### 示例 {#example} + +~~~jsx {9-11} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("afterCellsRemove", (swimlaneId) => { + console.log(swimlaneId); +}); +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsvalidation_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsvalidation_event.md new file mode 100644 index 000000000..fbc386ace --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/aftercellsvalidation_event.md @@ -0,0 +1,49 @@ +--- +sidebar_label: afterCellsValidation +title: Cell Manager 的 afterCellsValidation 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 afterCellsValidation 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# afterCellsValidation + +### 描述 {#description} + +@short: 在 swimlane 的单元格完成验证后触发 + +### 用法 {#usage} + +~~~jsx +afterCellsValidation: ( + swimlaneId: string | number, + validate: boolean, + action: "move" | "remove" | "add" +) => void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `swimlaneId` - （必需）该项目的 id +- `validate` - （必需）是否通过验证 +- `action` - （必需）操作的类型 + +### 示例 {#example} + +~~~jsx {9-11} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("afterCellsValidation", (swimlaneId, validate, action) => { + console.log(swimlaneId, validate, action); +}); +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsadd_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsadd_event.md new file mode 100644 index 000000000..0fae0bbea --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsadd_event.md @@ -0,0 +1,48 @@ +--- +sidebar_label: beforeCellsAdd +title: Cell Manager 的 beforeCellsAdd 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 beforeCellsAdd 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# beforeCellsAdd + +### 描述 {#description} + +@short: 在向 swimlane 添加新单元格之前触发 + +### 用法 {#usage} + +~~~jsx +beforeCellsAdd: (swimlaneId: string | number) => boolean | void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `swimlaneId` - （必需）该元素的 id + +### 返回值 {#returns} + +返回 `false` 以阻止添加新的单元格，否则返回 `true` + +### 示例 {#example} + +~~~jsx {9-12} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("beforeCellsAdd", (swimlaneId) => { + console.log(swimlaneId); + return true; +}); +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsmove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsmove_event.md new file mode 100644 index 000000000..2c81331f8 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsmove_event.md @@ -0,0 +1,48 @@ +--- +sidebar_label: beforeCellsMove +title: Cell Manager 的 beforeCellsMove 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 beforeCellsMove 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# beforeCellsMove + +### 描述 {#description} + +@short: 在 swimlane 的单元格被移动之前触发 + +### 用法 {#usage} + +~~~jsx +beforeCellsMove: (swimlaneId: string | number) => boolean | void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `swimlaneId` - （必需）该元素的 id + +### 返回值 {#returns} + +返回 `false` 以阻止移动单元格，否则返回 `true` + +### 示例 {#example} + +~~~jsx {9-12} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("beforeCellsMove", (swimlaneId) => { + console.log(swimlaneId); + return true; +}); +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsremove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsremove_event.md new file mode 100644 index 000000000..db7443378 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsremove_event.md @@ -0,0 +1,48 @@ +--- +sidebar_label: beforeCellsRemove +title: Cell Manager 的 beforeCellsRemove 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 beforeCellsRemove 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# beforeCellsRemove + +### 描述 {#description} + +@short: 在 swimlane 的单元格被删除之前触发 + +### 用法 {#usage} + +~~~jsx +beforeCellsRemove: (swimlaneId: string | number) => boolean | void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `swimlaneId` - （必需）该元素的 id + +### 返回值 {#returns} + +返回 `false` 以阻止删除单元格，否则返回 `true` + +### 示例 {#example} + +~~~jsx {9-12} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("beforeCellsRemove", (swimlaneId) => { + console.log(swimlaneId); + return true; +}); +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsvalidation_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsvalidation_event.md new file mode 100644 index 000000000..8e22868b0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/beforecellsvalidation_event.md @@ -0,0 +1,52 @@ +--- +sidebar_label: beforeCellsValidation +title: Cell Manager 的 beforeCellsValidation 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 beforeCellsValidation 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# beforeCellsValidation + +### 描述 {#description} + +@short: 在 swimlane 的单元格被验证之前触发 + +### 用法 {#usage} + +~~~jsx +beforeCellsValidation: ( + swimlaneId: string | number, + action: "move" | "remove" | "add" +) => boolean | void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `swimlaneId` - （必需）该元素的 id +- `action` - （必需）操作的类型 + +### 返回值 {#returns} + +返回 `false` 以阻止验证新的单元格，否则返回 `true` + +### 示例 {#example} + +~~~jsx {9-12} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("beforeCellsValidation", (swimlaneId, action) => { + console.log(swimlaneId, action); + return true; +}); +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getcellid_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getcellid_method.md new file mode 100644 index 000000000..adfc576a0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getcellid_method.md @@ -0,0 +1,49 @@ +--- +sidebar_label: getCellId() +title: Cell Manager 的 getCellId 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 getCellId 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# getCellId() + +### 描述 {#description} + +@short: 按索引返回 swimlane 中单元格的 id + +### 用法 {#usage} + +~~~jsx +getCellId( + cellIndex: number, + type: string // "row" | "col" +): string | number | undefined; +~~~ + +### 参数 {#parameters} + +- `cellIndex` - （必需）单元格在布局中的起始索引。索引计数从 0 开始 +- `type` - （必需）用于计数索引的方向类型：`"row"` | `"col"` + +### 返回值 {#returns} + +该方法返回单元格的 id + +### 示例 {#example} + +~~~jsx +// 初始化 diagram +const diagram = new dhx.Diagram("diagram_container", { + // 配置选项 +}); +diagram.data.parse(data); + +// 设置活动 swimlane +diagram.cellManager.setSwimlane("main"); + +// 获取单元格的 id +diagram.cellManager.getCellId(0, "row"); // -> "r01" +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getcellindex_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getcellindex_method.md new file mode 100644 index 000000000..42d9e7df0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getcellindex_method.md @@ -0,0 +1,49 @@ +--- +sidebar_label: getCellIndex() +title: Cell Manager 的 getCellIndex 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 getCellIndex 方法。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# getCellIndex() + +### 描述 {#description} + +@short: 根据 id 返回 swimlane 中单元格的索引 + +### 用法 {#usage} + +~~~jsx +getCellIndex( + cellId: string | number, + type: string // "row" | "col" +): number | undefined; +~~~ + +### 参数 {#parameters} + +- `cellId` - （必需）单元格的 id +- `type` - （必需）计算索引的方向类型：`"row"` | `"col"` + +### 返回值 {#returns} + +该方法返回单元格的索引。索引计数从 0 开始。 + +### 示例 {#example} + +~~~jsx +// 初始化图表 +const diagram = new dhx.Diagram("diagram_container", { + // 配置选项 +}); +diagram.data.parse(data); + +// 设置活动 swimlane +diagram.cellManager.setSwimlane("main"); + +// 获取单元格的索引 +diagram.cellManager.getCellIndex("r01", "row"); // -> 0 +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellid_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellid_method.md new file mode 100644 index 000000000..c22c050c4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellid_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: getSubHeaderCellId() +title: Cell Manager 的 getSubHeaderCellId 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 getSubHeaderCellId 方法。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# getSubHeaderCellId() + +### 描述 {#description} + +@short: 根据子表头的 id 返回 swimlane 中单元格的 id + +### 用法 {#usage} + +~~~jsx +getSubHeaderCellId(subheaderId: string): string | number; +~~~ + +### 参数 {#parameters} + +- `subheaderId` - （必需）swimlane 子表头的 id + +### 返回值 {#returns} + +该方法返回单元格的 id + +### 示例 {#example} + +~~~jsx +// 初始化图表 +const diagram = new dhx.Diagram("diagram_container", { + // 配置选项 +}); +diagram.data.parse(data); + +// 设置活动 swimlane +diagram.cellManager.setSwimlane("main"); + +// 获取单元格的 id +diagram.cellManager.getSubHeaderCellId("sub01"); // -> "r01" +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellindex_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellindex_method.md new file mode 100644 index 000000000..39427af98 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadercellindex_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: getSubHeaderCellIndex() +title: Cell Manager 的 getSubHeaderCellIndex 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 getSubHeaderCellIndex 方法。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# getSubHeaderCellIndex() + +### 描述 {#description} + +@short: 根据子表头的 id 返回 swimlane 中单元格的索引 + +### 用法 {#usage} + +~~~jsx +getSubHeaderCellIndex(subheaderId: string): number; +~~~ + +### 参数 {#parameters} + +- `subheaderId` - （必需）swimlane 子表头的 id + +### 返回值 {#returns} + +该方法返回单元格的索引。索引计数从 0 开始。 + +### 示例 {#example} + +~~~jsx +// 初始化图表 +const diagram = new dhx.Diagram("diagram_container", { + // 配置选项 +}); +diagram.data.parse(data); + +// 设置活动 swimlane +diagram.cellManager.setSwimlane("main"); + +// 获取单元格的索引 +diagram.cellManager.getSubHeaderCellIndex("sub01"); // -> 0 +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadertype_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadertype_method.md new file mode 100644 index 000000000..1ea2a619c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/getsubheadertype_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: getSubHeaderType() +title: Cell Manager 的 getSubHeaderType 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 getSubHeaderType 方法。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# getSubHeaderType() + +### 描述 {#description} + +@short: 根据 id 返回 swimlane 子表头的类型 + +### 用法 {#usage} + +~~~jsx +getSubHeaderType(subheaderId: string): "row" | "col" | undefined; +~~~ + +### 参数 {#parameters} + +- `subheaderId` - （必需）swimlane 子表头的 id + +### 返回值 {#returns} + +该方法返回 swimlane 子表头的类型：`"row"` | `"col"` | undefined + +### 示例 {#example} + +~~~jsx +// 初始化图表 +const diagram = new dhx.Diagram("diagram_container", { + // 配置选项 +}); +diagram.data.parse(data); + +// 设置活动 swimlane +diagram.cellManager.setSwimlane("main"); + +// 获取方向类型 +diagram.cellManager.getSubHeaderType("sub01"); // -> "row" +~~~ + +**更新日志**：v4.0 中新增 + +**相关文章**：[配置 Swimlanes](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/index.md new file mode 100644 index 000000000..08afaa5c5 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/index.md @@ -0,0 +1,38 @@ +--- +sidebar_label: 概述 +title: CellManager 概述 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中查看 CellManager 的概述。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# CellManager 概述 + +DHTMLX Diagram 库为您提供了一组 API，用于动态操作 [swimlane 及其单元格](/swimlanes/)。该 API 既可以在 diagram 中使用，也可以在编辑器中使用。 + +## 方法 {#methods} + +| 名称 | 描述 | +| :--------------------------------------------------- | :---------------------------------------------------------- | +| [](api/cell_manager/add_method.md) | @getshort(api/cell_manager/add_method.md) | +| [](api/cell_manager/getcellid_method.md) | @getshort(api/cell_manager/getcellid_method.md) | +| [](api/cell_manager/getcellindex_method.md) | @getshort(api/cell_manager/getcellindex_method.md) | +| [](api/cell_manager/getsubheadercellid_method.md) | @getshort(api/cell_manager/getsubheadercellid_method.md) | +| [](api/cell_manager/getsubheadercellindex_method.md) | @getshort(api/cell_manager/getsubheadercellindex_method.md) | +| [](api/cell_manager/getsubheadertype_method.md) | @getshort(api/cell_manager/getsubheadertype_method.md) | +| [](api/cell_manager/move_method.md) | @getshort(api/cell_manager/move_method.md) | +| [](api/cell_manager/remove_method.md) | @getshort(api/cell_manager/remove_method.md) | +| [](api/cell_manager/resetswimlane_method.md) | @getshort(api/cell_manager/resetswimlane_method.md) | +| [](api/cell_manager/setswimlane_method.md) | @getshort(api/cell_manager/setswimlane_method.md) | +| [](api/cell_manager/validation_method.md) | @getshort(api/cell_manager/validation_method.md) | + +## Events {#events} + +| 名称 | 描述 | +| :-------------------------------------------------- | :--------------------------------------------------------- | +| [](api/cell_manager/aftercellsadd_event.md) | @getshort(api/cell_manager/aftercellsadd_event.md) | +| [](api/cell_manager/aftercellsmove_event.md) | @getshort(api/cell_manager/aftercellsmove_event.md) | +| [](api/cell_manager/aftercellsremove_event.md) | @getshort(api/cell_manager/aftercellsremove_event.md) | +| [](api/cell_manager/aftercellsvalidation_event.md) | @getshort(api/cell_manager/aftercellsvalidation_event.md) | +| [](api/cell_manager/beforecellsadd_event.md) | @getshort(api/cell_manager/beforecellsadd_event.md) | +| [](api/cell_manager/beforecellsmove_event.md) | @getshort(api/cell_manager/beforecellsmove_event.md) | +| [](api/cell_manager/beforecellsremove_event.md) | @getshort(api/cell_manager/beforecellsremove_event.md) | +| [](api/cell_manager/beforecellsvalidation_event.md) | @getshort(api/cell_manager/beforecellsvalidation_event.md) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/move_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/move_method.md new file mode 100644 index 000000000..5976409d4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/move_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: move() +title: move Method of Cell Manager +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 move 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# move() + +:::info +系统会自动验证 `move()` 方法。如果根据 swimlane 的结构判断无法移动，该单元格将不会被移动。 +::: + +### 描述 {#description} + +@short: 将 swimlane 的单元格作为行或列移动 + +### 用法 {#usage} + +~~~jsx +move( + cellIndex: number, + dir: string // "up" | "down" | "left" | "right" +): void; +~~~ + +### 参数 {#parameters} + +- `cellIndex` - （必需）单元格在布局中的起始索引。索引计数从 0 开始 +- `dir` - （必需）操作的方向：`"up"` | `"down"` | `"left"` | `"right"` + +### 示例 {#example} + +~~~jsx +// 初始化 diagram +const diagram = new dhx.Diagram("diagram_container", { + // 配置选项 +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // 设置活动 swimlane + +diagram.cellManager.move(0, "down"); // 将单元格作为行移动 +~~~ + +**更新日志：** v4.0 中新增 + +**相关文章：** [配置 Swimlane](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/remove_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/remove_method.md new file mode 100644 index 000000000..e712c3426 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/remove_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: remove() +title: remove Method of Cell Manager +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 remove 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# remove() + +:::info +系统会自动验证 `remove()` 方法。如果根据 swimlane 的结构判断无法移除，该单元格将不会被移除。 +::: + +### 描述 {#description} + +@short: 将 swimlane 的单元格作为行或列移除 + +### 用法 {#usage} + +~~~jsx +remove( + cellIndex: number, + type: string // "row" | "col" +): void; +~~~ + +### 参数 {#parameters} + +- `cellIndex` - （必需）单元格在布局中的起始索引。索引计数从 0 开始 +- `type` - （必需）用于计算索引的方向类型 + +### 示例 {#example} + +~~~jsx +// 初始化 diagram +const diagram = new dhx.Diagram("diagram_container", { + // 配置选项 +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // 设置活动 swimlane + +diagram.cellManager.remove(0, "row"); // 将单元格作为行移除 +~~~ + +**更新日志：** v4.0 中新增 + +**相关文章：** [配置 Swimlane](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/resetswimlane_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/resetswimlane_method.md new file mode 100644 index 000000000..f25aa7fdc --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/resetswimlane_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: resetSwimlane() +title: resetSwimlane Method of Cell Manager +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 resetSwimlane 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# resetSwimlane() + +### 描述 {#description} + +@short: 重置活动 swimlane + +### 用法 {#usage} + +~~~jsx +resetSwimlane(): void; +~~~ + +### 示例 {#example} + +~~~jsx +// 初始化 diagram +const diagram = new dhx.Diagram("diagram_container", { + // 配置选项 +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // 设置活动 swimlane + +// 您对 swimlane 的操作 + +diagram.cellManager.resetSwimlane(); // 重置活动 swimlane +~~~ + +**更新日志：** v4.0 中新增 + +**相关文章：** [配置 Swimlane](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/setswimlane_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/setswimlane_method.md new file mode 100644 index 000000000..2ebb30cca --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/setswimlane_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: setSwimlane() +title: setSwimlane Method of Cell Manager +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 setSwimlane 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# setSwimlane() + +### 描述 {#description} + +@short: 设置活动 swimlane，以便后续对其进行操作 + +### 用法 {#usage} + +~~~jsx +setSwimlane(id: string | number): boolean; +~~~ + +### 参数 {#parameters} + +- `id` - （必需）swimlane 的 id + +### 返回值 {#returns} + +如果设置了 swimlane，该方法将返回 `true`，否则返回 `false`。 + +### 示例 {#example} + +~~~jsx +// 初始化 diagram +const diagram = new dhx.Diagram("diagram_container", { + // 配置选项 +}); +diagram.data.parse(data); + +diagram.cellManager.setSwimlane("main"); // 设置活动 swimlane +~~~ + +**更新日志：** v4.0 中新增 + +**相关文章：** [配置 Swimlane](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/validation_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/validation_method.md new file mode 100644 index 000000000..10b02ad1e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/cell_manager/validation_method.md @@ -0,0 +1,51 @@ +--- +sidebar_label: validation() +title: validation Method of Cell Manager +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Cell Manager 的 validation 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# validation() + +### 描述 {#description} + +@short: 根据方向和操作类型验证 swimlane 的单元格 + +### 用法 {#usage} + +~~~jsx +validation( + cellIndex: number, + dir: string, // "up" | "down" | "left" | "right" + action: string // "move" | "remove" | "add" +): boolean; +~~~ + +### 参数 {#parameters} + +- `cellIndex` - （必需）单元格在布局中的起始索引。索引计数从 0 开始 +- `dir` - （必需）操作的方向：`"up"` | `"down"` | `"left"` | `"right"` +- `action` - （必需）操作的类型：`"move"` | `"remove"` | `"add"` + +### 返回值 {#returns} + +如果单元格验证通过，该方法将返回 `true`，否则返回 `false` + +### 示例 {#example} + +~~~jsx +// 初始化 diagram +const diagram = new dhx.Diagram("diagram_container", { + // 配置选项 +}); +diagram.data.parse(data); + +// 设置活动 swimlane +diagram.cellManager.setSwimlane("main"); + +// 验证索引为 0 的单元格是否可以下移 +diagram.cellManager.validation(0, "down", "move"); // -> true +~~~ + +**更新日志：** v4.0 中新增 + +**相关文章：** [配置 Swimlane](/swimlanes/) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/add_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/add_method.md new file mode 100644 index 000000000..c0695f5f4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/add_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: add() +title: Data Collection 的 add 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 add 方法。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# add() + +### 描述 {#description} + +@short: 向 Diagram 中添加一个新项目 + +### 用法 {#usage} + +~~~jsx +add(new_item: object | array): string | number | array; +~~~ + +### 参数 {#parameters} + +- `new_item` - （必需）新项目的对象，或多个项目对象组成的数组 + +### 返回值 {#returns} + +该方法返回项目的 id，或由多个项目 id 组成的数组。 + +### 示例 {#example} + +共有两种连接形状的方法。您可以添加一个已定义父 ID 的形状： + +~~~jsx {2,6} +const diagram = new dhx.Diagram("diagram_container", { + type: "org" +}); +diagram.data.parse(data); + +diagram.data.add({ id: "3.2", text: "New Item", type: "card", parent: "3" }); +~~~ + +或者，您也可以同时添加一个形状对象和一个连接线对象： + +~~~jsx {2,6-7} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.add({ type: "card", id: "3.2", text: "New Item" }); +diagram.data.add({ type: "line", from: "3", to: "3.2" }); +~~~ + +**相关文章：** [添加项目](guides/manipulating_items.md#adding-an-item) + +**相关示例：** [Diagram. Data. 添加/删除项目](https://snippet.dhtmlx.com/8wi20uop) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/afteradd_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/afteradd_event.md new file mode 100644 index 000000000..0efbc6c65 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/afteradd_event.md @@ -0,0 +1,41 @@ +--- +sidebar_label: afterAdd +title: Data Collection 的 afterAdd 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 afterAdd 事件。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# afterAdd + +### 描述 {#description} + +@short: 在添加项目后触发 + +### 用法 {#usage} + +~~~jsx +afterAdd: (newItem: object) => void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `newItem` - （必需）已添加项目的对象 + +### 示例 {#example} + +~~~jsx {9-11} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("afterAdd", (newItem) => { + console.log("A new item is added"); +}); +~~~ + +该事件可用于为项目数据提供默认值或默认格式。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/afterremove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/afterremove_event.md new file mode 100644 index 000000000..07c3b9df8 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/afterremove_event.md @@ -0,0 +1,39 @@ +--- +sidebar_label: afterRemove +title: Data Collection 的 afterRemove 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 afterRemove 事件。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# afterRemove + +### 描述 {#description} + +@short: 在从 Data Collection 中移除项目后触发 + +### 用法 {#usage} + +~~~jsx +afterRemove: (removedItem: object) => void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `removedItem` - （必需）已移除项目的对象 + +### 示例 {#example} + +~~~jsx {9-11} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("afterRemove", (newItem) => { + console.log("afterRemove "+ item); +}); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/beforeadd_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/beforeadd_event.md new file mode 100644 index 000000000..0e832c0a0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/beforeadd_event.md @@ -0,0 +1,45 @@ +--- +sidebar_label: beforeAdd +title: Data Collection 的 beforeAdd 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 beforeAdd 事件。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# beforeAdd + +### 描述 {#description} + +@short: 在添加项目之前触发 + +### 用法 {#usage} + +~~~jsx +beforeAdd: (newItem: object) => boolean | void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `newItem` - （必需）已添加项目的对象 + +### 返回值 {#returns} + +返回 `false` 以阻止将项目添加到 Data Collection 中；否则返回 `true`。 + +### 示例 {#example} + +~~~jsx {9-13} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("beforeAdd", (newItem) => { + if (some_check) + return false; + return true; +}); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/beforeremove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/beforeremove_event.md new file mode 100644 index 000000000..0c3bad24e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/beforeremove_event.md @@ -0,0 +1,44 @@ +--- +sidebar_label: beforeRemove +title: Data Collection 的 beforeRemove 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 beforeRemove 事件。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# beforeRemove + +### 描述 {#description} + +@short: 在从 Data Collection 中移除项目后触发 + +### 用法 {#usage} + +~~~jsx +beforeRemove: (removedItem: any) => boolean | void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `removedItem` - （必需）待移除项目的对象 + +### 返回值 {#returns} + +返回 `false` 以阻止从 Data Collection 中移除项目；否则返回 `true`。 + +### 示例 {#example} + +~~~jsx {9-12} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("beforeRemove", (newItem) => { + console.log("beforeRemove "+ item); + return true; +}); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/change_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/change_event.md new file mode 100644 index 000000000..4d08b2ad3 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/change_event.md @@ -0,0 +1,49 @@ +--- +sidebar_label: change +title: Data Collection 的 change 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中，了解 Data Collection 的 change 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# change + +### 描述 {#description} + +@short: 在 diagram 的数据集发生更改时触发 + +### 用法 {#usage} + +~~~jsx +change: ( + id?: string, + status?: "add" | "update" | "delete" | "load" + updatedItem?: object +) => void; +~~~ + +### 参数 {#parameters} + +该事件的回调函数接受以下参数： + +- `id` - （可选）已更改项目的 id +- `status` - （可选）更改的状态：`"add"`、`"update"`、`"delete"`、`"load"` +- `updatedItem` - （可选）已更改项目的对象 + +:::info +在某些情况下，处理函数不会接收任何参数，例如，将数据集解析到 diagram 中且所有图形都被移除时 +::: + +### 示例 {#example} + +~~~jsx {9-11} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件附加处理函数 +diagram.events.on("change", function (id, status, shape) { + console.log("The " + id + " has been " + status); +}); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/copy_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/copy_method.md new file mode 100644 index 000000000..739b28237 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/copy_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: copy() +title: Data Collection 的 copy 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中，了解 Data Collection 的 copy 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# copy() + +### 描述 {#description} + +@short: 在指定位置创建项目的副本 + +### 用法 {#usage} + +~~~jsx +copy( + id: string | number | array, + index: number, + target?: object +): string | number | array; +~~~ + +### 参数 {#parameters} + +- `id` - （必需）要复制的项目的 id +- `index` - （必需）创建副本的索引位置 +- `target` - （可选）目标 Data Collection 对象 + +### 返回值 {#returns} + +该方法返回项目的 id，或包含多个项目 id 的数组 + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.copy("4",5); // 将 id 为 4 的图形复制到索引为 5 的位置 +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/eachchild_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/eachchild_method.md new file mode 100644 index 000000000..996b5a87b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/eachchild_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: eachChild() +title: Data Collection 的 eachChild 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中，了解 Data Collection 的 eachChild 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# eachChild() + +### 描述 {#description} + +@short: 遍历指定项目的子项 + +### 用法 {#usage} + +~~~jsx +eachChild( + id: string | number, + callback: function, + isTree?: boolean +): void; +~~~ + +### 参数 {#parameters} + +- `id` - （必需）项目的 id +- `callback` - （必需）应用于项目每个子项的回调函数 +- `isTree` - （可选）定义该函数是否应遍历指定项目的所有子项（任意层级）。若为 *false*，函数将仅遍历项目的第一层子项；默认值为 *true*。 + +### 示例 {#example} + +~~~jsx {6-8} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.eachChild("id_1", (item) => { + console.log(item); +}, true); +~~~ + +**更新日志**：v4.0 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/eachparent_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/eachparent_method.md new file mode 100644 index 000000000..1e5e7d64d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/eachparent_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: eachParent() +title: Data Collection 的 eachParent 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中，了解 Data Collection 的 eachParent 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# eachParent() + +### 描述 {#description} + +@short: 遍历指定项目的所有父项 + +### 用法 {#usage} + +~~~jsx +eachParent( + id: string | number, + callback: function, + self?: boolean +): void +~~~ + +### 参数 {#parameters} + +- `id` - （必需）项目的 id +- `callback` - （必需）应用于项目每个父项的回调函数 +- `self` - （可选）定义回调函数是否应遍历指定项目本身；默认值为 *false*。 + +### 示例 {#example} + +~~~jsx {6-8} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.eachParent("id_1.1.1", (item) => { + console.log(item); +}, false); +~~~ + +**更新日志**：v4.0 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/exists_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/exists_method.md new file mode 100644 index 000000000..57cc7aaac --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/exists_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: exists() +title: Data Collection 的 exists 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中，了解 Data Collection 的 exists 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# exists() + +### 描述 {#description} + +@short: 检查指定项目是否存在于 diagram 中 + +### 用法 {#usage} + +~~~jsx +exists(id: string | number): boolean; +~~~ + +### 参数 {#parameters} + +- `id` - （必需）待检查项目的 id + +### 返回值 {#returns} + +若项目存在，该方法返回 `true`，否则返回 `false` + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const shape = diagram.data.exists("1"); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/filter_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/filter_event.md new file mode 100644 index 000000000..8b4307ac0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/filter_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: filter +title: Data Collection 的 filter 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 data collection 的 filter 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Diagram。 +--- + +# filter + +### 描述 {#description} + +@short: 在筛选 data collection 后触发 + +### 用法 {#usage} + +~~~jsx +filter: (filter?: object) => void; +~~~ + +### 参数 {#parameters} + +`filter` 事件的回调函数将使用以下参数进行调用： + +- `object: {key: object }` - 一个包含所有活动筛选器的对象，其中： + - `key` - 活动筛选器的 id + - `object` - 一个包含 [`rule` 和 `config` 属性](api/data_collection/filter_method.md#parameters) 的对象 + +:::info +如需处理 Diagram Data Collection 的内部事件，可以使用 `on()` 方法。 +::: + +### 示例 {#example} + +~~~jsx {7-9} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.events.on("filter", (filter) => { + console.log("Items were filtered"); +}); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/filter_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/filter_method.md new file mode 100644 index 000000000..90d3a8873 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/filter_method.md @@ -0,0 +1,84 @@ +--- +sidebar_label: filter() +title: Data Collection 的 filter() 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 data collection 的 filter() 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Diagram。 +--- + +# filter() + +### 描述 {#description} + +@short: 筛选 Diagram 中的数据项 + +### 用法 {#usage} + +~~~jsx +filter( + rule?: function, + config?: { + id?: string, + add?: boolean, + permanent?: boolean + } +): void; + +// 或 + +filter( + rule?:{ + by?: string | number, + match?: string | number | boolean, + compare?: (value, match, item) => {} + }, + config?:{ + id?: string, + add?: boolean, + permanent?: boolean + } +): void; +~~~ + +### 参数 {#parameters} + +- `rule` - （可选）筛选条件 + - 如果设置为 *function*，将按照函数中指定的规则进行筛选。该函数接受一个数据项对象作为参数 + - 如果设置为 *object*，该参数可以包含以下属性： + - `by` - （可选）数据项属性的键 + - `match` - （可选）要匹配的模式 + - `compare` - （可选）用于扩展筛选的函数。该函数返回 *true* 或 *false*，并接受三个参数： + - `value` - 要比较的值 + - `match` - 要匹配的模式 + - `item` - 需要比较其值的数据项（例如一个图形） +- `config` - （可选）定义筛选参数的对象。该对象可以包含以下属性： + - `id` - （可选）筛选器的 id + - `add` - （可选）定义下一次筛选是应用于已经筛选过的数据（true），还是应用于初始数据（false，默认值） + - `permanent` - （可选）设置为 *true* 可使当前筛选器永久生效。即使下一次筛选的配置对象中没有 `add:true` 属性，该筛选器仍会被应用。此类筛选器只能通过 [`resetFilter()`](api/data_collection/resetfilter_method.md) 方法移除 + +### 示例 {#example} + +~~~jsx {6-9,11-12} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +// 按照函数中指定的规则进行筛选 +diagram.data.filter(function (shape) { + return shape.id > 3; +}); + +// 按照图形属性的键进行筛选 +diagram.data.filter({ by: "text", match: "Read N" }); +~~~ + +若要将 Diagram 恢复到初始状态，请在不传递参数的情况下调用 `filter()` 方法。 + +~~~jsx +diagram.data.filter(); +~~~ + +**相关文章：** [筛选数据项](guides/manipulating_items.md#filtering-items) + +**相关示例：** [Diagram. 数据. 筛选图形](https://snippet.dhtmlx.com/tm43bsgn) + +**更新日志：** v6.0 中更新 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/find_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/find_method.md new file mode 100644 index 000000000..00bb7ddc7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/find_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: find() +title: Data Collection 的 find() 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 data collection 的 find() 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Diagram。 +--- + +# find() + +### 描述 {#description} + +@short: 查找与指定参数相匹配的数据项 + +### 用法 {#usage} + +~~~jsx +find(rule: object): object; + +// 或 + +find(rule: function): object; +~~~ + +### 参数 {#parameters} + +- `rule` - （必需）搜索条件，可以指定为： + - 一个对象，包含以下参数： + - `by: string | function` - 搜索条件（数据项属性的键或搜索函数） + - `match: string` - 数据项属性的值 + - 一个函数：`DataCallback(item: T, index?: number, array?: T[])` + +### 返回值 {#returns} + +该方法返回第一个与指定条件相匹配的数据项对象 + +### 示例 {#example} + +~~~jsx {7,10-12} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +//按照属性键搜索图形 +const shape = diagram.data.find({ by: "text", match: "Manager" }); + +//按照函数中指定的规则搜索图形 +const shape = diagram.data.find((shape) => { + if(shape.text==="Manager"||shape.text==="Marketer"){return true} +}); +~~~ + +**相关文章：** [查找所需数据项](guides/manipulating_items.md#finding-the-necessary-item) + +**相关示例：** [Diagram. 数据. 查找所需图形](https://snippet.dhtmlx.com/sete9z73) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/findall_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/findall_method.md new file mode 100644 index 000000000..d751835d8 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/findall_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: findAll() +title: Data Collection 的 findAll() 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 data collection 的 findAll() 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Diagram。 +--- + +# findAll() + +### 描述 {#description} + +@short: 查找与指定参数相匹配的所有数据项 + +### 用法 {#usage} + +~~~jsx +findAll(rule: object): array; + +// 或 + +findAll(rule: function): array; +~~~ + +### 参数 {#parameters} + +- `rule` - （必需）搜索条件，可以指定为： + - 一个对象，包含以下参数： + - `by: string | function` - 搜索条件（数据项属性的键或搜索函数） + - `match: string` - 数据项属性的值 + - 一个函数：`DataCallback(item: T, index?: number, array?: T[])` + +### 返回值 {#returns} + +该方法返回一个包含匹配数据项对象的数组 + +### 示例 {#example} + +~~~jsx {7,10-14} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +//按照属性键搜索图形 +const shapes = diagram.data.findAll({ by: "text", match: "Manager" }); + +//按照函数搜索图形 +const shapes = diagram.data.findAll(function (shapes) { + if( shapes.text === "Manager" || shapes.text === "Marketer" ){ + return true; + } +}); +~~~ + +**相关文章：** [查找所需数据项](guides/manipulating_items.md#finding-the-necessary-item) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getfilters_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getfilters_method.md new file mode 100644 index 000000000..dc7636315 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getfilters_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: getFilters() +title: Data Collection 的 getFilters() 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 data collection 的 getFilters() 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Diagram。 +--- + +# getFilters() + +### 描述 {#description} + +@short: 返回一个包含已应用筛选器的对象 + +### 用法 {#usage} + +~~~jsx +getFilters({ permanent?: boolean }): object; +~~~ + +### 参数 {#parameters} + +- `permanent` - （可选）默认值为 *false*。用于获取永久筛选器的列表 + +### 返回值 {#returns} + +该方法返回一个包含已应用筛选器的对象，其中： +- `key` - 筛选器的 id +- `value` - 一个包含 [`rule` 和 `config` 属性](api/data_collection/filter_method.md#parameters) 的对象 + +### 示例 {#example} + +~~~jsx {6-7} +const diagram = new dhx.Diagram("diagram_container", { + // 配置设置 +}); +diagram.data.parse(data); + +const filters = diagram.data.getFilters(); // 获取所有已应用的筛选器 +console.log(filters); +~~~ + +**更新日志：** v6.0 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getid_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getid_method.md new file mode 100644 index 000000000..6ef9f798c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getid_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: getId() +title: Data Collection 的 getId 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 getId 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# getId() + +### 描述 {#description} + +@short: 根据索引返回项目的 id + +### 用法 {#usage} + +~~~jsx +getId(index: number): string | number; +~~~ + +### 参数 {#parameters} + +- `index` - （必需）项目的索引 + +### 返回值 {#returns} + +该方法返回项目的 id + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const id = diagram.data.getId(0); // -> 返回 "1" +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getindex_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getindex_method.md new file mode 100644 index 000000000..407f16d38 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getindex_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: getIndex() +title: Data Collection 的 getIndex 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 getIndex 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# getIndex() + +### 描述 {#description} + +@short: 根据 id 返回项目的索引 + +### 用法 {#usage} + +~~~jsx +getIndex(id: string | number): number; +~~~ + +### 参数 {#parameters} + +- `id` - （必需）项目的 id + +### 返回值 {#returns} + +该方法返回项目的索引 + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const index = diagram.data.getIndex("1"); // -> 返回 0 +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getitem_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getitem_method.md new file mode 100644 index 000000000..e4d8b8c4c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getitem_method.md @@ -0,0 +1,46 @@ +--- +sidebar_label: getItem() +title: Data Collection 的 getItem 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 getItem 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# getItem() + +### 描述 {#description} + +@short: 根据 id 返回项目的对象 + +### 用法 {#usage} + +~~~jsx +getItem(id: string | number): object; +~~~ + +### 参数 {#parameters} + +- `id` - （必需）所选项目的 id + +### 返回值 {#returns} + +该方法返回项目的对象 + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const shape = diagram.data.getItem(123); +~~~ + +您可以像下面这样访问项目的原始属性： + +~~~jsx +// 访问该形状的属性 +const shape = diagram.data.getItem(123); +const text = shape.text; +~~~ + +**相关文章**： [获取项目](guides/manipulating_items.md#getting-an-item) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getnearid_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getnearid_method.md new file mode 100644 index 000000000..92221a76b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getnearid_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: getNearId() +title: Data Collection 的 getNearId 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 getNearId 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# getNearId() + +### 描述 {#description} + +@short: 查找相对于指定项目的最近项目 + +### 用法 {#usage} + +~~~jsx +getNearId(id: string | number): string | number; +~~~ + +### 参数 {#parameters} + +- `id` - （必需）项目的 id + +### 返回值 {#returns} + +该方法返回最近项目的 id + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const nearId = diagram.data.getNearId(id); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getroot_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getroot_method.md new file mode 100644 index 000000000..2df533f2d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getroot_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: getRoot() +title: Data Collection 的 getRoot 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 getRoot 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# getRoot() + +### 描述 {#description} + +@short: 根据子项目的 id 返回根项目的 id + +### 用法 {#usage} + +~~~jsx +getRoot(id: string | number): string | number; +~~~ + +### 参数 {#parameters} + +- `id` - （必需）子项目的 id + +### 返回值 {#returns} + +该方法返回根项目的 id。根项目是树结构中的第一个项目 + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.getRoot("id_1.1.1"); // -> "id_1" +~~~ + +**更新日志**：v4.0 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getroots_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getroots_method.md new file mode 100644 index 000000000..7abb01da0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/getroots_method.md @@ -0,0 +1,34 @@ +--- +sidebar_label: getRoots() +title: Data Collection 的 getRoots 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 getRoots 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# getRoots() + +### 描述 {#description} + +@short: 返回一个数组，其中包含图表所有根项目的 ID + +### 用法 {#usage} + +~~~jsx +getRoots(): array +~~~ + +### 返回值 {#returns} + +该方法返回一个数组，其中包含根项目的 ID + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.getRoots(); +~~~ + +**更新日志**：v4.0 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/index.md new file mode 100644 index 000000000..9a7141b21 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/index.md @@ -0,0 +1,50 @@ +--- +sidebar_label: 概述 +title: DataCollection 概述 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中查看 DataCollection 的概述。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# DataCollection 概述 {#datacollection-overview} + +一组 API，可用于处理图表的数据。该 API 既可以在图表中使用，也可以在编辑器中使用。 + +## 方法 {#methods} + +| 名称 | 描述 | +| :-------------------------------------------- | :--------------------------------------------------- | +| [](api/data_collection/add_method.md) | @getshort(api/data_collection/add_method.md) | +| [](api/data_collection/copy_method.md) | @getshort(api/data_collection/copy_method.md) | +| [](api/data_collection/eachchild_method.md) | @getshort(api/data_collection/eachchild_method.md) | +| [](api/data_collection/eachparent_method.md) | @getshort(api/data_collection/eachparent_method.md) | +| [](api/data_collection/exists_method.md) | @getshort(api/data_collection/exists_method.md) | +| [](api/data_collection/filter_method.md) | @getshort(api/data_collection/filter_method.md) | +| [](api/data_collection/find_method.md) | @getshort(api/data_collection/find_method.md) | +| [](api/data_collection/findall_method.md) | @getshort(api/data_collection/findall_method.md) | +| [](api/data_collection/getfilters_method.md) | @getshort(api/data_collection/getfilters_method.md) | +| [](api/data_collection/getid_method.md) | @getshort(api/data_collection/getid_method.md) | +| [](api/data_collection/getindex_method.md) | @getshort(api/data_collection/getindex_method.md) | +| [](api/data_collection/getitem_method.md) | @getshort(api/data_collection/getitem_method.md) | +| [](api/data_collection/getnearid_method.md) | @getshort(api/data_collection/getnearid_method.md) | +| [](api/data_collection/getroot_method.md) | @getshort(api/data_collection/getroot_method.md) | +| [](api/data_collection/getroots_method.md) | @getshort(api/data_collection/getroots_method.md) | +| [](api/data_collection/load_method.md) | @getshort(api/data_collection/load_method.md) | +| [](api/data_collection/map_method.md) | @getshort(api/data_collection/map_method.md) | +| [](api/data_collection/move_method.md) | @getshort(api/data_collection/move_method.md) | +| [](api/data_collection/parse_method.md) | @getshort(api/data_collection/parse_method.md) | +| [](api/data_collection/remove_method.md) | @getshort(api/data_collection/remove_method.md) | +| [](api/data_collection/removeall_method.md) | @getshort(api/data_collection/removeall_method.md) | +| [](api/data_collection/resetfilter_method.md)| @getshort(api/data_collection/resetfilter_method.md)| +| [](api/data_collection/serialize_method.md) | @getshort(api/data_collection/serialize_method.md) | +| [](api/data_collection/update_method.md) | @getshort(api/data_collection/update_method.md) | + +## 事件 {#events} + +| 名称 | 描述 | +| :-------------------------------------------- | :--------------------------------------------------- | +| [](api/data_collection/afteradd_event.md) | @getshort(api/data_collection/afteradd_event.md) | +| [](api/data_collection/afterremove_event.md) | @getshort(api/data_collection/afterremove_event.md) | +| [](api/data_collection/beforeadd_event.md) | @getshort(api/data_collection/beforeadd_event.md) | +| [](api/data_collection/beforeremove_event.md) | @getshort(api/data_collection/beforeremove_event.md) | +| [](api/data_collection/change_event.md) | @getshort(api/data_collection/change_event.md) | +| [](api/data_collection/filter_event.md) | @getshort(api/data_collection/filter_event.md) | +| [](api/data_collection/load_event.md) | @getshort(api/data_collection/load_event.md) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/load_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/load_event.md new file mode 100644 index 000000000..1b96e6316 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/load_event.md @@ -0,0 +1,33 @@ +--- +sidebar_label: load +title: Data Collection 的 load 事件 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 load 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# load + +### 描述 {#description} + +@short: 当数据加载到图表中时触发 + +### 用法 {#usage} + +~~~jsx +load: () => void; +~~~ + +### 示例 {#example} + +~~~jsx {9-11} +// 初始化 Diagram +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +// 加载数据 +diagram.data.parse(data); + +// 为事件绑定处理程序 +diagram.events.on("load", () => { + // 此处编写逻辑 +}); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/load_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/load_method.md new file mode 100644 index 000000000..29489c93d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/load_method.md @@ -0,0 +1,56 @@ +--- +sidebar_label: load() +title: Data Collection 的 load 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 load 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# load() + +### 描述 {#description} + +@short: 从外部文件加载数据 + +### 用法 {#usage} + +~~~jsx +load( + url: string | object, + driver?: object | string +): promise; +~~~ + +### 参数 {#parameters} + +- `url` - （必需）外部文件的 URL，或配置了 URL 的 `DataProxy` +- `driver` - （可选）`DataDriver` 或数据类型（`"json"`、`"csv"`、`"xml"`），默认为 `"json"` + +### 返回值 {#returns} + +该方法返回一个数据加载的 Promise + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.load("../common/data.json"); +~~~ + +### 详情 {#details} + +该组件将发起 AJAX 调用，并期望远程 URL 提供有效的 JSON 数据。 + +数据加载是异步的，因此您需要将加载完成后的代码封装到一个 Promise 中： + +~~~jsx +diagram.data.load("../some/data").then(() => { + diagram.selection.add(123); +}); +~~~ + +**相关文章**： [加载和存储数据](guides/loading_data.md) + +**相关示例**： [Diagram. 数据. 数据加载](https://snippet.dhtmlx.com/09isp2d8) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/map_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/map_method.md new file mode 100644 index 000000000..481461e3a --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/map_method.md @@ -0,0 +1,39 @@ +--- +sidebar_label: map() +title: Data Collection 的 map 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 map 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# map() + +### 描述 {#description} + +@short: 遍历图表的所有项目 + +### 用法 {#usage} + +~~~jsx +map(callback: function): array; +~~~ + +### 参数 {#parameters} + +- `callback` - （必需）一个回调函数，将针对图表的每个项目调用 + +### 返回值 {#returns} + +该方法返回一个新的项目数组，其中每个项目都是回调函数的返回结果 + +### 示例 {#example} + +~~~jsx {7-9} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +// 获取图表中所有项目（形状、连接线、分组、泳道）的 ID +diagram.data.map((item) => { + console.log(item.id); +}); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/move_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/move_method.md new file mode 100644 index 000000000..8c06ce27d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/move_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: move() +title: Data Collection 的 move 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 move 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# move() + +### 描述 {#description} + +@short: 将项目移动到指定位置 + +### 用法 {#usage} + +~~~jsx +move( + id: string | number | array, + index: number, + target?: object +): string | number | array; +~~~ + +### 参数 {#parameters} + +- `id` - （必需）要移动的项目的 id +- `index` - （必需）要将项目移动到的索引 +- `target` - （可选）目标 Data Collection 对象 + +### 返回值 {#returns} + +该方法返回一个包含项目 id 的字符串，或一个包含多个项目 id 的字符串数组 + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.move("4",5); // 将 id=4 的形状移动到索引为 5 的位置 +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/parse_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/parse_method.md new file mode 100644 index 000000000..0107cff29 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/parse_method.md @@ -0,0 +1,104 @@ +--- +sidebar_label: parse() +title: Data Collection 的 parse 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 parse 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# parse() + +### 描述 {#description} + +@short: 从本地数据源将数据加载到 Diagram 中并对其进行处理 + +### 用法 {#usage} + +~~~jsx +parse( + data: object[] | { data: object[]; links: object[] } | string, + driver?: object | string +): void; +~~~ + +### 参数 {#parameters} + +- `data: object[] | { data: object[]; links: object[] } | string` - （必需）要加载的数据。您可以以任意受支持的数据格式加载数据。数据结构取决于 Diagram 的模式： + - 对于 default、组织结构图和思维导图等 Diagram 模式，数据以包含一组数据对象的数组形式提供 + ~~~jsx + data: object[]; // 所有形状和连接的数组 + ~~~ + - 对于 PERT Diagram 模式，数据为一个对象，包含： + - `data` 数组（用于形状：`"task"`、`"milestone"`、`"project"`） + - `links` 数组（用于形状之间的连接） + ~~~jsx + { + data: object[]; // 形状（任务、里程碑、项目）的数组 + links: object[] // 形状之间连接的数组 + }; + ~~~ +- `driver` - （可选）`DataDriver` 或数据类型（`"json"`、`"csv"`、`"xml"`），默认为 `"json"` + +### 示例 {#example} + +- 适用于 Diagram 的组织结构图模式： + +~~~jsx +const data = [ + { + id: "1", + text: "Chairman & CEO", + title: "Henry Bennett", + img: "../common/img/avatar-1.png" + }, + { + id: "2", + text: "Manager", + title: "Mildred Kim", + img: "../common/img/avatar-2.png" + }, + { + id: "3", + text: "Technical Director", + title: "Jerry Wagner", + img: "../common/img/avatar-3.png" + }, + { id: "1-2", from: "1", to: "2", type: "line" }, + { id: "1-3", from: "1", to: "3", type: "line" } +]; + +const diagram = new dhx.Diagram("diagram_container", { + type: "org" +}); + +diagram.data.parse(data); +~~~ + +- 适用于 Diagram 的 PERT 模式： + +~~~jsx +const dataset = { + data: [ + { id: "1", text: "Project #1", type: "project", parent: null }, + { id: "1.1", text: "Task #1", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, + { id: "1.2", text: "Task #2", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, + { id: "2.1", text: "Task #3", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, + { id: "2.2", text: "Task #4", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, + ], + links: [ + { id: "line-1", source: "1.1", target: "1.2" }, + { id: "line-2", source: "1.2", target: "2.1" }, + { id: "line-3", source: "2.1", target: "2.2" }, + ] +}; + +const diagram = new dhx.Diagram("diagram_container", { + type: "pert" +}); + +diagram.data.parse(dataset); +~~~ + +**相关文章：** [加载和存储数据](guides/loading_data.md) + +**相关示例：** +- [Diagram。组织结构图模式。基本初始化](https://snippet.dhtmlx.com/5ign6fyy) +- [Diagram。PERT 图表。初始化](https://snippet.dhtmlx.com/4h5fi7xd) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/remove_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/remove_method.md new file mode 100644 index 000000000..df55a31be --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/remove_method.md @@ -0,0 +1,40 @@ +--- +sidebar_label: remove() +title: Data Collection 的 remove 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 remove 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# remove() + +### 描述 {#description} + +@short: 从 Diagram 中删除指定项目 + +:::note +如果 Diagram 以组织结构图（`type: "org"`）或思维导图（`type: "mindmap"`）模式初始化，删除某个形状时也会移除指向该形状的连接以及所有子形状 +::: + +### 用法 {#usage} + +~~~jsx +remove(id: string | number | array): void; +~~~ + +### 参数 {#parameters} + +- `id` - （必需）要删除的项目的 id + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.remove("2"); +~~~ + +**相关文章：** [删除项目](guides/manipulating_items.md#deleting-items) + +**相关示例：** [Diagram。数据。添加/删除项目](https://snippet.dhtmlx.com/8wi20uop) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/removeall_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/removeall_method.md new file mode 100644 index 000000000..82a4bac80 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/removeall_method.md @@ -0,0 +1,32 @@ +--- +sidebar_label: removeAll() +title: Data Collection 的 removeAll 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 removeAll 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# removeAll() + +### 描述 {#description} + +@short: 删除 Diagram 中的所有项目 + +### 用法 {#usage} + +~~~jsx +removeAll(): void; +~~~ + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.removeAll(); +~~~ + +**相关文章：** [删除项目](guides/manipulating_items.md#deleting-items) + +**相关示例：** [Diagram。数据。添加/删除项目](https://snippet.dhtmlx.com/8wi20uop) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/resetfilter_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/resetfilter_method.md new file mode 100644 index 000000000..8f98e8566 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/resetfilter_method.md @@ -0,0 +1,50 @@ +--- +sidebar_label: resetFilter() +title: Data Collection 的 resetFilter 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中探索 Data Collection 的 resetFilter 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# resetFilter() + +### 描述 {#description} + +@short: 重置活动筛选器 + +### 用法 {#usage} + +~~~jsx +resetFilter({ + id?: string, + permanent?: boolean +}): boolean; +~~~ + +### 参数 {#parameters} + +- `config` - （可选）指定重置活动筛选器的参数。如果未指定 config 或其为空，则会重置除配置对象中包含 `permanent` 属性的筛选器之外的所有筛选器。可以包含以下属性： + - `id` - （可选）要重置的筛选器的 id + - `permanent` - （可选）设置为 *true* 可重置所有活动筛选器，包括配置中设置了 `permanent:true` 的筛选器 + +### 返回值 {#returns} + +如果包括永久筛选器在内的所有筛选器均已重置，该方法返回 *true*；否则返回 *false* + +### 示例 {#example} + +~~~jsx {6-7,9-10,12-13} +const diagram = new dhx.Diagram("diagram_container", { + // 配置项 +}); +diagram.data.parse(data); + +// 重置所有筛选器，配置中包含 "permanent" 属性的筛选器除外 +diagram.data.resetFilter(); + +// 重置所有筛选器，包括配置中包含 "permanent" 属性的筛选器 +diagram.data.resetFilter({ permanent: true }); + +// 重置具有指定 id 的筛选器 +diagram.data.resetFilter({ id: "filter_id" }); +~~~ + +**更新日志：** v6.0 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/serialize_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/serialize_method.md new file mode 100644 index 000000000..f9a993537 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/serialize_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: serialize() +title: Data Collection 的 serialize 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 serialize 方法。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# serialize() + +### 描述 {#description} + +@short: 导出当前 Diagram 的数据 + +### 用法 {#usage} + +~~~jsx +serialize(): object[] | { data: object[]; links: object[] }; +~~~ + +### 返回值 {#returns} + +根据 Diagram 模式的不同，该方法返回： + +- `object[]` - （适用于默认、组织结构图和思维导图 Diagram 模式）一个数组，其中包含 Diagram 中每个项目和连接对应的对象 +- `{ data: object[]; links: object[] }` - （适用于 PERT Diagram 模式）一个包含以下内容的对象： + - `data` 对象数组（适用于形状：`"task"`、`"milestone"`、`"project"`） + - `links` 对象数组（适用于形状之间的连接） + +### 示例 {#example} + +- 对于默认 Diagram 模式 + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +const data = diagram.data.serialize(); // -> [{...}, {...}, {...}, {...}] +~~~ + +- 对于 PERT Diagram 模式 + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "pert" +}); +diagram.data.parse(dataset); + +const dataset = diagram.data.serialize(); // -> { data: [...], links: [...] }; +~~~ + +请注意，对于 PERT Diagram 模式，导出的数据对象中的 `links` 对象将具有[与 DHTMLX Gantt 图表中相同的类型](https://docs.dhtmlx.com/gantt/desktop__link_properties.html)。这意味着，如果 Diagram 数据中某个连接的类型与 Gantt 的某种连接类型一致，则该类型在序列化过程中将保持不变。如果未指定连接类型，或将其设置为其他类型（例如 `type: "line"`），则会被转换为 `type: "0"`。 + +**相关文章**： [保存和恢复状态](guides/loading_data.md#saving-and-restoring-state) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/update_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/update_method.md new file mode 100644 index 000000000..91874734e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/data_collection/update_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: update() +title: Data Collection 的 update 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Data Collection 的 update 方法。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# update() + +### 描述 {#description} + +@short: 更新项目的属性 + +:::note +该方法不能用于更改项目的 *id* 或 *type* +::: + +### 用法 {#usage} + +~~~jsx +update( + id: string | number, + newItem: object +): void; +~~~ + +### 参数 {#parameters} + +- `id` - （必需）需要更新的项目的 id +- `newItem` - （必需）需要更新的属性的哈希表 + +### 示例 {#example} + +~~~jsx {6} +const diagram = new dhx.Diagram("diagram_container", { + type: "default" +}); +diagram.data.parse(data); + +diagram.data.update(123, { text:"New text" }); +~~~ + +**相关文章**： [更新项目](guides/manipulating_items.md#updating-an-item) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md new file mode 100644 index 000000000..0b3b06e24 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md @@ -0,0 +1,147 @@ +--- +sidebar_label: addShape() +title: addShape 方法 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 addShape 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载免费的 30 天试用版 DHTMLX Diagram。 +--- + +# addShape() + +### 描述 {#description} + +@short: 创建自定义形状 + +`addShape()` 方法既可以在 Diagram 中使用，也可以在 Editor 中使用。[查看下方示例](#example) + +### 用法 {#usage} + +~~~jsx +addShape( + type: string, + parameters: object +): void; +~~~ + +### 参数 {#parameters} + +- `type` - （必需）自定义形状类型的唯一名称。该名称必须与默认形状的名称不同 +- `parameters` - （必需）包含 `addShape()` 方法附加参数的对象。您可以在此指定以下属性： + - `template: function` - （必需）该函数以形状的配置对象作为参数，并返回 HTML 或 SVG 模板 + - [`defaults: object`](shapes/custom_shape.md) - （可选）已创建形状的默认配置。请参阅[形状配置属性的完整列表](shapes/configuration_properties.md) + - [`eventHandlers: object`](shapes/custom_shape.md#event-handlers-for-custom-shapes) - （可选）为形状模板的 HTML 元素添加自定义事件处理程序。`eventHandlers` 对象包含一组 `key:value` 键值对，其中： + - `key: string` - 事件的名称。请注意，事件名称的开头使用 “on” 前缀（onclick、onmouseover） + - `value: object` - 一个包含 `key:value` 键值对的对象，其中 + - `key` 是将应用该处理程序的 CSS 类名 + - `value` 是一个接受两个参数的函数： + - `event: object` - （必需）事件对象 + - `shape: object` - （必需）形状对象 + + :::tip + 我们建议您在初始化自定义事件处理程序时，为不同的自定义形状使用不同的 CSS 类。 + ::: + +### 示例 {#example} + +~~~jsx {8-37} title="将形状添加到 Diagram 中" +const diagram = new dhx.Diagram("diagram_container", { + type: "org", // 或 type: "default"，或 type: "mindmap" + defaultShapeType: "personal", +}); + +diagram.data.parse(data); + +diagram.addShape("personal", { + template: ({ name, photo, post }) => (` +
+
+ `),
+ defaults: {
+ height: 115, width: 330,
+ name: "Name and First name",
+ post: "Resident",
+ photo: "",
+ },
+ eventHandlers: {
+ onclick: {
+ "toggle--open-menu": () => console.log("open menu")
+ }
+ }
+});
+~~~
+
+**相关示例：** [带有 Editor 的 Diagram。组织结构图模式。卡片、editbar 和 toolbar 的自定义](https://snippet.dhtmlx.com/vcnt647v)
+
+下面的示例展示了如何将自定义形状添加到 Diagram Editor 中，以及如何配置编辑器的 [Shapebar](guides/diagram_editor/shapebar.md) 和 [Editbar](guides/diagram_editor/editbar.md) 面板。在 Editor 的 editbar 中配置自定义形状是通过 Editbar 面板的 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 属性实现的。
+
+~~~jsx {34-49} title="将形状添加到 Diagram Editor 中"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Network shapes": [
+ { type: "network", text: "Core", img: src + "core.svg" },
+ { type: "network", text: "Server", img: src + "server.svg" }
+ ],
+ "Flow shapes": [{ flowShapes: true }]
+ }
+ },
+ editbar: {
+ properties: {
+ network: [
+ { type: "arrange" },
+ {
+ type: "fieldset",
+ label: "Network information",
+ rows: [
+ { type: "avatar", key: "img", circle: true, readOnly: true },
+ { type: "textarea", key: "text", label: "Description" },
+ { type: "input", key: "ip", label: "IP" }
+ ]
+ }
+ ]
+ }
+ }
+ }
+});
+
+editor.parse(data);
+
+editor.diagram.addShape("network", {
+ template: ({ img, text, ip }) => {
+ return `
+
+
+
+
+
+
+ ${name}
+
+ ${post}
+
+ DHTMLX Diagram
+This is an example of simple customization of the editing panel using the container control.
+You can also use this control to create your own controls.
+
+ `
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/datepicker.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/datepicker.md
new file mode 100644
index 000000000..503c0d5d5
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/datepicker.md
@@ -0,0 +1,147 @@
+---
+sidebar_label: Datepicker
+title: Editbar 基本控件 - Datepicker
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中探索 Editbar 的 Datepicker 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Suite 的免费 30 天评估版本。
+---
+
+# Datepicker
+
+@short: 用于选择日期的基本控件。
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "datepicker",
+ key?: string | string[],
+ wrap?: boolean, // 默认为 false
+
+ css?: string,
+ disabled?: boolean, // 默认为 false
+ hidden?: boolean, // 默认为 false
+ height?: string | number | "content", // 默认为 "content"
+ width?: string | number | "content", // 默认为 "content"
+ padding?: string | number,
+
+ date?: Date | string,
+ dateFormat?: string, // 默认为 "%d/%m/%y"
+ disabledDates?: (date: Date) => boolean,
+ icon?: string,
+ mark?: (date: Date) => string,
+ mode?: "calendar" | "month" | "year", // 默认为 "calendar"
+ placeholder?: string,
+ thisMonthOnly?: boolean, // 默认为 false
+ timeFormat?: 24 | 12, // 默认为 24
+ timePicker?: boolean, // 默认为 false
+ valueFormat?: "string" | "Date", // 默认为 "string"
+ weekNumbers?: boolean, // 默认为 false
+ weekStart?: "saturday" | "sunday" | "monday", // 默认为 "sunday"
+
+ // 若 `wrap:true`，请查看 Fieldset 的 label 属性
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 默认为 "top"
+
+ // 服务属性和方法
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` -（必需）控件的类型。将其设置为 `"datepicker"`
+- `key` -（可选）指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+- `wrap` -（可选）允许显示外部包裹层。默认为 *false*
+- `css` -（可选）为控件添加样式类
+- `disabled` -（可选）定义控件是启用（*false*）还是禁用（*true*）。默认为 *false*
+- `hidden` -（可选）定义控件是否隐藏。默认为 *false*
+- `height` -（可选）控件的高度。默认为 `"content"`
+- `width` -（可选）控件的宽度。默认为 `"content"`
+- `padding` -（可选）设置单元格与 Datepicker 控件边框之间的内边距
+- `date` -（可选）定义创建日历时打开的日期
+- `dateFormat` -（可选）定义日历中日期的格式。默认为 *"%d/%m/%y"*。日期格式必须包含分隔符（空格或符号），否则将抛出错误
+- `disabledDates` -（可选）允许禁用某些日期区间，对应的日期标签会变暗
+- `icon` -（可选）所用图标字体中某个图标的 CSS 类
+- `mark` -（可选）允许为特定日期添加 CSS 类
+- `mode` -（可选）指定日历的显示模式：`"calendar"` | `"month"` | `"year"`。默认为 `"calendar"`
+- `placeholder` -（可选）输入框的提示信息
+- `thisMonthOnly` -（可选）隐藏相对于当前显示月份的上一个/下一个月的日期
+- `timeFormat` -（可选）定义时间选择器的时间格式，12 小时制或 24 小时制：*12* | *24*。默认为 *24*
+- `timePicker` -（可选）在日历中添加时间选择器。默认为 *false*
+- `valueFormat` -（可选）定义获取控件当前值时返回值的格式：`"string"` | `"Date"`。默认为 `"string"`
+- `weekNumbers` -（可选）定义是否显示周数，默认为 *false*
+- `weekStart` -（可选）设置一周的起始日：`"saturday"` | `"monday"` | `"sunday"`。默认为 `"sunday"`
+- `label` -（可选）指定控件的标签
+- `labelWidth` -（可选）设置控件标签的宽度
+- `labelPosition` -（可选）定义标签的位置：`"left"` | `"top"`。默认为 `"top"`
+
+### 服务属性和方法 {#service-properties-and-methods}
+
+:::warning
+请注意，我们强烈建议不要重新定义默认类型控件的服务属性和方法，因为这可能会导致其功能出现问题。
+:::
+
+- `$on` -（可选）- 允许设置事件监听器。该对象具有以下属性：
+ - `eventName` - 一个回调函数，调用时带有以下参数：
+ - `object` - 一个具有以下属性的对象：
+ - `control` - [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form 控件
+ - `editor` - Diagram Editor 的对象
+ - `id` - Diagram 项的 id
+ - `arguments` -（可选）- [原始事件参数](https://docs.dhtmlx.com/suite/category/form-datepicker-events/)
+- `$handler` -（可选）- 一个回调函数，用于处理表单控件的 `change` 和 `input` 事件以及 DataCollection 的 `change` 事件被触发时的操作。调用时带有以下参数：
+ - `object` - 一个具有以下属性的对象：
+ - `id` - Diagram 项的 id
+ - `key` - 指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+ - `editor` - Diagram Editor 的对象
+ - `control` - 该组件所基于的 [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form 控件的对象
+ - `value` - [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form 控件的新值
+- `$setValue` -（可选）- 一个回调函数，用于在控件初始化以及 DataCollection 中的值发生变化时设置 [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form 控件的值。调用时带有以下参数：
+ - `object` - 一个具有以下属性的对象：
+ - `editor` - Diagram Editor 的对象
+ - `control` - 该组件所基于的 [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form 控件的对象
+ - `value` - Diagram 项的值
+- `$layout` -（可选）- 一个回调函数，用于设置控件的结构。返回 [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form 控件的配置。调用时带有以下参数：
+ - `object` - 不含服务属性的控件配置
+
+## 示例 {#example}
+
+~~~jsx {7-21}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "datepicker",
+ key: "date_start",
+ label: "Date start",
+ wrap: true,
+ },
+ {
+ type: "datepicker",
+ key: "date_end",
+ label: "Date end",
+ wrap: true,
+ valueFormat: "Date",
+ timePicker: true,
+ weekStart: "monday"
+ }
+ ]
+ }
+ }
+ }
+});
+editor.parse([
+ { "id": "shape_1" },
+ { "id": "shape_2", "parent": "shape_1", "date_start": "25/03/24", "date_end": new Date },
+ { "id": "shape_3", "parent": "shape_1", "date_start": "25/03/24", "date_end": new Date }
+]);
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/fieldset.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/fieldset.md
new file mode 100644
index 000000000..fb38f596d
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/fieldset.md
@@ -0,0 +1,155 @@
+---
+sidebar_label: Fieldset
+title: Editbar 基本控件 - Fieldset
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中探索 Editbar 的 Fieldset 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Suite 的免费 30 天评估版本。
+---
+
+# Fieldset
+
+@short: 用于借助 Editbar 配置项 [`controls`](api/diagram_editor/editbar/config/controls_property.md) 或 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 创建复杂控件的基本控件。
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "fieldset",
+
+ compact?: boolean,
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number,
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "start"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+
+ rows?: object[],
+ cols?: object[],
+
+ $layout?: function
+}
+~~~
+
+`rows` 和 `cols` 属性可以包含指定控件对象的数组，或如下所示的嵌套结构：
+
+~~~jsx
+{
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number,
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "start"
+ rows?: object[],
+ cols?: object[]
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` -（必需）控件的类型。将其设置为 `"fieldset"`
+- `compact` -（可选）指定紧凑模式，移除缩进和边框。默认为 *false*
+- `disabled` -（可选）定义控件是启用（*false*）还是禁用（*true*）。默认为 *false*
+- `hidden` -（可选）定义控件是否隐藏。默认为 *false*
+- `css` -（可选）应用于控件组的 CSS 类名称
+- `width` -（可选）设置控件组的宽度。默认为 `"content"`
+- `height` -（可选）设置控件组的高度。默认为 `"content"`
+- `padding` -（可选）设置控件组内部内容的内边距
+- `align` -（可选）设置控件组内控件的对齐方式。默认为 `"start"`
+- `label` -（可选）指定控件的标签
+- `labelAlignment` -（可选）定义标签的位置：`"left"` | `"right"` | `"center"`。默认为 `"left"`
+- `rows` -（可选）将控件组内的控件垂直排列
+- `cols` -（可选）将控件组内的控件水平排列
+
+#### 服务属性和方法 {#service-properties-and-methods}
+
+:::warning
+请注意，我们强烈建议不要重新定义默认类型控件的服务属性和方法，因为这可能会导致其功能出现问题。
+:::
+
+- `$layout` -（可选）- 一个回调函数，用于设置控件的结构。返回 [Fieldset](https://docs.dhtmlx.com/suite/form/fieldset/) Form 控件的配置。调用时带有以下参数：
+ - `object` - 不含服务属性的控件配置
+
+## 示例 {#example}
+
+~~~jsx {7-28} title="通过 properties 属性创建 Fieldset"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "fieldset",
+ label: "Task details",
+ rows: [
+ { type: "input", key: "name", label: "Task name" },
+ { type: "input", key: "id", label: "ID", readOnly: true },
+ {
+ align: "between",
+ cols: [
+ { type: "datepicker", key: "date_start", label: "Date start", width: "48%" },
+ { type: "datepicker", key: "date_end", label: "Date end", width: "48%" },
+ ]
+ },
+ {
+ type: "combo",
+ key: "responsible",
+ label: "Responsible",
+ placeholder: "Select responsible",
+ options: ["Henry Bennet", "Mike Frebel", "Greg Mash"]
+ }
+ ]
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+~~~jsx {10-33} title="通过 controls 属性创建复杂控件"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ { type: "details" }
+ ]
+ },
+ controls: {
+ details: {
+ type: "fieldset",
+ label: "Task details",
+ rows: [
+ { type: "input", key: "name", label: "Task name" },
+ { type: "input", key: "id", label: "ID", readOnly: true },
+ {
+ align: "between",
+ cols: [
+ { type: "datepicker", key: "date_start", label: "Date start", width: "48%" },
+ { type: "datepicker", key: "date_end", label: "Date end", width: "48%" }
+ ]
+ },
+ {
+ type: "combo",
+ key: "responsible",
+ label: "Responsible",
+ placeholder: "Select responsible",
+ options: ["Henry Bennet", "Mike Frebel", "Greg Mash"]
+ }
+ ]
+ }
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/input.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/input.md
new file mode 100644
index 000000000..6aef0e486
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/input.md
@@ -0,0 +1,134 @@
+---
+sidebar_label: Input
+title: Editbar 基本控件 - Input
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中探索 Editbar 的 Input 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Suite 的免费 30 天评估版本。
+---
+
+# Input
+
+@short: 用于输入文本的基本输入框控件。
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "input",
+ key?: string | string[],
+ wrap?: boolean, // 默认为 false
+
+ css?: string,
+ disabled?: boolean, // 默认为 false
+ hidden?: boolean, // 默认为 false
+ height?: string | number | "content", // 默认为 "content"
+ width?: string | number | "content", // 默认为 "content"
+ padding?: string | number,
+
+ icon?: string,
+ inputType?: "text" | "password" | "number", // 默认为 "text"
+ max?: number | string,
+ maxlength?: number | string,
+ min?: number | string,
+ minlength?: number | string,
+ placeholder?: string,
+ readOnly?: boolean, // 默认为 false
+
+ // 若 `wrap:true`，请查看 Fieldset 的 label 属性
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 默认为 "top"
+
+ // 服务属性和方法
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` -（必需）控件的类型。将其设置为 `"input"`
+- `key` -（可选）指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+- `wrap` -（可选）允许显示外部包裹层。默认为 *false*
+- `css` -（可选）为控件添加样式类
+- `disabled` -（可选）定义控件是启用（*false*）还是禁用（*true*）。默认为 *false*
+- `hidden` -（可选）定义控件是否隐藏。默认为 *false*
+- `height` -（可选）控件的高度。默认为 `"content"`
+- `width` -（可选）控件的宽度。默认为 `"content"`
+- `padding` -（可选）设置单元格与输入框控件边框之间的内边距
+- `icon` -（可选）所用图标字体中某个[图标](https://docs.dhtmlx.com/suite/helpers/icon/)的 CSS 类
+- `inputType` -（可选）设置输入框的类型：`"text"` | `"password"` | `"number"`。默认为 `"text"`
+使用 `"password"` 值可指定用于输入密码的字段
+- `max` -（可选）- 输入框[允许的最大值](https://docs.dhtmlx.com/suite/form/work_with_form/#minimal-and-maximal-values)。该属性仅适用于输入类型 *"number"*
+- `maxlength` -（可选）输入框中[允许输入的最大字符数](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)。该属性适用于以下输入类型：*"text", "password"*
+- `min` -（可选）[输入框中允许的最小值](https://docs.dhtmlx.com/suite/form/work_with_form/#minimal-and-maximal-values)。该属性仅适用于输入类型 *"number"*
+- `minlength` -（可选）输入框中[允许输入的最小字符数](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)。该属性适用于以下输入类型：*"text", "password"*
+- `placeholder` -（可选）输入框的提示信息
+- `readOnly` -（可选）定义输入框是否为只读。默认为 *false*
+- `label` -（可选）指定控件的标签
+- `labelWidth` -（可选）设置控件标签的宽度
+- `labelPosition` -（可选）定义标签的位置：`"left"` | `"top"`。默认为 `"top"`
+
+### 服务属性和方法 {#service-properties-and-methods}
+
+:::warning
+请注意，我们强烈建议不要重新定义默认类型控件的服务属性和方法，因为这可能会导致其功能出现问题。
+:::
+
+- `$on` -（可选）- 允许设置事件监听器。该对象具有以下属性：
+ - `eventName` - 一个回调函数，调用时带有以下参数：
+ - `object` - 一个具有以下属性的对象：
+ - `control` - [Input](https://docs.dhtmlx.com/suite/form/input/) Form 控件
+ - `editor` - Diagram Editor 的对象
+ - `id` - Diagram 项的 id
+ - `arguments` -（可选）- [原始事件参数](https://docs.dhtmlx.com/suite/category/form-input-events/)
+- `$handler` -（可选）- 一个回调函数，用于处理 [Input](https://docs.dhtmlx.com/suite/form/input/) Form 控件的 `change` 和 `input` 事件以及 DataCollection 的 `change` 事件被触发时的操作。调用时带有以下参数：
+ - `object` - 一个具有以下属性的对象：
+ - `id` - Diagram 项的 id
+ - `key` - 指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+ - `editor` - Diagram Editor 的对象
+ - `control` - 该组件所基于的 [Input](https://docs.dhtmlx.com/suite/form/input/) Form 控件的对象
+ - `value` - [Input](https://docs.dhtmlx.com/suite/form/input/) Form 控件的新值
+- `$setValue` -（可选）- 一个回调函数，用于在控件初始化以及 DataCollection 中的值发生变化时设置 [Input](https://docs.dhtmlx.com/suite/form/input/) Form 控件的值。调用时带有以下参数：
+ - `object` - 一个具有以下属性的对象：
+ - `editor` - Diagram Editor 的对象
+ - `control` - 该组件所基于的 [Input](https://docs.dhtmlx.com/suite/form/input/) Form 控件的对象
+ - `value` - Diagram 项的值
+- `$layout` -（可选）- 一个回调函数，用于设置控件的结构。返回 [Input](https://docs.dhtmlx.com/suite/form/input/) Form 控件的配置。调用时带有以下参数：
+ - `object` - 不含服务属性的控件配置
+
+## 示例 {#example}
+
+~~~jsx {7-22}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "input",
+ inputType: "text",
+ key: "text",
+ label: "Input with a string value",
+ placeholder: "Enter a string value"
+ },
+ {
+ type: "input",
+ inputType: "number",
+ key: "x",
+ label: "Input with a number value",
+ placeholder: "Enter a number value",
+ min: 0,
+ max: 100,
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/radiogroup.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/radiogroup.md
new file mode 100644
index 000000000..b6512a2ee
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/radiogroup.md
@@ -0,0 +1,167 @@
+---
+sidebar_label: RadioGroup
+title: Editbar 基本控件 - RadioGroup
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中探索 Editbar 的 RadioGroup 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Suite 的免费 30 天评估版本。
+---
+
+# RadioGroup
+
+@short: 用于创建一组单选按钮的基本控件。
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "radiogroup",
+ options: {
+ rows?: object[],
+ cols?: object[],
+ css?: string,
+ height?: string | number | "content",
+ padding?: string | number,
+ width?: string | number | "content"
+ },
+ key?: string | string[],
+ wrap?: boolean, // 默认为 false
+
+ disabled?: boolean, // 默认为 false
+ hidden?: boolean, // 默认为 false
+
+ css?: string,
+ height?: string | number | "content", // 默认为 "content"
+ width?: string | number | "content", // 默认为 "content"
+ padding?: string | number,
+
+ // 若 `wrap:true`，请查看 Fieldset 的 label 属性
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 默认为 "top"
+
+ // 服务属性和方法
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+RadioGroup 内单选按钮的配置对象：
+
+~~~jsx
+{
+ value: string,
+ text?: string,
+
+ disabled?: boolean,
+ hidden?: boolean,
+ css?: string,
+ height?: string | number | "content",
+ width?: string | number | "content",
+ padding?: string | number
+}
+~~~
+
+## 描述 {#description}
+
+### RadioGroup 属性 {#radiogroup-properties}
+
+#### 基本属性 {#basic-properties}
+
+- `type` -（必需）控件的类型。将其设置为 `"radioGroup"`
+- `key` -（可选）指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+- `wrap` -（可选）允许显示外部包裹层。默认为 *false*
+- `options` -（必需）包含 RadioGroup 选项的对象。该对象可以包含以下属性：
+ - `rows` -（可选）将 RadioGroup 控件内的[单选按钮](#radio-button-properties)垂直排列
+ - `cols` -（可选）将 RadioGroup 控件内的[单选按钮](#radio-button-properties)水平排列
+ - `css` -（可选）为 RadioGroup 添加样式类
+ - `height` -（可选）RadioGroup 的高度
+ - `padding` -（可选）设置单元格与 RadioGroup 边框之间的内边距
+ - `width` -（可选）RadioGroup 的宽度
+- `disabled` -（可选）定义控件是启用（*false*）还是禁用（*true*）。默认为 *false*
+- `hidden` -（boolean）定义 RadioGroup 是否隐藏。默认为 *false*
+- `css` -（可选）为控件添加样式类
+- `height` -（可选）控件的高度。默认为 `"content"`
+- `width` -（可选）控件的宽度。默认为 `"content"`
+- `padding` -（可选）设置单元格与 RadioGroup 控件边框之间的内边距
+- `label` -（可选）指定控件的标签
+- `labelWidth` -（可选）设置控件标签的宽度
+- `labelPosition` -（可选）定义标签的位置：`"left"` | `"top"`。默认为 `"top"`
+
+#### 服务属性和方法 {#service-properties-and-methods}
+
+:::warning
+请注意，我们强烈建议不要重新定义默认类型控件的服务属性和方法，因为这可能会导致其功能出现问题。
+:::
+
+- `$on` -（可选）- 允许设置事件监听器。该对象具有以下属性：
+ - `eventName` - 一个回调函数，调用时带有以下参数：
+ - `object` - 一个具有以下属性的对象：
+ - `control` - [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 控件
+ - `editor` - Diagram Editor 的对象
+ - `id` - Diagram 项的 id
+ - `arguments` -（可选）- [原始事件参数](https://docs.dhtmlx.com/suite/category/form-radiogroup-events/)
+- `$handler` -（可选）- 一个回调函数，用于处理 [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 控件的 `change` 事件以及 DataCollection 的 `change` 事件被触发时的操作。调用时带有以下参数：
+ - `object` - 一个具有以下属性的对象：
+ - `id` - Diagram 项的 id
+ - `key` - 指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+ - `editor` - Diagram Editor 的对象
+ - `control` - 该组件所基于的 [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 控件的对象
+ - `value` - [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 控件的新值
+- `$setValue` -（可选）- 一个回调函数，用于在控件初始化以及 DataCollection 中的值发生变化时设置 [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 控件的值。调用时带有以下参数：
+ - `object` - 一个具有以下属性的对象：
+ - `editor` - Diagram Editor 的对象
+ - `control` - 该组件所基于的 [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 控件的对象
+ - `value` - Diagram 项的值
+- `$layout` -（可选）- 一个回调函数，用于设置控件的结构。返回 [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form 控件的配置。调用时带有以下参数：
+ - `object` - 不含服务属性的控件配置
+
+### 单选按钮属性 {#radio-button-properties}
+
+- `value` -（必需）单选按钮的值
+- `text` -（可选）单选按钮的文本标签
+- `disabled` -（可选）定义控件是启用（*false*）还是禁用（*true*）。默认为 *false*
+- `hidden` -（可选）定义单选按钮是否隐藏。默认为 *false*
+- `css` -（可选）为控件添加样式类
+- `height` -（可选）控件的高度。默认为 `"content"`
+- `width` -（可选）控件的宽度。默认为 `"content"`
+- `padding` -（可选）设置单元格与单选按钮控件边框之间的内边距
+
+## 示例 {#example}
+
+~~~jsx {7-28}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "radioGroup",
+ key: "textAlign",
+ label: "Text align",
+ wrap: true,
+ options: {
+ rows: [
+ {
+ text: "Left",
+ value: "left"
+ },
+ {
+ text: "Center",
+ value: "center"
+ },
+ {
+ text: "Right",
+ value: "right"
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/select.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/select.md
new file mode 100644
index 000000000..86c66345a
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/select.md
@@ -0,0 +1,136 @@
+---
+sidebar_label: Select
+title: Editbar 基本控件 - Select
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中探索 Editbar 的 Select 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Suite 的免费 30 天评估版本。
+---
+
+# Select
+
+@short: 用于展示一组可选选项的高级下拉选择框的基本控件。
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "select",
+ options: (object | string)[],
+ key?: string | string[],
+ wrap?: boolean, // 默认为 false
+
+ css?: string,
+ disabled?: boolean, // 默认为 false
+ hidden?: boolean, // 默认为 false
+ height?: string | number | "content", // 默认为 "content"
+ width?: string | number | "content", // 默认为 "content"
+ padding?: string | number,
+ icon?: string,
+
+ // 若 `wrap:true`，请查看 Fieldset 的 label 属性
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 默认为 "top"
+
+ // 服务属性和方法
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+Select 内选项的配置对象：
+
+~~~jsx
+{
+ value: string | number,
+ content: string,
+ disabled?: boolean
+}
+~~~
+
+## 描述 {#description}
+
+### Select 属性 {#select-properties}
+
+#### 基本属性 {#basic-properties}
+
+- `type` -（必需）控件的类型。将其设置为 `"select"`
+- `options` -（必需）Select 选项的数组，每个选项可以设置为 *string*，也可以设置为具有一组 `key:value` 键值对的 *object* - [选项的属性及其取值](#option-properties)
+- `key` -（可选）指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+- `wrap` -（可选）允许显示外部包裹层。默认为 *false*
+- `css` -（可选）为控件添加样式类
+- `disabled` -（可选）定义控件是启用（*false*）还是禁用（*true*）。默认为 *false*
+- `hidden` -（boolean）定义 Select 是否隐藏。默认为 *false*
+- `height` -（可选）控件的高度。默认为 `"content"`
+- `width` -（可选）控件的宽度。默认为 `"content"`
+- `padding` -（可选）设置单元格与 Select 控件边框之间的内边距
+- `icon` -（可选）所用图标字体中某个[图标](https://docs.dhtmlx.com/suite/helpers/icon/)的 CSS 类
+- `label` -（可选）指定控件的标签
+- `labelWidth` -（可选）设置控件标签的宽度
+- `labelPosition` -（可选）定义标签的位置：`"left"` | `"top"`。默认为 `"top"`
+
+#### 服务属性和方法 {#service-properties-and-methods}
+
+:::warning
+请注意，我们强烈建议不要重新定义默认类型控件的服务属性和方法，因为这可能会导致其功能出现问题。
+:::
+
+- `$on` -（可选）- 允许设置事件监听器。该对象具有以下属性：
+ - `eventName` - 一个回调函数，调用时带有以下参数：
+ - `object` - 一个具有以下属性的对象：
+ - `control` - [Select](https://docs.dhtmlx.com/suite/form/select/) Form 控件
+ - `editor` - Diagram Editor 的对象
+ - `id` - Diagram 项的 id
+ - `arguments` -（可选）- [原始事件参数](https://docs.dhtmlx.com/suite/category/form-select-events/)
+- `$handler` -（可选）- 一个回调函数，用于处理 [Select](https://docs.dhtmlx.com/suite/form/select/) Form 控件的 `change` 事件以及 DataCollection 的 `change` 事件被触发时的操作。调用时带有以下参数：
+ - `object` - 一个具有以下属性的对象：
+ - `id` - Diagram 项的 id
+ - `key` - 指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+ - `editor` - Diagram Editor 的对象
+ - `control` - 该组件所基于的 [Select](https://docs.dhtmlx.com/suite/form/select/) Form 控件的对象
+ - `value` - [Select](https://docs.dhtmlx.com/suite/form/select/) Form 控件的新值
+- `$setValue` -（可选）- 一个回调函数，用于在控件初始化以及 DataCollection 中的值发生变化时设置 [Select](https://docs.dhtmlx.com/suite/form/select/) Form 控件的值。调用时带有以下参数：
+ - `object` - 一个具有以下属性的对象：
+ - `editor` - Diagram Editor 的对象
+ - `control` - 该组件所基于的 [Select](https://docs.dhtmlx.com/suite/form/select/) Form 控件的对象
+ - `value` - Diagram 项的值
+- `$layout` -（可选）- 一个回调函数，用于设置控件的结构。返回 [Select](https://docs.dhtmlx.com/suite/form/select/) Form 控件的配置。调用时带有以下参数：
+ - `object` - 不含服务属性的控件配置
+
+### 选项属性 {#option-properties}
+
+- `value` -（必需）设置选择选项的值
+- `content` -（必需）选择选项中显示的内容
+- `disabled` -（可选）定义选项是启用（*false*）还是禁用（*true*）。默认为 *false*
+
+## 示例 {#example}
+
+~~~jsx {7-20}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "select",
+ label: "Position",
+ key: "position",
+ wrap: true,
+ options: [
+ "",
+ "Technical Director",
+ "Manager",
+ "QA Lead",
+ { value: 4, content: "Team Lead", disabled: true },
+ { value: 5, content: "Programmer" }
+ ]
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/slider.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/slider.md
new file mode 100644
index 000000000..bc2ddd363
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/slider.md
@@ -0,0 +1,136 @@
+---
+sidebar_label: Slider
+title: Editbar 基本控件 - Slider
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Slider 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天试用版 DHTMLX Suite。
+---
+
+# Slider
+
+@short: 通过沿一条带有一组固定选项的线条移动滑块来选择数值的基本控件。
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "slider",
+ key?: string | string[],
+ wrap?: boolean, // 默认为 false
+
+ disabled?: boolean, // 默认为 false
+ hidden?: boolean, // 默认为 false
+ css?: string,
+ padding?: string | number,
+ height?: string | number | "content", // 默认为 "content"
+ width?: string | number | "content", // 默认为 "content"
+
+ inverse?: boolean, // 默认为 false
+ majorTick?: number,
+ max?: number, // 默认为 100
+ min?: number, // 默认为 0
+ mode?: "vertical" | "horizontal", // 默认为 "horizontal"
+ range?: boolean, // 默认为 false
+ step?: number, // 默认为 1
+ tick?: number,
+ tickTemplate?: (position: number) => string,
+ tooltip?: boolean, // 默认为 true
+
+ // 当 `wrap:true` 时，请查看 Fieldset 的标签属性
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 默认为 "top"
+
+ // 服务属性和方法
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型。设置为 `"slider"`
+- `key` - （可选）指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+- `wrap` - （可选）允许显示外部包装。默认为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*）。默认为 *false*
+- `hidden` - （可选）定义控件是否隐藏。默认为 *false*
+- `css` - （可选）为控件添加样式类
+- `height` - （可选）控件的高度。默认为 `"content"`
+- `width` - （可选）控件的宽度。默认为 `"content"`
+- `padding` - （可选）设置单元格与 slider 控件边框之间的内边距
+- `inverse` - （可选）启用/禁用反向 slider 模式。默认为 *false*
+- `majorTick` - （可选）设置在 slider 刻度上渲染数值的间隔
+- `max` - （可选）slider 的最大值。默认为 *100*
+- `min` - （可选）slider 的最小值。默认为 *0*
+- `mode` - （可选）slider 刻度的方向。默认为 `"horizontal"`
+- `range` - （可选）启用/禁用在 slider 上选择数值范围。默认为 *false*
+- `step` - （可选）slider 滑块移动的步长。默认为 *1*
+- `tick` - （可选）设置渲染 slider 刻度的步长间隔
+- `tickTemplate` - （可选）设置在刻度上渲染数值的模板
+- `tooltip` - （可选）启用在悬停 slider 滑块时显示刻度值的提示信息。默认为 *true*
+
+### 服务属性和方法 {#service-properties-and-methods}
+
+:::warning
+请注意，我们强烈建议不要重新定义默认类型控件的服务属性和方法，因为这可能导致其功能出现问题。
+:::
+
+- `$on` - （可选）- 允许设置事件监听器。该对象具有以下属性：
+ - `eventName` - 使用以下参数调用的回调函数：
+ - `object` - 具有以下属性的对象：
+ - `control` - [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 控件
+ - `editor` - Diagram Editor 的对象
+ - `id` - Diagram 项的 id
+ - `arguments` - （可选）- [原始事件参数](https://docs.dhtmlx.com/suite/category/form-slider-events/)
+- `$handler` - （可选）- 一个回调函数，用于处理 [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 控件的 `change` 事件以及 DataCollection 的 `change` 事件被触发时的操作。使用以下参数调用：
+ - `object` - 具有以下属性的对象：
+ - `id` - Diagram 项的 id
+ - `key` - 指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+ - `editor` - Diagram Editor 的对象
+ - `control` - 组件所基于的 [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 控件对象
+ - `value` - [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 控件的新值
+- `$setValue` - （可选）- 一个回调函数，用于在控件初始化以及 DataCollection 中的值发生变化时设置 [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 控件的值。使用以下参数调用：
+ - `object` - 具有以下属性的对象：
+ - `editor` - Diagram Editor 的对象
+ - `control` - 组件所基于的 [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 控件对象
+ - `value` - Diagram 项的值
+- `$layout` - （可选）- 一个回调函数，用于设置控件的结构。返回 [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form 控件的配置。使用以下参数调用：
+ - `object` - 不含服务属性的控件配置
+
+## 示例 {#example}
+
+~~~jsx {7-18}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $lineTitle: [
+ {
+ type: "slider",
+ key: "distance",
+ label: "Distance",
+ wrap: true,
+ min: 0,
+ max: 100,
+ step: 1,
+ tick: 5,
+ majorTick: 10,
+ tickTemplate: value => value
+ },
+ ]
+ }
+ }
+ }
+});
+editor.parse([
+ { "id": "shape_1", "type": "rectangle", "text": "shape" },
+ { "id": "shape_2","type": "rectangle", "text": "shape", "x": 400 },
+ { "id": "line", "type": "line", "from": "shape_1", "to": "shape_2" },
+ { "type": "lineTitle", "parent": "line", "text": "Title", "distance": 50 }
+]);
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/spacer.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/spacer.md
new file mode 100644
index 000000000..cdf5be565
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/spacer.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: Spacer
+title: Editbar 基本控件 - Spacer
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Spacer 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天试用版 DHTMLX Suite。
+---
+
+# Spacer
+
+@short: 通过占用一定空间来排列和对齐 Editbar 上控件的基本控件。
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "spacer"
+}
+~~~
+
+## 描述 {#description}
+
+- `type` - （必需）控件的类型。设置为 `"spacer"`
+
+## 示例 {#example}
+
+~~~jsx {10,12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ show: true,
+ properties: {
+ $shape: [
+ { type: "input", key: "name", label: "Task name" },
+ { type: "input", key: "id", label: "ID", readOnly: true },
+ { type: "spacer" },
+ { type: "button", text: "Send", full: true },
+ { type: "spacer" }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/textarea.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/textarea.md
new file mode 100644
index 000000000..951d04fdd
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/textarea.md
@@ -0,0 +1,116 @@
+---
+sidebar_label: Textarea
+title: Editbar 基本控件 - Textarea
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Textarea 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天试用版 DHTMLX Suite。
+---
+
+# Textarea
+
+@short: 用于输入简单多行文本的基本控件。
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "textarea",
+ key?: string | string[],
+ wrap?: boolean, // 默认为 false
+
+ css?: string,
+ disabled?: boolean, // 默认为 false
+ hidden?: boolean, // 默认为 false
+ height?: string | number | "content", // 默认为 "content"
+ width?: string | number | "content", // 默认为 "content"
+ padding?: string | number,
+
+ maxlength?: number | string,
+ minlength?: number | string,
+ placeholder?: string,
+ readOnly?: boolean, // 默认为 false
+
+ // 当 `wrap:true` 时，请查看 Fieldset 的标签属性
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 默认为 "top"
+
+ // 服务属性和方法
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型。设置为 `"textarea"`
+- `key` - （可选）指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+- `wrap` - （可选）允许显示外部包装。默认为 *false*
+- `css` - （可选）为控件添加样式类
+- `hidden` - （可选）定义控件是否隐藏。默认为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*）。默认为 *false*
+- `width` - （可选）控件的宽度。默认为 `"content"`
+- `height` - （可选）控件的高度。默认为 `"content"`
+- `padding` - （可选）设置单元格与 Textarea 控件边框之间的内边距
+- `maxlength` - （可选）[文本域中允许的最大字符数](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)
+- `minlength` - （可选）[文本域中允许的最小字符数](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)
+- `placeholder` - （可选）文本域的提示信息
+- `readOnly` - （可选）定义文本域是否为只读。默认为 *false*
+- `label` - （可选）为控件指定标签
+- `labelWidth` - （可选）设置控件标签的宽度
+- `labelPosition` - （可选）定义标签的位置：`"left"` | `"top"`。默认为 `"top"`
+
+### 服务属性和方法 {#service-properties-and-methods}
+
+:::warning
+请注意，我们强烈建议不要重新定义默认类型控件的服务属性和方法，因为这可能导致其功能出现问题。
+:::
+
+- `$on` - （可选）- 允许设置事件监听器。该对象具有以下属性：
+ - `eventName` - 使用以下参数调用的回调函数：
+ - `object` - 具有以下属性的对象：
+ - `control` - [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 控件
+ - `editor` - Diagram Editor 的对象
+ - `id` - Diagram 项的 id
+ - `arguments` - （可选）- [原始事件参数](https://docs.dhtmlx.com/suite/category/form-textarea-events/)
+- `$handler` - （可选）- 一个回调函数，用于处理 [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 控件的 `change` 和 `input` 事件以及 DataCollection 的 `change` 事件被触发时的操作。使用以下参数调用：
+ - `object` - 具有以下属性的对象：
+ - `id` - Diagram 项的 id
+ - `key` - 指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+ - `editor` - Diagram Editor 的对象
+ - `control` - 组件所基于的 [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 控件对象
+ - `value` - [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 控件的新值
+- `$setValue` - （可选）- 一个回调函数，用于在控件初始化以及 DataCollection 中的值发生变化时设置 [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 控件的值。使用以下参数调用：
+ - `object` - 具有以下属性的对象：
+ - `editor` - Diagram Editor 的对象
+ - `control` - 组件所基于的 [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 控件对象
+ - `value` - Diagram 项的值
+- `$layout` - （可选）- 一个回调函数，用于设置控件的结构。返回 [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form 控件的配置。使用以下参数调用：
+ - `object` - 不含服务属性的控件配置
+
+## 示例 {#example}
+
+~~~jsx {7-13}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "textarea",
+ key: "text",
+ label: "Textarea label",
+ height: 250,
+ wrap: true
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/timepicker.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/timepicker.md
new file mode 100644
index 000000000..68b05172e
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/timepicker.md
@@ -0,0 +1,123 @@
+---
+sidebar_label: Timepicker
+title: Editbar 基本控件 - Timepicker
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Timepicker 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天试用版 DHTMLX Suite。
+---
+
+# Timepicker
+
+@short: 用于通过沿轨道移动手柄或直接在相应输入框中输入小时和分钟值来选择时间值的基本控件。
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "timepicker",
+ key?: string | string[],
+ wrap?: boolean, // 默认为 false
+
+ css?: string,
+ disabled?: boolean, // 默认为 false
+ hidden?: boolean, // 默认为 false
+ height?: string | number | "content", // 默认为 "content"
+ width?: string | number | "content", // 默认为 "content"
+ padding?: string | number,
+
+ controls?: boolean, // 默认为 false
+ icon?: string,
+ placeholder?: string,
+ timeFormat?: 12 | 24, // 默认为 24
+ valueFormat?: "string" | "timeObject", // 默认为 "string"
+
+ // 当 `wrap:true` 时，请查看 Fieldset 的标签属性
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // 默认为 "top"
+
+ // 服务属性和方法
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型。设置为 `"timepicker"`
+- `key` - （可选）指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+- `wrap` - （可选）允许显示外部包装。默认为 *false*
+- `css` - （可选）为控件添加样式类
+- `hidden` - （可选）定义控件是否隐藏。默认为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*）。默认为 *false*
+- `width` - （可选）控件的宽度。默认为 `"content"`
+- `height` - （可选）控件的高度。默认为 `"content"`
+- `padding` - （可选）设置单元格与 Timepicker 控件边框之间的内边距
+- `controls` - （可选）定义 timepicker 是否配备 Close 和 Save 按钮。默认为 *false*
+- `icon` - （可选）所使用图标字体中图标的 CSS 类
+- `placeholder` - （可选）输入框的提示信息
+- `timeFormat` - （可选）定义启用哪种时钟格式：12 小时制或 24 小时制。请相应地将该属性设置为 *12* 或 *24*。默认为 *24*
+- `valueFormat` - （可选）定义在处理 timepicker 控件事件时所应用值的格式：`"string"` | `"timeObject"`。默认为 `"string"`
+- `label` - （可选）为控件指定标签
+- `labelWidth` - （可选）设置控件标签的宽度
+- `labelPosition` - （可选）定义标签的位置：`"left"` | `"top"`。默认为 `"top"`
+
+### 服务属性和方法 {#service-properties-and-methods}
+
+:::warning
+请注意，我们强烈建议不要重新定义默认类型控件的服务属性和方法，因为这可能导致其功能出现问题。
+:::
+
+- `$on` - （可选）- 允许设置事件监听器。该对象具有以下属性：
+ - `eventName` - 使用以下参数调用的回调函数：
+ - `object` - 具有以下属性的对象：
+ - `control` - [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 控件
+ - `editor` - Diagram Editor 的对象
+ - `id` - Diagram 项的 id
+ - `arguments` - （可选）- [原始事件参数](https://docs.dhtmlx.com/suite/category/form-timepicker-events/)
+- `$handler` - （可选）- 一个回调函数，用于处理 [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 控件的 `change` 和 `input` 事件以及 DataCollection 的 `change` 事件被触发时的操作。使用以下参数调用：
+ - `object` - 具有以下属性的对象：
+ - `id` - Diagram 项的 id
+ - `key` - 指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+ - `editor` - Diagram Editor 的对象
+ - `control` - 组件所基于的 [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 控件对象
+ - `value` - [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 控件的新值
+- `$setValue` - （可选）- 一个回调函数，用于在控件初始化以及 DataCollection 中的值发生变化时设置 [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 控件的值。使用以下参数调用：
+ - `object` - 具有以下属性的对象：
+ - `editor` - Diagram Editor 的对象
+ - `control` - 组件所基于的 [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 控件对象
+ - `value` - Diagram 项的值
+- `$layout` - （可选）- 一个回调函数，用于设置控件的结构。返回 [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form 控件的配置。使用以下参数调用：
+ - `object` - 不含服务属性的控件配置
+
+## 示例 {#example}
+
+~~~jsx {8-13}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ show: true,
+ properties: {
+ $shape: [
+ {
+ type: "timepicker",
+ key: "time",
+ label: "Select time",
+ controls: true
+ }
+ ]
+ }
+ }
+ }
+});
+editor.parse([
+ { "id": "shape_1" },
+ { "id": "shape_2", "parent": "shape_1", "time": "14:00" },
+ { "id": "shape_3", "parent": "shape_1", "time": "18:30" }
+]);
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/toggle.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/toggle.md
new file mode 100644
index 000000000..04efc80f4
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/toggle.md
@@ -0,0 +1,134 @@
+---
+sidebar_label: Toggle
+title: Editbar 基本控件 - Toggle
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Toggle 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天试用版 DHTMLX Suite。
+---
+
+# Toggle
+
+@short: 一种基本控件，表示可以在点击时从按下状态切换到未按下状态的特殊按钮。
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "toggle",
+ key?: string | string[],
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+ full?: boolean, // 默认为 false
+
+ text?: string,
+ icon?: string,
+ offText?: string,
+ offIcon?: string,
+ value?: string | number,
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number,
+
+ // 服务属性和方法
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+如果指定了 `value` 属性，该控件既可以与 *boolean* 值一起使用，也可以与 *string* 值一起使用。`value` 属性用于将设置的值指定为所应用属性的值。[查看下面的示例](#example)以了解详情。
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型。设置为 `"toggle"`
+- `key` - （可选）指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+- `hidden` - （可选）定义控件是否隐藏。默认为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*）。默认为 *false*
+- `full` - （可选）定义 toggle 是否扩展至 `width` 属性指定的宽度。默认为 *false*
+- `text` - （可选）设置 toggle 内部的文本。当与 `offText` 属性一起初始化时，指定的文本将在选中（按下）状态下渲染
+- `offText` - （可选）设置将在 toggle 未选中（未按下）状态下渲染的文本
+- `icon` - （可选）设置在 toggle 内部显示的图标的 CSS 类。当与 `offIcon` 属性一起初始化时，指定的图标 CSS 类将在 toggle 的选中（按下）状态下渲染
+- `offIcon` - （可选）设置将在 toggle 未选中（未按下）状态下渲染的图标的 CSS 类
+- `value` - （可选）指定选中（按下）状态下的值。如果未定义，则控件将使用 *boolean* 值
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度。默认为 `"content"`
+- `height` - （可选）控件的高度。默认为 `"content"`
+- `padding` - （可选）设置单元格与 Toggle 控件边框之间的内边距
+
+### 服务属性和方法 {#service-properties-and-methods}
+
+:::warning
+请注意，我们强烈建议不要重新定义默认类型控件的服务属性和方法，因为这可能导致其功能出现问题。
+:::
+
+- `$on` - （可选）- 允许设置事件监听器。该对象具有以下属性：
+ - `eventName` - 使用以下参数调用的回调函数：
+ - `object` - 具有以下属性的对象：
+ - `control` - [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 控件
+ - `editor` - Diagram Editor 的对象
+ - `id` - Diagram 项的 id
+ - `arguments` - （可选）- [原始事件参数](https://docs.dhtmlx.com/suite/category/form-toggle-events/)
+- `$handler` - （可选）- 一个回调函数，用于处理 [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 控件的 `change` 事件以及 DataCollection 的 `change` 事件被触发时的操作。使用以下参数调用：
+ - `object` - 具有以下属性的对象：
+ - `id` - Diagram 项的 id
+ - `key` - 指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+ - `editor` - Diagram Editor 的对象
+ - `control` - 组件所基于的 [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 控件对象
+ - `value` - [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 控件的新值
+- `$setValue` - （可选）- 一个回调函数，用于在控件初始化以及 DataCollection 中的值发生变化时设置 [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 控件的值。使用以下参数调用：
+ - `object` - 具有以下属性的对象：
+ - `editor` - Diagram Editor 的对象
+ - `control` - 组件所基于的 [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 控件对象
+ - `value` - Diagram 项的值
+- `$layout` - （可选）- 一个回调函数，用于设置控件的结构。返回 [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form 控件的配置。使用以下参数调用：
+ - `object` - 不含服务属性的控件配置
+
+## 示例 {#example}
+
+~~~jsx {7-14} title="为 toggle 应用布尔值"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "toggle",
+ key: ["header", "enable"],
+ icon: "dxi dxi-eye",
+ offIcon: "dxi dxi-eye-off",
+ text: "Visible",
+ offText: "Invisible"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+~~~jsx {7-12} title="将设置的值指定为所应用属性的值"
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "toggle",
+ key: "fontStyle",
+ value: "italic",
+ icon: "dxi dxi-format-italic"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/togglegroup.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/togglegroup.md
new file mode 100644
index 000000000..885c79bd2
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/togglegroup.md
@@ -0,0 +1,151 @@
+---
+sidebar_label: ToggleGroup
+title: Editbar 基本控件 - ToggleGroup
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 ToggleGroup 控件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Suite 的免费 30 天评估版。
+---
+
+# ToggleGroup
+
+@short: 用于创建切换按钮组的基本控件。
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "toggleGroup",
+ options: object[],
+ key?: string | string[],
+
+ full?: boolean, // 默认为 false
+ gap?: number, // 默认为 0
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number,
+
+ // 服务属性和方法
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+ToggleGroup 内的 Toggle 配置对象：
+
+~~~jsx
+{
+ id?: string,
+ hidden?: boolean,
+ disabled?: boolean,
+ full?: boolean,
+ text?: string,
+ icon?: string,
+ offText?: string,
+ offIcon?: string,
+ value?: string | number
+}
+~~~
+
+如果指定了 `value` 属性，控件内带有 `toggle` 配置的对象既可以使用 *boolean* 值，也可以使用 *string* 值。`value` 属性用于将设置的值赋给所应用的属性。[请参阅下方示例](#example) 以了解详情。
+
+## 描述 {#description}
+
+### ToggleGroup 属性 {#togglegroup-properties}
+
+#### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型。将其设置为 `"toggleGroup"`
+- `key` - （可选）指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+- `options` - （必需）ToggleGroup 选项的数组，每个选项都设置为包含一组 `key:value` 键值对的 *object*——[选项的属性及其值](#toggle-properties)
+- `hidden` - （可选）定义 ToggleGroup 是否隐藏。默认值为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*）。默认值为 *false*
+- `full` - （可选）定义 ToggleGroup 是否扩展到 `width` 属性指定的宽度。默认值为 *false*
+- `gap` - （可选）设置选项的各元素（按钮）之间的偏移量。默认值为 *0*
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度。默认值为 `"content"`
+- `height` - （可选）控件的高度。默认值为 `"content"`
+- `padding` - （可选）设置 ToggleGroup 控件的单元格与边框之间的内边距
+
+#### 服务属性和方法 {#service-properties-and-methods}
+
+:::warning
+请注意，我们强烈建议不要重新定义默认类型控件的服务属性和方法，因为这可能会导致其功能异常。
+:::
+
+- `$on` - （可选）——允许设置事件监听器。该对象具有以下属性：
+ - `eventName` - 使用以下参数调用的回调函数：
+ - `object` - 具有以下属性的对象：
+ - `control` - [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 控件
+ - `editor` - Diagram Editor 的对象
+ - `id` - Diagram 项的 id
+ - `arguments` - （可选）——[原始事件参数](https://docs.dhtmlx.com/suite/category/form-togglegroup-events/)
+- `$handler` - （可选）——一个回调函数，用于在触发 [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 控件的 `change` 事件以及 DataCollection 的 `change` 事件时处理相应操作。使用以下参数调用：
+ - `object` - 具有以下属性的对象：
+ - `id` - Diagram 项的 id
+ - `key` - 指定/修改的属性名称，或该属性在 Diagram 项对象中的路径
+ - `editor` - Diagram Editor 的对象
+ - `control` - 组件所基于的 [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 控件的对象
+ - `value` - [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 控件的新值
+- `$setValue` - （可选）——一个回调函数，用于在控件初始化时以及 DataCollection 中的值发生变化时设置 [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 控件的值。使用以下参数调用：
+ - `object` - 具有以下属性的对象：
+ - `editor` - Diagram Editor 的对象
+ - `control` - 组件所基于的 [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 控件的对象
+ - `value` - Diagram 项的值
+- `$layout` - （可选）——一个回调函数，用于设置控件的结构。返回 [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form 控件的配置。使用以下参数调用：
+ - `object` - 不含服务属性的控件配置
+
+### Toggle 属性 {#toggle-properties}
+
+- `id` - （可选）控件的 id，如果未设置则自动生成
+- `hidden` - （可选）定义选项是否隐藏。默认值为 *false*
+- `disabled` - （可选）定义选项是启用（*false*）还是禁用（*true*）。默认值为 *false*
+- `full` - （可选）定义选项是否扩展到 `width` 属性指定的宽度。默认值为 *false*
+- `text` - （可选）设置选项内的文本。当与 `offText` 属性一起初始化时，指定的文本将在选中（按下）状态下呈现
+- `icon` - （可选）设置在选项内显示的图标的 CSS 类。当与 `offIcon` 属性一起初始化时，指定的图标 CSS 类将在选项的选中（按下）状态下呈现
+- `offText` - （可选）设置将在选项的未选中（未按下）状态下呈现的文本
+- `offIcon` - （可选）设置将在选项的未选中（未按下）状态下呈现的图标的 CSS 类
+- `value` - （可选）指定选中（按下）状态下的值。如果未定义，则该选项使用 *boolean* 值
+
+## 示例 {#example}
+
+~~~jsx {7-28}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "toggleGroup",
+ key: "textAlign",
+ gap: 4,
+ $on: {
+ beforeChange: (spec, values) => !Object.values(values).every(i => !i),
+ },
+ options: [
+ {
+ icon: "dxi dxi-format-align-left",
+ value: "left"
+ },
+ {
+ icon: "dxi dxi-format-align-center",
+ value: "center"
+ },
+ {
+ icon: "dxi dxi-format-align-right",
+ value: "right"
+ }
+ ]
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls_overview.md
new file mode 100644
index 000000000..ac7f99433
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls_overview.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: 基本控件
+title: Editbar 指南 - 基本控件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的基本控件。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# 基本控件 {#basic-controls}
+
+您可以单独使用 Editbar 的基本控件，也可以在此基础上创建复杂控件。您可以在下方找到基本控件列表。请查看相应部分，以查看每个控件的配置属性的详细说明。
+
+:::info
+请参阅 [Editbar 配置](guides/diagram_editor/editbar.md) 指南，了解更多配置信息！
+:::
+
+## Editbar 基本控件概览 {#overview-of-editbar-basic-controls}
+
+| 名称 | 描述 |
+| :-------------------------------------------------------------- | :------------------------------------------------------------------- |
+| [](api/diagram_editor/editbar/basic_controls/avatar.md) | @getshort(api/diagram_editor/editbar/basic_controls/avatar.md) |
+| [](api/diagram_editor/editbar/basic_controls/button.md) | @getshort(api/diagram_editor/editbar/basic_controls/button.md) |
+| [](api/diagram_editor/editbar/basic_controls/checkbox.md) | @getshort(api/diagram_editor/editbar/basic_controls/checkbox.md) |
+| [](api/diagram_editor/editbar/basic_controls/checkboxgroup.md) | @getshort(api/diagram_editor/editbar/basic_controls/checkboxgroup.md)|
+| [](api/diagram_editor/editbar/basic_controls/colorpicker.md) | @getshort(api/diagram_editor/editbar/basic_controls/colorpicker.md) |
+| [](api/diagram_editor/editbar/basic_controls/combo.md) | @getshort(api/diagram_editor/editbar/basic_controls/combo.md) |
+| [](api/diagram_editor/editbar/basic_controls/container.md) | @getshort(api/diagram_editor/editbar/basic_controls/container.md) |
+| [](api/diagram_editor/editbar/basic_controls/datepicker.md) | @getshort(api/diagram_editor/editbar/basic_controls/datepicker.md) |
+| [](api/diagram_editor/editbar/basic_controls/fieldset.md) | @getshort(api/diagram_editor/editbar/basic_controls/fieldset.md) |
+| [](api/diagram_editor/editbar/basic_controls/input.md) | @getshort(api/diagram_editor/editbar/basic_controls/input.md) |
+| [](api/diagram_editor/editbar/basic_controls/radiogroup.md) | @getshort(api/diagram_editor/editbar/basic_controls/radiogroup.md) |
+| [](api/diagram_editor/editbar/basic_controls/select.md) | @getshort(api/diagram_editor/editbar/basic_controls/select.md) |
+| [](api/diagram_editor/editbar/basic_controls/slider.md) | @getshort(api/diagram_editor/editbar/basic_controls/slider.md) |
+| [](api/diagram_editor/editbar/basic_controls/spacer.md) | @getshort(api/diagram_editor/editbar/basic_controls/spacer.md) |
+| [](api/diagram_editor/editbar/basic_controls/textarea.md) | @getshort(api/diagram_editor/editbar/basic_controls/textarea.md) |
+| [](api/diagram_editor/editbar/basic_controls/timepicker.md) | @getshort(api/diagram_editor/editbar/basic_controls/timepicker.md) |
+| [](api/diagram_editor/editbar/basic_controls/toggle.md) | @getshort(api/diagram_editor/editbar/basic_controls/toggle.md) |
+| [](api/diagram_editor/editbar/basic_controls/togglegroup.md) | @getshort(api/diagram_editor/editbar/basic_controls/togglegroup.md) |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/arrange.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/arrange.md
new file mode 100644
index 000000000..fc51b4eed
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/arrange.md
@@ -0,0 +1,92 @@
+---
+sidebar_label: Arrange
+title: Editbar 复杂控件 - Arrange
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Arrange 控件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Suite 的免费 30 天评估版。
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Arrange
+
+@short: 用于编辑 Diagram 元素的宽度、高度、旋转角度、x 和 y 属性的复杂控件
+
+
+
+:::info
+**Arrange** 控件适用于 Diagram 编辑器 *default* 模式下的所有元素（`line` 和 `lineTitle` 元素除外）。
+:::
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "arrange",
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number, // 默认为 "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "start"
+ compact?: boolean, // 默认为 false
+
+ // 服务属性
+ $properties?: object
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型。将其设置为 `"arrange"`
+- `hidden` - （可选）定义控件是否隐藏。默认值为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*）
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度。默认值为 `"content"`
+- `height` - （可选）控件的高度。默认值为 `"content"`
+- `padding` - （可选）设置控件组内内容的内边距。默认值为 *"0 16px"*
+- `label` - （可选）指定控件的标签
+- `labelAlignment` - （可选）定义控件标签的位置。默认值为 `"left"`
+- `align` - （可选）设置控件组内控件的对齐方式。默认值为 `"start"`
+- `compact` - （可选）指定紧凑模式，移除缩进和边框。默认值为 *false*
+
+### 服务属性 {#service-properties}
+
+- `$properties` - （可选）允许您在复杂控件内覆盖[基本控件](api/diagram_editor/editbar/basic_controls_overview.md)的值。您可以基于基本控件配置 **Arrange** 控件的以下元素：
+ - `x` - （[input](api/diagram_editor/editbar/basic_controls/input.md)）设置 Diagram 元素在 x 轴上的位置
+ - `y` - （[input](api/diagram_editor/editbar/basic_controls/input.md)）设置 Diagram 元素在 y 轴上的位置
+ - `width` - （[input](api/diagram_editor/editbar/basic_controls/input.md)）设置 Diagram 元素的宽度（px）
+ - `height` - （[input](api/diagram_editor/editbar/basic_controls/input.md)）设置 Diagram 元素的高度（px）
+ - `angle` - （[input](api/diagram_editor/editbar/basic_controls/input.md)）设置 Diagram 元素的旋转角度
+
+## 示例 {#example}
+
+~~~jsx {7-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ rectangle: [
+ {
+ type: "arrange",
+ disabled: true,
+ $properties: {
+ angle: { hidden: true } // configuration of the "input" basic control
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/border.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/border.md
new file mode 100644
index 000000000..0477afcb3
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/border.md
@@ -0,0 +1,90 @@
+---
+sidebar_label: Border
+title: Editbar 复杂控件 - Border
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Border 控件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Suite 的免费 30 天评估版。
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Border
+
+@short: 用于显示和修改 Diagram 元素边框的复杂控件
+
+
+
+:::info
+**Border** 控件不适用于 `lineTitle` 元素。
+:::
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "border",
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number, // 默认为 "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "between"
+ compact?: boolean, // 默认为 false
+
+ // 服务属性
+ $properties?: object
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型。将其设置为 `"border"`
+- `hidden` - （可选）定义控件是否隐藏。默认值为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*）。默认值为 *false*
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度。默认值为 `"content"`
+- `height` - （可选）控件的高度。默认值为 `"content"`
+- `padding` - （可选）设置控件组内内容的内边距。默认值为 *"0 16px"*
+- `label` - （可选）指定控件的标签
+- `labelAlignment` - （可选）定义标签的位置。默认值为 `"left"`
+- `align` - （可选）设置控件组内控件的对齐方式。默认值为 `"between"`
+- `compact` - （可选）指定紧凑模式，移除缩进和边框。默认值为 *false*
+
+### 服务属性 {#service-properties}
+
+- `$properties` - （可选）允许您在复杂控件内覆盖[基本控件](api/diagram_editor/editbar/basic_controls_overview.md)的值。您可以基于基本控件配置 **Border** 控件的以下元素：
+ - `stroke` - （[colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)）设置边框颜色
+ - `strokeType` - （[combo](api/diagram_editor/editbar/basic_controls/combo.md)）设置边框类型
+ - `strokeWidth` - （[input](api/diagram_editor/editbar/basic_controls/input.md)）设置边框宽度
+
+## 示例 {#example}
+
+~~~jsx {7-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ rectangle: [
+ {
+ type: "border",
+ label: "Border style",
+ $properties: {
+ strokeType: { hidden: true }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/gridstep.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/gridstep.md
new file mode 100644
index 000000000..86a4c35b3
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/gridstep.md
@@ -0,0 +1,73 @@
+---
+sidebar_label: Grid step
+title: Editbar 复杂控件 - Grid step
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Grid step 控件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Suite 的免费 30 天评估版。
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Grid step
+
+@short: 用于显示和修改 Diagram 编辑器网格步长的复杂控件
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "gridStep",
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number, // 默认为 "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+ readOnly?: boolean, // 默认为 false
+ wrap?: boolean // 默认为 true
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型。将其设置为 `"gridStep"`
+- `hidden` - （可选）定义控件是否隐藏。默认值为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*）。默认值为 *false*
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度。默认值为 `"content"`
+- `height` - （可选）控件的高度。默认值为 `"content"`
+- `padding` - （可选）设置控件组内内容的内边距。默认值为 *"0 16px"*
+- `label` - （可选）指定控件的标签
+- `labelAlignment` - （可选）定义标签的位置。默认值为 `"left"`
+- `readOnly` - （可选）为控件设置只读模式。默认值为 *false*
+- `wrap` - （可选）允许显示外部包装。默认值为 *true*
+
+## 示例 {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $default: [
+ {
+ type: "gridStep",
+ readOnly: true
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/header.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/header.md
new file mode 100644
index 000000000..91eac5300
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/header.md
@@ -0,0 +1,77 @@
+---
+sidebar_label: Header
+title: Editbar 复杂控件 - Header
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Header 控件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Suite 的免费 30 天评估版。
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Header
+
+@short: 用于显示和修改 Diagram 编辑器中 `"group"` 和 `"swimlane"` 元素标题栏的复杂控件
+
+
+
+:::info
+**Header** 控件仅适用于 Diagram 编辑器 *default* 模式下的 `group` 和 `swimlane` 元素。
+:::
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "header",
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number, // 默认为 "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "start"
+ compact?: boolean // 默认为 false
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型。将其设置为 `"header"`
+- `hidden` - （可选）定义控件是否隐藏。默认值为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*）。默认值为 *false*
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度。默认值为 `"content"`
+- `height` - （可选）控件的高度。默认值为 `"content"`
+- `padding` - （可选）设置控件组内内容的内边距。默认值为 *"0 16px"*
+- `label` - （可选）指定控件的标签
+- `labelAlignment` - （可选）定义标签的位置。默认值为 `"left"`
+- `align` - （可选）设置控件组内控件的对齐方式。默认值为 `"start"`
+- `compact` - （可选）指定紧凑模式，移除缩进和边框。默认值为 *false*
+
+## 示例 {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "header",
+ label: "Group header style"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headercommon.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headercommon.md
new file mode 100644
index 000000000..99f8d47c3
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headercommon.md
@@ -0,0 +1,90 @@
+---
+sidebar_label: Header common
+title: Editbar 复杂控件 - Header common
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Header common 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天试用版 DHTMLX Suite。
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Header common
+
+@short: 用于更改组标题的可见性、颜色和高度的复杂控件
+
+
+
+:::info
+**Header common** 控件仅在 Diagram 编辑器的 *default* 模式下对 `group` 和 `swimlane` 元素可用。
+:::
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "headerCommon",
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number, // 默认为 "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "between"
+ compact?: boolean, // 默认为 false
+
+ // 服务属性
+ $properties?: object
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型，设置为 `"headerCommon"`
+- `hidden` - （可选）定义控件是否隐藏，默认为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*），默认为 *false*
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度，默认为 `"content"`
+- `height` - （可选）控件的高度，默认为 `"content"`
+- `padding` - （可选）设置控件组内内容的内边距，默认为 *"0 16px"*
+- `label` - （可选）指定控件的标签
+- `labelAlignment` - （可选）定义标签的位置，默认为 `"left"`
+- `align` - （可选）设置控件组内控件的对齐方式，默认为 `"between"`
+- `compact` - （可选）指定紧凑模式，移除缩进和边框，默认为 *false*
+
+### 服务属性 {#service-properties}
+
+- `$properties` - （可选）允许您在复杂控件中覆盖[基本控件](api/diagram_editor/editbar/basic_controls_overview.md)的值。您可以配置基于基本控件的 **Header common** 控件的以下元素：
+ - `enable` - （[toggle](api/diagram_editor/editbar/basic_controls/toggle.md)）切换组标题的可见性
+ - `fill` - （[colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)）设置组标题的背景颜色
+ - `height` - （[input](api/diagram_editor/editbar/basic_controls/input.md)）设置组标题的高度（px）
+
+## 示例 {#example}
+
+~~~jsx {6-14}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "headerCommon",
+ label: "Header common",
+ $properties: {
+ fill: { key: ["header", "fill"] }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headerposition.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headerposition.md
new file mode 100644
index 000000000..478b13623
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/headerposition.md
@@ -0,0 +1,99 @@
+---
+sidebar_label: Header position
+title: Editbar 复杂控件 - Header position
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Header position 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天试用版 DHTMLX Suite。
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Header position
+
+@short: 用于更改组标题位置的复杂控件
+
+
+
+:::info
+**Header position** 控件仅在 Diagram 编辑器的 *default* 模式下对 `group` 和 `swimlane` 元素可用。
+:::
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "headerPosition",
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number, // 默认为 "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "start"
+ compact?: boolean, // 默认为 false
+
+ // 服务属性
+ $properties?: object
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型，设置为 `"headerPosition"`
+- `hidden` - （可选）定义控件是否隐藏，默认为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*），默认为 *false*
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度，默认为 `"content"`
+- `height` - （可选）控件的高度，默认为 `"content"`
+- `padding` - （可选）设置控件组内内容的内边距，默认为 *"0 16px"*
+- `label` - （可选）指定控件的标签
+- `labelAlignment` - （可选）定义标签的位置，默认为 `"left"`
+- `align` - （可选）设置控件组内控件的对齐方式，默认为 `"start"`
+- `compact` - （可选）指定紧凑模式，移除缩进和边框，默认为 *false*
+
+### 服务属性 {#service-properties}
+
+- `$properties` - （可选）允许您在复杂控件中覆盖[基本控件](api/diagram_editor/editbar/basic_controls_overview.md)的值。您可以配置基于基本控件的 **Header position** 控件的以下元素：
+ - `position` - （[toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)）- 设置组标题的位置
+
+## 示例 {#example}
+
+~~~jsx {6-25}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "headerPosition",
+ label: "Header position",
+ $properties: {
+ position: {
+ options: [
+ {
+ icon: "dxi dxi-format-vertical-align-top",
+ value: "top"
+ },
+ {
+ icon: "dxi dxi-format-vertical-align-bottom",
+ value: "bottom"
+ }
+ ]
+ }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/lineshape.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/lineshape.md
new file mode 100644
index 000000000..1abd50a14
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/lineshape.md
@@ -0,0 +1,85 @@
+---
+sidebar_label: Line shape
+title: Editbar 复杂控件 - Line shape
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Line shape 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天试用版 DHTMLX Suite。
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Line shape
+
+@short: 用于显示和管理连接线的复杂控件
+
+
+
+:::info
+**Line shape** 控件仅在 Diagram 编辑器的 *default* 模式下对 `line` 元素可用。
+:::
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "lineShape",
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number, // 默认为 "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "between"
+ compact?: boolean, // 默认为 false
+
+ // 服务属性
+ $properties?: object
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型，设置为 `"lineShape"`
+- `hidden` - （可选）定义控件是否隐藏，默认为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*），默认为 *false*
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度，默认为 `"content"`
+- `height` - （可选）控件的高度，默认为 `"content"`
+- `padding` - （可选）设置控件组内内容的内边距，默认为 *"0 16px"*
+- `label` - （可选）指定控件的标签
+- `labelAlignment` - （可选）定义标签的位置，默认为 `"left"`
+- `align` - （可选）设置控件组内控件的对齐方式，默认为 `"between"`
+- `compact` - （可选）指定紧凑模式，移除缩进和边框，默认为 *false*
+
+### 服务属性 {#service-properties}
+
+- `$properties` - （可选）允许您在复杂控件中覆盖[基本控件](api/diagram_editor/editbar/basic_controls_overview.md)的值。您可以配置基于基本控件的 **Line shape** 控件的以下元素：
+ - `connectType` - （[toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)）设置连接线的类型
+
+## 示例 {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $line: [
+ {
+ type: "lineShape",
+ label: "Line connection type"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/pointerview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/pointerview.md
new file mode 100644
index 000000000..5a0d64524
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/pointerview.md
@@ -0,0 +1,86 @@
+---
+sidebar_label: Pointer view
+title: Editbar 复杂控件 - Pointer view
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Pointer view 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天试用版 DHTMLX Suite。
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Pointer view
+
+@short: 用于显示和管理连接线箭头的复杂控件
+
+
+
+:::info
+**Pointer view** 控件仅在 Diagram 编辑器的 *default* 模式下对 `line` 元素可用。
+:::
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "pointerView",
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number, // 默认为 "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "between"
+ compact?: boolean, // 默认为 false
+
+ // 服务属性
+ $properties?: object
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型，设置为 `"pointerView"`
+- `hidden` - （可选）定义控件是否隐藏，默认为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*），默认为 *false*
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度，默认为 `"content"`
+- `height` - （可选）控件的高度，默认为 `"content"`
+- `padding` - （可选）设置控件组内内容的内边距，默认为 *"0 16px"*
+- `label` - （可选）指定控件的标签
+- `labelAlignment` - （可选）定义标签的位置，默认为 `"left"`
+- `align` - （可选）设置控件组内控件的对齐方式，默认为 `"between"`
+- `compact` - （可选）指定紧凑模式，移除缩进和边框，默认为 *false*
+
+### 服务属性 {#service-properties}
+
+- `$properties` - （可选）允许您在复杂控件中覆盖[基本控件](api/diagram_editor/editbar/basic_controls_overview.md)的值。您可以配置基于基本控件的 **Pointer view** 控件的以下元素：
+ - `backArrow` - （[toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)）设置连接线末端的箭头类型
+ - `forwardArrow` - （[toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)）设置连接线起始端的箭头类型
+
+## 示例 {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $line: [
+ {
+ type: "pointerView",
+ disabled: true
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/position.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/position.md
new file mode 100644
index 000000000..94ee6f1f4
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/position.md
@@ -0,0 +1,88 @@
+---
+sidebar_label: Position
+title: Editbar 复杂控件 - Position
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Position 控件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天试用版 DHTMLX Suite。
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Position
+
+@short: 用于配置形状相对于预定义算法在 X 轴和 Y 轴上的偏移量的复杂控件
+
+
+
+:::info
+**Position** 控件仅在 Diagram 编辑器的 *org* 或 *mindmap* 模式下对 `shape` 元素可用。
+:::
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "position",
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number, // 默认为 "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "start"
+ compact?: boolean, // 默认为 false
+
+ // 服务属性
+ $properties?: object
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型，设置为 `"position"`
+- `hidden` - （可选）定义控件是否隐藏，默认为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*），默认为 *false*
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度，默认为 `"content"`
+- `height` - （可选）控件的高度，默认为 `"content"`
+- `padding` - （可选）设置控件组内内容的内边距，默认为 *"0 16px"*
+- `label` - （可选）指定控件的标签
+- `labelAlignment` - （可选）定义标签的位置，默认为 `"left"`
+- `align` - （可选）设置控件组内控件的对齐方式，默认为 `"start"`
+- `compact` - （可选）指定紧凑模式，移除缩进和边框，默认为 *false*
+
+### 服务属性 {#service-properties}
+
+- `$properties` - （可选）允许您在复杂控件中覆盖[基本控件](api/diagram_editor/editbar/basic_controls_overview.md))的值。您可以配置基于基本控件的 **Position** 控件的以下元素：
+ - `dx` - （[input](api/diagram_editor/editbar/basic_controls/input.md)）设置形状相对于预定义算法在 x 轴上的偏移量
+ - `dy` - （[input](api/diagram_editor/editbar/basic_controls/input.md)）设置形状相对于预定义算法在 y 轴上的偏移量
+
+## 示例 {#example}
+
+~~~jsx {6-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "mindmap",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "position",
+ $properties: {
+ dx: { disabled: true }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/size.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/size.md
new file mode 100644
index 000000000..cd6bcbf6e
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/size.md
@@ -0,0 +1,86 @@
+---
+sidebar_label: Size
+title: Editbar 复合控件 - Size
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Size 控件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载免费的 30 天 DHTMLX Suite 评估版本。
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Size
+
+@short: 用于管理 Diagram 元素宽度和高度的复合控件
+
+
+
+:::info
+**Size** 控件仅适用于 Diagram 编辑器中的 `shape`、`group` 和 `swimlane` 元素。
+:::
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "size",
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number, // 默认为 "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "start"
+ compact?: boolean, // 默认为 false
+
+ // 服务属性
+ $properties?: object
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型。将其设置为 `"size"`
+- `hidden` - （可选）定义是否隐藏该控件。默认为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*）状态。默认为 *false*
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度。默认为 `"content"`
+- `height` - （可选）控件的高度。默认为 `"content"`
+- `padding` - （可选）设置控件组内内容的内边距。默认为 *"0 16px"*
+- `label` - （可选）指定控件的标签
+- `labelAlignment` - （可选）定义标签的位置。默认为 `"left"`
+- `align` - （可选）设置控件组内各控件的对齐方式。默认为 `"start"`
+- `compact` - （可选）指定紧凑模式，移除缩进和边框。默认为 *false*
+
+### 服务属性 {#service-properties}
+
+- `$properties` - （可选）允许您在复合控件内覆盖[基础控件](api/diagram_editor/editbar/basic_controls_overview.md)的值。您可以基于基础控件配置 **Size** 控件的以下元素：
+ - `width` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) 设置 Diagram 元素的宽度 (px)
+ - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) 设置 Diagram 元素的高度 (px)
+
+## 示例 {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "mindmap",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "size",
+ label: "Shape size"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textalign.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textalign.md
new file mode 100644
index 000000000..b2168527d
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textalign.md
@@ -0,0 +1,82 @@
+---
+sidebar_label: Text align
+title: Editbar 复合控件 - Text align
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Text align 控件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载免费的 30 天 DHTMLX Suite 评估版本。
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Text align
+
+@short: 用于管理 Diagram 元素内文本对齐方式的复合控件
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "textAlign",
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number, // 默认为 "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "between"
+ compact?: boolean, // 默认为 false
+
+ // 服务属性
+ $properties?: object
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型。将其设置为 `"textAlign"`
+- `hidden` - （可选）定义是否隐藏该控件。默认为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*）状态。默认为 *false*
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度。默认为 `"content"`
+- `height` - （可选）控件的高度。默认为 `"content"`
+- `padding` - （可选）设置控件组内内容的内边距。默认为 *"0 16px"*
+- `label` - （可选）指定控件的标签
+- `labelAlignment` - （可选）定义标签的位置。默认为 `"left"`
+- `align` - （可选）设置控件组内各控件的对齐方式。默认为 `"between"`
+- `compact` - （可选）指定紧凑模式，移除缩进和边框。默认为 *false*
+
+### 服务属性 {#service-properties}
+
+- `$properties` - （可选）允许您在复合控件内覆盖[基础控件](api/diagram_editor/editbar/basic_controls_overview.md)的值。您可以基于基础控件配置 **Text align** 控件的以下元素：
+ - `textAlign` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) 设置文本的水平对齐方式
+ - `textVerticalAlign` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) 设置文本的垂直对齐方式
+
+## 示例 {#example}
+
+~~~jsx {6-11}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "mindmap",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "textAlign",
+ label: "Text align"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textstyle.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textstyle.md
new file mode 100644
index 000000000..bc8145b1c
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls/textstyle.md
@@ -0,0 +1,96 @@
+---
+sidebar_label: Text style
+title: Editbar 复合控件 - Text style
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 Text style 控件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载免费的 30 天 DHTMLX Suite 评估版本。
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Text style
+
+@short: 用于管理 Diagram 元素内文本样式的复合控件
+
+
+
+## 用法 {#usage}
+
+~~~jsx
+{
+ type: "textStyle",
+
+ hidden?: boolean, // 默认为 false
+ disabled?: boolean, // 默认为 false
+
+ css?: string,
+ width?: string | number | "content", // 默认为 "content"
+ height?: string | number | "content", // 默认为 "content"
+ padding?: string | number, // 默认为 "0 16px"
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // 默认为 "left"
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // 默认为 "between"
+ compact?: boolean, // 默认为 false
+
+ // 服务属性
+ $properties?: object
+}
+~~~
+
+## 描述 {#description}
+
+### 基本属性 {#basic-properties}
+
+- `type` - （必需）控件的类型。将其设置为 `"textStyle"`
+- `hidden` - （可选）定义是否隐藏该控件。默认为 *false*
+- `disabled` - （可选）定义控件是启用（*false*）还是禁用（*true*）状态。默认为 *false*
+- `css` - （可选）为控件添加样式类
+- `width` - （可选）控件的宽度。默认为 `"content"`
+- `height` - （可选）控件的高度。默认为 `"content"`
+- `padding` - （可选）设置控件组内内容的内边距。默认为 *"0 16px"*
+- `label` - （可选）指定控件的标签
+- `labelAlignment` - （可选）定义标签的位置。默认为 `"left"`
+- `align` - （可选）设置控件组内各控件的对齐方式。默认为 `"between"`
+- `compact` - （可选）指定紧凑模式，移除缩进和边框。默认为 *false*
+
+### 服务属性 {#service-properties}
+
+- `$properties` - （可选）允许您在复合控件内覆盖[基础控件](api/diagram_editor/editbar/basic_controls_overview.md)的值。您可以基于基础控件配置 **Text style** 控件的以下元素：
+ - `fontSize` - ([combo](api/diagram_editor/editbar/basic_controls/combo.md)) 设置字体大小
+ - `lineHeight` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) 设置行高
+ - `fontColor` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) 设置字体颜色
+ - `fontWeight` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) 设置字体粗细
+ - `fontStyle` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) 设置字体样式
+
+## 示例 {#example}
+
+~~~jsx {6-22}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "mindmap",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "textStyle",
+ label: "Text style",
+ $properties: {
+ fontSize: {
+ value: 20,
+ options: [
+ { id: 10, value: "10px" },
+ { id: 20, value: "20px" },
+ { id: 30, value: "30px" },
+ { id: 40, value: "40px" }
+ ]
+ }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls_overview.md
new file mode 100644
index 000000000..d9ad65b23
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/complex_controls_overview.md
@@ -0,0 +1,30 @@
+---
+sidebar_label: 复杂控件
+title: Editbar 指南 - 复杂控件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的复杂控件。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# 复杂控件 {#complex-controls}
+
+您可以使用 Editbar 的复杂控件为 Diagram 项目配置 Editbar。您可以在下方找到复杂控件列表。请查看相应部分，以查看每个控件的配置属性的详细说明。
+
+:::info
+请参阅 [Editbar 配置](guides/diagram_editor/editbar.md) 指南，了解更多配置信息！
+:::
+
+## Editbar 复杂控件概览 {#overview-of-editbar-complex-controls}
+
+| 名称 | 描述 |
+| :-------------------------------------------------------------------- | :---------------------------------------------------------------------- |
+| [](api/diagram_editor/editbar/complex_controls/arrange.md) | @getshort(api/diagram_editor/editbar/complex_controls/arrange.md) |
+| [](api/diagram_editor/editbar/complex_controls/border.md) | @getshort(api/diagram_editor/editbar/complex_controls/border.md) |
+| [](api/diagram_editor/editbar/complex_controls/gridstep.md) | @getshort(api/diagram_editor/editbar/complex_controls/gridstep.md) |
+| [](api/diagram_editor/editbar/complex_controls/header.md) | @getshort(api/diagram_editor/editbar/complex_controls/header.md) |
+| [](api/diagram_editor/editbar/complex_controls/headercommon.md) | @getshort(api/diagram_editor/editbar/complex_controls/headercommon.md) |
+| [](api/diagram_editor/editbar/complex_controls/headerposition.md) | @getshort(api/diagram_editor/editbar/complex_controls/headerposition.md)|
+| [](api/diagram_editor/editbar/complex_controls/lineshape.md) | @getshort(api/diagram_editor/editbar/complex_controls/lineshape.md) |
+| [](api/diagram_editor/editbar/complex_controls/pointerview.md) | @getshort(api/diagram_editor/editbar/complex_controls/pointerview.md) |
+| [](api/diagram_editor/editbar/complex_controls/position.md) | @getshort(api/diagram_editor/editbar/complex_controls/position.md) |
+| [](api/diagram_editor/editbar/complex_controls/size.md) | @getshort(api/diagram_editor/editbar/complex_controls/size.md) |
+| [](api/diagram_editor/editbar/complex_controls/textalign.md) | @getshort(api/diagram_editor/editbar/complex_controls/textalign.md) |
+| [](api/diagram_editor/editbar/complex_controls/textstyle.md) | @getshort(api/diagram_editor/editbar/complex_controls/textstyle.md) |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/controls_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/controls_property.md
new file mode 100644
index 000000000..3a92e09a2
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/controls_property.md
@@ -0,0 +1,83 @@
+---
+sidebar_label: controls
+title: Editbar 的 controls 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 controls 属性。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# controls
+
+### 描述 {#description}
+
+@short: 可选。定义一个或多个自定义控件的一组配置
+
+:::info
+`controls` 属性允许您基于[**基本控件**](api/diagram_editor/editbar/basic_controls_overview.md) 和/或 [**复杂控件**](api/diagram_editor/editbar/complex_controls_overview.md) 创建自定义 `Editbar` 控件。使用 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 属性将自定义控件应用到所需的元素（形状、组、泳道等）。
+
+请参阅 [**Editbar 配置**](guides/diagram_editor/editbar.md) 指南，了解更多配置信息！
+:::
+
+:::important
+我们不建议您在创建自定义控件时重新定义默认控件。请为每个自定义控件使用单独的名称！
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+controls?: {
+ [type: string]: object, // 自定义控件
+};
+~~~
+
+### 参数 {#parameters}
+
+- `type` - 自定义控件的类型名称
+ - `object` - 基于[**基本控件**](api/diagram_editor/editbar/basic_controls_overview.md) 和/或 [**复杂控件**](api/diagram_editor/editbar/complex_controls_overview.md) 的新控件的配置对象
+
+~~~jsx
+controls: {
+ estimate: { /*...*/ }, // 使用自定义配置创建新的 "estimate" 控件
+ // 另一个控件
+}
+~~~
+
+### 示例 {#example}
+
+~~~jsx {16-28}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // 显示默认 Editbar
+ // 或通过对象配置 Editbar
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ properties: {
+ $shape: [
+ { type: "estimate" }, // 应用 "estimate" 自定义控件
+ { type: "name" } // 应用 "name" 自定义控件
+ ]
+ },
+ controls: {
+ // 创建 "estimate" 自定义控件
+ estimate: {
+ type: "fieldset",
+ label: "Time estimate",
+ rows: [
+ { type: "datepicker", key: "date_start", label: "Date start" },
+ { type: "datepicker", key: "date_end", label: "Date end" }
+ ]
+ },
+ // 创建 "name" 自定义控件
+ name: { type: "input", label: "Name", key: "name" }
+ }
+ }
+ }
+});
+~~~
+
+**更新日志：** 该属性在 v6.0 中新增
+
+**相关文章：** [**Editbar 配置**](guides/diagram_editor/editbar.md)
+
+**相关示例：** [Diagram Editor。默认模式。带图例的 PERT 图表](https://snippet.dhtmlx.com/w8mrh3ay?mode=wide)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/css_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/css_property.md
new file mode 100644
index 000000000..66abc076c
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/css_property.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: css
+title: Editbar 的 css 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 css 属性。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# css
+
+### 描述 {#description}
+
+@short: 可选。为 Editbar 应用自定义 CSS 类
+
+### 用法 {#usage}
+
+~~~jsx
+css?: string;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // 显示默认 Editbar
+ // 或通过对象配置 Editbar
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ controls: {...},
+ properties: {...}
+ }
+ }
+});
+~~~
+
+**更新日志：** v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/properties_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/properties_property.md
new file mode 100644
index 000000000..dc6961ad3
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/properties_property.md
@@ -0,0 +1,131 @@
+---
+sidebar_label: properties
+title: Editbar 的 properties 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 properties 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# properties
+
+### 描述 {#description}
+
+@short: 可选。用于修改 Diagram 元素（形状、组、泳道等）控件的一组配置
+
+:::info
+`properties` 配置允许您执行以下操作：
+- 基于[**基础控件**](api/diagram_editor/editbar/basic_controls_overview.md)和/或[**复合控件**](api/diagram_editor/editbar/complex_controls_overview.md)修改所有或单个 Diagram 元素的 Editbar 控件
+- 将通过 [`controls`](api/diagram_editor/editbar/config/controls_property.md) 属性定义的自定义 Editbar 控件应用于 Diagram 元素
+- 指定将 Editbar 控件（自定义或默认）应用于 Diagram 元素的条件
+
+有关配置 Editbar 的更多信息，请参阅[**Editbar 配置**](guides/diagram_editor/editbar.md)指南！
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+properties?: {
+ [type: string]: object[] | function, // 应用于 Diagram 元素的控件的自定义配置
+};
+~~~
+
+### 参数 {#parameters}
+
+- `type` - Diagram 元素或元素组的名称
+ - `object` - Diagram 元素的配置对象
+
+ 或
+
+ - `function` - 一个回调函数，应返回一个包含 Diagram 元素控件配置的对象数组。该函数使用一个包含以下参数的对象调用：
+ - `item` -（可选）所选元素的对象
+ - `editor` -（必需）Diagram editor 的对象
+
+您可以为单个 Diagram 元素（例如 `rectangle`、`circle`、`card` 等）配置 Editbar 控件：
+
+~~~jsx
+properties: {
+ // 修改单个元素（形状）的 Editbar 控件
+ rectangle: [], // 配置 "rectangle" 类型的控件
+ circle: [], // 配置 "circle" 类型的控件
+ card: [], // 配置 "card" 类型的控件
+ estimate: [], // 配置自定义 "estimate" 类型的控件
+ // 其他元素
+}
+~~~
+
+您还可以为一组 Diagram 元素配置 Editbar 控件。以下服务属性可用于配置元素组：
+
+- [`$default`](guides/diagram_editor/editbar.md#configure-editbar-for-the-grid-area) - 允许在未选择任何元素或选择了多个元素时配置 Editbar 控件
+- [`$shape`](guides/diagram_editor/editbar.md#configure-editbar-for-shapes) - 允许为所有形状（包括自定义形状）配置 Editbar 控件
+- [`$group`](guides/diagram_editor/editbar.md#configure-editbar-for-group-elements) - 允许为所有 "group" 类型的元素配置 Editbar 控件
+- [`$swimlane`](guides/diagram_editor/editbar.md#configure-editbar-for-swimlanes) - 允许为所有 "swimlane" 类型的元素配置 Editbar 控件
+- [`$line`](guides/diagram_editor/editbar.md#configure-editbar-for-lines) - 允许为所有 "line" 类型的元素配置 Editbar 控件
+- [`$lineTitle`](guides/diagram_editor/editbar.md#configure-editbar-for-line-titles) - 允许为所有 "lineTitle" 类型的元素配置 Editbar 控件
+
+~~~jsx
+properties: {
+ $default: [],
+ $shape: [],
+ $group: [],
+ $swimlane: [],
+ $line: [],
+ $lineTitle: [],
+ // ... 其他参数
+}
+~~~
+
+### 示例 {#example}
+
+~~~jsx {10-44}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // 显示默认 Editbar
+ // 或通过对象配置 Editbar
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ properties: {
+ $shape: ({ item, editor }) => {
+ const controls = [
+ { type: "position" },
+ { type: "size" }
+ ];
+ if (item.hasOwnProperty("title")) {
+ controls.push({ type: "input", key: "title", label: "Title", wrap: true });
+ }
+ if (item.hasOwnProperty("text")) {
+ controls.push({ type: "textarea", key: "text", height: 200, label: "Text", wrap: true });
+ }
+ if (item.hasOwnProperty("img")) {
+ controls.push({ type: "avatar", key: "img", label: "Image", wrap: true });
+ }
+ return controls;
+ },
+ $group: [
+ {
+ type: "arrange",
+ $properties: {
+ angle: { hidden: true }
+ }
+ },
+ { type: "header" },
+ {
+ type: "border",
+ $properties: {
+ stroke: { key: ["style", "stroke"] },
+ strokeType: { hidden: true },
+ strokeWidth: { key: ["style", "strokeWidth"], width: "85%" }
+ }
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+**更新日志**：该属性已在 v6.0 中新增
+
+**相关文章：** [**Editbar 配置**](guides/diagram_editor/editbar.md)
+
+**相关示例：** [Diagram Editor 默认模式。Editbar 的自定义。添加形状计数器](https://snippet.dhtmlx.com/ealq0m4l?mode=wide)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/show_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/show_property.md
new file mode 100644
index 000000000..908df5445
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/show_property.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: show
+title: Editbar 的 show 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 show 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# show
+
+### 描述 {#description}
+
+@short: 可选。定义初始化时是否显示 Editbar
+
+### 用法 {#usage}
+
+~~~jsx
+show?: boolean;
+~~~
+
+### 默认配置 {#default-config}
+
+~~~jsx
+show: true
+~~~
+
+### 示例 {#example}
+
+~~~jsx {8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // 显示默认 Editbar
+ // 或通过对象配置 Editbar
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ controls: {...},
+ properties: {...}
+ }
+ }
+});
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/width_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/width_property.md
new file mode 100644
index 000000000..7b3d75df1
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/config/width_property.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: width
+title: Editbar 的 width 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editbar 的 width 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# width
+
+### 描述 {#description}
+
+@short: 可选。定义 Editbar 的宽度
+
+### 用法 {#usage}
+
+~~~jsx
+width?: number;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ // editbar: true, // 显示默认 Editbar
+ // 或通过对象配置 Editbar
+ editbar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ controls: {...},
+ properties: {...}
+ }
+ }
+});
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/api_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/api_overview.md
new file mode 100644
index 000000000..8a6dcf001
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/api_overview.md
@@ -0,0 +1,72 @@
+---
+sidebar_label: API 概览
+title: Editor API 概览
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中查看 Editor API 概览。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# Editor API 概览 {#editor-api-overview}
+
+## Editor 方法 {#editor-methods}
+
+| Name | 描述 |
+| :------------------------------------------------------------ | :-------------------------------------------------------------------- |
+| [](api/diagram_editor/editor/methods/destructor_method.md) | @getshort(api/diagram_editor/editor/methods/destructor_method.md) |
+| [](api/diagram_editor/editor/methods/import_method.md) | @getshort(api/diagram_editor/editor/methods/import_method.md) |
+| [](api/diagram_editor/editor/methods/paint_method.md) | @getshort(api/diagram_editor/editor/methods/paint_method.md) |
+| [](api/diagram_editor/editor/methods/parse_method.md) | @getshort(api/diagram_editor/editor/methods/parse_method.md) |
+| [](api/diagram_editor/editor/methods/serialize_method.md) | @getshort(api/diagram_editor/editor/methods/serialize_method.md) |
+| [](api/diagram_editor/editor/methods/zoomin_method.md) | @getshort(api/diagram_editor/editor/methods/zoomin_method.md) |
+| [](api/diagram_editor/editor/methods/zoomout_method.md) | @getshort(api/diagram_editor/editor/methods/zoomout_method.md) |
+
+## Editor 事件 {#editor-events}
+
+| Name | 描述 |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------- |
+| [](api/diagram_editor/editor/events/aftergroupmove_event.md) | @getshort(api/diagram_editor/editor/events/aftergroupmove_event.md) |
+| [](api/diagram_editor/editor/events/afteritemcatch_event.md) | @getshort(api/diagram_editor/editor/events/afteritemcatch_event.md) |
+| [](api/diagram_editor/editor/events/afteritemmove_event.md) | @getshort(api/diagram_editor/editor/events/afteritemmove_event.md) |
+| [](api/diagram_editor/editor/events/afteritemresize_event.md) | @getshort(api/diagram_editor/editor/events/afteritemresize_event.md) |
+| [](api/diagram_editor/editor/events/afteritemrotate_event.md) | @getshort(api/diagram_editor/editor/events/afteritemrotate_event.md) |
+| [](api/diagram_editor/editor/events/afterlinetitlemove_event.md) | @getshort(api/diagram_editor/editor/events/afterlinetitlemove_event.md) |
+| [](api/diagram_editor/editor/events/aftershapeiconclick_event.md) | @getshort(api/diagram_editor/editor/events/aftershapeiconclick_event.md) |
+| [](api/diagram_editor/editor/events/aftershapemove_event.md) | @getshort(api/diagram_editor/editor/events/aftershapemove_event.md) |
+| [](api/diagram_editor/editor/events/beforegroupmove_event.md) | @getshort(api/diagram_editor/editor/events/beforegroupmove_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemcatch_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemcatch_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemmove_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemmove_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemresize_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemresize_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemrotate_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemrotate_event.md) |
+| [](api/diagram_editor/editor/events/beforelinetitlemove_event.md) | @getshort(api/diagram_editor/editor/events/beforelinetitlemove_event.md) |
+| [](api/diagram_editor/editor/events/beforeshapeiconclick_event.md)| @getshort(api/diagram_editor/editor/events/beforeshapeiconclick_event.md) |
+| [](api/diagram_editor/editor/events/beforeshapemove_event.md) | @getshort(api/diagram_editor/editor/events/beforeshapemove_event.md) |
+| [](api/diagram_editor/editor/events/groupmoveend_event.md) | @getshort(api/diagram_editor/editor/events/groupmoveend_event.md) |
+| [](api/diagram_editor/editor/events/itemmoveend_event.md) | @getshort(api/diagram_editor/editor/events/itemmoveend_event.md) |
+| [](api/diagram_editor/editor/events/itemresizeend_event.md) | @getshort(api/diagram_editor/editor/events/itemresizeend_event.md) |
+| [](api/diagram_editor/editor/events/itemrotateend_event.md) | @getshort(api/diagram_editor/editor/events/itemrotateend_event.md) |
+| [](api/diagram_editor/editor/events/itemtarget_event.md) | @getshort(api/diagram_editor/editor/events/itemtarget_event.md) |
+| [](api/diagram_editor/editor/events/linetitlemoveend_event.md) | @getshort(api/diagram_editor/editor/events/linetitlemoveend_event.md) |
+| [](api/diagram_editor/editor/events/shapemoveend_event.md) | @getshort(api/diagram_editor/editor/events/shapemoveend_event.md) |
+| [](api/diagram_editor/editor/events/shaperesize_event.md) | @getshort(api/diagram_editor/editor/events/shaperesize_event.md) |
+| [](api/diagram_editor/editor/events/zoomin_event.md) | @getshort(api/diagram_editor/editor/events/zoomin_event.md) |
+| [](api/diagram_editor/editor/events/zoomout_event.md) | @getshort(api/diagram_editor/editor/events/zoomout_event.md) |
+
+
+## Editor 属性 {#editor-properties}
+
+| Name | 描述 |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------ |
+| [](api/diagram_editor/editor/config/autoplacement_property.md) | @getshort(api/diagram_editor/editor/config/autoplacement_property.md) |
+| [](api/diagram_editor/editor/config/connectionpoints_property.md) | @getshort(api/diagram_editor/editor/config/connectionpoints_property.md) |
+| [](api/diagram_editor/editor/config/defaults_property.md) | @getshort(api/diagram_editor/editor/config/defaults_property.md) |
+| [](api/diagram_editor/editor/config/editmode_property.md) | @getshort(api/diagram_editor/editor/config/editmode_property.md) |
+| [](api/diagram_editor/editor/config/grid_property.md) | @getshort(api/diagram_editor/editor/config/grid_property.md) |
+| [](api/diagram_editor/editor/config/gridstep_property.md) | @getshort(api/diagram_editor/editor/config/gridstep_property.md) |
+| [](api/diagram_editor/editor/config/hotkeys_property.md) | @getshort(api/diagram_editor/editor/config/hotkeys_property.md) |
+| [](api/diagram_editor/editor/config/itemsdraggable_property.md) | @getshort(api/diagram_editor/editor/config/itemsdraggable_property.md) |
+| [](api/diagram_editor/editor/config/lineconfig_property.md) | @getshort(api/diagram_editor/editor/config/lineconfig_property.md) |
+| [](api/diagram_editor/editor/config/magnetic_property.md) | @getshort(api/diagram_editor/editor/config/magnetic_property.md) |
+| [](api/diagram_editor/editor/config/resizepoints_property.md) | @getshort(api/diagram_editor/editor/config/resizepoints_property.md) |
+| [](api/diagram_editor/editor/config/scale_property.md) | @getshort(api/diagram_editor/editor/config/scale_property.md) |
+| [](api/diagram_editor/editor/config/shapetoolbar_property.md) | @getshort(api/diagram_editor/editor/config/shapetoolbar_property.md) |
+| [](api/diagram_editor/editor/config/shapetype_property.md) | @getshort(api/diagram_editor/editor/config/shapetype_property.md) |
+| [](api/diagram_editor/editor/config/type_property.md) | @getshort(api/diagram_editor/editor/config/type_property.md) |
+| [](api/diagram_editor/editor/config/view_property.md) | @getshort(api/diagram_editor/editor/config/view_property.md) |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md
new file mode 100644
index 000000000..2e8fec1b2
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md
@@ -0,0 +1,125 @@
+---
+sidebar_label: autoplacement
+title: Editor 的 autoplacement 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 autoplacement 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# autoplacement
+
+### 描述 {#description}
+
+@short: 可选。一个用于配置形状自动布局的对象
+
+:::info
+`autoplacement` 属性仅在 editor 的默认模式下有效，且仅适用于形状。如果使用群组或泳道，则该属性不起作用。
+:::
+
+### 用法 {#usage}
+
+~~~ts
+autoplacement?: {
+ mode?: "direct" | "edges", // 默认为 "direct"
+ graphPadding?: number, // 默认为 200
+ placeMode?: "orthogonal" | "radial", // 默认为 "orthogonal"
+ itemPadding?: number, // 默认为 20
+ levelPadding?: number // 默认为 20
+};
+~~~
+
+### 参数 {#parameters}
+
+`autoplacement` 对象包含以下参数：
+
+- `mode` - （可选）形状的连接模式，`"direct"`（默认）或 `"edges"`
+- `graphPadding` - （可选）设置未连接图表之间的距离，默认为 *200*
+- `placeMode` - （可选）设置形状的排列模式，`"orthogonal"`（默认）或 `"radial"`
+- `itemPadding` - （可选）元素之间的最小间距（最小值为 *1*），默认为 *20*
+- `levelPadding` - （可选）层级之间的最小间距（最小值为 *1*），默认为 *20*
+
+### 默认配置 {#default-config}
+
+~~~jsx
+autoplacement: {
+ mode: "direct",
+ graphPadding: 200,
+ placeMode: "orthogonal",
+ itemPadding: 20,
+ levelPadding: 20
+}
+~~~
+
+### 示例 {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ autoplacement: {
+ placeMode: "radial",
+ mode: "direct",
+ itemPadding: 10,
+ levelPadding: 10,
+ graphPadding: 100
+ }
+});
+
+editor.parse(data);
+~~~
+
+## 形状连接模式 {#modes-of-connecting-shapes}
+
+### "direct" 模式 {#direct-mode}
+
+无箭头的连接线按“从中心到中心”对齐，呈直线和对角线状。
+
+
+
+### "edges" 模式 {#edges-mode}
+
+连接线按“从边到边”的方式对齐。
+
+:::info
+若要为线条添加箭头，请在[线条对象](lines/configuration_properties.md)的配置中指定 `forwardArrow: "filled"` 或 `backArrow: "filled"`。
+:::
+
+`"edges"` 模式下的连接线可以是：
+
+- 直线（如果为[线条对象](lines/configuration_properties.md)设置 `connectType: "straight"` 属性）
+
+
+
+- 或 90 度折线（如果为[线条对象](lines/configuration_properties.md)设置 `connectType: "elbow"` 属性）
+
+
+
+## 形状排列模式 {#modes-of-placement-of-shapes}
+
+### "orthogonal" 模式 {#orthogonal-mode}
+
+形状沿垂直和水平线排列
+
+- `"orthogonal"` 排列方式配合 `"direct"` 模式的连接线
+
+
+
+- `"orthogonal"` 排列方式配合 `"edges"` 模式的连接线
+
+
+
+### "radial" 模式 {#radial-mode}
+
+形状围绕中心形状（即连接数最多的形状）排列在假想的圆周上
+
+- `"radial"` 排列方式配合 `"direct"` 模式的连接线
+
+
+
+- `"radial"` 排列方式配合 `"edges"` 模式的连接线
+
+
+
+**更新日志**：
+
+- `itemPadding` 和 `levelPadding` 参数在 v6.1.3 中新增
+- `placeMode` 参数在 v5.0 中新增
+- `autoplacement` 属性在 v3.0 中新增
+
+**相关示例：** [Diagram Editor。默认模式。径向自动布局算法](https://snippet.dhtmlx.com/f0cespbk)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/connectionpoints_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/connectionpoints_property.md
new file mode 100644
index 000000000..d12268f01
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/connectionpoints_property.md
@@ -0,0 +1,39 @@
+---
+sidebar_label: connectionPoints
+title: Editor 的 connectionPoints 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 connectionPoints 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# connectionPoints
+
+### 描述 {#description}
+
+@short: 可选。启用/禁用通过连接控件连接形状的功能
+
+:::info
+`connectionPoints` 属性仅在 `default` 模式下有效。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+connectionPoints?: boolean;
+~~~
+
+### 默认配置 {#default-config}
+
+~~~jsx
+connectionPoints: true
+~~~
+
+### 示例 {#example}
+
+~~~jsx {3}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default", // 仅支持 "default"
+ connectionPoints: false, // 默认为 true
+ // 其他配置
+});
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/defaults_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/defaults_property.md
new file mode 100644
index 000000000..1f9455e66
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/defaults_property.md
@@ -0,0 +1,71 @@
+---
+sidebar_label: defaults
+title: Editor 的 defaults 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 defaults 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# defaults
+
+### 描述 {#description}
+
+@short: 可选。用于设置形状或线条默认配置的对象
+
+### 用法 {#usage}
+
+~~~jsx
+defaults?: {
+ [type: string]: object
+};
+~~~
+
+### 参数 {#parameters}
+
+`defaults` 对象可以包含一组 `key:value` 键值对，其中 *key* 是形状或线条的类型，*value* 是相应[形状](shapes/configuration_properties.md)或[线条](lines/configuration_properties.md)的一组配置设置。
+
+:::note
+`type` 和 `id` 属性不能在形状/线条的默认配置中定义。
+:::
+
+### 示例 {#example}
+
+~~~jsx {24}
+const defaults = {
+ // "rectangle" 类型所有形状的默认设置
+ rectangle: {
+ fill: "#CEEFE1",
+ stroke: "#0AB169",
+ strokeWidth: 2,
+ width: 140,
+ height: 140,
+ text: "Default text"
+ },
+ // "line" 类型所有线条的默认设置
+ line: {
+ strokeWidth: 3,
+ stroke: "#245CE0"
+ },
+ // "dash" 类型所有线条的默认设置
+ dash: {
+ strokeWidth: 3,
+ stroke: "#245CE0"
+ }
+};
+
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ defaults
+});
+~~~
+
+:::info
+为形状/线条的各个类型定义默认设置后，在为这些类型的形状/线条[准备数据集](guides/loading_data.md#preparing-data-to-load)时，您可以省略这些属性，也可以重新定义它们的值。
+:::
+
+**更新日志**：为线条设置默认配置的功能在 v4.2 中新增
+
+**相关文章：**
+
+- [设置形状的默认配置](guides/diagram/configuration.md#setting-the-default-configuration-of-a-shape)
+- [设置形状预览](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes)
+
+**相关示例：** [Diagram Editor。设置默认线条（连接器）类型。尝试将形状 A 连接到形状 B](https://snippet.dhtmlx.com/22abzn5m)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/editmode_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/editmode_property.md
new file mode 100644
index 000000000..4a575c705
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/editmode_property.md
@@ -0,0 +1,25 @@
+---
+sidebar_label: editMode
+title: Editor 的 editMode 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 editMode 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# editMode
+
+### 描述 {#description}
+
+@short: 可选。隐藏/显示 editor 的左右面板
+
+### 用法 {#usage}
+
+~~~jsx
+editMode?: boolean;
+~~~
+
+### 示例 {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ editMode: false
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/grid_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/grid_property.md
new file mode 100644
index 000000000..9008fb5b9
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/grid_property.md
@@ -0,0 +1,35 @@
+---
+sidebar_label: grid
+title: Editor 的 grid 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editor 的 grid 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# grid
+
+### 描述 {#description}
+
+@short: 可选。启用/禁用在 Editor 画布上显示的网格
+
+### 用法 {#usage}
+
+~~~jsx
+grid?: boolean;
+~~~
+
+### 默认配置 {#default-config}
+
+~~~jsx
+grid: true
+~~~
+
+### 示例 {#example}
+
+~~~jsx {3}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default", // "org" | "mindmap" | "default"
+ grid: false, // 默认为 true
+ // 其他配置项
+});
+~~~
+
+**更新日志：** v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/gridstep_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/gridstep_property.md
new file mode 100644
index 000000000..86954b9d1
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/gridstep_property.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: gridStep
+title: Editor 的 gridStep 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editor 的 gridStep 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# gridStep
+
+### 描述 {#description}
+
+@short: 可选。设置网格步长的大小，该步长决定了移动项目时的步进距离
+
+当您更改网格步长的值时，网格区域中各点之间的距离也会随之改变
+
+### 用法 {#usage}
+
+~~~jsx
+gridStep?: number;
+~~~
+
+:::info
+指定的数字必须大于或等于 1
+:::
+
+### 默认配置 {#default-config}
+
+~~~jsx
+gridStep: 10
+~~~
+
+### 示例 {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ gridStep:20
+});
+~~~
+
+:::note
+我们建议您在 Editor 中移动项目时使用方向键。这种方式每次仅精确移动一个网格步长，而使用鼠标移动则可能导致项目一次移动多个网格步长。
+:::
+
+**相关文章：** [网格区域](guides/diagram_editor/grid_area.md)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/hotkeys_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/hotkeys_property.md
new file mode 100644
index 000000000..0ea432566
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/hotkeys_property.md
@@ -0,0 +1,104 @@
+---
+sidebar_label: hotkeys
+title: Editor 的 hotkeys 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editor 的 hotkeys 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# hotkeys
+
+### 描述 {#description}
+
+@short: 可选。允许管理 Editor 中各种操作的键盘快捷键（hotkeys）
+
+您可以完全禁用所有快捷键，禁用特定的组合键，或使用自定义函数覆盖它们的行为。
+
+:::note
+请注意，启用或禁用默认快捷键也会影响它们作为工具提示或标签在 Editor 工具栏中的可见性。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+hotkeys?:
+ | boolean
+ | {
+ [key: string]: false | ((event: KeyboardEvent) => void);
+ };
+~~~
+
+### 参数 {#parameters}
+
+- `hotkeys: boolean` - 如果设置为 *false*，则禁用所有标准快捷键；如果设置为 *true*，则启用所有标准快捷键
+- `hotkeys: object` - 一个对象，其键对应快捷键名称（例如 `"ctrl+c"`、`"delete"`），值按以下方式定义其行为：
+ - `false` - 禁用指定的快捷键
+ - `(event: KeyboardEvent) => void` - 定义一个自定义函数，当按下该快捷键时会执行该函数。函数接收一个 `KeyboardEvent` 对象作为参数
+
+### 示例 {#example}
+
+- 禁用所有快捷键
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ hotkeys: false,
+});
+~~~
+
+- 禁用特定的快捷键（在下面的示例中为 `Ctrl+C` 和 `Ctrl+V`）
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ hotkeys: {
+ "ctrl+c": false,
+ "ctrl+v": false
+ },
+});
+~~~
+
+- 覆盖快捷键的行为
+
+~~~jsx
+let editor = null;
+
+editor = new dhx.DiagramEditor("editor_container", {
+ hotkeys: {
+ // 覆盖 "delete" 键以移除选中的元素
+ "delete": () => editor.diagram.data.remove(editor.diagram.selection.getIds()),
+ // 添加自定义快捷键 "Ctrl+F"
+ "ctrl+f": () => console.log("custom search"),
+ },
+});
+~~~
+
+### 描述 {#description-1}
+
+下表介绍了标准快捷键执行的操作，并提供了可被覆盖的快捷键对应的键字符串参数：
+
+#### 快捷键表格 {#hotkeys-table}
+
+| 快捷键组合 | 描述 | 参数键字符串 |
+|--------------------------------|------------------------------------------------------|-------------------------|
+| `Alt+1` | 显示/隐藏形状栏（仅 default 模式下） | `"alt+1"` |
+| `Alt+2` | 显示/隐藏编辑栏 | `"alt+2"` |
+| `Alt+3` | 显示/隐藏网格区域 | `"alt+3"` |
+| `Ctrl+Z`（Win）、`CMD+Z`（macOS）| 撤销最近一次操作 | `"ctrl+z"` |
+| `Ctrl+Shift+Z`（Win）、`CMD+Shift+Z`（macOS）| 恢复已撤销的操作 | `"ctrl+shift+z"` |
+| `Ctrl+D`（Win）、`CMD+D`（macOS）| 创建选中元素的副本（仅 default 模式下） | `"ctrl+d"` |
+| `Ctrl+C`（Win）、`CMD+C`（macOS）| 复制选中的元素（仅 default 模式下） | `"ctrl+c"` |
+| `Ctrl+V`（Win）、`CMD+V`（macOS）| 粘贴选中的元素（仅 default 模式下） | `"ctrl+v"` |
+| `Ctrl+Alt+C`（Win）、`CMD+Alt+C`（macOS）| 复制选中项的样式（适用于同类元素）| `"alt+ctrl+c"` |
+| `Ctrl+Alt+V`（Win）、`CMD+Alt+V`（macOS）| 将复制的样式应用于选中项（适用于同类元素）| `"alt+ctrl+v"` |
+| `Ctrl+A`（Win）、`CMD+A`（macOS）| 选中所有项目 | `"ctrl+a"` |
+| `Ctrl+Shift+A`（Win）、`CMD+Shift+A`（macOS）| 取消选中所有已选中的项目 | `"ctrl+shift+a"` |
+| `Shift+Left Click` | 将某项添加到已选中项目列表中 | （不是直接的 `hotkeys` 参数键） |
+| `Alt+Left Click` | 取消选中所选项目 | （不是直接的 `hotkeys` 参数键） |
+| `Delete`（`Del`）、`Backspace` | 删除项目 | `"delete"`、`"backspace"` |
+| `Arrow-Left`、`Arrow-Right`、`Arrow-Up`、`Arrow-Down`| 移动选中的项目 | `"arrowLeft"`、`"arrowRight"`、`"arrowUp"`、`"arrowDown"` |
+| `Ctrl+Mousewheel`（Win）、`CMD+Mousewheel`（macOS）| 增大/减小缩放值 | （不是直接的 `hotkeys` 参数键） |
+
+**更新日志：**
+
+- `hotkeys` 属性在 v6.1 中新增
+
+**相关示例：**
+
+- [Diagram Editor. 通过 API 管理快捷键的添加、修改和禁用](https://snippet.dhtmlx.com/8ads5dq8)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/itemsdraggable_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/itemsdraggable_property.md
new file mode 100644
index 000000000..30e40f7e8
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/itemsdraggable_property.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: itemsDraggable
+title: Editor 的 itemsDraggable 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Editor 的 itemsDraggable 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# itemsDraggable
+
+:::info
+该属性仅在 org chart 和 mindmap 模式下有效。被移动的项目会连同其所有子项一起被拖动。
+:::
+
+### 描述 {#description}
+
+@short: 可选。启用/禁用将项目从一个父项目拖动到另一个父项目
+
+### 用法 {#usage}
+
+~~~jsx
+itemsDraggable?: boolean;
+~~~
+
+### 默认配置 {#default-config}
+
+~~~jsx
+itemsDraggable: true
+~~~
+
+### 示例 {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor(document.body, {
+ type: "org", // org" or "mindmap"
+ itemsDraggable: false
+});
+~~~
+
+**更新日志：** v4.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/lineconfig_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/lineconfig_property.md
new file mode 100644
index 000000000..29aa299d9
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/lineconfig_property.md
@@ -0,0 +1,85 @@
+---
+sidebar_label: lineConfig
+title: lineConfig 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 lineConfig 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# lineConfig
+
+### 描述 {#description}
+
+@short: 可选。一个包含连接线默认配置的对象
+
+:::info
+`lineType`、`lineDirection` 和 `arrowsHidden` 设置将应用于通过 Editor 添加的新连接线。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+lineConfig?: {
+ lineType?: "dash" | "line",
+ lineDirection?: "backArrow" | "forwardArrow",
+ arrowsHidden?: boolean,
+ lineGap?: number,
+ connectType?: "elbow" | "straight" | "curved" // "curved" 类型仅在 mindmap 模式下使用
+};
+~~~
+
+### 参数 {#parameters}
+
+`lineConfig` 对象包含以下参数：
+
+- `lineType` -（可选）新连接线的默认类型。如果连接线对象不包含 `"type"` 属性，则应用该值
+- `lineDirection` -（可选）新连接线的方向
+- `arrowsHidden` -（可选）定义是否隐藏新连接线的箭头
+- `lineGap` -（可选）设置连接线到直角弯折处的距离
+- `connectType` -（可选）设置线条的连接类型：`"elbow"` | `"straight"` | `"curved"`（`"curved"` 类型仅在 mindmap Diagram 模式下使用）。如果连接线对象不包含 `"connectType"` 属性，则应用该值
+
+:::note
+`lineDirection`、`arrowsHidden` 和 `lineGap` 参数仅在 Editor 的 default 模式下有效（*type: `"default"`*）
+:::
+
+### 默认配置 {#default-config}
+
+~~~jsx
+lineConfig: {
+ lineType:"line",
+ lineDirection: "forwardArrow",
+ arrowsHidden: false,
+ lineGap: 10
+}
+~~~
+
+`connectType` 参数具有以下默认值：
+
+- `"elbow"` - 适用于 default 和 org chart 模式
+- `"curved"` - 适用于 mindmap 模式（该类型仅在 mindmap 模式下使用）
+
+### 示例 {#example}
+
+~~~jsx {2-9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ lineConfig: {
+ lineType: "dash",
+ lineDirection: "backArrow",
+ arrowsHidden: true,
+ lineGap: 50,
+ connectType: "straight"
+ },
+ // 其他配置参数
+});
+~~~
+
+应用 `lineGap` 属性后的效果如下图所示：
+
+
+
+**更新日志：**
+
+- `connectType` 参数在 v6.1 中新增
+- `lineGap` 参数在 v5.0 中新增（请查看[迁移文章](migration.md#42---50)）
+- v4.2 中新增
+
+**相关示例：** [Diagram editor. 设置默认线条（连接线）类型。尝试将形状 A 连接到形状 B](https://snippet.dhtmlx.com/22abzn5m)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/magnetic_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/magnetic_property.md
new file mode 100644
index 000000000..ac616a310
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/magnetic_property.md
@@ -0,0 +1,68 @@
+---
+sidebar_label: magnetic
+title: 编辑器的 magnetic 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 magnetic 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天试用版。
+---
+
+# magnetic
+
+:::info
+`magnetic` 属性仅在编辑器的 `default` 模式下起作用（`type: "default"`）
+:::
+
+### 描述 {#description}
+
+@short: 可选。定义在移动形状时是否显示对齐线；如果显示，还可以配置其外观
+
+:::tip
+当您移动的形状的中心或侧边极值坐标与附近静态形状的中心或侧边极值坐标重合时，将显示对齐线
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+magnetic?: {
+ show?: boolean,
+ lineWidth?: number,
+ lineColor?: string
+} | boolean;
+~~~
+
+### 默认配置 {#default-config}
+
+~~~jsx
+magnetic: true
+~~~
+
+通过以下配置可启用 magnetic 模式：
+
+~~~jsx
+magnetic: {
+ show: true,
+ lineWidth: 2,
+ lineColor: "#000"
+}
+~~~
+
+### 参数 {#parameters}
+
+作为对象时，`magnetic` 属性可以包含以下参数：
+
+- `show` -（可选）用于启用或禁用移动形状时显示的对齐线
+- `lineWidth` -（可选）对齐线的宽度（默认值为 2）
+- `lineColor` -（可选）对齐线的颜色（默认值为 *"#000"*）
+
+### 示例 {#example}
+
+~~~jsx {3-7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ magnetic: {
+ show: true,
+ lineWidth: 2,
+ lineColor: "#B0B8CD"
+ }
+});
+~~~
+
+**更新日志**：`show` 参数已在 v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/overview.md
new file mode 100644
index 000000000..cfe63fedd
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/overview.md
@@ -0,0 +1,26 @@
+---
+sidebar_label: 编辑器属性
+title: 编辑器属性概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中探索编辑器属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天试用版。
+---
+
+# 编辑器属性概述 {#editor-properties-overview}
+
+| 名称 | 描述 |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------ |
+| [](api/diagram_editor/editor/config/autoplacement_property.md) | @getshort(api/diagram_editor/editor/config/autoplacement_property.md) |
+| [](api/diagram_editor/editor/config/connectionpoints_property.md) | @getshort(api/diagram_editor/editor/config/connectionpoints_property.md) |
+| [](api/diagram_editor/editor/config/defaults_property.md) | @getshort(api/diagram_editor/editor/config/defaults_property.md) |
+| [](api/diagram_editor/editor/config/editmode_property.md) | @getshort(api/diagram_editor/editor/config/editmode_property.md) |
+| [](api/diagram_editor/editor/config/grid_property.md) | @getshort(api/diagram_editor/editor/config/grid_property.md) |
+| [](api/diagram_editor/editor/config/gridstep_property.md) | @getshort(api/diagram_editor/editor/config/gridstep_property.md) |
+| [](api/diagram_editor/editor/config/hotkeys_property.md) | @getshort(api/diagram_editor/editor/config/hotkeys_property.md) |
+| [](api/diagram_editor/editor/config/itemsdraggable_property.md) | @getshort(api/diagram_editor/editor/config/itemsdraggable_property.md) |
+| [](api/diagram_editor/editor/config/lineconfig_property.md) | @getshort(api/diagram_editor/editor/config/lineconfig_property.md) |
+| [](api/diagram_editor/editor/config/magnetic_property.md) | @getshort(api/diagram_editor/editor/config/magnetic_property.md) |
+| [](api/diagram_editor/editor/config/resizepoints_property.md) | @getshort(api/diagram_editor/editor/config/resizepoints_property.md) |
+| [](api/diagram_editor/editor/config/scale_property.md) | @getshort(api/diagram_editor/editor/config/scale_property.md) |
+| [](api/diagram_editor/editor/config/shapetoolbar_property.md) | @getshort(api/diagram_editor/editor/config/shapetoolbar_property.md) |
+| [](api/diagram_editor/editor/config/shapetype_property.md) | @getshort(api/diagram_editor/editor/config/shapetype_property.md) |
+| [](api/diagram_editor/editor/config/type_property.md) | @getshort(api/diagram_editor/editor/config/type_property.md) |
+| [](api/diagram_editor/editor/config/view_property.md) | @getshort(api/diagram_editor/editor/config/view_property.md) |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/resizepoints_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/resizepoints_property.md
new file mode 100644
index 000000000..30efde17c
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/resizepoints_property.md
@@ -0,0 +1,35 @@
+---
+sidebar_label: resizePoints
+title: 编辑器的 resizePoints 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 resizePoints 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天试用版。
+---
+
+# resizePoints
+
+### 描述 {#description}
+
+@short: 可选。启用或禁用通过调整大小控件来调整形状大小的功能
+
+### 用法 {#usage}
+
+~~~jsx
+resizePoints?: boolean;
+~~~
+
+### 默认配置 {#default-config}
+
+~~~jsx
+resizePoints: true
+~~~
+
+### 示例 {#example}
+
+~~~jsx {3}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default", // "org" | "mindmap" | "default"
+ resizePoints: false, // 默认为 true
+ // 其他配置
+});
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/scale_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/scale_property.md
new file mode 100644
index 000000000..b1332d177
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/scale_property.md
@@ -0,0 +1,31 @@
+---
+sidebar_label: scale
+title: 编辑器的 scale 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 scale 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天试用版。
+---
+
+# scale
+
+### 描述 {#description}
+
+@short: 可选。定义 Diagram Editor 的缩放比例
+
+### 用法 {#usage}
+
+~~~jsx
+scale?: number;
+~~~
+
+### 默认配置 {#default-config}
+
+~~~jsx
+scale: 1
+~~~
+
+### 示例 {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ scale: 0.9
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetoolbar_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetoolbar_property.md
new file mode 100644
index 000000000..6a50a994f
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetoolbar_property.md
@@ -0,0 +1,89 @@
+---
+sidebar_label: shapeToolbar
+title: 编辑器的 shapeToolbar 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 shapeToolbar 属性。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天试用版。
+---
+
+# shapeToolbar
+
+### 描述 {#description}
+
+@short: 可选。定义应在图表项的个人工具栏中显示哪些控件
+
+### 用法 {#usage}
+
+~~~jsx
+shapeToolbar?: boolean | array;
+~~~
+
+### 参数 {#parameters}
+
+作为数组时，`shapeToolbar` 属性可以包含：
+
+- 一个 *boolean* 值 - 用于显示或隐藏默认工具栏
+- 带有工具栏控件名称的字符串值。这些值在数组中的排列顺序决定了控件在工具栏中的显示顺序。可用的值如下：
+ - 在默认模式下：`"copy"` | `"connect"` | `"remove"` | `"addRowLast"` | `"addColumnLast"`
+ - 在组织结构图模式下：`"add"` | `"horizontal"` | `"vertical"` | `"remove"`
+ - 在思维导图模式下：`"add"` | `"addLeft"` | `"addRight"` | `"remove"`
+- 一组图标对象。每个图标对象可以具有以下属性：
+ - `id: string` -（必需）图标的 id。请注意，禁止将工具栏控件的默认名称用作新控件的 id
+ - `content: string` -（必需）图标的内容，可以包含带有图标类名的 HTML 元素
+ - `check: function` -（可选）用于检查该图标是否应用于形状。该函数接收一个形状对象作为参数，如果将为该形状渲染此图标，则返回 *true*
+ - `css: function` -（可选）返回应应用于形状的 CSS 类名称的函数
+ - `tooltip: string` -（可选）鼠标悬停在图标上时显示的工具提示
+
+### 示例 {#example}
+
+~~~jsx title="将属性设置为布尔值"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ shapeToolbar: false, // 默认为 true
+});
+~~~
+
+~~~jsx title="将属性设置为图标名称或图标对象的数组"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ shapeToolbar: [
+ "add",
+ // 添加自定义 "download" 控件
+ {
+ id: "download",
+ content: "",
+ tooltip: "Download to PDF"
+ },
+ {
+ id: "remove",
+ content: "",
+ check: item => item.parent,
+ css: () => "dhx_diagram_toolbar__icon--remove",
+ tooltip: "Remove"
+ }
+ ]
+});
+~~~
+
+### 为特定项目重新定义默认工具栏 {#redefining-the-default-toolbar-for-certain-items}
+
+您可能需要为部分项目提供特定的工具栏控件，而其他项目则使用默认工具栏。在这种情况下，您应在 `shapeToolbar` 数组中指定 *true* 值以启用默认工具栏，并添加必要的图标对象，该对象应包含一个 check 函数来定义该图标将应用于哪种形状。
+
+~~~jsx title="为 start 类型的项设置下载图标"
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeToolbar:
+ [
+ true,
+ {
+ id: "download",
+ content: "",
+ tooltip: "Download to PDF",
+ check: item => item.type === "start"
+ }
+ ]
+});
+~~~
+
+**更新日志：** 图标对象的 `tooltip` 参数已在 v5.0 中新增
+
+**相关文章：** [网格区域](guides/diagram_editor/grid_area.md#configuring-the-toolbar-of-an-item)
+
+**相关示例：** [Diagram Editor。组织结构图模式。形状工具栏配置](https://snippet.dhtmlx.com/b2agwets)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetype_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetype_property.md
new file mode 100644
index 000000000..9e5dc0deb
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/shapetype_property.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: shapeType
+title: Editor 的 shapeType 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 shapeType 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# shapeType
+
+### 描述 {#description}
+
+@short: 可选。元素的类型
+
+如果 shape 对象不包含 `"type"` 属性，则会应用此值
+
+### 用法 {#usage}
+
+~~~jsx
+shapeType?: string;
+~~~
+
+### 默认配置 {#default-config}
+
+在 Editor 的默认模式下 (type: `"default"`)：
+
+~~~jsx
+shapeType: "rectangle"
+~~~
+
+在 Editor 的组织结构图模式下 (type: `"card"`)：
+
+~~~jsx
+shapeType: "card"
+~~~
+
+在 Editor 的思维导图模式下 (type: `"topic"`)：
+
+~~~jsx
+shapeType: "topic"
+~~~
+
+### 示例 {#example}
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeType: "circle"
+});
+~~~
+
+**相关文章：** [默认形状](shapes/default_shapes.md)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/type_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/type_property.md
new file mode 100644
index 000000000..70f2925b0
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/type_property.md
@@ -0,0 +1,39 @@
+---
+sidebar_label: type
+title: Editor 的 type 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 type 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# type
+
+### 描述 {#description}
+
+@short: 必填。指定 Diagram Editor 的模式
+
+### 用法 {#usage}
+
+~~~jsx
+type?: "default" | "org" | "mindmap";
+~~~
+
+### 详情 {#details}
+
+Diagram Editor 可以初始化为以下三种模式之一：
+
+- `type:"default"` 用于可视化展示实体之间的关系
+
+
+
+- `type:"org"` 用于通过以层级顺序呈现一组人员之间的关系来展示其结构
+
+
+
+- `type:"mindmap"` 用于通过在主要概念周围展示相关联想法的方式来组织某个主题的信息
+
+
+
+**相关文章：**
+
+- [概述](editor_overview.md)
+- [如何开始使用 Diagram Editor](guides/diagram_editor/initialization.md)
+
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/view_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/view_property.md
new file mode 100644
index 000000000..1a3509226
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/view_property.md
@@ -0,0 +1,58 @@
+---
+sidebar_label: view
+title: Editor 的 view 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 view 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# view
+
+### 描述 {#description}
+
+@short: 用于配置 Diagram Editor 的 Toolbar、Shapebar 和 Editbar 视图的对象
+
+### 用法 {#usage}
+
+~~~jsx
+view: {
+ toolbar?: boolean | object,
+ shapebar?: boolean | object,
+ editbar?: boolean | object
+};
+~~~
+
+### 参数 {#parameters}
+
+- `toolbar` - （可选）用于显示/隐藏 `Toolbar`（如果为 *boolean* 类型）或配置其外观（如果为 *object* 类型）。有关配置工具栏的更多信息，请参阅 [Toolbar API](api/diagram_editor/toolbar/api_overview.md) 部分
+- `shapebar` - （可选）用于显示/隐藏 `Shapebar`（如果为 *boolean* 类型）或配置其外观（如果为 *object* 类型）。有关配置 shapebar 的更多信息，请参阅 [Shapebar API](api/diagram_editor/shapebar/api_overview.md) 部分
+- `editbar` - （可选）用于显示/隐藏 `Editbar`（如果为 *boolean* 类型）或配置其外观（如果为 *object* 类型）。有关配置 Editbar 的更多信息，请参阅 [Editbar API](api/diagram_editor/editbar/api_overview.md) 部分
+
+### 默认配置 {#default-config}
+
+~~~jsx
+view: {
+ toolbar: true,
+ shapebar: true,
+ editbar: true
+}
+~~~
+
+### 示例 {#example}
+
+~~~jsx {3-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: {
+ css: "toolbar_custom",
+ data: ["file", "separator", "scale"]
+ },
+ shapebar: {
+ width: 400
+ },
+ editbar: false
+ }
+ // other configurations
+});
+~~~
+
+**更新日志：** v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftergroupmove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftergroupmove_event.md
new file mode 100644
index 000000000..a59d5e343
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftergroupmove_event.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: afterGroupMove
+title: Editor 的 afterGroupMove 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 afterGroupMove 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# afterGroupMove
+
+### 描述 {#description}
+
+@short: 当组或泳道移动一个网格步长时触发
+
+:::note
+该事件仅针对目标元素触发，无论选中了多少个元素。被拖动元素的 id 会通过回调函数的 `batch` 参数提供。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+"afterGroupMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+事件的回调函数调用时会传入一个包含以下参数的对象：
+
+ - `id` - 元素的 id
+ - `batch` - 被移动元素的 id 数组
+ - `coords` - 一个包含移动后组或泳道位置的 `x` 和 `y` 坐标的对象，其中：
+ - `x` - 组/泳道的水平位置，从左向右移动
+ - `y` - 组/泳道的垂直位置，从上向下移动
+ - `event` - 一个事件对象
+
+:::info
+如需处理 Diagram Editor 的内部事件，可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-13}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("afterGroupMove", ({ id, coords }) => {
+ console.log(`
+ Group ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**更新日志：**
+
+- `batch` 参数已在 v6.0 中新增
+- 自 v6.0 起，回调函数接收一个对象作为参数
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemcatch_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemcatch_event.md
new file mode 100644
index 000000000..695c9960f
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemcatch_event.md
@@ -0,0 +1,56 @@
+---
+sidebar_label: afterItemCatch
+title: Editor 的 afterItemCatch 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 afterItemCatch 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# afterItemCatch
+
+### 描述 {#description}
+
+@short: 元素被捕获后触发
+
+:::info
+该事件仅在 Diagram 的 **组织结构图** 和 `mindmap` 模式下有效，此时必须将 `itemsDraggable` 属性设置为 `true`。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+"afterItemCatch": ({
+ id: string | number,
+ targetId: string | number,
+ batch: (string | number)[],
+ event: PointerEvent
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+事件的回调函数调用时会传入一个包含以下参数的对象：
+
+ - `id` - 被移动元素的 id
+ - `targetId` - 目标元素的 id
+ - `batch` - 被移动元素的 id 数组
+ - `event` - 一个事件对象
+
+### 示例 {#example}
+
+~~~jsx {6-11}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("afterItemCatch", ({ id, targetId }) => {
+ console.log(`
+ item ${id} is caught by the item ${targetId}
+ `);
+});
+~~~
+
+**更新日志：**
+
+- `batch` 参数已在 v6.0 中新增
+- 自 v6.0 起，回调函数接收一个对象作为参数
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemmove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemmove_event.md
new file mode 100644
index 000000000..bea6a3cc9
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemmove_event.md
@@ -0,0 +1,75 @@
+---
+sidebar_label: afterItemMove
+title: Editor 的 afterItemMove 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 afterItemMove 事件。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# afterItemMove
+
+### 描述 {#description}
+
+@short: 当某一项目按网格步长移动时触发
+
+:::note
+该事件不适用于 `line` 对象。
+
+无论选中的元素数量多少，该事件仅针对目标元素触发。拖动元素的 id 会通过回调函数的 `batch` 参数提供。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+"afterItemMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+该事件的回调函数使用一个包含以下参数的对象进行调用：
+
+- `id` - 项目的 id
+- `batch` - 已移动元素 id 组成的数组
+- `coords` - 一个包含移动后项目位置的 `x` 和 `y` 坐标的对象，其中：
+ - `x` - 项目的水平位置，从左向右移动
+ - `y` - 项目的垂直位置，从上向下移动
+- `event` - 事件对象
+
+:::info
+如需处理 Diagram Editor 的内部事件，可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-13}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("afterItemMove", ({ id, coords }) => {
+ console.log(`
+ Item ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**更新日志**：
+
+- `batch` 参数已在 v6.0 中新增
+- 从 v6.0 起，回调函数将参数作为对象接收
+
+**相关 API：**
+
+- [`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md)
+- [`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md)
+
+**相关示例：**
+
+- [Diagram Editor：通过事件管理形状的移动、旋转和缩放](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemresize_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemresize_event.md
new file mode 100644
index 000000000..1ad9c27fa
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemresize_event.md
@@ -0,0 +1,74 @@
+---
+sidebar_label: afterItemResize
+title: Editor 的 afterItemResize 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 afterItemResize 事件。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# afterItemResize
+
+### 描述 {#description}
+
+@short: 在项目大小发生变化后触发
+
+### 用法 {#usage}
+
+~~~jsx
+"afterItemResize": ({
+ id: string | number,
+ width: number,
+ height: number,
+ x: number,
+ y: number,
+ dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "ne"
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+该事件的回调函数使用一个包含以下参数的对象进行调用：
+
+- `id` - 被调整大小的项目的 id
+- `width` - 项目的新宽度
+- `height` - 项目的新高度
+- `x` - 项目的新 X 坐标
+- `y` - 项目的新 Y 坐标
+- `dir` - 调整大小操作的方向：
+ - `"n"` - 北
+ - `"ne"` - 东北
+ - `"e"` - 东
+ - `"se"` - 东南
+ - `"s"` - 南
+ - `"sw"` - 西南
+ - `"w"` - 西
+ - `"nw"` - 西北
+
+### 示例 {#example}
+
+~~~jsx
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("afterItemResize", ({ id, width, height }) => {
+ console.log(`
+ The item ${id} has been resized:
+ width: ${width}
+ height: ${height}
+ `);
+});
+~~~
+
+**更新日志**：
+
+- 该事件已在 v6.1 中新增
+
+**相关 API：**
+
+- [`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md)
+- [`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md)
+
+**相关示例：**
+
+- [Diagram Editor：通过事件管理形状的移动、旋转和缩放](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemrotate_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemrotate_event.md
new file mode 100644
index 000000000..e2f496017
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afteritemrotate_event.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: afterItemRotate
+title: Editor 的 afterItemRotate 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 afterItemRotate 事件。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# afterItemRotate
+
+### 描述 {#description}
+
+@short: 在项目旋转后触发
+
+### 用法 {#usage}
+
+~~~jsx
+"afterItemRotate": ({
+ id: string | number,
+ angle: number
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+该事件的回调函数使用一个包含以下参数的对象进行调用：
+
+- `id` - 被旋转项目的 id
+- `angle` - 项目的新旋转角度（以度为单位）
+
+### 示例 {#example}
+
+~~~jsx
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("afterItemRotate", ({ id, angle }) => {
+ console.log(`The item ${id} has been rotated by the angle: ${angle}`);
+});
+~~~
+
+**更新日志**：
+
+- 该事件已在 v6.1 中新增
+
+**相关 API：**
+
+- [`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md)
+- [`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md)
+
+**相关示例：**
+
+- [Diagram Editor：通过事件管理形状的移动、旋转和缩放](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afterlinetitlemove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afterlinetitlemove_event.md
new file mode 100644
index 000000000..9599d1552
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/afterlinetitlemove_event.md
@@ -0,0 +1,57 @@
+---
+sidebar_label: afterLineTitleMove
+title: Editor 的 afterLineTitleMove 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 afterLineTitleMove 事件。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# afterLineTitleMove
+
+### 描述 {#description}
+
+@short: 当连线的文本元素按网格步长移动时触发
+
+### 用法 {#usage}
+
+~~~jsx
+"afterLineTitleMove": ({
+ event: PointerEvent,
+ lineId: string | number,
+ titleId: string | number,
+ coords: object
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+该事件的回调函数使用一个包含以下参数的对象进行调用：
+
+ - `event` - 事件对象
+ - `lineId` - 连线的 id
+ - `titleId` - 连线的文本元素的 id
+ - `coords` - 一个包含移动后文本元素位置的 `x` 和 `y` 坐标的对象，其中：
+ - `x` - 文本元素的水平位置，从左向右移动
+ - `y` - 文本元素的垂直位置，从上向下移动
+
+:::info
+如需处理 Diagram Editor 的内部事件，可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-13}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("afterLineTitleMove", ({ titleId, coords }) => {
+ console.log(`
+ LineTitle ${titleId} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**更新日志**：自 v6.0 起，回调函数将参数作为对象接收
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapeiconclick_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapeiconclick_event.md
new file mode 100644
index 000000000..5ac4e430e
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapeiconclick_event.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: afterShapeIconClick
+title: Editor 的 afterShapeIconClick 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 afterShapeIconClick 事件。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# afterShapeIconClick
+
+### 描述 {#description}
+
+@short: 在点击项目工具栏中的控件后触发
+
+### 用法 {#usage}
+
+~~~jsx
+"afterShapeIconClick": (
+ iconId: string,
+ shape: object
+) => void;
+~~~
+
+### 参数 {#parameters}
+
+该事件的回调函数使用以下参数进行调用：
+
+- `iconId` - 工具栏控件的类型或 id
+- `shape` - 一个包含项目配置的对象
+
+:::info
+如需处理 Diagram Editor 的内部事件，可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-11}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("afterShapeIconClick", (iconId, shape) => {
+ console.log(`
+ You've clicked the ${iconId} toolbar control of the shape ${shape.id}
+ `);
+});
+~~~
+
+**更新日志**：v3.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapemove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapemove_event.md
new file mode 100644
index 000000000..15d586df9
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/aftershapemove_event.md
@@ -0,0 +1,65 @@
+---
+sidebar_label: afterShapeMove
+title: Editor 的 afterShapeMove 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 afterShapeMove 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# afterShapeMove
+
+### 描述 {#description}
+
+@short: 在形状移动一个网格步长时触发
+
+:::note
+无论选中的元素数量如何，该事件仅针对目标元素触发。被拖动元素的 id 通过回调函数的 `batch` 参数提供。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+"afterShapeMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent,
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+该事件的回调函数使用一个包含以下参数的对象进行调用：
+
+ - `id` - 形状的 id
+ - `batch` - 已移动元素 id 组成的数组
+ - `coords` - 一个包含移动后形状位置的 `x` 和 `y` 坐标的对象，其中：
+ - `x` - 形状的水平位置，从左向右移动
+ - `y` - 形状的垂直位置，从上向下移动
+ - `event` - 事件对象
+
+:::info
+要处理 Diagram Editor 的内部事件，您可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-13}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("afterShapeMove", ({ id, coords }) => {
+ console.log(`
+ Shape ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**更新日志**：
+
+- `batch` 参数已在 v6.0 中新增
+- 自 v6.0 起，回调函数以对象作为参数
+- `id` 和 `coords` 参数已在 v4.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforegroupmove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforegroupmove_event.md
new file mode 100644
index 000000000..2909adbe8
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforegroupmove_event.md
@@ -0,0 +1,69 @@
+---
+sidebar_label: beforeGroupMove
+title: Editor 的 beforeGroupMove 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 beforeGroupMove 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# beforeGroupMove
+
+### 描述 {#description}
+
+@short: 在组或泳道被移动之前触发
+
+:::note
+无论选中的元素数量如何，该事件仅针对目标元素触发。被拖动元素的 id 通过回调函数的 `batch` 参数提供。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+"beforeGroupMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+该事件的回调函数使用一个包含以下参数的对象进行调用：
+
+ - `id` - 项目的 id
+ - `batch` - 已移动元素 id 组成的数组
+ - `coords` - 一个包含移动前组或泳道位置的 `x` 和 `y` 坐标的对象，其中：
+ - `x` - 组/泳道的水平位置，从左向右移动
+ - `y` - 组/泳道的垂直位置，从上向下移动
+ - `event` - 事件对象
+
+### 返回值 {#returns}
+
+回调函数返回 `false` 以阻止组或泳道被移动；否则返回 `true`
+
+:::info
+要处理 Diagram Editor 的内部事件，您可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-14}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("beforeGroupMove", ({ id, coords }) => {
+ console.log(`
+ Group ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+ return true;
+});
+~~~
+
+**更新日志**：
+
+- `batch` 参数已在 v6.0 中新增
+- 自 v6.0 起，回调函数以对象作为参数
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemcatch_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemcatch_event.md
new file mode 100644
index 000000000..7b6168948
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemcatch_event.md
@@ -0,0 +1,73 @@
+---
+sidebar_label: beforeItemCatch
+title: Editor 的 beforeItemCatch 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 beforeItemCatch 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# beforeItemCatch
+
+### 描述 {#description}
+
+@short: 在项目被捕获之前触发
+
+:::info
+该事件仅在 Diagram 的**组织结构图**和 `mindmap` 模式下有效，且必须将 `itemsDraggable` 属性设置为 `true`。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+"beforeItemCatch": ({
+ id: string | number,
+ targetId: string | number,
+ batch: (string | number)[],
+ event: PointerEvent
+}) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+该事件的回调函数使用一个包含以下参数的对象进行调用：
+
+ - `id` - 被移动项目的 id
+ - `targetId` - 目标项目的 id
+ - `batch` - 已移动元素 id 组成的数组
+ - `event` - 事件对象
+
+### 返回值 {#returns}
+
+回调函数返回 `false` 以阻止项目被捕获；否则返回 `true`
+
+:::info
+要处理 Diagram Editor 的内部事件，您可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-20}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("beforeItemCatch", ({ id, targetId }) => {
+ if (targetId === "2.1"){
+ console.log(`
+ Item ${id} won't be be caught by the item "2.1"
+ `);
+ return false;
+ }
+ else{
+ console.log(`
+ Item ${id} will be caught by the item ${targetId}
+ `);
+ return true;
+ }
+});
+~~~
+
+**更新日志**：
+
+- `batch` 参数已在 v6.0 中新增
+- 自 v6.0 起，回调函数以对象作为参数
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemmove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemmove_event.md
new file mode 100644
index 000000000..acaddc5cb
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemmove_event.md
@@ -0,0 +1,80 @@
+---
+sidebar_label: beforeItemMove
+title: Editor 的 beforeItemMove 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 beforeItemMove 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# beforeItemMove
+
+### 描述 {#description}
+
+@short: 在项目被移动之前触发
+
+:::note
+该事件不适用于 `line` 对象。
+
+无论选中的元素数量如何，该事件仅针对目标元素触发。被拖动元素的 id 通过回调函数的 `batch` 参数提供。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+"beforeItemMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent,
+}) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+该事件的回调函数使用一个包含以下参数的对象进行调用：
+
+ - `id` - 项目的 id
+ - `batch` - 已移动元素 id 组成的数组
+ - `coords` - 一个包含移动前项目位置的 `x` 和 `y` 坐标的对象，其中：
+ - `x` - 项目的水平位置，从左向右移动
+ - `y` - 项目的垂直位置，从上向下移动
+ - `event` - 事件对象
+
+### 返回值 {#returns}
+
+回调函数返回 `false` 以阻止项目被移动；否则返回 `true`
+
+:::info
+要处理 Diagram Editor 的内部事件，您可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-14}
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("beforeItemMove", ({ id, coords }) => {
+ console.log(`
+ Item ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+ return true;
+});
+~~~
+
+**更新日志**：
+
+- `batch` 参数已在 v6.0 中新增
+- 自 v6.0 起，回调函数以对象作为参数
+
+**相关 API**：
+
+- [`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md)
+- [`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md)
+
+**相关示例**：
+
+- [Diagram Editor. 通过事件管理形状的移动、旋转和调整大小](https://snippet.dhtmlx.com/qldjbbm7)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemresize_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemresize_event.md
new file mode 100644
index 000000000..92e16b2e5
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemresize_event.md
@@ -0,0 +1,78 @@
+---
+sidebar_label: beforeItemResize
+title: Editor 的 beforeItemResize 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 beforeItemResize 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# beforeItemResize
+
+### 描述 {#description}
+
+@short: 在项目的大小被更改之前触发
+
+### 用法 {#usage}
+
+~~~jsx
+"beforeItemResize": ({
+ id: string | number,
+ width: number,
+ height: number,
+ x: number,
+ y: number,
+ dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "ne"
+}) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+该事件的回调函数使用一个包含以下参数的对象进行调用：
+
+- `id` - 正在调整大小的项目的 id
+- `width` - 项目的新宽度
+- `height` - 项目的新高度
+- `x` - 项目的新 X 坐标
+- `y` - 项目的新 Y 坐标
+- `dir` - 调整大小操作的方向：
+ - `"n"` - 北
+ - `"ne"` - 东北
+ - `"e"` - 东
+ - `"se"` - 东南
+ - `"s"` - 南
+ - `"sw"` - 西南
+ - `"w"` - 西
+ - `"nw"` - 西北
+
+### 返回值 {#returns}
+
+回调函数返回 `false` 以阻止项目被调整大小；否则返回 `true`。
+
+### 示例 {#example}
+
+~~~jsx
+// initializing Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// loading data
+editor.parse(data);
+
+// attaching a handler to the event
+editor.events.on("beforeItemResize", ({ id, width, height }) => {
+ if (width < 50 || height < 50) {
+ console.log(`Preventing resize of item ${id} because it's too small.`);
+ return false; // 阻止调整大小
+ }
+ console.log(`Resizing the item ${id} to the width: ${width}, height: ${height}`);
+});
+~~~
+
+**更新日志**：
+
+- 该事件已在 v6.1 中新增
+
+**相关 API**：
+
+- [`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md)
+- [`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md)
+
+**相关示例**：
+
+- [Diagram Editor. 通过事件管理形状的移动、旋转和调整大小](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemrotate_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemrotate_event.md
new file mode 100644
index 000000000..94d72ce3c
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeitemrotate_event.md
@@ -0,0 +1,62 @@
+---
+sidebar_label: beforeItemRotate
+title: Editor 的 beforeItemRotate 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 beforeItemRotate 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# beforeItemRotate
+
+### 描述 {#description}
+
+@short: 在项目旋转之前触发
+
+### 用法 {#usage}
+
+~~~jsx
+"beforeItemRotate": ({
+ id: string | number,
+ angle: number
+}) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+事件的回调函数使用一个包含以下参数的对象调用：
+
+- `id` - 正在旋转的项目的 id
+- `angle` - 项目的新旋转角度（以度为单位）
+
+### 返回值 {#returns}
+
+回调函数返回 `false` 以阻止项目被旋转；否则返回 `true`。
+
+### 示例 {#example}
+
+~~~jsx
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("beforeItemRotate", ({ id, angle }) => {
+ if (angle > 90 && angle < 270) {
+ console.log(`Preventing rotation of the item ${id} by this angle.`);
+ return false; // 阻止旋转
+ }
+ console.log(`Rotating the item ${id} by the angle: ${angle}`);
+});
+~~~
+
+**更新日志：**
+
+- 该事件在 v6.1 中新增
+
+**相关 API：**
+
+- [`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md)
+- [`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md)
+
+**相关示例：**
+
+- [Diagram Editor. 通过事件管理形状的移动、旋转和大小调整](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforelinetitlemove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforelinetitlemove_event.md
new file mode 100644
index 000000000..dee086469
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforelinetitlemove_event.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: beforeLineTitleMove
+title: Editor 的 beforeLineTitleMove 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 beforeLineTitleMove 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# beforeLineTitleMove
+
+### 描述 {#description}
+
+@short: 在线条的文本元素移动之前触发
+
+### 用法 {#usage}
+
+~~~jsx
+"beforeLineTitleMove": ({
+ event: PointerEvent,
+ lineId: string | number,
+ titleId: string | number,
+ coords: obj
+}) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+事件的回调函数使用一个包含以下参数的对象调用：
+
+ - `event` - 事件对象
+ - `lineId` - 线条的 id
+ - `titleId` - 线条文本元素的 id
+ - `coords` - 一个包含移动前文本元素位置的 `x` 和 `y` 坐标的对象，其中：
+ - `x` - 文本元素的水平位置，从左向右移动
+ - `y` - 文本元素的垂直位置，从上向下移动
+
+### 返回值 {#returns}
+
+回调函数返回 `false` 以阻止线条的文本元素被移动；否则返回 `true`
+
+:::info
+若要处理 Diagram Editor 的内部事件，可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-14}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("beforeLineTitleMove", ({ titleId, coords }) => {
+ console.log(`
+ LineTitle ${titleId} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+ return true;
+});
+~~~
+
+**更新日志：**
+
+- 自 v6.0 起，回调函数以对象作为参数
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapeiconclick_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapeiconclick_event.md
new file mode 100644
index 000000000..81da39e50
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapeiconclick_event.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: beforeShapeIconClick
+title: Editor 的 beforeShapeIconClick 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 beforeShapeIconClick 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# beforeShapeIconClick
+
+### 描述 {#description}
+
+@short: 在点击项目专属工具栏中的控件之前触发
+
+### 用法 {#usage}
+
+~~~jsx
+"beforeShapeIconClick": (
+ iconId: string,
+ shape: object
+) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+事件的回调函数使用以下参数调用：
+
+- `iconId` - 工具栏控件的类型或 id
+- `shape` - 包含项目配置的对象
+
+### 返回值 {#returns}
+
+回调函数返回 `false` 以阻止工具栏控件被点击；否则返回 `true`
+
+:::info
+若要处理 Diagram Editor 的内部事件，可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-12}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("beforeShapeIconClick", (iconId, shape) => {
+ console.log(`
+ You will click the ${iconId} toolbar control of the shape ${shape.id}
+ `);
+ return true;
+});
+~~~
+
+**更新日志：** v3.1 中新增
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapemove_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapemove_event.md
new file mode 100644
index 000000000..bc12ba392
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/beforeshapemove_event.md
@@ -0,0 +1,70 @@
+---
+sidebar_label: beforeShapeMove
+title: Editor 的 beforeShapeMove 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 beforeShapeMove 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# beforeShapeMove
+
+### 描述 {#description}
+
+@short: 在形状移动之前触发
+
+:::note
+无论选中的元素数量是多少，该事件只针对目标元素触发。被拖动元素的 id 存储在回调函数的 `batch` 参数中。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+"beforeShapeMove": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+事件的回调函数使用一个包含以下参数的对象调用：
+
+ - `id` - 形状的 id
+ - `batch` - 被移动元素的 id 数组
+ - `coords` - 一个包含移动前形状位置的 `x` 和 `y` 坐标的对象，其中：
+ - `x` - 形状的水平位置，从左向右移动
+ - `y` - 形状的垂直位置，从上向下移动
+ - `event` - 事件对象
+
+### 返回值 {#returns}
+
+回调函数返回 `false` 以阻止形状被移动；否则返回 `true`
+
+:::info
+若要处理 Diagram Editor 的内部事件，可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-14}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("beforeShapeMove", ({ id, coords }) => {
+ console.log(`
+ Shape ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+ return true;
+});
+~~~
+
+**更新日志：**
+
+- `batch` 参数在 v6.0 中新增
+- 自 v6.0 起，回调函数以对象作为参数
+- `id` 和 `coords` 参数在 v4.0 中新增
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/groupmoveend_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/groupmoveend_event.md
new file mode 100644
index 000000000..35261337c
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/groupmoveend_event.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: groupMoveEnd
+title: Editor 的 groupMoveEnd 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 groupMoveEnd 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# groupMoveEnd
+
+### 描述 {#description}
+
+@short: 在组或泳道移动之后触发
+
+:::note
+无论选中的元素数量是多少，该事件只针对目标元素触发。被拖动元素的 id 存储在回调函数的 `batch` 参数中。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+"groupMoveEnd": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent,
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+事件的回调函数使用一个包含以下参数的对象调用：
+
+ - `id` - 项目的 id
+ - `batch` - 被移动元素的 id 数组
+ - `coords` - 一个包含移动后组或泳道位置的 `x` 和 `y` 坐标的对象，其中：
+ - `x` - 组/泳道的水平位置，从左向右移动
+ - `y` - 组/泳道的垂直位置，从上向下移动
+ - `event` - 事件对象
+
+:::info
+若要处理 Diagram Editor 的内部事件，可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-13}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("groupMoveEnd", ({ id, coords }) => {
+ console.log(`
+ Group ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**更新日志：**
+
+- `batch` 参数在 v6.0 中新增
+- 自 v6.0 起，回调函数以对象作为参数
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemmoveend_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemmoveend_event.md
new file mode 100644
index 000000000..7db6d4478
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemmoveend_event.md
@@ -0,0 +1,72 @@
+---
+sidebar_label: itemMoveEnd
+title: 编辑器的 itemMoveEnd 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 itemMoveEnd 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# itemMoveEnd
+
+### 描述 {#description}
+
+@short: 在元素移动完成后触发
+
+:::note
+该事件不适用于 `line` 对象。
+
+无论选中多少个元素，该事件仅针对目标元素触发。被拖动元素的 id 在回调函数的 `batch` 参数中提供。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+"itemMoveEnd": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+事件的回调函数会传入一个包含以下参数的对象：
+
+ - `id` - 元素的 id
+ - `batch` - 被移动元素 id 组成的数组
+ - `coords` - 一个包含元素移动后位置的 `x` 和 `y` 坐标的对象，其中：
+ - `x` - 元素的水平位置，从左向右移动
+ - `y` - 元素的垂直位置，从上向下移动
+ - `event` - 事件对象
+
+### 示例 {#example}
+
+~~~jsx {6-13}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件添加处理程序
+editor.events.on("itemMoveEnd", ({ id, coords }) => {
+ console.log(`
+ Item ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**更新日志**：
+
+- `batch` 参数已在 v6.0 中新增
+- 回调函数自 v6.0 起以对象作为参数
+
+**相关 API**：
+
+- [`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md)
+- [`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md)
+
+**相关示例**：
+
+- [Diagram Editor. 通过事件管理形状的移动、旋转和调整大小](https://snippet.dhtmlx.com/qldjbbm7)
+
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemresizeend_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemresizeend_event.md
new file mode 100644
index 000000000..34e695613
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemresizeend_event.md
@@ -0,0 +1,76 @@
+---
+sidebar_label: itemResizeEnd
+title: 编辑器的 itemResizeEnd 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 itemResizeEnd 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# itemResizeEnd
+
+### 描述 {#description}
+
+@short: 在元素的调整大小操作完成后（用户释放鼠标按键时）触发
+
+### 用法 {#usage}
+
+~~~jsx
+"itemResizeEnd": ({
+ id: string | number,
+ width: number,
+ height: number,
+ x: number,
+ y: number,
+ dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "ne"
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+事件的回调函数会传入一个包含以下参数的对象：
+
+- `id` - 被调整大小的元素的 id
+- `width` - 元素的最终宽度
+- `height` - 元素的最终高度
+- `x` - 元素的最终 X 坐标
+- `y` - 元素的最终 Y 坐标
+- `dir` - 调整大小操作的方向：
+ - `"n"` - 北
+ - `"ne"` - 东北
+ - `"e"` - 东
+ - `"se"` - 东南
+ - `"s"` - 南
+ - `"sw"` - 西南
+ - `"w"` - 西
+ - `"nw"` - 西北
+
+
+### 示例 {#example}
+
+~~~jsx
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件添加处理程序
+editor.events.on("itemResizeEnd", ({ id, width, height }) => {
+ console.log(`
+ The item ${id} finished resizing:
+ the final width: ${width}
+ the final height: ${height}
+ `);
+ // 在这里可以将元素的新尺寸保存到服务器
+});
+~~~
+
+**更新日志**：
+
+- 该事件已在 v6.1 中新增
+
+**相关 API**：
+
+- [`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md)
+- [`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md)
+
+**相关示例**：
+
+- [Diagram Editor. 通过事件管理形状的移动、旋转和调整大小](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemrotateend_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemrotateend_event.md
new file mode 100644
index 000000000..02e4e6eba
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemrotateend_event.md
@@ -0,0 +1,55 @@
+---
+sidebar_label: itemRotateEnd
+title: 编辑器的 itemRotateEnd 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 itemRotateEnd 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# itemRotateEnd
+
+### 描述 {#description}
+
+@short: 在元素的旋转操作完成后（用户释放鼠标按键时）触发
+
+### 用法 {#usage}
+
+~~~jsx
+"itemRotateEnd": ({
+ id: string | number,
+ angle: number
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+事件的回调函数会传入一个包含以下参数的对象：
+
+- `id` - 被旋转的元素的 id
+- `angle` - 元素的最终旋转角度（单位：度）
+
+### 示例 {#example}
+
+~~~jsx
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件添加处理程序
+editor.events.on("itemRotateEnd", ({ id, angle }) => {
+ console.log(`The item ${id} finished rotating, the final angle: ${angle}`);
+ // 在这里可以将元素的新旋转角度保存到服务器
+});
+~~~
+
+**更新日志**：
+
+- 该事件已在 v6.1 中新增
+
+**相关 API**：
+
+- [`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md)
+- [`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md)
+
+**相关示例**：
+
+- [Diagram Editor. 通过事件管理形状的移动、旋转和调整大小](https://snippet.dhtmlx.com/qldjbbm7)
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemtarget_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemtarget_event.md
new file mode 100644
index 000000000..a5fd2934f
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/itemtarget_event.md
@@ -0,0 +1,66 @@
+---
+sidebar_label: itemTarget
+title: 编辑器的 itemTarget 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 itemTarget 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# itemTarget
+
+### 描述 {#description}
+
+@short: 当被移动的元素悬停在目标元素上方时触发
+
+:::info
+该事件仅在 Diagram 的 **组织结构图** 和 `mindmap` 模式下有效，且必须将 `itemsDraggable` 属性设置为 `true`。
+
+该事件不适用于 *被移动元素的父元素*，也不适用于 *具有 `giveItem: false` 属性的被移动元素*。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+"itemTarget": ({
+ id: string | number,
+ targetId: string | number,
+ batch: (string | number)[],
+ event: PointerEvent
+}) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+事件的回调函数会传入一个包含以下参数的对象：
+
+ - `id` - 被移动元素的 id
+ - `targetId` - 目标元素的 id
+ - `batch` - 被移动元素 id 组成的数组
+ - `event` - 事件对象
+
+### 返回值 {#returns}
+
+回调函数返回 `false` 以阻止元素悬停在目标元素上方；否则返回 `true`
+
+:::info
+如需处理 Diagram Editor 的内部事件，可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-11}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件添加处理程序
+editor.events.on("itemTarget", ({ id, targetId }) => {
+ console.log(`
+ Item ${id} is hovering over the item ${targetId}
+ `);
+});
+~~~
+
+**更新日志**：
+
+- `batch` 参数已在 v6.0 中新增
+- 回调函数自 v6.0 起以对象作为参数
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/linetitlemoveend_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/linetitlemoveend_event.md
new file mode 100644
index 000000000..c11573a5c
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/linetitlemoveend_event.md
@@ -0,0 +1,57 @@
+---
+sidebar_label: lineTitleMoveEnd
+title: 编辑器的 lineTitleMoveEnd 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 lineTitleMoveEnd 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# lineTitleMoveEnd
+
+### 描述 {#description}
+
+@short: 在线条的文本元素移动完成后触发
+
+### 用法 {#usage}
+
+~~~jsx
+"lineTitleMoveEnd": ({
+ event: PointerEvent,
+ lineId: string | number,
+ titleId: string | number,
+ coords: obj
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+事件的回调函数会传入一个包含以下参数的对象：
+
+ - `event` - 事件对象
+ - `lineId` - 线条的 id
+ - `titleId` - 线条的文本元素的 id
+ - `coords` - 一个包含文本元素移动后位置的 `x` 和 `y` 坐标的对象，其中：
+ - `x` - 文本元素的水平位置，从左向右移动
+ - `y` - 文本元素的垂直位置，从上向下移动
+
+:::info
+如需处理 Diagram Editor 的内部事件，可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-13}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件添加处理程序
+editor.events.on("lineTitleMoveEnd", ({ titleId, coords }) => {
+ console.log(`
+ LineTitle ${titleId} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**更新日志**：回调函数自 v6.0 起以对象作为参数
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/overview.md
new file mode 100644
index 000000000..89b289e6a
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/overview.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: 编辑器事件
+title: 编辑器事件概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中探索编辑器事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# 编辑器事件概述 {#editor-events-overview}
+
+| 名称 | 描述 |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------- |
+| [](api/diagram_editor/editor/events/aftergroupmove_event.md) | @getshort(api/diagram_editor/editor/events/aftergroupmove_event.md) |
+| [](api/diagram_editor/editor/events/afteritemcatch_event.md) | @getshort(api/diagram_editor/editor/events/afteritemcatch_event.md) |
+| [](api/diagram_editor/editor/events/afteritemmove_event.md) | @getshort(api/diagram_editor/editor/events/afteritemmove_event.md) |
+| [](api/diagram_editor/editor/events/afteritemresize_event.md) | @getshort(api/diagram_editor/editor/events/afteritemresize_event.md) |
+| [](api/diagram_editor/editor/events/afteritemrotate_event.md) | @getshort(api/diagram_editor/editor/events/afteritemrotate_event.md) |
+| [](api/diagram_editor/editor/events/afterlinetitlemove_event.md) | @getshort(api/diagram_editor/editor/events/afterlinetitlemove_event.md) |
+| [](api/diagram_editor/editor/events/aftershapeiconclick_event.md) | @getshort(api/diagram_editor/editor/events/aftershapeiconclick_event.md) |
+| [](api/diagram_editor/editor/events/aftershapemove_event.md) | @getshort(api/diagram_editor/editor/events/aftershapemove_event.md) |
+| [](api/diagram_editor/editor/events/beforegroupmove_event.md) | @getshort(api/diagram_editor/editor/events/beforegroupmove_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemcatch_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemcatch_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemmove_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemmove_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemresize_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemresize_event.md) |
+| [](api/diagram_editor/editor/events/beforeitemrotate_event.md) | @getshort(api/diagram_editor/editor/events/beforeitemrotate_event.md) |
+| [](api/diagram_editor/editor/events/beforelinetitlemove_event.md) | @getshort(api/diagram_editor/editor/events/beforelinetitlemove_event.md) |
+| [](api/diagram_editor/editor/events/beforeshapeiconclick_event.md)| @getshort(api/diagram_editor/editor/events/beforeshapeiconclick_event.md) |
+| [](api/diagram_editor/editor/events/beforeshapemove_event.md) | @getshort(api/diagram_editor/editor/events/beforeshapemove_event.md) |
+| [](api/diagram_editor/editor/events/groupmoveend_event.md) | @getshort(api/diagram_editor/editor/events/groupmoveend_event.md) |
+| [](api/diagram_editor/editor/events/itemmoveend_event.md) | @getshort(api/diagram_editor/editor/events/itemmoveend_event.md) |
+| [](api/diagram_editor/editor/events/itemresizeend_event.md) | @getshort(api/diagram_editor/editor/events/itemresizeend_event.md) |
+| [](api/diagram_editor/editor/events/itemrotateend_event.md) | @getshort(api/diagram_editor/editor/events/itemrotateend_event.md) |
+| [](api/diagram_editor/editor/events/itemtarget_event.md) | @getshort(api/diagram_editor/editor/events/itemtarget_event.md) |
+| [](api/diagram_editor/editor/events/linetitlemoveend_event.md) | @getshort(api/diagram_editor/editor/events/linetitlemoveend_event.md) |
+| [](api/diagram_editor/editor/events/shapemoveend_event.md) | @getshort(api/diagram_editor/editor/events/shapemoveend_event.md) |
+| [](api/diagram_editor/editor/events/shaperesize_event.md) | @getshort(api/diagram_editor/editor/events/shaperesize_event.md) |
+| [](api/diagram_editor/editor/events/zoomin_event.md) | @getshort(api/diagram_editor/editor/events/zoomin_event.md) |
+| [](api/diagram_editor/editor/events/zoomout_event.md) | @getshort(api/diagram_editor/editor/events/zoomout_event.md) |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shapemoveend_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shapemoveend_event.md
new file mode 100644
index 000000000..2937eeda4
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shapemoveend_event.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: shapeMoveEnd
+title: 编辑器的 shapeMoveEnd 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 shapeMoveEnd 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# shapeMoveEnd
+
+### 描述 {#description}
+
+@short: 在形状移动后触发
+
+:::note
+无论选中了多少个元素，该事件仅针对目标元素触发。被拖动元素的 id 会通过回调函数的 `batch` 参数提供。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+"shapeMoveEnd": ({
+ id: string | number,
+ batch: (string | number)[],
+ coords: object,
+ event: PointerEvent
+}) => void;
+~~~
+
+### 参数 {#parameters}
+
+该事件的回调函数会使用一个包含以下参数的对象进行调用：
+
+ - `id` - 项目的 id
+ - `batch` - 已移动元素 id 组成的数组
+ - `coords` - 一个包含形状移动后位置的 `x` 和 `y` 坐标的对象，其中：
+ - `x` - 形状的水平位置，从左到右移动
+ - `y` - 形状的垂直位置，从上到下移动
+ - `event` - 一个事件对象
+
+:::info
+要处理 Diagram Editor 的内部事件，您可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-13}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("shapeMoveEnd", ({ id, coords }) => {
+ console.log(`
+ Shape ${id} is at the position:
+ x: ${coords.x}
+ y: ${coords.y}
+ `);
+});
+~~~
+
+**更新日志：**
+
+- `batch` 参数在 v6.0 中新增
+- 从 v6.0 起，回调函数以对象作为参数
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shaperesize_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shaperesize_event.md
new file mode 100644
index 000000000..86fe900c7
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/shaperesize_event.md
@@ -0,0 +1,35 @@
+---
+sidebar_label: shapeResize
+title: 编辑器的 shapeResize 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 shapeResize 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# shapeResize
+
+### 描述 {#description}
+
+@short: 在形状调整大小后触发
+
+### 用法 {#usage}
+
+~~~jsx
+"shapeResize": () => void;
+~~~
+
+:::info
+要处理 Diagram Editor 的内部事件，您可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-9}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("shapeResize", () => {
+ console.log("The shape has been resized");
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md
new file mode 100644
index 000000000..29f2a1806
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: zoomIn
+title: 编辑器的 zoomIn 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 zoomIn 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# zoomIn
+
+### 描述 {#description}
+
+@short: 在点击“放大”按钮或调用 zoomIn() 方法后触发
+
+### 用法 {#usage}
+
+~~~jsx
+"zoomIn": (step: number) => void;
+~~~
+
+### 参数 {#parameters}
+
+`zoomIn` 事件的回调函数会使用以下参数进行调用：
+
+- `step` - （必需）显示 [`scale`](api/diagram_editor/editor/config/scale_property.md) 属性步长的值。
+
+:::info
+要处理 Diagram Editor 的内部事件，您可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {7-9}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("zoomIn", (step) => {
+ console.log("The diagram in the editor is zoomed in. The step is" + step);
+});
+~~~
+
+**更新日志：** `step` 参数在 v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md
new file mode 100644
index 000000000..4fd4e1017
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: zoomOut
+title: 编辑器的 zoomOut 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 zoomOut 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# zoomOut
+
+### 描述 {#description}
+
+@short: 在点击“缩小”按钮或调用 `zoomOut()` 方法后触发
+
+### 用法 {#usage}
+
+~~~jsx
+"zoomOut": (step) => void;
+~~~
+
+### 参数 {#parameters}
+
+`zoomOut` 事件的回调函数会使用以下参数进行调用：
+
+- `step` - （必需）显示 [`scale`](api/diagram_editor/editor/config/scale_property.md) 属性变化步长的值。
+
+:::info
+要处理 Diagram Editor 的内部事件，您可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {7-9}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container");
+// 加载数据
+editor.parse(data);
+
+// 为事件绑定处理程序
+editor.events.on("zoomOut", (step) => {
+ console.log("The diagram in the editor is zoomed out");
+});
+~~~
+
+**更新日志：** `step` 参数在 v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/destructor_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/destructor_method.md
new file mode 100644
index 000000000..31c4b96b4
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/destructor_method.md
@@ -0,0 +1,30 @@
+---
+sidebar_label: destructor()
+title: Editor 的 destructor 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 destructor 方法。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 免费的 30 天评估版本。
+---
+
+# destructor()
+
+### 描述 {#description}
+
+@short: 移除 diagram editor 实例并释放占用的资源
+
+### 用法 {#usage}
+
+~~~jsx
+destructor(): void;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {6}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+
+editor.destructor();
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/import_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/import_method.md
new file mode 100644
index 000000000..9e18726cf
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/import_method.md
@@ -0,0 +1,42 @@
+---
+sidebar_label: import()
+title: Editor 的 import 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 import 方法。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 免费的 30 天评估版本。
+---
+
+# import()
+
+### 描述 {#description}
+
+@short: 将数据从现有的 diagram 导入到 editor 中
+
+### 用法 {#usage}
+
+~~~jsx
+import(diagram: object): void;
+~~~
+
+### 参数 {#parameters}
+
+- `diagram` - （必填）diagram 对象
+
+### 示例 {#example}
+
+~~~jsx
+// initializing Diagram
+const diagram = new dhx.Diagram("diagram", {
+ type: "org"
+});
+// loading data into Diagram
+diagram.data.parse(data);
+
+// initializing Editor
+const editor = new dhx.DiagramEditor("editor_container");
+
+// importing data from Diagram into Editor
+editor.import(diagram);
+~~~
+
+您可以以任何受支持的数据格式加载数据。详情请参阅 [`parse()`](api/data_collection/parse_method.md) 一文。
+
+**相关示例**：[Diagram Editor。组织结构图模式。实时编辑器](https://snippet.dhtmlx.com/bng7ego7)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/overview.md
new file mode 100644
index 000000000..0fb932d62
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/overview.md
@@ -0,0 +1,17 @@
+---
+sidebar_label: Editor 方法
+title: Editor 方法概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中探索 Editor 方法。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 免费的 30 天评估版本。
+---
+
+# Editor 方法概述 {#editor-methods-overview}
+
+| 名称 | 描述 |
+| :------------------------------------------------------------ | :---------------------------------------------------------------- |
+| [](api/diagram_editor/editor/methods/destructor_method.md) | @getshort(api/diagram_editor/editor/methods/destructor_method.md) |
+| [](api/diagram_editor/editor/methods/import_method.md) | @getshort(api/diagram_editor/editor/methods/import_method.md) |
+| [](api/diagram_editor/editor/methods/paint_method.md) | @getshort(api/diagram_editor/editor/methods/paint_method.md) |
+| [](api/diagram_editor/editor/methods/parse_method.md) | @getshort(api/diagram_editor/editor/methods/parse_method.md) |
+| [](api/diagram_editor/editor/methods/serialize_method.md) | @getshort(api/diagram_editor/editor/methods/serialize_method.md) |
+| [](api/diagram_editor/editor/methods/zoomin_method.md) | @getshort(api/diagram_editor/editor/methods/zoomin_method.md) |
+| [](api/diagram_editor/editor/methods/zoomout_method.md) | @getshort(api/diagram_editor/editor/methods/zoomout_method.md) |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/paint_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/paint_method.md
new file mode 100644
index 000000000..da6f432b0
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/paint_method.md
@@ -0,0 +1,26 @@
+---
+sidebar_label: paint()
+title: Editor 的 paint 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 paint 方法。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 免费的 30 天评估版本。
+---
+
+# paint()
+
+### 描述 {#description}
+
+@short: 重新绘制 editor
+
+### 用法 {#usage}
+
+~~~jsx
+paint(): void;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {4}
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.paint();
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/parse_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/parse_method.md
new file mode 100644
index 000000000..462fc4b20
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/parse_method.md
@@ -0,0 +1,64 @@
+---
+sidebar_label: parse()
+title: Editor 的 parse 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 editor 的 parse 方法。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX Diagram 免费的 30 天评估版本。
+---
+
+# parse()
+
+### 描述 {#description}
+
+@short: 从本地数据源将数据加载到 editor 中
+
+### 用法 {#usage}
+
+~~~jsx
+parse(data: array): void;
+~~~
+
+### 参数 {#parameters}
+
+- `data` - （必填）应解析到 editor 中的数据
+
+您可以以任何受支持的数据格式加载数据。详情请参阅 [`parse()`](api/data_collection/parse_method.md) 一文。
+
+### 示例 {#example}
+
+~~~jsx
+const data = [
+ // shapes
+ {
+ "id": "a",
+ "x": 50,
+ "y": 53,
+ "type": "triangle",
+ "text": "Shape 1",
+ "height": 50,
+ "width": 50
+ },
+ {
+ "id": "b",
+ "x": 367,
+ "y": 158,
+ "type": "rectangle",
+ "text": "Shape 2"
+ },
+
+ // connector line
+ {
+ "id": "ab",
+ "from":"a",
+ "to":"b",
+ "type": "line"
+ },
+];
+
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+~~~
+
+**相关示例**：
+
+- [Diagram Editor。默认模式。基本初始化](https://snippet.dhtmlx.com/xshe9ut7)
+- [Diagram Editor。组织结构图模式。基本初始化](https://snippet.dhtmlx.com/og4qm3ja)
+- [Diagram Editor。思维导图模式。情感思维导图](https://snippet.dhtmlx.com/lo1vm0e8)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/serialize_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/serialize_method.md
new file mode 100644
index 000000000..1f2e4d797
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/serialize_method.md
@@ -0,0 +1,32 @@
+---
+sidebar_label: serialize()
+title: serialize Method of Editor
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 serialize 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# serialize()
+
+### 描述 {#description}
+
+@short: 将编辑器的数据序列化为 JSON 对象数组
+
+### 用法 {#usage}
+
+~~~jsx
+serialize(): array;
+~~~
+
+### 返回值 {#returns}
+
+该方法返回一个 JSON 对象数组，数组中的每个对象对应编辑器数据中的一个项目
+
+### 示例 {#example}
+
+~~~jsx {4}
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+const data = editor.serialize();
+~~~
+
+**相关示例**：[Diagram Editor · 组织结构图模式 · 实时编辑器](https://snippet.dhtmlx.com/bng7ego7)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomin_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomin_method.md
new file mode 100644
index 000000000..631c616df
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomin_method.md
@@ -0,0 +1,32 @@
+---
+sidebar_label: zoomIn()
+title: zoomIn Method of Editor
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 zoomIn 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# zoomIn()
+
+### 描述 {#description}
+
+@short: 放大图表
+
+### 用法 {#usage}
+
+~~~jsx
+zoomIn(step?: number): void;
+~~~
+
+### 参数 {#parameters}
+
+- `step` - （可选）图表放大的步长；*默认值：0.05*
+
+### 示例 {#example}
+
+~~~jsx {4}
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.zoomIn(0.1);
+~~~
+
+**更新日志**：v4.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomout_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomout_method.md
new file mode 100644
index 000000000..98eda485a
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/methods/zoomout_method.md
@@ -0,0 +1,32 @@
+---
+sidebar_label: zoomOut()
+title: zoomOut Method of Editor
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 zoomOut 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# zoomOut()
+
+### 描述 {#description}
+
+@short: 缩小图表
+
+### 用法 {#usage}
+
+~~~jsx
+zoomOut(step?: number): void;
+~~~
+
+### 参数 {#parameters}
+
+- `step` - （可选）图表缩小的步长；*默认值：0.05*
+
+### 示例 {#example}
+
+~~~jsx {4}
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.zoomOut(0.1);
+~~~
+
+**更新日志**：v4.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/api_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/api_overview.md
new file mode 100644
index 000000000..f9ac0aaa3
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/api_overview.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: HistoryManager API 概述
+title: HistoryManager API 概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中查看 HistoryManager 概述。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天 DHTMLX Diagram 评估版本。
+---
+
+# HistoryManager API 概述 {#history-manager-api-overview}
+
+这是一组 API，可用于管理 Diagram Editor 中操作的历史记录。使用 `history` 关键字通过 `editor` 对象访问 HistoryManager：
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default" // 仅限 default
+});
+// ...
+editor.history.redo(); // 恢复因 Undo 操作而被撤销的动作
+~~~
+
+## HistoryManager 方法概述 {#history-manager-methods-overview}
+
+| Name | 描述 |
+| :---------------------------------------------------------- | :----------------------------------------------------------------- |
+| [](api/diagram_editor/historymanager/methods/add_method.md) | @getshort(api/diagram_editor/historymanager/methods/add_method.md) |
+| [](api/diagram_editor/historymanager/methods/disable_method.md) | @getshort(api/diagram_editor/historymanager/methods/disable_method.md) |
+| [](api/diagram_editor/historymanager/methods/enable_method.md) | @getshort(api/diagram_editor/historymanager/methods/enable_method.md) |
+| [](api/diagram_editor/historymanager/methods/isredo_method.md) | @getshort(api/diagram_editor/historymanager/methods/isredo_method.md) |
+| [](api/diagram_editor/historymanager/methods/isundo_method.md) | @getshort(api/diagram_editor/historymanager/methods/isundo_method.md) |
+| [](api/diagram_editor/historymanager/methods/redo_method.md) | @getshort(api/diagram_editor/historymanager/methods/redo_method.md) |
+| [](api/diagram_editor/historymanager/methods/reset_method.md) | @getshort(api/diagram_editor/historymanager/methods/reset_method.md) |
+| [](api/diagram_editor/historymanager/methods/undo_method.md) | @getshort(api/diagram_editor/historymanager/methods/undo_method.md) |
+
+## HistoryManager 属性概述 {#history-manager-properties-overview}
+
+| Name | 描述 |
+| :---------------------------------------------------------- | :----------------------------------------------------------------- |
+| [](api/diagram_editor/historymanager/config/savedelay_property.md) | @getshort(api/diagram_editor/historymanager/config/savedelay_property.md) |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/overview.md
new file mode 100644
index 000000000..5030a7217
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/overview.md
@@ -0,0 +1,11 @@
+---
+sidebar_label: HistoryManager 属性
+title: HistoryManager 属性概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中探索 HistoryManager 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天 DHTMLX Diagram 评估版本。
+---
+
+# HistoryManager 属性概述 {#history-manager-properties-overview}
+
+| Name | 描述 |
+| :----------------------------------------------------------------- | :------------------------------------------------------------------------ |
+| [](api/diagram_editor/historymanager/config/savedelay_property.md) | @getshort(api/diagram_editor/historymanager/config/savedelay_property.md) |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/savedelay_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/savedelay_property.md
new file mode 100644
index 000000000..eb37d62e0
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/config/savedelay_property.md
@@ -0,0 +1,35 @@
+---
+sidebar_label: saveDelay
+title: HistoryManager 的 saveDelay 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 HistoryManager 的 disabled 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天 DHTMLX Diagram 评估版本。
+---
+
+# saveDelay
+
+### 描述 {#description}
+
+@short: 设置以毫秒为单位保存当前状态的时间间隔
+
+### 用法 {#usage}
+
+~~~jsx
+saveDelay: number;
+~~~
+
+### 默认配置 {#default-config}
+
+~~~jsx
+saveDelay: 500
+~~~
+
+### 示例 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+
+editor.history.saveDelay = 1000;
+~~~
+
+**更新日志**：v4.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/add_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/add_method.md
new file mode 100644
index 000000000..3dcb347d7
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/add_method.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: add()
+title: HistoryManager 的 add 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 HistoryManager 的 add 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天 DHTMLX Diagram 评估版本。
+---
+
+# add()
+
+### 描述 {#description}
+
+@short: 添加一个新状态
+
+:::info
+新状态是自动添加的，因此不建议手动使用此方法
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+add(newState: array): void;
+~~~
+
+### 参数 {#parameters}
+
+- `newState` - （必需）表示图表当前状态的 JSON 对象数组
+
+### 示例 {#example}
+
+~~~jsx {5-9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.add([
+ { "id": "shape_1", "type": "start", "x": 200, y: 0, "text": "Start" },
+ { "id": "shape_2", "type": "process", "x": 200, y: 120, "text": "Call the client" },
+ { "id": "line_1", "type": "line", "from": "shape_1", "to": "shape_2" }
+]);
+~~~
+
+**更新日志**：v4.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/disable_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/disable_method.md
new file mode 100644
index 000000000..09e33785a
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/disable_method.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: disable()
+title: HistoryManager 的 disable 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 HistoryManager 的 disable 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天 DHTMLX Diagram 评估版本。
+---
+
+# disable()
+
+### 描述 {#description}
+
+@short: 阻止 HistoryManager
+
+### 用法 {#usage}
+
+~~~jsx
+disable(): void;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.disable();
+~~~
+
+:::note
+请注意，禁用 HistoryManager 后，您将无法通过快捷键操作历史记录。
+:::
+
+**更新日志**：v4.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/enable_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/enable_method.md
new file mode 100644
index 000000000..6cdc1cdb2
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/enable_method.md
@@ -0,0 +1,29 @@
+---
+sidebar_label: enable()
+title: HistoryManager 的 enable 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 HistoryManager 的 enable 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# enable()
+
+### 描述 {#description}
+
+@short: 重新启动 HistoryManager 的工作，将当前状态保存为初始状态
+
+### 用法 {#usage}
+
+~~~jsx
+enable(): void;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.enable();
+~~~
+
+**更新日志**：v4.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isredo_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isredo_method.md
new file mode 100644
index 000000000..c7a8ad85e
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isredo_method.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: isRedo()
+title: HistoryManager 的 isRedo 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 HistoryManager 的 isRedo 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# isRedo()
+
+### 描述 {#description}
+
+@short: 检查通过 Undo 操作撤销的动作是否已被恢复
+
+### 用法 {#usage}
+
+~~~jsx
+isRedo(): boolean;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+...
+editor.history.isRedo();
+~~~
+
+### 返回值 {#returns}
+
+如果通过 Undo 操作撤销的动作已被恢复，该方法返回 `true`；否则返回 `false`
+
+**更新日志**：v4.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isundo_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isundo_method.md
new file mode 100644
index 000000000..913b4283f
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/isundo_method.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: isUndo()
+title: HistoryManager 的 isUndo 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 HistoryManager 的 isUndo 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# isUndo()
+
+### 描述 {#description}
+
+@short: 检查某个动作是否已被撤销
+
+### 用法 {#usage}
+
+~~~jsx
+isUndo(): boolean;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.isUndo();
+~~~
+
+### 返回值 {#returns}
+
+如果动作已被撤销，该方法返回 `true`；否则返回 `false`
+
+**更新日志**：v4.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/overview.md
new file mode 100644
index 000000000..99620afb4
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/overview.md
@@ -0,0 +1,20 @@
+---
+sidebar_label: History manager 方法
+title: History manager 方法概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中探索 History manager 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# History manager API 概述 {#history-manager-api-overview}
+
+## History manager 方法概述 {#history-manager-methods-overview}
+
+| 名称 | 描述 |
+| :---------------------------------------------------------- | :----------------------------------------------------------------- |
+| [](api/diagram_editor/historymanager/methods/add_method.md) | @getshort(api/diagram_editor/historymanager/methods/add_method.md) |
+| [](api/diagram_editor/historymanager/methods/disable_method.md) | @getshort(api/diagram_editor/historymanager/methods/disable_method.md) |
+| [](api/diagram_editor/historymanager/methods/enable_method.md) | @getshort(api/diagram_editor/historymanager/methods/enable_method.md) |
+| [](api/diagram_editor/historymanager/methods/isredo_method.md) | @getshort(api/diagram_editor/historymanager/methods/isredo_method.md) |
+| [](api/diagram_editor/historymanager/methods/isundo_method.md) | @getshort(api/diagram_editor/historymanager/methods/isundo_method.md) |
+| [](api/diagram_editor/historymanager/methods/redo_method.md) | @getshort(api/diagram_editor/historymanager/methods/redo_method.md) |
+| [](api/diagram_editor/historymanager/methods/reset_method.md) | @getshort(api/diagram_editor/historymanager/methods/reset_method.md) |
+| [](api/diagram_editor/historymanager/methods/undo_method.md) | @getshort(api/diagram_editor/historymanager/methods/undo_method.md) |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/redo_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/redo_method.md
new file mode 100644
index 000000000..8c2175872
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/redo_method.md
@@ -0,0 +1,29 @@
+---
+sidebar_label: redo()
+title: HistoryManager 的 redo 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 HistoryManager 的 redo 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# redo()
+
+### 描述 {#description}
+
+@short: 恢复被 Undo 操作撤销的动作
+
+### 用法 {#usage}
+
+~~~jsx
+redo(): void;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.redo();
+~~~
+
+**更新日志**：v4.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/reset_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/reset_method.md
new file mode 100644
index 000000000..d2675c88b
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/reset_method.md
@@ -0,0 +1,29 @@
+---
+sidebar_label: reset()
+title: HistoryManager 的 reset 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 HistoryManager 的 reset 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# reset()
+
+### 描述 {#description}
+
+@short: 重置之前的更改并保存当前状态
+
+### 用法 {#usage}
+
+~~~jsx
+reset(): void;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.reset();
+~~~
+
+**更新日志**：v4.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/undo_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/undo_method.md
new file mode 100644
index 000000000..bc2ceca21
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/historymanager/methods/undo_method.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: undo()
+title: HistoryManager 的 undo 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 HistoryManager 的 undo 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# undo()
+
+### 描述 {#description}
+
+@short: 撤销 Diagram Editor 中的最后一步操作
+
+### 用法 {#usage}
+
+~~~jsx
+undo(first?: boolean): void;
+~~~
+
+### 参数 {#parameters}
+
+- `first` - （可选）*true* 表示撤销所有历史更改
+
+### 示例 {#example}
+
+~~~jsx {5}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+// ...
+editor.history.undo();
+~~~
+
+**更新日志**：v4.1 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/api_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/api_overview.md
new file mode 100644
index 000000000..b5a76630a
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/api_overview.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: Shapebar API 概述
+title: Shapebar API 概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中查看 Shapebar 概述。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# Shapebar API 概述 {#shapebar-api-overview}
+
+[Shapebar](guides/diagram_editor/shapebar.md) 是 Diagram Editor 的一部分，用于渲染 Diagram 项目（形状、组和泳道）的预览。使用 [`view`](api/diagram_editor/editor/config/view_property.md) 配置对象的 `shapebar` 属性来显示、隐藏和配置 Shapebar。您可以从以下两种初始化方式中进行选择：
+
+- 使用 `shapebar:true` 设置创建默认的 Shapebar：
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: true // 显示默认的 Shapebar
+ }
+});
+~~~
+
+- 将 Shapebar 指定为具有[一组属性](/category/shapebar-properties/)的对象来进行配置：
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // 通过对象配置 Shapebar
+ shapebar: {
+ css: "custom_css",
+ show: true,
+ width: 300,
+ preview: {
+ scale: 0.65,
+ gap: 8
+ },
+ sections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+ }
+ }
+});
+~~~
+
+请查看[相关 API 部分](/category/shapebar-properties/)以了解 Shapebar 的可用属性。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/css_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/css_property.md
new file mode 100644
index 000000000..f52ed428d
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/css_property.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: css
+title: Shapebar 的 css 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Shapebar 的 css 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# css
+
+### 描述 {#description}
+
+@short: 可选。允许应用自定义 CSS 类以调整 shapebar 的外观
+
+### 用法 {#usage}
+
+~~~jsx
+css?: string;
+~~~
+
+### 示例 {#example}
+
+~~~html {8}
+
+
+
+~~~
+
+**相关文章：**
+
+- [Shapebar 与形状外观](guides/diagram_editor/shapebar.md#shapebar-and-shapes-appearance)
+- [配置 Shapebar 中形状的外观](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar)
+
+**更新日志：** v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/preview_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/preview_property.md
new file mode 100644
index 000000000..ef1a17ab7
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/preview_property.md
@@ -0,0 +1,85 @@
+---
+sidebar_label: preview
+title: Shapebar 的 preview 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Shapebar 的 preview 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# preview
+
+### 描述 {#description}
+
+@short: 可选。用于配置项目预览的对象
+
+### 用法 {#usage}
+
+~~~jsx
+preview?: {
+ scale?: number,
+ gap?: string | number
+}
+~~~
+
+### 参数 {#parameters}
+
+- `scale` - （可选）定义编辑器 shapebar 中渲染项目的缩放比例
+- `gap` - （可选）指定 shapebar 中渲染项目之间的间距
+
+### 默认配置 {#default-config}
+
+~~~jsx
+preview: {
+ scale: 0.5,
+ gap: "6px 8px"
+ // 为上下两侧设置 6px 的间距，为左右两侧设置 8px 的间距
+};
+~~~
+
+### 示例 {#example}
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // 显示默认的 Shapebar
+ // 或通过对象配置 Shapebar
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 8
+ }
+ }
+ }
+});
+~~~
+
+### 详情 {#details}
+
+`gap` 和 `scale` 属性的值可以通过形状对象的 [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) 属性中的 `gap` 和 `scale` 特性，为单个形状重新定义：
+
+~~~jsx {14-17}
+const defaults = {
+ rectangle: {
+ preview: {
+ scale: 0.72,
+ gap: 8
+ }
+ }
+}
+
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 2
+ }
+ }
+ },
+ defaults
+});
+~~~
+
+**相关文章：** [Shapebar](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes)
+
+**更新日志：** v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/sections_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/sections_property.md
new file mode 100644
index 000000000..e79730d01
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/sections_property.md
@@ -0,0 +1,174 @@
+---
+sidebar_label: sections
+title: Shapebar 的 sections 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Shapebar 的 sections 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# sections
+
+shapebar 的[默认分区](guides/diagram_editor/shapebar.md#default-sections)为：*Shapes*、*Groups*、*Swimlanes*。
+
+使用 `sections` 属性，您可以更改 shapebar 的结构并显示所需的项目。
+
+### 描述 {#description}
+
+@short: 可选。一个对象，用于指定将显示在编辑器 shapebar 中的项目分区
+
+### 用法 {#usage}
+
+~~~jsx
+sections?: {
+ [name: string]: (obj | string)[]
+};
+~~~
+
+### 参数 {#parameters}
+
+`sections` 对象可以包含一组 *key:value* 键值对，其中：
+- `key` - 用户指定的分区名称
+- `value` - 一个数组，可以包含：
+ - 一个包含单个 *key:value* 键值对的对象，用于渲染基本形状集。可用的键值对列表如下：
+ - `{flowShapes: true}` - （可选）显示所有可用类型的 [流程图](shapes/default_shapes.md#shapes-in-the-default-mode) 形状
+ - `{org: true}` - （可选）显示 Org 形状：`"card"` 和 `"img-card"` 形状类型
+ - `{group: true}` - （可选）显示一组基本的 Groups
+ - `{swimlane: true}` - （可选）显示一组基本的 Swimlanes
+ - 一个字符串值，指定要在分区中渲染的项目的具体类型（例如 `"text"`、`"topic"` 等）
+ - 一个包含多个 *key:value* 键值对的对象，用于重新定义任意形状的默认属性
+
+### 示例 {#example}
+
+~~~jsx {7-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // 显示默认的 Shapebar
+ // 或通过对象配置 Shapebar
+ shapebar: {
+ sections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+ }
+ }
+});
+~~~
+
+### 详情 {#details}
+
+根据所选元素的不同，特定分区中项目的配置可以是以下几种形式：
+
+1. 渲染基本分区
+
+您可以使用 `sections` 配置对象渲染一组基本形状。例如：
+
+~~~jsx {5-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Base flow shapes": [{ flowShapes: true }],
+ "Base org cards": [{ org: true }],
+ "Base groups": [{ group: true }],
+ "Base swimlane": [{ swimlane: true }]
+ }
+ }
+ }
+});
+~~~
+
+2. 使用字符串字面量指定项目
+
+您可以通过使用字符串字面量指定形状类型来渲染 Shapebar 项目。请查看以下示例：
+
+~~~jsx {5-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Custom section": ["custom_shape"],
+ "Other shapes": ["text", "topic", "circle"]
+ }
+ }
+ }
+});
+~~~
+
+3. 重新定义基本配置
+
+另一种方法是重新定义任意形状的基本属性，并使用所需的参数进行渲染。以下示例展示了使用不同文本和颜色设置渲染 `circle` 类型形状的效果：
+
+~~~jsx {5-23}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Circles": [
+ {
+ type: "circle",
+ fill: "#fcba03",
+ text: "Orange"
+ },
+ {
+ type: "circle",
+ fill: "#03d7fc",
+ text: "Blue"
+ },
+ {
+ type: "circle",
+ fill: "#03fc88",
+ text: "Green"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+您可以通过这种方式重新配置任意类型的形状。
+
+4. 在一个分区中组合不同类型的项目
+
+如果您的项目需要使用多种元素，您可以在 Shapebar 中创建包含混合类型项目的分区。请查看以下示例：
+
+~~~jsx {7-27}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // 显示默认的 Shapebar
+ // 或通过对象配置 Shapebar
+ shapebar: {
+ sections: {
+ "Base flow shapes": [{ flowShapes: true }, "text", "topic"],
+ "Circles": [
+ "circle",
+ {
+ type: "circle",
+ fill: "#fcba03",
+ text: "Orange"
+ },
+ {
+ type: "circle",
+ fill: "#03d7fc",
+ text: "Blue"
+ },
+ {
+ type: "circle",
+ fill: "#03fc88",
+ text: "Green"
+ }
+ ]
+ }
+ }
+ }
+});
+~~~
+
+**相关文章：** [Shapebar](guides/diagram_editor/shapebar.md#custom-sections)
+
+**更新日志：** v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/show_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/show_property.md
new file mode 100644
index 000000000..b34bd0600
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/show_property.md
@@ -0,0 +1,42 @@
+---
+sidebar_label: show
+title: Shapebar 的 show 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Shapebar 的 show 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# show
+
+### 描述 {#description}
+
+@short: 可选。定义在 Diagram Editor 初始化时是否显示具有自定义设置的 shapebar
+
+### 用法 {#usage}
+
+~~~jsx
+show?: boolean;
+~~~
+
+### 默认配置 {#default-config}
+
+~~~jsx
+show: true
+~~~
+
+### 示例 {#example}
+
+~~~jsx {7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // 显示默认的 Shapebar
+ // 或通过对象配置 Shapebar
+ shapebar: {
+ show: false // 默认值为 true
+ }
+ }
+});
+~~~
+
+**相关文章：** [Shapebar](guides/diagram_editor/shapebar.md#showinghiding-the-shapebar)
+
+**更新日志：** v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/width_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/width_property.md
new file mode 100644
index 000000000..921d7b888
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/shapebar/config/width_property.md
@@ -0,0 +1,42 @@
+---
+sidebar_label: width
+title: Shapebar 的 width 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Shapebar 的 width 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# width
+
+### 描述 {#description}
+
+@short: 可选。设置编辑器 shapebar 的宽度
+
+### 用法 {#usage}
+
+~~~jsx
+width?: number;
+~~~
+
+### 默认配置 {#default-config}
+
+~~~jsx
+width: 300
+~~~
+
+### 示例 {#example}
+
+~~~jsx {7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // shapebar: true, // 显示默认的 Shapebar
+ // 或通过对象配置 Shapebar
+ shapebar: {
+ width: 400 // 默认值为 300
+ }
+ }
+});
+~~~
+
+**相关文章：** [Shapebar](guides/diagram_editor/shapebar.md#setting-the-width-of-shapebar)
+
+**更新日志：** v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/api_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/api_overview.md
new file mode 100644
index 000000000..7a2896841
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/api_overview.md
@@ -0,0 +1,50 @@
+---
+sidebar_label: Toolbar API 概述
+title: Toolbar API 概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中查看 Toolbar 概述。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# Toolbar API 概述 {#toolbar-api-overview}
+
+[Toolbar](guides/diagram_editor/toolbar.md) 是 Diagram Editor 的一部分，可帮助用户控制编辑过程。使用 [`view`](api/diagram_editor/editor/config/view_property.md) 配置对象的 `toolbar` 属性来显示、隐藏和配置 Toolbar。您可以选择以下两种初始化方式之一：
+
+- 使用 `toolbar:true` 设置创建默认 Toolbar：
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true // 显示默认 Toolbar
+ }
+});
+~~~
+
+- 将 Toolbar 指定为具有[一组属性](/category/toolbar-properties/)的对象进行配置：
+
+~~~jsx
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // 通过对象配置 Toolbar
+ toolbar: {
+ css: "custom_css",
+ items: ["file", "spacer", "scale"],
+ navigationType: "pointer"
+ }
+ }
+});
+~~~
+
+请查看相关 API 章节，以了解 Toolbar 可用的方法、属性和事件。
+
+## Toolbar 方法 {#toolbar-methods}
+
+- [Toolbar 方法列表](api/diagram_editor/toolbar/methods/overview.md)
+
+## Toolbar 属性 {#toolbar-properties}
+
+- [Toolbar 属性列表](/category/toolbar-properties/)
+
+## Toolbar 事件 {#toolbar-events}
+
+- [Toolbar 事件列表](api/diagram_editor/toolbar/events/overview.md)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/css_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/css_property.md
new file mode 100644
index 000000000..71d8f16ed
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/css_property.md
@@ -0,0 +1,42 @@
+---
+sidebar_label: css
+title: Toolbar 的 css 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Toolbar 的 css 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# css
+
+### 描述 {#description}
+
+@short: 可选。应用自定义 CSS 类
+
+:::info
+自定义 CSS 类同样适用于展开的元素。此类元素将附加 `--popup-menu` 前缀。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+css?: string;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {7}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // toolbar: true, // 显示默认 Toolbar
+ // 或通过对象配置 Toolbar
+ toolbar: {
+ css: "custom_css",
+ items: ["file", "spacer", "scale"],
+ navigationType: "pointer"
+ }
+ }
+});
+~~~
+
+**更新日志**：v6.0 中新增
+
+**相关文章：** [Toolbar 配置](guides/diagram_editor/toolbar.md)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/items_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/items_property.md
new file mode 100644
index 000000000..d562398c2
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/items_property.md
@@ -0,0 +1,146 @@
+---
+sidebar_label: items
+title: Toolbar 的 items 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Toolbar 的 items 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# items
+
+### 描述 {#description}
+
+@short: 可选。一个数组，包含 Diagram Editor 的 Toolbar 上显示的控件
+
+### 用法 {#usage}
+
+~~~jsx
+items?: (object | string)[];
+~~~
+
+### 通过字符串配置 items {#configuring-items-via-strings}
+
+`items` 属性允许您将[**服务元素**](guides/diagram_editor/toolbar.md#service-elements)指定为一个字符串数组：
+
+~~~jsx
+items: [ "file", "edit", "view", "arrange", "spacer", "scale" ];
+~~~
+
+完整的服务元素列表请参见[此处](guides/diagram_editor/toolbar.md#service-elements)。
+
+### 通过对象配置 items {#configuring-items-via-objects}
+
+`items` 属性允许您将[**服务元素**](guides/diagram_editor/toolbar.md#service-elements)和[**基础元素**](guides/diagram_editor/toolbar.md#base-elements)指定为一个对象数组：
+
+~~~jsx
+items: [
+ {
+ type: string,
+ id?: string,
+ value?: string,
+ hotkey?: string,
+ icon?: string,
+ hidden?: boolean,
+ disabled?: boolean,
+ css?: string | string[],
+ items?: (string | object)[],
+ checkIcon?: (editor: object) => string,
+ handler?: (editor: object, event: Event) => void
+ }, {...}
+];
+~~~
+
+#### 参数 {#parameters}
+
+对于所有[**服务元素**](guides/diagram_editor/toolbar.md#service-elements)（`separator` / `spacer` / `scale` 除外），您可以指定一个具有以下参数的对象：
+
+- `type` - （必需）- 服务元素的类型。服务元素类型的完整列表请参见[此处](guides/diagram_editor/toolbar.md)
+- `id` - （可选）- 服务元素的 ID。默认情况下，服务元素的 ID 包含 `$` 和该服务元素的 `type`：`$file`
+- `value` - （可选）- 服务元素的标签
+- `hotkey` - （可选）- 服务元素的快捷键组合标签
+- `icon` - （可选）- 服务元素图标的 css 类
+- `hidden` - （可选）- 隐藏服务元素
+- `disabled` - （可选）- 禁用服务元素
+- `css` - （可选）- 为服务元素应用自定义 css 类
+- `items` - （可选）- 定义子元素的结构
+- `checkIcon` - （可选）- 返回图标 css 类的处理函数。调用时带有以下参数：
+ - `editor` - Diagram Editor 对象
+- `handler` - （可选）- 当 `click` 或 `inputChange` 事件发生时运行的处理函数。调用时带有以下参数：
+ - `editor` - Diagram Editor 对象
+ - `event` - 一个[原生事件](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+
+### 示例 1 {#example-1}
+
+下面的示例展示了如何通过字符串配置 Toolbar 的 items：
+
+~~~jsx {10-14}
+// 通过字符串配置 items
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // toolbar: true, // 显示默认 Toolbar
+ // 或通过对象配置 Toolbar
+ toolbar: {
+ css: "custom_css",
+ navigationType: "pointer",
+ items: [
+ "file",
+ "spacer",
+ "scale"
+ ]
+ }
+ }
+});
+~~~
+
+### 示例 2 {#example-2}
+
+下面的示例展示了如何通过对象配置 Toolbar 的 items：
+
+~~~jsx {7-38}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: {
+ css: "custom_css",
+ navigationType: "pointer",
+ items: [
+ {
+ type: "file",
+ items: [
+ "importJson",
+ {
+ type: "exportJson",
+ value: "Export to JSON"
+ },
+ {
+ id: "custom_id_1",
+ type: "menuItem",
+ value: "Server export",
+ icon: "dxi dxi-vault",
+ items: [
+ "exportPdf",
+ {
+ id: "custom_id_2",
+ type: "menuItem",
+ value: "PNG",
+ handler: editor => {
+ editor.diagram.export.png();
+ // 自定义逻辑
+ }
+ }
+ ]
+ }
+ ]
+ },
+ "spacer",
+ "scale"
+ ]
+ }
+ }
+});
+~~~
+
+**更新日志**：v6.0 中新增
+
+**相关文章：** [Toolbar 配置](guides/diagram_editor/toolbar.md)
+
+**相关示例：** [Diagram Editor。默认模式。工具栏自定义。新增按形状搜索功能](https://snippet.dhtmlx.com/846cz71r)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/navigationtype_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/navigationtype_property.md
new file mode 100644
index 000000000..468294034
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/config/navigationtype_property.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: navigationType
+title: Toolbar 的 navigationType 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Toolbar 的 css 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# navigationType
+
+### 描述 {#description}
+
+@short: 可选。设置打开菜单选项的操作
+
+### 用法 {#usage}
+
+~~~jsx
+navigationType?: "click" | "pointer";
+~~~
+
+:::info
+- `"click"` - 用户点击时显示菜单
+- `"pointer"` - 用户将鼠标指针悬停在其上时显示菜单
+:::
+
+### 默认配置 {#default-config}
+
+~~~jsx
+navigationType: "click"
+~~~
+
+### 示例 {#example}
+
+~~~jsx {9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ // toolbar: true, // 显示默认 Toolbar
+ // 或通过对象配置 Toolbar
+ toolbar: {
+ css: "custom_css",
+ items: ["file", "spacer", "scale"],
+ navigationType: "pointer"
+ }
+ }
+});
+~~~
+
+**更新日志**：v6.0 中新增
+
+**相关文章：** [Toolbar 配置](guides/diagram_editor/toolbar.md)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/overview.md
new file mode 100644
index 000000000..0169cae97
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/overview.md
@@ -0,0 +1,65 @@
+---
+sidebar_label: 事件概述
+title: Toolbar 事件概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Toolbar 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# Toolbar 事件概述 {#toolbar-events-overview}
+
+您可以使用[**Suite**](https://docs.dhtmlx.com/suite/)的以下 [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-events/) 事件：
+
+| Name | Description |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
+| [afterHide](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_afterhide_event/) | 在隐藏 Toolbar 的子项之后触发 |
+| [beforeHide](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_beforehide_event/) | 在隐藏 Toolbar 的子项之前触发 |
+| [click](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_click_event/) | 在点击控件之后触发 |
+| [input](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_input_event/) | 在输入框中输入文本时触发 |
+| [inputBlur](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputblur_event/) | 在控件失去焦点时触发 |
+| [inputChange](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputchange_event/) | 在更改 Toolbar 的 Input 控件的值时触发 |
+| [inputFocus](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputfocus_event/) | 在控件获得焦点时触发 |
+| [keydown](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_keydown_event/) | 在 Toolbar 的某个控件处于焦点状态时按下任意键触发 |
+| [openMenu](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_openmenu_event/) | 在展开菜单控件时触发 |
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// 处理 "click" 事件
+editor.toolbar.events.on("click", (id, event) => {
+ // 一些逻辑
+});
+~~~
+
+# TreeCollection 事件概述 {#treecollection-events-overview}
+
+您可以使用[**Suite**](https://docs.dhtmlx.com/suite/)的以下 [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-events/) 事件：
+
+| Name | Description |
+| ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| [afterAdd](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_afteradd_event/) | 在向树集合中添加新项之后触发 |
+| [afterRemove](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_afterremove_event/) | 在从树集合中删除新项之后触发 |
+| [beforeAdd](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_beforeadd_event/) | 在向树集合中添加新项之前触发 |
+| [beforeRemove](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_beforeremove_event/) | 在从树集合中删除项目之前触发 |
+| [change](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_change_event/) | 在树集合被修改时触发 |
+| [filter](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_filter_event/) | 在筛选树集合之后触发 |
+| [load](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_load_event/) | 在树集合中加载项目时触发 |
+| [loadError](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_loaderror_event/) | 在数据加载失败时触发 |
+| [removeAll](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_removeall_event/) | 在从树集合中删除所有项目时触发 |
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// 处理 "load" 事件
+editor.toolbar.events.on("load", () => {
+ // 一些逻辑
+});
+// 加载新的 toolbar 数据
+editor.toolbar.parse(["file", "spacer", "scale"]);
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/toolbar_events.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/toolbar_events.md
new file mode 100644
index 000000000..36ed0c2e4
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/toolbar_events.md
@@ -0,0 +1,32 @@
+---
+sidebar_label: Toolbar 事件
+title: Toolbar 的事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Toolbar 的事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+您可以使用 [**Suite**](https://docs.dhtmlx.com/suite/) 中的以下 [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-events/) 事件：
+
+| 名称 | 描述 |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
+| [afterHide](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_afterhide_event/) | 在隐藏 Toolbar 的子项后触发 |
+| [beforeHide](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_beforehide_event/) | 在隐藏 Toolbar 的子项之前触发 |
+| [click](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_click_event/) | 点击控件后触发 |
+| [input](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_input_event/) | 在输入框中输入文本时触发 |
+| [inputBlur](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputblur_event/) | 当控件失去焦点时触发 |
+| [inputChange](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputchange_event/) | 更改 Toolbar 中 Input 控件的值时触发 |
+| [inputFocus](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_inputfocus_event/) | 当控件获得焦点时触发 |
+| [keydown](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_keydown_event/) | 当 Toolbar 的控件处于焦点状态且按下任意键时触发 |
+| [openMenu](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_openmenu_event/) | 展开菜单控件时触发 |
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// 处理 "click" 事件
+editor.toolbar.events.on("click", (id, event) => {
+ // 此处编写具体逻辑
+});
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/treecollection_events.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/treecollection_events.md
new file mode 100644
index 000000000..e242a3377
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/events/treecollection_events.md
@@ -0,0 +1,34 @@
+---
+sidebar_label: TreeCollection 事件
+title: Toolbar 的 TreeCollection 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Toolbar 的 TreeCollection 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+您可以使用 [**Suite**](https://docs.dhtmlx.com/suite/) 中的以下 [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-events/) 事件：
+
+| 名称 | 描述 |
+| ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| [afterAdd](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_afteradd_event/) | 在向树集合中添加新项目后触发 |
+| [afterRemove](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_afterremove_event/) | 在从树集合中删除新项目后触发|
+| [beforeAdd](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_beforeadd_event/) | 在向树集合中添加新项目之前触发 |
+| [beforeRemove](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_beforeremove_event/) | 在从树集合中删除项目之前触发|
+| [change](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_change_event/) | 当树集合被修改时触发 |
+| [filter](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_filter_event/) | 筛选树集合后触发 |
+| [load](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_load_event/) | 当树集合中的项目被加载时触发 |
+| [loadError](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_loaderror_event/) | 当数据加载失败时触发 |
+| [removeAll](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_removeall_event/) | 当树集合中的所有项目被删除时触发|
+
+~~~jsx {7-10}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// 处理 "load" 事件
+editor.toolbar.events.on("load", () => {
+ // 此处编写具体逻辑
+});
+// 加载新的 Toolbar 数据
+editor.toolbar.parse(["file", "spacer", "scale"]);
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/overview.md
new file mode 100644
index 000000000..51472125f
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/overview.md
@@ -0,0 +1,89 @@
+---
+sidebar_label: 方法概述
+title: Toolbar 方法概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Toolbar 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# Toolbar 方法概述 {#toolbar-methods-overview}
+
+:::info
+如需在 Toolbar 中处理数据，请使用 [`parse()`](api/diagram_editor/toolbar/methods/parse_method.md) 方法。
+:::
+
+您可以使用 [**Suite**](https://docs.dhtmlx.com/suite/) 中的以下 [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-methods/) 方法：
+
+| 名称 | 描述 |
+| :------------------------------------------------------------------------------------ | :--------------------------------------------------------- |
+| [disable()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_disable_method/) | 禁用并淡化 Toolbar 的一个或多个项目 |
+| [enable()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_enable_method/) | 启用 Toolbar 中已禁用的一个或多个项目 |
+| [getSelected()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_getselected_method/)| 返回包含已选项目 ID 的数组 |
+| [getState()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_getstate_method/) | 获取控件的当前值/状态 |
+| [hide()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_hide_method/) | 隐藏 Toolbar 的一个项目 |
+| [isDisabled()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_isdisabled_method/) | 检查 Toolbar 的某个项目是否已禁用 |
+| [isSelected()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_isselected_method/) | 检查指定的 Toolbar 项目是否已被选中 |
+| [paint()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_paint_method/) | 在页面上重新绘制 Toolbar |
+| [select()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_select_method/) | 选中 Toolbar 的指定项目 |
+| [setFocus()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_setfocus_method/) | 通过 ID 将焦点设置到 Input 控件上 |
+| [setState()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_setstate_method/) | 设置控件的值/状态 |
+| [show()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_show_method/) | 显示 Toolbar 的一个项目 |
+| [unselect()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_unselect_method/) | 取消选中已选中的 Toolbar 项目 |
+
+~~~jsx {7-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// 禁用 "file" 项目
+editor.toolbar.disable("$file");
+// 禁用 "file" 和 "scale" 项目
+editor.toolbar.disable(["$file", "$scale"]);
+// 禁用所有项目
+editor.toolbar.disable();
+~~~
+
+# TreeCollection 方法概述 {#treecollection-methods-overview}
+
+您可以使用 [**Suite**](https://docs.dhtmlx.com/suite/) 中的以下 [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-methods/) 方法：
+
+| 名称 | 描述 |
+| ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| [add()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_add_method/) | 向组件添加一个项目 |
+| [canCopy()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_cancopy_method/) | 检查是否可以将某个控件复制到另一个控件中 |
+| [copy()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_copy_method/) | 添加项目的副本并将其放置在指定位置 |
+| [eachChild()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_eachchild_method/) | 遍历控件的子项目 |
+| [eachParent()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_eachparent_method/) | 遍历所有父级项目（直接父项及其父项，依此类推，直到父项为组件本身） |
+| [exists()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_exists_method/) | 检查指定项目是否存在于组件中 |
+| [filter()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_filter_method/) | 按指定条件筛选控件 |
+| [forEach()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_foreach_method/) | 遍历树集合的所有项目 |
+| [getFilters()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getfilters_method/) | 返回包含已应用筛选条件的对象 |
+| [getId()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getid_method/) | 获取项目的 ID |
+| [getIndex()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getindex_method/) | 获取项目的当前位置 |
+| [getItem()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getitem_method/) | 通过 ID 获取项目 |
+| [getItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getitems_method/) | 获取控件的子项目 |
+| [getLength()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getlength_method/) | 统计控件的子项目数量 |
+| [getParent()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getparent_method/) | 获取控件父项的 ID |
+| [getRoot()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getroot_method/) | 返回主组件的 ID |
+| [haveItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_haveitems_method/) | 检查项目是否包含子项目 |
+| [move()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_move_method/) | 将项目移动到不同位置 |
+| [refreshItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_refreshitems_method/) | 刷新控件的子项目 |
+| [remove()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_remove_method/) | 删除一个项目 |
+| [removeAll()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_removeall_method/) | 清空组件中的所有控件 |
+| [resetFilter()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_resetfilter_method/) | 重置当前生效的筛选条件 |
+| [restoreOrder()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_restoreorder_method/) | 将组件恢复到排序/筛选之前的状态 |
+| [save()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_save_method/) | 将树集合中所做的更改保存到服务器端 |
+| [serialize()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_serialize_method/) | 将组件数据序列化为 JSON、XML 或 CSV 格式 |
+| [sort()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_sort_method/) | 根据指定条件对控件进行排序 |
+| [update()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_update_method/) | 更改一个项目 |
+
+~~~jsx {7-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// 删除 Toolbar 中的所有项目
+editor.toolbar.data.removeAll();
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/parse_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/parse_method.md
new file mode 100644
index 000000000..ede45707c
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/parse_method.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: parse()
+title: Toolbar 的 parse 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Toolbar 的 parse 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# parse()
+
+### 描述 {#description}
+
+@short: 将项目加载到 Diagram Editor 的 Toolbar 中
+
+### 用法 {#usage}
+
+~~~jsx
+parse(items: (object | string)[]): void;
+~~~
+
+### 参数 {#parameters}
+
+- `items` -（必需）解析到 Toolbar 中的项目数组。完整的可用项目列表请参见[此处](api/diagram_editor/toolbar/config/items_property.md)
+
+### 示例 {#example}
+
+~~~jsx {7-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ toolbar: true
+ }
+});
+// 使用指定的项目显示 Toolbar
+editor.toolbar.parse([{ type: "file", disabled: false }, "spacer", "scale"]);
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/toolbar_methods.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/toolbar_methods.md
new file mode 100644
index 000000000..4616aa768
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/toolbar_methods.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: Toolbar 方法
+title: Toolbar 的方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Toolbar 的方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+您可以使用 [**Suite**](https://docs.dhtmlx.com/suite/) 中的以下 [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-methods/) 方法：
+
+| 名称 | 描述 |
+| :------------------------------------------------------------------------------------ | :--------------------------------------------------------- |
+| [disable()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_disable_method/) | 禁用并淡化 Toolbar 的一个或多个项目 |
+| [enable()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_enable_method/) | 启用 Toolbar 中已禁用的一个或多个项目 |
+| [getSelected()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_getselected_method/)| 返回包含已选项目 ID 的数组 |
+| [getState()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_getstate_method/) | 获取控件的当前值/状态 |
+| [hide()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_hide_method/) | 隐藏 Toolbar 的一个项目 |
+| [isDisabled()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_isdisabled_method/) | 检查 Toolbar 的某个项目是否已禁用 |
+| [isSelected()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_isselected_method/) | 检查指定的 Toolbar 项目是否已被选中 |
+| [paint()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_paint_method/) | 在页面上重新绘制 Toolbar |
+| [select()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_select_method/) | 选中 Toolbar 的指定项目 |
+| [setFocus()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_setfocus_method/) | 通过 ID 将焦点设置到 Input 控件上 |
+| [setState()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_setstate_method/) | 设置控件的值/状态 |
+| [show()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_show_method/) | 显示 Toolbar 的一个项目 |
+| [unselect()](https://docs.dhtmlx.com/suite/toolbar/api/toolbar_unselect_method/) | 取消选中已选中的 Toolbar 项目 |
+
+~~~jsx {7-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// 禁用 "file" 项目
+editor.toolbar.disable("$file");
+// 禁用 "file" 和 "scale" 项目
+editor.toolbar.disable(["$file", "$scale"]);
+// 禁用所有项目
+editor.toolbar.disable();
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/treecollection_methods.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/treecollection_methods.md
new file mode 100644
index 000000000..20f238652
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/toolbar/methods/treecollection_methods.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: TreeCollection 方法
+title: Toolbar 的 TreeCollection 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Toolbar 的 TreeCollection 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+您可以使用 [**Suite**](https://docs.dhtmlx.com/suite/) 中的以下 [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-methods/) 方法：
+
+| 名称 | 描述 |
+| ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| [add()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_add_method/) | 向组件添加一个项目 |
+| [canCopy()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_cancopy_method/) | 检查是否可以将某个控件复制到另一个控件中 |
+| [copy()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_copy_method/) | 添加项目的副本并将其放置在指定位置 |
+| [eachChild()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_eachchild_method/) | 遍历控件的子项目 |
+| [eachParent()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_eachparent_method/) | 遍历所有父级项目（直接父项及其父项，依此类推，直到父项为组件本身） |
+| [exists()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_exists_method/) | 检查指定项目是否存在于组件中 |
+| [filter()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_filter_method/) | 按指定条件筛选控件 |
+| [forEach()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_foreach_method/) | 遍历树集合的所有项目 |
+| [getFilters()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getfilters_method/) | 返回包含已应用筛选条件的对象 |
+| [getId()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getid_method/) | 获取项目的 ID |
+| [getIndex()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getindex_method/) | 获取项目的当前位置 |
+| [getItem()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getitem_method/) | 通过 ID 获取项目 |
+| [getItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getitems_method/) | 获取控件的子项目 |
+| [getLength()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getlength_method/) | 统计控件的子项目数量 |
+| [getParent()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getparent_method/) | 获取控件父项的 ID |
+| [getRoot()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_getroot_method/) | 返回主组件的 ID |
+| [haveItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_haveitems_method/) | 检查项目是否包含子项目 |
+| [move()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_move_method/) | 将项目移动到不同位置 |
+| [refreshItems()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_refreshitems_method/) | 刷新控件的子项目 |
+| [remove()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_remove_method/) | 删除一个项目 |
+| [removeAll()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_removeall_method/) | 清空组件中的所有控件 |
+| [resetFilter()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_resetfilter_method/) | 重置当前生效的筛选条件 |
+| [restoreOrder()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_restoreorder_method/) | 将组件恢复到排序/筛选之前的状态 |
+| [save()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_save_method/) | 将树集合中所做的更改保存到服务器端 |
+| [serialize()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_serialize_method/) | 将组件数据序列化为 JSON、XML 或 CSV 格式 |
+| [sort()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_sort_method/) | 根据指定条件对控件进行排序 |
+| [update()](https://docs.dhtmlx.com/suite/tree_collection/api/treecollection_update_method/) | 更改一个项目 |
+
+~~~jsx {7-12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: true
+ }
+});
+// 删除 Toolbar 中的所有项目
+editor.toolbar.data.removeAll();
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/api_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/api_overview.md
new file mode 100644
index 000000000..3467dc857
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/api_overview.md
@@ -0,0 +1,26 @@
+---
+sidebar_label: View API 概述
+title: View API 概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中查看 View 概述。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# View API 概述 {#view-api-overview}
+
+一组用于管理 Diagram Editor 视图（Toolbar、Shapebar 和 Editbar）可见性的 API。
+
+## View 方法概述 {#view-methods-overview}
+
+| Name | Description |
+| :---------------------------------------------------------- | :------------------------------------------------------------ |
+| [](api/diagram_editor/view/methods/hide_method.md) | @getshort(api/diagram_editor/view/methods/hide_method.md) |
+| [](api/diagram_editor/view/methods/isvisible_method.md) | @getshort(api/diagram_editor/view/methods/isvisible_method.md)|
+| [](api/diagram_editor/view/methods/show_method.md) | @getshort(api/diagram_editor/view/methods/show_method.md) |
+
+## View 事件概述 {#view-events-overview}
+
+| Name | Description |
+| :--------------------------------------------------------- | :---------------------------------------------------------- |
+| [](api/diagram_editor/view/events/afterhide_event.md) | @getshort(api/diagram_editor/view/events/afterhide_event) |
+| [](api/diagram_editor/view/events/aftershow_event.md) | @getshort(api/diagram_editor/view/events/aftershow_event) |
+| [](api/diagram_editor/view/events/beforehide_event.md) | @getshort(api/diagram_editor/view/events/beforehide_event) |
+| [](api/diagram_editor/view/events/beforeshow_event.md) | @getshort(api/diagram_editor/view/events/beforeshow_event) |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/afterhide_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/afterhide_event.md
new file mode 100644
index 000000000..4ba9c8d9b
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/afterhide_event.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: afterHide
+title: View 的 afterHide 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的 Diagram Editor 文档中了解 View 的 afterHide 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# afterHide
+
+### 描述 {#description}
+
+@short: 在 Toolbar、Editbar 或 Shapebar 视图隐藏后触发
+
+### 用法 {#usage}
+
+~~~jsx
+"afterHide": (view: "toolbar" | "shapebar" | "editbar") => void;
+~~~
+
+### 参数 {#parameters}
+
+`afterHide` 事件的回调函数将使用以下参数调用：
+
+- `view` - （必需）已隐藏的视图。有关详细信息，请参阅 [`view`](api/diagram_editor/editor/config/view_property.md) 属性。
+
+:::info
+如需处理 Diagram Editor 的内部事件，您可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {9-12}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: true
+ }
+});
+
+// 为事件绑定处理程序
+editor.view.events.on("afterHide", (view) => {
+ console.log("The " + view + " view of Diagram Editor was hidden");
+});
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/aftershow_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/aftershow_event.md
new file mode 100644
index 000000000..085b7e650
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/aftershow_event.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: afterShow
+title: View 的 afterShow 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的 Diagram Editor 文档中了解 View 的 afterShow 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# afterShow
+
+### 描述 {#description}
+
+@short: 在 Toolbar、Editbar 或 Shapebar 视图显示后触发
+
+### 用法 {#usage}
+
+~~~jsx
+"afterShow": (view: "toolbar" | "shapebar" | "editbar") => void;
+~~~
+
+### 参数 {#parameters}
+
+`afterShow` 事件的回调函数将使用以下参数调用：
+
+- `view` - （必需）已显示的视图。有关详细信息，请参阅 [`view`](api/diagram_editor/editor/config/view_property.md) 属性。
+
+:::info
+如需处理 Diagram Editor 的内部事件，您可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {9-12}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: false
+ }
+});
+
+// 为事件绑定处理程序
+editor.view.events.on("afterShow", (view) => {
+ console.log("The " + view + " view of Diagram Editor was displayed");
+});
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforehide_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforehide_event.md
new file mode 100644
index 000000000..d2a2a8bb5
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforehide_event.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: beforeHide
+title: View 的 beforeHide 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的 Diagram Editor 文档中了解 View 的 beforeHide 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# beforeHide
+
+### 描述 {#description}
+
+@short: 在 Toolbar、Editbar 或 Shapebar 视图隐藏之前触发
+
+### 用法 {#usage}
+
+~~~jsx
+"beforeHide": (view: "toolbar" | "shapebar" | "editbar") => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+`beforeHide` 事件的回调函数将使用以下参数调用：
+
+- `view` - （必需）即将隐藏的视图。有关详细信息，请参阅 [`view`](api/diagram_editor/editor/config/view_property.md) 属性。
+
+:::info
+如需处理 Diagram Editor 的内部事件，您可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {9-12}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: true
+ }
+});
+
+// 为事件绑定处理程序
+editor.view.events.on("beforeHide", (view) => {
+ console.log("The " + view + " view of Diagram Editor will be hidden");
+});
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforeshow_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforeshow_event.md
new file mode 100644
index 000000000..3b18c2f4f
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/beforeshow_event.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: beforeShow
+title: View 的 beforeShow 事件
+description: 您可以在 DHTMLX JavaScript Diagram 库的 Diagram Editor 文档中了解 View 的 beforeShow 事件。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# beforeShow
+
+### 描述 {#description}
+
+@short: 在 Toolbar、Editbar 或 Shapebar 视图显示之前触发
+
+### 用法 {#usage}
+
+~~~jsx
+"beforeShow": (view: "toolbar" | "shapebar" | "editbar") => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+`beforeShow` 事件的回调函数将使用以下参数调用：
+
+- `view` - （必需）即将显示的视图。有关详细信息，请参阅 [`view`](api/diagram_editor/editor/config/view_property.md) 属性。
+
+:::info
+如需处理 Diagram Editor 的内部事件，您可以使用 `on()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {9-12}
+// 初始化 Diagram Editor
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: false
+ }
+});
+
+// 为事件绑定处理程序
+editor.view.events.on("beforeShow", (view) => {
+ console.log("The " + view + " view of Diagram Editor will be displayed");
+});
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/overview.md
new file mode 100644
index 000000000..2244597d4
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/events/overview.md
@@ -0,0 +1,14 @@
+---
+sidebar_label: 视图事件
+title: 视图事件概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解视图事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天试用版。
+---
+
+# 视图事件概述 {#view-events-overview}
+
+| Name | 描述 |
+| :--------------------------------------------------------- | :---------------------------------------------------------------- |
+| [](api/diagram_editor/view/events/afterhide_event.md) | @getshort(api/diagram_editor/view/events/afterhide_event) |
+| [](api/diagram_editor/view/events/aftershow_event.md) | @getshort(api/diagram_editor/view/events/aftershow_event) |
+| [](api/diagram_editor/view/events/beforehide_event.md) | @getshort(api/diagram_editor/view/events/beforehide_event) |
+| [](api/diagram_editor/view/events/beforeshow_event.md) | @getshort(api/diagram_editor/view/events/beforeshow_event) |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/hide_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/hide_method.md
new file mode 100644
index 000000000..da49cfd58
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/hide_method.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: hide()
+title: 视图的 hide 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解视图的 hide 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天试用版。
+---
+
+# hide()
+
+### 描述 {#description}
+
+@short: 隐藏 Diagram Editor 的 Toolbar、Editbar 和 Shapebar 视图。
+
+:::info
+如果需要分别隐藏 `Toolbar`、`Editbar` 和 `Shapebar` 视图，请使用相应的参数调用 `hide()` 方法。若要隐藏所有这些元素，请调用不带参数的 `hide()` 方法。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+hide(view?: "toolbar" | "shapebar" | "editbar"): void;
+~~~
+
+### 参数 {#parameters}
+
+- `toolbar` - （可选）隐藏 Toolbar
+- `shapebar` - （可选）隐藏 Shapebar
+- `editbar` - （可选）隐藏 Editbar
+
+### 示例 {#example}
+
+~~~jsx {5-6,8-9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+
+// 隐藏 Shapebar 视图
+editor.view.hide("shapebar");
+
+// 隐藏 Shapebar、Editbar 和 Toolbar
+editor.view.hide();
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/isvisible_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/isvisible_method.md
new file mode 100644
index 000000000..f74b79468
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/isvisible_method.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: isVisible()
+title: 视图的 isVisible 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解视图的 isVisible 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天试用版。
+---
+
+# isVisible()
+
+### 描述 {#description}
+
+@short: 检查 Diagram Editor 的 Toolbar、Editbar 或 Shapebar 视图是否可见。
+
+### 用法 {#usage}
+
+~~~jsx
+isVisible(view: "toolbar" | "shapebar" | "editbar"): boolean;
+~~~
+
+### 参数 {#parameters}
+
+- `toolbar` - （必需）检查 Toolbar 是否可见
+- `shapebar` - （必需）检查 Shapebar 是否可见
+- `editbar` - （必需）检查 Editbar 是否可见
+
+### 示例 {#example}
+
+~~~jsx {9-11}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: false,
+ toolbar: true
+ }
+});
+
+// 检查 Toolbar 和 Shapebar 的可见性
+editor.view.isVisible("shapebar"); // 返回 false
+editor.view.isVisible("toolbar"); // 返回 true
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/overview.md
new file mode 100644
index 000000000..5a991b496
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/overview.md
@@ -0,0 +1,13 @@
+---
+sidebar_label: 视图方法
+title: 视图方法概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解视图方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天试用版。
+---
+
+# 视图方法概述 {#view-methods-overview}
+
+| Name | 描述 |
+| :----------------------------------------------------- | :------------------------------------------------------------- |
+| [](api/diagram_editor/view/methods/hide_method.md) | @getshort(api/diagram_editor/view/methods/hide_method.md) |
+| [](api/diagram_editor/view/methods/isvisible_method.md)| @getshort(api/diagram_editor/view/methods/isvisible_method.md) |
+| [](api/diagram_editor/view/methods/show_method.md) | @getshort(api/diagram_editor/view/methods/show_method.md) |
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/show_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/show_method.md
new file mode 100644
index 000000000..669e75008
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/view/methods/show_method.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: show()
+title: 视图的 show 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解视图的 show 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天试用版。
+---
+
+# show()
+
+### 描述 {#description}
+
+@short: 显示 Diagram Editor 的 Toolbar、Editbar 和 Shapebar 视图
+
+:::info
+如果需要分别显示 `Toolbar`、`Editbar` 或 `Shapebar` 视图，请使用相应的参数调用 `show()` 方法。若要显示所有这些元素，请调用不带参数的 `show()` 方法。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+show(view?: "toolbar" | "shapebar" | "editbar"): void;
+~~~
+
+### 参数 {#parameters}
+
+- `toolbar` - （可选）显示 Toolbar
+- `shapebar` - （可选）显示 Shapebar
+- `editbar` - （可选）显示 Editbar
+
+### 示例 {#example}
+
+~~~jsx {5-6,8-9}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+
+// 显示 Shapebar 视图
+editor.view.show("shapebar");
+
+// 显示 Shapebar、Editbar 和 Toolbar
+editor.view.show();
+~~~
+
+**更新日志**：v6.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/export/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/export/index.md
new file mode 100644
index 000000000..c67742610
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/export/index.md
@@ -0,0 +1,16 @@
+---
+sidebar_label: 导出方法
+title: 导出方法概述
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解图表导出方法的概述。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天试用版。
+---
+
+# 导出方法概述 {#export-methods-overview}
+
+`diagram.export` 对象的 API 方法允许您从 Diagram 或 Diagram Editor 导出数据。
+
+## 方法 {#methods}
+
+| 名称 | 描述 |
+| :--------------------------- | :---------------------------------- |
+| [](api/export/pdf_method.md) | @getshort(api/export/pdf_method.md) |
+| [](api/export/png_method.md) | @getshort(api/export/png_method.md) |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/export/pdf_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/export/pdf_method.md
new file mode 100644
index 000000000..85ee8b736
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/export/pdf_method.md
@@ -0,0 +1,110 @@
+---
+sidebar_label: pdf()
+title: pdf 方法
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 pdf 方法。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天试用版。
+---
+
+# pdf()
+
+### 描述 {#description}
+
+@short: 将图表导出为 PDF 文件
+
+:::note
+为了避免导出过程中出现问题，必须将 Diagram 图形的所有图像设置为 base64 格式或使用绝对 URL 路径。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+pdf(config?: object): Promise
+
+父形状与其伙伴之间的连接始终为水平方向。此外，一旦为父形状添加伙伴项，该父形状与其所有子形状之间的连接也会变为水平方向，即使之前是垂直连接。
+
+### 思维导图模式下的编辑器 {#editor-in-the-mindmap-mode}
+
+在思维导图模式下初始化的编辑器界面由三个部分组成：
+
+- [工具栏](guides/diagram_editor/toolbar.md)
+- [网格区域](guides/diagram_editor/grid_area.md)
+- [编辑栏](guides/diagram_editor/editbar.md)
+
+:::note
+该模式下的编辑器没有形状栏
+:::
+
+要在编辑器的思维导图模式下构建图表，您需要选择一个形状并为其添加一个新的子项。您可以将形状从一个父项拖动到另一个父项。被拖动的项目会连同其所有子项一起被拖动。
+
+您可以通过可用的[编辑栏侧边栏选项](guides/diagram_editor/editbar.md)调整形状的属性。为加快样式设置过程，可以使用 `Alt (Option) + Ctrl (Cmd) + С` 组合键复制某一项目的样式，然后使用 `Alt (Option) + Ctrl (Cmd) + V` 将这些样式应用到所选项目。
+
+ 
+
+ **相关示例：** [Diagram Editor。思维导图模式。情绪思维导图](https://snippet.dhtmlx.com/lo1vm0e8?text=diagram&mode=wide)
+
+如果您在思维导图模式下的编辑器中添加了自定义形状，可以[配置编辑栏](api/diagram_editor/editbar/config/properties_property.md)，以便编辑该形状的自定义属性。
+
+## 下一步 {#whats-next}
+
+至此，您已经了解了全部内容。现在您可以开始使用图表，或继续在[指南](guides/overview.md)中深入探索 JavaScript Diagram 和 Diagram Editor 的世界。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/groups/configuration_properties.md b/i18n/zh/docusaurus-plugin-content-docs/current/groups/configuration_properties.md
new file mode 100644
index 000000000..41bcd20b6
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/groups/configuration_properties.md
@@ -0,0 +1,243 @@
+---
+sidebar_label: Group 属性
+title: Group 属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Group 属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天评估版 DHTMLX Diagram。
+---
+
+# Group 属性 {#group-properties}
+
+:::note
+请使用 HEX 格式指定颜色值。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+const data = [
+ // group 对象
+ {
+ type: "$group",
+ id?: string | number,
+ x?: number,
+ y?: number,
+ width: number,
+ height: number,
+ groupChildren?: array,
+ open?: boolean, // 默认为 true
+ fixed?: boolean, // 默认为 false
+ style?: {
+ strokeWidth?: number, // 默认为 1
+ stroke?: string, // 默认为 "#DEDEDE"
+ fill?: string,
+ overFill?: string,
+ partiallyFill?: string
+ },
+ exitArea?: {
+ // 默认为 "unbound"
+ groupBehavior?: "unbound" | "boundNoBorderExtension" | "boundBorderExtension",
+ padding?: number
+ },
+ header?: {
+ height?: number, // 默认为 40
+ fill?: string,
+ text?: string,
+ fontSize?: number, // 默认为 14
+ lineHeight?: number, // 默认为 14
+ textAlign?: "left" | "center" | "right", // 默认为 "center"
+ textVerticalAlign?: "top" | "center" | "bottom", // 默认为 "center"
+ fontStyle?: "normal" | "italic" | "oblique", // 默认为 "normal"
+ fontColor?: string, // 默认为 "#4C4C4C"
+ fontWeight?: string, // 默认为 "500"
+ iconColor?: string, // 默认为 "#808080"
+ position?: "top" | "bottom" | "left" | "right", // 默认为 "top"
+ editable?: boolean, // 默认为 true
+ closable?: boolean, // 默认为 false
+ enable?: boolean // 默认为 true
+ },
+ [key: string]?: any
+ },
+ // 更多 group 对象
+];
+~~~
+
+### 描述 {#description}
+
+一个 group 对象包含一系列配置属性，可用于配置 group 的位置和外观：
+
+- `type` - （必填）元素的类型，设置为 "$group"
+- `id` - （可选）group 的唯一 id
+- `x` - （可选）group 位置的 x 坐标
+- `y` - （可选）group 位置的 y 坐标
+- `width` - （必填）group 的宽度，包括其标题（*position: left/right* 时）
+- `height` - （必填）group 的高度，包括其标题（*position: top/bottom* 时）
+- `groupChildren` - （可选）包含 group 第一级子项 id 的数组
+- `open` - （可选）定义 group 初始化时是展开状态（*true*，默认）还是折叠状态（*false*）
+:::tip
+只有当 `header` 已初始化 `closable` 属性时，`open` 属性才会生效
+:::
+- `fixed` - （可选）启用/禁用移动和调整 group 大小的功能；默认为 *false*
+- `style` - （可选）包含 group 样式设置的对象。该对象可以包含以下属性：
+ - `strokeWidth` - （可选）group 边框的宽度，默认为 1
+ - `stroke` - （可选）group 边框的颜色，默认为 "#DEDEDE"
+ - `fill` - （可选）group 的背景颜色
+ - `overFill` - （可选）当用户按住图形并将其移入/移出 group 时的背景颜色（*前提是整个图形都位于 group 内部*）
+ - `partiallyFill` - （可选）当用户按住图形并将其移入/移出 group 时的背景颜色（*前提是图形的一部分位于 group 外部，且未通过 `exitArea` 属性定义其他设置*）
+- `exitArea` - （可选）包含用户将图形拖出 group 时应用于该图形的设置的对象（*仅适用于 group 的第一级子项*）。该对象可以包含以下属性：
+ - `groupBehavior` - （可选）用户将 group 的子项拖出 group 时该子项的行为：
+ - `"unbound"`（默认）- 用户可以将图形移入或移出 group
+ - `"boundNoBorderExtension"` - 用户可以将图形移入 group，但如果图形已被放入 group 内，则无法将其拖出 group。当用户尝试将图形拖出 group 时，group 的边框不会扩展
+ - `"boundBorderExtension"` - 用户可以将图形移入 group，但如果图形已被放入 group 内，则无法将其拖出 group。当用户尝试将图形拖出 group 时，group 的边框会扩展**相关示例**：[Diagram editor。默认模式。Group 与图形的交互](https://snippet.dhtmlx.com/4gxy38ek) + - `padding` - （可选）定义在 group 内移动图形时，group 与图形边缘之间的间距 + :::tip + 仅当 `groupBehavior` 设置为 `"boundNoBorderExtension"` 或 `"boundBorderExtension"` 时，`padding` 属性才可用 + ::: +- `header` - （可选）包含 group 标题配置属性的对象。属性包括： + - `height` - （可选）标题的高度，默认为 40 + - `fill` - （可选）标题的背景颜色 + - `text` - （可选）要在标题中渲染的文本 + - `fontSize` - （可选）字体大小（像素），默认为 14 + - `lineHeight` - （可选）行高，默认为 14 + - `textAlign` - （可选）标题中文本的对齐方式：`"left"`、`"center"`（默认）、`"right"` + - `textVerticalAlign` - （可选）标题中文本的垂直对齐方式：`"top"`、`"center"`（默认）、`"bottom"` + - `fontStyle` - （可选）文本字体的样式：`"normal"`（默认）、`"italic"`、`"oblique"` + - `fontColor` - （可选）文本字体的颜色，默认为 "#4C4C4C" + - `fontWeight` - （可选）文本字体的粗细，可能的值为：`"normal"`、`"bold"`、`"bolder"`、`"lighter"`，以及 `"100"`-`"900"` 的值，其中 `"400"` 与 normal 相同，`"600"` 及以上为最粗字体；默认为 `"500"` + - `iconColor` - （可选）标题图标的颜色，默认为 "#808080" + - `position` - （可选）group 标题的位置：`"top"`（默认）| `"bottom"` | `"left"` | `"right"` + - `editable` - （可选）启用/禁用通过双击编辑标题文本的功能；默认为 *true* + - `closable` - （可选）显示/隐藏用于展开/折叠 group 的图标；默认为 *false* + - `enable` - （可选）显示/隐藏 group 的标题；默认为 *true* +- `key` - （可选）自定义属性，其逻辑由您自行实现 + +### 示例 {#example} + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: { + text: "Top and collapsed header with tеxt alignment", + editable: true, + closable: true, + textAlign: "left", // "left", "center", "right" + textVerticalAlign: "center", // "top", "center", "bottom" + }, + // group 的子项 + groupChildren: [1.1, 1.2], + open: false + }, + // 配置要放入 group 中的图形 + { type: "rectangle", id: 1.1, x: 50, y: 75, text: "Shape 1.1" }, + { type: "rectangle", id: 1.2, x: 200, y: 75, text: "Shape 1.2" } +]; +~~~ + +**相关文章**：[配置 Group](/groups/) + +## “项目”对象特有的属性 {#properties-specific-for-project-object} + +“项目”对象用作任务和里程碑的容器，其工作方式类似于 [group](/groups/)，支持创建具有多种嵌套级别的 PERT 图表，并提供可视化分组。 + +### 用法 {#usage-1} + +~~~jsx +const data = [ + // project 对象 + { + type: "project", + id: string | number, + parent?: string | number | null, + text?: string, // 将设置 header.text 属性 + open?: boolean, + + // 自动生成 + x?: number, + y?: number, + width?: number, + height?: number, + groupChildren?: (string | number)[], + style?: { + fill?: string, // 默认为 "#20B56D08" + stroke?: string, // 默认为 "#20B56D33" + borderStyle?: string, // 默认为 "dashed" + }, + header?: { + height?: number, // 默认为 40 + text?: string, // 由 text 属性自动生成 + closable?: boolean, // 默认为 false + enable?: boolean, // 默认为 true + fill?: string // 默认为 "inherit" + } + }, + // 更多 project 对象 +] +~~~ + +### 描述 {#description-1} + +准备 `"project"` 对象的数据集时，您可以使用以下配置属性： + +- `type` - （必填）元素的类型，设置为 `"project"` +- `id` - （可选）project 的唯一 id +- `parent` - （可选）project 父级的 id +- `text` - （可选）project 的描述 +- `open` - （可选）定义 project 初始化时是展开状态（*true*，默认）还是折叠状态（*false*） + +以下属性为自动生成。它们在渲染过程中计算得出，不应手动指定。 + +- `x` - （可选）project 位置的 x 坐标 +- `y` - （可选）project 位置的 y 坐标 +- `width` - （必填）project 的宽度，包括其标题（*position: left/right* 时） +- `height` - （必填）project 的高度，包括其标题（*position: top/bottom* 时） +- `groupChildren` - （可选）包含 project 第一级子项 id 的数组 +- `style` - （可选）包含 project 样式设置的对象。该对象可以包含以下属性： + - `fill` - （可选）project 的背景颜色 + - `stroke` - （可选）project 边框的颜色 + - `borderStyle` - （可选）project 边框的样式 +- `header` - （可选）包含 project 标题配置属性的对象。属性包括： + - `height` - （可选）标题的高度，默认为 40 + - `text` - （可选）要在标题中渲染的文本（由 `text` 属性自动生成） + - `closable` - （可选）显示/隐藏用于展开/折叠 group 的图标；默认为 *false* + - `enable` - （可选）显示/隐藏 project 的标题；默认为 *true* + - `fill` - （可选）标题的背景颜色 + + +### 示例 {#example-1} + +~~~jsx +const data = [ + { + "id": "4.2", + "text": "QA Testing", + "type": "project", + "parent": "4", + "start_date": new Date(2026, 1, 18), + "duration": 3, + "progress": 0, + "open": true + }, + { + "id": "4.2.1", + "text": "Functional Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 18), + "duration": 2 + }, + { + "id": "4.2.2", + "text": "Usability Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 20), + "duration": 1 + } +]; +~~~ + +**相关文章**：[在 PERT 模式下对图形进行分组](/groups/#grouping-shapes-in-the-pert-mode) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/groups/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/groups/index.md new file mode 100644 index 000000000..93bb035f6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/groups/index.md @@ -0,0 +1,186 @@ +--- +sidebar_label: Group +title: Group +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Group。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天评估版 DHTMLX Diagram。 +--- + +# Group {#groups} + +## Group 概述 {#group-overview} + +group 是 Diagram 中一种独立类型的项目。您可以通过以不同方式对图形或其他 group 进行分组，绘制简单或更复杂的图表。您可以创建单级和嵌套的 group，并配置它们的外观和行为。 + +:::note +group 仅在 Diagram/Diagram Editor 的默认模式下可用（type: `"default"`）。 +::: + + + +## 创建 group {#creating-groups} + +要创建 group，请在准备要加载到 diagram 的相关 JSON 结构时，将 group 对象内 `type` 属性的值指定为 *"$group"*： + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: { + text: "User Access" + }, + groupChildren: ["1.1", "1.2"] + }, + { + type: "it", + id: "1.1", + x: 50, + y: 75, + text: "Remote Desktop" + }, + { + type: "it", + id: "1.2", + x: 200, + y: 75, + text: "Login Server" + }, +]; + +// 初始化 diagram +const diagram = new dhx.Diagram("diagram_container"); +diagram.data.parse(data); +~~~ + +### 属性 {#properties} + +请参阅 [`group` 对象的完整配置属性列表](groups/configuration_properties.md)，了解如何配置 group 的位置和外观。 + +## 在 PERT 模式下对图形进行分组 {#grouping-shapes-in-the-pert-mode} + +要在 Diagram 的 PERT 模式下对 `"task"` 和 `"milestone"` 类型的图形进行分组，请在 diagram 的数据集中使用 `"project"` 对象。`"project"` 对象作为任务和里程碑的容器，其工作方式类似于 group。它支持创建具有多种嵌套级别的 PERT 图表，并提供可视化分组。 + +~~~jsx +const data = [ + { + "id": "4.2", + "text": "QA Testing", + "type": "project", + "parent": "4", + "start_date": new Date(2026, 1, 18), + "duration": 3, + "progress": 0, + "open": true + }, + { + "id": "4.2.1", + "text": "Functional Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 18), + "duration": 2 + }, + { + "id": "4.2.2", + "text": "Usability Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 20), + "duration": 1 + } +]; +~~~ + + + +### 属性 {#properties-1} + +请参阅 [`"project"` 对象的完整配置属性列表](groups/configuration_properties.md#properties-specific-for-project-object)，了解如何配置 project 中任务和里程碑的位置与外观。 + +## 配置 group 标题 {#configuring-the-group-header} + +group 的标题默认是禁用的。要创建带有标题的 group，您需要在 group 的配置对象中指定 `header` 属性。 + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: {} + } +]; +~~~ + +该属性包含多个用于轻松调整 group 标题配置的属性。 +例如，您可以定义标题的高度和位置，为标题指定文本，并调整其设置。 + + + +请查看 [group 对象的完整 API 属性列表](groups/configuration_properties.md)。 + +### 标题图标 {#a-header-icon} + +要折叠或展开 group，请启用 [标题](groups/configuration_properties.md) 属性的 `closable` 属性。这样，标题中将添加一个允许用户展开/折叠 group 的图标。 + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 400, + height: 200, + x: 0, + y: 0, + header: { + text: "Top and collapsed header with tеxt alignment", + closable: true + } + } +]; +~~~ + +您可以通过 [group 对象](groups/configuration_properties.md) 的 `iconColor` 属性更改图标的颜色。 + +## 配置 group 项目的行为 {#configuring-the-behavior-of-group-items} + +默认情况下，您可以将 group 的任意子项拖出该 group，并将其拖入另一个 group。 +要更改 group 项目的行为方式，请使用 [group 对象](groups/configuration_properties.md) 的 `exitArea` 属性中的 `groupBehavior` 和 `padding` 属性。 + +:::note +`exitArea` 属性仅定义可配置 group 的第一级子项的行为。 +::: + + + +`groupBehavior` 属性的 `"unbound"` 和 `"boundBorderExtension"` 值允许您定义子项是否可以被移出 group，并使 group 的边框在用户尝试将图形拖到外部时扩展。如果需要，您还可以通过 `"boundNoBorderExtension"` 值禁用将图形拖出 group 的功能。 + + + +如果 `groupBehavior` 设置为 `"boundNoBorderExtension"` 或 `"boundBorderExtension"`，您可以指定在 group 内移动图形时，group 与图形边缘之间的 padding。为此，请使用 `padding` 属性： + +~~~jsx +const data = [ + { + type: "$group", + id: 1, + width: 830, + height: 400, + x: 0, + y: 0, + exitArea: { + groupBehavior: "boundBorderExtension", + padding: 10 + }, + //fixed: true, + groupChildren: ["1.1", "1.2", "1.3"] + }, + // ... +]; +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/ai-integrations/ai-demo.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/ai-integrations/ai-demo.md new file mode 100644 index 000000000..e1bd1759b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/ai-integrations/ai-demo.md @@ -0,0 +1,87 @@ +--- +sidebar_label: AI 集成演示 +title: 构建 AI 驱动的 Diagram +description: 分步指南：运行 DHTMLX Diagram AI 演示。使用 OpenAI API 通过文本生成组织结构图，并提供实时预览和 JSON 编辑器。 +--- + +# 构建 AI 驱动的 Diagram {#building-ai-powered-diagram} + +DHTMLX Diagram 可以与 AI 集成，用于创建 AI 驱动的图表应用程序。我们准备了一个示例，展示如何将 DHTMLX Diagram 与 AI 结合使用，根据自然语言提供的请求构建一个用于创建组织结构图的应用程序。 + +该[演示应用](https://dhtmlx.com/docs/demo/ai-org-chart-builder/)包含以下功能：文本转图表转换、AI 驱动的 JSON 生成、生成图表的即时实时预览，以及用于查看和调整生成的 JSON 数据的内置代码编辑器，从而实时更新图表预览。有关更多信息，请参阅相应的 [GitHub 仓库](https://github.com/DHTMLX/diagram-org-chart-builder-ai-demo)。 + +## 项目设置 {#project-setup} + +要下载项目，请使用以下命令克隆仓库： + +~~~jsx +git clone diagram-org-chart-builder-ai-demo +~~~ + +然后通过以下命令进入项目仓库： + +~~~jsx +cd diagram-org-chart-builder-ai-demo +~~~ + +### 安装依赖 {#installing-dependencies} + +要安装依赖并运行应用程序，您需要一个包管理器。本指南使用 [npm](https://www.npmjs.com/) —— 通过调用以下命令安装演示应用： + +~~~jsx +npm install +~~~ + +### 调整环境变量 {#adjusting-environment-variables} + +接下来，您需要配置环境变量。为此，请通过复制 `env.sample` 文件的内容，在 **diagram-org-chart-builder-ai-demo** 目录下创建一个名为 `.env` 的新文件。 +新创建的 `.env` 文件将存储您的密钥和配置。请填写下方所需的值： + +~~~jsx title="diagram-org-chart-builder-ai-demo/.env" +# --- OpenAI API 配置 --- +OPENAI_API_KEY=sk-YourSecretApiKeyGoesHere +OPENAI_BASE_URL=https://api.openai.com/v1 + +# --- 安全配置 --- +CORS_ALLOWED_ORIGINS=http://localhost:3001,http://127.0.0.1:3001,http://localhost:5500,http://127.0.0.1:5500 + +# --- 服务器配置（可选） --- +PORT=3001 +~~~ + +:::info +请勿上传您的 `.env` 文件，因为其中包含敏感信息！ +::: + +请查看下方 `.env` 文件变量的说明： + +- `OPENAI_API_KEY`：（必填）您用于 AI 服务的密钥。 +- `OPENAI_BASE_URL`：AI 服务的 API 端点。可以更改为使用代理或与 OpenAI API 兼容的其他提供商。 +- `CORS_ALLOWED_ORIGINS`：一项至关重要的安全设置。这是一个以逗号分隔的网址列表，列出了允许连接到您后端服务器的地址。在生产环境中，您**必须**将其更改为您公开前端的网址（例如 `https://myapp.com`）。 +- `PORT`：（可选）服务器运行的端口号。如果未设置，则默认为 3001。 + +### 运行应用程序 {#running-the-application} + +要启动应用程序，请在应用目录中使用以下命令： + +~~~jsx +npm start // 这是必需的启动命令 +~~~ + +您应该会在终端中看到以下输出： + +~~~jsx +Server started on port 3001. +~~~ + +然后打开网页浏览器并访问：`http://localhost:3001`，即可看到应用程序已准备好生成图表。 + +## 演示应用的工作原理 {#how-the-demo-app-works} + +以下是将文本请求转换为图表的基本步骤： + +- 首先，用户输入一段简明的图表文本描述，例如："一个包含一位高层管理者和五个部门的图表，每个部门下设两名员工"。 +- 然后将提示词发送到后端，AI 服务根据请求生成结构化的 JSON 配置。 +- 之后，前端获取结果数据，并立即渲染出一个交互式的 DHTMLX 图表。 +- 接下来，相应的 JSON 代码会显示在图表下方的代码编辑器中。用户可以微调代码，并实时编辑生成的图表。 +- 最后，用户可以将生成的数据保存为 JSON 文件，或将图表导出为 PDF 或 PNG 文件。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md new file mode 100644 index 000000000..eca6c4715 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md @@ -0,0 +1,242 @@ +--- +sidebar_label: DHTMLX MCP 服务器 +title: 在 AI 编程助手中使用 DHTMLX MCP 服务器 +description: 通过 MCP 服务器将 AI 编程助手连接到实时的 DHTMLX Diagram 文档。涵盖形状、泳道、组织结构图、Diagram Editor 等内容。 +--- + +# 在 AI 编程助手中使用 DHTMLX MCP 服务器 {#using-dhtmlx-mcp-server-with-ai-coding-assistants} + +构建图表应用程序需要对形状、连接、布局和编辑器配置进行精确控制。当 AI 工具根据过时的训练数据生成 [DHTMLX Diagram](/) 代码时，结果往往是 API 不匹配、属性缺失，以及已不存在的配置选项。 + +DHTMLX 模型上下文协议（Model Context Protocol，MCP）服务器通过让 AI 工具直接访问实时的 Diagram 文档来解决这一问题。无论您使用的是[泳道](/swimlanes/)、[自定义形状](shapes/custom_shape.md)、[Diagram Editor](guides/diagram_editor/initialization.md)，还是库的其他任何部分，助手都会在生成响应之前检索最新的参考资料。 + +**MCP 端点** + +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +:::note +DHTMLX MCP 服务器涵盖所有主要的 DHTMLX 产品，而不仅仅是 DHTMLX Diagram。无论您使用的是哪个组件，相同的端点和配置步骤均适用。 +::: + +## MCP 服务器对 Diagram 有哪些帮助 {#where-mcp-server-helps-with-diagram} + +MCP 服务器会为完整的 DHTMLX Diagram 文档建立索引。以下是 MCP 服务器常见的实用场景： + +- 查询[形状](shapes/default_shapes.md)、[线条](/lines/)、[分组](/groups/)或[泳道](/swimlanes/)的最新 API。 +- 根据描述生成可直接运行的 Diagram 代码。 +- 浏览[编辑器](guides/diagram_editor/initialization.md)的配置选项、工具栏控件和事件处理方式。 +- 查看[导出](guides/data_export.md)选项，了解如何生成 PDF 或 PNG 输出。 +- 通过[图表配置](guides/diagram/configuration.md)为默认模式的图表设置自动布局选项。 +- 使用可用的[数据方法](guides/loading_data.md)加载图表数据并将其重新序列化。 +- 处理 [Diagram 和编辑器事件](guides/event_handling.md)以响应用户交互。 +- 了解 [TypeScript 支持](guides/using_typescript.md)情况，以及与 React、Vue、Angular 和 Svelte 的框架集成。 + +## DHTMLX MCP 服务器的工作原理 {#how-dhtmlx-mcp-server-works} + +该服务器将检索增强生成（Retrieval-Augmented Generation，RAG）流程与 MCP 相结合，使 AI 助手能够按需查询文档，而不必仅依赖训练数据。 + +例如，当您提问 *“如何配置带有自定义单元格表头的泳道图？”* 时，助手会通过 MCP 端点发送该提示。服务器会将其与泳道相关文档进行匹配，检索出相关的参考页面，并将其作为上下文返回。随后，助手会基于当前的 API（而非训练时的快照）生成代码。 + +## 将 AI 工具连接到 Diagram {#connecting-ai-tools-to-diagram} + +AI 开发工具通常通过 CLI 命令或 JSON 配置文件来支持 MCP。无论采用哪种方式，核心步骤都是注册服务器 URL： + +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +以下列出了最常用工具的设置说明。 + +### Claude Code 设置 {#claude-code-setup} + +:::info +有关将 MCP 服务器连接到 Claude Code 的完整说明，请参阅[官方文档](https://code.claude.com/docs/en/mcp)。 +::: + +将 DHTMLX MCP 服务器添加到 Claude Code 最快的方法是通过 CLI： + +~~~bash +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +如需手动配置，请将以下条目添加到您的 `.mcp.json` 文件中： + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor 设置 {#cursor-setup} + +:::info +您可以在[官方文档](https://cursor.com/en-US/docs/mcp)中找到 Cursor 的详细 MCP 设置步骤。 +::: + +请按照以下步骤将 DHTMLX MCP 服务器连接到 Cursor： + +1. 打开设置（Mac 上按 `Cmd+Shift+J`，Windows/Linux 上按 `Ctrl+Shift+J`） +2. 进入 **Tools & MCP** +3. 点击 **Add Custom MCP** +4. 粘贴以下配置： + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Google Antigravity {#google-antigravity} + +#### Antigravity 2.0 {#antigravity-20} + +:::info +有关在 Antigravity 中集成 MCP 服务器的完整详情，请参阅[官方文档](https://antigravity.google/docs/mcp)。 +::: + +以下是将 DHTMLX MCP 服务器连接到 Google Antigravity 需要完成的步骤： + +1. 打开命令面板 +2. 输入 “mcp add” +3. 选择 “HTTP” +4. 提供以下值： +- 名称： +~~~ +dhtmlx-mcp +~~~ +- URL： +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +#### Antigravity CLI {#antigravity-cli} + +:::info +请查看[相关指南](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes)，了解从 Gemini CLI 迁移到 Antigravity CLI 的相关信息。 +::: + +要将 DHTMLX MCP 服务器连接到 Antigravity CLI，请在以下位置之一创建 `mcp_config.json`： + +- 全局：`~/.gemini/config/mcp_config.json` +- 工作区：`.agents/mcp_config.json` + +添加以下配置： + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "serverUrl": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +然后在终端中运行 `agy`。 + +### ChatGPT 设置 {#chatgpt-setup} + +:::info +有关将 MCP 服务器连接到 ChatGPT 的完整指南，请参阅[官方文档](https://developers.openai.com/api/docs/guides/tools-connectors-mcp)。 +::: + +请按照以下步骤将 DHTMLX MCP 服务器连接到 ChatGPT： + +1. 进入 **Settings** → **Apps & Connectors** +2. 点击 **Advanced settings** +3. 启用 **Developer mode** +4. 返回 **Apps & Connectors** 界面并点击 “Create” +5. 配置连接器： +- 名称： +~~~ +dhtmlx-mcp +~~~ +- URL： +~~~ +https://docs.dhtmlx.com/mcp +~~~ +- 身份验证：`No authentication` +6. 点击 **Create** + +连接完成后，ChatGPT 会在对话中回答问题时检索 Diagram 文档。 + +:::note +请注意，与 ChatGPT 集成 MCP 可能会导致响应速度变慢。如需更快的体验，请考虑使用本页面列出的其他工具。 +::: + +### 其他工具 {#other-tools} + +大多数现代 AI 编程工具（包括 Windsurf、Cline、Continue.dev 等）会在其设置中以 “Model Context Protocol”、“Context Sources” 或 “Custom integrations” 等名称提供 MCP 功能。请将 `https://docs.dhtmlx.com/mcp` 添加为源 URL。 + +## 隐私与数据处理 {#privacy-and-data-handling} + +DHTMLX MCP 服务器是一项纯云端服务，在远程运行，不会影响您的本地环境，也不会存储任何个人用户数据。查询记录可能会出于调试和服务改进的目的而被记录。 + +如果团队需要更严格的隐私保障，可以申请禁用查询日志记录的商业部署方案。详情请联系 `info@dhtmlx.com`。 + +## 使用 AI 编写 Diagram 提示词示例 {#example-prompts-for-diagram-with-ai} + +连接 MCP 服务器后，请围绕具体目标来表述提示词，以便助手了解需要查阅 Diagram API 的哪个部分。以下提示词按任务类型分类，您可以根据需要复制并调整。 + +**创建图表** + +~~~ +How do I create a swimlane diagram with custom sections in DHTMLX Diagram? Use the docs. +~~~ +~~~ +I want to build an org chart from a JSON data set in DHTMLX Diagram. How do I configure the auto-layout? +~~~ +~~~ +How do I create a flowchart with decision nodes and multiple links in DHTMLX Diagram? +~~~ +~~~ +How do I use autoPlace() to automatically arrange shapes in DHTMLX Diagram? +~~~ + +**处理形状** + +~~~ +I want to add custom shapes with icons to DHTMLX Diagram. How do I define a shape template? +~~~ +~~~ +How do I restrict which shapes a user can place in the DHTMLX Diagram Editor? +~~~ +~~~ +How do I change the default text style and background color for all shapes in DHTMLX Diagram? +~~~ + +**配置编辑器** + +~~~ +I want to enable inline editing for shape text in DHTMLX Diagram. +~~~ +~~~ +How do I add a custom toolbar button to the DHTMLX Diagram Editor? +~~~ + +**数据与导出** + +~~~ +How do I export a DHTMLX Diagram to a PNG file? +~~~ +~~~ +What format does DHTMLX Diagram use for serialized data, and how do I reload it? +~~~ + +## 编写高效 Diagram 提示词的技巧 {#tips-for-effective-diagram-prompts} + +- **明确 API 范围。** 区分 diagram 实例和 editor，例如 “in the DHTMLX Diagram Editor” 与 “on the diagram object” 这两种表述的区别。目标越明确，服务器检索到的文档就越贴切。 +- **注明具体的形状类型。** 类似 “a swimlane shape” 或 “a custom shape with HTML content” 这样的提示词，比笼统的 “a shape” 能更快检索到正确的参考页面。 +- **在提示词中加入 “Use the docs”。** 这样的措辞会向助手表明应触发 MCP 查询，而不是仅依据训练数据作答。 +- **明确说明您期望的版本行为。** 如果生成的代码与文档中的内容不一致，请添加 “based on the current DHTMLX Diagram documentation” 以强制触发新的检索。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/customization.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/customization.md new file mode 100644 index 000000000..4b7dd9031 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/customization.md @@ -0,0 +1,225 @@ +--- +sidebar_label: 自定义元素 +title: 自定义元素 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解自定义元素的相关内容。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# 自定义元素 {#customizing-items} + +您可以通过在对象内部使用各种[配置属性](/category/items-api/)来修改 Diagram 元素的外观。您还可以通过创建自定义形状来更改 Diagram 的外观和风格。 + +## 通过配置属性设置形状和线条的样式 {#styling-shapes-and-lines-via-the-configuration-properties} + +### 设置形状样式 {#styling-shapes} + +形状对象提供了丰富的属性，您可以使用这些属性修改形状的外观和风格。 + + + +一次性设置同一类型所有形状样式的好方法是通过 Diagram 的 [`defaults`](api/diagram/defaults_property.md) 属性为形状指定样式设置： + +~~~jsx +const defaults = { + start: { + fill: "#FE9998", + stroke: "#FE9998", + fontColor: "#FFF", + lineHeight: 16 + }, + end: { + fill: "#FE9998", + stroke: "#FE9998", + fontColor: "#FFF", + lineHeight: 16 + }, + // ... +}; +~~~ + +[查看形状对象属性的完整列表](shapes/configuration_properties.md)。 + +### 设置线条样式 {#styling-lines} + +要更改连接线的外观，请在线条对象内部使用所需的配置属性。 + +~~~jsx +const data = [ + { + id: "1-2", + from: "1", + to: "2", + type: "line", + strokeType: "dash", // 虚线 + stroke: "#fa55d1" // 线条颜色 + } +]; +~~~ + +[查看线条对象属性的完整列表](lines/configuration_properties.md)。 + +查看示例： + + + +## 定义形状的模板 {#defining-the-shapes-template} + +您可以通过向 Diagram 中添加新类型的形状并为其定义模板来创建自定义 Diagram。为此，请使用 Diagram 对象的 [`addShape()`](api/diagram/addshape_method.md) 方法。 + +### 默认模式下的示例 {#example-in-the-default-mode} + + + +### 组织结构图模式下的示例 {#example-in-the-org-chart-mode} + + + +### 思维导图模式下的示例 {#example-in-the-mindmap-mode} + + + +### PERT 模式下的示例 {#example-in-the-pert-mode} + + + +## 设置目标形状的样式 {#styling-target-shapes} + +在 Diagram Editor 中使用组织结构图和思维导图时，您可以为目标元素添加自定义样式。 + +:::note +样式设置不适用于被移动元素的父级，也不适用于设置了 `giveItem: false` 的被移动元素 +::: + +~~~jsx + +~~~ + +## 通过配置属性设置组的样式 {#styling-groups-via-the-configuration-properties} + +### 设置组的样式 {#styling-the-group} + +要为组指定自定义样式，您可以使用[组对象](groups/configuration_properties.md)的 `style` 属性。例如： + + + +### 设置组标题的样式 {#styling-the-group-header} + +您可以通过[组对象](groups/configuration_properties.md)的 `header` 属性的相关属性来更改组标题的默认样式。 + + + +## 通过配置属性设置泳道的样式 {#styling-swimlanes-via-the-configuration-properties} + +### 设置泳道的样式 {#styling-the-swimlane} + +您可以通过[泳道对象](swimlanes/configuration_properties.md#properties-of-a-swimlane)的 `style` 属性自定义泳道的 `strokeWidth`、`stroke` 和 `fill` 设置： + +~~~jsx +const data = [ + { + "type": "$swimlane", + "width": 970, + "height": 790, + "header": { + "text": "Game levels and locations", + "closable": true + }, + "layout": [ + ["1"], + ["2"], + ["3"], + ["4"], + ["5"] + ], + "style": { + "strokeWidth": 5, + "stroke": "#083796", + "fill": "#D4DAE4" + } + } +]; +~~~ + +### 设置泳道标题/子标题的样式 {#styling-the-swimlane-headerssub-headers} + +[泳道对象](swimlanes/configuration_properties.md#properties-of-a-swimlane)的 `header`、`subHeaderRows` 和 `subHeaderCols` 属性包含一组额外的属性，用于自定义泳道的标题和子标题。 + +例如，您可以通过 `subHeaderCols` 属性更改泳道顶部子标题的背景颜色： + +~~~jsx +const data = [ + { + "id": "main", + "type": "$swimlane", + "height": 730, + "width": 1195, + "header": { + "closable": true, + "text": "Waterfall diagram template" + }, + "layout": [ + [1, 2, 3, 4] + ], + "subHeaderCols": { + "headers": [ + { + "text": "September", + "fill": "#f35c4f66" + }, + { + "text": "October", + "fill": "#9b60f866" + }, + { + "text": "November", + "fill": "#ffae1266" + }, + { + "text": "December", + "fill": "#3cc97a66" + } + ] + } + } +]; +~~~ + +查看完整示例： + + + +### 设置泳道单元格的样式 {#styling-swimlane-cells} + +如果需要自定义泳道中的单个单元格，请使用[泳道单元格对象](swimlanes/configuration_properties.md#properties-of-a-swimlane-cell)（`type:"$sgroup"`）的 `style` 属性。 + +~~~jsx +const data = [ + { + "id": "main", + "type": "$swimlane", + "height": 730, + "width": 1195, + "layout": [ + [1, 2, 3, 4] + ], + // ... + }, + { + "id": 1, + "type": "$sgroup", + "style": { + "fill": "#D4DAE4" + }, + "x": 0, + "y": 80 + } +]; +~~~ + +**相关示例：** [Diagram。默认模式。瀑布 Diagram 模板](https://snippet.dhtmlx.com/k5vlvj8i) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/data_export.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/data_export.md new file mode 100644 index 000000000..b6d173779 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/data_export.md @@ -0,0 +1,40 @@ +--- +sidebar_label: 导出 Diagram +title: 导出 Diagram +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解导出 Diagram 的相关内容。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# 导出 Diagram {#exporting-diagram} + +您可以通过 Export 对象的相关 [pdf()](api/export/pdf_method.md)/[png()](api/export/png_method.md) 方法将 Diagram 导出为 PDF 或 PNG 格式： + + + +要调整导出设置，请将包含配置选项的对象传递给所需的方法。 + +查看可用设置的列表： + +- [pdf()](api/export/pdf_method.md) 方法的设置 +- [png()](api/export/png_method.md) 方法的设置 + +## 导出样式 {#exporting-styles} + +默认情况下，Diagram 页面上包含的所有 CSS 样式都会被发送到导出服务。这会导致请求大小增加，进而可能导致请求失败。 + +该库允许您： + +- 通过将 Diagram 对象的 [`exportStyles`](api/diagram/exportstyles_property.md) 配置属性设置为 *false*，阻止所有样式被发送到导出服务： + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + exportStyles: false +}); +~~~ + +- 通过在 [`exportStyles`](api/diagram/exportstyles_property.md) 数组中设置所需样式的绝对路径，定义一组要导出的样式： + + + +:::note +必须仅使用绝对路径，不能使用相对路径。 +::: diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram/configuration.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram/configuration.md new file mode 100644 index 000000000..d3c039313 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram/configuration.md @@ -0,0 +1,179 @@ +--- +sidebar_label: 配置 +title: Diagram 配置 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Diagram 配置相关内容。浏览开发者指南和 API 参考、试用代码示例和实时演示，并下载免费的 30 天评估版 DHTMLX Diagram。 +--- + +# Diagram 配置 {#diagram-configuration} + +DHTMLX Diagram 提供了丰富的配置选项。您可以更改图表的缩放比例、设置形状和线条的默认类型、设置形状之间的间距、启用选择功能，并为形状设置带图标的工具栏。 + +### 设置 Diagram 模式 {#setting-the-diagram-mode} + +您可以从以下 Diagram 模式中进行选择：`"default"`、`"org"`、`"mindmap"`、`"pert"`。有关它们的详细说明，请参阅 [Diagram 概述](/)一文。您可以通过 [type](api/diagram/type_property.md) 配置选项指定所需的类型，如下所示： + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + type: "default" // `type: "org"` | `type: "mindmap"` | `type: "pert"` +}); +diagram.data.parse(data); +~~~ + +### 设置默认形状类型 {#setting-the-default-shape-type} + +您可以通过图表配置对象的 [`defaultShapeType`](api/diagram/defaultshapetype_property.md) 属性为所有形状设置默认类型： + +~~~jsx {3} +const diagram = new dhx.Diagram("diagram_container", { + type: "default", // or type: "org", or type: "mindmap" + defaultShapeType: "rectangle" +}); +diagram.data.parse(data); +~~~ + +如果形状的配置对象不包含 `type` 属性，则将应用此值。 + +形状的默认类型如下： + +- `"rectangle"` - 用于默认模式下的图表 +- `"card"` - 用于默认模式或组织结构图模式下的图表 +- `"topic"` - 用于思维导图模式下的图表 +- `"task"` - 用于 PERT 模式下的图表 + +## 设置默认线条类型 {#setting-the-default-line-type} + +您可以通过图表配置对象的 [`lineConfig`](api/diagram/lineconfig_property.md) 属性的 `lineType` 参数，为图表的所有连接线设置统一的类型： + +~~~jsx {3-5} +const diagram = new dhx.Diagram("diagram_container", { + type: "default", + lineConfig: { + lineType: "dash" // "dash" | "line" + } +}); +diagram.data.parse(data); +~~~ + +如果线条对象不包含 `type` 属性，则将应用此值。 + +## 设置形状的默认配置 {#setting-the-default-configuration-of-a-shape} + +在准备将数据加载到图表中时，您可以避免处理庞大的数据集。您可以为所需类型的所有形状和线条指定默认配置，从而减少代码中的记录数量。 + +为此，请使用图表配置对象的 [`defaults`](api/diagram/defaults_property.md) 属性： + + + +`defaults` 对象包含若干 `key:value` 键值对，其中 *key* 表示形状或线条的类型，*value* 表示相应形状或线条的默认配置。 + +:::note +不能在形状/线条的默认配置中定义 `type` 和 `id` 属性 +::: + +查看[形状](shapes/configuration_properties.md)和[线条](lines/configuration_properties.md)的完整配置属性列表。 + +## 在 Diagram 的思维导图模式下排列形状 {#arranging-shapes-in-the-mindmap-mode-of-diagram} + +在 Diagram 的思维导图模式下，子形状相对于根形状的排列由主算法自动定义。 +要更改子形状的默认方向，请在初始化图表时使用 [`typeConfig`](api/diagram/typeconfig_property.md) 配置属性。 + +:::note +`typeConfig` 配置属性在 Diagram Editor 中不可用 +::: + +该属性允许您： + +- [一次性为所有子形状设置方向](#setting-direction-for-all-child-shapes) +- [为特定子形状指定单独的方向](#setting-direction-for-individual-child-shape) + +### 为所有子形状设置方向 {#setting-direction-for-all-child-shapes} + +要将子形状设置在根形状的右侧/左侧，请使用 [`typeConfig`](api/diagram/typeconfig_property.md) 属性的 `direction` 特性： + + + +### 为单个子形状设置方向 {#setting-direction-for-individual-child-shape} + +您可以通过 [`typeConfig`](api/diagram/typeconfig_property.md) 属性的 `side` 特性为特定子形状设置强制方向。该特性是一个对象，包含一组 `key:value` 键值对，其中 *key* 表示形状的方向（left、right），*value* 表示包含形状 id 的数组。 + + + +未在 side 选项中设置的其他子形状将根据主算法自动排列。 + +## 在 Diagram 的 PERT 模式下设置日期格式 {#setting-date-format-in-the-pert-mode-of-diagram} + +在 Diagram 的 PERT 模式下，您可以为 `task` 类型的形状指定所需的日期渲染格式。为此，请使用 [`typeConfig`](api/diagram/typeconfig_property.md) 属性的 `dateFormat` 特性： + +~~~jsx {3-5} +const diagram = new dhx.Diagram("diagram_container", { + type: "pert", + typeConfig: { + dateFormat: "%d/%m/%Y" + } +}); +~~~ + +## 定位 Diagram 和形状 {#positioning-diagram-and-shapes} + +您可以在图表配置对象的 [`margin`](api/diagram/margin_property.md) 属性中指定图表在页面上的位置，并设置形状的边距： + + + +## 配置形状的自动布局 {#configuring-autoplacement-for-shapes} + +DHTMLX Diagram 库允许您配置设置，以自动按层级结构排列 Diagram 中已连接的形状。您可以在 Diagram 的配置对象中指定 [`autoplacement`](api/diagram/autoplacement_property.md) 属性，并配置形状的连接模式以及未连接图表之间的间距： + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + autoplacement: { + mode: "edges", + graphPadding: 100, + placeMode: "radial", + itemPadding: 10, + levelPadding: 10 + } +}); + +diagram.data.parse(data); + +diagram.autoPlace(); +~~~ + +该属性可以包含以下选项： + +- `mode` - （*string*）可选，形状的连接模式，`"direct"`（默认）或 `"edges"` +- `graphPadding` - （*number*）可选，设置未连接图表之间的间距，默认为 *200* +- `placeMode` - （*string*）可选，设置形状的布局模式，`"orthogonal"`（默认）或 `"radial"` +- `itemPadding` - （*number*）可选，项目之间的最小间距（最小值为 *1*），默认为 *20* +- `levelPadding` - （*number*）可选，层级之间的最小间距（最小值为 *1*），默认为 *20* + +:::note +自动布局仅在应用 [`autoPlace()`](api/diagram/autoplace_method.md) 方法后才会生效。它仅在图表的默认模式下对形状有效。如果使用组或泳道，则自动布局不起作用。 +::: + + + +**相关示例：** [Diagram。默认模式。带间距选项的径向自动布局](https://snippet.dhtmlx.com/huut0l1s) + +## 调整 Diagram 的缩放比例 {#adjusting-the-diagram-scale} + +如有需要，您可以缩放图表以适应您的应用程序。这可以借助 [`scale`](api/diagram/scale_property.md) 选项来实现。 +默认情况下，其值设置为 1。因此，要放大图表，请将该选项设置为大于 1 的值；要缩小图表，则相应地设置为小于 1 的值。 + + + +## 为形状设置工具栏 {#setting-toolbar-for-shapes} + +DHTMLX Diagram 允许您为 Diagram 形状指定带图标的工具栏，以简化与它们的交互。您可以通过图表配置对象的 [`toolbar`](api/diagram/toolbar_property.md) 选项启用形状工具栏： + + + +## 启用项目选择 {#enabling-items-selection} + +您可以通过图表配置对象的 [`select`](api/diagram/select_property.md) 属性激活图表中项目的选择功能。在图表中启用选择功能后，您可以使用 Selection 对象 API 来[处理项目选择](guides/manipulating_items.md#selecting-items)。 + +:::note +选择对象的[预定义事件集](/api/selection/#events)可以帮助您定义在选择/取消选择项目期间处理图表行为的方式 +::: + + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram/initialization.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram/initialization.md new file mode 100644 index 000000000..507fb1c93 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram/initialization.md @@ -0,0 +1,155 @@ +--- +sidebar_label: 初始化 +title: 初始化 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解如何开始使用 Diagram。浏览开发者指南和 API 参考、试用代码示例和实时演示，并下载免费的 30 天评估版 DHTMLX Diagram。 +--- + +# Diagram 初始化 {#diagram-initialization} + +在本文中，我们将讨论将 DHTMLX Diagram 添加到页面的各个阶段。此过程包括以下几个简单步骤： + +- [下载 DHTMLX Diagram 软件包](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml)并将其解压到项目文件夹中 +- [在页面中引入 DHTMLX Diagram 源文件](#including-required-code-files) +- [使用对象构造函数初始化 Diagram](#initializing-diagram) +- [将数据加载到 Diagram 中](#loading-data-into-diagram) + +~~~html + + + + + + + + + + + + +~~~ + +## 引入所需的代码文件 {#including-required-code-files} + +要创建 Diagram，您需要在页面中引入 2 个源文件： + +- **diagram.js** +- **diagram.css** + +请确保为这些文件设置正确的相对路径： + +~~~html + + +~~~ + +DHTMLX Diagram 软件包的结构如下： + +- **sources** - 库的源代码文件。这些文件未经压缩，易于阅读。该软件包主要用于组件的调试 + +:::note +请注意，Diagram 库的**试用版**不包含 sources 文件夹。 +::: + +- **samples** - 代码示例 +- **codebase** - 库的打包代码文件。这些文件体积更小，适用于生产环境 +:::info +在您的应用程序中，需要使用 **codebase** 文件夹中的文件 +::: + +## 初始化 Diagram {#initializing-diagram} + +您可以在容器、文档主体或布局单元格中初始化 Diagram。 + +### 在容器中初始化 {#initialization-in-a-container} + +要在容器中初始化图表，请使用 `dhx.Diagram` 构造函数，并向构造函数传递以下两个参数： + +- 用于放置 Diagram 的容器，我们将其 id 设为 `"diagram_container"`： + +~~~html title="index.html" + +~~~ + +- 一个包含[配置属性](#configuration-properties)的对象。如果没有向构造函数传递此参数，则将应用默认设置 + +~~~jsx title="index.js" +const diagram = new dhx.Diagram("diagram_container", { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### 在文档主体中初始化 {#initialization-in-the-document-body} + +您可以跳过为 Diagram 设置容器的步骤，直接将其添加到文档主体中： + +~~~jsx +const diagram = new dhx.Diagram(document.body, { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### 在布局单元格中初始化 {#initialization-in-a-layout-cell} + +您也可以在[布局单元格](https://docs.dhtmlx.com/suite/layout/)中初始化图表。在这种情况下，请使用 *null* 代替容器： + +~~~jsx +const diagram = new dhx.Diagram(null, { + type: "default" // "default" | "org" | "mindmap" +}); +const layout = new dhx.Layout("layout", { + cols: [ + { + id: "diagram" + } + ] +}); + +layout.getCell("diagram").attach(diagram); +~~~ + +### 配置属性 {#configuration-properties} + +要更改[图表的配置](guides/diagram/configuration.md)，您可以在作为构造函数第二个参数传递的 config 对象中指定所需的属性。 + +~~~jsx +const diagram = new dhx.Diagram("diagram_container", { + scale: 0.7, + // 其他配置选项 +}); +~~~ + +请参阅 [Diagram 的完整配置属性列表](api/diagram/api_overview.md#diagram-properties)。 + +**相关示例：** [Diagram Editor。默认模式。宽幅流程图](https://snippet.dhtmlx.com/4d4k3o8p) + +此外，您也可以通过图表的 `config` 对象访问某个选项并设置/修改其值。请不要忘记调用 [`paint()`](api/diagram/paint_method.md) 方法，以使用新配置重新渲染图表： + +~~~jsx +const diagram = new dhx.Diagram("diagram_container"); +diagram.data.parse(data); + +diagram.config.scale = 0.7; +diagram.paint(); +~~~ + +## 将数据加载到 Diagram 中 {#loading-data-into-diagram} + +有关将数据加载到 DHTMLX Diagram 中的详细信息，请参阅[加载和存储数据](guides/loading_data.md)一文。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram/scrolling_diagram.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram/scrolling_diagram.md new file mode 100644 index 000000000..bc7dbe62c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram/scrolling_diagram.md @@ -0,0 +1,42 @@ +--- +sidebar_label: 滚动 Diagram +title: 滚动 Diagram +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解如何滚动 Diagram。浏览开发者指南和 API 参考、试用代码示例和实时演示，并下载免费的 30 天评估版 DHTMLX Diagram。 +--- + +# 滚动 Diagram {#scrolling-diagram} + +默认情况下，组件的大小会自动设置以适应内容。如有需要，组件将采用 HTML 容器的大小，并渲染水平和垂直方向的内部滚动条以适应内容。 + +## 滚动图表 {#scrolling-diagram-1} + +您可以通过图表对象的 [`showItem()`](api/diagram/showitem_method.md) 方法，将图表滚动到所需项目所在的区域。 + + + +此外，您也可以使用 [`scrollTo()`](api/diagram/scrollto_method.md) 方法滚动到图表上的所需位置。 + + + +## 获取滚动状态 {#getting-scroll-state} + +Diagram API 允许您通过相关的 [`getScrollState()`](api/diagram/getscrollstate_method.md) 方法获取当前的滚动位置： + +~~~jsx +// 返回初始滚动位置 +const coords = diagram.getScrollState(); // -> {x:0,y:0} +~~~ + +该方法返回一个包含水平和垂直滚动位置的对象。 + +## 捕获图表滚动 {#catching-diagram-scrolling} + +您可以使用 [`scroll`](api/diagram/scroll_event.md) 事件捕获 Diagram 滚动的开始。处理函数将滚动位置作为参数： + +- `pos` - （*object*）滚动位置，是一个包含 x 和 y 属性的对象 + +~~~jsx +diagram.events.on("Scroll", (position) => { + alert("The diagram has been scrolled:" + position); +}); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/editbar.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/editbar.md new file mode 100644 index 000000000..dee7f98f9 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/editbar.md @@ -0,0 +1,163 @@ +--- +sidebar_label: Editbar +title: 编辑器指南 - Editbar +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的 Editbar。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# Editbar {#editbar} + +您可以针对每个 Diagram 元素单独配置 Editbar 控件，也可以在考虑各种条件的情况下为[一组元素](guides/items_index.md)进行配置。为此，请使用 Editbar 的 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 配置。 + +如果您想为单个[形状](/category/shapes)配置 Editbar 控件，需要在 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 配置中指定相应的 **形状类型**，如下例所示： + +~~~jsx {6-9} +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + editbar: { + properties: { + rectangle: [ // 为 "pert" 形状配置 editbar 控件 + { type: "arrange", $properties: { angle: { hidden: true } }}, + // ... 其他 Editbar 控件配置 + ], + // ... 其他形状配置 + } + } + } +}); +~~~ + +如需配置[一组元素](guides/items_index.md)，您需要在 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 配置中使用以下服务属性： + +- [`$default`](#configure-editbar-for-the-grid-area) - 允许在未选中任何元素或选中多个元素时配置 Editbar 控件 +- [`$shape`](#configure-editbar-for-shapes) - 允许为[所有形状（包括自定义形状）](/category/shapes)配置 Editbar 控件 +- [`$group`](#configure-editbar-for-group-elements) - 允许为所有 [`group`](/groups/) 类型的元素配置 Editbar 控件 +- [`$swimlane`](#configure-editbar-for-swimlanes) - 允许为所有 [`swimlane`](/swimlanes/) 类型的元素配置 Editbar 控件 +- [`$line`](#configure-editbar-for-lines) - 允许为所有 [`line`](/lines/) 类型的元素配置 Editbar 控件 +- [`$lineTitle`](#configure-editbar-for-line-titles) - 允许为所有 [`lineTitle`](/line_titles/) 类型的元素配置 Editbar 控件 + + + +## 为网格区域配置 Editbar {#configure-editbar-for-the-grid-area} + +`$default` 服务属性允许在未选中任何元素或选中多个元素时配置 Editbar 控件。 + +~~~jsx +properties: { + $default: [ + { + type: "gridStep", + readOnly: true, + // ... + } + ] +} +~~~ + +**相关复合控件：** [网格步长](api/diagram_editor/editbar/complex_controls/gridstep.md)、[边框](api/diagram_editor/editbar/complex_controls/border.md)、[排列](api/diagram_editor/editbar/complex_controls/arrange.md) + +## 为形状配置 Editbar {#configure-editbar-for-shapes} + +`$shape` 服务属性允许为[所有形状（包括自定义形状）](/category/shapes)配置 Editbar 控件。 + +~~~jsx +properties: { + $shape: [ + { + type: "position", + $properties: { + dx: { disabled: true }, + // ... + }, + // ... + } + ] +} +~~~ + +**相关复合控件：** [边框](api/diagram_editor/editbar/complex_controls/border.md)、[排列](api/diagram_editor/editbar/complex_controls/arrange.md)、[位置](api/diagram_editor/editbar/complex_controls/position.md)、[大小](api/diagram_editor/editbar/complex_controls/size.md)、[文本对齐](api/diagram_editor/editbar/complex_controls/textalign.md)、[文本样式](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## 为分组元素配置 Editbar {#configure-editbar-for-group-elements} + +`$group` 服务属性允许为所有 [`group`](/groups/) 类型的元素配置 Editbar 控件。 + +~~~jsx +properties: { + $group: [ + { + type: "header", + label: "Group header style", + // ... + } + ] +} +~~~ + +**相关复合控件：** [边框](api/diagram_editor/editbar/complex_controls/border.md)、[排列](api/diagram_editor/editbar/complex_controls/arrange.md)、[表头](api/diagram_editor/editbar/complex_controls/header.md)、[通用表头](api/diagram_editor/editbar/complex_controls/headercommon.md)、[表头位置](api/diagram_editor/editbar/complex_controls/headerposition.md)、[大小](api/diagram_editor/editbar/complex_controls/size.md)、[文本对齐](api/diagram_editor/editbar/complex_controls/textalign.md)、[文本样式](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## 为泳道配置 Editbar {#configure-editbar-for-swimlanes} + +`$swimlane` 服务属性允许为所有 [`swimlane`](/swimlanes/) 类型的元素配置 Editbar 控件。 + +~~~jsx +properties: { + $swimlane: [ + { + type: "header", + label: "Swimlane header style", + // ... + } + ] +} +~~~ + +**相关复合控件：** [边框](api/diagram_editor/editbar/complex_controls/border.md)、[排列](api/diagram_editor/editbar/complex_controls/arrange.md)、[表头](api/diagram_editor/editbar/complex_controls/header.md)、[通用表头](api/diagram_editor/editbar/complex_controls/headercommon.md)、[表头位置](api/diagram_editor/editbar/complex_controls/headerposition.md)、[大小](api/diagram_editor/editbar/complex_controls/size.md)、[文本对齐](api/diagram_editor/editbar/complex_controls/textalign.md)、[文本样式](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## 为线条配置 Editbar {#configure-editbar-for-lines} + +`$line` 服务属性允许为所有 [`line`](/lines/) 类型的元素配置 Editbar 控件。 + +~~~jsx +properties: { + $line: [ + { + type: "lineShape", + label: "Line connection type", + // ... + } + ] +} +~~~ + +**相关复合控件：** [边框](api/diagram_editor/editbar/complex_controls/border.md)、[线条形状](api/diagram_editor/editbar/complex_controls/lineshape.md)、[指针视图](api/diagram_editor/editbar/complex_controls/pointerview.md) + +## 为线条标题配置 Editbar {#configure-editbar-for-line-titles} + +`$lineTitle` 服务属性允许为所有 [`lineTitle`](/line_titles/) 类型的元素配置 Editbar 控件。 + +~~~jsx +properties: { + $lineTitles: [ + { + type: "textAlign", + label: "Text align", + // ... + }, + // ... + ] +} +~~~ + +**相关复合控件：** [文本对齐](api/diagram_editor/editbar/complex_controls/textalign.md)、[文本样式](api/diagram_editor/editbar/complex_controls/textstyle.md) + +## 创建和配置自定义 Editbar 控件 {#create-and-configure-custom-editbar-controls} + +您可以使用 Editbar 视图的 [`controls`](api/diagram_editor/editbar/config/controls_property.md) 属性，基于[**基础控件**](api/diagram_editor/editbar/basic_controls_overview.md)和/或[**复合控件**](api/diagram_editor/editbar/complex_controls_overview.md)创建自定义控件。 + +:::warning +不建议使用默认控件类型的名称（参见[***基础控件***](api/diagram_editor/editbar/basic_controls_overview.md)和/或[***复合控件***](api/diagram_editor/editbar/complex_controls_overview.md)）作为自定义控件的名称。请为每个自定义控件使用唯一的名称，以避免出错！ +::: + +创建自定义控件后，您需要通过 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 属性将其应用到所需的 Diagram 元素上。 + + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/grid_area.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/grid_area.md new file mode 100644 index 000000000..40dcadce6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/grid_area.md @@ -0,0 +1,181 @@ +--- +sidebar_label: 网格区域 +title: 编辑器指南 - 网格区域 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的网格区域。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# 网格区域 {#grid-area} + +网格区域是用于编辑图表的区域。您可以在其中添加新项目、更改其外观和位置，或将其删除。 + +本节将介绍在编辑器以不同模式初始化时，每种图表项目可用的界面元素。本节还会说明如何通过使用键盘快捷键或同时操作多个选中项目来简化图表设计流程。 + +:::note +网格区域中各点之间的距离取决于[网格步长](api/diagram_editor/editor/config/gridstep_property.md)的值 +::: + +## 管理形状 {#managing-shapes} + +### 默认模式下的界面元素 {#interface-elements-in-the-default-mode} + +您可以将形状从 shapebar 拖动到网格区域中，将其放置在所需位置并进行连接。 + + + +点击任意形状后，该形状将变为可编辑状态，并出现专属的界面元素： + +- 一个带有以下控件的工具栏： + - `"copy"` - 用于创建该形状的副本（放置在分组或泳道内的形状除外） + - `"connect"` - 用于激活设置到其他形状连接的模式 + - `"remove"` - 用于删除选中的形状 +- 调整大小的控点（拖动可编辑形状的控点以更改其大小） +- 一个旋转图标（点击该图标可旋转形状） + +为形状启用连接模式后，您可以设置到其他形状的连接、调整其位置和形态，还可以通过工具栏中的 `"remove"` 控件删除不需要的连接。 + +双击形状的文本即可对其进行编辑。 + +### 组织结构图模式下的界面元素 {#interface-elements-in-the-org-chart-mode} + +您可以拖动形状，将其放置在相对于根形状的所需位置，也可以拖动根形状来移动整个图表。要添加新形状，请选中一个形状并为其添加新的子项。您还可以添加 *助理（assistant）* 或 *伙伴（partner）* 类型的项目。父形状与其伙伴项目之间的连接始终为水平方向。 + +您可以将形状从一个父项拖动到另一个父项。被移动的项目会连同其所有子项一起被拖动。 + + + + + +点击任意形状后，该形状将变为可编辑状态，并出现专属的界面元素： + +- 一个可能包含以下控件的工具栏： + - `"add"` - 用于为选中的形状添加新的子项 + - *"添加助理"* - 用于为选中的形状添加助理 + - *"添加伙伴"* - 用于为选中的形状添加伙伴 + - *"垂直对齐"* - 用于将形状的子项垂直排列 + - *"水平对齐"* - 用于将形状的子项水平排列 + - `"remove"` - 用于删除选中的形状（根形状除外）及其子项 +- 调整大小的控点（拖动可编辑形状的控点以更改其大小） +- 一个用于折叠/展开子形状的图标（如果存在子形状） + +点击助理或伙伴形状后，该形状将变为可编辑状态，并出现专属的界面元素： + +- `"remove"` - 用于删除选中的形状 + +双击形状的文本即可对其进行编辑。 + +### 思维导图模式下的界面元素 {#interface-elements-in-the-mindmap-mode} + +您可以拖动形状，将其放置在相对于根形状的所需位置，也可以拖动根形状来移动整个图表。如果拖动父形状，该形状会连同其所有子形状一起被移动。要添加新形状，请选中一个形状并为其添加新的子项。形状可以从一个父项拖动到另一个父项，被移动的项目会连同其所有子项一起被拖动。 + + + +点击任意形状后，该形状将变为可编辑状态，并出现专属的界面元素： + +- 一个带有以下控件的工具栏： + - `"add"` - 用于为选中的形状添加新的子项（根形状除外） + - `"addLeft"` - 用于在根形状左侧添加新的子项 + - `"addRight"` - 用于在根形状右侧添加新的子项 + - `"remove"` - 用于删除选中的形状（根形状除外）及其子项 +- 调整大小的控点（拖动可编辑形状的控点以更改其大小） +- 一个用于折叠/展开子形状的图标 + +双击形状的文本即可对其进行编辑。 + +## 管理线条 {#managing-lines} + +在默认模式下，您可以设置到其他形状的连接、调整其位置和形态，还可以为线条添加文本，并删除不需要的连接。 + + + +在默认模式下，您还可以双击线条为其添加文本。点击文本可设置其方向或将其删除。双击文本即可对其进行编辑。 + + + +## 管理分组 {#managing-groups} + +您可以将分组从 shapebar 拖动到网格区域中，将其放置在所需位置。您可以将多个形状或其他分组放入一个分组中，将其作为一个整体进行移动、复制或删除。 + + + +点击任意分组后，该分组将变为可编辑状态，并出现专属的界面元素： + +- 一个带有以下控件的工具栏： + - `"copy"` - 用于创建该分组的副本（放置在其他分组或泳道内的分组除外）； + - `"remove"` - 用于删除选中的分组； +- 调整大小的控点（拖动可编辑分组的控点以更改其大小）。 + +双击分组表头中的文本即可对其进行编辑。 + +## 管理泳道 {#managing-swimlanes} + +您可以将泳道从 shapebar 拖动到网格区域中，将其放置在所需位置。 + + + +点击任意泳道后，该泳道将变为可编辑状态，并出现专属的界面元素： + +- 一个带有以下控件的工具栏： + - `"addRowLast"` - 用于在泳道末尾添加新行 + - `"addColumnLast"` - 用于在泳道末尾添加新列 + - `"copy"` - 用于创建该泳道的副本 + - `"remove"` - 用于删除选中的泳道 +- 调整大小的控点（拖动可编辑泳道的控点以更改其大小） + +您还可以通过上下文菜单选项添加、移动或删除泳道的列或行。点击泳道子表头的图标后，将出现上下文菜单。 + + + +请注意，由于泳道内部设置的限制，移动首/末列和首/末行的部分选项会被禁用。 + +## 编辑项目的属性 {#editing-attributes-of-an-item} + +在网格区域中选中项目后，您可以[通过编辑器 Editbar 中的侧边栏选项](guides/diagram_editor/editbar.md)更新其属性。 + +## 配置项目的工具栏 {#configuring-the-toolbar-of-an-item} + +您可以通过编辑器的 [shapeToolbar](api/diagram_editor/editor/config/shapetoolbar_property.md) 属性，根据需要自定义形状、分组、泳道各自的专属工具栏。 + +## 启用/禁用对齐线 {#enablingdisabling-snap-lines} + +:::note +该功能仅在编辑器的默认模式下可用 +::: + +从 v5.0 版本起，网格区域配备了对齐线功能，可简化形状彼此对称放置的过程。 + +如果您需要更改对齐线的宽度和颜色，或将其完全隐藏，请使用编辑器的 [magnetic](api/diagram_editor/editor/config/magnetic_property.md) 属性。 + +## 操作多个项目 {#manipulating-multiple-items} + +您可以按住鼠标左键并悬停在多个图表项目上来选中它们，也可以使用键盘快捷键 Shift+左键单击 来选中所需的项目。 + +您可以同时对所有选中的项目进行以下操作： + +- 复制并粘贴项目（*仅默认模式下可用*） +- 拖动项目 +- 删除项目 +- 粘贴已复制项目的样式 +- [对齐一组项目](#aligning-multiple-items)（*仅默认模式下可用*） + +只有当编辑器以默认模式初始化时，才能选中并删除线条。 + +### 对齐多个项目 {#aligning-multiple-items} + +:::note +该功能仅在编辑器的默认模式下可用。 +::: + +从 v5.0 版本起，您可以通过选中一组项目并点击工具栏中相应的控件，对其进行对齐或分布排列。可用的控件如下： + +| 控件 | 说明 | +| --------------------------------- | -------------------------------------------| +| **左对齐** | 沿 x 轴将项目左对齐 | +| **水平居中对齐** | 沿 x 轴将项目居中对齐 | +| **右对齐** | 沿 x 轴将项目右对齐 | +| **水平间距分布** | 沿 x 轴将项目均匀分布 | +| **垂直间距分布** | 沿 y 轴将项目均匀分布 | +| **顶部对齐** | 沿 y 轴将项目顶部对齐 | +| **垂直居中对齐** | 沿 y 轴将项目居中对齐 | +| **底部对齐** | 沿 y 轴将项目底部对齐 | + + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/hot_keys.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/hot_keys.md new file mode 100644 index 000000000..7e9f965b4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/hot_keys.md @@ -0,0 +1,42 @@ +--- +sidebar_label: 快捷键 +title: 编辑器指南 - 快捷键列表 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的快捷键。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# 快捷键列表 {#hotkey-list} + +本节列出了一组在编辑器中创建图表时可以使用的标准快捷键，介绍了这些快捷键所执行的操作，并给出了可被覆盖的快捷键的键值字符串参数。要在编辑器中管理键盘快捷键，请使用 [`hotkeys`](api/diagram_editor/editor/config/hotkeys_property.md) 属性。 + +| 快捷键组合 | 说明 | 参数键值字符串 | +|--------------------------------|------------------------------------------------------|-------------------------| +| `Alt+1` | 显示/隐藏 shapebar（仅默认模式） | `"alt+1"` | +| `Alt+2` | 显示/隐藏 Editbar | `"alt+2"` | +| `Alt+3` | 显示/隐藏网格区域 | `"alt+3"` | +| `Ctrl+Z`（Win）、`CMD+Z`（macOS） | 撤销最近一次操作 | `"ctrl+z"` | +| `Ctrl+Shift+Z`（Win）、`CMD+Shift+Z`（macOS） | 恢复已撤销的操作 | `"ctrl+shift+z"` | +| `Ctrl+D`（Win）、`CMD+D`（macOS） | 创建选中元素的副本（仅默认模式） | `"ctrl+d"` | +| `Ctrl+C`（Win）、`CMD+C`（macOS） | 复制选中的元素（仅默认模式） | `"ctrl+c"` | +| `Ctrl+V`（Win）、`CMD+V`（macOS） | 粘贴选中的元素（仅默认模式） | `"ctrl+v"` | +| `Ctrl+Alt+C`（Win）、`CMD+Alt+C`（macOS） | 复制选中项目的样式（适用于同类元素）| `"alt+ctrl+c"` | +| `Ctrl+Alt+V`（Win）、`CMD+Alt+V`（macOS） | 将已复制的样式应用到选中项目（适用于同类元素）| `"alt+ctrl+v"` | +| `Ctrl+A`（Win）、`CMD+A`（macOS） | 选中所有项目 | `"ctrl+a"` | +| `Ctrl+Shift+A`（Win）、`CMD+Shift+A`（macOS） | 取消选中所有已选项目 | `"ctrl+shift+a"` | +| `Shift+Left Click` | 将某一项目添加到已选项目列表中 | （并非直接对应 `hotkeys` 的参数键） | +| `Alt+Left Click` | 取消选中该选中的项目 | （并非直接对应 `hotkeys` 的参数键） | +| `Delete`（`Del`）、`Backspace` | 删除一个或多个项目 | `"delete"`、`"backspace"` | +| `Arrow-Left`、`Arrow-Right`、`Arrow-Up`、`Arrow-Down`| 移动选中的项目 | `"arrowLeft"`、`"arrowRight"`、`"arrowUp"`、`"arrowDown"` | +| `Ctrl+Mousewheel`（Win）、`CMD+Mousewheel`（macOS）| 增大/减小缩放比例 | （并非直接对应 `hotkeys` 的参数键） | +| `Ctrl+Enter`（Win）、`CMD+Enter`（macOS） | 打开选中元素的内联文本编辑器，作为双击操作的替代方式。仅适用于具有可编辑 `text` 属性的形状。 | `"ctrl+enter"` | + +## 内联文本编辑器快捷键 {#inline-text-editor-shortcuts} + +当[内联文本编辑器](guides/inline_editing.md)处于激活状态时，可以使用以下快捷键。这些快捷键无法通过 `hotkeys` 属性进行配置。 + +| 快捷键 | 说明 | +|--------|-------------| +| `Ctrl+Enter`（Win）、`CMD+Enter`（macOS） | 打开选中元素的内联文本编辑器，作为双击操作的替代方式。仅适用于具有可编辑 `text` 属性的形状。 | +| `Shift+Enter` | 插入换行符（`\n`），同时保持编辑器处于打开状态。 | +| `Delete`（`Del`）、`Backspace` | 删除光标位置处的字符，不会删除元素本身。 | +| `Enter` | 确认当前文本并关闭编辑器。由于编辑器会在输入时动态应用更改，按下 Enter 键即表示编辑成功完成。 | +| `Escape` | 放弃所有未保存的更改并关闭编辑器，将元素的文本恢复为编辑开始前的值。 | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/initialization.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/initialization.md new file mode 100644 index 000000000..fb4849cba --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/initialization.md @@ -0,0 +1,150 @@ +--- +sidebar_label: 初始化 +title: Diagram Editor 初始化 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解如何开始使用 Diagram Editor。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# Diagram Editor 初始化 {#diagram-editor-initialization} + +本文介绍了在页面中显示 Diagram Editor 的流程。要初始化编辑器，您需要引入编辑器专用的源文件，并使用 `DiagramEditor` 实例。除此之外，初始化阶段与 Diagram 组件的初始化过程相同： + +- [下载 DHTMLX Diagram 软件包](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml)，并将其解压到项目的文件夹中 +- [在页面中引入源文件](#including-required-code-files) +- [使用对象构造函数初始化 Diagram Editor](#initializing-diagram-editor) +- [将数据加载到 Diagram Editor 中](#loading-data-into-diagram-editor) + +~~~html + + + + + + + + + + + + +~~~ + +## 引入所需的代码文件 {#including-required-code-files} + +要创建 Diagram Editor，您需要在页面中引入 2 个源文件： + +- **diagramWithEditor.js** +- **diagramWithEditor.css** + +请确保为这些文件设置了正确的相对路径： + +~~~html + + +~~~ + +### 通过 npm 或 yarn 安装 Diagram Editor {#installing-diagram-editor-via-npm-or-yarn} + +您可以使用 `yarn` 或 `npm` 包管理器，将 JavaScript Diagram Editor 引入到您的项目中。 + +#### 通过 npm 或 yarn 安装试用版 Diagram Editor {#installing-trial-diagram-editor-via-npm-or-yarn} + +:::info +如果您想使用 Diagram Editor 的试用版本，请下载[**试用版 Diagram 软件包**](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml)，并按照 *README* 文件中说明的步骤操作。请注意，试用版 Diagram Editor 仅可使用 30 天。 +::: + +#### 通过 npm 或 yarn 安装 PRO 版 Diagram Editor {#installing-pro-diagram-editor-via-npm-or-yarn} + +:::info +您可以在[客户专区](https://dhtmlx.com/clients/)中生成您的 **npm** 登录名和密码，从而直接访问 DHTMLX 的私有 **npm**。该页面还提供了详细的安装指南。请注意，只有在您的 Diagram 专有许可处于有效状态时，才能访问私有 **npm**。 +::: + +## 初始化 Diagram Editor {#initializing-diagram-editor} + +您可以在容器中、文档主体中，或在布局单元格中初始化 Diagram Editor。 + +### 在容器中初始化 {#initialization-in-a-container} + +要在容器中初始化 Diagram Editor，请使用 `dhx.DiagramEditor` 构造函数，并向构造函数传入以下两个参数： + +- 用于放置 Diagram Editor 的容器，我们将其 id 设为 `"editor_container"`： + +~~~html title="index.html" + +~~~ + +- 一个包含[配置属性](#configuration-properties)的对象。如果未向构造函数传入该参数，将应用默认设置 + +~~~jsx title="index.js" +const editor = new dhx.DiagramEditor("editor_container", { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### 在文档主体中初始化 {#initialization-in-the-document-body} + +您也可以跳过为 Diagram Editor 设置容器的步骤，直接将其添加到文档主体中： + +~~~jsx +const editor = new dhx.DiagramEditor(document.body, { + type: "default" // "default" | "org" | "mindmap" +}); +~~~ + +### 在布局单元格中初始化 {#initialization-in-a-layout-cell} + +您还可以在 [Layout 单元格](https://docs.dhtmlx.com/suite/layout/)中初始化编辑器。在这种情况下，请使用 *null* 代替容器： + +~~~jsx +const editor = new dhx.DiagramEditor(null, { + type: "default" // "default" | "org" | "mindmap" +}); +const layout = new dhx.Layout("layout", { + cols: [ + { + id: "diagram_editor" + } + ] +}); + +layout.getCell("diagram_editor").attach(editor); +~~~ + +### 配置属性 {#configuration-properties} + +要更改编辑器的配置，您可以在作为构造函数第二个参数传入的配置对象中指定所需的属性。 + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", // "default" | "org" | "mindmap" + shapeBarWidth: 320, + lineGap: 20 +}); +~~~ + +### 属性 {#properties} + +查看 [Editor 的完整配置属性列表](api/diagram_editor/editor/config/overview.md)。 + +## 将数据加载到 Diagram Editor 中 {#loading-data-into-diagram-editor} + +您可以通过编辑器的 [parse()](api/diagram_editor/editor/methods/parse_method.md) 方法，将[适用的数据集](guides/loading_data.md#preparing-data-to-load)加载到编辑器中。 + + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/shapebar.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/shapebar.md new file mode 100644 index 000000000..ee427c89e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/shapebar.md @@ -0,0 +1,307 @@ +--- +sidebar_label: 形状栏 +title: 编辑器指南 - 形状栏 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的形状栏。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# 形状栏 {#shapebar} + +形状栏是编辑器的一部分，用于渲染 Diagram 项目的预览。您可以选择所需的项目，并将它们从形状栏拖动到网格区域中。 + +:::note +形状栏仅在以默认模式（type: `"default"`）初始化的编辑器中可用。 +::: + +## 默认分区 {#default-sections} + +默认情况下，形状栏分为三个分区：*形状*、*组* 和 *泳道*。*形状* 分区包含所有默认形状以及自定义形状。 +*组* 和 *泳道* 分区包含基本的项目集合。 + + + +## 自定义分区 {#custom-sections} + +要自定义形状栏的结构，您应使用 [`sections`](api/diagram_editor/shapebar/config/sections_property.md) 属性。它允许您按所需顺序指定自己的分区，并将项目放入相应的分区中。 + +`sections` 属性是一个对象，包含一组 *key:value* 键值对，其中 `key` 是分区的名称，`value` 是一个数组，包含应在该分区中渲染的项目列表。 + +根据所选元素的不同，特定分区中项目的配置可以是以下几种情况： + +1. 渲染基本分区 + +您可以使用 `sections` 配置对象渲染一组基本形状。例如： + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Base flow shapes": [{ flowShapes: true }], + "Base org cards": [{ org: true }], + "Base groups": [{ group: true }], + "Base swimlane": [{ swimlane: true }] + } + } + } +}); +~~~ + +2. 借助字符串字面量指定项目 + +您可以借助字符串字面量指定形状类型，从而渲染形状栏项目。请查看以下示例： + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Custom section": ["custom_shape"], + "Other shapes": ["text", "topic", "circle"] + } + } + } +}); +~~~ + +3.
重新定义基本配置
+ +另一种方式是重新定义任意形状的基本属性，并使用所需参数进行渲染。以下示例展示了如何渲染具有不同文本和颜色设置的 `circle` 类型形状： + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Circles": [ + { + type: "circle", + fill: "#fcba03", + text: "Orange" + }, + { + type: "circle", + fill: "#03d7fc", + text: "Blue" + }, + { + type: "circle", + fill: "#03fc88", + text: "Green" + } + ] + } + } + } +}); +~~~ + +您可以按照这种方式重新配置任何类型的形状。 + +4. 在分区中组合不同类型的项目 + +如果您的项目使用了多种元素，您可以在形状栏中创建包含混合类型项目的分区。请查看以下示例： + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Base flow shapes": [{ flowShapes: true }, "text", "topic"], + "Circles": [ + "circle", + { + type: "circle", + fill: "#fcba03", + text: "Orange" + }, + { + type: "circle", + fill: "#03d7fc", + text: "Blue" + }, + { + type: "circle", + fill: "#03fc88", + text: "Green" + } + ] + } + } + } +}); +~~~ + +## 添加具有不同设置的同类型项目 {#adding-items-of-the-same-type-with-different-settings} + +该库允许您向编辑器的形状栏中添加多个具有不同设置的相同项目（即同类型的项目）。 +为此，您需要： + +- 为所需类型的项目创建具有不同配置的独立对象。您可以根据需要创建任意数量的对象 +- 将创建的对象的 *名称* 用作项目的 *类型*，并使用 [`sections`](api/diagram_editor/shapebar/config/sections_property.md) 属性将其添加到形状栏的分区中 + +## 设置形状的预览 {#setting-the-preview-of-shapes} + +要配置在编辑器形状栏中渲染的项目的预览，请使用 [`preview`](api/diagram_editor/shapebar/config/preview_property.md) 属性。它是一个包含两个属性的对象： + +- `scale` -（可选）定义在编辑器形状栏中渲染的项目的缩放比例，默认值为 0.5 +- `gap` -（可选）指定形状栏中渲染的项目之间的间距，默认值为 "6px 8px" +（表示上下方向间距为 6px，左右方向间距为 8px） + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + preview: { + scale: 0.65, + gap: 8 + } + } + } +}); +~~~ + +### 自定义形状预览 {#customizing-a-shape-preview} + +要自定义特定形状的外观，您可以应用形状对象的 [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) 配置属性。 + +该属性可应用于以下两种情况： + +- 通过编辑器对象的 [`defaults`](api/diagram_editor/editor/config/defaults_property.md) 属性设置默认形状的默认配置时 +- 通过 [`addShape()`](api/diagram/addshape_method.md) 方法的 `defaults` 属性设置自定义形状的默认配置时 + +下面我们来看三个配置形状预览的示例： + +1\. 您可以为自定义形状指定要在形状栏中显示的图像。为此，您需要将加载图像的 URL 或 base64 图像作为字符串值传递给 `preview` 属性： + +~~~jsx {6} +const defaults = { + title: "Name and First name", + img: "../avatar-1.jpg", + height: 115, + width: 330, + preview: "../shape_preview.png" +}; + +editor.diagram.addShape("template", { + template, + defaults +}); +~~~ + +2\. 如果您需要指定图像并定义其宽度和高度，则应将 `preview` 属性提供为包含 `img`、`height` 和 `width` 属性的对象： + +~~~jsx {4-8} +const defaults = { + title: "Name and First name", email: "some@mail.com", + img: "../avatar-1.jpg", height: 115, width: 330, + preview: { + img: "../shape_preview.png", + height: 58, + width: 165 + } +} + +editor.diagram.addShape("template", { + template, + defaults +}); +~~~ + +:::note +您可以设置图像的精确宽度和高度，但无法设置图像的缩放比例。 +::: + +3\. 您可以通过 `scale` 属性重新定义在形状栏中渲染的特定形状的缩放比例： + +~~~jsx {2-4} +const defaults = { + preview: { + scale: 0.72 + } +}; + +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + sections: { + "Custom shapes": ["personalCard"], + "OrgChart shapes": ["card", "img-card"] + }, + preview: { + scale: 0.65 + } + } + } +}); + +editor.diagram.addShape("personalCard", { + defaults, + // ... +}); +~~~ + +:::note +将数据导出为 JSON 格式时，将省略 `preview` 属性。 +::: + +## 设置形状栏的宽度 {#setting-the-width-of-shapebar} + +形状栏的默认宽度为 300。您可以通过 [`width`](api/diagram_editor/shapebar/config/width_property.md) 属性更改它并设置任意其他宽度，例如： + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + width: 400 // 默认值为 300 + } + } +}); +~~~ + +## 显示/隐藏形状栏 {#showinghiding-the-shapebar} + +当您需要控制形状栏的可见性时，可以使用 [`show`](api/diagram_editor/shapebar/config/show_property.md) 属性。它允许您在初始化 Diagram Editor 时以特定设置隐藏形状栏，并在需要时再将其显示出来。默认情况下，形状栏是显示的。 + +~~~jsx +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + shapebar: { + show: false // 默认值为 true + } + } +}); +~~~ + +## 形状栏与形状外观 {#shapebar-and-shapes-appearance} + +您可以通过 [`css`](api/diagram_editor/shapebar/config/css_property.md) 属性为形状栏提供所需的外观和风格。它允许指定自定义 CSS 类，以您自己的方式设置形状栏中项目展示的样式。 + +~~~html {6} + + + +~~~ + +您还可以[调整形状的外观](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar)，方法是重新定义特定主题的默认配色方案，或使用您自己的 CSS 变量来管理形状栏项目的配色方案。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/toolbar.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/toolbar.md new file mode 100644 index 000000000..941b4fae2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/diagram_editor/toolbar.md @@ -0,0 +1,445 @@ +--- +sidebar_label: 工具栏 +title: 编辑器指南 - 工具栏 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑器的工具栏。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。 +--- + +# 工具栏 {#toolbar} + +工具栏是 Diagram Editor 的顶部部分，可帮助用户控制编辑过程。 + + + +要配置工具栏，您可以使用以下属性： + +- [`css`](api/diagram_editor/toolbar/config/css_property.md) - 应用自定义 CSS 类 + +- [`navigationType`](api/diagram_editor/toolbar/config/navigationtype_property.md) - 定义激活工具栏项目的操作。您可以指定以下操作之一： + - `"click"` - 当用户点击工具栏项目时将其激活 + - `"pointer"` - 当用户将鼠标指针悬停在工具栏项目上时将其激活 + +- [`items`](api/diagram_editor/toolbar/config/items_property.md) - 排列在工具栏上的 [`items`](#service-elements)（控件）数组。配置工具栏项目有两种方式： + - [**通过字符串配置项目**](api/diagram_editor/toolbar/config/items_property.md#configuring-items-via-strings) + - [**通过对象配置项目**](api/diagram_editor/toolbar/config/items_property.md#configuring-items-via-objects) + +~~~jsx {9-40} +const editor = new dhx.DiagramEditor("editor_container", { + type: "default", + view: { + // toolbar: true, // 显示默认工具栏 + // 或通过对象配置工具栏 + toolbar: { + css: "custom_css", + navigationType: "pointer", + items: [ + { + type: "file", + items: [ + "importJson", + { + type: "exportJson", + value: "Export to JSON" + }, + { + id: "custom_id_1", + type: "menuItem", + value: "Server export", + icon: "dxi dxi-vault", + items: [ + "exportPdf", + { + id: "custom_id_2", + type: "menuItem", + value: "PNG", + handler: editor => { + editor.diagram.export.png(); + // 自定义逻辑 + } + } + ] + } + ] + }, + "spacer", + "scale" + ] + } + } +}); +~~~ + +## 服务元素 {#service-elements} + +工具栏项目由 **服务元素** 表示。您可以使用和配置以下服务元素： + +- `file` - 构成一组用于导入和导出文件的服务元素 + +
+ `file` 项目具有以下结构：
+
+ ~~~jsx
+ - file
+ - importJson
+ - export
+ - exportJson
+ - exportPdf
+ - exportPng
+ ~~~
+
+ `file` 项目集合的外观如下：
+
+ 
+
+
+- `importJson` - 打开一个对话框以导入 JSON 格式的文件
+
+- `export` - 构成一组用于以所选格式导出文件的服务元素
+
+
+ `export` 项目具有以下结构：
+
+ ~~~jsx
+ - export
+ - exportJson
+ - exportPdf
+ - exportPng
+ ~~~
+
+
+- `exportJson` - 以 JSON 格式导出文件
+
+- `exportPdf` - 以 PDF 格式导出文件
+
+- `exportPng` - 以 PNG 格式导出文件
+
++ +- `edit` - 构成一组用于管理和编辑形状、线条、组和泳道的服务元素 + +
+ 在 `default` 模式下，`edit` 项目集合具有以下默认结构：
+
+ ~~~jsx
+ - edit
+ - undo
+ - redo
+ - separator
+ - duplicate
+ - copy
+ - paste
+ - separator
+ - copyStyle
+ - pasteStyle
+ - separator
+ - selectAll
+ - selectNone
+ ~~~
+
+ 
+
+ 在 `org`/`mindmap` 模式下，`edit` 项目集合具有以下默认结构：
+
+ ~~~jsx
+ - edit
+ - undo
+ - redo
+ - separator
+ - copyStyle
+ - pasteStyle
+ - separator
+ - selectAll
+ - selectNone
+ ~~~
+
+ 
+
+
+- `undo` - 在更改历史记录中后退一步
+
+- `redo` - 在更改历史记录中前进一步
+
+- `duplicate` - 复制所选元素
+
+- `copy` - 将所选文件复制到 `model` 对象
+
+- `paste` - 从 `model` 对象粘贴已复制的文件
+
+- `copyStyle` - 将所选元素的样式复制到 `model` 对象
+
+- `pasteStyle` - 将存储在 `model` 对象中的样式应用于所选元素
+
+- `selectAll` - 选中所有可供选择的元素
+
+- `selectNone` - 取消选中所有可用项目
+
++ +- `view` - 构成一组用于管理 Diagram Editor 元素视图的服务元素 + +
+ 在 `default` 模式下，`view` 项目集合具有以下默认结构：
+
+ ~~~jsx
+ - view
+ - theme
+ - themeLight
+ - themeDark
+ - themeLightContrast
+ - themeDarkContrast
+ - separator
+ - shapebar
+ - editbar
+ - grid
+ - separator
+ - connectionPoints
+ - resizePoints
+ - magnetic
+ - separator
+ - zoomIn
+ - zoomOut
+ ~~~
+
+ 
+
+ 在 `org`/`mindmap` 模式下，`view` 项目集合具有以下默认结构：
+
+ ~~~jsx
+ - view
+ - theme
+ - themeLight
+ - themeDark
+ - themeLightContrast
+ - themeDarkContrast
+ - separator
+ - editbar
+ - separator
+ - grid
+ - separator
+ - resizePoints
+ - itemsDraggable
+ - separator
+ - zoomIn
+ - zoomOut
+ ~~~
+
+ 
+
+
+- `theme` - 构成一组用于应用主题的服务元素
+
+
+ `theme` 项目具有以下结构：
+
+ ~~~jsx
+ - theme
+ - themeLight
+ - themeDark
+ - themeLightContrast
+ - themeDarkContrast
+ ~~~
+
+
+- `themeLight` - 应用 **Light** 主题
+
+- `themeDark` - 应用 **Dark** 主题
+
+- `themeLightContrast` - 应用 **LightContrast** 主题
+
+- `themeDarkContrast` - 应用 **DarkContrast** 主题
+
+- `shapebar` - 显示/隐藏 `Shapebar` 面板
+
+- `editbar` - 显示/隐藏 `Editbar` 面板
+
+- `grid` - 显示/隐藏网格区域中的 `grid`
+
+- `connectionPoints` - 显示/隐藏 **连接点**
+
+- `resizePoints` - 显示/隐藏 **调整大小点**
+
+- `magnetic` - 开启/关闭 `magnetic` 功能
+
+- `zoomIn` - 将缩放值增加 0.05（5%）
+
+- `zoomOut` - 将缩放值减少 0.05（5%）
+
++ +- `arrange` - 构成一组用于排列 Diagram Editor 元素的服务元素 + +
+ 在 `default` 模式下，`arrange` 项目集合具有以下默认结构：
+
+ ~~~jsx
+ - arrange
+ - layout
+ - layoutMode
+ - layoutModeDirect
+ - layoutModeEdges
+ - separator
+ - layoutOrthogonal
+ - layoutRadial
+ - align
+ - alignHorizontalLeft
+ - alignHorizontalCenter
+ - alignHorizontalRight
+ - separator
+ - alignVerticalTop
+ - alignVerticalCenter
+ - alignVerticalBottom
+ - distribute
+ - distributeVertical
+ - distributeHorizontal
+ ~~~
+
+ 
+
+
+- `layout` - 构成一组用于自动放置 Diagram Editor 元素的服务元素
+
+
+ `layout` 项目具有以下结构：
+
+ ~~~jsx
+ - layout
+ - layoutMode
+ - layoutModeDirect
+ - layoutModeEdges
+ - separator
+ - layoutOrthogonal
+ - layoutRadial
+ ~~~
+
+
+- `layoutMode` - 构成一组用于管理自动放置模式的服务元素
+
+
+ `layoutMode` 项目具有以下结构：
+
+ ~~~jsx
+ - layoutMode
+ - layoutModeDirect
+ - layoutModeEdges
+ ~~~
+
+
+- `layoutModeDirect` - 应用元素连接线的 `direct` 模式
+
+- `layoutModeEdges` - 应用元素连接线的 `edges` 模式
+
+- `layoutOrthogonal` - 应用元素排列的 `orthogonal` 模式
+
+- `layoutRadial` - 应用元素排列的 `radial` 模式
+
+- `align` - 构成一组用于管理 Diagram Editor 元素对齐方式的服务元素
+
+
+ `align` 项目具有以下结构：
+
+ ~~~jsx
+ - align
+ - alignHorizontalLeft
+ - alignHorizontalCenter
+ - alignHorizontalRight
+ - separator
+ - alignVerticalTop
+ - alignVerticalCenter
+ - alignVerticalBottom
+ ~~~
+
+
+- `alignHorizontalLeft` - 将元素水平左对齐
+
+- `alignHorizontalCenter` - 将元素水平居中对齐
+
+- `alignHorizontalRight` - 将元素水平右对齐
+
+- `alignVerticalTop` - 将元素垂直顶部对齐
+
+- `alignVerticalCenter` - 将元素垂直居中对齐
+
+- `alignVerticalBottom` - 将元素垂直底部对齐
+
+- `distribute` - 构成一组用于分布 Diagram Editor 元素的服务元素
+
+
+ `distribute` 项目具有以下结构：
+ ~~~jsx
+ - distribute
+ - distributeVertical
+ - distributeHorizontal
+ ~~~
+
+
+- `distributeVertical` - 垂直分布元素
+
+- `distributeHorizontal` - 水平分布元素
+
++ +- `scale` - 允许用户将缩放值增加或减少 0.05（5%）的控件 + +
+ `scale` 项目的外观如下：
+
+ 
+
+
+- [`separator`](https://docs.dhtmlx.com/suite/toolbar/api/api_separator_properties/) - 用于分隔项目/项目组的水平线（位于菜单选项之间）或垂直线（位于工具栏控件之间）。
+
+- [`spacer`](https://docs.dhtmlx.com/suite/toolbar/api/api_spacer_properties/) - 工具栏上用于对齐控件的空白间隔
+
+## 基础元素 {#base-elements}
+
+除 [**服务元素**](#service-elements) 外，您还可以使用 [对象](api/diagram_editor/toolbar/config/items_property.md#configuring-items-via-objects) 方式指定和配置以下 **基础元素**：
+
+- [Button](https://docs.dhtmlx.com/suite/toolbar/button/)
+- [Custom HTML](https://docs.dhtmlx.com/suite/toolbar/customhtmlbutton/)
+- [Datepicker](https://docs.dhtmlx.com/suite/toolbar/datepicker/)
+- [ImageButton]( https://docs.dhtmlx.com/suite/toolbar/image_button/)
+- [Input](https://docs.dhtmlx.com/suite/toolbar/input/)
+- [MenuItem](https://docs.dhtmlx.com/suite/toolbar/menuitem/)
+- [NavItem](https://docs.dhtmlx.com/suite/toolbar/navitem/)
+- [SelectButton](https://docs.dhtmlx.com/suite/toolbar/selectbutton/)
+- [Separator](https://docs.dhtmlx.com/suite/toolbar/separator/)
+- [Spacer](https://docs.dhtmlx.com/suite/toolbar/spacer/)
+- [Title](https://docs.dhtmlx.com/suite/toolbar/title/)
+
+以下示例展示了如何将 [Button](https://docs.dhtmlx.com/suite/toolbar/button/) 控件添加到工具栏：
+
+~~~jsx {8-11}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org", // "default" | "org" | "mindmap"
+ view: {
+ // toolbar: true, // 显示默认工具栏
+ // 或通过对象配置工具栏
+ toolbar: {
+ items: [
+ {
+ type: "button",
+ value: "Best button"
+ }
+ ]
+ }
+ }
+});
+~~~
+
+除了 **基础元素**（不包括 [Separator](https://docs.dhtmlx.com/suite/toolbar/separator/)、[Spacer](https://docs.dhtmlx.com/suite/toolbar/spacer/) 和 [Title](https://docs.dhtmlx.com/suite/toolbar/title/)）的内部属性外，您还可以使用以下属性：
+
+- `checkIcon` -（可选）- 返回图标 CSS 类的处理程序。调用时带有以下参数：
+ - `editor` - Diagram Editor 对象
+
+~~~jsx
+checkIcon?: (editor: IDiagramEditor) => string; // 仅用于包含图标的基础元素
+~~~
+
+- `handler` -（可选）- 当 `click` 或 `inputChange` 事件发生时运行的处理程序。调用时带有以下参数：
+ - `editor` - Diagram Editor 对象
+ - `event` - 一个[原生事件](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+
+~~~jsx
+handler?: (editor: object, event: Event) => void;
+~~~
+
+**相关示例**：[带编辑器的 Diagram。默认模式。卡片、编辑栏、工具栏和形状栏的自定义](https://snippet.dhtmlx.com/1p0wemnn)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/event_handling.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/event_handling.md
new file mode 100644
index 000000000..cecba0aab
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/event_handling.md
@@ -0,0 +1,86 @@
+---
+sidebar_label: 事件处理
+title: 事件处理
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解事件处理的相关内容。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# 事件处理 {#event-handling}
+
+## 添加事件监听器 {#attaching-event-listeners}
+
+您可以为任何可用事件添加自定义处理程序。为此，请使用 `diagram.events.on()` 方法，并传入以下参数：
+
+- `name` - (*string*) 事件名称
+- `handler` - (*function*) 处理函数
+
+~~~jsx
+diagram.events.on("ShapeClick", (id) => {
+ alert("You've just clicked an item with id="+id);
+});
+~~~
+
+您可以为同一事件添加多个处理程序，所有处理程序都会被执行。如果其中某个处理程序返回 *false*，相关操作将被阻止。事件处理程序按照添加的顺序依次执行。
+
+## 移除事件监听器 {#detaching-event-listeners}
+
+要移除事件，请使用 `diagram.events.detach()` 方法：
+
+~~~jsx
+diagram.events.on("CustomEvent", args);
+
+diagram.events.detach("CustomEvent");
+~~~
+
+## 调用事件 {#calling-events}
+
+要调用事件，请使用 `diagram.events.fire()` 方法。
+
+~~~jsx
+diagram.events.fire("CustomEvent", args);
+// 其中 args 是一个参数数组
+~~~
+
+通常情况下，事件会自动调用，您无需使用此方法。
+
+## 支持的事件列表 {#list-of-supported-events}
+
+### Diagram 事件 {#diagram-events}
+
+请在 [API 参考](api/diagram/api_overview.md#diagram-events)中查看完整的 Diagram API 事件列表。
+
+### Editor 事件 {#editor-events}
+
+Diagram Editor 的 API 事件列表见 [API 章节](api/diagram_editor/editor/events/overview.md)。
+
+:::note
+除了 Diagram Editor 的事件外，在编辑器视图中工作时，您还可以应用 [Diagram 对象的事件](api/diagram/api_overview.md#diagram-events)。例如：
+:::
+
+~~~jsx {6-8}
+const editor = new dhx.DiagramEditor("editor_container", {
+ controls: { autoLayout: false }
+});
+editor.parse(data);
+
+editor.diagram.events.on("ShapeClick", (id) => {
+ alert("You've just clicked an item with id=" + id);
+});
+~~~
+
+如果您需要应用下面列出的事件，也可以使用这种方式。
+
+### CellManager 事件 {#cellmanager-events}
+
+请在 [API 参考](/api/cell_manager/#events)中查看完整的 CellManager API 事件列表。
+
+### DataCollection 事件 {#datacollection-events}
+
+请在 [API 参考](/api/data_collection/#events)中查看完整的 DataCollection API 事件列表。
+
+### InlineEditor 事件 {#inlineeditor-events}
+
+请在 [API 参考](/api/inline_editor/#events)中查看完整的 InlineEditor API 事件列表。
+
+### Selection 事件 {#selection-events}
+
+请在 [API 参考](/api/selection/#events)中查看完整的 Selection API 事件列表。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/inline_editing.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/inline_editing.md
new file mode 100644
index 000000000..7fca22059
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/inline_editing.md
@@ -0,0 +1,121 @@
+---
+sidebar_label: 内联编辑
+title: 内联编辑
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解内联编辑的相关内容。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# 内联编辑 {#inline-editing}
+
+内联编辑允许您通过双击 Diagram 元素来编辑其文本内容。您可以在 Diagram 和编辑器中编辑这些元素。
+
+对于线条，内联编辑仅在 Diagram 的默认模式下启用。
+
+
+
+:::note
+内联编辑不适用于自定义形状。
+:::
+
+此功能默认启用。要禁用内联编辑，请将您希望设为不可编辑的元素的 `editable` 属性设置为 *false*。
+
+您可以在下方找到禁用 Diagram 元素内联编辑的示例：
+
+#### 线条标题 {#line-titles}
+
+~~~jsx title="禁用编辑线条文本内容的功能" {18}
+const data = [
+ // 配置形状
+ { "id": "shape_1", "type": "start", "x": 0, "text": "Start" },
+ { "id": "shape_2", "type": "process", "x": 400, "text": "Step 1" },
+ // 配置线条
+ {
+ "id": "line_1",
+ "type": "line",
+ "from": "shape_1",
+ "to": "shape_2"
+ },
+ // 配置线条标题
+ {
+ "id": "title_1",
+ "type": "lineTitle",
+ "parent": "line_1",
+ "text": "Some text",
+ "editable": false // 禁用线条文本元素的内联编辑功能
+ }
+];
+~~~
+
+#### 形状 {#shapes}
+
+~~~jsx title="禁用编辑形状文本内容的功能"
+const data = [
+ { "id": 1, "x": 280, "y": 0, "text": "Start", "type": "start", "editable": false}
+];
+~~~
+
+#### 组 {#groups}
+
+~~~jsx title="禁用编辑组标题文本内容的功能"
+const data = [
+ {
+ "type": "$group",
+ "id": 1,
+ "width": 400,
+ "height": 200,
+ "x": 0,
+ "y": 0,
+ "header": {
+ "text": "Group 1",
+ "editable": false
+ }
+ }
+];
+~~~
+
+#### 泳道 {#swimlanes}
+
+~~~jsx title="配置编辑泳道标题和子标题文本内容的功能"
+const data = [
+ {
+ "id": "main",
+ "type": "$swimlane",
+ "height": 730,
+ "width": 1195,
+ "header": {
+ "closable": true,
+ "text": "Waterfall diagram template",
+ // 禁用标题的内联编辑功能
+ "editable": false
+ },
+ "layout": [
+ [1, 2, 3]
+ ],
+ "subHeaderCols": {
+ "headers": [
+ { "text": "September", "fill": "rgba(243, 92, 79, 0.4)" },
+ // 启用该子标题的内联编辑功能
+ { "text": "October", "fill": "rgba(155, 96, 248, 0.4)", "editable": true },
+ { "text": "November", "fill": "rgba(255, 174, 18, 0.4)" }
+ ],
+ // 禁用所有子标题的内联编辑功能
+ "editable": false
+ }
+ }
+];
+~~~
+
+## 键盘快捷键 {#keyboard-shortcuts}
+
+内联文本编辑器支持以下键盘快捷键：
+
+| 快捷键 | 描述 |
+|--------|-------------|
+| `Ctrl+Enter`（Win）、`CMD+Enter`（macOS） | 为选中的元素打开内联文本编辑器。可作为双击操作的替代方式。仅适用于具有可编辑 `text` 属性的形状。 |
+| `Shift+Enter` | 插入换行符（`\n`），同时保持编辑器处于打开状态。 |
+| `Delete`（`Del`）、`Backspace` | 删除光标位置处的字符，不会删除元素本身。 |
+| `Enter` | 确认当前文本并关闭编辑器。由于编辑器会在您输入时动态应用更改，按 Enter 键即表示编辑已成功完成。 |
+| `Escape` | 放弃所有未保存的更改并关闭编辑器，将元素的文本恢复为编辑开始前的值。 |
+
+## API 事件 {#api-events}
+
+该库包含一组实用的 [API 事件](/api/inline_editor/)，您可以使用它们来控制编辑器打开/关闭时的行为，以及控制元素文本的编辑过程。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integrations/angular_integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integrations/angular_integration.md
new file mode 100644
index 000000000..5609ff02b
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integrations/angular_integration.md
@@ -0,0 +1,269 @@
+---
+sidebar_label: 与 Angular 集成
+title: 与 Angular 集成
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解与 Angular 的集成。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版。
+---
+
+# 与 Angular 集成 {#integration-with-angular}
+
+:::tip
+在使用本文档之前，您应熟悉 **Angular** 的基本概念和模式。如需回顾相关知识，请参阅 [**Angular 文档**](https://angular.dev/overview)。
+:::
+
+DHTMLX Diagram Editor 与 **Angular** 兼容。我们已准备了有关如何在 **Angular** 中使用 DHTMLX Diagram Editor 的代码示例。有关更多信息，请参阅相应的 [**GitHub 示例**](https://github.com/DHTMLX/angular-diagram-demo)。
+
+## 创建项目 {#creating-a-project}
+
+:::info
+在开始创建新项目之前，请安装 [**Angular CLI**](https://angular.dev/tools/cli) 和 [**Node.js**](https://nodejs.org/en/)。
+:::
+
+使用 Angular CLI 创建一个新的 **my-angular-diagram-app** 项目。为此，请运行以下命令：
+
+~~~json
+ng new my-angular-diagram-app
+~~~
+
+:::note
+如果您想按照本指南操作，请在创建新的 Angular 应用时禁用服务器端渲染（SSR）和静态站点生成（SSG/预渲染）！
+:::
+
+上述命令会安装所有必要的工具，因此您无需运行任何其他命令。
+
+### 安装依赖 {#installation-of-dependencies}
+
+之后，进入应用目录：
+
+~~~json
+cd my-angular-diagram-app
+~~~
+
+安装依赖并启动开发服务器。为此，请使用 [**yarn**](https://yarnpkg.com/) 包管理器：
+
+~~~json
+yarn
+yarn start
+~~~
+
+该应用应在本地主机上运行（例如 `http://localhost:3000`）。
+
+## 创建 Diagram Editor {#creating-diagram-editor}
+
+现在您需要获取 DHTMLX Diagram Editor 的源代码。首先，请停止应用，然后继续安装 Diagram Editor 软件包。
+
+### 步骤 1. 安装软件包 {#step-1-package-installation}
+
+下载 [**试用版 Diagram 软件包**](guides/diagram_editor/initialization.md#installing-diagram-editor-via-npm-or-yarn)，并按照 README 文件中提到的步骤进行操作。请注意，试用版 Diagram Editor 仅可使用 30 天。
+
+### 步骤 2. 创建组件 {#step-2-component-creation}
+
+现在您需要创建一个 Angular 组件，以便将 Diagram Editor 添加到应用程序中。在 **src/app/** 目录下创建 **diagram-editor** 文件夹，在其中添加一个新文件并将其命名为 **diagram-editor.component.ts**。然后完成以下步骤。
+
+#### 导入源文件 {#import-source-files}
+
+打开该文件并导入 Diagram Editor 源文件。请注意：
+
+- 如果您使用 PRO 版本，并从本地文件夹安装 Diagram Editor 软件包，则导入路径如下所示：
+
+~~~jsx
+import { DiagramEditor } from 'dhx-diagram-package';
+~~~
+
+- 如果您使用 Diagram 的试用版，请指定以下路径：
+
+~~~jsx
+import { DiagramEditor } from '@dhx/trial-diagram';
+~~~
+
+在本教程中，您将了解如何配置 Diagram 的 **试用版**。
+
+#### 设置容器并初始化 Diagram Editor {#set-the-container-and-initialize-diagram-editor}
+
+要在页面上显示 Diagram Editor，您需要设置用于渲染组件的容器，并使用相应的构造函数初始化 Diagram Editor：
+
+~~~jsx {1,9,13-14,19-20} title="diagram-editor.component.ts"
+import { DiagramEditor } from "@dhx/trial-diagram";
+import { IDefaultEditorConfig } from "@dhx/trial-diagram/codebase/types/ts-diagram-editor";
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ encapsulation: ViewEncapsulation.None,
+ selector: 'diagram-editor', // 在 "app.component.ts" 文件中用作 Other content
+
+
+~~~
+
+- 为任意 HTML 元素设置主题，例如为 Toolbar 控件设置主题
+
+~~~jsx {10-11}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ toolbar: {
+ css: "toolbar"
+ }
+ }
+});
+
+const toolbarEl = document.querySelector(".toolbar");
+dhx.setTheme("dark", toolbarEl);
+~~~
+
+**相关示例：** [Diagram Editor。默认模式。基础和自定义主题](https://snippet.dhtmlx.com/9twmlfus)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/touch_support.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/touch_support.md
new file mode 100644
index 000000000..d0f55de46
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/touch_support.md
@@ -0,0 +1,20 @@
+---
+sidebar_label: 触摸支持
+title: 触摸支持
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解触摸支持相关内容。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# 触摸支持
+
+
+
+从 4.2 版本及更高版本开始，DHTMLX Diagram 库提供了开箱即用的内置触摸支持。
+
+当您通过触摸屏幕与应用程序交互时，点按操作与鼠标点击具有相同的效果。
+因此，点击事件（在点击、双击项目时触发）在触摸屏设备上将继续正常工作。请注意，mouseover 事件不会被触发。
+
+触摸支持可识别以下触摸手势：
+
+- **双击** - 用于编辑形状/组/泳道的文本；用于创建和编辑连接线的文本
+- **按住并拖动** - 用于调用 `blockSelection` 并选择多个项目
+- **拖动** - 用于拖动形状/组/泳道；用于从编辑器的左侧面板拖动形状/文本/组/泳道
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/using_typescript.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/using_typescript.md
new file mode 100644
index 000000000..2b687bbec
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/using_typescript.md
@@ -0,0 +1,23 @@
+---
+sidebar_label: TypeScript 支持
+title: TypeScript 支持
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解如何将 Diagram 与 TypeScript 结合使用。浏览开发者指南和 API 参考、试用代码示例和实时演示，并下载免费的 30 天评估版 DHTMLX Diagram。
+---
+
+# TypeScript 支持 {#typescript-support}
+
+从 v3.1 起，DHTMLX Diagram 库提供了使用 TypeScript 定义文件的功能。TypeScript 的内置支持应该可以开箱即用。
+
+:::note
+您可以直接在我们的代码片段工具中试用该功能。
+:::
+
+
+
+## 使用 TypeScript 的优势 {#advantages-of-using-typescript}
+
+为什么我们建议您将 DHTMLX Diagram 与 TypeScript 结合使用？
+
+TypeScript 的主要优势在于，它能让您准确了解 DHTMLX Diagram 库的 API 期望接收哪种类型的数据。
+
+由于类型检查与自动补全功能相结合，可以帮助您避免潜在的错误，并且无需不断查阅文档即可编写代码，因此构建应用程序的方式变得更加智能。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/line_titles/configuration_properties.md b/i18n/zh/docusaurus-plugin-content-docs/current/line_titles/configuration_properties.md
new file mode 100644
index 000000000..e786b491d
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/line_titles/configuration_properties.md
@@ -0,0 +1,79 @@
+---
+sidebar_label: 线条标题属性
+title: 线条标题属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解线条标题属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天评估版 DHTMLX Diagram。
+---
+
+# 线条标题属性 {#linetitle-properties}
+
+:::note
+请使用 HEX 格式指定颜色值。
+:::
+
+### 用法 {#usage}
+
+~~~jsx
+const data = [
+ // 线条标题对象
+ {
+ type: "lineTitle",
+ id?: string | number,
+ text: string,
+ parent: string | number,
+
+ distance?: number, // 默认为 50
+ autoPosition?: boolean, // 默认为 true
+ editable?: boolean, // 默认为 true
+ fixed?: boolean, // 默认为 false
+ hidden?: boolean, // 默认为 false
+
+ fill?: string,
+ fontSize?: string | number, // 默认为 14
+ lineHeight?: string | number, // 默认为 14
+ fontStyle?: "normal" | "italic" | "oblique", // 默认为 "normal"
+ fontColor?: string, // 默认为 "#4C4C4C"
+ fontWeight?: string, // 默认为 "500"
+ textAlign?: "center" | "left" | "right" // 默认为 "center"
+ },
+ // 更多线条对象
+];
+~~~
+
+### 描述 {#description}
+
+每个线条标题对象都可以包含以下属性：
+
+- `type` - （必填）项目的类型，设置为 `"lineTitle"`
+- `id` - （可选）线条标题的 id，默认自动生成
+- `parent` - （必填）要为其显示标题的线条的 id
+- `text` - （必填）线条标题的文本
+- `distance` - （可选）指定标题在线条上显示位置的距离，取值范围为 0 到 100，默认为 50
+- `autoPosition` - （可选）定义文本的方向，如果设置为 *true* - 文本方向与线条方向相同；*false* - 文本方向始终为水平方向；默认为 *true*
+- `editable` - （可选）启用/禁用通过双击编辑项目文本的功能，默认为 *true*
+- `fixed` - （可选）启用/禁用以指定的 `distance` 值固定项目文本的功能，默认为 *false*
+- `hidden` - （可选）定义文本是否隐藏，默认为 *false*
+- `fill` - （可选）线条标题项目的背景颜色
+- `fontSize` - （可选）字体大小，默认为 14
+- `lineHeight` - （可选）文本行高，默认为 14
+- `fontStyle` - （可选）文本字体的样式：`"normal"`（默认）、`"italic"`、`"oblique"`
+- `fontColor` - （可选）文本字体的颜色，默认为 "#4C4C4C"
+- `fontWeight` - （可选）文本字体的粗细，可能的值为：`"normal"`、`"bold"`、`"bolder"`、`"lighter"`；以及 `"100"`-`"900"` 的值，其中 `"400"` 与 normal 相同，`"600"` 及以上为最粗字体；默认为 `"500"`
+- `textAlign` - （可选）文本的对齐方式：`"center"`（默认）、`"left"`、`"right"`
+
+### 示例 {#example}
+
+~~~jsx
+const data = [
+ // 配置图形
+ { type: "rectangle", id: "shape_1" },
+ { type: "rectangle", id: "shape_2", x: 400 },
+
+ // 配置线条
+ { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
+
+ // 配置线条标题
+ { type: "lineTitle", id: "title_1", parent: "line_1", text: "Some text" }
+];
+~~~
+
+**相关文章**：[配置线条标题](/line_titles/)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/line_titles/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/line_titles/index.md
new file mode 100644
index 000000000..3f103cf0c
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/line_titles/index.md
@@ -0,0 +1,106 @@
+---
+sidebar_label: 线条标题
+title: 线条标题
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解线条。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天评估版 DHTMLX Diagram。
+---
+
+# 线条标题 {#linetitles}
+
+## 概述 {#overview}
+
+线条标题用于为连接图形的线条设置文本。您可以在 diagram 和编辑器中通过双击线条来为其添加文本，也可以在编辑器中使用线条的工具栏（点击线条以激活）。您还可以在 diagram 和编辑器中通过双击来编辑线条标题。
+
+为线条添加文本并对其进行操作的另一种方法是准备一个 [数据集](guides/loading_data.md#preparing-data-to-load)。
+
+:::note
+线条标题仅在 Diagram/Diagram Editor 的默认模式下可用（type: `"default"`）。
+:::
+
+
+
+## 创建线条标题 {#creating-line-titles}
+
+要创建线条标题，您需要在准备要加载到 diagram 的数据集时，在线条标题对象内指定 `type: "lineTitle"`：
+
+~~~jsx {5-6}
+const data = [
+ { type: "rectangle", id: "shape_1" },
+ { type: "rectangle", id: "shape_2", x: 400 },
+ { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
+ // 配置线条标题
+ { type: "lineTitle", id: "title_1", parent: "line_1", text: "Some text" }
+];
+
+// 初始化 diagram
+const diagram = new dhx.Diagram("diagram_container");
+diagram.data.parse(data);
+~~~
+
+### 线条标题对象的属性 {#properties-of-a-line-title-object}
+
+请查看 [线条标题对象的完整配置属性列表](line_titles/configuration_properties.md)，以调整线条标题的外观并配置其位置。
+
+## 使用线条标题 {#working-with-line-titles}
+
+您可以通过 [DataCollection API](/api/data_collection/) 操作线条标题。
+
+:::note
+以下示例同时适用于 Diagram 和 Diagram Editor。
+:::
+
+### 添加线条标题 {#adding-a-line-title}
+
+您可以通过 DataCollection 的 [`add`](api/data_collection/add_method.md) 方法添加线条标题：
+
+~~~jsx {5-10}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+editor.diagram.data.add({
+ type: "lineTitle",
+ parent: "line_1",
+ text: "Some text",
+ fill: "#BCE4CE"
+});
+~~~
+
+将包含新线条标题配置的对象作为该方法的参数传入。
+
+:::note
+请参阅 [线条标题对象的完整配置属性列表](line_titles/configuration_properties.md)。
+:::
+
+### 阻止添加线条标题 {#blocking-line-titles-adding}
+
+如果需要阻止添加线条标题，您可以使用 DataCollection 的 [`beforeAdd`](api/data_collection/beforeadd_event.md) 事件：
+
+~~~jsx {5}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+editor.diagram.data.events.on("beforeAdd", (item) => item.type !== "lineTitle");
+~~~
+
+### 遍历线条标题 {#iterating-over-line-titles}
+
+借助 DataCollection 的 [`eachChild()`](api/data_collection/eachchild_method.md) 方法，您可以将线条标题作为线条的子项进行遍历：
+
+~~~jsx {7-9,11-13}
+const editor= new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse([
+ { type: "rectangle", id: "shape_1" },
+ { type: "rectangle", id: "shape_2", x: 400 },
+ { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
+ { type: "lineTitle", id: "title_1", parent: "line_1", text: "Text 1", distance: 50 },
+ { type: "lineTitle", id: "title_2", parent: "line_1", text: "Text 2", distance: 70 }
+]);
+editor.diagram.data.eachChild("line_1", (child) => {
+ console.log(child.id); // => "title_1", "title_2"
+});
+~~~
+
+将要遍历其标题的线条 id 作为第一个参数传入。在上面的示例中，回调函数将应用于指定线条的每个子项，并返回它们的 id。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/lines/configuration_properties.md b/i18n/zh/docusaurus-plugin-content-docs/current/lines/configuration_properties.md
new file mode 100644
index 000000000..a80e5f110
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/lines/configuration_properties.md
@@ -0,0 +1,180 @@
+---
+sidebar_label: 线条属性
+title: 线条属性
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解线条属性。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# 线条属性 {#line-properties}
+
+:::note
+请使用 HEX 格式指定颜色值。
+:::
+
+## 通用属性 {#common-properties}
+
+### 用法 {#usage}
+
+~~~jsx
+const data = [
+ // 线条对象
+ {
+ type: "line" | "dash",
+ id?: string | number,
+ from?: string | number,
+ to?: string | number,
+ connectType?: "straight" | "elbow" | "curved",
+ strokeWidth?: number, // 默认为 2
+ stroke?: string
+ },
+ // 更多线条对象
+]
+~~~
+
+### 描述 {#description}
+
+每个线条对象都可以包含以下属性：
+
+- `type` -（必需）连接线的类型："*line*" 或 "*dash*"
+- `id` -（可选）连接线的 id
+- `from` -（可选）父级形状的 id
+- `to` -（可选）子级形状的 id
+- `connectType` -（可选）线条的连接类型：["straight"](/lines/#lines-in-the-default-mode)、["elbow"](/lines/#lines-in-the-org-chart-mode)（默认/组织结构图模式下的默认类型）、["curved"](/lines/#lines-in-the-mindmap-mode)（思维导图模式下的默认类型）
+- `strokeWidth` -（可选）线条的宽度，默认为 2
+- `stroke` -（可选）线条的颜色；默认模式下为 "#2198F3"，组织结构图/思维导图模式下默认为 "#CCC"
+
+## 默认模式特有的属性 {#properties-specific-for-the-default-mode}
+
+### 用法 {#usage-1}
+
+~~~jsx
+const data = [
+ // 线条对象
+ {
+ // ... 通用属性
+ forwardArrow?: string, // 默认为 "filled"
+ backArrow?: string, // 默认为 "filled"
+ fromSide?: "top" | "bottom" | "left" | "right" | "center",
+ toSide?: "top" | "bottom" | "left" | "right" | "center",
+ cornersRadius?: number,
+ customGap?: number,
+ points?: [
+ { x: number, y: number, custom?: boolean },
+ // 更多点对象
+ ]
+ },
+ // 更多线条对象
+]
+~~~
+
+### 描述 {#description-1}
+
+在为默认模式下要加载到图表中的线条准备数据集时，您可以向线条的配置对象中添加以下属性：
+
+- `forwardArrow` -（可选）设置正向箭头连接符，并定义箭头的类型（默认为 `"filled"`）
+- `backArrow` -（可选）设置反向箭头连接符，并定义箭头的类型（默认为 `"filled"`）
+- `fromSide` -（可选）连接线起始的形状边（"*top*"、"*bottom*"、"*left*"、"*right*"、"*center*"）
+- `toSide` -（可选）连接到另一个形状的目标边（"*top*"、"*bottom*"、"*left*"、"*right*"、"*center*"）
+- `cornersRadius` -（可选）连接线圆角的半径
+- `customGap` -（可选）设置从形状到连接线直角弯折处的距离
+- `points` -（可选）为线条设置一个包含点对象的数组。每个对象包含以下属性：
+ - `x` -（必需）点的 x 坐标
+ - `y` -（必需）点的 y 坐标
+ - `custom` -（可选）定义该点是否固定。若为 *true*，则只有在与该点进行交互后才能更改其位置
+
+### 示例 {#example}
+
+~~~jsx
+const data = [
+ // 配置形状
+ { "id": 1, "x": 200, "y": 0, "text": "Start", "type": "start" },
+ { "id": 2, "x": 200, "y": 320, "text": "Call Client and \n set-up Appointment", "type": "process" },
+ // 配置线条
+ {
+ "type": "line",
+ "stroke": "#0AB169",
+ "connectType": "straight",
+ "from": 1,
+ "to": 2,
+ "fromSide": "bottom",
+ "toSide": "top",
+ "forwardArrow": "filled"
+ }
+];
+~~~
+
+## PERT 模式下链接的特有属性 {#properties-specific-for-links-in-the-pert-mode}
+
+### 用法 {#usage-2}
+
+~~~jsx
+const dataset = {
+ data: [...], // 形状数组（任务、里程碑、项目）
+ links: [
+ // 链接对象
+ {
+ id?: string | number,
+ source: string | number,
+ target: string | number
+ },
+ // 更多链接对象
+ ]
+}
+~~~
+
+### 描述 {#description-2}
+
+在为 PERT 模式下要加载到图表中的链接准备数据集时，您可以向链接的配置对象中添加以下属性：
+
+- `id` -（可选）链接连接符的 id
+- `source` -（必需）链接起始任务的 id
+- `target` -（必需）链接结束任务的 id
+
+:::info 重要
+请注意，PERT Diagram 中仅支持 `type: "0"`（"finish" -> "start"）类型的链接。所有 [DHTMLX Gantt 图表中使用的其他链接类型](https://docs.dhtmlx.com/gantt/desktop__link_properties.html)也都将按照 `type: "0"` 处理。
+:::
+
+:::tip
+请注意，由于 Diagram 数据集合中各项的 id 必须唯一，因此在加载数据或添加新链接时，系统会为链接的现有 id 添加 `$link` 前缀。
+
+例如：
+
+~~~jsx
+{
+ data: [...],
+ links: [
+ { id: "1" }, // 在 diagram 中将显示为 "$link:1"
+ ]
+}
+
+// diagram.data.getItem("$link:1");
+~~~
+:::
+
+### 示例 {#example-1}
+
+~~~jsx {11-16}
+const dataset = {
+ data: [
+ // 配置 project 形状
+ { id: "1", text: "Project #1", type: "project", parent: null },
+ // 配置 task 形状
+ { id: "1.1", text: "Task #1", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+ { id: "1.2", text: "Task #2", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+ { id: "2.1", text: "Task #3", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+ { id: "2.2", text: "Task #4", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 }
+ ],
+ links: [
+ // 配置链接对象
+ { id: "line-1", source: "1.1", target: "1.2" },
+ { id: "line-2", source: "1.2", target: "2.1" },
+ { id: "line-3", source: "2.1", target: "2.2" }
+ ]
+};
+~~~
+
+**更新日志：**
+
+- 用于 Diagram PERT 模式的 `links` 类型连接器已在 v6.1 中新增
+- `line` 对象的 `title` 属性已在 v6.0 中弃用
+
+**相关文章：** [配置线条](/lines/)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/lines/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/lines/index.md
new file mode 100644
index 000000000..699e9858a
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/lines/index.md
@@ -0,0 +1,132 @@
+---
+sidebar_label: 线条
+title: 线条
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解线条。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。
+---
+
+# 线条 {#lines}
+
+## 概述 {#overview}
+
+连接形状的线条的外观和风格由您初始化图表时所使用的模式决定：[默认](#lines-in-the-default-mode)、[组织结构图](#lines-in-the-org-chart-mode)、[思维导图](#lines-in-the-mindmap-mode) 或 [PERT](#links-in-the-pert-mode)。
+
+### 默认模式下的线条 {#lines-in-the-default-mode}
+
+在 Diagram 的默认模式下，可以按照特定流程所需的顺序，使用["straight"（默认）或 "elbow"](lines/configuration_properties.md) 线条连接各个形状，从而构成该流程的示意图。
+
+要在 Diagram/Diagram 编辑器的默认模式下为线条添加文字，请使用 [lineTitle](/line_titles/) 对象的 `text` 属性。
+
+
+
+### 组织结构图模式下的线条 {#lines-in-the-org-chart-mode}
+
+Diagram 的组织结构图模式表示一个组织结构图，其中包含按层级顺序通过["elbow" 线条](lines/configuration_properties.md)连接的一组形状。
+
+
+
+您可以通过形状对象的 `dir: "vertical"` 配置属性，为父级形状定义垂直方向的连接。
+
+### 思维导图模式下的线条 {#lines-in-the-mindmap-mode}
+
+Diagram 的思维导图模式用于渲染另一种层级图表。各个形状通过["curved" 线条](lines/configuration_properties.md)连接，并围绕中心形状排列。
+
+
+
+当您需要表示一个由子主题分支环绕的核心主题或想法时，该模式非常适用。
+
+子级形状相对于根形状的排列方式由主算法自动定义。
+如需更改子级形状的默认方向，请在初始化图表时使用 [`typeConfig`](api/diagram/typeconfig_property.md) 配置属性。
+
+### PERT 模式下的链接 {#links-in-the-pert-mode}
+
+Diagram 的 PERT 模式用于渲染任务和项目的序列以及它们之间的连接。`"task"`、`"milestone"` 和 `"project"` 类型的形状通过 [`"links"` 连接符](lines/configuration_properties.md#properties-specific-for-links-in-the-pert-mode)连接。
+
+
+
+
+## 设置形状之间的连接 {#setting-connections-between-shapes}
+
+要在 Diagram 中连接形状，您可以使用以下两种方式之一：
+
+- **使用线条对象**
+
+您需要指定单独的对象来描述形状连接的逻辑。例如：
+
+~~~jsx
+const data = [
+ // 形状
+ { id: "1", text: "Chairman & CEO" },
+ { id: "2", text: "Manager" },
+ { id: "3", text: "Technical Director" },
+ { id: "4", text: "Manager" },
+ { id: "5", text: "Technical Director" },
+ // 连接线
+ { "id": "1-2", "from": "1", "to": "2", "type": "dash" },
+ { "id": "1-3", "from": "1", "to": "3", "type": "dash" },
+ { "id": "1-4", "from": "1", "to": "4", "type": "line" },
+ { "id": "1-5", "from": "1", "to": "5", "type": "line" }
+];
+~~~
+
+线条对象中的 `type` 属性可让您为每条线单独设置类型。
+
+:::note
+请参阅[线条对象的完整配置属性列表](lines/configuration_properties.md)。
+:::
+
+- **使用 `"parent"` 属性**
+
+:::note
+此方式在 Diagram/Diagram 编辑器的默认模式下不适用。
+:::
+
+您可以在形状的配置对象中指定 `parent` 属性，并将其父级形状的 id 设置为该属性的值：
+
+~~~jsx
+const data = [
+ // 形状
+ { id: "1", text: "Chairman & CEO" },
+ { id: "2", text: "Manager", parent: "1" },
+ { id: "3", text: "Technical Director", parent: "1" },
+ { id: "4", text: "Manager", parent: "1" },
+ { id: "5", text: "Technical Director", parent: "1" }
+];
+~~~
+
+在这种情况下，所有连接线都将具有相同的类型。
+
+### 设置默认线条类型 {#setting-the-default-line-type}
+
+您可以通过图表配置对象中 [`lineConfig`](api/diagram/lineconfig_property.md) 属性的 `lineType` 参数，为图表的所有连接线设置统一的类型：
+
+~~~jsx
+const diagram = new dhx.Diagram("diagram_container", {
+ type: "default",
+ lineConfig: {
+ lineType: "dash" // "dash" | "line"
+ }
+});
+diagram.data.parse(data);
+~~~
+
+如果[线条对象](lines/configuration_properties.md)不包含 `type` 属性，则将应用 `lineType` 参数的值。
+
+### 设置线条的连接类型 {#setting-the-connection-type-of-the-line}
+
+您可以通过图表配置对象中 [`lineConfig`](api/diagram/lineconfig_property.md) 属性的 `connectType` 参数，为图表的线条指定连接类型。它提供以下类型：
+
+- `"elbow"`（Diagram 默认模式和组织结构图模式下的默认类型）
+- `"straight"`
+- `"curved"`（Diagram 思维导图模式下的默认类型）。请注意，`"curved"` 类型的连接线仅在 Diagram 思维导图模式下使用
+
+~~~jsx
+const diagram = new dhx.Diagram("diagram_container", {
+ type: "default",
+ lineConfig: {
+ connectType: "straight" // 默认模式下可选 "elbow" 或 "straight"
+ }
+});
+diagram.data.parse(data);
+~~~
+
+如果[线条对象](lines/configuration_properties.md)不包含 `connectType` 属性，则将应用 `connectType` 参数的值。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/migration.md b/i18n/zh/docusaurus-plugin-content-docs/current/migration.md
new file mode 100644
index 000000000..db632a1af
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/migration.md
@@ -0,0 +1,612 @@
+---
+sidebar_label: 迁移到新版本
+title: 迁移到新版本
+description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解迁移到新版本的相关内容，浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天试用版本。
+---
+
+# 迁移到新版本 {#migration-to-newer-versions}
+
+## 5.0 -> 6.0
+
+### Diagram Editor 结构 {#diagram-editor-structure}
+
+Diagram Editor 的主要部分已重命名：
+
+- 左侧面板 -> [Shapebar](guides/diagram_editor/shapebar.md)
+- 右侧面板 -> [Editbar](guides/diagram_editor/editbar.md) 已[提供灵活的配置](whats_new.md#new-functionality)
+
+默认的 [Toolbar](guides/diagram_editor/toolbar.md) 结构已被修改。它同样变得高度可配置，因此您也可以添加自定义 Toolbar 元素。
+
+### Diagram Editor API
+
+引入了 `view` 对象，用于配置 Diagram Editor 面板：
+
+~~~jsx
+view?: {
+ toolbar?: boolean | obj,
+ shapebar?: boolean | obj,
+ editbar?: boolean | obj
+}
+~~~
+
+请查看相关的 API 概述指南，以探索管理面板的新可能性：
+
+- [View API 概述](api/diagram_editor/view/api_overview.md)
+- [Toolbar API 概述](api/diagram_editor/toolbar/api_overview.md)
+- [Shapebar API 概述](api/diagram_editor/shapebar/api_overview.md)
+- [Editbar API 概述](api/diagram_editor/editbar/api_overview.md)
+
+#### 已弃用的方法 {#deprecated-methods}
+
+- Diagram Editor 的 `setViewMode()` 方法已弃用，不再受支持。请改用 `view` 对象的 [`show()`](api/diagram_editor/view/methods/show_method.md)/[`hide()`](api/diagram_editor/view/methods/hide_method.md) 方法。
+
+~~~jsx {4} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.setViewMode("preview"); // "preview" 或 "edit"
+~~~
+
+~~~jsx {4-5} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container");
+editor.parse(data);
+
+editor.view.hide("shapebar");
+editor.view.hide("editbar");
+~~~
+
+#### 已弃用的属性 {#deprecated-properties}
+
+- Diagram Editor 的 `reservedWidth` 属性已弃用，不再受支持。
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ reservedWidth: 150
+});
+~~~
+
+请改用以下语法：
+
+~~~jsx title="From v6.0"
+editor.diagram.config.margin.x = 40;
+~~~
+
+- Diagram Editor 的 `editMode` 属性已弃用，不再受支持。请改用 `view` 对象的相应属性（[toolbar](api/diagram_editor/toolbar/api_overview.md)、[shapebar](api/diagram_editor/shapebar/api_overview.md)、[editbar](api/diagram_editor/editbar/api_overview.md)）。
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ editMode: false
+});
+~~~
+
+~~~jsx {2-6} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ view: {
+ toolbar: false,
+ shapebar: false, // only for "default" mode
+ editbar: false
+ }
+});
+~~~
+
+- Diagram Editor 的 `controls` 属性已弃用，不再受支持。请改用 `view.toolbar` 配置的 [`items`](api/diagram_editor/toolbar/config/items_property.md) 属性。
+
+~~~jsx {2-4} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ controls: {
+ // ...
+ }
+});
+~~~
+
+~~~jsx {2-6} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ view: {
+ toolbar: {
+ items: []
+ }
+ }
+});
+~~~
+
+- Diagram Editor 的 `shapeBarWidth` 属性已弃用，不再受支持。请改用 `view.shapebar` 配置的 [`width`](api/diagram_editor/shapebar/config/width_property.md) 属性。
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeBarWidth: 190
+});
+~~~
+
+~~~jsx {3-7} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ width: 400 // 默认为 300
+ }
+ }
+});
+~~~
+
+- Diagram Editor 的 `shapeSections` 属性已弃用，不再受支持。请改用 `view.shapebar` 配置的 [`sections`](api/diagram_editor/shapebar/config/sections_property.md) 属性。
+
+~~~jsx {2-7} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ shapeSections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+});
+~~~
+
+~~~jsx {3-12} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ sections: {
+ "Swimlane": [{ swimlane: true }],
+ "Groups": [{ group: true }],
+ "Flowchart shapes": [{ flowShapes: true }],
+ "Org shapes, text, topic": [{ org: true }, "text", "topic"]
+ }
+ }
+ }
+});
+~~~
+
+- Diagram Editor 的 `gapPreview` 属性已弃用，不再受支持。请改用 `view.shapebar` 配置中 [`preview`](api/diagram_editor/shapebar/config/preview_property.md) 对象的 `gap` 属性。
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ gapPreview: 10
+});
+~~~
+
+~~~jsx {3-10} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 8
+ }
+ }
+ }
+});
+~~~
+
+- Diagram Editor 的 `scalePreview` 属性已弃用，不再受支持。请改用 `view.shapebar` 配置中 [`preview`](api/diagram_editor/shapebar/config/preview_property.md) 对象的 `scale` 属性。
+
+~~~jsx {2} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ gapPreview: 10
+});
+~~~
+
+~~~jsx {3-10} title="From v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ shapebar: {
+ preview: {
+ scale: 0.65,
+ gap: 8
+ }
+ }
+ }
+});
+~~~
+
+#### 已弃用的事件 {#deprecated-events}
+
+- 由于工具栏中已没有相应的按钮，Diagram Editor 的以下事件已弃用，不再受支持：`resetButton`、`applyButton`、`visibility`、`exportData`、`importData`、`autoLayout`。您可以改为监听 Diagram Editor 的 `toolbar` 对象的 `click` 事件：
+
+~~~jsx
+editor.toolbar.events.on("click", id => console.log(id));
+~~~
+
+:::note
+[服务元素](guides/diagram_editor/toolbar.md#service-elements)的 id 以 `$` 符号开头。
+:::
+
+- Diagram Editor 的 `changeGridStep` 事件已弃用，不再受支持。
+
+### Diagram API
+
+- [`addShape`](api/diagram/addshape_method.md) 方法的 `properties` 属性已弃用，不再使用。Editor 中 Editbar 内自定义形状的配置是通过 Editbar 面板的 [`properties`](api/diagram_editor/editbar/config/properties_property.md) 属性实现的：
+
+~~~jsx {13-16} title="Before v6.0"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default"
+});
+editor.parse(data);
+
+editor.diagram.addShape("network", {
+ template: config => (
+ `${config.title}
+- ${config.text.join("
- ")}
*该属性不适用于自定义形状。* +- `height` -（可选）形状的高度 +- `width` -（可选）形状的宽度 +- `fixed` -（可选）启用/禁用形状的移动和调整大小功能，默认值为 *false* +- `hidden` -（可选）定义形状是否隐藏 + +:::note +对于 `"text"`/`"topic"` 类型的形状，`height` 和 `width` 的值会根据形状的内容自动计算。 +::: + +## 自定义属性 {#custom-properties} + +### 用法 {#usage-1} + +~~~jsx +const data = [ + // 形状对象 + { + // ... 通用属性 + [key: string]?: any, // 自定义属性 + // ... 更多自定义属性 + }, + // 更多形状对象 +] +~~~ + +### 描述 {#description-1} + +在为自定义形状准备数据集时，您可以向形状的配置对象中添加任意自定义属性： + +- `key` -（可选）自定义形状的自定义属性。有关详细信息，请参阅[自定义形状](shapes/custom_shape.md)一文。
*请为自定义属性使用唯一的名称。禁止覆盖 Diagram 形状对象的内部属性，否则会导致 Diagram 及其编辑器运行异常。* + +### 示例 {#example} + +~~~jsx +const data = [ + { + "id": "main", + "name": "Kristin Mccoy", + "post": "Medical director", + "phone": "(405) 555-0128", + "mail": "kmccoy@gmail.com", + "photo": "../img/avatar-01.jpg" + } +]; +~~~ + +## 默认模式特有的属性 {#properties-specific-for-the-default-mode} + +### 用法 {#usage-2} + +~~~jsx +const data = [ + // 形状对象 + { + // ... 通用属性 + angle?: number, + + // 可以是 + preview?: string, + // 也可以是 + preview?: { + img?: string, + width?: number | string, + height?: number | string, + gap?: number | string, + scale?: number + } + }, + // 更多形状对象 +] +~~~ + +### 描述 {#description-2} + +在为默认模式下要加载到图表中的形状准备数据集时，您可以向形状的配置对象中添加以下属性： + +- `angle` -（可选）形状旋转的角度 +- `preview` -（可选）图像路径/base64 图像，或用于[配置编辑器 shapebar 中显示的形状预览](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes)的设置对象。作为对象时，该属性可以包含以下一组可选属性： + - `img` -（可选）图像路径或 base64 图像 + - `width` -（可选）图像的宽度 + - `height` -（可选）图像的高度 + - `gap` -（可选）为指定类型的形状设置 [preview](api/diagram_editor/shapebar/config/preview_property.md) 属性的 `gap` 特性值 + - `scale` -（可选）为指定类型的形状设置 [preview](api/diagram_editor/shapebar/config/preview_property.md) 属性的 `scale` 特性值 + :::info + `scale` 属性不能与 `img`、`width`、`height` 属性同时使用 + ::: + +### 示例 {#example-1} + +~~~jsx +const data = [ + { id: 1, x: 280, y: 0, text: "Start", type: "start", angle: 10 } +]; +~~~ + +## 组织结构图模式特有的属性 {#properties-specific-for-the-org-chart-mode} + +### 用法 {#usage-3} + +~~~jsx +const data = [ + // 形状对象 + { + // ... 通用属性 + parent?: string | number, + dx?: number, + dy?: number, + dir?: string, + open?: boolean, // 默认为 true + assistant?: boolean, + partner?: boolean, + catchItem?: boolean, + giveItem?: boolean + + }, + // 更多形状对象 +] +~~~ + +### 描述 {#description-3} + +在为组织结构图模式下要加载到图表中的形状准备数据集时，您可以向形状的配置对象中添加以下属性： + +- `parent` -（可选）父级形状的 id +- `dx` -（可选）形状的左偏移量 +- `dy` -（可选）形状的顶部偏移量 +- `dir` -（可选）形状连接的方向。如需垂直连接形状，请将该属性设置为 `"vertical"` 值 +- `open` -（可选）定义是否显示当前形状的子级项，默认值为 *true* +- `assistant` -（可选）定义该形状是否为父级形状的助理项 +- `partner` -（可选）定义该形状是否为父级形状的合作伙伴项 +- `catchItem` -（可选）定义该项是否可以捕获正在移动的项 +- `giveItem` -（可选）定义该项是否可以被移动 + +### 示例 {#example-2} + +~~~jsx +const data = [ + { + "id": "1", + "text": "item 1", + }, + { + "id": "2", + "text": "item 2", + "parent": "1", + "dir": "vertical" + }, + { + "id": "1.1", + "text": "assistant for 1", + "parent": "1", + "assistant": true + }, + { + "id": "1.2", + "text": "partner for 1", + "parent": "1", + "partner": true + } +]; +~~~ + +**相关示例：** [Diagram。组织结构图模式。嵌套垂直列表](https://snippet.dhtmlx.com/98tzmzpg) + +## 思维导图模式特有的属性 {#properties-specific-for-the-mindmap-mode} + +### 用法 {#usage-4} + +~~~jsx +const data = [ + // 形状对象 + { + // ... 通用属性 + parent?: string | number, + dx?: number, + dy?: number, + open?: boolean, // 默认为 true + openDir?:{ + left?: boolean, + right?: boolean + }, + catchItem?: boolean, + giveItem?: boolean + }, + // 更多形状对象 +] +~~~ + +### 描述 {#description-4} + +在为思维导图模式下要加载到图表中的形状准备数据集时，您可以向形状的配置对象中添加以下属性： + +- `parent` -（可选）父级形状的 id +- `dx` -（可选）形状的左偏移量 +- `dy` -（可选）形状的顶部偏移量 +- `open` -（可选）定义是否显示当前形状的子级项，默认值为 *true* +- `openDir` -（可选）显示/隐藏根形状的子级项。该对象接受两个属性： + - `left` -（可选）显示/隐藏根形状左侧的子级项 + - `right` -（可选）显示/隐藏根形状右侧的子级项 +- `catchItem` -（可选）定义该项是否可以捕获正在移动的项 +- `giveItem` -（可选）定义该项是否可以被移动 + +**相关示例：** [Diagram 编辑器。思维导图模式。情绪思维导图](https://snippet.dhtmlx.com/lo1vm0e8) + +:::info +请阅读[如何使用 DHTMLX 库创建 JavaScript 思维导图](https://dhtmlx.com/blog/create-javascript-mindmap-diagram-dhtmlx-library/)一文中的详细内容 +::: + +### 示例 {#example-3} + +~~~jsx +const data = [ + { + id: "1", + text: "main", + openDir: { + left: true, + right: false + } + }, + { + id: "2", + text: "2", + parent: "1", + giveItem: false + }, + { + id: "3", + text: "3", + parent: "1", + catchItem: false + }, + { + id: "4", + text: "4", + parent: "1" + } +]; +~~~ + +## 适用于 "text"、"topic" 和流程图形状的特有属性 {#properties-specific-for-text-topic-and-flow-chart-shapes} + +### 用法 {#usage-5} + +~~~jsx +const data = [ + // 形状对象 + { + // ... 通用属性 + fill?: string, + stroke?: string, + strokeWidth?: number, // 默认为 1 + strokeType?: "line" | "dash", // 默认为 "line" + strokeDash?: string, + fontColor?: string, + fontStyle?: "normal" | "italic" | "oblique", // 默认为 "normal" + fontWeight?: string, // 默认为 "normal" + fontSize?: number, // 默认为 14 + textAlign?: "left" | "center" | "right", // 默认为 "center" + textVerticalAlign?: "top" | "center" | "bottom", // 默认为 "center" + lineHeight?: number // 默认为 14 + }, + // 更多形状对象 +] +~~~ + +### 描述 {#description-5} + +在为 `"text"`、`"topic"` 和流程图形状准备数据集时，您可以向形状的配置对象中添加以下属性： + +- `fill` -（可选）形状的颜色 +- `stroke` -（可选）形状轮廓的颜色 +- `strokeWidth` -（可选）形状轮廓的宽度，默认为 1 +- `strokeType` -（可选）轮廓线的类型，`"line"`（默认）或用于虚线的 `"dash"` +- `strokeDash` -（可选）虚线轮廓的虚线与间隔样式 +- `fontColor` -（可选）文本字体的颜色 +- `fontStyle` -（可选）文本字体的样式，可以是 `"normal"`（默认）、`"italic"` 或 `"oblique"` +- `fontWeight` -（可选）文本字体的粗细，可选值为：`"normal"`（默认）、`"bold"`、`"bolder"`、`"lighter"`，以及 `"100"` 到 `"900"` 之间的数值，其中 `"400"` 等同于 normal，`"600"` 及以上为最粗字体 +- `fontSize` -（可选）字体大小（以像素为单位），默认为 14 +- `textAlign` -（可选）形状中文本的对齐方式：`"left"`、`"center"`（默认）、`"right"` +- `textVerticalAlign` -（可选）形状中文本的垂直对齐方式：`"top"`、`"center"`（默认）、`"bottom"` +- `lineHeight` -（可选）行高，默认为 14 + +### 示例 {#example-4} + +~~~jsx +const data = [ + { + "id": "u1585139915192", + "type": "text", + "x": 25, + "y": 280, + "text": "Investment decision", + "width": 150, + "height": 16, + "lineHeight": 14, + "fontSize": "16", + "fontColor": "rgba(0,0,0,0.70)" + } +]; +~~~ + +## 适用于 "card" 形状的特有属性 {#properties-specific-for-card-shapes} + +### 用法 {#usage-6} + +~~~jsx +const data = [ + // 形状对象 + { + // ... 通用属性 + headerColor?: string + }, + // 更多形状对象 +] +~~~ + +### 描述 {#description-6} + +在为 `"card"` 形状准备数据集时，您可以向形状的配置对象中添加以下属性： + +- `headerColor` -（可选）形状标题栏的颜色 + +### 示例 {#example-5} + +~~~jsx +const data = [ + { + "id": 1, + "type": "card", + "text": "item: 1", + }, + { + "id": 2, + "type": "card", + "text": "item: 2", + "parent": 1, + "headerColor": "#5874CD" + }, +]; +~~~ + +## 适用于 "img-card" 形状的特有属性 {#properties-specific-for-img-card-shapes} + +### 用法 {#usage-7} + +~~~jsx +const data = [ + // 形状对象 + { + // ... 通用属性 + img?: string, + title?: string, + headerColor?: string + }, + // 更多形状对象 +] +~~~ + +### 描述 {#description-7} + +在为 `"img-card"` 形状准备数据集时，您可以向形状的配置对象中添加以下属性： + +- `img` -（可选）形状的图像 +- `title` -（可选）形状的标题 +- `headerColor` -（可选）形状标题栏的颜色 + +### 示例 {#example-6} + +~~~jsx +const data = [ + { + "id": "1", + "type": "img-card", + "text": "Chairman & CEO", + "title": "Henry Bennett", + "img": "../img/avatar-01.png", + "headerColor": "" + }, + { + "id": "2", + "type": "img-card", + "text": "QA Lead", + "title": "Emma Lynch", + "img": "../img/avatar-02.png", + "parent": "1", + "headerColor": "#5874CD" + } +]; +~~~ + +## 适用于 "task" 形状的特有属性 {#properties-specific-for-task-shapes} + +### 用法 {#usage-8} + +~~~jsx +const data = [ + // 形状对象 + { + type: "task", + duration: number, + start_date: string | Date, + end_date?: string | Date, + text?: string, + parent?: string | number | null + //... 通用属性 + }, + // 更多形状对象 +] +~~~ + +### 描述 {#description-8} + +在为 `"task"` 形状准备数据集时，您可以向形状的配置对象中添加以下属性： + +- `text` -（可选）任务的描述 +- `start_date` -（必需）任务的开始日期 +- `end_date` -（可选）任务的结束日期 +- `duration` -（必需）任务的持续时间 +- `parent` -（可选）任务所属父级项目的 id + +### 示例 {#example-7} + +~~~jsx +const data = [ + { + "id": "4.2.1", + "text": "Functional Testing", + "type": "task", + "parent": "4.2", + "start_date": new Date(2026, 1, 18), + "duration": 2 + } +]; +~~~ + +## 适用于 "milestone" 形状的特有属性 {#properties-specific-for-milestone-shapes} + +### 用法 {#usage-9} + +~~~jsx +const data = [ + // 形状对象 + { + type: "milestone", + text?: string, + parent?: string | number | null + //... 通用属性 + } + // 更多形状对象 +] +~~~ + +### 描述 {#description-9} + +在为 `"milestone"` 形状准备数据集时，您可以向形状的配置对象中添加以下属性： + +- `text` -（可选）任务的描述 +- `parent` -（可选）任务所属父级项目的 id + +### 示例 {#example-8} + +~~~jsx +const data = [ + { + "id": "5.2", + "text": "Product Launch", + "type": "milestone", + "parent": "5", + "start_date": new Date(2026, 2, 1), + "duration": 1 + } +]; +~~~ + + +**相关文章：** + +- [默认形状](shapes/default_shapes.md) +- [自定义形状](shapes/custom_shape.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/shapes/custom_shape.md b/i18n/zh/docusaurus-plugin-content-docs/current/shapes/custom_shape.md new file mode 100644 index 000000000..455f991ec --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/shapes/custom_shape.md @@ -0,0 +1,80 @@ +--- +sidebar_label: 自定义形状 +title: 自定义形状 +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解自定义形状。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# 自定义形状 {#custom-shape} + +如果默认形状无法满足您的需求，您可以创建自定义形状。 + +假设您想要创建一个新的 `networkCard` 形状，用于渲染图像、文本和 IP 地址。 + + + +要实现这一点，您需要执行以下步骤： + +1\. 使用 [`addShape()`](api/diagram/addshape_method.md) 方法为您的形状添加一个唯一名称（本例中为 *"networkCard"*），并为其提供模板： + +~~~jsx +diagram.addShape("networkCard", { + template: ({ img, text, ip }) => (` +
+ :::tip + 仅当 `groupBehavior` 设置为 `"boundNoBorderExtension"` 时，`padding` 属性才可用 + ::: + +### 示例 {#example-1} + +~~~jsx +const data = [ + // 配置 swimlane + { + "id": "main", + "type": "$swimlane", + "height": 730, + "width": 1195, + "layout": [ + [1, 2, 3, 4] + ] + }, + // 配置 swimlane 的单元格 + { + "id": 1, + "type": "$sgroup", + "groupChildren": ["s1"], + "style": { + "fill": "#D4DAE4" + }, + "x": 0, + "y": 80 + }, + // 配置要放入单元格的图形 + { + "id": "s1", "type": "end", "text": "Step 1", "x": 20, "y": 110 + } +]; +~~~ + +**相关文章**：[配置 Swimlane](/swimlanes/) + +**相关示例**： + +- [Diagram。默认模式。游戏关卡与位置](https://snippet.dhtmlx.com/1h4j9gb3?tag=diagram&mode=wide) +- [Diagram。默认模式。Swimlane 模板](https://snippet.dhtmlx.com/z6x5m3gb?tag=diagram&mode=wide) +- [Diagram。默认模式。瀑布图模板](https://snippet.dhtmlx.com/k5vlvj8i?tag=diagram&mode=wide) +- [Diagram。默认模式。艾森豪威尔矩阵示例](https://snippet.dhtmlx.com/yfvccvc4?mode=wide)
详情请参阅 [如何使用 DHTMLX 构建 JavaScript 艾森豪威尔矩阵](https://dhtmlx.com/blog/build-javascript-eisenhower-matrix-dhtmlx/) 一文 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/swimlanes/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/swimlanes/index.md new file mode 100644 index 000000000..9a67d0088 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/swimlanes/index.md @@ -0,0 +1,232 @@ +--- +sidebar_label: Swimlane +title: Swimlane +description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Swimlane。浏览开发者指南和 API 参考，试用代码示例和实时演示，并下载免费的 30 天评估版 DHTMLX Diagram。 +--- + +# Swimlane {#swimlanes} + +## Swimlane 概述 {#swimlane-overview} + +swimlane 表示 Diagram 中的一个矩形元素，由垂直或水平排列的单元格（或称泳道）组成。每个单元格（*type: "$sgroup"*）都可以包含子项，例如图形或 group。 + +:::note +swimlane 仅在 Diagram/Diagram Editor 的默认模式下可用（type: `"default"`）。 +::: + + + + + +swimlane 可以帮助您从头到尾可视化任何流程（业务、制造、服务或其他类型）及其各个环节。 + +## 创建 swimlane {#creating-swimlanes} + +要创建 swimlane，您需要指定 `type: "$swimlane"`，并在准备要加载到 diagram 的数据集时，在 swimlane 对象内定义 swimlane 布局的结构： + +~~~jsx +const data = [ + // 配置 swimlane + { + type: "$swimlane", + height: 500, + width: 850, + // swimlane 的布局必须至少包含一个单元格 + layout: [ + [1] // id 为 "1"、type 为 "$sgroup" 的单元格 + ] + } +]; + +// 初始化 diagram +const diagram = new dhx.Diagram("diagram_container"); +diagram.data.parse(data); +~~~ + +上面的代码示例展示了使用默认设置（即没有标题和子标题）配置 swimlane 的最简单方式。 + +### Swimlane 结构 {#swimlane-structure} + +swimlane 的结构可以有很大不同，它通过 swimlane 对象的 [layout](swimlanes/configuration_properties.md) 配置属性进行定义。该属性允许您将 swimlane 的单元格排列成行和列。 + +您只需将一个包含矩阵的数组指定为该属性的值即可。矩阵可以是一个数组： + +~~~jsx +// 具有 3 列的 swimlane +layout: [ + [1, 2, 3] +] +~~~ + +也可以是用逗号分隔的一组数组： + +~~~jsx +// 具有 2 行 3 列的 swimlane +layout: [ + [1, 2, 3], + [4, 5, 6] +] +~~~ + +其中： + +- 布局中的每个单元格都有一个唯一的编号； +- 数组的数量决定行数（如果有多个数组，则所有数组中的单元格数量必须相等）； +- 数组中的单元格数量决定列数。 + +### Swimlane 对象的属性 {#properties-of-a-swimlane-object} + +请查看 [swimlane 对象的完整配置属性列表](swimlanes/configuration_properties.md)，以便根据您的需求创建具有不同设置的各种 swimlane。 + +## 配置 swimlane 单元格 {#configuring-a-swimlane-cell} + +当您在页面上初始化 swimlane 时，单元格的 id 及其配置都会自动生成。要更改单元格的默认配置，请创建一个单元格对象，该对象必须包含 `type: "$sgroup"` 和 `id` 属性，并在其中指定所需的配置设置： + +~~~jsx +const data = [ + // 配置 swimlane + { + type: "$swimlane", + id: "main", + height: 500, + width: 850, + layout: [ + [1, 2, 3] + ] + }, + // 配置 swimlane 单元格 + { + type: "$sgroup", + id: 3, + style: { + fill: "#D4DAE4" + } + } +]; +~~~ + +### 单元格对象的属性 {#properties-of-a-cell-object} + +请查看 [swimlane 单元格的完整配置属性列表](swimlanes/configuration_properties.md#properties-of-a-swimlane-cell)。 + +## 对单元格进行分组 {#grouping-cells} + +当您为每个单元格指定唯一编号时，所有单元格都将带边框渲染： + +~~~jsx +layout: [ + [1, 2, 3], + [4, 5, 6] +] +~~~ + + + +如果需要，您可以对一定范围内的单元格进行分组，并移除它们之间的边框。为此，请从该范围内选择任意一个单元格，并将该范围内其他单元格的唯一编号替换为所选单元格的编号。
+下面是对第一行前两个单元格进行分组的示例： + +~~~jsx +layout: [ + [1, 1, 3], + [4, 5, 6] +] +~~~ + +结果如下所示： + + + +下面是对第二列单元格进行分组的示例： + +~~~jsx +layout: [ + [1, 2, 3], + [4, 2, 6] +] +~~~ + +结果： + + + +**相关示例**：[Diagram editor。默认模式。配置 swimlane 中的列和行](https://snippet.dhtmlx.com/uzx5ulal) + +## Swimlane 及其单元格的尺寸 {#sizes-of-a-swimlane-and-its-cells} + +swimlane 的尺寸由其 `width` 和 `height` 配置属性定义。 + +~~~jsx +const data = [ + // 配置 swimlane + { + type: "$swimlane", + id: "main", + height: 500, + width: 850, + layout: [ + [1, 2, 3] + ] + } +]; +~~~ + +### 单元格宽度 {#cell-width} + +单元格的宽度取决于 swimlane 的宽度、列数，以及左/右 swimlane 标题和子标题的高度。例如： + +~~~jsx +const data = [ + { + type: "$swimlane", + id: "main", + height: 500, + width: 830, + layout: [ + // 3 列 + [1, 2, 3] + ], + header: { + position: "left", + height: 40 + }, + subHeaderRows: { + enable: true, + position: "left", + height: 40 + } + } +]; +~~~ + +每个单元格的宽度可以通过 *(830-40-40)/3 = 250* 计算得出。 + +### 单元格高度 {#cell-height} + +单元格的高度取决于 swimlane 的高度、行数，以及上/下 swimlane 标题和子标题的高度。例如： + +~~~jsx +const data = [ + { + type: "$swimlane", + id: "main", + height: 500, + width: 830, + layout: [ + // 2 行 + [1, 2, 3], + [4, 5, 6] + ], + header: { + position: "top", + height: 40 + }, + subHeaderCols: { + enable: true, + position: "top", + height: 40 + } + } +]; +~~~ + +每个单元格的高度可以通过 *(500-40-40)/2 = 210* 计算得出。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/whats_new.md b/i18n/zh/docusaurus-plugin-content-docs/current/whats_new.md new file mode 100644 index 000000000..37a79a7b7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/whats_new.md @@ -0,0 +1,696 @@ +--- +sidebar_label: 新特性 +title: 新特性 +description: 您可以在此了解 DHTMLX JavaScript Diagram 库的最新资讯。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Diagram 的免费 30 天评估版本。 +--- + +# 新特性 + +如果您正在将 Diagram 从旧版本升级，请查看 [迁移到新版本](migration.md) 了解详细信息。 + +## 版本 6.1.6 {#version-616} + +2026 年 7 月 1 日发布 + +### 修复 {#fixes} + +- Diagram。修复了在 `mindmap` 模式下通过 `ShapeCollection`（`DataCollection`）向 Diagram 加载数据时发生错误的问题 + +## 版本 6.1.5 {#version-615} + +2026 年 6 月 17 日发布 + +### 更新 {#updates} + +- Diagram Editor。改进了文本编辑体验，新增键盘快捷键：Ctrl+Enter 开始编辑，Shift+Enter 换行，Enter 确认，Escape 放弃更改 + +### 修复 {#fixes} + +- Diagram Editor。修复了穿过泳道组的线条无法被选中的问题 +- Diagram Editor。新增了将连接线拖拽到当前屏幕视图之外的形状时的自动滚动功能。 +- Diagram Editor。修复了在编辑形状文本时形状被删除的错误 +- Diagram。修复了 Safari 浏览器中具有 `backArrow: "filled"` 属性的线条渲染不正确的特定错误 + +## 版本 6.1.3 {#version-613} + +2026 年 5 月 21 日发布 + +### 更新 {#updates} + +- Diagram / Diagram Editor。改进了自动布局逻辑。通过 [`autoPlace()`](api/diagram/autoplace_method.md) Diagram 方法和 [`autoplacement`](api/diagram/autoplacement_property.md) 配置对象中新增的 `itemPadding` 和 `levelPadding` 属性，新增了控制形状与层级之间间距的能力 + +### 修复 {#fixes} + +- Diagram。修复了应用自动布局后形状之间距离不正确的问题 +- Diagram。修复了调用 [`autoPlace()`](api/diagram/autoplace_method.md) 时忽略 [`fromSide` 和 `toSide`](lines/configuration_properties.md) 连接线取值的问题，确保图表结构保持一致 +- Diagram。重构了 `Radial` 自动布局算法，修复了形状之间距离过大的问题，从而提供更紧凑的布局 + +## 版本 6.1.2 {#version-612} + +2026 年 4 月 2 日发布 + +### 修复 {#fixes} + +- Diagram Editor。修复了坐标为负数的形状创建连接线时出现的问题 +- Diagram Editor。修复了在行内文本编辑期间按下 Backspace 键会删除形状或线条标题的问题 +- Export。通过改进的清理机制和环境加固，修复了 PDF/PNG 导出中允许通过 HTML 注入进行任意本地文件访问的安全漏洞 + +## 版本 6.1.1 {#version-611} + +2026 年 2 月 5 日发布 + +### 修复 {#fixes} + +- Diagram Editor。向下和向右移动项目时无法自动滚动画布的问题 + +## 版本 6.1 {#version-61} + +2025 年 11 月 25 日发布 + +### 新功能 {#new-functionality} + +- 支持根据 Gantt 数据集创建 Diagram PERT 图： + - [新的 PERT 模式](/#diagram-in-the-pert-mode)，通过[新增类型：`"pert"`](api/diagram/type_property.md)设置 + - [新增形状类型：`"task"` 和 `"milestone"`](shapes/default_shapes.md#shapes-in-the-pert-mode) + - [新增分组类型：`"project"`](/groups/#grouping-shapes-in-the-pert-mode)（用于对任务和里程碑进行分组） +- Diagram Editor。支持在编辑器内管理键盘快捷键（热键）： + - 新增的 [`hotkeys`](api/diagram_editor/editor/config/hotkeys_property.md) 配置属性允许修改或关闭现有热键，并添加新的热键 +- Diagram Editor。支持通过一组新事件管理形状的缩放和旋转： +[`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md), +[`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md), +[`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md), +[`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md), +[`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md), +[`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md) + +### 更新 {#updates} + +- DataCollection API。针对 PERT 模式的更新： + - [`parse()`](api/data_collection/parse_method.md) 方法的第一个参数可以接受一个包含 `data` 和 `links` 数组的对象 + - [`serialize()`](api/data_collection/serialize_method.md) 方法可以返回一个包含 `data` 和 `links` 数组的对象 +- Diagram API。支持为 PERT 模式的任务形状设置日期渲染格式： + - [`typeConfig`](api/diagram/typeconfig_property.md) 配置属性新增 `dateFormat` 参数 +- Diagram/Diagram Editor API。支持定义线条的连接类型： + - Diagram 的 [`lineConfig`](api/diagram/lineconfig_property.md) 配置属性新增 `connectType` 参数 + - Diagram Editor 的 [`lineConfig`](api/diagram_editor/editor/config/lineconfig_property.md) 配置属性新增 `connectType` 参数 +- Export API。[`pdf()`](api/export/pdf_method.md) 和 [`png()`](api/export/png_method.md) 导出函数会返回数据导出的 Promise + +### 修复 {#fixes} + +- Diagram Editor。在 Safari 浏览器中悬停在形状上后出现的脚本错误 +- Diagram Editor。移除项目后出现的控制台警告 + +### 关于 [AI 集成](guides/ai-integrations/ai-demo.md)的新演示 {#new-demo-on-ai-integration} + +- [DHTMLX Diagram 组织架构图 AI 构建器](https://dhtmlx.com/docs/demo/ai-org-chart-builder/) + + +### 新增示例 {#new-samples} + +- [Diagram。PERT 图。初始化](https://snippet.dhtmlx.com/4h5fi7xd) +- [Diagram 与 Gantt。PERT 图。初始化](https://snippet.dhtmlx.com/409jj9uh) +- [Diagram 与 Gantt。PERT 图。完整集成](https://snippet.dhtmlx.com/gcnx4a9h) +- [Diagram 与 Gantt。PERT 图。弹出窗口](https://snippet.dhtmlx.com/fvfysbdb) +- [Diagram 与 Gantt。PERT 图。自定义形状和样式（自定义 CSS）](https://snippet.dhtmlx.com/mtk92awx) +- [Diagram。PERT 图。不同数据集](https://snippet.dhtmlx.com/2j2y8vy6) +- [Diagram。PERT 图。筛选/搜索任务](https://snippet.dhtmlx.com/1b2bmmxk) +- [Diagram。PERT 图。用于任务信息的自定义侧边栏](https://snippet.dhtmlx.com/712lsox0) +- [Diagram。PERT 图。主题](https://snippet.dhtmlx.com/2e5y5u6m) +- [Diagram。导出。左下角水印](https://snippet.dhtmlx.com/d56spdsc) +- [Diagram。导出。重复水印](https://snippet.dhtmlx.com/emkea55j) +- [Diagram。交互式电气原理图](https://snippet.dhtmlx.com/cisyixkq) +- [Diagram Editor。通过事件管理形状的移动、旋转和缩放](https://snippet.dhtmlx.com/qldjbbm7) +- [Diagram Editor。通过 API 管理热键的添加、修改和禁用](https://snippet.dhtmlx.com/8ads5dq8) +- [Diagram Editor。鱼骨图。原因与解决方案](https://snippet.dhtmlx.com/7vhwtiba) +- [Diagram Editor。鱼骨图。多重原因](https://snippet.dhtmlx.com/0dgjwt6u) + + +## 版本 6.0.11 {#version-6011} + +2025 年 6 月 18 日发布 + +### 修复 {#fixes} + +- Diagram Editor。缩放时形状移动不正确的问题 + +## 版本 6.0.10 {#version-6010} + +2025 年 3 月 10 日发布 + +### 修复 {#fixes} + +- Diagram。编辑线条宽度时调整线条形状箭头大小的问题 + +## 版本 6.0.9 {#version-609} + +2025 年 2 月 4 日发布 + +### 修复 {#fixes} + +- Diagram Editor。移动包含项目的分组以及将项目移入/移出分组时出现的问题 +- Diagram。选中形状时不会触发 `itemMouseOver` 和 `itemMouseOut` 事件的问题 + +## 版本 6.0.8 {#version-608} + +2024 年 12 月 5 日发布 + +- 将本地试用包导入框架时出现的问题 + +## 版本 6.0.7 {#version-607} + +2024 年 11 月 27 日发布 + +- Diagram Editor。使用 Editbar 编辑形状时发生错误的问题 +- Diagram Editor。行内编辑导航过程中形状移动的问题 + +## 版本 6.0.4 {#version-604} + +2024 年 10 月 1 日发布 + +### 修复 {#fixes} + +- Diagram Editor。调用 `destructor()` 方法会抛出错误的问题 + +## 版本 6.0.3 {#version-603} + +2024 年 8 月 28 日发布 + +### 修复 {#fixes} + +- Diagram Editor。为 Editbar 的 `calendar`、`combobox`、`colorpicker`、`form`、`timepicker` 应用不同语言环境的问题 +- Diagram Editor。将 Diagram Editor 添加到 Layout 单元格中的问题 +- Diagram Editor。`default` 模式下 `shapeToolbar` 属性并非可选的问题 +- Diagram Editor。自定义形状包含预览图片时悬停行为不正确的问题 + + +## 版本 6.0.2 {#version-602} + +2024 年 7 月 16 日发布 + +### 修复 {#fixes} + +- Diagram。自动布局。形状隐藏在另一个形状下方的问题 + +## 版本 6.0.1 {#version-601} + +2024 年 6 月 24 日发布 + +### 修复 {#fixes} + +- Diagram Editor。内存泄漏问题 +- Diagram Editor。通过 Toolbar 点击垂直和水平分布时出现脚本错误的问题 +- Diagram。调用 [`getSubHeaderCellId()`](api/cell_manager/getsubheadercellid_method.md) 方法时的类型问题 + +## 版本 6.0 {#version-60} + +2024 年 5 月 16 日发布 + +### 重大变更 {#breaking-changes} + +此次更新对 Diagram 和 Diagram Editor 的结构和功能进行了重大调整。请查看 [迁移文章](migration.md#50---60) 以跟上最新版本的步伐。 + +### 新功能 {#new-functionality} + +- 重构 Diagram Editor：通过 [`view`](api/diagram_editor/editor/config/view_property.md) 属性提供与其各部分交互并管理其可见性的能力，该属性包含以下配置： + - [Toolbar](guides/diagram_editor/toolbar.md) - Diagram Editor 的顶部部分，帮助用户控制编辑过程（参见 [API 概述](api/diagram_editor/toolbar/api_overview.md)） + - [Shapebar](guides/diagram_editor/shapebar.md) - （原 Left panel）Diagram Editor 中用于渲染 Diagram 项目预览的部分（参见 [API 概述](api/diagram_editor/shapebar/api_overview.md)） + - [Editbar](guides/diagram_editor/editbar.md) - （原 Right panel）Diagram Editor 中允许用户编辑 Diagram 项目的部分（参见 [API 概述](api/diagram_editor/editbar/api_overview.md)）。您可以执行以下操作： + - 使用预定义的 [Basic controls](api/diagram_editor/editbar/basic_controls_overview.md) 和 [Complex controls](api/diagram_editor/editbar/complex_controls_overview.md) 集合 + - 根据给定条件调整 [Basic controls](api/diagram_editor/editbar/basic_controls_overview.md) 和 [Complex controls](api/diagram_editor/editbar/complex_controls_overview.md) 的配置 + - 根据给定条件动态管理 Editbar 面板（[示例](https://snippet.dhtmlx.com/ealq0m4l?mode=wide)） + - 创建自定义控件（[示例](https://snippet.dhtmlx.com/1p0wemnn?mode=wide)） + - 创建 HTML 内容（[示例](https://snippet.dhtmlx.com/vcnt647v?mode=wide)） +- Diagram Editor。新增 [Copy manager API](api/diagram_editor/copymanager/api_overview.md) +- Diagram Editor。支持显示/隐藏 [Shapebar](api/diagram_editor/shapebar/config/show_property.md)、[Editbar](guides/diagram_editor/editbar.md) 和 [Toolbar](guides/diagram_editor/toolbar.md) +- Diagram Editor。新增 [destructor()](api/diagram_editor/editor/methods/destructor_method.md) 方法 +- Diagram Editor。支持[隐藏连接点](api/diagram_editor/editor/config/connectionpoints_property.md) +- Diagram Editor。支持[隐藏调整大小的控制点](api/diagram_editor/editor/config/resizepoints_property.md) +- Diagram Editor。支持[隐藏网格](api/diagram_editor/editor/config/grid_property.md) +- 升级 [Selection API](/api/selection/)，支持多选功能 +- 线条标题现在被声明为独立对象，通过 [`lineTitles`](/line_titles/) 定义，并拥有各自的[配置属性](line_titles/configuration_properties.md) +- [支持新主题](../category/themes/)：Dark、Light High Contrast 和 Dark High Contrast（[示例](https://snippet.dhtmlx.com/9twmlfus)） +- Diagram Editor。支持通过重新定义 CSS 变量并使用自定义变量来自定义 [Shapebar 项目的配色方案](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar) + +### 更新 {#updates} + +- Diagram Editor。更新了 [Locales](guides/localization.md) +- Diagram Editor。扩展了 [Hotkeys](guides/diagram_editor/hot_keys.md) 列表 +- Diagram Editor。改进了 Shapebar 项目被拖到网格时的行为及其外观 +- Diagram Editor。[`zoomIn`](api/diagram_editor/editor/events/zoomin_event.md) / [`zoomOut`](api/diagram_editor/editor/events/zoomout_event.md) 事件的回调函数会附带 `step` 参数被调用 +- Diagram Editor。扩展了 [`magnetic`](api/diagram_editor/editor/config/magnetic_property.md) 配置选项的功能 +- Diagram Editor。更新了 Editor 对象的移动[事件](api/diagram_editor/editor/events/overview.md)： +[`afterGroupMove`](api/diagram_editor/editor/events/aftergroupmove_event.md), +[`afterItemCatch`](api/diagram_editor/editor/events/afteritemcatch_event.md), +[`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md), +[`afterLineTitleMove`](api/diagram_editor/editor/events/afterlinetitlemove_event.md), +[`afterShapeMove`](api/diagram_editor/editor/events/aftershapemove_event.md), +[`beforeGroupMove`](api/diagram_editor/editor/events/beforegroupmove_event.md), +[`beforeItemCatch`](api/diagram_editor/editor/events/beforeitemcatch_event.md), +[`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md), +[`beforeLineTitleMove`](api/diagram_editor/editor/events/beforelinetitlemove_event.md), +[`beforeShapeMove`](api/diagram_editor/editor/events/beforeshapemove_event.md), +[`groupMoveEnd`](api/diagram_editor/editor/events/groupmoveend_event.md), +[`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md), +[`itemTarget`](api/diagram_editor/editor/events/itemtarget_event.md), +[`lineTitleMoveEnd`](api/diagram_editor/editor/events/linetitlemoveend_event.md), +[`shapeMoveEnd`](api/diagram_editor/editor/events/shapemoveend_event.md) +- 支持[通过 DataCollection API 处理线条标题](/line_titles/#working-with-line-titles) + +### 弃用的 API {#deprecated-api} + +- #### 属性 + + - Diagram Editor 的 `controls` 属性已弃用，不再支持 + - Diagram Editor 的 `editMode` 属性已弃用，不再支持 + - Diagram Editor 的 `gapPreview` 属性已弃用，不再支持 + - Diagram Editor 的 `reservedWidth` 属性已弃用，不再支持 + - Diagram Editor 的 `scalePreview` 属性已弃用，不再支持 + - Diagram Editor 的 `shapeBarWidth` 属性已弃用，不再支持 + - Diagram Editor 的 `shapeSections` 属性已弃用，不再支持 + - [Line](lines/configuration_properties.md) 数据的 `title` 属性已弃用，不再支持 + +- #### 方法 + + - Diagram 的 Selection 对象的 `getId()` 方法已弃用，不再支持 + - Diagram 的 Selection 对象的 `getSubId()` 方法已弃用，不再支持 + - Diagram Editor 的 `setViewMode()` 方法已弃用，不再支持 + +- #### 事件 + + - 由于工具栏中没有对应的按钮，Diagram Editor 的以下事件已弃用，不再支持：`resetButton`、`applyButton`、`visibility`、`exportData`、`importData`、`autoLayout` + - Diagram Editor 的 `changeGridStep` 事件已弃用，不再支持 + +### 修复 {#fixes} + +- Diagram Editor。修复了数据导入后第二次点击 "Import data" 按钮且未选择文件时导致控制台错误的问题 +- Diagram Editor。修复了新形状添加被阻止的问题 +- Diagram Editor。修复了手动选择元素时线条复制的问题 +- Diagram Editor。修复了在 `mindmap`/`org` 模式下根形状靠近子形状时的拖拽问题 +- Diagram Editor。修复了选择形状时需要按住 Shift 键额外点击一次的选择行为不正确的问题 +- Diagram Editor。修复了分组和泳道无法一起移动的问题 +- Diagram Editor。修复了移除未使用的线条/连接线的问题 +- Diagram Editor。修复了将不同父级的项目移动到目标项目的能力问题（适用于 `org`/`mindmap` 模式） +- Diagram Editor。修复了为 Shapebar 元素设置默认值的能力问题 +- Diagram Editor。修复了将移动的项目悬停在任意形状上方时连接线外观的问题 +- Diagram Editor。修复了在 `mindmap`/`org` 模式下无法通过菜单移除选中项目的问题 +- Diagram Editor。修复了数据导入只能生效一次的问题 +- Diagram Editor。提升了连接线移动过程中的性能 +- Diagram Editor。限制了 `historyManager` 中连接线移动过程中的操作记录 +- Diagram Editor。优化了查找最近连接线的逻辑 +- 修复了复杂控件的本地化问题 + +## 版本 5.0.3 {#version-503} + +2023 年 7 月 12 日发布 + +### 修复 {#fixes} + +- 修复了数据解析后调用 [autoPlace()](api/diagram/autoplace_method.md) 方法导致错误的问题 + +## 版本 5.0.2 {#version-502} + +2023 年 5 月 30 日发布 + +### 修复 {#fixes} + +- Diagram Editor。修复了多选移动时自定义点不移动的问题 +- Diagram Editor。修复了无法将形状连接到自身的问题 +- 修复了在没有 [exportStyles](api/diagram/exportstyles_property.md) 的情况下导出默认图表的问题 +- 修复了 promiz.js 库在导入源文件时导致 setImmediate() 方法定义出错的问题 +- 修复了 Export 对象中 URL 路径构建的问题 +- 新增了导出的类型定义 + +## 版本 5.0.1 {#version-501} + +2023 年 1 月 19 日发布 + +### 修复 {#fixes} + +- Diagram Editor。修复了导出数据后重新加载时线条不总是绘制在正确位置的问题 + - 现在可以在默认模式下为线条定义坐标（线条对象新增 [`points`](lines/configuration_properties.md#properties-specific-for-the-default-mode) 属性） +- Diagram Editor。修复了更改缩放级别后在网格中拖拽形状的问题 +- 修复了在没有形状的情况下点击 "Auto layout" 按钮引发错误的问题 +- 修复了通过编辑器创建线条后 [默认设置](api/diagram/defaults_property.md) 显示的问题 +- 修复了在 `"radial"` 模式下自动布局形状时出现的 Diagram/Diagram Editor 缩放问题 + +## 版本 5.0 {#version-50} + +2022 年 9 月 7 日发布 + +在博客上查看版本评测 + +### 重大变更 {#breaking-changes} + +新版本对 `lineGap` 属性进行了一些更改。请查看 [迁移文章](migration.md#42---50) 以跟上最新版本的步伐。 + +### 新功能 {#new-functionality} + +#### Diagram {#diagram} + +- [形状自动布局](guides/diagram/configuration.md#configuring-autoplacement-for-shapes)的 Radial 算法： + - [`autoplacement`](api/diagram/autoplacement_property.md) 属性新增 `placemode` 参数 + - [`autoPlace()`](api/diagram/autoplace_method.md) 方法新增 `placemode` 参数 +- 支持为工具栏图标设置提示信息： + - 图标对象的 `tooltip` 参数已添加到 [`toolbar`](api/diagram/toolbar_property.md) 属性中 + +#### Diagram Editor {#diagram-editor} + +- 形状自动布局的 Radial 算法： + - [`autoplacement`](api/diagram_editor/editor/config/autoplacement_property.md) 属性新增 `placemode` 参数 + - [Toolbar](guides/diagram_editor/toolbar.md) 的 **Auto Layout** 按钮现在为形状自动布局提供两个选项：*Orthogonal* 和 *Radial* +- 用于在网格区域中更精确地排列形状的[对齐辅助线](guides/diagram_editor/grid_area.md#enablingdisabling-snap-lines) +- 支持通过新增的 [`magnetic`](api/diagram_editor/editor/config/magnetic_property.md) 属性配置对齐辅助线 +- 支持通过 Alt（Option）+ Ctrl（Cmd）+ С => Alt（Option）+ Ctrl（Cmd）+ V 复制和粘贴一个或多个项目的样式（参见 **[示例](https://snippet.dhtmlx.com/klgvu3jq)**） +- 支持[对齐和分布多个项目](guides/diagram_editor/grid_area.md#aligning-multiple-items) +- 现在，当您悬停在项目个人工具栏中的控件上时会显示提示信息 +- 扩展了[语言选项](guides/localization.md)列表，以支持单项工具栏中提示信息的本地化 +- 支持为[自定义工具栏图标](guides/diagram_editor/grid_area.md#configuring-the-toolbar-of-an-item)设置提示信息： + - 图标对象的 `tooltip` 参数已添加到 [`shapeToolbar`](api/diagram_editor/editor/config/shapetoolbar_property.md) 属性中 +- 改进了 [Grid area](guides/diagram_editor/grid_area.md) 的设计。现在网格区域中点之间的距离取决于网格步长的值 + +### 修复 {#fixes} + +- 修复了加载文件后 Editor 右侧面板的加载图标未消失的问题 + +## 版本 4.2 {#version-42} + +2022 年 3 月 3 日发布 + +在博客上查看版本评测 + +### 新功能 {#new-functionality} + +- [触控支持](guides/touch_support.md) +- 支持通过 Diagram 的 [`lineConfig`](api/diagram/lineconfig_property.md) 属性指定线条的默认设置 +- 支持通过 Diagram Editor 的 [`lineConfig`](api/diagram_editor/editor/config/lineconfig_property.md) 属性指定编辑器中新建线条的默认设置 +- 支持在[配置编辑器左侧面板的分区](guides/diagram_editor/shapebar.md#custom-sections)时按所需顺序添加组织架构图形状、分组、泳道的默认集合 + +### 更新 {#updates} + +- Diagram 的 `defaultLinkType` 属性已弃用。请查看[迁移](migration.md#41---42)文章 +- Diagram Editor 的 `shapeSections` 属性已更新。请查看[迁移](migration.md#41---42)文章 +- 现在不仅可以为特定类型的形状定义默认配置，也可以为线条定义默认配置： + - Diagram 的 [`defaults`](api/diagram/defaults_property.md) 属性已更新 + - Diagram Editor 的 [`defaults`](api/diagram_editor/editor/config/defaults_property.md) 属性已更新 +- 更新了[形状连接模式](api/diagram/autoplace_method.md#modes-of-connecting-shapes)的文档 + +## 版本 4.1 {#version-41} + +2021 年 12 月 7 日发布 + +在博客上查看版本评测 + +### 新功能 {#new-functionality} + +- 支持在组织架构图模式中添加[伙伴形状](/#assistant-and-partner-shapes) +- 支持在组织架构图模式中添加[助理形状](/#assistant-and-partner-shapes) +- 支持在默认模式中为[线条添加标题](/#line-titles) +- 支持在组织架构图和思维导图模式的 Editor 中将[形状从一个父级拖放到另一个父级](editor_overview.md#editor-in-the-org-chart-mode)。形状会与其子项目一起被拖动 +- 支持在组织架构图和思维导图模式的 Editor 中[为目标项目设置样式](guides/customization.md#styling-target-shapes) + +### API {#api} + +- Diagram 对象的新事件：[`emptyAreaDblClick`](api/diagram/emptyareadblclick_event.md)、[`emptyAreaMouseDown`](api/diagram/emptyareamousedown_event.md)、[`lineTitleClick`](api/diagram/linetitleclick_event.md)、[`lineTitleDblClick`](api/diagram/linetitledblclick_event.md)、[`lineTitleMouseDown`](api/diagram/linetitlemousedown_event.md) +- 针对组织架构图模式的新增[形状属性](shapes/configuration_properties.md#properties-specific-for-the-org-chart-mode)：`assistant`、`partner`、`catchItem`、`giveItem` +- 针对思维导图模式的新增[形状属性](shapes/configuration_properties.md#properties-specific-for-the-mindmap-mode)：`catchItem`、`giveItem` +- 针对默认模式的新增[线条属性](lines/configuration_properties.md#properties-specific-for-the-default-mode)：`title` +- Editor 对象的新方法：`setViewMode()`、`zoomIn()`、`zoomOut()` +- Editor 对象的新事件：[`beforeLineTitleMove`](api/diagram_editor/editor/events/beforelinetitlemove_event.md)、[`afterLineTitleMove`](api/diagram_editor/editor/events/afterlinetitlemove_event.md)、[`lineTitleMoveEnd`](api/diagram_editor/editor/events/linetitlemoveend_event.md)、[`itemTarget`](api/diagram_editor/editor/events/itemtarget_event.md)、[`beforeItemCatch`](api/diagram_editor/editor/events/beforeitemcatch_event.md)、[`afterItemCatch`](api/diagram_editor/editor/events/afteritemcatch_event.md) +- Editor 对象的新属性：[`itemsDraggable`](api/diagram_editor/editor/config/itemsdraggable_property.md) +- HistoryManager 的新方法：[`add()`](api/diagram_editor/historymanager/methods/add_method.md)、[`disable()`](api/diagram_editor/historymanager/methods/disable_method.md)、[`enable()`](api/diagram_editor/historymanager/methods/enable_method.md)、[`isRedo()`](api/diagram_editor/historymanager/methods/isredo_method.md)、[`redo()`](api/diagram_editor/historymanager/methods/redo_method.md)、[`reset()`](api/diagram_editor/historymanager/methods/reset_method.md)、[`undo()`](api/diagram_editor/historymanager/methods/undo_method.md) +- HistoryManager 的新属性：`disabled`、[`saveDelay`](api/diagram_editor/historymanager/config/savedelay_property.md) +- Selection 的新方法：`getSubId()` + +### 更新 {#updates} + +- 更新了 [InlineEditor](/api/inline_editor/) 的事件：*subHeaderId* 参数已更改为 *subId* +- 更新了 [Selection API](/api/selection/#events) 的事件：新增了 *subId* 参数 +- 默认模式下形状的默认类型已更改为 [*"rectangle"*](shapes/configuration_properties.md#common-properties) + +### 修复 {#fixes} + +- 提升了所有类型图表的性能 +- 修复了 Editor 的 Toolbar 中 *undo/redo* 按钮工作不正确的问题 + +## 版本 4.0.1 {#version-401} + +2021 年 9 月 16 日发布 + +### 修复 {#fixes} + +- 修复了旋转形状时连接线的显示问题 +- 修复了图表压缩样式的问题 +- 修复了在组织架构图/思维导图模式下向 Diagram Editor 中添加新项目时算法工作不正确的问题 +- 修复了编辑器右侧面板在处理文本样式时工作不正确的问题 + +## 版本 4.0 {#version-40} + +2021 年 9 月 7 日发布 + +在博客上查看版本评测 + +### 新功能 {#new-functionality} + +- 新增图表项目：[Groups](/groups/)、[Swimlanes](/swimlanes/) +- 在 Diagram Editor 左侧面板中新增分区：[Groups、Swimlanes](guides/diagram_editor/shapebar.md#default-sections) +- [在编辑器右侧面板中为 Groups、Swimlanes 新增侧边栏选项](guides/diagram_editor/editbar.md) +- 支持通过 UI 编辑 [Groups](guides/diagram_editor/grid_area.md#managing-groups) 和 [Swimlanes](guides/diagram_editor/grid_area.md#managing-swimlanes) +- 扩展了[语言选项](guides/localization.md)列表 +- 支持通过 [CellManager API](/api/cell_manager/) 操作泳道单元格 +- 支持通过双击项目来编辑其文本 +- 新增 [DHTMLX Diagram 与 Angular](guides/integrations/angular_integration.md) 演示 +- 新增 [DHTMLX Diagram 与 React](guides/integrations/react_integration.md) 演示 +- 新增 [DHTMLX Diagram 与 Vue.js](guides/integrations/vue_integration.md) 演示 +- 支持[在编辑器左侧面板中添加具有不同样式和设置的相同项目](guides/diagram_editor/shapebar.md) + +### API {#api} + +- 新增 [CellManager API](/api/cell_manager/) 方法：[add()](api/cell_manager/add_method.md)、[getCellId()](api/cell_manager/getcellid_method.md)、[getCellIndex()](api/cell_manager/getcellindex_method.md)、[getSubHeaderCellId()](api/cell_manager/getsubheadercellid_method.md)、[getSubHeaderCellIndex()](api/cell_manager/getsubheadercellindex_method.md)、[getSubHeaderType()](api/cell_manager/getsubheadertype_method.md)、[move()](api/cell_manager/move_method.md)、[remove()](api/cell_manager/remove_method.md)、[resetSwimlane()](api/cell_manager/resetswimlane_method.md)、[setSwimlane()](api/cell_manager/setswimlane_method.md)、[validation()](api/cell_manager/validation_method.md) +- 新增 [CellManager API](/api/cell_manager/) 事件：[afterCellsAdd](api/cell_manager/aftercellsadd_event.md)、[afterCellsMove](api/cell_manager/aftercellsmove_event.md)、[afterCellsRemove](api/cell_manager/aftercellsremove_event.md)、[afterCellsValidation](api/cell_manager/aftercellsvalidation_event.md)、[beforeCellsAdd](api/cell_manager/beforecellsadd_event.md)、[beforeCellsMove](api/cell_manager/beforecellsmove_event.md)、[beforeCellsRemove](api/cell_manager/beforecellsremove_event.md)、[beforeCellsValidation](api/cell_manager/beforecellsvalidation_event.md) +- Diagram 对象的新事件：[afterSubmenuOpen](api/diagram/aftersubmenuopen_event.md)、[beforeSubmenuOpen](api/diagram/beforesubmenuopen_event.md)、[groupClick](api/diagram/groupclick_event.md)、[groupDblClick](api/diagram/groupdblclick_event.md)、[groupHeaderClick](api/diagram/groupheaderclick_event.md)、[groupHeaderDblClick](api/diagram/groupheaderdblclick_event.md)、[groupMouseDown](api/diagram/groupmousedown_event.md)、[itemClick](api/diagram/itemclick_event.md)、[itemDblClick](api/diagram/itemdblclick_event.md)、[itemMouseDown](api/diagram/itemmousedown_event.md)、[itemMouseOut](api/diagram/itemmouseout_event.md)、[itemMouseOver](api/diagram/itemmouseover_event.md)、[lineDblClick](api/diagram/linedblclick_event.md)、[lineMouseDown](api/diagram/linemousedown_event.md) +- Editor 对象的新事件：[shapeMoveEnd](api/diagram_editor/editor/events/shapemoveend_event.md)、[beforeItemMove](api/diagram_editor/editor/events/beforeitemmove_event.md)、[afterItemMove](api/diagram_editor/editor/events/afteritemmove_event.md)、[itemMoveEnd](api/diagram_editor/editor/events/itemmoveend_event.md)、[beforeGroupMove](api/diagram_editor/editor/events/beforegroupmove_event.md)、[afterGroupMove](api/diagram_editor/editor/events/aftergroupmove_event.md)、[groupMoveEnd](api/diagram_editor/editor/events/groupmoveend_event.md) +- DataCollection 的新方法：[eachChild()](api/data_collection/eachchild_method.md)、[eachParent()](api/data_collection/eachparent_method.md)、[getRoot()](api/data_collection/getroot_method.md)、[getRoots()](api/data_collection/getroots_method.md) +- InlineEditor 的新事件：[afterEditorClose](api/inline_editor/aftereditorclose_event.md)、[afterEditorEditing](api/inline_editor/aftereditorediting_event.md)、[afterEditorOpen](api/inline_editor/aftereditoropen_event.md)、[beforeEditorClose](api/inline_editor/beforeeditorclose_event.md)、[beforeEditorEditing](api/inline_editor/beforeeditorediting_event.md)、[beforeEditorOpen](api/inline_editor/beforeeditoropen_event.md) +- [形状对象](shapes/configuration_properties.md)新增 "editable" 和 "fixed" 配置属性 + +### 更新 {#updates} + +- 改进了键盘导航 +- 重新设计了形状 +- 更新了 Editor 对象的事件：[beforeShapeMove](api/diagram_editor/editor/events/beforeshapemove_event.md) 和 [afterShapeMove](api/diagram_editor/editor/events/aftershapemove_event.md) +- 升级了 Shape Collection API 的结构 + +### 修复 {#fixes} + +- 修复了编辑器中 TypeScript 类型定义工作不正确的问题 +- 修复了在 HTML 表单内按下编辑器工具栏按钮会触发表单提交的问题 +- 现在只有当元素的旋转角度为 0 或 360 度时才能调整其大小。 +- 大幅优化了 Diagram 的样式 + +## 版本 3.1 {#version-31} + +2021 年 4 月 15 日发布 + +### 新功能 {#new-functionality} + +- [TypeScript 支持](guides/using_typescript.md) +- DHTMLX Diagram 新增思维导图模式（[type:"mindmap"](api/diagram/type_property.md)） +- 支持通过图表对象的 [typeConfig](api/diagram/typeconfig_property.md) 配置属性[配置 Diagram 思维导图模式中子形状相对于根形状的方向](guides/diagram/configuration.md#arranging-shapes-in-the-mindmap-mode-of-diagram) +- 支持通过 [addShape()](api/diagram/addshape_method.md) 方法的 "eventHandlers" 属性[为自定义形状添加自定义事件处理程序](shapes/custom_shape.md#event-handlers-for-custom-shapes) +- 支持通过 Editor 对象的 [shapeToolbar](api/diagram_editor/editor/config/shapetoolbar_property.md) 属性自定义[网格区域](guides/diagram_editor/grid_area.md)中用于编辑项目的个人工具栏 +- Editor 对象的新事件：[BeforeShapeIconClick](api/diagram_editor/editor/events/beforeshapeiconclick_event.md) 和 [AfterShapeIconClick](api/diagram_editor/editor/events/aftershapeiconclick_event.md)、[BeforeShapeMove](api/diagram_editor/editor/events/beforeshapemove_event.md) 和 [AfterShapeMove](api/diagram_editor/editor/events/aftershapeiconclick_event.md) +- 支持通过图表对象的 [exportStyles](api/diagram/exportstyles_property.md) 配置选项取消向导出服务发送 CSS 样式 + +### 更新 {#updates} + +- 更新了图表对象的 [type](api/diagram/type_property.md) 配置属性：新增了 "default" 和 "mindmap" 取值 +- 更新了 [collapseItem()](api/diagram/collapseitem_method.md) 和 [expandItem()](api/diagram/expanditem_method.md) 方法：新增了第二个参数 "dir" +- 更新了 [beforeCollapse](api/diagram/beforecollapse_event.md)、[afterCollapse](api/diagram/aftercollapse_event.md)、[beforeExpand](api/diagram/beforeexpand_event.md) 和 [afterExpand](api/diagram/afterexpand_event.md) 事件：新增了第二个参数 "dir" + +### 修复 {#fixes} + +- 修复了 DHTMLX Diagram 所有类型的选择模块的问题 +- 修复了在默认模式下初始化的图表中，对已缩放的图表应用 "showItem()" 方法时滚动出现的问题 +- 修复了 DOM Parser 处理 HTML 模板工作不正确的问题 +- 修复了折叠任意子形状后根形状也被折叠的问题 +- 修复了形状文本格式设置的问题 +- 修复了在编辑器右侧面板的文本域字段中添加长文本后出现的问题 +- 修复了向自定义形状文本添加特殊字符的问题 +- 修复了自定义形状在控制台中显示警告的问题 +- 修复了在编辑器中删除根形状后抛出脚本错误的问题 +- 修复了编辑器未配置时，在编辑器中应用 "Auto Layout" 按钮后控制台显示错误的问题 +- 修复了在编辑器默认模式下更改形状轮廓类型后未生效的问题 +- 修复了在默认模式下初始化的编辑器中，右侧面板跟踪形状参数的问题 +- 修复了在编辑器默认模式下移除形状焦点的问题 +- 修复了在默认模式下初始化编辑器时，按所需顺序在形状之间设置连接线的问题 +- 修复了编辑器组织架构图模式下 Ctrl+A 组合键工作不正确的问题 +- 修复了复制已连接的形状后，粘贴的形状没有连接线的问题 +- 现在，当编辑器以组织架构图模式初始化时，无法再通过键盘导航从编辑器中移除根形状 + +## 版本 3.0.4 {#version-304} + +2021 年 1 月 27 日发布 + +### 修复 {#fixes} + +- 修复了在默认模式下初始化的 Editor 中，处理页面上的输入框时选中形状行为不正确的问题 +- 修复了折叠/展开的项目与其父级不同步工作的问题 +- 修复了子项目隐藏时 [showItem()](api/diagram/showitem_method.md) 方法工作不正确的问题 + +## 版本 3.0.3 {#version-303} + +2020 年 12 月 23 日发布 + +### 修复 {#fixes} + +- 修复了 Diagram 导出服务的问题 + +## 版本 3.0.2 {#version-302} + +2020 年 7 月 14 日发布 + +### 修复 {#fixes} + +- 修复了在以组织架构图模式初始化的 Editor 中从 JSON 导入数据的问题 +- 修复了配置编辑器右侧面板时 [addShape()](api/diagram/addshape_method.md) 方法工作不正确的问题 +- 改进了 Editor 工具栏中 historyManager 控件的行为 + +## 版本 3.0.1 {#version-301} + +2020 年 5 月 29 日发布 + +### 修复 {#fixes} + +- 修复了 [autoPlace()](api/diagram/autoplace_method.md) 方法的问题 +- 修复了 PNG/PDF 导出模块的问题 + +## 版本 3.0 {#version-30} + +2020 年 5 月 12 日发布 + +### 重大变更 {#breaking-changes} + +新版本引入了一些更改和改进。请查看[迁移](migration.md#22---30)文章以跟上最新版本的步伐。 + +### 新功能 {#new-functionality} + +- 新增 [autoPlace()](api/diagram/autoplace_method.md) 方法和 [autoplacement](api/diagram/autoplacement_property.md) 属性，用于在层级结构中[自动排列已连接的形状](guides/manipulating_items.md#arranging-shapes-automatically) +- 支持在初始化 [Diagram](api/diagram/defaults_property.md) 或 [Diagram Editor](api/diagram_editor/editor/config/defaults_property.md) 时通过 `defaults` 属性[设置形状的默认配置](guides/diagram/configuration.md#setting-the-default-configuration-of-a-shape) +- 新增 [addShape()](api/diagram/addshape_method.md) 方法，用于在 Diagram 和 Diagram Editor 中[创建自定义形状](shapes/custom_shape.md) +- Editor 对象的新属性：`controls`、[defaults](api/diagram_editor/editor/config/defaults_property.md)、`shapeSections`、`shapeBarWidth`、`scalePreview`、[scale](api/diagram_editor/editor/config/scale_property.md)、`gapPreview` +- 在 [Editor 右侧面板](guides/diagram_editor/editbar.md)中新增 *Grid Step* 侧边栏选项 +- 支持通过 Editor 对象的 `controls` 属性显示/隐藏 Editor 的任意工具栏按钮以及 *Grid Step* 侧边栏选项 +- 支持通过 [addShape()](api/diagram/addshape_method.md) 方法的 `properties` 属性[在编辑器右侧面板中配置用于编辑自定义形状属性的侧边栏选项](guides/diagram_editor/editbar.md) +- [支持自定义 Editor 左侧面板中的分区](guides/diagram_editor/shapebar.md#custom-sections) +- 支持通过形状对象的 [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) 属性[自定义 Editor 左侧面板中渲染的形状外观](guides/diagram_editor/shapebar.md) +- 支持[在 Editor 中选择、复制、粘贴、删除、移动多个形状](guides/diagram_editor/grid_area.md#manipulating-multiple-items) +- 支持在以默认模式初始化的编辑器中[选择并删除多条连接线](guides/diagram_editor/grid_area.md#manipulating-multiple-items) +- 支持通过工具栏的 ["Import Data"](guides/diagram_editor/toolbar.md) 按钮从 JSON 文件向 Editor 导入数据 +- 新增 [destructor()](api/diagram/destructor_method.md) 方法 + +### 更新 {#updates} + +- 支持在 IE 中使用自定义 HTML 模板 +- 更新并改进了 Diagram Editor 的 UI +- 支持从中心到中心连接形状 +- 更新了 Editor 的一组热键 +- 支持在以默认模式初始化的编辑器中为 *text* 形状设置连接线 +- 新增 *text* 形状内容宽度的自动适应 + +## 版本 2.2.1 {#version-221} + +2019 年 12 月 30 日发布 + +### 修复 {#fixes} + +- Diagram Editor 中图片加载器对 IE 的支持问题 + +## 版本 2.2 {#version-22} + +2019 年 11 月 27 日发布 + +### 新功能 {#new-functionality} + +- 支持通过 SVG 和 HTML 模板创建自定义形状 +- 支持使用不同类型的形状构建图表 +- 支持通过[工具栏](guides/diagram_editor/toolbar.md)的 Export data 按钮将 Diagram Editor 中的数据导出为 JSON 格式 +- Diagram Editor 新增 [showExport](migration.md#toolbar-buttons-in-editor) 选项和 `exportData` 事件 + +### 修复 {#fixes} + +- 修复了将图表导出为 PDF 和 PNG 格式的问题 +- 修复了鼠标事件工作不正确的问题 +- 修复了在以组织架构图模式初始化的图表中删除子形状的问题 +- 修复了 Diagram Editor 中左右面板工作不正确的问题 +- 修复了自动生成形状和连接线唯一 ID 的问题 + +## 版本 2.1.1 {#version-211} + +2019 年 10 月 11 日发布 + +### 修复 {#fixes} +- IE 中 img-card 的问题 + +## 版本 2.1 {#version-21} + +2017 年 5 月 22 日发布 + +### 新功能 {#new-functionality} + +- 便捷的 [Diagram 编辑器](guides/diagram_editor/initialization.md)，用于构建清晰明了的图表 +- 为[形状](shapes/configuration_properties.md)和[线条](lines/configuration_properties.md)提供丰富的配置选项集 +- 提供更多[图表](guides/customization.md)自定义可能性 + +### 更新 {#updates} + +- 新增 [Hotkeys](guides/diagram_editor/hot_keys.md)，用于在编辑器中编辑 Diagram +- 新增 [emptyAreaClick](api/diagram/emptyareaclick_event.md) 事件 +- 新增 `lineGap` 配置选项 + +## 版本 2.0 {#version-20} + +2017 年 2 月 15 日发布 + +### 重大变更 {#breaking-changes} + +API 结构进行了全面重组和改进，以简化使用体验。请查看[迁移](migration.md#11---20)文章了解所有更改。 + +### 新功能 {#new-functionality} + +- 支持创建不同类型的图表并对其进行样式设置 +- 提供多种[形状](shapes/default_shapes.md)和[线条](/lines/) +- [导出为 PDF 格式](guides/data_export.md) +- [导出为 PNG 格式](guides/data_export.md) + +### 更新 {#updates} + +- 支持[查找所需形状](guides/manipulating_items.md#finding-the-necessary-item) +- 支持[按指定条件筛选形状](guides/manipulating_items.md#filtering-items) +- 支持[为形状添加带图标的工具栏](guides/diagram/configuration.md#setting-toolbar-for-shapes)，以简化与形状的交互 +- 提升了性能 +- 支持适应任意 HTML 容器，并内置自动调整大小功能 + +## 版本 1.1 {#version-11} + +2017 年 12 月 5 日发布 + +### 新功能 {#new-functionality} + +- [在组织架构图模式下使用 Editor](api/diagram_editor/editor/config/type_property.md) +- 支持[保存和恢复状态](guides/loading_data.md#saving-and-restoring-state) +- 扩展了[自定义功能](guides/customization.md) + +### 更新 {#updates} + +- [扩展的 API](api/diagram/api_overview.md)：新增方法、属性和事件 + +## 版本 1.0 {#version-10} + +2017 年 9 月 29 日发布 + +### 初始功能 {#initial-functionality} + +- 组织架构图模式 +- 垂直和水平自动布局策略 +- 从 JSON 加载数据 +- 用于管理数据和分支状态的 API diff --git a/i18n/zh/docusaurus-theme-classic/footer.json b/i18n/zh/docusaurus-theme-classic/footer.json new file mode 100644 index 000000000..93e4ff60c --- /dev/null +++ b/i18n/zh/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Development center", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "Community", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "Company", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download Diagram": { + "message": "Download Diagram", + "description": "The label of footer link with label=Download Diagram linking to https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml" + }, + "link.item.label.Examples": { + "message": "Examples", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/xdvi4fek?tag=diagram" + }, + "link.item.label.Blog": { + "message": "Blog", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/" + }, + "link.item.label.Forum": { + "message": "Forum", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/diagram/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "About us", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Contact us", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Licensing", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxDiagram/#licensing" + } +} diff --git a/i18n/zh/docusaurus-theme-classic/navbar.json b/i18n/zh/docusaurus-theme-classic/navbar.json new file mode 100644 index 000000000..c1338bbaf --- /dev/null +++ b/i18n/zh/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript Diagram Documentation", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "DHTMLX Diagram Documentation", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "Examples", + "description": "Navbar item with label Examples" + }, + "item.label.Forum": { + "message": "Forum", + "description": "Navbar item with label Forum" + }, + "item.label.Support": { + "message": "Support", + "description": "Navbar item with label Support" + }, + "item.label.Download": { + "message": "Download", + "description": "Navbar item with label Download" + } +} diff --git a/local_modules/dhx-md-data-parser/index.js b/local_modules/dhx-md-data-parser/index.js index 5f68410ee..bd72b2549 100644 --- a/local_modules/dhx-md-data-parser/index.js +++ b/local_modules/dhx-md-data-parser/index.js @@ -10,7 +10,11 @@ const MD_BOLD_TEXT_REGEXP = /\*\*(.+?)\*\*/g; // [text](