From d0bdf0de2c99607331a69c76c4d3591f25e2587a Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 18 Jun 2026 10:45:43 +0300 Subject: [PATCH 1/4] [update] consolidate images into static/img - move all images from docs/assets to static/img (preserve subfolders) - repoint markdown image refs to root-absolute /img/... paths - convert require()-based JSX image refs to useBaseUrl('/img/...') - add useBaseUrl import to affected editbar complex controls and editor overview --- docs/api/diagram/autoplace_method.md | 14 +++++------ docs/api/diagram/autoplacement_property.md | 14 +++++------ docs/api/diagram/lineconfig_property.md | 2 +- .../editbar/basic_controls/avatar.md | 2 +- .../editbar/basic_controls/button.md | 2 +- .../editbar/basic_controls/checkbox.md | 2 +- .../editbar/basic_controls/checkboxgroup.md | 2 +- .../editbar/basic_controls/colorpicker.md | 2 +- .../editbar/basic_controls/combo.md | 2 +- .../editbar/basic_controls/container.md | 2 +- .../editbar/basic_controls/datepicker.md | 2 +- .../editbar/basic_controls/fieldset.md | 2 +- .../editbar/basic_controls/input.md | 2 +- .../editbar/basic_controls/radiogroup.md | 2 +- .../editbar/basic_controls/select.md | 2 +- .../editbar/basic_controls/slider.md | 2 +- .../editbar/basic_controls/textarea.md | 2 +- .../editbar/basic_controls/timepicker.md | 2 +- .../editbar/basic_controls/toggle.md | 2 +- .../editbar/basic_controls/togglegroup.md | 2 +- .../editbar/complex_controls/arrange.md | 4 +++- .../editbar/complex_controls/border.md | 4 +++- .../editbar/complex_controls/gridstep.md | 4 +++- .../editbar/complex_controls/header.md | 4 +++- .../editbar/complex_controls/headercommon.md | 4 +++- .../complex_controls/headerposition.md | 4 +++- .../editbar/complex_controls/lineshape.md | 4 +++- .../editbar/complex_controls/pointerview.md | 4 +++- .../editbar/complex_controls/position.md | 4 +++- .../editbar/complex_controls/size.md | 4 +++- .../editbar/complex_controls/textalign.md | 4 +++- .../editbar/complex_controls/textstyle.md | 4 +++- .../editor/config/autoplacement_property.md | 14 +++++------ .../editor/config/lineconfig_property.md | 2 +- docs/editor_overview.md | 10 ++++---- docs/groups/index.md | 2 +- docs/guides/diagram/configuration.md | 2 +- docs/guides/diagram_editor/grid_area.md | 20 ++++++++-------- docs/guides/diagram_editor/toolbar.md | 16 ++++++------- docs/guides/inline_editing.md | 2 +- .../integrations/angular_integration.md | 2 +- docs/guides/integrations/react_integration.md | 2 +- .../guides/integrations/svelte_integration.md | 2 +- docs/guides/integrations/vue_integration.md | 2 +- docs/guides/manipulating_items.md | 2 +- docs/guides/themes/themes.md | 8 +++---- docs/guides/touch_support.md | 2 +- docs/guides/using_typescript.md | 2 +- docs/overview.md | 22 +++++++++--------- docs/shapes/default_shapes.md | 16 ++++++------- docs/swimlanes/index.md | 6 ++--- .../img}/dark_high_contrast_theme.png | Bin {docs/assets => static/img}/dark_theme.png | Bin .../assets => static/img}/default_editor.gif | Bin .../assets => static/img}/default_editor.png | Bin .../img}/default_shape_toolbar.png | Bin .../arrange-default-mode.png | Bin .../edit-default-mode.png | Bin .../diagram-editor-toolbar/edit-org-mode.png | Bin .../file-default-mode.png | Bin .../diagram-editor-toolbar/file-org-mode.png | Bin .../scale-all-modes.png | Bin .../scale-default-mode.png | Bin .../diagram-editor-toolbar/scale-org-mode.png | Bin .../view-default-mode.png | Bin .../diagram-editor-toolbar/view-org-mode.png | Bin {docs/assets => static/img}/direct_mode.png | Bin .../img}/direct_ortogonal.png | Bin {docs/assets => static/img}/direct_radial.png | Bin {docs/assets => static/img}/edges_mode.png | Bin .../assets => static/img}/edges_ortogonal.png | Bin {docs/assets => static/img}/edges_radial.png | Bin .../img}/edges_straight_mode.png | Bin .../img}/editbar-basic-controls/avatar.png | Bin .../img}/editbar-basic-controls/button.png | Bin .../img}/editbar-basic-controls/checkbox.png | Bin .../editbar-basic-controls/checkboxgroup.png | Bin .../editbar-basic-controls/colorpicker.png | Bin .../img}/editbar-basic-controls/combo.png | Bin .../img}/editbar-basic-controls/container.png | Bin .../editbar-basic-controls/datepicker.png | Bin .../img}/editbar-basic-controls/fieldset.png | Bin .../img}/editbar-basic-controls/input.png | Bin .../editbar-basic-controls/radiogroup.png | Bin .../img}/editbar-basic-controls/select.png | Bin .../img}/editbar-basic-controls/slider.png | Bin .../img}/editbar-basic-controls/textarea.png | Bin .../editbar-basic-controls/timepicker.png | Bin .../img}/editbar-basic-controls/toggle.png | Bin .../editbar-basic-controls/togglegroup.png | Bin .../img}/editbar-complex-controls/arrange.png | Bin .../img}/editbar-complex-controls/border.png | Bin .../editbar-complex-controls/gridstep.png | Bin .../img}/editbar-complex-controls/header.png | Bin .../editbar-complex-controls/headercommon.png | Bin .../headerposition.png | Bin .../editbar-complex-controls/lineshape.png | Bin .../editbar-complex-controls/pointerview.png | Bin .../editbar-complex-controls/position.png | Bin .../img}/editbar-complex-controls/size.png | Bin .../editbar-complex-controls/textalign.png | Bin .../editbar-complex-controls/textstyle.png | Bin .../editor/group_align_and_distribution.gif | Bin .../img}/flowshapes_types.png | Bin {docs/assets => static/img}/game_levels.png | Bin .../assets => static/img}/group_behavior.gif | Bin {docs/assets => static/img}/group_toolbar.png | Bin {docs/assets => static/img}/html.png | Bin {docs/assets => static/img}/icon_activity.png | Bin .../img}/icon_data_planning_model.png | Bin .../img}/icon_decision_tree.png | Bin .../img}/icon_vert_decision_tree.png | Bin .../img}/icon_wide_diagram.png | Bin .../assets => static/img}/inline_editing.gif | Bin .../img}/light_high_contrast_theme.png | Bin {docs/assets => static/img}/light_theme.png | Bin .../assets => static/img}/line_with_text.png | Bin .../img}/line_with_toolbar.png | Bin .../assets => static/img}/linegap_config.png | Bin .../img}/medical_hierarchy_overview.png | Bin {docs/assets => static/img}/mindmap_basic.png | Bin .../img}/mindmap_editor_draggable.gif | Bin .../img}/mindmap_editor_draggable.png | Bin .../img}/mindmap_emotions.png | Bin .../img}/mindmap_toolbar_of_shape.png | Bin {docs/assets => static/img}/network.png | Bin .../img}/orgchart_card_shapes.png | Bin .../img}/orgchart_editor_assistant.png | Bin .../img}/orgchart_editor_draggable.png | Bin .../orgchart_editor_draggable_assistant.gif | Bin .../orgchart_editor_draggable_partner.gif | Bin .../img}/orgchart_imgcard_shapes.png | Bin .../orgchart_shape_toolbar_horizontal.png | Bin .../img}/orgchart_shape_toolbar_vertical.png | Bin .../img}/orgchart_with_assistant.png | Bin .../img}/orgchart_with_four_partners.png | Bin .../img}/orgchart_with_one_partner.png | Bin .../img}/orgchart_with_three_partners.png | Bin .../img}/orgchart_with_two_partners.png | Bin .../img}/pert_milestone_shape.png | Bin .../img}/pert_project_group.png | Bin .../assets => static/img}/pert_task_shape.png | Bin .../img}/radial_autoplacement.png | Bin .../img}/radial_datasets_generator.png | Bin {docs/assets => static/img}/sticky.png | Bin {docs/assets => static/img}/swimlane.png | Bin .../assets => static/img}/swimlane_cells.png | Bin .../img}/swimlane_contextmenu.png | Bin .../img}/swimlane_merge_cell_col.png | Bin .../img}/swimlane_merge_cell_row.png | Bin .../img}/swimlane_toolbar.png | Bin {docs/assets => static/img}/text_item.png | Bin {docs/assets => static/img}/touch_support.png | Bin {docs/assets => static/img}/trial_diagram.png | Bin {docs/assets => static/img}/typescript.png | Bin {docs/assets => static/img}/venn.png | Bin {docs/assets => static/img}/virtual_cloud.png | Bin 157 files changed, 136 insertions(+), 110 deletions(-) rename {docs/assets => static/img}/dark_high_contrast_theme.png (100%) rename {docs/assets => static/img}/dark_theme.png (100%) rename {docs/assets => static/img}/default_editor.gif (100%) rename {docs/assets => static/img}/default_editor.png (100%) rename {docs/assets => static/img}/default_shape_toolbar.png (100%) rename {docs/assets => static/img}/diagram-editor-toolbar/arrange-default-mode.png (100%) rename {docs/assets => static/img}/diagram-editor-toolbar/edit-default-mode.png (100%) rename {docs/assets => static/img}/diagram-editor-toolbar/edit-org-mode.png (100%) rename {docs/assets => static/img}/diagram-editor-toolbar/file-default-mode.png (100%) rename {docs/assets => static/img}/diagram-editor-toolbar/file-org-mode.png (100%) rename {docs/assets => static/img}/diagram-editor-toolbar/scale-all-modes.png (100%) rename {docs/assets => static/img}/diagram-editor-toolbar/scale-default-mode.png (100%) rename {docs/assets => static/img}/diagram-editor-toolbar/scale-org-mode.png (100%) rename {docs/assets => static/img}/diagram-editor-toolbar/view-default-mode.png (100%) rename {docs/assets => static/img}/diagram-editor-toolbar/view-org-mode.png (100%) rename {docs/assets => static/img}/direct_mode.png (100%) rename {docs/assets => static/img}/direct_ortogonal.png (100%) rename {docs/assets => static/img}/direct_radial.png (100%) rename {docs/assets => static/img}/edges_mode.png (100%) rename {docs/assets => static/img}/edges_ortogonal.png (100%) rename {docs/assets => static/img}/edges_radial.png (100%) rename {docs/assets => static/img}/edges_straight_mode.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/avatar.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/button.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/checkbox.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/checkboxgroup.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/colorpicker.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/combo.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/container.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/datepicker.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/fieldset.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/input.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/radiogroup.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/select.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/slider.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/textarea.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/timepicker.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/toggle.png (100%) rename {docs/assets => static/img}/editbar-basic-controls/togglegroup.png (100%) rename {docs/assets => static/img}/editbar-complex-controls/arrange.png (100%) rename {docs/assets => static/img}/editbar-complex-controls/border.png (100%) rename {docs/assets => static/img}/editbar-complex-controls/gridstep.png (100%) rename {docs/assets => static/img}/editbar-complex-controls/header.png (100%) rename {docs/assets => static/img}/editbar-complex-controls/headercommon.png (100%) rename {docs/assets => static/img}/editbar-complex-controls/headerposition.png (100%) rename {docs/assets => static/img}/editbar-complex-controls/lineshape.png (100%) rename {docs/assets => static/img}/editbar-complex-controls/pointerview.png (100%) rename {docs/assets => static/img}/editbar-complex-controls/position.png (100%) rename {docs/assets => static/img}/editbar-complex-controls/size.png (100%) rename {docs/assets => static/img}/editbar-complex-controls/textalign.png (100%) rename {docs/assets => static/img}/editbar-complex-controls/textstyle.png (100%) rename {docs/assets => static/img}/editor/group_align_and_distribution.gif (100%) rename {docs/assets => static/img}/flowshapes_types.png (100%) rename {docs/assets => static/img}/game_levels.png (100%) rename {docs/assets => static/img}/group_behavior.gif (100%) rename {docs/assets => static/img}/group_toolbar.png (100%) rename {docs/assets => static/img}/html.png (100%) rename {docs/assets => static/img}/icon_activity.png (100%) rename {docs/assets => static/img}/icon_data_planning_model.png (100%) rename {docs/assets => static/img}/icon_decision_tree.png (100%) rename {docs/assets => static/img}/icon_vert_decision_tree.png (100%) rename {docs/assets => static/img}/icon_wide_diagram.png (100%) rename {docs/assets => static/img}/inline_editing.gif (100%) rename {docs/assets => static/img}/light_high_contrast_theme.png (100%) rename {docs/assets => static/img}/light_theme.png (100%) rename {docs/assets => static/img}/line_with_text.png (100%) rename {docs/assets => static/img}/line_with_toolbar.png (100%) rename {docs/assets => static/img}/linegap_config.png (100%) rename {docs/assets => static/img}/medical_hierarchy_overview.png (100%) rename {docs/assets => static/img}/mindmap_basic.png (100%) rename {docs/assets => static/img}/mindmap_editor_draggable.gif (100%) rename {docs/assets => static/img}/mindmap_editor_draggable.png (100%) rename {docs/assets => static/img}/mindmap_emotions.png (100%) rename {docs/assets => static/img}/mindmap_toolbar_of_shape.png (100%) rename {docs/assets => static/img}/network.png (100%) rename {docs/assets => static/img}/orgchart_card_shapes.png (100%) rename {docs/assets => static/img}/orgchart_editor_assistant.png (100%) rename {docs/assets => static/img}/orgchart_editor_draggable.png (100%) rename {docs/assets => static/img}/orgchart_editor_draggable_assistant.gif (100%) rename {docs/assets => static/img}/orgchart_editor_draggable_partner.gif (100%) rename {docs/assets => static/img}/orgchart_imgcard_shapes.png (100%) rename {docs/assets => static/img}/orgchart_shape_toolbar_horizontal.png (100%) rename {docs/assets => static/img}/orgchart_shape_toolbar_vertical.png (100%) rename {docs/assets => static/img}/orgchart_with_assistant.png (100%) rename {docs/assets => static/img}/orgchart_with_four_partners.png (100%) rename {docs/assets => static/img}/orgchart_with_one_partner.png (100%) rename {docs/assets => static/img}/orgchart_with_three_partners.png (100%) rename {docs/assets => static/img}/orgchart_with_two_partners.png (100%) rename {docs/assets => static/img}/pert_milestone_shape.png (100%) rename {docs/assets => static/img}/pert_project_group.png (100%) rename {docs/assets => static/img}/pert_task_shape.png (100%) rename {docs/assets => static/img}/radial_autoplacement.png (100%) rename {docs/assets => static/img}/radial_datasets_generator.png (100%) rename {docs/assets => static/img}/sticky.png (100%) rename {docs/assets => static/img}/swimlane.png (100%) rename {docs/assets => static/img}/swimlane_cells.png (100%) rename {docs/assets => static/img}/swimlane_contextmenu.png (100%) rename {docs/assets => static/img}/swimlane_merge_cell_col.png (100%) rename {docs/assets => static/img}/swimlane_merge_cell_row.png (100%) rename {docs/assets => static/img}/swimlane_toolbar.png (100%) rename {docs/assets => static/img}/text_item.png (100%) rename {docs/assets => static/img}/touch_support.png (100%) rename {docs/assets => static/img}/trial_diagram.png (100%) rename {docs/assets => static/img}/typescript.png (100%) rename {docs/assets => static/img}/venn.png (100%) rename {docs/assets => static/img}/virtual_cloud.png (100%) diff --git a/docs/api/diagram/autoplace_method.md b/docs/api/diagram/autoplace_method.md index 8dc97cafa..f48430726 100644 --- a/docs/api/diagram/autoplace_method.md +++ b/docs/api/diagram/autoplace_method.md @@ -47,7 +47,7 @@ diagram.autoPlace({ Connector lines with no arrows are aligned "from center to center"; they are straight and diagonal. -![](../../assets/direct_mode.png) +![](/img/direct_mode.png) ### "edges" mode @@ -64,11 +64,11 @@ To add arrows to the lines, specify **forwardArrow: "filled"** or **backArrow: " The connector lines in the "edges" mode can be: - either straight (if you set **connectType: "straight"** property of a [line object](../../../lines/configuration_properties/)) -![](../../assets/edges_straight_mode.png) +![](/img/edges_straight_mode.png) - or 90-degree curved (if you set **connectType: "elbow"** property of a [line object](../../../lines/configuration_properties/)) -![](../../assets/edges_mode.png) +![](/img/edges_mode.png) ## Modes of placement of shapes @@ -78,12 +78,12 @@ Shapes are arranged along vertical and horizontal lines - **"orthogonal"** arrangement with lines in the **"direct"** mode -![](../../assets/direct_ortogonal.png) +![](/img/direct_ortogonal.png) - **"orthogonal"** arrangement with lines in the **"edges"** mode -![](../../assets/edges_ortogonal.png) +![](/img/edges_ortogonal.png) ### "radial" mode @@ -91,11 +91,11 @@ Shapes are arranged on imaginary circles relative to the central shape, i.e. a s - **"radial"** arrangement with lines in the **"direct"** mode -![](../../assets/direct_radial.png) +![](/img/direct_radial.png) - **"radial"** arrangement with lines in the **"edges"** mode -![](../../assets/edges_radial.png) +![](/img/edges_radial.png) **Change log**: diff --git a/docs/api/diagram/autoplacement_property.md b/docs/api/diagram/autoplacement_property.md index 28380f367..587f153a7 100644 --- a/docs/api/diagram/autoplacement_property.md +++ b/docs/api/diagram/autoplacement_property.md @@ -74,7 +74,7 @@ diagram.autoPlace(); Connector lines with no arrows are aligned "from center to center". They are straight and diagonal. -![](../../assets/direct_mode.png) +![](/img/direct_mode.png) ### "edges" mode @@ -88,11 +88,11 @@ The connector lines in the "edges" mode can be: - either straight (if you set the `connectType: "straight"` property of a [line object](../../../lines/configuration_properties/)) -![](../../assets/edges_straight_mode.png) +![](/img/edges_straight_mode.png) - or 90-degree curved (if you set the `connectType: "elbow"` property of a [line object](../../../lines/configuration_properties/)) -![](../../assets/edges_mode.png) +![](/img/edges_mode.png) ## Modes of placement of shapes @@ -102,11 +102,11 @@ Shapes are arranged along vertical and horizontal lines - **"orthogonal"** arrangement with lines in the **"direct"** mode -![](../../assets/direct_ortogonal.png) +![](/img/direct_ortogonal.png) - **"orthogonal"** arrangement with lines in the **"edges"** mode -![](../../assets/edges_ortogonal.png) +![](/img/edges_ortogonal.png) ### "radial" mode @@ -114,11 +114,11 @@ Shapes are arranged on imaginary circles relative to the central shape, i.e. the - **"radial"** arrangement with lines in the **"direct"** mode -![](../../assets/direct_radial.png) +![](/img/direct_radial.png) - **"radial"** arrangement with lines in the **"edges"** mode -![](../../assets/edges_radial.png) +![](/img/edges_radial.png) **Change log**: diff --git a/docs/api/diagram/lineconfig_property.md b/docs/api/diagram/lineconfig_property.md index 652978f54..a26e853dd 100644 --- a/docs/api/diagram/lineconfig_property.md +++ b/docs/api/diagram/lineconfig_property.md @@ -62,7 +62,7 @@ const diagram = new dhx.Diagram("diagram_container", { The result of applying the **lineGap** property is shown in the image below: -![](../../assets/linegap_config.png) +![](/img/linegap_config.png) **Related sample**: [Diagram. Default mode. Activity diagram](https://snippet.dhtmlx.com/a9t2z2dt) diff --git a/docs/api/diagram_editor/editbar/basic_controls/avatar.md b/docs/api/diagram_editor/editbar/basic_controls/avatar.md index ff02cca9c..cbb485907 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/avatar.md +++ b/docs/api/diagram_editor/editbar/basic_controls/avatar.md @@ -8,7 +8,7 @@ description: You can explore the Avatar control of Editbar in the documentation @short: The basic control for uploading of images. -![Avatar control](../../../../assets/editbar-basic-controls/avatar.png) +![Avatar control](/img/editbar-basic-controls/avatar.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/button.md b/docs/api/diagram_editor/editbar/basic_controls/button.md index 51a08d049..4028279de 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/button.md +++ b/docs/api/diagram_editor/editbar/basic_controls/button.md @@ -8,7 +8,7 @@ description: You can explore the Button control of Editbar in the documentation @short: The basic button control that can have an icon. -![Button control](../../../../assets/editbar-basic-controls/button.png) +![Button control](/img/editbar-basic-controls/button.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/checkbox.md b/docs/api/diagram_editor/editbar/basic_controls/checkbox.md index ffebe728c..36b90c763 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/checkbox.md +++ b/docs/api/diagram_editor/editbar/basic_controls/checkbox.md @@ -8,7 +8,7 @@ description: You can explore the Checkbox control of Editbar in the documentatio @short: The basic control for displaying the specified value or change it to the opposite one. -![Checkbox control](../../../../assets/editbar-basic-controls/checkbox.png) +![Checkbox control](/img/editbar-basic-controls/checkbox.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/checkboxgroup.md b/docs/api/diagram_editor/editbar/basic_controls/checkboxgroup.md index 1198e9782..6b065e01e 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/checkboxgroup.md +++ b/docs/api/diagram_editor/editbar/basic_controls/checkboxgroup.md @@ -8,7 +8,7 @@ description: You can explore the CheckboxGroup control of Editbar in the documen @short: The basic control for creating groups of checkboxes. -![CheckboxGroup control](../../../../assets/editbar-basic-controls/checkboxgroup.png) +![CheckboxGroup control](/img/editbar-basic-controls/checkboxgroup.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/colorpicker.md b/docs/api/diagram_editor/editbar/basic_controls/colorpicker.md index cc33529e9..1ec45587d 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/colorpicker.md +++ b/docs/api/diagram_editor/editbar/basic_controls/colorpicker.md @@ -8,7 +8,7 @@ description: You can explore the Colorpicker control of Editbar in the documenta @short: The basic control for selecting a color. -![Colorpicker control](../../../../assets/editbar-basic-controls/colorpicker.png) +![Colorpicker control](/img/editbar-basic-controls/colorpicker.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/combo.md b/docs/api/diagram_editor/editbar/basic_controls/combo.md index 6d892375e..e140a81af 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/combo.md +++ b/docs/api/diagram_editor/editbar/basic_controls/combo.md @@ -8,7 +8,7 @@ description: You can explore the Combo control of Editbar in the documentation o @short: The basic input control that represents an advanced editable select box with a set of options. -![Combo control](../../../../assets/editbar-basic-controls/combo.png) +![Combo control](/img/editbar-basic-controls/combo.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/container.md b/docs/api/diagram_editor/editbar/basic_controls/container.md index ddc73b23e..80638f201 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/container.md +++ b/docs/api/diagram_editor/editbar/basic_controls/container.md @@ -8,7 +8,7 @@ description: You can explore the Container control of Editbar in the documentati @short: The basic control for attaching an HTML code. -![Container control](../../../../assets/editbar-basic-controls/container.png) +![Container control](/img/editbar-basic-controls/container.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/datepicker.md b/docs/api/diagram_editor/editbar/basic_controls/datepicker.md index b815b2528..2b51fdaf1 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/datepicker.md +++ b/docs/api/diagram_editor/editbar/basic_controls/datepicker.md @@ -8,7 +8,7 @@ description: You can explore the Datepicker control of Editbar in the documentat @short: The basic control for selecting a date. -![Datepicker control](../../../../assets/editbar-basic-controls/datepicker.png) +![Datepicker control](/img/editbar-basic-controls/datepicker.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/fieldset.md b/docs/api/diagram_editor/editbar/basic_controls/fieldset.md index 5779f6a84..31401cec3 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/fieldset.md +++ b/docs/api/diagram_editor/editbar/basic_controls/fieldset.md @@ -8,7 +8,7 @@ description: You can explore the Fieldset control of Editbar in the documentatio @short: The basic control for creating complex controls with the help of the [`controls`](/api/diagram_editor/editbar/config/controls_property/) or the [`properties`](/api/diagram_editor/editbar/config/properties_property/) Editbar configuration options. -![Fieldset control](../../../../assets/editbar-basic-controls/fieldset.png) +![Fieldset control](/img/editbar-basic-controls/fieldset.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/input.md b/docs/api/diagram_editor/editbar/basic_controls/input.md index 6a4013b22..4be723248 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/input.md +++ b/docs/api/diagram_editor/editbar/basic_controls/input.md @@ -8,7 +8,7 @@ description: You can explore the Input control of Editbar in the documentation o @short: The basic input field control for typing some text inside. -![Input control](../../../../assets/editbar-basic-controls/input.png) +![Input control](/img/editbar-basic-controls/input.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/radiogroup.md b/docs/api/diagram_editor/editbar/basic_controls/radiogroup.md index e206572ce..ae590f5a6 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/radiogroup.md +++ b/docs/api/diagram_editor/editbar/basic_controls/radiogroup.md @@ -8,7 +8,7 @@ description: You can explore the RadioGroup control of Editbar in the documentat @short: The basic control for creating groups of Radio buttons. -![RadioGroup control](../../../../assets/editbar-basic-controls/radiogroup.png) +![RadioGroup control](/img/editbar-basic-controls/radiogroup.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/select.md b/docs/api/diagram_editor/editbar/basic_controls/select.md index 7d2213f82..4d58f3160 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/select.md +++ b/docs/api/diagram_editor/editbar/basic_controls/select.md @@ -8,7 +8,7 @@ description: You can explore the Select control of Editbar in the documentation @short: The basic control that represents an advanced select box with a set of options to choose from. -![Select control](../../../../assets/editbar-basic-controls/select.png) +![Select control](/img/editbar-basic-controls/select.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/slider.md b/docs/api/diagram_editor/editbar/basic_controls/slider.md index 7ea9f067c..00bf14633 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/slider.md +++ b/docs/api/diagram_editor/editbar/basic_controls/slider.md @@ -8,7 +8,7 @@ description: You can explore the Slider control of Editbar in the documentation @short: The basic control for selecting a numeric value by moving a thumb along a line with a fixed set of options. -![Slider control](../../../../assets/editbar-basic-controls/slider.png) +![Slider control](/img/editbar-basic-controls/slider.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/textarea.md b/docs/api/diagram_editor/editbar/basic_controls/textarea.md index be6c575b6..bd738e41f 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/textarea.md +++ b/docs/api/diagram_editor/editbar/basic_controls/textarea.md @@ -8,7 +8,7 @@ description: You can explore the Textarea control of Editbar in the documentatio @short: The basic control for entering a simple multi-line text. -![Textarea control](../../../../assets/editbar-basic-controls/textarea.png) +![Textarea control](/img/editbar-basic-controls/textarea.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/timepicker.md b/docs/api/diagram_editor/editbar/basic_controls/timepicker.md index c4a975e0a..0cb15024c 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/timepicker.md +++ b/docs/api/diagram_editor/editbar/basic_controls/timepicker.md @@ -8,7 +8,7 @@ description: You can explore the Timepicker control of Editbar in the documentat @short: The basic control for selecting a time value either by moving handles along track bars or by entering hour and minutes values directly into related inputs. -![Timepicker control](../../../../assets/editbar-basic-controls/timepicker.png) +![Timepicker control](/img/editbar-basic-controls/timepicker.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/toggle.md b/docs/api/diagram_editor/editbar/basic_controls/toggle.md index f1903faf2..c92c72a33 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/toggle.md +++ b/docs/api/diagram_editor/editbar/basic_controls/toggle.md @@ -8,7 +8,7 @@ description: You can explore the Toggle control of Editbar in the documentation @short: The basic control that represents a special button which can change its state from the pressed to the unpressed one when clicked. -![Toggle control](../../../../assets/editbar-basic-controls/toggle.png) +![Toggle control](/img/editbar-basic-controls/toggle.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/basic_controls/togglegroup.md b/docs/api/diagram_editor/editbar/basic_controls/togglegroup.md index d22f55229..10238d91b 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/togglegroup.md +++ b/docs/api/diagram_editor/editbar/basic_controls/togglegroup.md @@ -8,7 +8,7 @@ description: You can explore the ToggleGroup control of Editbar in the documenta @short: The basic control for creating groups of toggle buttons. -![ToggleGroup control](../../../../assets/editbar-basic-controls/togglegroup.png) +![ToggleGroup control](/img/editbar-basic-controls/togglegroup.png) ## Usage diff --git a/docs/api/diagram_editor/editbar/complex_controls/arrange.md b/docs/api/diagram_editor/editbar/complex_controls/arrange.md index 97c26bb1a..ce591bf7a 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/arrange.md +++ b/docs/api/diagram_editor/editbar/complex_controls/arrange.md @@ -4,12 +4,14 @@ title: Editbar Complex Controls - Arrange description: You can explore the Arrange control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # Arrange @short: The complex control for editing width, height, rotation angle, x and y properties of a Diagram element Arrange control diff --git a/docs/api/diagram_editor/editbar/complex_controls/border.md b/docs/api/diagram_editor/editbar/complex_controls/border.md index 4db8b46a1..257945c6c 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/border.md +++ b/docs/api/diagram_editor/editbar/complex_controls/border.md @@ -4,12 +4,14 @@ title: Editbar Complex Controls - Border description: You can explore the Border control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # Border @short: The complex control for displaying and modifying borders of a Diagram element Border control diff --git a/docs/api/diagram_editor/editbar/complex_controls/gridstep.md b/docs/api/diagram_editor/editbar/complex_controls/gridstep.md index 823fb26fd..5dac2a981 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/gridstep.md +++ b/docs/api/diagram_editor/editbar/complex_controls/gridstep.md @@ -4,12 +4,14 @@ title: Editbar Complex Controls - Grid step description: You can explore the Grid step control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # Grid step @short: The complex control for displaying and modifying a grid step of the Diagram editor Gridstep control diff --git a/docs/api/diagram_editor/editbar/complex_controls/header.md b/docs/api/diagram_editor/editbar/complex_controls/header.md index afc38639e..530400f6a 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/header.md +++ b/docs/api/diagram_editor/editbar/complex_controls/header.md @@ -4,12 +4,14 @@ title: Editbar Complex Controls - Header description: You can explore the Header control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # Header @short: The complex control for displaying and modifying the header of "group" and "swimlane" elements of the Diagram editor Header control diff --git a/docs/api/diagram_editor/editbar/complex_controls/headercommon.md b/docs/api/diagram_editor/editbar/complex_controls/headercommon.md index 81ea881ff..5e0552af3 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/headercommon.md +++ b/docs/api/diagram_editor/editbar/complex_controls/headercommon.md @@ -4,12 +4,14 @@ title: Editbar Complex Controls - Header common description: You can explore the Header common control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # Header common @short: The complex control for for changing visibility, color, and height of the group header Header common control diff --git a/docs/api/diagram_editor/editbar/complex_controls/headerposition.md b/docs/api/diagram_editor/editbar/complex_controls/headerposition.md index c95c80b58..5f4e34e13 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/headerposition.md +++ b/docs/api/diagram_editor/editbar/complex_controls/headerposition.md @@ -4,12 +4,14 @@ title: Editbar Complex Controls - Header position description: You can explore the Header position control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # Header position @short: The complex control for changing position of the group header Header position control diff --git a/docs/api/diagram_editor/editbar/complex_controls/lineshape.md b/docs/api/diagram_editor/editbar/complex_controls/lineshape.md index 3605c1082..657726407 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/lineshape.md +++ b/docs/api/diagram_editor/editbar/complex_controls/lineshape.md @@ -4,12 +4,14 @@ title: Editbar Complex Controls - Line shape description: You can explore the Line shape control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # Line shape @short: The complex control for displaying and managing connectors Line shape control diff --git a/docs/api/diagram_editor/editbar/complex_controls/pointerview.md b/docs/api/diagram_editor/editbar/complex_controls/pointerview.md index 50c207288..bffe02f5c 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/pointerview.md +++ b/docs/api/diagram_editor/editbar/complex_controls/pointerview.md @@ -4,12 +4,14 @@ title: Editbar Complex Controls - Pointer view description: You can explore the Pointer view control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # Pointer view @short: The complex control for displaying and managing the connector arrows Pointer view control diff --git a/docs/api/diagram_editor/editbar/complex_controls/position.md b/docs/api/diagram_editor/editbar/complex_controls/position.md index 07e0b01b6..ed43e32cf 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/position.md +++ b/docs/api/diagram_editor/editbar/complex_controls/position.md @@ -4,12 +4,14 @@ title: Editbar Complex Controls - Position description: You can explore the Position control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # Position @short: The complex control for configuring the shape offset from the predefined algorithm on the X and Y axis Position control diff --git a/docs/api/diagram_editor/editbar/complex_controls/size.md b/docs/api/diagram_editor/editbar/complex_controls/size.md index 1d0b27fca..ae059cdfd 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/size.md +++ b/docs/api/diagram_editor/editbar/complex_controls/size.md @@ -4,12 +4,14 @@ title: Editbar Complex Controls - Size description: You can explore the Size control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # Size @short: The complex control for managing width and height of the Diagram elements Size control diff --git a/docs/api/diagram_editor/editbar/complex_controls/textalign.md b/docs/api/diagram_editor/editbar/complex_controls/textalign.md index a9f2457e1..ab117abb5 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/textalign.md +++ b/docs/api/diagram_editor/editbar/complex_controls/textalign.md @@ -4,12 +4,14 @@ title: Editbar Complex Controls - Text align description: You can explore the Text align control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # Text align @short: The complex control for managing the text alignment within the Diagram elements Text align control diff --git a/docs/api/diagram_editor/editbar/complex_controls/textstyle.md b/docs/api/diagram_editor/editbar/complex_controls/textstyle.md index d61e668ad..eea0acf94 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/textstyle.md +++ b/docs/api/diagram_editor/editbar/complex_controls/textstyle.md @@ -4,12 +4,14 @@ title: Editbar Complex Controls - Text style description: You can explore the Text style control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # Text style @short: The complex control for managing the text style within the Diagram elements Text style control diff --git a/docs/api/diagram_editor/editor/config/autoplacement_property.md b/docs/api/diagram_editor/editor/config/autoplacement_property.md index 175dba834..b043baaf2 100644 --- a/docs/api/diagram_editor/editor/config/autoplacement_property.md +++ b/docs/api/diagram_editor/editor/config/autoplacement_property.md @@ -70,7 +70,7 @@ editor.parse(data); Connector lines with no arrows are aligned "from center to center". They are straight and diagonal. -![](../../../../assets/direct_mode.png) +![](/img/direct_mode.png) ### "edges" mode @@ -84,11 +84,11 @@ The connector lines in the "edges" mode can be: - either straight (if you set the `connectType: "straight"` property of a [line object](/lines/configuration_properties/)) -![](../../../../assets/edges_straight_mode.png) +![](/img/edges_straight_mode.png) - or 90-degree curved (if you set the `connectType: "elbow"` property of a [line object](/lines/configuration_properties/)) -![](../../../../assets/edges_mode.png) +![](/img/edges_mode.png) ## Modes of placement of shapes @@ -98,11 +98,11 @@ Shapes are arranged along vertical and horizontal lines - **"orthogonal"** arrangement with lines in the **"direct"** mode -![](../../../../assets/direct_ortogonal.png) +![](/img/direct_ortogonal.png) - **"orthogonal"** arrangement with lines in the **"edges"** mode -![](../../../../assets/edges_ortogonal.png) +![](/img/edges_ortogonal.png) ### "radial" mode @@ -110,11 +110,11 @@ Shapes are arranged on imaginary circles relative to the central shape, i.e. the - **"radial"** arrangement with lines in the **"direct"** mode -![](../../../../assets/direct_radial.png) +![](/img/direct_radial.png) - **"radial"** arrangement with lines in the **"edges"** mode -![](../../../../assets/edges_radial.png) +![](/img/edges_radial.png) **Change log**: diff --git a/docs/api/diagram_editor/editor/config/lineconfig_property.md b/docs/api/diagram_editor/editor/config/lineconfig_property.md index ead3f239d..fdfb1a59f 100644 --- a/docs/api/diagram_editor/editor/config/lineconfig_property.md +++ b/docs/api/diagram_editor/editor/config/lineconfig_property.md @@ -74,7 +74,7 @@ const editor = new dhx.DiagramEditor("editor_container", { The result of applying the **lineGap** property is shown in the image below: -![](../../../../assets/linegap_config.png) +![](/img/linegap_config.png) **Change log**: diff --git a/docs/editor_overview.md b/docs/editor_overview.md index 4b6c0c8d3..afae2c3cf 100644 --- a/docs/editor_overview.md +++ b/docs/editor_overview.md @@ -4,6 +4,8 @@ title: Editor Overview description: You can have an overview of DHTMLX JavaScript Diagram library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + # DHTMLX Diagram Editor overview The DHTMLX Diagram component provides you with Editor that allows you to try and apply your designer skills in building neat and nice-looking diagrams. @@ -21,7 +23,7 @@ To build a diagram, you need either to drag the necessary items from the shapeba You can adjust the attributes of the items via [sidebar options of the editbar](../guides/diagram_editor/editbar/). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items. -![](assets/default_editor.png) +![](/img/default_editor.png) **Related sample:** [Diagram Editor. Default mode. Wide flowchart](https://snippet.dhtmlx.com/4d4k3o8p?text=diagram&mode=wide) @@ -43,7 +45,7 @@ To build a diagram in the org chart mode of the editor, you need to select a sha You can adjust the attributes of the shapes via the available [sidebar options of the editbar](../guides/diagram_editor/editbar/). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items. -![](assets/orgchart_editor_draggable.png) +![](/img/orgchart_editor_draggable.png) **Related sample:** [Diagram Editor. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/og4qm3ja?text=diagram&mode=wide) @@ -52,7 +54,7 @@ If you've added a custom shape to the editor in the org chart mode, you can [con You can add the **assistant** or **partner** items for a parent shape of any level. The assistant or partner items can't be the parent items. Org chart editor assistant @@ -74,7 +76,7 @@ To build a diagram in the mindmap mode of the editor, you need to select a shape You can adjust the attributes of the shapes via the available [sidebar options of the editbar](../guides/diagram_editor/editbar/). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items. - ![](assets/mindmap_editor_draggable.png) + ![](/img/mindmap_editor_draggable.png) **Related sample:** [Diagram Editor. Mindmap mode. Emotions mind map](https://snippet.dhtmlx.com/lo1vm0e8?text=diagram&mode=wide) diff --git a/docs/groups/index.md b/docs/groups/index.md index 2fa8b0ecb..0e0d363bb 100644 --- a/docs/groups/index.md +++ b/docs/groups/index.md @@ -161,7 +161,7 @@ The **exitArea** property defines the behavior of the first-level children of th The *"unbound"* and *"boundBorderExtension"* values of the **groupBehavior** attribute allows you to define whether the child items can be moved out of the group, and to make the group borders expand when a user is trying to drag an item outside. If needed you can also disable the ability to drag items outside the group via the *"boundNoBorderExtension"* value. -![](../assets/group_behavior.gif) +![](/img/group_behavior.gif) If *groupBehavior: "boundNoBorderExtension" | "boundBorderExtension"* is set, you can specify the padding between the group and the edge of the item when moving the item inside the group. For this purpose, use the **padding** attribute: diff --git a/docs/guides/diagram/configuration.md b/docs/guides/diagram/configuration.md index 775f79845..95469e19b 100644 --- a/docs/guides/diagram/configuration.md +++ b/docs/guides/diagram/configuration.md @@ -151,7 +151,7 @@ The property can contain the following options: Autoplacement will be applied only after the [`autoPlace()`](/api/diagram/autoplace_method/) method is applied. It works only in the default mode of the diagram and only for shapes. Autoplacement does not work if you use groups or swimlanes. ::: -![Radial autoplacement with padding options](../../assets/radial_autoplacement.png) +![Radial autoplacement with padding options](/img/radial_autoplacement.png) **Related sample**: [Diagram. Default mode. Radial autoplacement with padding options](https://snippet.dhtmlx.com/huut0l1s) diff --git a/docs/guides/diagram_editor/grid_area.md b/docs/guides/diagram_editor/grid_area.md index 09e6d9bc9..1467c471f 100644 --- a/docs/guides/diagram_editor/grid_area.md +++ b/docs/guides/diagram_editor/grid_area.md @@ -20,7 +20,7 @@ Distance between points in the Grid area depends on the value of the [grid step] You can drag shapes from the shapebar into the grid area to place them at the desired positions and connect them. -![](../../assets/default_shape_toolbar.png) +![](/img/default_shape_toolbar.png) When you click on any shape, it becomes editable and gets personal interface elements: @@ -41,9 +41,9 @@ You can drag shapes to place them at the desired positions relative to the root You can drag shapes from one parent item to another. The moved item is dragged with all its children. -![](../../assets/orgchart_shape_toolbar_vertical.png) +![](/img/orgchart_shape_toolbar_vertical.png) -![](../../assets/orgchart_shape_toolbar_horizontal.png) +![](/img/orgchart_shape_toolbar_horizontal.png) When you click on any shape, it becomes editable and gets personal interface elements: @@ -67,7 +67,7 @@ Double-click the text of a shape to edit it. You can drag shapes to place them at the desired positions relative to the root shape, or drag the root shape to move the whole diagram. If you drag the parent shape, the shape will be moved with all its child shapes. To add a new shape, select a shape and add a new child for it. The shapes can be dragged from one parent item to another. The moved item is dragged with all its children. -![](../../assets/mindmap_toolbar_of_shape.png) +![](/img/mindmap_toolbar_of_shape.png) When you click on any shape, it becomes editable and gets personal interface elements: @@ -85,17 +85,17 @@ Double-click the text of a shape to edit it. In the default mode, you can set links to other shapes, adjust their position and form, as well as add text to the line and delete unnecessary links. -![](../../assets/line_with_toolbar.png) +![](/img/line_with_toolbar.png) In the default mode, you can also add a text to the line by double-clicking on it. Click the text to define its direction or delete it. Double-click the text to edit it. -![](../../assets/line_with_text.png) +![](/img/line_with_text.png) ## Managing groups You can drag groups from the shapebar into the grid area to place them at the desired positions. You can put several shapes or other groups into a group and move them as a unit, copy, or delete. -![](../../assets/group_toolbar.png) +![](/img/group_toolbar.png) When you click on any group, it becomes editable and gets personal interface elements: @@ -110,7 +110,7 @@ Double-click the text in the header of the group to edit it. You can drag a swimlane from the shapebar into the grid area to place it at the desired position. -![](../../assets/swimlane_toolbar.png) +![](/img/swimlane_toolbar.png) When you click on any swimlane, it becomes editable and gets personal interface elements: @@ -123,7 +123,7 @@ When you click on any swimlane, it becomes editable and gets personal interface Besides, there are the abilities to add, move, or remove columns or rows of the swimlane via the options of the context menu. The context menu will appear after the user clicks on the icon of a swimlane subheader. -![](../../assets/swimlane_contextmenu.png) +![](/img/swimlane_contextmenu.png) Note, that some options of moving the first/last columns and rows are deactivated by internal settings of a swimlane. @@ -178,4 +178,4 @@ From v5.0, you can align or distribute a group of items by selecting them and cl | **Align vertical centers** | Align items to the center along the y-axis | | **Align bottom** | Align items to the bottom along the y-axis | -![](../../assets/editor/group_align_and_distribution.gif) +![](/img/editor/group_align_and_distribution.gif) diff --git a/docs/guides/diagram_editor/toolbar.md b/docs/guides/diagram_editor/toolbar.md index 7c4bc167c..4c9cee4a9 100644 --- a/docs/guides/diagram_editor/toolbar.md +++ b/docs/guides/diagram_editor/toolbar.md @@ -8,7 +8,7 @@ description: You can learn about the Toolbar of editor in the documentation of t Toolbar is a top part of Diagram Editor that helps users to control the editing process. -![](../../assets/diagram-editor-toolbar/scale-default-mode.png) +![](/img/diagram-editor-toolbar/scale-default-mode.png) To configure the Toolbar you can use the following properties: @@ -88,7 +88,7 @@ Toolbar items are represented by **service elements**. You can use and configure The **file** collection of items looks in the following way: - ![](../../assets/diagram-editor-toolbar/file-default-mode.png) + ![](/img/diagram-editor-toolbar/file-default-mode.png) - **importJson** - opens a dialog box to import a file in the JSON format @@ -135,7 +135,7 @@ Toolbar items are represented by **service elements**. You can use and configure - selectNone ~~~ - ![](../../assets/diagram-editor-toolbar/edit-default-mode.png) + ![](/img/diagram-editor-toolbar/edit-default-mode.png) In the ***org/mindmap*** modes the **edit** collection of items has the following default structure: @@ -151,7 +151,7 @@ Toolbar items are represented by **service elements**. You can use and configure - selectNone ~~~ - ![](../../assets/diagram-editor-toolbar/edit-org-mode.png) + ![](/img/diagram-editor-toolbar/edit-org-mode.png) - **undo** - takes a step back in the history of changes @@ -199,7 +199,7 @@ Toolbar items are represented by **service elements**. You can use and configure - zoomOut ~~~ - ![](../../assets/diagram-editor-toolbar/view-default-mode.png) + ![](/img/diagram-editor-toolbar/view-default-mode.png) In the ***org/mindmap*** modes the **view** collection of items has the following default structure: @@ -222,7 +222,7 @@ Toolbar items are represented by **service elements**. You can use and configure - zoomOut ~~~ - ![](../../assets/diagram-editor-toolbar/view-org-mode.png) + ![](/img/diagram-editor-toolbar/view-org-mode.png) - **theme** - forms a group of service elements for applying themes @@ -292,7 +292,7 @@ Toolbar items are represented by **service elements**. You can use and configure - distributeHorizontal ~~~ - ![](../../assets/diagram-editor-toolbar/arrange-default-mode.png) + ![](/img/diagram-editor-toolbar/arrange-default-mode.png) - **layout** - forms a group of service elements to autoplace Diagram Editor elements @@ -382,7 +382,7 @@ Toolbar items are represented by **service elements**. You can use and configure
The **scale** item looks in the following way: - ![](../../assets/diagram-editor-toolbar/scale-default-mode.png) + ![](/img/diagram-editor-toolbar/scale-default-mode.png)
- [**separator**](https://docs.dhtmlx.com/suite/toolbar/api/api_separator_properties/) - a horizontal (between menu options) or vertical (between toolbar controls) line separating items/groups of items from each other. diff --git a/docs/guides/inline_editing.md b/docs/guides/inline_editing.md index 2922a72b1..8b6ce1692 100644 --- a/docs/guides/inline_editing.md +++ b/docs/guides/inline_editing.md @@ -10,7 +10,7 @@ Inline editing lets you edit the text content of a diagram item by double-clicki Inline editing for Lines is enabled only in the default mode of Diagram. -![](../assets/inline_editing.gif) +![](/img/inline_editing.gif) :::note Inline editing does not work for custom shapes. diff --git a/docs/guides/integrations/angular_integration.md b/docs/guides/integrations/angular_integration.md index 987f57861..de0af7314 100644 --- a/docs/guides/integrations/angular_integration.md +++ b/docs/guides/integrations/angular_integration.md @@ -264,6 +264,6 @@ platformBrowserDynamic() After that, you can start the app to see Diagram Editor loaded with data on a page. -![Diagram Editor initialization](../../assets/trial_diagram.png) +![Diagram Editor initialization](/img/trial_diagram.png) Now you know how to integrate DHTMLX Diagram Editor with Angular. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/angular-diagram-demo). diff --git a/docs/guides/integrations/react_integration.md b/docs/guides/integrations/react_integration.md index 6e38f7475..869c40168 100644 --- a/docs/guides/integrations/react_integration.md +++ b/docs/guides/integrations/react_integration.md @@ -224,6 +224,6 @@ useEffect(() => { After that, you can start the app to see Diagram Editor loaded with data on a page. -![Diagram Editor initialization](../../assets/trial_diagram.png) +![Diagram Editor initialization](/img/trial_diagram.png) Now you know how to integrate DHTMLX Diagram Editor with React. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/react-diagram-demo). diff --git a/docs/guides/integrations/svelte_integration.md b/docs/guides/integrations/svelte_integration.md index 41c764b61..894da3e15 100644 --- a/docs/guides/integrations/svelte_integration.md +++ b/docs/guides/integrations/svelte_integration.md @@ -238,6 +238,6 @@ onDestroy(() => { After that, when we start the app, we should see Diagram Editor loaded with data on a page. -![Diagram Editor initialization](../../assets/trial_diagram.png) +![Diagram Editor initialization](/img/trial_diagram.png) Now you should have a basic setup for integrating DHTMLX Diagram Editor with Svelte. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/svelte-diagram-demo). diff --git a/docs/guides/integrations/vue_integration.md b/docs/guides/integrations/vue_integration.md index 59882911c..28d2a7988 100644 --- a/docs/guides/integrations/vue_integration.md +++ b/docs/guides/integrations/vue_integration.md @@ -245,6 +245,6 @@ export default { After that, you can start the app to see Diagram Editor loaded with data on a page. -![Diagram Editor initialization](../../assets/trial_diagram.png) +![Diagram Editor initialization](/img/trial_diagram.png) Now you know how to integrate DHTMLX Diagram Editor with Vue. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/vue-diagram-demo). diff --git a/docs/guides/manipulating_items.md b/docs/guides/manipulating_items.md index 22b00a43d..93bb39358 100644 --- a/docs/guides/manipulating_items.md +++ b/docs/guides/manipulating_items.md @@ -91,7 +91,7 @@ diagram.autoPlace({ }); ~~~ -![Autoplacement with a generated radial dataset](../assets/radial_datasets_generator.png) +![Autoplacement with a generated radial dataset](/img/radial_datasets_generator.png) **Related sample:** [Diagram. Default mode. Arranging a generated radial dataset with autoplacement](https://snippet.dhtmlx.com/rwsime82) diff --git a/docs/guides/themes/themes.md b/docs/guides/themes/themes.md index 683adcb92..a8c12b779 100644 --- a/docs/guides/themes/themes.md +++ b/docs/guides/themes/themes.md @@ -21,7 +21,7 @@ You can try all themes in the example below: ## Light theme (default) -![](../../assets/light_theme.png) +![](/img/light_theme.png) The default **"light"** theme is configured on the base of the CSS variables which are listed below: @@ -206,7 +206,7 @@ The default **"light"** theme is configured on the base of the CSS variables whi ## Light high contrast theme -![](../../assets/light_high_contrast_theme.png) +![](/img/light_high_contrast_theme.png) The **"contrast-light"** theme is configured both on the base of the [root CSS variables](#light-theme-default) and the variables which are listed below: @@ -251,7 +251,7 @@ The **"contrast-light"** theme is configured both on the base of the [root CSS v ## Dark theme -![](../../assets/dark_theme.png) +![](/img/dark_theme.png) The **"dark"** theme is configured both on the base of the [root CSS variables](#light-theme-default) and the variables which are listed below: @@ -314,7 +314,7 @@ The **"dark"** theme is configured both on the base of the [root CSS variables]( ## Dark high contrast theme -![](../../assets/dark_high_contrast_theme.png) +![](/img/dark_high_contrast_theme.png) The **"contrast-dark"** theme is configured both on the base of the [root CSS variables](#light-theme-default) and the variables which are listed below: diff --git a/docs/guides/touch_support.md b/docs/guides/touch_support.md index d59db97ee..db025c208 100644 --- a/docs/guides/touch_support.md +++ b/docs/guides/touch_support.md @@ -6,7 +6,7 @@ description: You can learn about touch support in the documentation of the DHTML # Touch support -![](../assets/touch_support.png) +![](/img/touch_support.png) Since version 4.2 and upper, the DHTMLX Diagram library provides the built-in Touch support that should work out of the box. diff --git a/docs/guides/using_typescript.md b/docs/guides/using_typescript.md index 032251de2..a8360e847 100644 --- a/docs/guides/using_typescript.md +++ b/docs/guides/using_typescript.md @@ -12,7 +12,7 @@ Starting from v3.1, the library of DHTMLX Diagram provides the ability to use Ty You can try out the functionality directly in our Snippet Tool. ::: -![](../assets/typescript.png) +![](/img/typescript.png) ## Advantages of using TypeScript diff --git a/docs/overview.md b/docs/overview.md index 4f1861e34..3352c49d8 100644 --- a/docs/overview.md +++ b/docs/overview.md @@ -18,11 +18,11 @@ You can choose shapes of desired types, link them by suitable connectors and bui | [Data Planning Model](https://snippet.dhtmlx.com/e6zm6wh1) | [Vertical Decision Tree](https://snippet.dhtmlx.com/t6t8ay80) | [Wide Flowchart](https://snippet.dhtmlx.com/4d4k3o8p) | | ---------------------------------------------------------- | ------------------------------------------------------------- | ----------------------------------------------------- | -| ![](assets/icon_data_planning_model.png) | ![](assets/icon_vert_decision_tree.png) | ![](assets/icon_wide_diagram.png) | +| ![](/img/icon_data_planning_model.png) | ![](/img/icon_vert_decision_tree.png) | ![](/img/icon_wide_diagram.png) | | [Decision Tree](https://snippet.dhtmlx.com/7bn52dl1) | [Activity Diagram](https://snippet.dhtmlx.com/a9t2z2dt) | | ---------------------------------------------------- | ------------------------------------------------------- | -| ![](assets/icon_decision_tree.png) | ![](assets/icon_activity.png) | +| ![](/img/icon_decision_tree.png) | ![](/img/icon_activity.png) | ### Custom shapes @@ -30,11 +30,11 @@ You can easily create [your own templates of shapes](/shapes/custom_shape/) and | [Life Cycle Diagram](https://snippet.dhtmlx.com/y4k51owl) | [Venn Diagram template](https://snippet.dhtmlx.com/2tzyfois) | [UML Class Diagram template](https://snippet.dhtmlx.com/madymxt5) | | --------------------------------------------------------- | --------------------------------------------------- | -------------------------------------------------------- | -| ![](assets/sticky.png) | ![](assets/venn.png) | ![](assets/html.png) | +| ![](/img/sticky.png) | ![](/img/venn.png) | ![](/img/html.png) | | [Network Diagram template](https://snippet.dhtmlx.com/u1xqyo9w) | [Game levels and locations](https://snippet.dhtmlx.com/1h4j9gb3) | | ------------------------------------------------------ | ---------------------------------------------------------------- | -| ![](assets/network.png) | ![](assets/game_levels.png) | +| ![](/img/network.png) | ![](/img/game_levels.png) | ### Groups @@ -42,7 +42,7 @@ You can draw simple or more complicated schemes by grouping shapes in different | [Diagram Editor. Default mode. Virtual private cloud architecture](https://snippet.dhtmlx.com/0hf8ahrb) | | ------------------------------------------------------------------------------------------------ | -| ![](assets/virtual_cloud.png) | +| ![](/img/virtual_cloud.png) | ### Swimlanes @@ -50,7 +50,7 @@ Usage of swimlanes of the DHTMLX Diagram library lets you represent any process | [Diagram. Default mode. Swimlane template](https://snippet.dhtmlx.com/z6x5m3gb) | | ------------------------------------------------------------------------------- | -| ![](assets/swimlane.png) | +| ![](/img/swimlane.png) | ### Line titles @@ -72,7 +72,7 @@ In the hierarchical order, the assistant items are displayed between parent and | [Diagram editor. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/og4qm3ja) | | ------------------------------------------------------------------------------------------- | -| ![](assets/orgchart_with_assistant.png) | +| ![](/img/orgchart_with_assistant.png) | The connection between parent shape and its partner items is always horizontal. Also, the connections between parent shape and all its children become horizontal when you add the partner item for a parent, even if the connections were vertical before. @@ -84,11 +84,11 @@ Here are examples of how the connections of parent shapes look like with one, tw | One partner | Two partners | | ----------------------------------------- | ------------------------------------------ | -| ![](assets/orgchart_with_one_partner.png) | ![](assets/orgchart_with_two_partners.png) | +| ![](/img/orgchart_with_one_partner.png) | ![](/img/orgchart_with_two_partners.png) | | Three partners | Four partners | | -------------------------------------------- | ------------------------------------------- | -| ![](assets/orgchart_with_three_partners.png) | ![](assets/orgchart_with_four_partners.png) | +| ![](/img/orgchart_with_three_partners.png) | ![](/img/orgchart_with_four_partners.png) | ### Custom shapes @@ -96,7 +96,7 @@ An example of adding custom shapes for creating a diagram to present the hierarc | [Diagram Editor. Org chart mode. Medical hierarchy diagram template](https://snippet.dhtmlx.com/8fubjmlz) | | -------------------------------------------------------------------------------------------------- | -| ![](assets/medical_hierarchy_overview.png) | +| ![](/img/medical_hierarchy_overview.png) | ## Diagram in the mindmap mode @@ -104,7 +104,7 @@ The Mindmap mode is used to represent a core topic or idea surrounded by the bra | [Diagram. Mindmap mode. Emotions mind map](https://snippet.dhtmlx.com/twd25ww1) | | ------------------------------------------------------------------------------- | -| ![](assets/mindmap_emotions.png) | +| ![](/img/mindmap_emotions.png) | The shapes are connected by curved lines and arranged around a central shape of the diagram. diff --git a/docs/shapes/default_shapes.md b/docs/shapes/default_shapes.md index 3872f3147..24b544e41 100644 --- a/docs/shapes/default_shapes.md +++ b/docs/shapes/default_shapes.md @@ -18,11 +18,11 @@ See [the full list of configuration properties of a shape object](/shapes/config In the **default** mode of Diagram, the basic set includes **flow chart** shapes. Check the available types of flow chart shapes: -![](../assets/flowshapes_types.png) +![](/img/flowshapes_types.png) There is also the `"text"` item that presents a simple text that can be used in a diagram as a shape and connected with other shapes. -![](../assets/text_item.png) +![](/img/text_item.png) **Related sample**: [Diagram Editor. Default mode. Wide flowchart](https://snippet.dhtmlx.com/4d4k3o8p) @@ -40,13 +40,13 @@ In the **org chart** mode of Diagram, the basic set includes two types of shapes Each shape with the `"card"` type has a text and a colored header line. Shapes located on the same level have headers of identical color. Examples of "card" shapes are shown in the diagram of the org chart type below: -![](../assets/orgchart_card_shapes.png) +![](/img/orgchart_card_shapes.png) **Related sample**: [Diagram. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/5ign6fyy?mode=result) The `"img-card"` type can be used for adding shapes with images. Don't forget to provide images for cards via the `img` attribute of the shape object. The following org chart diagram is built with shapes of the `"img-card"` type: -![](../assets/orgchart_imgcard_shapes.png) +![](/img/orgchart_imgcard_shapes.png) **Related sample**: [Diagram editor. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/og4qm3ja?mode=result) @@ -59,7 +59,7 @@ and [the `"img-card"` shapes](/diagram/shapes/configuration_properties/#properti In the **mindmap** mode of Diagram, the `"topic"` type of shapes is the basic one. Each shape has a text and a colored border. The color of the outline depends on the level the shape belongs to. Examples of "topic" shapes are given in the following diagram of the mindmap type: -![](../assets/mindmap_basic.png) +![](/img/mindmap_basic.png) **Related sample**: [Diagram. Mindmap mode. Basic initialization](https://snippet.dhtmlx.com/3igf1gd5) @@ -73,15 +73,15 @@ The basic types of shapes in the **PERT** mode of Diagram are: - the `"task"` type - a shape that has a header and renders dates and duration: -![](../assets/pert_task_shape.png) +![](/img/pert_task_shape.png) - the `"milestone"` type - a shape without duration that indicates a key point of the project: -![](../assets/pert_milestone_shape.png) +![](/img/pert_milestone_shape.png) - the `"project"` type - a container used to [group the shapes of the `"task"` and `"milestone"` types](/groups/#grouping-shapes-in-the-pert-mode): -![](../assets/pert_project_group.png) +![](/img/pert_project_group.png) **Related sample**: [Diagram. PERT chart. Initialization ](https://snippet.dhtmlx.com/4h5fi7xd) diff --git a/docs/swimlanes/index.md b/docs/swimlanes/index.md index 08f44538a..f948a075d 100644 --- a/docs/swimlanes/index.md +++ b/docs/swimlanes/index.md @@ -120,7 +120,7 @@ layout: [ ] ~~~ -![](../assets/swimlane_cells.png) +![](/img/swimlane_cells.png) If needed you can group a range of cells and remove a border(s) between them. To do this, choose any cell from the range and replace unique numbers of the cell(s) from the range with the number of this cell.
Here is an example of grouping first two cells placed in the first row: @@ -134,7 +134,7 @@ layout: [ The result will look like this: -![](../assets/swimlane_merge_cell_row.png) +![](/img/swimlane_merge_cell_row.png) Here is an example of grouping the cells placed in the second column: @@ -147,7 +147,7 @@ layout: [ The result: -![](../assets/swimlane_merge_cell_col.png) +![](/img/swimlane_merge_cell_col.png) **Related sample**: [Diagram editor. Default mode. Configuring columns and rows in swimlanes](https://snippet.dhtmlx.com/uzx5ulal) diff --git a/docs/assets/dark_high_contrast_theme.png b/static/img/dark_high_contrast_theme.png similarity index 100% rename from docs/assets/dark_high_contrast_theme.png rename to static/img/dark_high_contrast_theme.png diff --git a/docs/assets/dark_theme.png b/static/img/dark_theme.png similarity index 100% rename from docs/assets/dark_theme.png rename to static/img/dark_theme.png diff --git a/docs/assets/default_editor.gif b/static/img/default_editor.gif similarity index 100% rename from docs/assets/default_editor.gif rename to static/img/default_editor.gif diff --git a/docs/assets/default_editor.png b/static/img/default_editor.png similarity index 100% rename from docs/assets/default_editor.png rename to static/img/default_editor.png diff --git a/docs/assets/default_shape_toolbar.png b/static/img/default_shape_toolbar.png similarity index 100% rename from docs/assets/default_shape_toolbar.png rename to static/img/default_shape_toolbar.png diff --git a/docs/assets/diagram-editor-toolbar/arrange-default-mode.png b/static/img/diagram-editor-toolbar/arrange-default-mode.png similarity index 100% rename from docs/assets/diagram-editor-toolbar/arrange-default-mode.png rename to static/img/diagram-editor-toolbar/arrange-default-mode.png diff --git a/docs/assets/diagram-editor-toolbar/edit-default-mode.png b/static/img/diagram-editor-toolbar/edit-default-mode.png similarity index 100% rename from docs/assets/diagram-editor-toolbar/edit-default-mode.png rename to static/img/diagram-editor-toolbar/edit-default-mode.png diff --git a/docs/assets/diagram-editor-toolbar/edit-org-mode.png b/static/img/diagram-editor-toolbar/edit-org-mode.png similarity index 100% rename from docs/assets/diagram-editor-toolbar/edit-org-mode.png rename to static/img/diagram-editor-toolbar/edit-org-mode.png diff --git a/docs/assets/diagram-editor-toolbar/file-default-mode.png b/static/img/diagram-editor-toolbar/file-default-mode.png similarity index 100% rename from docs/assets/diagram-editor-toolbar/file-default-mode.png rename to static/img/diagram-editor-toolbar/file-default-mode.png diff --git a/docs/assets/diagram-editor-toolbar/file-org-mode.png b/static/img/diagram-editor-toolbar/file-org-mode.png similarity index 100% rename from docs/assets/diagram-editor-toolbar/file-org-mode.png rename to static/img/diagram-editor-toolbar/file-org-mode.png diff --git a/docs/assets/diagram-editor-toolbar/scale-all-modes.png b/static/img/diagram-editor-toolbar/scale-all-modes.png similarity index 100% rename from docs/assets/diagram-editor-toolbar/scale-all-modes.png rename to static/img/diagram-editor-toolbar/scale-all-modes.png diff --git a/docs/assets/diagram-editor-toolbar/scale-default-mode.png b/static/img/diagram-editor-toolbar/scale-default-mode.png similarity index 100% rename from docs/assets/diagram-editor-toolbar/scale-default-mode.png rename to static/img/diagram-editor-toolbar/scale-default-mode.png diff --git a/docs/assets/diagram-editor-toolbar/scale-org-mode.png b/static/img/diagram-editor-toolbar/scale-org-mode.png similarity index 100% rename from docs/assets/diagram-editor-toolbar/scale-org-mode.png rename to static/img/diagram-editor-toolbar/scale-org-mode.png diff --git a/docs/assets/diagram-editor-toolbar/view-default-mode.png b/static/img/diagram-editor-toolbar/view-default-mode.png similarity index 100% rename from docs/assets/diagram-editor-toolbar/view-default-mode.png rename to static/img/diagram-editor-toolbar/view-default-mode.png diff --git a/docs/assets/diagram-editor-toolbar/view-org-mode.png b/static/img/diagram-editor-toolbar/view-org-mode.png similarity index 100% rename from docs/assets/diagram-editor-toolbar/view-org-mode.png rename to static/img/diagram-editor-toolbar/view-org-mode.png diff --git a/docs/assets/direct_mode.png b/static/img/direct_mode.png similarity index 100% rename from docs/assets/direct_mode.png rename to static/img/direct_mode.png diff --git a/docs/assets/direct_ortogonal.png b/static/img/direct_ortogonal.png similarity index 100% rename from docs/assets/direct_ortogonal.png rename to static/img/direct_ortogonal.png diff --git a/docs/assets/direct_radial.png b/static/img/direct_radial.png similarity index 100% rename from docs/assets/direct_radial.png rename to static/img/direct_radial.png diff --git a/docs/assets/edges_mode.png b/static/img/edges_mode.png similarity index 100% rename from docs/assets/edges_mode.png rename to static/img/edges_mode.png diff --git a/docs/assets/edges_ortogonal.png b/static/img/edges_ortogonal.png similarity index 100% rename from docs/assets/edges_ortogonal.png rename to static/img/edges_ortogonal.png diff --git a/docs/assets/edges_radial.png b/static/img/edges_radial.png similarity index 100% rename from docs/assets/edges_radial.png rename to static/img/edges_radial.png diff --git a/docs/assets/edges_straight_mode.png b/static/img/edges_straight_mode.png similarity index 100% rename from docs/assets/edges_straight_mode.png rename to static/img/edges_straight_mode.png diff --git a/docs/assets/editbar-basic-controls/avatar.png b/static/img/editbar-basic-controls/avatar.png similarity index 100% rename from docs/assets/editbar-basic-controls/avatar.png rename to static/img/editbar-basic-controls/avatar.png diff --git a/docs/assets/editbar-basic-controls/button.png b/static/img/editbar-basic-controls/button.png similarity index 100% rename from docs/assets/editbar-basic-controls/button.png rename to static/img/editbar-basic-controls/button.png diff --git a/docs/assets/editbar-basic-controls/checkbox.png b/static/img/editbar-basic-controls/checkbox.png similarity index 100% rename from docs/assets/editbar-basic-controls/checkbox.png rename to static/img/editbar-basic-controls/checkbox.png diff --git a/docs/assets/editbar-basic-controls/checkboxgroup.png b/static/img/editbar-basic-controls/checkboxgroup.png similarity index 100% rename from docs/assets/editbar-basic-controls/checkboxgroup.png rename to static/img/editbar-basic-controls/checkboxgroup.png diff --git a/docs/assets/editbar-basic-controls/colorpicker.png b/static/img/editbar-basic-controls/colorpicker.png similarity index 100% rename from docs/assets/editbar-basic-controls/colorpicker.png rename to static/img/editbar-basic-controls/colorpicker.png diff --git a/docs/assets/editbar-basic-controls/combo.png b/static/img/editbar-basic-controls/combo.png similarity index 100% rename from docs/assets/editbar-basic-controls/combo.png rename to static/img/editbar-basic-controls/combo.png diff --git a/docs/assets/editbar-basic-controls/container.png b/static/img/editbar-basic-controls/container.png similarity index 100% rename from docs/assets/editbar-basic-controls/container.png rename to static/img/editbar-basic-controls/container.png diff --git a/docs/assets/editbar-basic-controls/datepicker.png b/static/img/editbar-basic-controls/datepicker.png similarity index 100% rename from docs/assets/editbar-basic-controls/datepicker.png rename to static/img/editbar-basic-controls/datepicker.png diff --git a/docs/assets/editbar-basic-controls/fieldset.png b/static/img/editbar-basic-controls/fieldset.png similarity index 100% rename from docs/assets/editbar-basic-controls/fieldset.png rename to static/img/editbar-basic-controls/fieldset.png diff --git a/docs/assets/editbar-basic-controls/input.png b/static/img/editbar-basic-controls/input.png similarity index 100% rename from docs/assets/editbar-basic-controls/input.png rename to static/img/editbar-basic-controls/input.png diff --git a/docs/assets/editbar-basic-controls/radiogroup.png b/static/img/editbar-basic-controls/radiogroup.png similarity index 100% rename from docs/assets/editbar-basic-controls/radiogroup.png rename to static/img/editbar-basic-controls/radiogroup.png diff --git a/docs/assets/editbar-basic-controls/select.png b/static/img/editbar-basic-controls/select.png similarity index 100% rename from docs/assets/editbar-basic-controls/select.png rename to static/img/editbar-basic-controls/select.png diff --git a/docs/assets/editbar-basic-controls/slider.png b/static/img/editbar-basic-controls/slider.png similarity index 100% rename from docs/assets/editbar-basic-controls/slider.png rename to static/img/editbar-basic-controls/slider.png diff --git a/docs/assets/editbar-basic-controls/textarea.png b/static/img/editbar-basic-controls/textarea.png similarity index 100% rename from docs/assets/editbar-basic-controls/textarea.png rename to static/img/editbar-basic-controls/textarea.png diff --git a/docs/assets/editbar-basic-controls/timepicker.png b/static/img/editbar-basic-controls/timepicker.png similarity index 100% rename from docs/assets/editbar-basic-controls/timepicker.png rename to static/img/editbar-basic-controls/timepicker.png diff --git a/docs/assets/editbar-basic-controls/toggle.png b/static/img/editbar-basic-controls/toggle.png similarity index 100% rename from docs/assets/editbar-basic-controls/toggle.png rename to static/img/editbar-basic-controls/toggle.png diff --git a/docs/assets/editbar-basic-controls/togglegroup.png b/static/img/editbar-basic-controls/togglegroup.png similarity index 100% rename from docs/assets/editbar-basic-controls/togglegroup.png rename to static/img/editbar-basic-controls/togglegroup.png diff --git a/docs/assets/editbar-complex-controls/arrange.png b/static/img/editbar-complex-controls/arrange.png similarity index 100% rename from docs/assets/editbar-complex-controls/arrange.png rename to static/img/editbar-complex-controls/arrange.png diff --git a/docs/assets/editbar-complex-controls/border.png b/static/img/editbar-complex-controls/border.png similarity index 100% rename from docs/assets/editbar-complex-controls/border.png rename to static/img/editbar-complex-controls/border.png diff --git a/docs/assets/editbar-complex-controls/gridstep.png b/static/img/editbar-complex-controls/gridstep.png similarity index 100% rename from docs/assets/editbar-complex-controls/gridstep.png rename to static/img/editbar-complex-controls/gridstep.png diff --git a/docs/assets/editbar-complex-controls/header.png b/static/img/editbar-complex-controls/header.png similarity index 100% rename from docs/assets/editbar-complex-controls/header.png rename to static/img/editbar-complex-controls/header.png diff --git a/docs/assets/editbar-complex-controls/headercommon.png b/static/img/editbar-complex-controls/headercommon.png similarity index 100% rename from docs/assets/editbar-complex-controls/headercommon.png rename to static/img/editbar-complex-controls/headercommon.png diff --git a/docs/assets/editbar-complex-controls/headerposition.png b/static/img/editbar-complex-controls/headerposition.png similarity index 100% rename from docs/assets/editbar-complex-controls/headerposition.png rename to static/img/editbar-complex-controls/headerposition.png diff --git a/docs/assets/editbar-complex-controls/lineshape.png b/static/img/editbar-complex-controls/lineshape.png similarity index 100% rename from docs/assets/editbar-complex-controls/lineshape.png rename to static/img/editbar-complex-controls/lineshape.png diff --git a/docs/assets/editbar-complex-controls/pointerview.png b/static/img/editbar-complex-controls/pointerview.png similarity index 100% rename from docs/assets/editbar-complex-controls/pointerview.png rename to static/img/editbar-complex-controls/pointerview.png diff --git a/docs/assets/editbar-complex-controls/position.png b/static/img/editbar-complex-controls/position.png similarity index 100% rename from docs/assets/editbar-complex-controls/position.png rename to static/img/editbar-complex-controls/position.png diff --git a/docs/assets/editbar-complex-controls/size.png b/static/img/editbar-complex-controls/size.png similarity index 100% rename from docs/assets/editbar-complex-controls/size.png rename to static/img/editbar-complex-controls/size.png diff --git a/docs/assets/editbar-complex-controls/textalign.png b/static/img/editbar-complex-controls/textalign.png similarity index 100% rename from docs/assets/editbar-complex-controls/textalign.png rename to static/img/editbar-complex-controls/textalign.png diff --git a/docs/assets/editbar-complex-controls/textstyle.png b/static/img/editbar-complex-controls/textstyle.png similarity index 100% rename from docs/assets/editbar-complex-controls/textstyle.png rename to static/img/editbar-complex-controls/textstyle.png diff --git a/docs/assets/editor/group_align_and_distribution.gif b/static/img/editor/group_align_and_distribution.gif similarity index 100% rename from docs/assets/editor/group_align_and_distribution.gif rename to static/img/editor/group_align_and_distribution.gif diff --git a/docs/assets/flowshapes_types.png b/static/img/flowshapes_types.png similarity index 100% rename from docs/assets/flowshapes_types.png rename to static/img/flowshapes_types.png diff --git a/docs/assets/game_levels.png b/static/img/game_levels.png similarity index 100% rename from docs/assets/game_levels.png rename to static/img/game_levels.png diff --git a/docs/assets/group_behavior.gif b/static/img/group_behavior.gif similarity index 100% rename from docs/assets/group_behavior.gif rename to static/img/group_behavior.gif diff --git a/docs/assets/group_toolbar.png b/static/img/group_toolbar.png similarity index 100% rename from docs/assets/group_toolbar.png rename to static/img/group_toolbar.png diff --git a/docs/assets/html.png b/static/img/html.png similarity index 100% rename from docs/assets/html.png rename to static/img/html.png diff --git a/docs/assets/icon_activity.png b/static/img/icon_activity.png similarity index 100% rename from docs/assets/icon_activity.png rename to static/img/icon_activity.png diff --git a/docs/assets/icon_data_planning_model.png b/static/img/icon_data_planning_model.png similarity index 100% rename from docs/assets/icon_data_planning_model.png rename to static/img/icon_data_planning_model.png diff --git a/docs/assets/icon_decision_tree.png b/static/img/icon_decision_tree.png similarity index 100% rename from docs/assets/icon_decision_tree.png rename to static/img/icon_decision_tree.png diff --git a/docs/assets/icon_vert_decision_tree.png b/static/img/icon_vert_decision_tree.png similarity index 100% rename from docs/assets/icon_vert_decision_tree.png rename to static/img/icon_vert_decision_tree.png diff --git a/docs/assets/icon_wide_diagram.png b/static/img/icon_wide_diagram.png similarity index 100% rename from docs/assets/icon_wide_diagram.png rename to static/img/icon_wide_diagram.png diff --git a/docs/assets/inline_editing.gif b/static/img/inline_editing.gif similarity index 100% rename from docs/assets/inline_editing.gif rename to static/img/inline_editing.gif diff --git a/docs/assets/light_high_contrast_theme.png b/static/img/light_high_contrast_theme.png similarity index 100% rename from docs/assets/light_high_contrast_theme.png rename to static/img/light_high_contrast_theme.png diff --git a/docs/assets/light_theme.png b/static/img/light_theme.png similarity index 100% rename from docs/assets/light_theme.png rename to static/img/light_theme.png diff --git a/docs/assets/line_with_text.png b/static/img/line_with_text.png similarity index 100% rename from docs/assets/line_with_text.png rename to static/img/line_with_text.png diff --git a/docs/assets/line_with_toolbar.png b/static/img/line_with_toolbar.png similarity index 100% rename from docs/assets/line_with_toolbar.png rename to static/img/line_with_toolbar.png diff --git a/docs/assets/linegap_config.png b/static/img/linegap_config.png similarity index 100% rename from docs/assets/linegap_config.png rename to static/img/linegap_config.png diff --git a/docs/assets/medical_hierarchy_overview.png b/static/img/medical_hierarchy_overview.png similarity index 100% rename from docs/assets/medical_hierarchy_overview.png rename to static/img/medical_hierarchy_overview.png diff --git a/docs/assets/mindmap_basic.png b/static/img/mindmap_basic.png similarity index 100% rename from docs/assets/mindmap_basic.png rename to static/img/mindmap_basic.png diff --git a/docs/assets/mindmap_editor_draggable.gif b/static/img/mindmap_editor_draggable.gif similarity index 100% rename from docs/assets/mindmap_editor_draggable.gif rename to static/img/mindmap_editor_draggable.gif diff --git a/docs/assets/mindmap_editor_draggable.png b/static/img/mindmap_editor_draggable.png similarity index 100% rename from docs/assets/mindmap_editor_draggable.png rename to static/img/mindmap_editor_draggable.png diff --git a/docs/assets/mindmap_emotions.png b/static/img/mindmap_emotions.png similarity index 100% rename from docs/assets/mindmap_emotions.png rename to static/img/mindmap_emotions.png diff --git a/docs/assets/mindmap_toolbar_of_shape.png b/static/img/mindmap_toolbar_of_shape.png similarity index 100% rename from docs/assets/mindmap_toolbar_of_shape.png rename to static/img/mindmap_toolbar_of_shape.png diff --git a/docs/assets/network.png b/static/img/network.png similarity index 100% rename from docs/assets/network.png rename to static/img/network.png diff --git a/docs/assets/orgchart_card_shapes.png b/static/img/orgchart_card_shapes.png similarity index 100% rename from docs/assets/orgchart_card_shapes.png rename to static/img/orgchart_card_shapes.png diff --git a/docs/assets/orgchart_editor_assistant.png b/static/img/orgchart_editor_assistant.png similarity index 100% rename from docs/assets/orgchart_editor_assistant.png rename to static/img/orgchart_editor_assistant.png diff --git a/docs/assets/orgchart_editor_draggable.png b/static/img/orgchart_editor_draggable.png similarity index 100% rename from docs/assets/orgchart_editor_draggable.png rename to static/img/orgchart_editor_draggable.png diff --git a/docs/assets/orgchart_editor_draggable_assistant.gif b/static/img/orgchart_editor_draggable_assistant.gif similarity index 100% rename from docs/assets/orgchart_editor_draggable_assistant.gif rename to static/img/orgchart_editor_draggable_assistant.gif diff --git a/docs/assets/orgchart_editor_draggable_partner.gif b/static/img/orgchart_editor_draggable_partner.gif similarity index 100% rename from docs/assets/orgchart_editor_draggable_partner.gif rename to static/img/orgchart_editor_draggable_partner.gif diff --git a/docs/assets/orgchart_imgcard_shapes.png b/static/img/orgchart_imgcard_shapes.png similarity index 100% rename from docs/assets/orgchart_imgcard_shapes.png rename to static/img/orgchart_imgcard_shapes.png diff --git a/docs/assets/orgchart_shape_toolbar_horizontal.png b/static/img/orgchart_shape_toolbar_horizontal.png similarity index 100% rename from docs/assets/orgchart_shape_toolbar_horizontal.png rename to static/img/orgchart_shape_toolbar_horizontal.png diff --git a/docs/assets/orgchart_shape_toolbar_vertical.png b/static/img/orgchart_shape_toolbar_vertical.png similarity index 100% rename from docs/assets/orgchart_shape_toolbar_vertical.png rename to static/img/orgchart_shape_toolbar_vertical.png diff --git a/docs/assets/orgchart_with_assistant.png b/static/img/orgchart_with_assistant.png similarity index 100% rename from docs/assets/orgchart_with_assistant.png rename to static/img/orgchart_with_assistant.png diff --git a/docs/assets/orgchart_with_four_partners.png b/static/img/orgchart_with_four_partners.png similarity index 100% rename from docs/assets/orgchart_with_four_partners.png rename to static/img/orgchart_with_four_partners.png diff --git a/docs/assets/orgchart_with_one_partner.png b/static/img/orgchart_with_one_partner.png similarity index 100% rename from docs/assets/orgchart_with_one_partner.png rename to static/img/orgchart_with_one_partner.png diff --git a/docs/assets/orgchart_with_three_partners.png b/static/img/orgchart_with_three_partners.png similarity index 100% rename from docs/assets/orgchart_with_three_partners.png rename to static/img/orgchart_with_three_partners.png diff --git a/docs/assets/orgchart_with_two_partners.png b/static/img/orgchart_with_two_partners.png similarity index 100% rename from docs/assets/orgchart_with_two_partners.png rename to static/img/orgchart_with_two_partners.png diff --git a/docs/assets/pert_milestone_shape.png b/static/img/pert_milestone_shape.png similarity index 100% rename from docs/assets/pert_milestone_shape.png rename to static/img/pert_milestone_shape.png diff --git a/docs/assets/pert_project_group.png b/static/img/pert_project_group.png similarity index 100% rename from docs/assets/pert_project_group.png rename to static/img/pert_project_group.png diff --git a/docs/assets/pert_task_shape.png b/static/img/pert_task_shape.png similarity index 100% rename from docs/assets/pert_task_shape.png rename to static/img/pert_task_shape.png diff --git a/docs/assets/radial_autoplacement.png b/static/img/radial_autoplacement.png similarity index 100% rename from docs/assets/radial_autoplacement.png rename to static/img/radial_autoplacement.png diff --git a/docs/assets/radial_datasets_generator.png b/static/img/radial_datasets_generator.png similarity index 100% rename from docs/assets/radial_datasets_generator.png rename to static/img/radial_datasets_generator.png diff --git a/docs/assets/sticky.png b/static/img/sticky.png similarity index 100% rename from docs/assets/sticky.png rename to static/img/sticky.png diff --git a/docs/assets/swimlane.png b/static/img/swimlane.png similarity index 100% rename from docs/assets/swimlane.png rename to static/img/swimlane.png diff --git a/docs/assets/swimlane_cells.png b/static/img/swimlane_cells.png similarity index 100% rename from docs/assets/swimlane_cells.png rename to static/img/swimlane_cells.png diff --git a/docs/assets/swimlane_contextmenu.png b/static/img/swimlane_contextmenu.png similarity index 100% rename from docs/assets/swimlane_contextmenu.png rename to static/img/swimlane_contextmenu.png diff --git a/docs/assets/swimlane_merge_cell_col.png b/static/img/swimlane_merge_cell_col.png similarity index 100% rename from docs/assets/swimlane_merge_cell_col.png rename to static/img/swimlane_merge_cell_col.png diff --git a/docs/assets/swimlane_merge_cell_row.png b/static/img/swimlane_merge_cell_row.png similarity index 100% rename from docs/assets/swimlane_merge_cell_row.png rename to static/img/swimlane_merge_cell_row.png diff --git a/docs/assets/swimlane_toolbar.png b/static/img/swimlane_toolbar.png similarity index 100% rename from docs/assets/swimlane_toolbar.png rename to static/img/swimlane_toolbar.png diff --git a/docs/assets/text_item.png b/static/img/text_item.png similarity index 100% rename from docs/assets/text_item.png rename to static/img/text_item.png diff --git a/docs/assets/touch_support.png b/static/img/touch_support.png similarity index 100% rename from docs/assets/touch_support.png rename to static/img/touch_support.png diff --git a/docs/assets/trial_diagram.png b/static/img/trial_diagram.png similarity index 100% rename from docs/assets/trial_diagram.png rename to static/img/trial_diagram.png diff --git a/docs/assets/typescript.png b/static/img/typescript.png similarity index 100% rename from docs/assets/typescript.png rename to static/img/typescript.png diff --git a/docs/assets/venn.png b/static/img/venn.png similarity index 100% rename from docs/assets/venn.png rename to static/img/venn.png diff --git a/docs/assets/virtual_cloud.png b/static/img/virtual_cloud.png similarity index 100% rename from docs/assets/virtual_cloud.png rename to static/img/virtual_cloud.png From cb098562b5743ba55b4a0fd2eebccfbdeba8520e Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 18 Jun 2026 15:53:51 +0300 Subject: [PATCH 2/4] [update] normalize internal links convention - rewrite doc-to-doc links as root-relative `path.md` (drop `../` climbing, trailing-slash dir style, absolute and stray `/diagram/` prefixes, and `.md/` before anchors) - point homepage links/anchors at absolute `/` and `/#anchor` - emit category index targets as root-absolute `/dir/` routes - switch overview tables to root-relative empty-label links, keep `@getshort(...)` file-relative - update `onEmptyLinkMatch` to resolve empty-label targets from docs root and emit root-absolute href without `.md` - fix broken "AI integration" link in whats_new to ai-demo page - verified via Docusaurus build: no broken links or anchors --- docs/api/cell_manager/add_method.md | 2 +- docs/api/cell_manager/aftercellsadd_event.md | 2 +- docs/api/cell_manager/aftercellsmove_event.md | 2 +- .../cell_manager/aftercellsremove_event.md | 2 +- .../aftercellsvalidation_event.md | 2 +- docs/api/cell_manager/beforecellsadd_event.md | 2 +- .../api/cell_manager/beforecellsmove_event.md | 2 +- .../cell_manager/beforecellsremove_event.md | 2 +- .../beforecellsvalidation_event.md | 2 +- docs/api/cell_manager/getcellid_method.md | 2 +- docs/api/cell_manager/getcellindex_method.md | 2 +- .../cell_manager/getsubheadercellid_method.md | 2 +- .../getsubheadercellindex_method.md | 2 +- .../cell_manager/getsubheadertype_method.md | 2 +- docs/api/cell_manager/index.md | 2 +- docs/api/cell_manager/move_method.md | 2 +- docs/api/cell_manager/remove_method.md | 2 +- docs/api/cell_manager/resetswimlane_method.md | 2 +- docs/api/cell_manager/setswimlane_method.md | 2 +- docs/api/cell_manager/validation_method.md | 2 +- docs/api/data_collection/add_method.md | 2 +- docs/api/data_collection/filter_method.md | 2 +- docs/api/data_collection/find_method.md | 2 +- docs/api/data_collection/findall_method.md | 2 +- docs/api/data_collection/getfilters_method.md | 2 +- docs/api/data_collection/getitem_method.md | 2 +- docs/api/data_collection/load_method.md | 2 +- docs/api/data_collection/parse_method.md | 2 +- docs/api/data_collection/remove_method.md | 2 +- docs/api/data_collection/removeall_method.md | 2 +- docs/api/data_collection/serialize_method.md | 2 +- docs/api/data_collection/update_method.md | 2 +- docs/api/diagram/addshape_method.md | 8 +- docs/api/diagram/aftercollapse_event.md | 2 +- docs/api/diagram/aftersubmenuopen_event.md | 2 +- docs/api/diagram/autoplace_method.md | 8 +- docs/api/diagram/autoplacement_property.md | 12 +- docs/api/diagram/beforecollapse_event.md | 2 +- docs/api/diagram/beforeexpand_event.md | 2 +- docs/api/diagram/beforesubmenuopen_event.md | 2 +- docs/api/diagram/collapseitem_method.md | 2 +- docs/api/diagram/defaultlinktype_property.md | 2 +- docs/api/diagram/defaults_property.md | 8 +- docs/api/diagram/defaultshapetype_property.md | 2 +- docs/api/diagram/emptyareaclick_event.md | 2 +- docs/api/diagram/emptyareadblclick_event.md | 2 +- docs/api/diagram/emptyareamousedown_event.md | 2 +- docs/api/diagram/expanditem_method.md | 2 +- docs/api/diagram/exportstyles_property.md | 2 +- docs/api/diagram/getscrollstate_method.md | 2 +- docs/api/diagram/groupclick_event.md | 2 +- docs/api/diagram/groupdblclick_event.md | 2 +- docs/api/diagram/groupheaderclick_event.md | 2 +- docs/api/diagram/groupheaderdblclick_event.md | 2 +- docs/api/diagram/groupmousedown_event.md | 2 +- docs/api/diagram/itemclick_event.md | 2 +- docs/api/diagram/itemdblclick_event.md | 2 +- docs/api/diagram/itemmousedown_event.md | 2 +- docs/api/diagram/itemmouseout_event.md | 2 +- docs/api/diagram/itemmouseover_event.md | 2 +- docs/api/diagram/lineclick_event.md | 2 +- docs/api/diagram/lineconfig_property.md | 4 +- docs/api/diagram/linedblclick_event.md | 2 +- docs/api/diagram/linemousedown_event.md | 2 +- docs/api/diagram/linetitleclick_event.md | 2 +- docs/api/diagram/linetitledblclick_event.md | 2 +- docs/api/diagram/linetitlemousedown_event.md | 2 +- docs/api/diagram/margin_property.md | 4 +- docs/api/diagram/scroll_event.md | 4 +- docs/api/diagram/scrollto_method.md | 2 +- docs/api/diagram/select_property.md | 4 +- docs/api/diagram/shapeclick_event.md | 2 +- docs/api/diagram/shapedblclick_event.md | 2 +- docs/api/diagram/shapeiconclick_event.md | 2 +- docs/api/diagram/shapemousedown_event.md | 2 +- docs/api/diagram/toolbar_property.md | 2 +- docs/api/diagram/type_property.md | 4 +- docs/api/diagram/typeconfig_property.md | 2 +- .../diagram_editor/editbar/api_overview.md | 2 +- .../editbar/basic_controls/fieldset.md | 2 +- .../editbar/complex_controls/arrange.md | 12 +- .../editbar/complex_controls/border.md | 8 +- .../editbar/complex_controls/headercommon.md | 8 +- .../complex_controls/headerposition.md | 4 +- .../editbar/complex_controls/lineshape.md | 4 +- .../editbar/complex_controls/pointerview.md | 6 +- .../editbar/complex_controls/position.md | 6 +- .../editbar/complex_controls/size.md | 6 +- .../editbar/complex_controls/textalign.md | 6 +- .../editbar/complex_controls/textstyle.md | 12 +- .../editor/config/autoplacement_property.md | 6 +- .../editor/config/defaults_property.md | 8 +- .../editor/config/lineconfig_property.md | 2 +- .../editor/config/shapetoolbar_property.md | 2 +- .../editor/config/shapetype_property.md | 2 +- .../editor/config/type_property.md | 4 +- .../editor/config/view_property.md | 6 +- .../editor/events/afteritemmove_event.md | 4 +- .../editor/events/afteritemresize_event.md | 4 +- .../editor/events/afteritemrotate_event.md | 4 +- .../editor/events/beforeitemmove_event.md | 4 +- .../editor/events/beforeitemresize_event.md | 4 +- .../editor/events/beforeitemrotate_event.md | 4 +- .../editor/events/itemmoveend_event.md | 4 +- .../editor/events/itemresizeend_event.md | 4 +- .../editor/events/itemrotateend_event.md | 4 +- .../diagram_editor/shapebar/api_overview.md | 2 +- .../shapebar/config/css_property.md | 4 +- .../shapebar/config/preview_property.md | 4 +- .../shapebar/config/sections_property.md | 6 +- .../shapebar/config/show_property.md | 2 +- .../shapebar/config/width_property.md | 2 +- .../diagram_editor/toolbar/api_overview.md | 6 +- .../toolbar/config/items_property.md | 8 +- docs/api/export/pdf_method.md | 2 +- docs/api/export/png_method.md | 2 +- .../overview/cellmanager_events_overview.md | 16 +- .../overview/cellmanager_methods_overview.md | 22 +- .../datacollection_events_overview.md | 14 +- .../datacollection_methods_overview.md | 48 +-- docs/api/overview/diagram_events_overview.md | 60 ++-- docs/api/overview/diagram_methods_overview.md | 20 +- .../overview/diagram_properties_overview.md | 22 +- .../api/overview/selection_events_overview.md | 8 +- .../overview/selection_methods_overview.md | 12 +- docs/api/selection/add_method.md | 4 +- docs/api/selection/afterselect_event.md | 6 +- docs/api/selection/afterunselect_event.md | 4 +- docs/api/selection/beforeselect_event.md | 6 +- docs/api/selection/beforeunselect_event.md | 4 +- docs/api/selection/clear_method.md | 4 +- docs/api/selection/getids_method.md | 4 +- docs/api/selection/getitem_method.md | 4 +- docs/api/selection/includes_method.md | 4 +- docs/api/selection/remove_method.md | 4 +- docs/editor_overview.md | 34 +-- docs/groups/configuration_properties.md | 4 +- docs/groups/index.md | 12 +- docs/guides/ai-integrations/mcp-server.md | 18 +- docs/guides/customization.md | 18 +- docs/guides/data_export.md | 10 +- docs/guides/diagram/configuration.md | 32 +- docs/guides/diagram/initialization.md | 8 +- docs/guides/diagram/scrolling_diagram.md | 8 +- docs/guides/diagram_editor/editbar.md | 16 +- docs/guides/diagram_editor/grid_area.md | 8 +- docs/guides/diagram_editor/hot_keys.md | 4 +- docs/guides/diagram_editor/initialization.md | 4 +- docs/guides/diagram_editor/shapebar.md | 20 +- docs/guides/diagram_editor/toolbar.md | 6 +- docs/guides/event_handling.md | 14 +- docs/guides/inline_editing.md | 2 +- .../integrations/angular_integration.md | 2 +- docs/guides/integrations/react_integration.md | 2 +- .../guides/integrations/svelte_integration.md | 2 +- docs/guides/integrations/vue_integration.md | 2 +- docs/guides/items_index.md | 6 +- docs/guides/loading_data.md | 24 +- docs/guides/manipulating_items.md | 76 ++--- docs/guides/overview.md | 50 +-- .../themes/base_themes_configuration.md | 2 +- docs/guides/themes/themes.md | 2 +- docs/line_titles/configuration_properties.md | 2 +- docs/line_titles/index.md | 14 +- docs/lines/configuration_properties.md | 4 +- docs/lines/index.md | 22 +- docs/migration.md | 74 ++--- docs/overview.md | 10 +- docs/shapes/configuration_properties.md | 12 +- docs/shapes/custom_shape.md | 6 +- docs/shapes/default_shapes.md | 20 +- docs/swimlanes/configuration_properties.md | 2 +- docs/swimlanes/index.md | 6 +- docs/whats_new.md | 286 +++++++++--------- docusaurus.config.js | 12 +- 175 files changed, 752 insertions(+), 744 deletions(-) diff --git a/docs/api/cell_manager/add_method.md b/docs/api/cell_manager/add_method.md index ef5f310d4..9fa60f102 100644 --- a/docs/api/cell_manager/add_method.md +++ b/docs/api/cell_manager/add_method.md @@ -44,4 +44,4 @@ diagram.cellManager.add(0, "down"); // adds cells as rows **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/aftercellsadd_event.md b/docs/api/cell_manager/aftercellsadd_event.md index fe826bd24..b8fc0a653 100644 --- a/docs/api/cell_manager/aftercellsadd_event.md +++ b/docs/api/cell_manager/aftercellsadd_event.md @@ -40,4 +40,4 @@ diagram.events.on("afterCellsAdd", (swimlaneId) => { **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/aftercellsmove_event.md b/docs/api/cell_manager/aftercellsmove_event.md index 1db1fcfb4..d97c76bfd 100644 --- a/docs/api/cell_manager/aftercellsmove_event.md +++ b/docs/api/cell_manager/aftercellsmove_event.md @@ -40,4 +40,4 @@ diagram.events.on("afterCellsMove", (swimlaneId) => { **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/aftercellsremove_event.md b/docs/api/cell_manager/aftercellsremove_event.md index e33fea6b7..b69a97820 100644 --- a/docs/api/cell_manager/aftercellsremove_event.md +++ b/docs/api/cell_manager/aftercellsremove_event.md @@ -40,4 +40,4 @@ diagram.events.on("afterCellsRemove", (swimlaneId) => { **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/aftercellsvalidation_event.md b/docs/api/cell_manager/aftercellsvalidation_event.md index e7da1d193..24f4c0de4 100644 --- a/docs/api/cell_manager/aftercellsvalidation_event.md +++ b/docs/api/cell_manager/aftercellsvalidation_event.md @@ -46,4 +46,4 @@ diagram.events.on("afterCellsValidation", (swimlaneId, validate, action) => { **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/beforecellsadd_event.md b/docs/api/cell_manager/beforecellsadd_event.md index f7f1f9ff1..ea63c1ae3 100644 --- a/docs/api/cell_manager/beforecellsadd_event.md +++ b/docs/api/cell_manager/beforecellsadd_event.md @@ -45,4 +45,4 @@ diagram.events.on("beforeCellsAdd", (swimlaneId) => { **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/beforecellsmove_event.md b/docs/api/cell_manager/beforecellsmove_event.md index bee83a290..415540aee 100644 --- a/docs/api/cell_manager/beforecellsmove_event.md +++ b/docs/api/cell_manager/beforecellsmove_event.md @@ -45,4 +45,4 @@ diagram.events.on("beforeCellsMove", (swimlaneId) => { **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/beforecellsremove_event.md b/docs/api/cell_manager/beforecellsremove_event.md index f890c924a..e81e151d4 100644 --- a/docs/api/cell_manager/beforecellsremove_event.md +++ b/docs/api/cell_manager/beforecellsremove_event.md @@ -45,4 +45,4 @@ diagram.events.on("beforeCellsRemove", (swimlaneId) => { **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/beforecellsvalidation_event.md b/docs/api/cell_manager/beforecellsvalidation_event.md index 9e797c253..bf8a685de 100644 --- a/docs/api/cell_manager/beforecellsvalidation_event.md +++ b/docs/api/cell_manager/beforecellsvalidation_event.md @@ -49,4 +49,4 @@ diagram.events.on("beforeCellsValidation", (swimlaneId, action) => { **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/getcellid_method.md b/docs/api/cell_manager/getcellid_method.md index 951cc21ec..7b915c8bd 100644 --- a/docs/api/cell_manager/getcellid_method.md +++ b/docs/api/cell_manager/getcellid_method.md @@ -46,4 +46,4 @@ diagram.cellManager.getCellId(0, "row"); // -> "r01" **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/getcellindex_method.md b/docs/api/cell_manager/getcellindex_method.md index c0720fef7..3a61da772 100644 --- a/docs/api/cell_manager/getcellindex_method.md +++ b/docs/api/cell_manager/getcellindex_method.md @@ -46,4 +46,4 @@ diagram.cellManager.getCellIndex("r01", "row"); // -> 0 **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/getsubheadercellid_method.md b/docs/api/cell_manager/getsubheadercellid_method.md index 90d043894..532137189 100644 --- a/docs/api/cell_manager/getsubheadercellid_method.md +++ b/docs/api/cell_manager/getsubheadercellid_method.md @@ -42,4 +42,4 @@ diagram.cellManager.getSubHeaderCellId("sub01"); // -> "r01" **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/getsubheadercellindex_method.md b/docs/api/cell_manager/getsubheadercellindex_method.md index 9b52d487d..4fbbe1625 100644 --- a/docs/api/cell_manager/getsubheadercellindex_method.md +++ b/docs/api/cell_manager/getsubheadercellindex_method.md @@ -42,4 +42,4 @@ diagram.cellManager.getSubHeaderCellIndex("sub01"); // -> 0 **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/getsubheadertype_method.md b/docs/api/cell_manager/getsubheadertype_method.md index d4081d95b..d819bc825 100644 --- a/docs/api/cell_manager/getsubheadertype_method.md +++ b/docs/api/cell_manager/getsubheadertype_method.md @@ -42,4 +42,4 @@ diagram.cellManager.getSubHeaderType("sub01"); // -> "row" **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/index.md b/docs/api/cell_manager/index.md index 00e202537..8fc82b144 100644 --- a/docs/api/cell_manager/index.md +++ b/docs/api/cell_manager/index.md @@ -6,7 +6,7 @@ description: You can have an overview of CellManager in the documentation of the # CellManager overview -The DHTMLX Diagram library provides you with a set of APIs to manipulate [a swimlane and its cells](../../swimlanes/) dynamically. The API can be used both in the diagram and in the editor. +The DHTMLX Diagram library provides you with a set of APIs to manipulate [a swimlane and its cells](/swimlanes/) dynamically. The API can be used both in the diagram and in the editor. ## Methods diff --git a/docs/api/cell_manager/move_method.md b/docs/api/cell_manager/move_method.md index c67927b7b..a31edf65f 100644 --- a/docs/api/cell_manager/move_method.md +++ b/docs/api/cell_manager/move_method.md @@ -44,4 +44,4 @@ diagram.cellManager.move(0, "down"); // moves cells as rows **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/remove_method.md b/docs/api/cell_manager/remove_method.md index 570d20c93..90e24fdd6 100644 --- a/docs/api/cell_manager/remove_method.md +++ b/docs/api/cell_manager/remove_method.md @@ -44,4 +44,4 @@ diagram.cellManager.remove(0, "row"); // removes cells as rows **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/resetswimlane_method.md b/docs/api/cell_manager/resetswimlane_method.md index c3771f88e..e9e3c250b 100644 --- a/docs/api/cell_manager/resetswimlane_method.md +++ b/docs/api/cell_manager/resetswimlane_method.md @@ -34,4 +34,4 @@ diagram.cellManager.resetSwimlane(); // resets active swimlane **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/setswimlane_method.md b/docs/api/cell_manager/setswimlane_method.md index bccc3dd95..b75df00e7 100644 --- a/docs/api/cell_manager/setswimlane_method.md +++ b/docs/api/cell_manager/setswimlane_method.md @@ -38,4 +38,4 @@ diagram.cellManager.setSwimlane("main"); // sets active swimlane **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/cell_manager/validation_method.md b/docs/api/cell_manager/validation_method.md index 00f517166..992961bae 100644 --- a/docs/api/cell_manager/validation_method.md +++ b/docs/api/cell_manager/validation_method.md @@ -48,4 +48,4 @@ diagram.cellManager.validation(0, "down", "move"); // -> true **Change log**: Added in v4.0 -**Related articles**: [Configuring Swimlanes](../../../swimlanes/) +**Related articles**: [Configuring Swimlanes](/swimlanes/) diff --git a/docs/api/data_collection/add_method.md b/docs/api/data_collection/add_method.md index 69b3ca6ed..7b1f0f796 100644 --- a/docs/api/data_collection/add_method.md +++ b/docs/api/data_collection/add_method.md @@ -49,6 +49,6 @@ diagram.data.add({ type: "card", id: "3.2", text: "New Item" }); diagram.data.add({ type: "line", from: "3", to: "3.2" }); ~~~ -**Related articles**: [Adding an item](../../../guides/manipulating_items/#adding-an-item) +**Related articles**: [Adding an item](guides/manipulating_items.md#adding-an-item) **Related sample**: [Diagram. Data. Add/delete item](https://snippet.dhtmlx.com/8wi20uop) diff --git a/docs/api/data_collection/filter_method.md b/docs/api/data_collection/filter_method.md index e494c80fd..ef76a3be4 100644 --- a/docs/api/data_collection/filter_method.md +++ b/docs/api/data_collection/filter_method.md @@ -77,7 +77,7 @@ To revert the diagram to the initial state, call the `filter()` method without p diagram.data.filter(); ~~~ -**Related articles**: [Filtering items](../../../guides/manipulating_items/#filtering-items) +**Related articles**: [Filtering items](guides/manipulating_items.md#filtering-items) **Related sample**: [Diagram. Data. Filtering shapes](https://snippet.dhtmlx.com/tm43bsgn) diff --git a/docs/api/data_collection/find_method.md b/docs/api/data_collection/find_method.md index e9eebe6bc..521791dbf 100644 --- a/docs/api/data_collection/find_method.md +++ b/docs/api/data_collection/find_method.md @@ -49,6 +49,6 @@ const shape = diagram.data.find((shape) => { }); ~~~ -**Related articles**: [Finding the necessary item](../../../guides/manipulating_items/#finding-the-necessary-item) +**Related articles**: [Finding the necessary item](guides/manipulating_items.md#finding-the-necessary-item) **Related sample**: [Diagram. Data. Finding necessary shape](https://snippet.dhtmlx.com/sete9z73) diff --git a/docs/api/data_collection/findall_method.md b/docs/api/data_collection/findall_method.md index 9b7480007..ed7fa7427 100644 --- a/docs/api/data_collection/findall_method.md +++ b/docs/api/data_collection/findall_method.md @@ -51,4 +51,4 @@ const shapes = diagram.data.findAll(function (shapes) { }); ~~~ -**Related articles**: [Finding the necessary item](../../../guides/manipulating_items/#finding-the-necessary-item) +**Related articles**: [Finding the necessary item](guides/manipulating_items.md#finding-the-necessary-item) diff --git a/docs/api/data_collection/getfilters_method.md b/docs/api/data_collection/getfilters_method.md index 3d59f61f9..1532d7354 100644 --- a/docs/api/data_collection/getfilters_method.md +++ b/docs/api/data_collection/getfilters_method.md @@ -24,7 +24,7 @@ getFilters({ permanent?: boolean }): object; The method returns an object with the applied filters, where: - `key` - the id of a filter -- `value` - an object with the [**rule** and **config** properties](/api/data_collection/filter_method.md#parameters) +- `value` - an object with the [**rule** and **config** properties](api/data_collection/filter_method.md#parameters) ### Example diff --git a/docs/api/data_collection/getitem_method.md b/docs/api/data_collection/getitem_method.md index 0a1173c1a..d4d75553d 100644 --- a/docs/api/data_collection/getitem_method.md +++ b/docs/api/data_collection/getitem_method.md @@ -43,4 +43,4 @@ const shape = diagram.data.getItem(123); const text = shape.text; ~~~ -**Related articles**: [Getting an item](../../../guides/manipulating_items/#getting-an-item) +**Related articles**: [Getting an item](guides/manipulating_items.md#getting-an-item) diff --git a/docs/api/data_collection/load_method.md b/docs/api/data_collection/load_method.md index 9abd9c0b2..9395e1b32 100644 --- a/docs/api/data_collection/load_method.md +++ b/docs/api/data_collection/load_method.md @@ -51,6 +51,6 @@ diagram.data.load("../some/data").then(() => { }); ~~~ -**Related articles**: [Loading and storing data](../../../guides/loading_data/) +**Related articles**: [Loading and storing data](guides/loading_data.md) **Related sample**: [Diagram. Data. Data loading](https://snippet.dhtmlx.com/09isp2d8) diff --git a/docs/api/data_collection/parse_method.md b/docs/api/data_collection/parse_method.md index bfc7d16eb..d2e5e3368 100644 --- a/docs/api/data_collection/parse_method.md +++ b/docs/api/data_collection/parse_method.md @@ -97,7 +97,7 @@ const diagram = new dhx.Diagram("diagram_container", { diagram.data.parse(dataset); ~~~ -**Related articles**: [Loading and storing data](../../../guides/loading_data/) +**Related articles**: [Loading and storing data](guides/loading_data.md) **Related samples**: - [Diagram. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/5ign6fyy) diff --git a/docs/api/data_collection/remove_method.md b/docs/api/data_collection/remove_method.md index b11ebd560..9c931c192 100644 --- a/docs/api/data_collection/remove_method.md +++ b/docs/api/data_collection/remove_method.md @@ -35,6 +35,6 @@ diagram.data.parse(data); diagram.data.remove("2"); ~~~ -**Related articles**: [Deleting items](../../../guides/manipulating_items/#deleting-items) +**Related articles**: [Deleting items](guides/manipulating_items.md#deleting-items) **Related sample**: [Diagram. Data. Add/delete item](https://snippet.dhtmlx.com/8wi20uop) diff --git a/docs/api/data_collection/removeall_method.md b/docs/api/data_collection/removeall_method.md index 23305c801..249b0720e 100644 --- a/docs/api/data_collection/removeall_method.md +++ b/docs/api/data_collection/removeall_method.md @@ -27,6 +27,6 @@ diagram.data.parse(data); diagram.data.removeAll(); ~~~ -**Related articles**: [Deleting items](../../../guides/manipulating_items/#deleting-items) +**Related articles**: [Deleting items](guides/manipulating_items.md#deleting-items) **Related sample**: [Diagram. Data. Add/delete item](https://snippet.dhtmlx.com/8wi20uop) diff --git a/docs/api/data_collection/serialize_method.md b/docs/api/data_collection/serialize_method.md index 98e1e0a57..bb15f52e8 100644 --- a/docs/api/data_collection/serialize_method.md +++ b/docs/api/data_collection/serialize_method.md @@ -51,4 +51,4 @@ const dataset = diagram.data.serialize(); // -> { data: [...], links: [...] }; Note that for the PERT Diagram mode the *links* objects in the exported data object will have [the same types as in the DHTMLX Gantt chart](https://docs.dhtmlx.com/gantt/desktop__link_properties.html). It means that if the type of a link in the Diagram data coincides with some of the Gantt links types, it will remain the same during serialization. If the link type isn't specified or set differently (for example, `type: "line"`), it will be converted into `type: "0"`. -**Related articles**: [Saving and restoring state](../../../guides/loading_data/#saving-and-restoring-state) +**Related articles**: [Saving and restoring state](guides/loading_data.md#saving-and-restoring-state) diff --git a/docs/api/data_collection/update_method.md b/docs/api/data_collection/update_method.md index 2eb352d6f..2be12aee7 100644 --- a/docs/api/data_collection/update_method.md +++ b/docs/api/data_collection/update_method.md @@ -39,4 +39,4 @@ diagram.data.parse(data); diagram.data.update(123, { text:"New text" }); ~~~ -**Related articles**: [Updating an item](../../../guides/manipulating_items/#updating-an-item) +**Related articles**: [Updating an item](guides/manipulating_items.md#updating-an-item) diff --git a/docs/api/diagram/addshape_method.md b/docs/api/diagram/addshape_method.md index 119889061..636969582 100644 --- a/docs/api/diagram/addshape_method.md +++ b/docs/api/diagram/addshape_method.md @@ -26,8 +26,8 @@ addShape( - `type` - (required) the unique name for the type of a custom shape. The name must differ from the names of default shapes - `parameters` - (required) an object with the additional parameters of the **addShape()** method. Here you can specify the following attributes: - `template: function` - (required) the function that takes the configuration object of the shape as a parameter and returns either an HTML or SVG template - - [`defaults: object`](../../../shapes/custom_shape/) - (optional) the default configuration for a created shape. See [the full list of the configuration properties of a shape](../../../shapes/configuration_properties/) - - [`eventHandlers: object`](../../../shapes/custom_shape/#event-handlers-for-custom-shapes) - (optional) adds custom event handlers to HTML elements of the template of a shape. The `eventHandlers` object includes a set of `key:value` pairs, where: + - [`defaults: object`](shapes/custom_shape.md) - (optional) the default configuration for a created shape. See [the full list of the configuration properties of a shape](shapes/configuration_properties.md) + - [`eventHandlers: object`](shapes/custom_shape.md#event-handlers-for-custom-shapes) - (optional) adds custom event handlers to HTML elements of the template of a shape. The `eventHandlers` object includes a set of `key:value` pairs, where: - `key: string` - the name of the event. Note, that at the beginning of the event name the 'on' prefix is used (onclick, onmouseover) - `value: object` - an object that contains a **key:value** pair, where - `key` is the CSS class name that the handler will be applied to @@ -82,7 +82,7 @@ diagram.addShape("personal", { **Related sample**: [Diagram with Editor. Org chart mode. Customization of cards, editbar and toolbar](https://snippet.dhtmlx.com/vcnt647v) -The example below shows how you can add a custom shape into the Diagram Editor as well as configure the [Shapebar](/guides/diagram_editor/shapebar/) and [Editbar](/guides/diagram_editor/editbar/) panels of the editor. The configuration of a custom shape in the editbar of the Editor is implemented via the [`properties`](../../../api/diagram_editor/editbar/config/properties_property/) property of the Editbar panel. +The example below shows how you can add a custom shape into the Diagram Editor as well as configure the [Shapebar](guides/diagram_editor/shapebar.md) and [Editbar](guides/diagram_editor/editbar.md) panels of the editor. The configuration of a custom shape in the editbar of the Editor is implemented via the [`properties`](api/diagram_editor/editbar/config/properties_property.md) property of the Editbar panel. ~~~jsx {34-49} title="Adding a shape into the Diagram Editor" const editor = new dhx.DiagramEditor("editor_container", { @@ -138,7 +138,7 @@ editor.diagram.addShape("network", { **Change log**: The `properties` attribute is removed in v6.0. -**Related articles**: [Custom Shape](../../../shapes/custom_shape/) +**Related articles**: [Custom Shape](shapes/custom_shape.md) **Related samples**: diff --git a/docs/api/diagram/aftercollapse_event.md b/docs/api/diagram/aftercollapse_event.md index c7b97cfd0..4d44321d0 100644 --- a/docs/api/diagram/aftercollapse_event.md +++ b/docs/api/diagram/aftercollapse_event.md @@ -44,4 +44,4 @@ diagram.events.on("afterCollapse", (id, dir) => { **Change log**: The **dir** parameter was added in v3.1 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/aftersubmenuopen_event.md b/docs/api/diagram/aftersubmenuopen_event.md index 13ac73ed8..c7700f0be 100644 --- a/docs/api/diagram/aftersubmenuopen_event.md +++ b/docs/api/diagram/aftersubmenuopen_event.md @@ -46,4 +46,4 @@ diagram.events.on("afterSubmenuOpen", (id, event, subheaderId) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/autoplace_method.md b/docs/api/diagram/autoplace_method.md index f48430726..5e96f0aac 100644 --- a/docs/api/diagram/autoplace_method.md +++ b/docs/api/diagram/autoplace_method.md @@ -58,15 +58,15 @@ If `fromSide` and `toSide` are set on a link, the autoplacement algorithm will p ::: :::info -To add arrows to the lines, specify **forwardArrow: "filled"** or **backArrow: "filled"** in the configuration of a [line object](../../../lines/configuration_properties/). +To add arrows to the lines, specify **forwardArrow: "filled"** or **backArrow: "filled"** in the configuration of a [line object](lines/configuration_properties.md). ::: The connector lines in the "edges" mode can be: - - either straight (if you set **connectType: "straight"** property of a [line object](../../../lines/configuration_properties/)) + - either straight (if you set **connectType: "straight"** property of a [line object](lines/configuration_properties.md)) ![](/img/edges_straight_mode.png) - - or 90-degree curved (if you set **connectType: "elbow"** property of a [line object](../../../lines/configuration_properties/)) + - or 90-degree curved (if you set **connectType: "elbow"** property of a [line object](lines/configuration_properties.md)) ![](/img/edges_mode.png) @@ -104,7 +104,7 @@ Shapes are arranged on imaginary circles relative to the central shape, i.e. a s - The **placeMode** parameter is added in v5.0 - The **autoplacement** property is added in v3.0 -**Related articles**: [Arranging shapes automatically](../../../guides/manipulating_items/#arranging-shapes-automatically) +**Related articles**: [Arranging shapes automatically](guides/manipulating_items.md#arranging-shapes-automatically) **Related sample**: - [Diagram. Default mode. Radial autoplacement with padding options](https://snippet.dhtmlx.com/huut0l1s) diff --git a/docs/api/diagram/autoplacement_property.md b/docs/api/diagram/autoplacement_property.md index 587f153a7..0c4e76970 100644 --- a/docs/api/diagram/autoplacement_property.md +++ b/docs/api/diagram/autoplacement_property.md @@ -13,7 +13,7 @@ description: You can learn about the autoplacement property in the documentation :::info The `autoplacement` property works only in the default mode of the diagram and only for shapes. It does not work if you use groups or swimlanes. -Autoplacement will be applied only after the [`autoPlace()`](/api/diagram/autoplace_method/) method is applied. +Autoplacement will be applied only after the [`autoPlace()`](api/diagram/autoplace_method.md) method is applied. ::: ### Usage @@ -81,16 +81,16 @@ Connector lines with no arrows are aligned "from center to center". They are str Connector lines are aligned "from side to side". :::info -To add arrows to the lines, specify `forwardArrow: "filled"` or `backArrow: "filled"` in the configuration of a [line object](../../../lines/configuration_properties/). +To add arrows to the lines, specify `forwardArrow: "filled"` or `backArrow: "filled"` in the configuration of a [line object](lines/configuration_properties.md). ::: The connector lines in the "edges" mode can be: -- either straight (if you set the `connectType: "straight"` property of a [line object](../../../lines/configuration_properties/)) +- either straight (if you set the `connectType: "straight"` property of a [line object](lines/configuration_properties.md)) ![](/img/edges_straight_mode.png) -- or 90-degree curved (if you set the `connectType: "elbow"` property of a [line object](../../../lines/configuration_properties/)) +- or 90-degree curved (if you set the `connectType: "elbow"` property of a [line object](lines/configuration_properties.md)) ![](/img/edges_mode.png) @@ -127,8 +127,8 @@ Shapes are arranged on imaginary circles relative to the central shape, i.e. the **Related articles**: -- [Configuring autoplacement for shapes](../../../guides/diagram/configuration/#configuring-autoplacement-for-shapes) -- [Arranging shapes automatically](../../../guides/manipulating_items/#arranging-shapes-automatically) +- [Configuring autoplacement for shapes](guides/diagram/configuration.md#configuring-autoplacement-for-shapes) +- [Arranging shapes automatically](guides/manipulating_items.md#arranging-shapes-automatically) **Related sample**: diff --git a/docs/api/diagram/beforecollapse_event.md b/docs/api/diagram/beforecollapse_event.md index 3e464e08c..ef15f1e21 100644 --- a/docs/api/diagram/beforecollapse_event.md +++ b/docs/api/diagram/beforecollapse_event.md @@ -49,4 +49,4 @@ diagram.events.on("beforeCollapse", (id, dir) => { **Change log**: The **dir** parameter was added in v3.1 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/beforeexpand_event.md b/docs/api/diagram/beforeexpand_event.md index e18735520..2e9af8491 100644 --- a/docs/api/diagram/beforeexpand_event.md +++ b/docs/api/diagram/beforeexpand_event.md @@ -49,4 +49,4 @@ diagram.events.on("beforeExpand", (id, dir) => { **Change log**: The **dir** parameter was added in v3.1 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/beforesubmenuopen_event.md b/docs/api/diagram/beforesubmenuopen_event.md index a57e8010d..5e16b745a 100644 --- a/docs/api/diagram/beforesubmenuopen_event.md +++ b/docs/api/diagram/beforesubmenuopen_event.md @@ -51,4 +51,4 @@ diagram.events.on("beforeSubmenuOpen", (id, event, subheaderId) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/collapseitem_method.md b/docs/api/diagram/collapseitem_method.md index 0dc5d342b..84c5e88d9 100644 --- a/docs/api/diagram/collapseitem_method.md +++ b/docs/api/diagram/collapseitem_method.md @@ -51,4 +51,4 @@ diagram.collapseItem("main", "left"); **Change log**: The **dir** parameter was added in v3.1 -**Related articles**: [Expanding/collapsing items](../../../guides/manipulating_items/#expandingcollapsing-items) +**Related articles**: [Expanding/collapsing items](guides/manipulating_items.md#expandingcollapsing-items) diff --git a/docs/api/diagram/defaultlinktype_property.md b/docs/api/diagram/defaultlinktype_property.md index 0336a9ae5..939be7929 100644 --- a/docs/api/diagram/defaultlinktype_property.md +++ b/docs/api/diagram/defaultlinktype_property.md @@ -32,4 +32,4 @@ const diagram = new dhx.Diagram("diagram_container", { }); ~~~ -**Related articles**: [Setting connections between shapes](../../../lines/#setting-connections-between-shapes) +**Related articles**: [Setting connections between shapes](/lines/#setting-connections-between-shapes) diff --git a/docs/api/diagram/defaults_property.md b/docs/api/diagram/defaults_property.md index 129eccc57..463c8030e 100644 --- a/docs/api/diagram/defaults_property.md +++ b/docs/api/diagram/defaults_property.md @@ -20,7 +20,7 @@ defaults?: { ### Parameters -The `defaults` property is an object which includes a set of `key:value` pairs where *key* is a type of a shape or line and *value* is an object with a set of configuration settings of the [shape](../../../shapes/configuration_properties/) or [line](../../../lines/configuration_properties/) correspondingly. +The `defaults` property is an object which includes a set of `key:value` pairs where *key* is a type of a shape or line and *value* is an object with a set of configuration settings of the [shape](shapes/configuration_properties.md) or [line](lines/configuration_properties.md) correspondingly. :::note There is no possibility to define `type` and `id` in the default configuration of a shape/line @@ -58,12 +58,12 @@ const diagram = new dhx.Diagram("diagram_container", { ~~~ :::note -After defining the default settings for the shapes/lines of separate types, you can either omit these properties or redefine their values while [preparing a data set](../../../guides/loading_data/#preparing-data-to-load) for the shapes/lines of these types. +After defining the default settings for the shapes/lines of separate types, you can either omit these properties or redefine their values while [preparing a data set](guides/loading_data.md#preparing-data-to-load) for the shapes/lines of these types. ::: **Change log**: The ability to set the default configuration for lines is added in v4.2 **Related articles**: -- [Setting the default configuration of a shape](/guides/diagram/configuration/#setting-the-default-configuration-of-a-shape) -- [Setting the preview of shapes](../../../guides/diagram_editor/shapebar/#setting-the-preview-of-shapes) +- [Setting the default configuration of a shape](guides/diagram/configuration.md#setting-the-default-configuration-of-a-shape) +- [Setting the preview of shapes](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes) diff --git a/docs/api/diagram/defaultshapetype_property.md b/docs/api/diagram/defaultshapetype_property.md index 1fed86930..67e85b91e 100644 --- a/docs/api/diagram/defaultshapetype_property.md +++ b/docs/api/diagram/defaultshapetype_property.md @@ -52,4 +52,4 @@ const diagram = new dhx.Diagram("diagram_container", { }); ~~~ -**Related articles**: [Setting the type of a shape](../../../shapes/default_shapes/#setting-the-type-of-a-shape) +**Related articles**: [Setting the type of a shape](shapes/default_shapes.md#setting-the-type-of-a-shape) diff --git a/docs/api/diagram/emptyareaclick_event.md b/docs/api/diagram/emptyareaclick_event.md index 51f3ee50c..a19da14d4 100644 --- a/docs/api/diagram/emptyareaclick_event.md +++ b/docs/api/diagram/emptyareaclick_event.md @@ -38,4 +38,4 @@ diagram.events.on("emptyAreaClick", () => { }); ~~~ -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/emptyareadblclick_event.md b/docs/api/diagram/emptyareadblclick_event.md index 1dab456ee..74c415afd 100644 --- a/docs/api/diagram/emptyareadblclick_event.md +++ b/docs/api/diagram/emptyareadblclick_event.md @@ -40,4 +40,4 @@ diagram.events.on("emptyAreaDblClick", (e) => { **Change log**: Added in v4.1 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/emptyareamousedown_event.md b/docs/api/diagram/emptyareamousedown_event.md index 944b7d1d8..2cda2990c 100644 --- a/docs/api/diagram/emptyareamousedown_event.md +++ b/docs/api/diagram/emptyareamousedown_event.md @@ -40,4 +40,4 @@ diagram.events.on("emptyAreaMouseDown", (e) => { **Change log**: Added in v4.1 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/expanditem_method.md b/docs/api/diagram/expanditem_method.md index 82c577d9b..58241b535 100644 --- a/docs/api/diagram/expanditem_method.md +++ b/docs/api/diagram/expanditem_method.md @@ -51,4 +51,4 @@ diagram.expandItem("main", "left"); **Change log**: The **dir** parameter was added in v3.1 -**Related articles**: [Expanding/collapsing items](../../../guides/manipulating_items/#expandingcollapsing-items) +**Related articles**: [Expanding/collapsing items](guides/manipulating_items.md#expandingcollapsing-items) diff --git a/docs/api/diagram/exportstyles_property.md b/docs/api/diagram/exportstyles_property.md index 3a2c2ab89..d3079faec 100644 --- a/docs/api/diagram/exportstyles_property.md +++ b/docs/api/diagram/exportstyles_property.md @@ -57,6 +57,6 @@ You must use only absolute paths not relative ones **Change log**: Added in v3.1 -**Related articles**: [Exporting Diagram](../../../guides/data_export/) +**Related articles**: [Exporting Diagram](guides/data_export.md) **Related sample**: [Diagram. Export. Export styles](https://snippet.dhtmlx.com/jm8if6nh) diff --git a/docs/api/diagram/getscrollstate_method.md b/docs/api/diagram/getscrollstate_method.md index a469222b5..d7aac775e 100644 --- a/docs/api/diagram/getscrollstate_method.md +++ b/docs/api/diagram/getscrollstate_method.md @@ -33,6 +33,6 @@ const state = diagram.getScrollState(); // diagram.scrollTo( state.x, state.y ); ~~~ -**Related articles**: [Scrolling Diagram](../../../guides/diagram/scrolling_diagram/) +**Related articles**: [Scrolling Diagram](guides/diagram/scrolling_diagram.md) **Related sample**: [Diagram. Scroll content](https://snippet.dhtmlx.com/f970hbym) diff --git a/docs/api/diagram/groupclick_event.md b/docs/api/diagram/groupclick_event.md index 9172e2608..afe4b408b 100644 --- a/docs/api/diagram/groupclick_event.md +++ b/docs/api/diagram/groupclick_event.md @@ -46,4 +46,4 @@ diagram.events.on("groupClick", (id, event) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/groupdblclick_event.md b/docs/api/diagram/groupdblclick_event.md index 8b9e00a4a..7004645b7 100644 --- a/docs/api/diagram/groupdblclick_event.md +++ b/docs/api/diagram/groupdblclick_event.md @@ -46,4 +46,4 @@ diagram.events.on("groupDblClick", (id, event) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/groupheaderclick_event.md b/docs/api/diagram/groupheaderclick_event.md index 3b3eb779d..e76cba844 100644 --- a/docs/api/diagram/groupheaderclick_event.md +++ b/docs/api/diagram/groupheaderclick_event.md @@ -48,4 +48,4 @@ diagram.events.on("groupHeaderClick", (id, event, subheaderId) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/groupheaderdblclick_event.md b/docs/api/diagram/groupheaderdblclick_event.md index 97ce1be50..7abf10ce3 100644 --- a/docs/api/diagram/groupheaderdblclick_event.md +++ b/docs/api/diagram/groupheaderdblclick_event.md @@ -48,4 +48,4 @@ diagram.events.on("groupHeaderDblClick", (id, event, subheaderId) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/groupmousedown_event.md b/docs/api/diagram/groupmousedown_event.md index 70ac29438..c62ed93eb 100644 --- a/docs/api/diagram/groupmousedown_event.md +++ b/docs/api/diagram/groupmousedown_event.md @@ -46,4 +46,4 @@ diagram.events.on("groupMouseDown", (id, event) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/itemclick_event.md b/docs/api/diagram/itemclick_event.md index 51794adbb..d42dcc361 100644 --- a/docs/api/diagram/itemclick_event.md +++ b/docs/api/diagram/itemclick_event.md @@ -46,4 +46,4 @@ diagram.events.on("itemClick", (id, event) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/itemdblclick_event.md b/docs/api/diagram/itemdblclick_event.md index 6296955be..5f6aa4ae1 100644 --- a/docs/api/diagram/itemdblclick_event.md +++ b/docs/api/diagram/itemdblclick_event.md @@ -46,4 +46,4 @@ diagram.events.on("itemDblClick", (id, event) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/itemmousedown_event.md b/docs/api/diagram/itemmousedown_event.md index 2b35f117d..2589a5fa9 100644 --- a/docs/api/diagram/itemmousedown_event.md +++ b/docs/api/diagram/itemmousedown_event.md @@ -46,4 +46,4 @@ diagram.events.on("itemMouseDown", (id, event) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/itemmouseout_event.md b/docs/api/diagram/itemmouseout_event.md index c565dd6dd..8c87c7e0e 100644 --- a/docs/api/diagram/itemmouseout_event.md +++ b/docs/api/diagram/itemmouseout_event.md @@ -44,4 +44,4 @@ diagram.events.on("itemMouseOut", (id, event) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/itemmouseover_event.md b/docs/api/diagram/itemmouseover_event.md index df9264708..a25e5cfcd 100644 --- a/docs/api/diagram/itemmouseover_event.md +++ b/docs/api/diagram/itemmouseover_event.md @@ -44,4 +44,4 @@ diagram.events.on("itemMouseOver", (id, event) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/lineclick_event.md b/docs/api/diagram/lineclick_event.md index 0cc0b5a6d..55937f423 100644 --- a/docs/api/diagram/lineclick_event.md +++ b/docs/api/diagram/lineclick_event.md @@ -44,4 +44,4 @@ diagram.events.on("lineClick", (id) => { **Change log**: Added in v3.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/lineconfig_property.md b/docs/api/diagram/lineconfig_property.md index a26e853dd..a3977fd0f 100644 --- a/docs/api/diagram/lineconfig_property.md +++ b/docs/api/diagram/lineconfig_property.md @@ -69,7 +69,7 @@ The result of applying the **lineGap** property is shown in the image below: **Change log**: - The `connectType` parameter is added in v6.1 -- The `lineGap` parameter is added in v5.0 (check the [Migration article](diagram/migration.md/#42---50)) +- The `lineGap` parameter is added in v5.0 (check the [Migration article](migration.md#42---50)) - Added in v4.2 -**Related articles**: [Setting connections between shapes](../../../lines/#setting-connections-between-shapes) +**Related articles**: [Setting connections between shapes](/lines/#setting-connections-between-shapes) diff --git a/docs/api/diagram/linedblclick_event.md b/docs/api/diagram/linedblclick_event.md index fd38ecb25..0c7575f16 100644 --- a/docs/api/diagram/linedblclick_event.md +++ b/docs/api/diagram/linedblclick_event.md @@ -44,4 +44,4 @@ diagram.events.on("lineDblClick", (id, event) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/linemousedown_event.md b/docs/api/diagram/linemousedown_event.md index a09cfd19e..003612919 100644 --- a/docs/api/diagram/linemousedown_event.md +++ b/docs/api/diagram/linemousedown_event.md @@ -44,4 +44,4 @@ diagram.events.on("lineMouseDown", (id, event) => { **Change log**: Added in v4.0 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/linetitleclick_event.md b/docs/api/diagram/linetitleclick_event.md index 1b9842d3d..e624160a7 100644 --- a/docs/api/diagram/linetitleclick_event.md +++ b/docs/api/diagram/linetitleclick_event.md @@ -46,4 +46,4 @@ diagram.events.on("lineTitleClick", (lineId, titleId, event) => { **Change log**: Added in v4.1 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/linetitledblclick_event.md b/docs/api/diagram/linetitledblclick_event.md index ae94bdaff..2e9a50e5a 100644 --- a/docs/api/diagram/linetitledblclick_event.md +++ b/docs/api/diagram/linetitledblclick_event.md @@ -46,4 +46,4 @@ diagram.events.on("lineTitleDblClick", (lineId, titleId, event) => { **Change log**: Added in v4.1 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/linetitlemousedown_event.md b/docs/api/diagram/linetitlemousedown_event.md index f97ba9f85..9e27defd1 100644 --- a/docs/api/diagram/linetitlemousedown_event.md +++ b/docs/api/diagram/linetitlemousedown_event.md @@ -46,4 +46,4 @@ diagram.events.on("lineTitleMouseDown", (lineId, titleId, event) => { **Change log**: Added in v4.1 -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/margin_property.md b/docs/api/diagram/margin_property.md index 1fbcb0886..bc69af257 100644 --- a/docs/api/diagram/margin_property.md +++ b/docs/api/diagram/margin_property.md @@ -25,8 +25,8 @@ margin?: { The **margin** object can include the following parameters: -- `itemX` - (optional) horizontal space between two shapes (only for [type: "org" | "mindmap"](../../../api/diagram/type_property/)) -- `itemY` - (optional) vertical space between two shapes (only for [type: "org" | "mindmap"](../../../api/diagram/type_property/)) +- `itemX` - (optional) horizontal space between two shapes (only for [type: "org" | "mindmap"](api/diagram/type_property.md)) +- `itemY` - (optional) vertical space between two shapes (only for [type: "org" | "mindmap"](api/diagram/type_property.md)) - `x` - (optional) horizontal space between the start of a diagram and the first item - `y` - (optional) vertical space between the start of a diagram and the first item diff --git a/docs/api/diagram/scroll_event.md b/docs/api/diagram/scroll_event.md index 09f809026..c8b5fc906 100644 --- a/docs/api/diagram/scroll_event.md +++ b/docs/api/diagram/scroll_event.md @@ -41,5 +41,5 @@ diagram.events.on("scroll", () => { **Related articles**: -- [Scrolling Diagram](../../../guides/diagram/scrolling_diagram/) -- [Event handling](../../../guides/event_handling/) +- [Scrolling Diagram](guides/diagram/scrolling_diagram.md) +- [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/scrollto_method.md b/docs/api/diagram/scrollto_method.md index 20e7b648d..1e36b51db 100644 --- a/docs/api/diagram/scrollto_method.md +++ b/docs/api/diagram/scrollto_method.md @@ -30,4 +30,4 @@ diagram.data.parse(data); diagram.scrollTo(100, 80); ~~~ -**Related articles**: [Scrolling Diagram](../../../guides/diagram/scrolling_diagram/) +**Related articles**: [Scrolling Diagram](guides/diagram/scrolling_diagram.md) diff --git a/docs/api/diagram/select_property.md b/docs/api/diagram/select_property.md index c48105690..b6c3b0f83 100644 --- a/docs/api/diagram/select_property.md +++ b/docs/api/diagram/select_property.md @@ -32,5 +32,5 @@ const diagram = new dhx.Diagram("diagram_container", { **Related articles**: -- [Enabling items selection](../../../guides/diagram/configuration/#enabling-items-selection) -- [Selecting items](../../../guides/manipulating_items/#selecting-items) +- [Enabling items selection](guides/diagram/configuration.md#enabling-items-selection) +- [Selecting items](guides/manipulating_items.md#selecting-items) diff --git a/docs/api/diagram/shapeclick_event.md b/docs/api/diagram/shapeclick_event.md index 9ac01022b..5cb227358 100644 --- a/docs/api/diagram/shapeclick_event.md +++ b/docs/api/diagram/shapeclick_event.md @@ -42,4 +42,4 @@ diagram.events.on("shapeClick", (id) => { }); ~~~ -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/shapedblclick_event.md b/docs/api/diagram/shapedblclick_event.md index 6a7817dee..7b91724f7 100644 --- a/docs/api/diagram/shapedblclick_event.md +++ b/docs/api/diagram/shapedblclick_event.md @@ -42,4 +42,4 @@ diagram.events.on("shapeDblClick", (id) => { }); ~~~ -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/shapeiconclick_event.md b/docs/api/diagram/shapeiconclick_event.md index f8cc13cbd..fae97a45c 100644 --- a/docs/api/diagram/shapeiconclick_event.md +++ b/docs/api/diagram/shapeiconclick_event.md @@ -70,6 +70,6 @@ diagram.events.on("shapeIconClick", function (action) { }); ~~~ -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) **Related sample**: [Diagram. Configuration. Shape toolbar](https://snippet.dhtmlx.com/4if395hd) diff --git a/docs/api/diagram/shapemousedown_event.md b/docs/api/diagram/shapemousedown_event.md index 2e0e80f5c..535d5054b 100644 --- a/docs/api/diagram/shapemousedown_event.md +++ b/docs/api/diagram/shapemousedown_event.md @@ -42,4 +42,4 @@ diagram.events.on("shapeMouseDown", (id) => { }); ~~~ -**Related article**: [Event handling](../../../guides/event_handling/) +**Related article**: [Event handling](guides/event_handling.md) diff --git a/docs/api/diagram/toolbar_property.md b/docs/api/diagram/toolbar_property.md index f8e55d467..5ed101465 100644 --- a/docs/api/diagram/toolbar_property.md +++ b/docs/api/diagram/toolbar_property.md @@ -71,7 +71,7 @@ const diagram = new dhx.Diagram("diagram_container", { **Related articles**: -- [Setting toolbar for shapes](/guides/diagram/configuration/#setting-toolbar-for-shapes) +- [Setting toolbar for shapes](guides/diagram/configuration.md#setting-toolbar-for-shapes) - [Default icons](https://docs.dhtmlx.com/suite/helpers/icon/) **Related sample**: [Diagram. Configuration. Shape toolbar](https://snippet.dhtmlx.com/4if395hd) diff --git a/docs/api/diagram/type_property.md b/docs/api/diagram/type_property.md index 7e86306e1..3978d053d 100644 --- a/docs/api/diagram/type_property.md +++ b/docs/api/diagram/type_property.md @@ -50,5 +50,5 @@ DHTMLX Diagram can be initialized in one of the following modes: "default", "org **Related articles**: -- [Overview](../../../) -- [How to start with Diagram](../../../guides/diagram/initialization/) +- [Overview](/) +- [How to start with Diagram](guides/diagram/initialization.md) diff --git a/docs/api/diagram/typeconfig_property.md b/docs/api/diagram/typeconfig_property.md index 2af6e6627..f62cde83c 100644 --- a/docs/api/diagram/typeconfig_property.md +++ b/docs/api/diagram/typeconfig_property.md @@ -105,7 +105,7 @@ const diagram = new dhx.Diagram("diagram_container", { - The `dateFormat` property for the PERT mode was added in v6.1 - Added in v3.1. -**Related articles**: [Arrangement of shapes in the mindmap mode of Diagram](../../../guides/diagram/configuration/#arranging-shapes-in-the-mindmap-mode-of-diagram) +**Related articles**: [Arrangement of shapes in the mindmap mode of Diagram](guides/diagram/configuration.md#arranging-shapes-in-the-mindmap-mode-of-diagram) **Related samples**: diff --git a/docs/api/diagram_editor/editbar/api_overview.md b/docs/api/diagram_editor/editbar/api_overview.md index db4e95137..949cdf0ad 100644 --- a/docs/api/diagram_editor/editbar/api_overview.md +++ b/docs/api/diagram_editor/editbar/api_overview.md @@ -6,7 +6,7 @@ description: You can check a Editbar overview in the documentation of the DHTMLX # Editbar API overview -[Editbar](/guides/diagram_editor/editbar/) is a part of the Diagram Editor that contains controls for managing Diagram items (shapes, lines, groups, etc). Use the `editbar` property of the [`view`](/api/diagram_editor/editor/config/view_property/) configuration object to show, hide and configure the Editbar. There are two ways of initialization you can choose from: +[Editbar](guides/diagram_editor/editbar.md) is a part of the Diagram Editor that contains controls for managing Diagram items (shapes, lines, groups, etc). Use the `editbar` property of the [`view`](api/diagram_editor/editor/config/view_property.md) configuration object to show, hide and configure the Editbar. There are two ways of initialization you can choose from: - creating the default Editbar by using the `editbar:true` setting: diff --git a/docs/api/diagram_editor/editbar/basic_controls/fieldset.md b/docs/api/diagram_editor/editbar/basic_controls/fieldset.md index 31401cec3..1f40990e1 100644 --- a/docs/api/diagram_editor/editbar/basic_controls/fieldset.md +++ b/docs/api/diagram_editor/editbar/basic_controls/fieldset.md @@ -6,7 +6,7 @@ description: You can explore the Fieldset control of Editbar in the documentatio # Fieldset -@short: The basic control for creating complex controls with the help of the [`controls`](/api/diagram_editor/editbar/config/controls_property/) or the [`properties`](/api/diagram_editor/editbar/config/properties_property/) Editbar configuration options. +@short: The basic control for creating complex controls with the help of the [`controls`](api/diagram_editor/editbar/config/controls_property.md) or the [`properties`](api/diagram_editor/editbar/config/properties_property.md) Editbar configuration options. ![Fieldset control](/img/editbar-basic-controls/fieldset.png) diff --git a/docs/api/diagram_editor/editbar/complex_controls/arrange.md b/docs/api/diagram_editor/editbar/complex_controls/arrange.md index ce591bf7a..040b974a9 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/arrange.md +++ b/docs/api/diagram_editor/editbar/complex_controls/arrange.md @@ -61,12 +61,12 @@ The **Arrange** control is available for all elements (excluding the **line** an ### Service properties -- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview/) within a complex control. You can configure the following elements of the **Arrange** control based on the basic controls: - - `x` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element position on the x-axis - - `y` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element position on the y-axis - - `width` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element width (px) - - `height` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element height (px) - - `angle` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element rotation angle +- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Arrange** control based on the basic controls: + - `x` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element position on the x-axis + - `y` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element position on the y-axis + - `width` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element width (px) + - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element height (px) + - `angle` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element rotation angle ## Example diff --git a/docs/api/diagram_editor/editbar/complex_controls/border.md b/docs/api/diagram_editor/editbar/complex_controls/border.md index 257945c6c..2695505d0 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/border.md +++ b/docs/api/diagram_editor/editbar/complex_controls/border.md @@ -61,10 +61,10 @@ The **Border** control is not available for the **lineTitle** element. ### Service properties -- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following elements of the **Border** control based on the basic controls: - - `stroke` - ([colorpicker](/api/diagram_editor/editbar/basic_controls/colorpicker)) sets the border color - - `strokeType` - ([combo](/api/diagram_editor/editbar/basic_controls/combo)) sets the border type - - `strokeWidth` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the border width +- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Border** control based on the basic controls: + - `stroke` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) sets the border color + - `strokeType` - ([combo](api/diagram_editor/editbar/basic_controls/combo.md)) sets the border type + - `strokeWidth` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the border width ## Example diff --git a/docs/api/diagram_editor/editbar/complex_controls/headercommon.md b/docs/api/diagram_editor/editbar/complex_controls/headercommon.md index 5e0552af3..60bd6a7d5 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/headercommon.md +++ b/docs/api/diagram_editor/editbar/complex_controls/headercommon.md @@ -61,10 +61,10 @@ The **Header common** control is available only for **group** and **swimlane** e ### Service properties -- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following elements of the **Header common** control based on the basic controls: - - `enable` - ([toggle](/api/diagram_editor/editbar/basic_controls/toggle)) toggles the group header visibility - - `fill` - ([colorpicker](/api/diagram_editor/editbar/basic_controls/colorpicker)) sets the group header background color - - `height` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the group header height (px) +- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Header common** control based on the basic controls: + - `enable` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) toggles the group header visibility + - `fill` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) sets the group header background color + - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the group header height (px) ## Example diff --git a/docs/api/diagram_editor/editbar/complex_controls/headerposition.md b/docs/api/diagram_editor/editbar/complex_controls/headerposition.md index 5f4e34e13..9b49dd02a 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/headerposition.md +++ b/docs/api/diagram_editor/editbar/complex_controls/headerposition.md @@ -61,8 +61,8 @@ The **Header position** control is available only for **group** and **swimlane** ### Service properties -- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following element of the **Header position** control based on the basic controls: - - `position` - ([toggleGroup](/api/diagram_editor/editbar/basic_controls/togglegroup)) - sets a position of the group header +- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following element of the **Header position** control based on the basic controls: + - `position` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) - sets a position of the group header ## Example diff --git a/docs/api/diagram_editor/editbar/complex_controls/lineshape.md b/docs/api/diagram_editor/editbar/complex_controls/lineshape.md index 657726407..85ae9ee85 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/lineshape.md +++ b/docs/api/diagram_editor/editbar/complex_controls/lineshape.md @@ -61,8 +61,8 @@ The **Line shape** control is available only for the **line** element in the *de ### Service properties -- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following element of the **Line shape** control based on the basic controls: - - `connectType` - ([toggleGroup](/api/diagram_editor/editbar/basic_controls/togglegroup)) sets the connector type +- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following element of the **Line shape** control based on the basic controls: + - `connectType` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) sets the connector type ## Example diff --git a/docs/api/diagram_editor/editbar/complex_controls/pointerview.md b/docs/api/diagram_editor/editbar/complex_controls/pointerview.md index bffe02f5c..44a40b7b4 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/pointerview.md +++ b/docs/api/diagram_editor/editbar/complex_controls/pointerview.md @@ -61,9 +61,9 @@ The **Pointer view** control is available only for the **line** element in the * ### Service properties -- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following elements of the **Pointer view** control based on the basic controls: - - `backArrow` - ([toggleGroup](/api/diagram_editor/editbar/basic_controls/togglegroup)) sets the arrow type at the end of connector - - `forwardArrow` - ([toggleGroup](/api/diagram_editor/editbar/basic_controls/togglegroup)) sets the arrow type at the start of connector +- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Pointer view** control based on the basic controls: + - `backArrow` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) sets the arrow type at the end of connector + - `forwardArrow` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) sets the arrow type at the start of connector ## Example diff --git a/docs/api/diagram_editor/editbar/complex_controls/position.md b/docs/api/diagram_editor/editbar/complex_controls/position.md index ed43e32cf..adcdc760c 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/position.md +++ b/docs/api/diagram_editor/editbar/complex_controls/position.md @@ -61,9 +61,9 @@ The **Position** control is available only for the **shape** element in the *org ### Service properties -- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview)) within a complex control. You can configure the following elements of the **Position** control based on the basic controls: - - `dx` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the shape offset from the predefined algorithm on the x-axis - - `dy` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the shape offset from the predefined algorithm on the y-axis +- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md)) within a complex control. You can configure the following elements of the **Position** control based on the basic controls: + - `dx` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the shape offset from the predefined algorithm on the x-axis + - `dy` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the shape offset from the predefined algorithm on the y-axis ## Example diff --git a/docs/api/diagram_editor/editbar/complex_controls/size.md b/docs/api/diagram_editor/editbar/complex_controls/size.md index ae059cdfd..e666b1de6 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/size.md +++ b/docs/api/diagram_editor/editbar/complex_controls/size.md @@ -61,9 +61,9 @@ The **Size** control is available only for the **shape**, **group** and **swimla ### Service properties -- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following elements of the **Size** control based on the basic controls: - - `width` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element width (px) - - `height` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element height (px) +- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Size** control based on the basic controls: + - `width` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element width (px) + - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element height (px) ## Example diff --git a/docs/api/diagram_editor/editbar/complex_controls/textalign.md b/docs/api/diagram_editor/editbar/complex_controls/textalign.md index ab117abb5..81255a0e4 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/textalign.md +++ b/docs/api/diagram_editor/editbar/complex_controls/textalign.md @@ -57,9 +57,9 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; ### Service properties -- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following elements of the **Text align** control based on the basic controls: - - `textAlign` - ([toggleGroup](/api/diagram_editor/editbar/basic_controls/togglegroup)) sets the horizontal alignment of text - - `textVerticalAlign` - ([toggleGroup](/api/diagram_editor/editbar/basic_controls/togglegroup)) sets the vertical alignment of text +- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Text align** control based on the basic controls: + - `textAlign` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) sets the horizontal alignment of text + - `textVerticalAlign` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) sets the vertical alignment of text ## Example diff --git a/docs/api/diagram_editor/editbar/complex_controls/textstyle.md b/docs/api/diagram_editor/editbar/complex_controls/textstyle.md index eea0acf94..05f807ab4 100644 --- a/docs/api/diagram_editor/editbar/complex_controls/textstyle.md +++ b/docs/api/diagram_editor/editbar/complex_controls/textstyle.md @@ -57,12 +57,12 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; ### Service properties -- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following elements of the **Text style** control based on the basic controls: - - `fontSize` - ([combo](/api/diagram_editor/editbar/basic_controls/combo)) sets the font size - - `lineHeight` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the line height - - `fontColor` - ([colorpicker](/api/diagram_editor/editbar/basic_controls/colorpicker)) sets the font color - - `fontWeight` - ([toggle](/api/diagram_editor/editbar/basic_controls/toggle)) sets the font weight - - `fontStyle` - ([toggle](/api/diagram_editor/editbar/basic_controls/toggle)) sets the font style +- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Text style** control based on the basic controls: + - `fontSize` - ([combo](api/diagram_editor/editbar/basic_controls/combo.md)) sets the font size + - `lineHeight` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the line height + - `fontColor` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) sets the font color + - `fontWeight` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) sets the font weight + - `fontStyle` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) sets the font style ## Example diff --git a/docs/api/diagram_editor/editor/config/autoplacement_property.md b/docs/api/diagram_editor/editor/config/autoplacement_property.md index b043baaf2..3e26c544d 100644 --- a/docs/api/diagram_editor/editor/config/autoplacement_property.md +++ b/docs/api/diagram_editor/editor/config/autoplacement_property.md @@ -77,16 +77,16 @@ Connector lines with no arrows are aligned "from center to center". They are str Connector lines are aligned "from side to side". :::info -To add arrows to the lines, specify `forwardArrow: "filled"` or `backArrow: "filled"` in the configuration of a [line object](/lines/configuration_properties/). +To add arrows to the lines, specify `forwardArrow: "filled"` or `backArrow: "filled"` in the configuration of a [line object](lines/configuration_properties.md). ::: The connector lines in the "edges" mode can be: -- either straight (if you set the `connectType: "straight"` property of a [line object](/lines/configuration_properties/)) +- either straight (if you set the `connectType: "straight"` property of a [line object](lines/configuration_properties.md)) ![](/img/edges_straight_mode.png) -- or 90-degree curved (if you set the `connectType: "elbow"` property of a [line object](/lines/configuration_properties/)) +- or 90-degree curved (if you set the `connectType: "elbow"` property of a [line object](lines/configuration_properties.md)) ![](/img/edges_mode.png) diff --git a/docs/api/diagram_editor/editor/config/defaults_property.md b/docs/api/diagram_editor/editor/config/defaults_property.md index bd16d332a..f4e3849ef 100644 --- a/docs/api/diagram_editor/editor/config/defaults_property.md +++ b/docs/api/diagram_editor/editor/config/defaults_property.md @@ -20,7 +20,7 @@ defaults?: { ### Parameters -The `defaults` object can contain a set of `key:value` pairs where *key* is the type of a shape or line and *value* is a set of configuration settings of the [shape](/shapes/configuration_properties/) or [line](/lines/configuration_properties/) correspondingly. +The `defaults` object can contain a set of `key:value` pairs where *key* is the type of a shape or line and *value* is a set of configuration settings of the [shape](shapes/configuration_properties.md) or [line](lines/configuration_properties.md) correspondingly. :::note The `type` and `id` attributes can not be defined in the default configuration of a shape/line. @@ -58,14 +58,14 @@ const editor = new dhx.DiagramEditor("editor_container", { ~~~ :::info -After defining the default settings for the shape/line of separate types, you can either omit these properties or redefine their values while [preparing a data set](/diagram/guides/loading_data/#preparing-data-to-load) for the shapes/lines of these types. +After defining the default settings for the shape/line of separate types, you can either omit these properties or redefine their values while [preparing a data set](guides/loading_data.md#preparing-data-to-load) for the shapes/lines of these types. ::: **Change log**: The ability to set the default configuration for lines was added in v4.2 **Related articles**: -- [Setting the default configuration of a shape](/guides/diagram/configuration/#setting-the-default-configuration-of-a-shape) -- [Setting the preview of shapes](/guides/diagram_editor/shapebar/#setting-the-preview-of-shapes) +- [Setting the default configuration of a shape](guides/diagram/configuration.md#setting-the-default-configuration-of-a-shape) +- [Setting the preview of shapes](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes) **Related sample**: [Diagram editor. Setting the default line (connector) type. Try connecting shape A to shape B](https://snippet.dhtmlx.com/22abzn5m) diff --git a/docs/api/diagram_editor/editor/config/lineconfig_property.md b/docs/api/diagram_editor/editor/config/lineconfig_property.md index fdfb1a59f..163c172d3 100644 --- a/docs/api/diagram_editor/editor/config/lineconfig_property.md +++ b/docs/api/diagram_editor/editor/config/lineconfig_property.md @@ -79,7 +79,7 @@ The result of applying the **lineGap** property is shown in the image below: **Change log**: - The `connectType` parameter is added in v6.1 -- The `lineGap` parameter is added in v5.0 (check the [Migration article](diagram/migration.md/#42---50)) +- The `lineGap` parameter is added in v5.0 (check the [Migration article](migration.md#42---50)) - Added in v4.2 **Related sample**: [Diagram editor. Setting the default line (connector) type. Try connecting shape A to shape B](https://snippet.dhtmlx.com/22abzn5m) diff --git a/docs/api/diagram_editor/editor/config/shapetoolbar_property.md b/docs/api/diagram_editor/editor/config/shapetoolbar_property.md index 09a5a1a79..c8846de0e 100644 --- a/docs/api/diagram_editor/editor/config/shapetoolbar_property.md +++ b/docs/api/diagram_editor/editor/config/shapetoolbar_property.md @@ -84,6 +84,6 @@ const editor = new dhx.DiagramEditor("editor_container", { **Change log:** The `tooltip` parameter of the icon object is added in v5.0 -**Related articles**: [Grid Area](/guides/diagram_editor/grid_area/#configuring-the-toolbar-of-an-item) +**Related articles**: [Grid Area](guides/diagram_editor/grid_area.md#configuring-the-toolbar-of-an-item) **Relate sample**: [Diagram Editor. Org chart mode. Shape toolbar configuration](https://snippet.dhtmlx.com/b2agwets) diff --git a/docs/api/diagram_editor/editor/config/shapetype_property.md b/docs/api/diagram_editor/editor/config/shapetype_property.md index 8c79b0fb6..40f7bd601 100644 --- a/docs/api/diagram_editor/editor/config/shapetype_property.md +++ b/docs/api/diagram_editor/editor/config/shapetype_property.md @@ -46,4 +46,4 @@ const editor = new dhx.DiagramEditor("editor_container", { }); ~~~ -**Related articles**: [Default Shapes](/shapes/default_shapes/) +**Related articles**: [Default Shapes](shapes/default_shapes.md) diff --git a/docs/api/diagram_editor/editor/config/type_property.md b/docs/api/diagram_editor/editor/config/type_property.md index 7538ad3c4..112d67d69 100644 --- a/docs/api/diagram_editor/editor/config/type_property.md +++ b/docs/api/diagram_editor/editor/config/type_property.md @@ -34,6 +34,6 @@ Diagram Editor can be initialized in one of three modes: **Related articles**: -- [Overview](/editor_overview) -- [How to start with Diagram Editor](/guides/diagram_editor/initialization/) +- [Overview](editor_overview.md) +- [How to start with Diagram Editor](guides/diagram_editor/initialization.md) diff --git a/docs/api/diagram_editor/editor/config/view_property.md b/docs/api/diagram_editor/editor/config/view_property.md index 74317a1c9..5ad338d0b 100644 --- a/docs/api/diagram_editor/editor/config/view_property.md +++ b/docs/api/diagram_editor/editor/config/view_property.md @@ -22,9 +22,9 @@ view: { ### Parameters -- `toolbar` - (optional) allows you to show/hide **Toolbar** (if *boolean*) or configure its appearance (if *object*). Refer to the [Toolbar API](/api/diagram_editor/toolbar/api_overview/) section for more information about configuring the toolbar -- `shapebar` - (optional) allows you to show/hide **Shapebar** (if *boolean*) or configure its appearance (if *object*). Refer to the [Shapebar API](/api/diagram_editor/shapebar/api_overview/) section for more information about configuring the shapebar -- `editbar` - (optional) allows you to show/hide **Editbar** (if *boolean*) or configure its appearance (if *object*). Refer to the [Editbar API](/api/diagram_editor/editbar/api_overview/) section for more information about configuring the Editbar +- `toolbar` - (optional) allows you to show/hide **Toolbar** (if *boolean*) or configure its appearance (if *object*). Refer to the [Toolbar API](api/diagram_editor/toolbar/api_overview.md) section for more information about configuring the toolbar +- `shapebar` - (optional) allows you to show/hide **Shapebar** (if *boolean*) or configure its appearance (if *object*). Refer to the [Shapebar API](api/diagram_editor/shapebar/api_overview.md) section for more information about configuring the shapebar +- `editbar` - (optional) allows you to show/hide **Editbar** (if *boolean*) or configure its appearance (if *object*). Refer to the [Editbar API](api/diagram_editor/editbar/api_overview.md) section for more information about configuring the Editbar ### Default config diff --git a/docs/api/diagram_editor/editor/events/afteritemmove_event.md b/docs/api/diagram_editor/editor/events/afteritemmove_event.md index 16d5d3ecc..a6500fba7 100644 --- a/docs/api/diagram_editor/editor/events/afteritemmove_event.md +++ b/docs/api/diagram_editor/editor/events/afteritemmove_event.md @@ -67,8 +67,8 @@ editor.events.on("afterItemMove", ({ id, coords }) => { **Related API**: -- [`beforeItemMove`](/api/diagram_editor/editor/events/beforeitemmove_event/) -- [`itemMoveEnd`](/api/diagram_editor/editor/events/itemmoveend_event/) +- [`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md) +- [`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md) **Related samples**: diff --git a/docs/api/diagram_editor/editor/events/afteritemresize_event.md b/docs/api/diagram_editor/editor/events/afteritemresize_event.md index 7923adf1c..ba706c069 100644 --- a/docs/api/diagram_editor/editor/events/afteritemresize_event.md +++ b/docs/api/diagram_editor/editor/events/afteritemresize_event.md @@ -66,8 +66,8 @@ editor.events.on("afterItemResize", ({ id, width, height }) => { **Related API**: -- [`beforeItemResize`](/api/diagram_editor/editor/events/beforeitemresize_event/) -- [`itemResizeEnd`](/api/diagram_editor/editor/events/itemresizeend_event/) +- [`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md) +- [`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md) **Related samples**: diff --git a/docs/api/diagram_editor/editor/events/afteritemrotate_event.md b/docs/api/diagram_editor/editor/events/afteritemrotate_event.md index 8b22aed52..2b574133a 100644 --- a/docs/api/diagram_editor/editor/events/afteritemrotate_event.md +++ b/docs/api/diagram_editor/editor/events/afteritemrotate_event.md @@ -46,8 +46,8 @@ editor.events.on("afterItemRotate", ({ id, angle }) => { **Related API**: -- [`beforeItemRotate`](/api/diagram_editor/editor/events/beforeitemrotate_event/) -- [`itemRotateEnd`](/api/diagram_editor/editor/events/itemrotateend_event/) +- [`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md) +- [`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md) **Related samples**: diff --git a/docs/api/diagram_editor/editor/events/beforeitemmove_event.md b/docs/api/diagram_editor/editor/events/beforeitemmove_event.md index d830eb493..3cb2ad766 100644 --- a/docs/api/diagram_editor/editor/events/beforeitemmove_event.md +++ b/docs/api/diagram_editor/editor/events/beforeitemmove_event.md @@ -72,8 +72,8 @@ editor.events.on("beforeItemMove", ({ id, coords }) => { **Related API**: -- [`afterItemMove`](/api/diagram_editor/editor/events/afteritemmove_event/) -- [`itemMoveEnd`](/api/diagram_editor/editor/events/itemmoveend_event/) +- [`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md) +- [`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md) **Related samples**: diff --git a/docs/api/diagram_editor/editor/events/beforeitemresize_event.md b/docs/api/diagram_editor/editor/events/beforeitemresize_event.md index 27daa33a9..c590f9981 100644 --- a/docs/api/diagram_editor/editor/events/beforeitemresize_event.md +++ b/docs/api/diagram_editor/editor/events/beforeitemresize_event.md @@ -70,8 +70,8 @@ editor.events.on("beforeItemResize", ({ id, width, height }) => { **Related API**: -- [`afterItemResize`](/api/diagram_editor/editor/events/afteritemresize_event/) -- [`itemResizeEnd`](/api/diagram_editor/editor/events/itemresizeend_event/) +- [`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md) +- [`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md) **Related samples**: diff --git a/docs/api/diagram_editor/editor/events/beforeitemrotate_event.md b/docs/api/diagram_editor/editor/events/beforeitemrotate_event.md index 435ab9de9..bcda26789 100644 --- a/docs/api/diagram_editor/editor/events/beforeitemrotate_event.md +++ b/docs/api/diagram_editor/editor/events/beforeitemrotate_event.md @@ -54,8 +54,8 @@ editor.events.on("beforeItemRotate", ({ id, angle }) => { **Related API**: -- [`afterItemRotate`](/api/diagram_editor/editor/events/afteritemrotate_event/) -- [`itemRotateEnd`](/api/diagram_editor/editor/events/itemrotateend_event/) +- [`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md) +- [`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md) **Related samples**: diff --git a/docs/api/diagram_editor/editor/events/itemmoveend_event.md b/docs/api/diagram_editor/editor/events/itemmoveend_event.md index 646916da9..6cee37ea7 100644 --- a/docs/api/diagram_editor/editor/events/itemmoveend_event.md +++ b/docs/api/diagram_editor/editor/events/itemmoveend_event.md @@ -63,8 +63,8 @@ editor.events.on("itemMoveEnd", ({ id, coords }) => { **Related API**: -- [`afterItemMove`](/api/diagram_editor/editor/events/afteritemmove_event/) -- [`beforeItemMove`](/api/diagram_editor/editor/events/beforeitemmove_event/) +- [`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md) +- [`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md) **Related samples**: diff --git a/docs/api/diagram_editor/editor/events/itemresizeend_event.md b/docs/api/diagram_editor/editor/events/itemresizeend_event.md index 45574bf08..1a3b9db5a 100644 --- a/docs/api/diagram_editor/editor/events/itemresizeend_event.md +++ b/docs/api/diagram_editor/editor/events/itemresizeend_event.md @@ -68,8 +68,8 @@ editor.events.on("itemResizeEnd", ({ id, width, height }) => { **Related API**: -- [`beforeItemResize`](/api/diagram_editor/editor/events/beforeitemresize_event/) -- [`afterItemResize`](/api/diagram_editor/editor/events/afteritemresize_event/) +- [`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md) +- [`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md) **Related samples**: diff --git a/docs/api/diagram_editor/editor/events/itemrotateend_event.md b/docs/api/diagram_editor/editor/events/itemrotateend_event.md index aeadfe0fc..4c329a643 100644 --- a/docs/api/diagram_editor/editor/events/itemrotateend_event.md +++ b/docs/api/diagram_editor/editor/events/itemrotateend_event.md @@ -47,8 +47,8 @@ editor.events.on("itemRotateEnd", ({ id, angle }) => { **Related API**: -- [`beforeItemRotate`](/api/diagram_editor/editor/events/beforeitemrotate_event/) -- [`afterItemRotate`](/api/diagram_editor/editor/events/afteritemrotate_event/) +- [`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md) +- [`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md) **Related samples**: diff --git a/docs/api/diagram_editor/shapebar/api_overview.md b/docs/api/diagram_editor/shapebar/api_overview.md index dd52d70b1..16d47145d 100644 --- a/docs/api/diagram_editor/shapebar/api_overview.md +++ b/docs/api/diagram_editor/shapebar/api_overview.md @@ -6,7 +6,7 @@ description: You can check a Shapebar overview in the documentation of the DHTML # Shapebar API overview -[Shapebar](/guides/diagram_editor/shapebar/) is a part of the Diagram Editor that renders previews of Diagram items (shapes, groups and swimlanes). Use the `shapebar` property of the [`view`](/api/diagram_editor/editor/config/view_property/) configuration object to show, hide and configure the Shapebar. There are two ways of initialization you can choose from: +[Shapebar](guides/diagram_editor/shapebar.md) is a part of the Diagram Editor that renders previews of Diagram items (shapes, groups and swimlanes). Use the `shapebar` property of the [`view`](api/diagram_editor/editor/config/view_property.md) configuration object to show, hide and configure the Shapebar. There are two ways of initialization you can choose from: - creating the default Shapebar by using the `shapebar:true` setting: diff --git a/docs/api/diagram_editor/shapebar/config/css_property.md b/docs/api/diagram_editor/shapebar/config/css_property.md index e846b00be..72d1b451d 100644 --- a/docs/api/diagram_editor/shapebar/config/css_property.md +++ b/docs/api/diagram_editor/shapebar/config/css_property.md @@ -42,7 +42,7 @@ css?: string; **Related articles**: -- [Shapebar and shapes appearance](guides/diagram_editor/shapebar.md/#shapebar-and-shapes-appearance) -- [Configuring the look of shapes in Shapebar](guides/themes/base_themes_configuration.md/#configuring-the-look-of-shapes-in-shapebar) +- [Shapebar and shapes appearance](guides/diagram_editor/shapebar.md#shapebar-and-shapes-appearance) +- [Configuring the look of shapes in Shapebar](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar) **Change log**: Added in v6.0 diff --git a/docs/api/diagram_editor/shapebar/config/preview_property.md b/docs/api/diagram_editor/shapebar/config/preview_property.md index 00c178ea2..90916b4ea 100644 --- a/docs/api/diagram_editor/shapebar/config/preview_property.md +++ b/docs/api/diagram_editor/shapebar/config/preview_property.md @@ -54,7 +54,7 @@ const editor = new dhx.DiagramEditor("editor_container", { ### Details -The values of the **gap** and **scale** properties can be redefined for a separate shape via the **gap** and **scale** attributes of the [preview](shapes/configuration_properties.md/#properties-specific-for-the-default-mode) property of the shape object: +The values of the **gap** and **scale** properties can be redefined for a separate shape via the **gap** and **scale** attributes of the [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) property of the shape object: ~~~jsx {14-17} const defaults = { @@ -80,6 +80,6 @@ const editor = new dhx.DiagramEditor("editor_container", { }); ~~~ -**Related article**: [Shapebar](guides/diagram_editor/shapebar.md/#setting-the-preview-of-shapes) +**Related article**: [Shapebar](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes) **Change log**: Added in v6.0 diff --git a/docs/api/diagram_editor/shapebar/config/sections_property.md b/docs/api/diagram_editor/shapebar/config/sections_property.md index 84830f944..315cecf94 100644 --- a/docs/api/diagram_editor/shapebar/config/sections_property.md +++ b/docs/api/diagram_editor/shapebar/config/sections_property.md @@ -6,7 +6,7 @@ description: You can learn about the sections property of Shapebar in the docume # sections -The [default sections of the shapebar](guides/diagram_editor/shapebar.md/#default-sections) are: *Shapes*, *Groups*, *Swimlanes*. +The [default sections of the shapebar](guides/diagram_editor/shapebar.md#default-sections) are: *Shapes*, *Groups*, *Swimlanes*. Using the **sections** property you can change the structure of the shapebar and display the necessary items. @@ -28,7 +28,7 @@ The `sections` object can contain a set of *key:value* pairs where: - `key` - the name of a section specified by a user - `value` - an array which can include: - an object with one *key:value* pair for rendering a basic set of shapes. The list of available pairs is given below: - - `{flowShapes: true}` - (optional) displays all available types of the [Flow-chart](/diagram/shapes/default_shapes/#shapes-in-the-default-mode) shapes + - `{flowShapes: true}` - (optional) displays all available types of the [Flow-chart](shapes/default_shapes.md#shapes-in-the-default-mode) shapes - `{org: true}` - (optional) displays Org shapes: the "card" and "img-card" shape types - `{group: true}` - (optional) displays a basic set of Groups - `{swimlane: true}` - (optional) displays a basic set of Swimlanes @@ -169,6 +169,6 @@ const editor = new dhx.DiagramEditor("editor_container", { }); ~~~ -**Related article**: [Shapebar](guides/diagram_editor/shapebar.md/#custom-sections) +**Related article**: [Shapebar](guides/diagram_editor/shapebar.md#custom-sections) **Change log**: Added in v6.0 diff --git a/docs/api/diagram_editor/shapebar/config/show_property.md b/docs/api/diagram_editor/shapebar/config/show_property.md index 72cfacc19..3b1680ba4 100644 --- a/docs/api/diagram_editor/shapebar/config/show_property.md +++ b/docs/api/diagram_editor/shapebar/config/show_property.md @@ -37,6 +37,6 @@ const editor = new dhx.DiagramEditor("editor_container", { }); ~~~ -**Related article**: [Shapebar](guides/diagram_editor/shapebar.md/#showinghiding-the-shapebar) +**Related article**: [Shapebar](guides/diagram_editor/shapebar.md#showinghiding-the-shapebar) **Change log**: Added in v6.0 diff --git a/docs/api/diagram_editor/shapebar/config/width_property.md b/docs/api/diagram_editor/shapebar/config/width_property.md index c592e96b8..422ba49ca 100644 --- a/docs/api/diagram_editor/shapebar/config/width_property.md +++ b/docs/api/diagram_editor/shapebar/config/width_property.md @@ -37,6 +37,6 @@ const editor = new dhx.DiagramEditor("editor_container", { }); ~~~ -**Related article**: [Shapebar](guides/diagram_editor/shapebar.md/#setting-the-width-of-shapebar) +**Related article**: [Shapebar](guides/diagram_editor/shapebar.md#setting-the-width-of-shapebar) **Change log**: Added in v6.0 diff --git a/docs/api/diagram_editor/toolbar/api_overview.md b/docs/api/diagram_editor/toolbar/api_overview.md index 8d0d87304..9718f5d6c 100644 --- a/docs/api/diagram_editor/toolbar/api_overview.md +++ b/docs/api/diagram_editor/toolbar/api_overview.md @@ -6,7 +6,7 @@ description: You can check a Toolbar overview in the documentation of the DHTMLX # Toolbar API overview -[Toolbar](/guides/diagram_editor/toolbar/) is a part of the Diagram Editor that helps users to control the editing process. Use the `toolbar` property of the [`view`](/api/diagram_editor/editor/config/view_property/) configuration object to show, hide and configure the Toolbar. There are two ways of initialization you can choose from: +[Toolbar](guides/diagram_editor/toolbar.md) is a part of the Diagram Editor that helps users to control the editing process. Use the `toolbar` property of the [`view`](api/diagram_editor/editor/config/view_property.md) configuration object to show, hide and configure the Toolbar. There are two ways of initialization you can choose from: - creating the default Toolbar by using the `toolbar:true` setting: @@ -39,7 +39,7 @@ Check the related API sections to explore the available methods, properties and ## Toolbar methods -- [List of Toolbar methods](/api/diagram_editor/toolbar/methods/overview/) +- [List of Toolbar methods](api/diagram_editor/toolbar/methods/overview.md) ## Toolbar properties @@ -47,4 +47,4 @@ Check the related API sections to explore the available methods, properties and ## Toolbar events -- [List of Toolbar events](/api/diagram_editor/toolbar/events/overview/) +- [List of Toolbar events](api/diagram_editor/toolbar/events/overview.md) diff --git a/docs/api/diagram_editor/toolbar/config/items_property.md b/docs/api/diagram_editor/toolbar/config/items_property.md index 6e1e955b4..22ff6542c 100644 --- a/docs/api/diagram_editor/toolbar/config/items_property.md +++ b/docs/api/diagram_editor/toolbar/config/items_property.md @@ -18,17 +18,17 @@ items?: (object | string)[]; ### Configuring items via strings -The `items` property allows you to specify [**Service elements**](guides/diagram_editor/toolbar.md/#service-elements) as an array of strings: +The `items` property allows you to specify [**Service elements**](guides/diagram_editor/toolbar.md#service-elements) as an array of strings: ~~~jsx items: [ "file", "edit", "view", "arrange", "spacer", "scale" ]; ~~~ -The full list of service elements you can see [here](guides/diagram_editor/toolbar.md/#service-elements). +The full list of service elements you can see [here](guides/diagram_editor/toolbar.md#service-elements). ### Configuring items via objects -The `items` property allows you to specify [**Service elements**](guides/diagram_editor/toolbar.md/#service-elements) and [**Base elements**](guides/diagram_editor/toolbar.md/#base-elements) as an array of objects: +The `items` property allows you to specify [**Service elements**](guides/diagram_editor/toolbar.md#service-elements) and [**Base elements**](guides/diagram_editor/toolbar.md#base-elements) as an array of objects: ~~~jsx items: [ @@ -50,7 +50,7 @@ items: [ #### Parameters -For all [**service elements**](guides/diagram_editor/toolbar.md/#service-elements), excluding `separator` / `spacer` / `scale`, you can specify an object with the following parameters: +For all [**service elements**](guides/diagram_editor/toolbar.md#service-elements), excluding `separator` / `spacer` / `scale`, you can specify an object with the following parameters: - `type` - (required) - the type of a service element. The full list of service element types you can see [here](guides/diagram_editor/toolbar.md) - `id` - (optional) - the ID of a service element. By default, the ID of a service element includes **$** and the **type** of the service element: **$file** diff --git a/docs/api/export/pdf_method.md b/docs/api/export/pdf_method.md index 098c43e15..faa042fe8 100644 --- a/docs/api/export/pdf_method.md +++ b/docs/api/export/pdf_method.md @@ -101,7 +101,7 @@ It is necessary to set sufficient margin for correct display of `headerTemplate` | "A5" | (5.83in x 8.27in) | | "A6" | (4.13in x 5.83in) | -**Related articles**: [Exporting Diagram](../../../guides/data_export/) +**Related articles**: [Exporting Diagram](guides/data_export.md) **Related samples**: diff --git a/docs/api/export/png_method.md b/docs/api/export/png_method.md index 2fb16ee01..923311fed 100644 --- a/docs/api/export/png_method.md +++ b/docs/api/export/png_method.md @@ -55,7 +55,7 @@ diagram.export.png({ .finally(() => console.log("finished")); ~~~ -**Related articles**: [Exporting Diagram](../../../guides/data_export/) +**Related articles**: [Exporting Diagram](guides/data_export.md) **Related samples**: diff --git a/docs/api/overview/cellmanager_events_overview.md b/docs/api/overview/cellmanager_events_overview.md index c7e4ee78a..6eaf9991c 100644 --- a/docs/api/overview/cellmanager_events_overview.md +++ b/docs/api/overview/cellmanager_events_overview.md @@ -8,11 +8,11 @@ description: You can explore the CellManager events in the documentation of the | Name | Description | | :------------------------------------------------- | :-------------------------------------------------------- | -| [](../cell_manager/aftercellsadd_event.md) | @getshort(../cell_manager/aftercellsadd_event.md) | -| [](../cell_manager/aftercellsmove_event.md) | @getshort(../cell_manager/aftercellsmove_event.md) | -| [](../cell_manager/aftercellsremove_event.md) | @getshort(../cell_manager/aftercellsremove_event.md) | -| [](../cell_manager/aftercellsvalidation_event.md) | @getshort(../cell_manager/aftercellsvalidation_event.md) | -| [](../cell_manager/beforecellsadd_event.md) | @getshort(../cell_manager/beforecellsadd_event.md) | -| [](../cell_manager/beforecellsmove_event.md) | @getshort(../cell_manager/beforecellsmove_event.md) | -| [](../cell_manager/beforecellsremove_event.md) | @getshort(../cell_manager/beforecellsremove_event.md) | -| [](../cell_manager/beforecellsvalidation_event.md) | @getshort(../cell_manager/beforecellsvalidation_event.md) | +| [](api/cell_manager/aftercellsadd_event.md) | @getshort(../cell_manager/aftercellsadd_event.md) | +| [](api/cell_manager/aftercellsmove_event.md) | @getshort(../cell_manager/aftercellsmove_event.md) | +| [](api/cell_manager/aftercellsremove_event.md) | @getshort(../cell_manager/aftercellsremove_event.md) | +| [](api/cell_manager/aftercellsvalidation_event.md) | @getshort(../cell_manager/aftercellsvalidation_event.md) | +| [](api/cell_manager/beforecellsadd_event.md) | @getshort(../cell_manager/beforecellsadd_event.md) | +| [](api/cell_manager/beforecellsmove_event.md) | @getshort(../cell_manager/beforecellsmove_event.md) | +| [](api/cell_manager/beforecellsremove_event.md) | @getshort(../cell_manager/beforecellsremove_event.md) | +| [](api/cell_manager/beforecellsvalidation_event.md) | @getshort(../cell_manager/beforecellsvalidation_event.md) | diff --git a/docs/api/overview/cellmanager_methods_overview.md b/docs/api/overview/cellmanager_methods_overview.md index 88b6d02b5..133773f9b 100644 --- a/docs/api/overview/cellmanager_methods_overview.md +++ b/docs/api/overview/cellmanager_methods_overview.md @@ -8,14 +8,14 @@ description: You can explore the CellManager methods in the documentation of the | Name | Description | | :-------------------------------------------------- | :--------------------------------------------------------- | -| [](../cell_manager/add_method.md) | @getshort(../cell_manager/add_method.md) | -| [](../cell_manager/getcellid_method.md) | @getshort(../cell_manager/getcellid_method.md) | -| [](../cell_manager/getcellindex_method.md) | @getshort(../cell_manager/getcellindex_method.md) | -| [](../cell_manager/getsubheadercellid_method.md) | @getshort(../cell_manager/getsubheadercellid_method.md) | -| [](../cell_manager/getsubheadercellindex_method.md) | @getshort(../cell_manager/getsubheadercellindex_method.md) | -| [](../cell_manager/getsubheadertype_method.md) | @getshort(../cell_manager/getsubheadertype_method.md) | -| [](../cell_manager/move_method.md) | @getshort(../cell_manager/move_method.md) | -| [](../cell_manager/remove_method.md) | @getshort(../cell_manager/remove_method.md) | -| [](../cell_manager/resetswimlane_method.md) | @getshort(../cell_manager/resetswimlane_method.md) | -| [](../cell_manager/setswimlane_method.md) | @getshort(../cell_manager/setswimlane_method.md) | -| [](../cell_manager/validation_method.md) | @getshort(../cell_manager/validation_method.md) | +| [](api/cell_manager/add_method.md) | @getshort(../cell_manager/add_method.md) | +| [](api/cell_manager/getcellid_method.md) | @getshort(../cell_manager/getcellid_method.md) | +| [](api/cell_manager/getcellindex_method.md) | @getshort(../cell_manager/getcellindex_method.md) | +| [](api/cell_manager/getsubheadercellid_method.md) | @getshort(../cell_manager/getsubheadercellid_method.md) | +| [](api/cell_manager/getsubheadercellindex_method.md) | @getshort(../cell_manager/getsubheadercellindex_method.md) | +| [](api/cell_manager/getsubheadertype_method.md) | @getshort(../cell_manager/getsubheadertype_method.md) | +| [](api/cell_manager/move_method.md) | @getshort(../cell_manager/move_method.md) | +| [](api/cell_manager/remove_method.md) | @getshort(../cell_manager/remove_method.md) | +| [](api/cell_manager/resetswimlane_method.md) | @getshort(../cell_manager/resetswimlane_method.md) | +| [](api/cell_manager/setswimlane_method.md) | @getshort(../cell_manager/setswimlane_method.md) | +| [](api/cell_manager/validation_method.md) | @getshort(../cell_manager/validation_method.md) | diff --git a/docs/api/overview/datacollection_events_overview.md b/docs/api/overview/datacollection_events_overview.md index be8404b84..824ab1719 100644 --- a/docs/api/overview/datacollection_events_overview.md +++ b/docs/api/overview/datacollection_events_overview.md @@ -8,10 +8,10 @@ description: You can explore the DataCollection events in the documentation of t | Name | Description | | :------------------------------------------- | :-------------------------------------------------- | -| [](../data_collection/afteradd_event.md) | @getshort(../data_collection/afteradd_event.md) | -| [](../data_collection/afterremove_event.md) | @getshort(../data_collection/afterremove_event.md) | -| [](../data_collection/beforeadd_event.md) | @getshort(../data_collection/beforeadd_event.md) | -| [](../data_collection/beforeremove_event.md) | @getshort(../data_collection/beforeremove_event.md) | -| [](../data_collection/change_event.md) | @getshort(../data_collection/change_event.md) | -| [](../data_collection/filter_event.md) | @getshort(../data_collection/filter_event.md) | -| [](../data_collection/load_event.md) | @getshort(../data_collection/load_event.md) | +| [](api/data_collection/afteradd_event.md) | @getshort(../data_collection/afteradd_event.md) | +| [](api/data_collection/afterremove_event.md) | @getshort(../data_collection/afterremove_event.md) | +| [](api/data_collection/beforeadd_event.md) | @getshort(../data_collection/beforeadd_event.md) | +| [](api/data_collection/beforeremove_event.md) | @getshort(../data_collection/beforeremove_event.md) | +| [](api/data_collection/change_event.md) | @getshort(../data_collection/change_event.md) | +| [](api/data_collection/filter_event.md) | @getshort(../data_collection/filter_event.md) | +| [](api/data_collection/load_event.md) | @getshort(../data_collection/load_event.md) | diff --git a/docs/api/overview/datacollection_methods_overview.md b/docs/api/overview/datacollection_methods_overview.md index 4031b9ca5..5e4a1b515 100644 --- a/docs/api/overview/datacollection_methods_overview.md +++ b/docs/api/overview/datacollection_methods_overview.md @@ -8,27 +8,27 @@ description: You can explore the DataCollection methods in the documentation of | Name | Description | | :------------------------------------------ | :------------------------------------------------- | -| [](../data_collection/add_method.md) | @getshort(../data_collection/add_method.md) | -| [](../data_collection/copy_method.md) | @getshort(../data_collection/copy_method.md) | -| [](../data_collection/eachchild_method.md) | @getshort(../data_collection/eachchild_method.md) | -| [](../data_collection/eachparent_method.md) | @getshort(../data_collection/eachparent_method.md) | -| [](../data_collection/exists_method.md) | @getshort(../data_collection/exists_method.md) | -| [](../data_collection/filter_method.md) | @getshort(../data_collection/filter_method.md) | -| [](../data_collection/find_method.md) | @getshort(../data_collection/find_method.md) | -| [](../data_collection/findall_method.md) | @getshort(../data_collection/findall_method.md) | -| [](../data_collection/getfilters_method.md) | @getshort(../data_collection/getfilters_method.md) | -| [](../data_collection/getid_method.md) | @getshort(../data_collection/getid_method.md) | -| [](../data_collection/getindex_method.md) | @getshort(../data_collection/getindex_method.md) | -| [](../data_collection/getitem_method.md) | @getshort(../data_collection/getitem_method.md) | -| [](../data_collection/getnearid_method.md) | @getshort(../data_collection/getnearid_method.md) | -| [](../data_collection/getroot_method.md) | @getshort(../data_collection/getroot_method.md) | -| [](../data_collection/getroots_method.md) | @getshort(../data_collection/getroots_method.md) | -| [](../data_collection/load_method.md) | @getshort(../data_collection/load_method.md) | -| [](../data_collection/map_method.md) | @getshort(../data_collection/map_method.md) | -| [](../data_collection/move_method.md) | @getshort(../data_collection/move_method.md) | -| [](../data_collection/parse_method.md) | @getshort(../data_collection/parse_method.md) | -| [](../data_collection/remove_method.md) | @getshort(../data_collection/remove_method.md) | -| [](../data_collection/removeall_method.md) | @getshort(../data_collection/removeall_method.md) | -| [](../data_collection/resetfilter_method.md)| @getshort(../data_collection/resetfilter_method.md)| -| [](../data_collection/serialize_method.md) | @getshort(../data_collection/serialize_method.md) | -| [](../data_collection/update_method.md) | @getshort(../data_collection/update_method.md) | +| [](api/data_collection/add_method.md) | @getshort(../data_collection/add_method.md) | +| [](api/data_collection/copy_method.md) | @getshort(../data_collection/copy_method.md) | +| [](api/data_collection/eachchild_method.md) | @getshort(../data_collection/eachchild_method.md) | +| [](api/data_collection/eachparent_method.md) | @getshort(../data_collection/eachparent_method.md) | +| [](api/data_collection/exists_method.md) | @getshort(../data_collection/exists_method.md) | +| [](api/data_collection/filter_method.md) | @getshort(../data_collection/filter_method.md) | +| [](api/data_collection/find_method.md) | @getshort(../data_collection/find_method.md) | +| [](api/data_collection/findall_method.md) | @getshort(../data_collection/findall_method.md) | +| [](api/data_collection/getfilters_method.md) | @getshort(../data_collection/getfilters_method.md) | +| [](api/data_collection/getid_method.md) | @getshort(../data_collection/getid_method.md) | +| [](api/data_collection/getindex_method.md) | @getshort(../data_collection/getindex_method.md) | +| [](api/data_collection/getitem_method.md) | @getshort(../data_collection/getitem_method.md) | +| [](api/data_collection/getnearid_method.md) | @getshort(../data_collection/getnearid_method.md) | +| [](api/data_collection/getroot_method.md) | @getshort(../data_collection/getroot_method.md) | +| [](api/data_collection/getroots_method.md) | @getshort(../data_collection/getroots_method.md) | +| [](api/data_collection/load_method.md) | @getshort(../data_collection/load_method.md) | +| [](api/data_collection/map_method.md) | @getshort(../data_collection/map_method.md) | +| [](api/data_collection/move_method.md) | @getshort(../data_collection/move_method.md) | +| [](api/data_collection/parse_method.md) | @getshort(../data_collection/parse_method.md) | +| [](api/data_collection/remove_method.md) | @getshort(../data_collection/remove_method.md) | +| [](api/data_collection/removeall_method.md) | @getshort(../data_collection/removeall_method.md) | +| [](api/data_collection/resetfilter_method.md)| @getshort(../data_collection/resetfilter_method.md)| +| [](api/data_collection/serialize_method.md) | @getshort(../data_collection/serialize_method.md) | +| [](api/data_collection/update_method.md) | @getshort(../data_collection/update_method.md) | diff --git a/docs/api/overview/diagram_events_overview.md b/docs/api/overview/diagram_events_overview.md index 37c46fa50..bbbe182bb 100644 --- a/docs/api/overview/diagram_events_overview.md +++ b/docs/api/overview/diagram_events_overview.md @@ -8,33 +8,33 @@ description: You can explore the Diagram events in the documentation of the DHTM | Name | Description | | :------------------------------------------ | :------------------------------------------------- | -| [](../diagram/aftercollapse_event.md) | @getshort(../diagram/aftercollapse_event.md) | -| [](../diagram/afterexpand_event.md) | @getshort(../diagram/afterexpand_event.md) | -| [](../diagram/aftersubmenuopen_event.md) | @getshort(../diagram/aftersubmenuopen_event.md) | -| [](../diagram/beforecollapse_event.md) | @getshort(../diagram/beforecollapse_event.md) | -| [](../diagram/beforeexpand_event.md) | @getshort(../diagram/beforeexpand_event.md) | -| [](../diagram/beforesubmenuopen_event.md) | @getshort(../diagram/beforesubmenuopen_event.md) | -| [](../diagram/emptyareaclick_event.md) | @getshort(../diagram/emptyareaclick_event.md) | -| [](../diagram/emptyareadblclick_event.md) | @getshort(../diagram/emptyareadblclick_event.md) | -| [](../diagram/emptyareamousedown_event.md) | @getshort(../diagram/emptyareamousedown_event.md) | -| [](../diagram/groupclick_event.md) | @getshort(../diagram/groupclick_event.md) | -| [](../diagram/groupdblclick_event.md) | @getshort(../diagram/groupdblclick_event.md) | -| [](../diagram/groupheaderclick_event.md) | @getshort(../diagram/groupheaderclick_event.md) | -| [](../diagram/groupheaderdblclick_event.md) | @getshort(../diagram/groupheaderdblclick_event.md) | -| [](../diagram/groupmousedown_event.md) | @getshort(../diagram/groupmousedown_event.md) | -| [](../diagram/itemclick_event.md) | @getshort(../diagram/itemclick_event.md) | -| [](../diagram/itemdblclick_event.md) | @getshort(../diagram/itemdblclick_event.md) | -| [](../diagram/itemmousedown_event.md) | @getshort(../diagram/itemmousedown_event.md) | -| [](../diagram/itemmouseout_event.md) | @getshort(../diagram/itemmouseout_event.md) | -| [](../diagram/itemmouseover_event.md) | @getshort(../diagram/itemmouseover_event.md) | -| [](../diagram/lineclick_event.md) | @getshort(../diagram/lineclick_event.md) | -| [](../diagram/linedblclick_event.md) | @getshort(../diagram/linedblclick_event.md) | -| [](../diagram/linemousedown_event.md) | @getshort(../diagram/linemousedown_event.md) | -| [](../diagram/linetitleclick_event.md) | @getshort(../diagram/linetitleclick_event.md) | -| [](../diagram/linetitledblclick_event.md) | @getshort(../diagram/linetitledblclick_event.md) | -| [](../diagram/linetitlemousedown_event.md) | @getshort(../diagram/linetitlemousedown_event.md) | -| [](../diagram/scroll_event.md) | @getshort(../diagram/scroll_event.md) | -| [](../diagram/shapeclick_event.md) | @getshort(../diagram/shapeclick_event.md) | -| [](../diagram/shapedblclick_event.md) | @getshort(../diagram/shapedblclick_event.md) | -| [](../diagram/shapeiconclick_event.md) | @getshort(../diagram/shapeiconclick_event.md) | -| [](../diagram/shapemousedown_event.md) | @getshort(../diagram/shapemousedown_event.md) | +| [](api/diagram/aftercollapse_event.md) | @getshort(../diagram/aftercollapse_event.md) | +| [](api/diagram/afterexpand_event.md) | @getshort(../diagram/afterexpand_event.md) | +| [](api/diagram/aftersubmenuopen_event.md) | @getshort(../diagram/aftersubmenuopen_event.md) | +| [](api/diagram/beforecollapse_event.md) | @getshort(../diagram/beforecollapse_event.md) | +| [](api/diagram/beforeexpand_event.md) | @getshort(../diagram/beforeexpand_event.md) | +| [](api/diagram/beforesubmenuopen_event.md) | @getshort(../diagram/beforesubmenuopen_event.md) | +| [](api/diagram/emptyareaclick_event.md) | @getshort(../diagram/emptyareaclick_event.md) | +| [](api/diagram/emptyareadblclick_event.md) | @getshort(../diagram/emptyareadblclick_event.md) | +| [](api/diagram/emptyareamousedown_event.md) | @getshort(../diagram/emptyareamousedown_event.md) | +| [](api/diagram/groupclick_event.md) | @getshort(../diagram/groupclick_event.md) | +| [](api/diagram/groupdblclick_event.md) | @getshort(../diagram/groupdblclick_event.md) | +| [](api/diagram/groupheaderclick_event.md) | @getshort(../diagram/groupheaderclick_event.md) | +| [](api/diagram/groupheaderdblclick_event.md) | @getshort(../diagram/groupheaderdblclick_event.md) | +| [](api/diagram/groupmousedown_event.md) | @getshort(../diagram/groupmousedown_event.md) | +| [](api/diagram/itemclick_event.md) | @getshort(../diagram/itemclick_event.md) | +| [](api/diagram/itemdblclick_event.md) | @getshort(../diagram/itemdblclick_event.md) | +| [](api/diagram/itemmousedown_event.md) | @getshort(../diagram/itemmousedown_event.md) | +| [](api/diagram/itemmouseout_event.md) | @getshort(../diagram/itemmouseout_event.md) | +| [](api/diagram/itemmouseover_event.md) | @getshort(../diagram/itemmouseover_event.md) | +| [](api/diagram/lineclick_event.md) | @getshort(../diagram/lineclick_event.md) | +| [](api/diagram/linedblclick_event.md) | @getshort(../diagram/linedblclick_event.md) | +| [](api/diagram/linemousedown_event.md) | @getshort(../diagram/linemousedown_event.md) | +| [](api/diagram/linetitleclick_event.md) | @getshort(../diagram/linetitleclick_event.md) | +| [](api/diagram/linetitledblclick_event.md) | @getshort(../diagram/linetitledblclick_event.md) | +| [](api/diagram/linetitlemousedown_event.md) | @getshort(../diagram/linetitlemousedown_event.md) | +| [](api/diagram/scroll_event.md) | @getshort(../diagram/scroll_event.md) | +| [](api/diagram/shapeclick_event.md) | @getshort(../diagram/shapeclick_event.md) | +| [](api/diagram/shapedblclick_event.md) | @getshort(../diagram/shapedblclick_event.md) | +| [](api/diagram/shapeiconclick_event.md) | @getshort(../diagram/shapeiconclick_event.md) | +| [](api/diagram/shapemousedown_event.md) | @getshort(../diagram/shapemousedown_event.md) | diff --git a/docs/api/overview/diagram_methods_overview.md b/docs/api/overview/diagram_methods_overview.md index a76ba1af2..0645f6512 100644 --- a/docs/api/overview/diagram_methods_overview.md +++ b/docs/api/overview/diagram_methods_overview.md @@ -8,13 +8,13 @@ description: You can explore the Diagram methods in the documentation of the DHT | Name | Description | | :-------------------------------------- | :--------------------------------------------- | -| [](../diagram/addshape_method.md) | @getshort(../diagram/addshape_method.md) | -| [](../diagram/autoplace_method.md) | @getshort(../diagram/autoplace_method.md) | -| [](../diagram/collapseitem_method.md) | @getshort(../diagram/collapseitem_method.md) | -| [](../diagram/destructor_method.md) | @getshort(../diagram/destructor_method.md) | -| [](../diagram/expanditem_method.md) | @getshort(../diagram/expanditem_method.md) | -| [](../diagram/getscrollstate_method.md) | @getshort(../diagram/getscrollstate_method.md) | -| [](../diagram/locate_method.md) | @getshort(../diagram/locate_method.md) | -| [](../diagram/paint_method.md) | @getshort(../diagram/paint_method.md) | -| [](../diagram/scrollto_method.md) | @getshort(../diagram/scrollto_method.md) | -| [](../diagram/showitem_method.md) | @getshort(../diagram/showitem_method.md) | +| [](api/diagram/addshape_method.md) | @getshort(../diagram/addshape_method.md) | +| [](api/diagram/autoplace_method.md) | @getshort(../diagram/autoplace_method.md) | +| [](api/diagram/collapseitem_method.md) | @getshort(../diagram/collapseitem_method.md) | +| [](api/diagram/destructor_method.md) | @getshort(../diagram/destructor_method.md) | +| [](api/diagram/expanditem_method.md) | @getshort(../diagram/expanditem_method.md) | +| [](api/diagram/getscrollstate_method.md) | @getshort(../diagram/getscrollstate_method.md) | +| [](api/diagram/locate_method.md) | @getshort(../diagram/locate_method.md) | +| [](api/diagram/paint_method.md) | @getshort(../diagram/paint_method.md) | +| [](api/diagram/scrollto_method.md) | @getshort(../diagram/scrollto_method.md) | +| [](api/diagram/showitem_method.md) | @getshort(../diagram/showitem_method.md) | diff --git a/docs/api/overview/diagram_properties_overview.md b/docs/api/overview/diagram_properties_overview.md index 7b041d6f9..a7f3ed184 100644 --- a/docs/api/overview/diagram_properties_overview.md +++ b/docs/api/overview/diagram_properties_overview.md @@ -8,14 +8,14 @@ description: You can explore the Diagram properties in the documentation of the | Name | Description | | :------------------------------------------ | :------------------------------------------------- | -| [](../diagram/autoplacement_property.md) | @getshort(../diagram/autoplacement_property.md) | -| [](../diagram/defaults_property.md) | @getshort(../diagram/defaults_property.md) | -| [](../diagram/defaultshapetype_property.md) | @getshort(../diagram/defaultshapetype_property.md) | -| [](../diagram/exportstyles_property.md) | @getshort(../diagram/exportstyles_property.md) | -| [](../diagram/lineconfig_property.md) | @getshort(../diagram/lineconfig_property.md) | -| [](../diagram/margin_property.md) | @getshort(../diagram/margin_property.md) | -| [](../diagram/scale_property.md) | @getshort(../diagram/scale_property.md) | -| [](../diagram/select_property.md) | @getshort(../diagram/select_property.md) | -| [](../diagram/toolbar_property.md) | @getshort(../diagram/toolbar_property.md) | -| [](../diagram/type_property.md) | @getshort(../diagram/type_property.md) | -| [](../diagram/typeconfig_property.md) | @getshort(../diagram/typeconfig_property.md) | +| [](api/diagram/autoplacement_property.md) | @getshort(../diagram/autoplacement_property.md) | +| [](api/diagram/defaults_property.md) | @getshort(../diagram/defaults_property.md) | +| [](api/diagram/defaultshapetype_property.md) | @getshort(../diagram/defaultshapetype_property.md) | +| [](api/diagram/exportstyles_property.md) | @getshort(../diagram/exportstyles_property.md) | +| [](api/diagram/lineconfig_property.md) | @getshort(../diagram/lineconfig_property.md) | +| [](api/diagram/margin_property.md) | @getshort(../diagram/margin_property.md) | +| [](api/diagram/scale_property.md) | @getshort(../diagram/scale_property.md) | +| [](api/diagram/select_property.md) | @getshort(../diagram/select_property.md) | +| [](api/diagram/toolbar_property.md) | @getshort(../diagram/toolbar_property.md) | +| [](api/diagram/type_property.md) | @getshort(../diagram/type_property.md) | +| [](api/diagram/typeconfig_property.md) | @getshort(../diagram/typeconfig_property.md) | diff --git a/docs/api/overview/selection_events_overview.md b/docs/api/overview/selection_events_overview.md index c43302f56..6e0efd030 100644 --- a/docs/api/overview/selection_events_overview.md +++ b/docs/api/overview/selection_events_overview.md @@ -8,7 +8,7 @@ description: You can explore the Selection events in the documentation of the DH | Name | Description | | :--------------------------------------- | :---------------------------------------------- | -| [](../selection/afterselect_event.md) | @getshort(../selection/afterselect_event.md) | -| [](../selection/afterunselect_event.md) | @getshort(../selection/afterunselect_event.md) | -| [](../selection/beforeselect_event.md) | @getshort(../selection/beforeselect_event.md) | -| [](../selection/beforeunselect_event.md) | @getshort(../selection/beforeunselect_event.md) | +| [](api/selection/afterselect_event.md) | @getshort(../selection/afterselect_event.md) | +| [](api/selection/afterunselect_event.md) | @getshort(../selection/afterunselect_event.md) | +| [](api/selection/beforeselect_event.md) | @getshort(../selection/beforeselect_event.md) | +| [](api/selection/beforeunselect_event.md) | @getshort(../selection/beforeunselect_event.md) | diff --git a/docs/api/overview/selection_methods_overview.md b/docs/api/overview/selection_methods_overview.md index 0837b5c6c..2a788ecce 100644 --- a/docs/api/overview/selection_methods_overview.md +++ b/docs/api/overview/selection_methods_overview.md @@ -8,9 +8,9 @@ description: You can explore the Selection methods in the documentation of the D | Name | Description | | :----------------------------------- | :------------------------------------------ | -| [](../selection/add_method.md) | @getshort(../selection/add_method.md) | -| [](../selection/clear_method.md) | @getshort(../selection/clear_method.md) | -| [](../selection/getids_method.md) | @getshort(../selection/getids_method.md) | -| [](../selection/getitem_method.md) | @getshort(../selection/getitem_method.md) | -| [](../selection/includes_method.md) | @getshort(../selection/includes_method.md) | -| [](../selection/remove_method.md) | @getshort(../selection/remove_method.md) | +| [](api/selection/add_method.md) | @getshort(../selection/add_method.md) | +| [](api/selection/clear_method.md) | @getshort(../selection/clear_method.md) | +| [](api/selection/getids_method.md) | @getshort(../selection/getids_method.md) | +| [](api/selection/getitem_method.md) | @getshort(../selection/getitem_method.md) | +| [](api/selection/includes_method.md) | @getshort(../selection/includes_method.md) | +| [](api/selection/remove_method.md) | @getshort(../selection/remove_method.md) | diff --git a/docs/api/selection/add_method.md b/docs/api/selection/add_method.md index dc06c9ff6..2e0f745b8 100644 --- a/docs/api/selection/add_method.md +++ b/docs/api/selection/add_method.md @@ -61,7 +61,7 @@ console.log(diagram.selection.getIds()); // -> ["3"] **Related articles**: -- [diagram.config.select](../../../api/diagram/select_property/) -- [Selecting items](../../../guides/manipulating_items/#selecting-items) +- [diagram.config.select](api/diagram/select_property.md) +- [Selecting items](guides/manipulating_items.md#selecting-items) **Related samples**: [Diagram. Selection. Item selection](https://snippet.dhtmlx.com/jyoxn5h7) diff --git a/docs/api/selection/afterselect_event.md b/docs/api/selection/afterselect_event.md index 87c6a1bb0..032a56f4e 100644 --- a/docs/api/selection/afterselect_event.md +++ b/docs/api/selection/afterselect_event.md @@ -25,7 +25,7 @@ description: You can learn about the afterSelect event in the documentation of t The callback of the event is called with an object with the following parameters: - `id` - the id of the selected item -- `join` - the applied [mode of selection](../../../api/selection/add_method/#parameters) +- `join` - the applied [mode of selection](api/selection/add_method.md#parameters) - `batch` - the list of selected items ### Example @@ -65,5 +65,5 @@ editor.diagram.events.on("afterSelect", ({ id }) => { **Related articles**: -- [diagram.config.select](../../../api/diagram/select_property/) -- [Selecting items](../../../guides/manipulating_items/#selecting-items) +- [diagram.config.select](api/diagram/select_property.md) +- [Selecting items](guides/manipulating_items.md#selecting-items) diff --git a/docs/api/selection/afterunselect_event.md b/docs/api/selection/afterunselect_event.md index 29061ba00..29dc834ac 100644 --- a/docs/api/selection/afterunselect_event.md +++ b/docs/api/selection/afterunselect_event.md @@ -63,5 +63,5 @@ editor.diagram.events.on("afterUnSelect", ({ id }) => { **Related articles**: -- [diagram.config.select](../../../api/diagram/select_property/) -- [Selecting items](../../../guides/manipulating_items/#selecting-items) +- [diagram.config.select](api/diagram/select_property.md) +- [Selecting items](guides/manipulating_items.md#selecting-items) diff --git a/docs/api/selection/beforeselect_event.md b/docs/api/selection/beforeselect_event.md index 8a13d4f61..0a08f1ff8 100644 --- a/docs/api/selection/beforeselect_event.md +++ b/docs/api/selection/beforeselect_event.md @@ -25,7 +25,7 @@ description: You can learn about the beforeSelect event in the documentation of The callback of the event is called with an object with the following parameters: - `id` - the id of the item to select -- `join` - the applied [mode of selection](../../../api/selection/add_method/#parameters) +- `join` - the applied [mode of selection](api/selection/add_method.md#parameters) - `batch` - the list of items to select ### Returns @@ -71,5 +71,5 @@ editor.diagram.events.on("beforeSelect", ({ id }) => { **Related articles**: -- [diagram.config.select](../../../api/diagram/select_property/) -- [Selecting items](../../../guides/manipulating_items/#selecting-items) +- [diagram.config.select](api/diagram/select_property.md) +- [Selecting items](guides/manipulating_items.md#selecting-items) diff --git a/docs/api/selection/beforeunselect_event.md b/docs/api/selection/beforeunselect_event.md index 6041a5f91..98c28d8a2 100644 --- a/docs/api/selection/beforeunselect_event.md +++ b/docs/api/selection/beforeunselect_event.md @@ -69,5 +69,5 @@ editor.diagram.events.on("beforeUnSelect", ({ id }) => { **Related articles**: -- [diagram.config.select](../../../api/diagram/select_property/) -- [Selecting items](../../../guides/manipulating_items/#selecting-items) +- [diagram.config.select](api/diagram/select_property.md) +- [Selecting items](guides/manipulating_items.md#selecting-items) diff --git a/docs/api/selection/clear_method.md b/docs/api/selection/clear_method.md index a2cde265a..e0f6395e2 100644 --- a/docs/api/selection/clear_method.md +++ b/docs/api/selection/clear_method.md @@ -34,7 +34,7 @@ diagram.selection.clear(); **Related articles**: -- [diagram.config.select](../../../api/diagram/select_property/) -- [Selecting items](../../../guides/manipulating_items/#selecting-items) +- [diagram.config.select](api/diagram/select_property.md) +- [Selecting items](guides/manipulating_items.md#selecting-items) **Related sample**: [Diagram. Selection. Item selection](https://snippet.dhtmlx.com/jyoxn5h7) diff --git a/docs/api/selection/getids_method.md b/docs/api/selection/getids_method.md index 91c555e73..1077aa913 100644 --- a/docs/api/selection/getids_method.md +++ b/docs/api/selection/getids_method.md @@ -37,7 +37,7 @@ const ids = diagram.selection.getIds(); // -> ["1", "1.1", ...] or [] **Related articles**: -- [diagram.config.select](../../../api/diagram/select_property/) -- [Selecting items](../../../guides/manipulating_items/#selecting-items) +- [diagram.config.select](api/diagram/select_property.md) +- [Selecting items](guides/manipulating_items.md#selecting-items) **Related samples**: [Diagram. Selection. Item selection](https://snippet.dhtmlx.com/jyoxn5h7) diff --git a/docs/api/selection/getitem_method.md b/docs/api/selection/getitem_method.md index b58cc60aa..dd6bd2f78 100644 --- a/docs/api/selection/getitem_method.md +++ b/docs/api/selection/getitem_method.md @@ -60,7 +60,7 @@ const item = diagram.selection.getItem({ id: "4" }); **Related articles**: -- [diagram.config.select](../../../api/diagram/select_property/) -- [Selecting items](../../../guides/manipulating_items/#selecting-items) +- [diagram.config.select](api/diagram/select_property.md) +- [Selecting items](guides/manipulating_items.md#selecting-items) **Related samples**: [Diagram. Selection. Item selection](https://snippet.dhtmlx.com/jyoxn5h7) diff --git a/docs/api/selection/includes_method.md b/docs/api/selection/includes_method.md index 6e4f353c0..47e874a76 100644 --- a/docs/api/selection/includes_method.md +++ b/docs/api/selection/includes_method.md @@ -47,7 +47,7 @@ diagram.selection.includes({ id: "4" }) // returns false **Related articles**: -- [diagram.config.select](../../../api/diagram/select_property/) -- [Selecting items](../../../guides/manipulating_items/#selecting-items) +- [diagram.config.select](api/diagram/select_property.md) +- [Selecting items](guides/manipulating_items.md#selecting-items) **Related samples**: [Diagram. Selection. Item selection](https://snippet.dhtmlx.com/jyoxn5h7) diff --git a/docs/api/selection/remove_method.md b/docs/api/selection/remove_method.md index 1371f7b19..a5ea9f0ff 100644 --- a/docs/api/selection/remove_method.md +++ b/docs/api/selection/remove_method.md @@ -67,7 +67,7 @@ console.log(diagram.selection.getIds()); // -> [] **Related articles**: -- [diagram.config.select](../../../api/diagram/select_property/) -- [Selecting items](../../../guides/manipulating_items/#selecting-items) +- [diagram.config.select](api/diagram/select_property.md) +- [Selecting items](guides/manipulating_items.md#selecting-items) **Related samples**: [Diagram. Selection. Item selection](https://snippet.dhtmlx.com/jyoxn5h7) diff --git a/docs/editor_overview.md b/docs/editor_overview.md index afae2c3cf..e60c348a6 100644 --- a/docs/editor_overview.md +++ b/docs/editor_overview.md @@ -14,28 +14,28 @@ The DHTMLX Diagram component provides you with Editor that allows you to try and The interface of the editor initialized in the default mode consists of four functional parts: -- [toolbar](../guides/diagram_editor/toolbar/) -- [shapebar](../guides/diagram_editor/shapebar/) -- [grid area](../guides/diagram_editor/grid_area/) -- [editbar](../guides/diagram_editor/editbar/) +- [toolbar](guides/diagram_editor/toolbar.md) +- [shapebar](guides/diagram_editor/shapebar.md) +- [grid area](guides/diagram_editor/grid_area.md) +- [editbar](guides/diagram_editor/editbar.md) To build a diagram, you need either to drag the necessary items from the shapebar or create a copy of the items via the shape toolbar. -You can adjust the attributes of the items via [sidebar options of the editbar](../guides/diagram_editor/editbar/). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items. +You can adjust the attributes of the items via [sidebar options of the editbar](guides/diagram_editor/editbar.md). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items. ![](/img/default_editor.png) **Related sample:** [Diagram Editor. Default mode. Wide flowchart](https://snippet.dhtmlx.com/4d4k3o8p?text=diagram&mode=wide) -You may customize the [shapebar](../guides/diagram_editor/shapebar/) and, if you have added a custom shape, [configure the editbar](/api/diagram_editor/editbar/config/properties_property/) according to the attributes of your shape. +You may customize the [shapebar](guides/diagram_editor/shapebar.md) and, if you have added a custom shape, [configure the editbar](api/diagram_editor/editbar/config/properties_property.md) according to the attributes of your shape. ### Editor in the org chart mode The interface of the editor initialized in the org chart mode consists of three functional parts: -- [toolbar](../guides/diagram_editor/toolbar/) -- [grid area](../guides/diagram_editor/grid_area/) -- [editbar](../guides/diagram_editor/editbar/) +- [toolbar](guides/diagram_editor/toolbar.md) +- [grid area](guides/diagram_editor/grid_area.md) +- [editbar](guides/diagram_editor/editbar.md) :::note Note, the editor in this mode does not have the shapebar @@ -43,13 +43,13 @@ Note, the editor in this mode does not have the shapebar To build a diagram in the org chart mode of the editor, you need to select a shape and add a new child for it. You can drag the shapes from one parent item to another. The moved item is being dragged with all its child items. -You can adjust the attributes of the shapes via the available [sidebar options of the editbar](../guides/diagram_editor/editbar/). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items. +You can adjust the attributes of the shapes via the available [sidebar options of the editbar](guides/diagram_editor/editbar.md). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items. ![](/img/orgchart_editor_draggable.png) **Related sample:** [Diagram Editor. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/og4qm3ja?text=diagram&mode=wide) -If you've added a custom shape to the editor in the org chart mode, you can [configure the editbar](/api/diagram_editor/editbar/config/properties_property/) to be able to edit custom properties of the shape. +If you've added a custom shape to the editor in the org chart mode, you can [configure the editbar](api/diagram_editor/editbar/config/properties_property.md) to be able to edit custom properties of the shape. You can add the **assistant** or **partner** items for a parent shape of any level. The assistant or partner items can't be the parent items. @@ -64,9 +64,9 @@ The connection between the parent shape and its partner is always horizontal. Al The interface of the editor initialized in the mindmap mode consists of three parts: -- [toolbar](../guides/diagram_editor/toolbar/) -- [grid area](../guides/diagram_editor/grid_area/) -- [editbar](../guides/diagram_editor/editbar/) +- [toolbar](guides/diagram_editor/toolbar.md) +- [grid area](guides/diagram_editor/grid_area.md) +- [editbar](guides/diagram_editor/editbar.md) :::note Note, the editor in this mode does not have the shapebar @@ -74,14 +74,14 @@ Note, the editor in this mode does not have the shapebar To build a diagram in the mindmap mode of the editor, you need to select a shape and add a new child for it. You can drag the shapes from one parent item to another. The moved item is being dragged with all its child items. -You can adjust the attributes of the shapes via the available [sidebar options of the editbar](../guides/diagram_editor/editbar/). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items. +You can adjust the attributes of the shapes via the available [sidebar options of the editbar](guides/diagram_editor/editbar.md). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items. ![](/img/mindmap_editor_draggable.png) **Related sample:** [Diagram Editor. Mindmap mode. Emotions mind map](https://snippet.dhtmlx.com/lo1vm0e8?text=diagram&mode=wide) -If you've added a custom shape to the editor in the mindmap mode, you can [configure the editbar](/api/diagram_editor/editbar/config/properties_property/) to be able to edit custom properties of the shape. +If you've added a custom shape to the editor in the mindmap mode, you can [configure the editbar](api/diagram_editor/editbar/config/properties_property.md) to be able to edit custom properties of the shape. ## What's next -That's all. Now you can start working with diagrams or keep exploring the inner world of JavaScript Diagram and Diagram Editor in the [guides](../guides/overview/). +That's all. Now you can start working with diagrams or keep exploring the inner world of JavaScript Diagram and Diagram Editor in the [guides](guides/overview.md). diff --git a/docs/groups/configuration_properties.md b/docs/groups/configuration_properties.md index 0d4734d42..d000ba6ee 100644 --- a/docs/groups/configuration_properties.md +++ b/docs/groups/configuration_properties.md @@ -137,11 +137,11 @@ const data = [ ]; ~~~ -**Related article**: [Configuring groups](../../groups/) +**Related article**: [Configuring groups](/groups/) ## Properties specific for "project" object -The "project" object is used as a container for tasks and milestones. It works as a [group](/diagram/groups/), allows creating PERT charts of various nesting levels, and provides visual grouping. +The "project" object is used as a container for tasks and milestones. It works as a [group](/groups/), allows creating PERT charts of various nesting levels, and provides visual grouping. ### Usage diff --git a/docs/groups/index.md b/docs/groups/index.md index 0e0d363bb..d2290f48e 100644 --- a/docs/groups/index.md +++ b/docs/groups/index.md @@ -57,7 +57,7 @@ diagram.data.parse(data); ### Properties -See [the full list of configuration properties of a `group` object](/groups/configuration_properties/) which allow you to configure the positioning and appearance of the group. +See [the full list of configuration properties of a `group` object](groups/configuration_properties.md) which allow you to configure the positioning and appearance of the group. ## Grouping shapes in the PERT mode @@ -98,7 +98,7 @@ const data = [ ### Properties -See [the full list of configuration properties of a `"project"` object](/groups/configuration_properties/#properties-specific-for-project-object) which allow you to configure the positioning and appearance of tasks and milestones in the project. +See [the full list of configuration properties of a `"project"` object](groups/configuration_properties.md#properties-specific-for-project-object) which allow you to configure the positioning and appearance of tasks and milestones in the project. ## Configuring the group header @@ -123,11 +123,11 @@ For example, you can define the height of the header and its position, specify t -Check [the full list of API properties of the group object](/groups/configuration_properties/). +Check [the full list of API properties of the group object](groups/configuration_properties.md). ### A header icon -To be able to collapse/expand a group, you need to enable the **closable** attribute of the [header](/groups/configuration_properties/) property. As a result, an icon, which allows a user to expand/collapse a group, will be added to the header. +To be able to collapse/expand a group, you need to enable the **closable** attribute of the [header](groups/configuration_properties.md) property. As a result, an icon, which allows a user to expand/collapse a group, will be added to the header. ~~~jsx const data = [ @@ -146,12 +146,12 @@ const data = [ ]; ~~~ -You can change the color of the icon via the **iconColor** attribute of the [group object](/groups/configuration_properties/). +You can change the color of the icon via the **iconColor** attribute of the [group object](groups/configuration_properties.md). ## Configuring the behavior of group items By default, you can drag any child item of the group out of the group and drag it into another group. -To change the behavior of the group items you need to use the **groupBehavior** and **padding** attributes of the **exitArea** property of the [group object](/groups/configuration_properties/). +To change the behavior of the group items you need to use the **groupBehavior** and **padding** attributes of the **exitArea** property of the [group object](groups/configuration_properties.md). :::note The **exitArea** property defines the behavior of the first-level children of the configurable group only. diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index a87ca3c26..6f15caca0 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -6,9 +6,9 @@ description: Connect AI coding assistants to live DHTMLX Diagram documentation v # Using DHTMLX MCP server with AI coding assistants -Building diagram applications requires precise control over shapes, connections, layout, and editor configuration. When an AI tool generates [DHTMLX Diagram](/diagram/) code from outdated training data, the result is mismatched APIs, missing properties, and configuration options that no longer exist. +Building diagram applications requires precise control over shapes, connections, layout, and editor configuration. When an AI tool generates [DHTMLX Diagram](/) code from outdated training data, the result is mismatched APIs, missing properties, and configuration options that no longer exist. -The DHTMLX Model Context Protocol (MCP) server solves this by giving AI tools direct access to the live Diagram documentation. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](/shapes/custom_shape/), the [Diagram Editor](/guides/diagram_editor/initialization/), or any other part of the library, the assistant retrieves the current reference material before generating a response. +The DHTMLX Model Context Protocol (MCP) server solves this by giving AI tools direct access to the live Diagram documentation. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](shapes/custom_shape.md), the [Diagram Editor](guides/diagram_editor/initialization.md), or any other part of the library, the assistant retrieves the current reference material before generating a response. **MCP endpoint** @@ -24,14 +24,14 @@ The DHTMLX MCP server covers all major DHTMLX products, not only DHTMLX Diagram. The MCP server indexes the full DHTMLX Diagram documentation. Common scenarios where the MCP server is useful: -- Looking up the current API for [shapes](/shapes/default_shapes/), [lines](/lines/), [groups](/groups/), or [swimlanes](/swimlanes/). +- Looking up the current API for [shapes](shapes/default_shapes.md), [lines](/lines/), [groups](/groups/), or [swimlanes](/swimlanes/). - Generating ready-to-run Diagram code based on a description. -- Exploring [Editor](/guides/diagram_editor/initialization/) configuration options, toolbar controls, and event handling. -- Checking [export](/guides/data_export/) options and understanding how to produce PDF or PNG output. -- Configuring auto-layout options for default-mode diagrams using the [diagram configuration](/guides/diagram/configuration/). -- Loading diagram data and serializing it back with the available [data methods](/guides/loading_data/). -- Handling [Diagram and Editor events](/guides/event_handling/) to respond to user interactions. -- Exploring [TypeScript support](/guides/using_typescript/) and framework integration for React, Vue, Angular and Svelte. +- Exploring [Editor](guides/diagram_editor/initialization.md) configuration options, toolbar controls, and event handling. +- Checking [export](guides/data_export.md) options and understanding how to produce PDF or PNG output. +- Configuring auto-layout options for default-mode diagrams using the [diagram configuration](guides/diagram/configuration.md). +- Loading diagram data and serializing it back with the available [data methods](guides/loading_data.md). +- Handling [Diagram and Editor events](guides/event_handling.md) to respond to user interactions. +- Exploring [TypeScript support](guides/using_typescript.md) and framework integration for React, Vue, Angular and Svelte. ## How DHTMLX MCP server works diff --git a/docs/guides/customization.md b/docs/guides/customization.md index 442e02adb..a5cb71086 100644 --- a/docs/guides/customization.md +++ b/docs/guides/customization.md @@ -16,7 +16,7 @@ A shape object provides a wide range of properties that you can use to modify th -A good way to style all the shapes of the same type at once is to specify the styling settings for the shapes via the [`defaults`](/api/diagram/defaults_property/) property of the diagram: +A good way to style all the shapes of the same type at once is to specify the styling settings for the shapes via the [`defaults`](api/diagram/defaults_property.md) property of the diagram: ~~~jsx const defaults = { @@ -36,7 +36,7 @@ const defaults = { }; ~~~ -[See the full list of the shape object properties](../../shapes/configuration_properties/). +[See the full list of the shape object properties](shapes/configuration_properties.md). ### Styling lines @@ -55,7 +55,7 @@ const data = [ ]; ~~~ -[See the full list of the line object properties](../../lines/configuration_properties/). +[See the full list of the line object properties](lines/configuration_properties.md). Check the example: @@ -63,7 +63,7 @@ Check the example: ## Defining the shape's template -You can create a customized diagram by adding new types of shapes into the diagram and defining templates for them. For this purpose, use the [](../api/diagram/addshape_method.md) method of the diagram object. +You can create a customized diagram by adding new types of shapes into the diagram and defining templates for them. For this purpose, use the [](api/diagram/addshape_method.md) method of the diagram object. ### Example in the default mode @@ -104,13 +104,13 @@ The stylization doesn't work with the parent item of the moved item and with the ### Styling the group -To specify a custom style for a group, you can use the `style` property of the [group object](../../groups/configuration_properties/). For example: +To specify a custom style for a group, you can use the `style` property of the [group object](groups/configuration_properties.md). For example: ### Styling the group header -You can change the default style of the group header via the attributes of the `header` property of the [group object](../../groups/configuration_properties/). +You can change the default style of the group header via the attributes of the `header` property of the [group object](groups/configuration_properties.md). @@ -118,7 +118,7 @@ You can change the default style of the group header via the attributes of the ` ### Styling the swimlane -You can customize the `strokeWidth`, `stroke`, and `fill` settings of a swimlane via the `style` property of the [swimlane object](../../swimlanes/configuration_properties/#properties-of-a-swimlane): +You can customize the `strokeWidth`, `stroke`, and `fill` settings of a swimlane via the `style` property of the [swimlane object](swimlanes/configuration_properties.md#properties-of-a-swimlane): ~~~jsx const data = [ @@ -148,7 +148,7 @@ const data = [ ### Styling the swimlane headers/sub-headers -The `header`, `subHeaderRows`, and `subHeaderCols` properties of a [swimlane object](../../swimlanes/configuration_properties/#properties-of-a-swimlane) include sets of additional attributes for customizing the header and subheaders of the swimlane. +The `header`, `subHeaderRows`, and `subHeaderCols` properties of a [swimlane object](swimlanes/configuration_properties.md#properties-of-a-swimlane) include sets of additional attributes for customizing the header and subheaders of the swimlane. For example, you can change the background colors of the top subheaders of the swimlane via the `subHeaderCols` property: @@ -196,7 +196,7 @@ Check the full example: ### Styling swimlane cells -If you need to customize a separate cell of the swimlane, use the `style` property of the [swimlane cell object](../../swimlanes/configuration_properties/#properties-of-a-swimlane-cell) (`type:"$sgroup"`). +If you need to customize a separate cell of the swimlane, use the `style` property of the [swimlane cell object](swimlanes/configuration_properties.md#properties-of-a-swimlane-cell) (`type:"$sgroup"`). ~~~jsx const data = [ diff --git a/docs/guides/data_export.md b/docs/guides/data_export.md index ce32f08ae..12b89b330 100644 --- a/docs/guides/data_export.md +++ b/docs/guides/data_export.md @@ -6,7 +6,7 @@ description: You can learn about exporting Diagram in the documentation of the D # Exporting Diagram -You can easily export a diagram into the PDF or PNG format via the related [pdf()](../../api/export/pdf_method/)/[png()](../../api/export/png_method/) methods of the Export object: +You can easily export a diagram into the PDF or PNG format via the related [pdf()](api/export/pdf_method.md)/[png()](api/export/png_method.md) methods of the Export object: @@ -14,8 +14,8 @@ To adjust the export settings, pass an object with configuration options to the Check the list of available settings: -- for the [pdf()](../../api/export/pdf_method/) method -- for the [png()](../../api/export/png_method/) method +- for the [pdf()](api/export/pdf_method.md) method +- for the [png()](api/export/png_method.md) method ## Exporting styles @@ -24,7 +24,7 @@ By default, all css styles included to the Diagram page are sent to the export s The library allows you: - to prevent all styles from being sent to the export service via setting -the [](../api/diagram/exportstyles_property.md) configuration property of the Diagram object to *false*: +the [](api/diagram/exportstyles_property.md) configuration property of the Diagram object to *false*: ~~~jsx const diagram = new dhx.Diagram("diagram_container", { @@ -32,7 +32,7 @@ const diagram = new dhx.Diagram("diagram_container", { }); ~~~ -- to define a set of styles that you want to be exported via setting absolute paths to the desired styles to the [](../api/diagram/exportstyles_property.md) array: +- to define a set of styles that you want to be exported via setting absolute paths to the desired styles to the [](api/diagram/exportstyles_property.md) array: diff --git a/docs/guides/diagram/configuration.md b/docs/guides/diagram/configuration.md index 95469e19b..b6a8391f4 100644 --- a/docs/guides/diagram/configuration.md +++ b/docs/guides/diagram/configuration.md @@ -10,7 +10,7 @@ DHTMLX Diagram provides a wide range of options for configuration. You can chang ### Setting the Diagram mode -There are the following Diagram modes you can choose from: **"default"**, **"org"**, **"mindmap"**, **"pert"**. Their detailed description is given in the [Diagram overview](/diagram) article. You can specify the necessary type via the [type](/api/diagram/type_property/) configuration option, as follows: +There are the following Diagram modes you can choose from: **"default"**, **"org"**, **"mindmap"**, **"pert"**. Their detailed description is given in the [Diagram overview](/) article. You can specify the necessary type via the [type](api/diagram/type_property.md) configuration option, as follows: ~~~jsx const diagram = new dhx.Diagram("diagram_container", { @@ -21,7 +21,7 @@ diagram.data.parse(data); ### Setting the default shape type -It is possible to set the default type for all the shapes via the [](../../api/diagram/defaultshapetype_property.md) attribute of the diagram configuration object: +It is possible to set the default type for all the shapes via the [](api/diagram/defaultshapetype_property.md) attribute of the diagram configuration object: ~~~jsx {3} const diagram = new dhx.Diagram("diagram_container", { @@ -42,7 +42,7 @@ The default types of shapes are: ## Setting the default line type -You can set a common type for all the connector lines of the diagram via the `lineType` parameter of the [](../../api/diagram/lineconfig_property.md) property of the diagram configuration object: +You can set a common type for all the connector lines of the diagram via the `lineType` parameter of the [](api/diagram/lineconfig_property.md) property of the diagram configuration object: ~~~jsx {3-5} const diagram = new dhx.Diagram("diagram_container", { @@ -60,7 +60,7 @@ This value is applied, if the line object doesn't contain the `type` property. There is a great possibility to escape operating with a big data set while preparing it for loading into the diagram. You can specify the default configuration for all shapes and lines of the necessary types and, therefore, reduce the amount of records in your code. -For this purpose, use the [](../../api/diagram/defaults_property.md) property of the diagram configuration object: +For this purpose, use the [](api/diagram/defaults_property.md) property of the diagram configuration object: @@ -70,12 +70,12 @@ The `defaults` object contains a number of `key:value` pairs where the *key* is The `type` and `id` attributes can not be defined in the default configuration of a shape/line ::: -Check the full list of configuration properties of a [shape](../../../shapes/configuration_properties/) and [line](../../../lines/configuration_properties/). +Check the full list of configuration properties of a [shape](shapes/configuration_properties.md) and [line](lines/configuration_properties.md). ## Arranging shapes in the mindmap mode of Diagram In the mindmap mode of Diagram, the arrangement of child shapes relative to the root shape is defined automatically by the main algorithm. -To change the default direction of the child shapes, use the [](../../api/diagram/typeconfig_property.md) configuration property on initialization of the diagram. +To change the default direction of the child shapes, use the [](api/diagram/typeconfig_property.md) configuration property on initialization of the diagram. :::note The `typeConfig` configuration property is not available in the Diagram Editor @@ -88,13 +88,13 @@ The property allows you to: ### Setting direction for all child shapes -To set the child shapes to the right/left of the root shape, use the `direction` attribute of the [](../../api/diagram/typeconfig_property.md) property: +To set the child shapes to the right/left of the root shape, use the `direction` attribute of the [](api/diagram/typeconfig_property.md) property: ### Setting direction for individual child shape -You can set the mandatory direction for specific child shapes via the `side` attribute of the [](../../api/diagram/typeconfig_property.md) property. The attribute is an object that contains a set of `key:value` pairs where *key* is the direction of the shapes (left, right) and *value* is an array with the ids of the shapes. +You can set the mandatory direction for specific child shapes via the `side` attribute of the [](api/diagram/typeconfig_property.md) property. The attribute is an object that contains a set of `key:value` pairs where *key* is the direction of the shapes (left, right) and *value* is an array with the ids of the shapes. @@ -102,7 +102,7 @@ Other child shapes that are not set in the side option will be arranged automati ## Setting date format in the PERT mode of Diagram -In the PERT mode of Diagram, you can specify the necessary format of rendering dates in the shapes of the **task** type. For this, use the `dateFormat` attribute of the [](../../api/diagram/typeconfig_property.md) property: +In the PERT mode of Diagram, you can specify the necessary format of rendering dates in the shapes of the **task** type. For this, use the `dateFormat` attribute of the [](api/diagram/typeconfig_property.md) property: ~~~jsx {3-5} const diagram = new dhx.Diagram("diagram_container", { @@ -115,13 +115,13 @@ const diagram = new dhx.Diagram("diagram_container", { ## Positioning Diagram and shapes -You can specify the position of a diagram on a page and set margins for shapes inside the [](../../api/diagram/margin_property.md) attribute of the diagram configuration object: +You can specify the position of a diagram on a page and set margins for shapes inside the [](api/diagram/margin_property.md) attribute of the diagram configuration object: ## Configuring autoplacement for shapes -The DHTMLX Diagram library lets you configure settings for arranging connected shapes of Diagram in the hierarchical structure automatically. You can specify the [`autoplacement`](/api/diagram/autoplacement_property/) property in the configuration object of Diagram and configure the mode of connecting shapes and distance between unconnected diagrams: +The DHTMLX Diagram library lets you configure settings for arranging connected shapes of Diagram in the hierarchical structure automatically. You can specify the [`autoplacement`](api/diagram/autoplacement_property.md) property in the configuration object of Diagram and configure the mode of connecting shapes and distance between unconnected diagrams: ~~~jsx const diagram = new dhx.Diagram("diagram_container", { @@ -148,7 +148,7 @@ The property can contain the following options: - `levelPadding` - (*number*) optional, minimal padding between hierarchy levels (the minimal value is *1*), *20* by default :::note -Autoplacement will be applied only after the [`autoPlace()`](/api/diagram/autoplace_method/) method is applied. It works only in the default mode of the diagram and only for shapes. Autoplacement does not work if you use groups or swimlanes. +Autoplacement will be applied only after the [`autoPlace()`](api/diagram/autoplace_method.md) method is applied. It works only in the default mode of the diagram and only for shapes. Autoplacement does not work if you use groups or swimlanes. ::: ![Radial autoplacement with padding options](/img/radial_autoplacement.png) @@ -157,23 +157,23 @@ Autoplacement will be applied only after the [`autoPlace()`](/api/diagram/autopl ## Adjusting the Diagram scale -If necessary, you can scale a diagram to fit your application. It can be done with the help of the [](../../api/diagram/scale_property.md) option. +If necessary, you can scale a diagram to fit your application. It can be done with the help of the [](api/diagram/scale_property.md) option. By default, its value is set to 1. So, to zoom in on a diagram, set the option to a value larger than 1 and to zoom out - smaller than 1, correspondingly. ## Setting toolbar for shapes -DHTMLX Diagram allows you to specify a toolbar with icons for Diagram shapes to simplify interaction with them. You can enable the shape toolbar via the [](../../api/diagram/toolbar_property.md) option of the diagram configuration object: +DHTMLX Diagram allows you to specify a toolbar with icons for Diagram shapes to simplify interaction with them. You can enable the shape toolbar via the [](api/diagram/toolbar_property.md) option of the diagram configuration object: ## Enabling items selection -It is possible to activate selection of items in a diagram. You need to make use of the [](../../api/diagram/select_property.md) attribute of the diagram configuration object. Once you've enabled selection in a diagram, you can make use of the Selection object API to [work with the items selection](/guides/manipulating_items/#selecting-items). +It is possible to activate selection of items in a diagram. You need to make use of the [](api/diagram/select_property.md) attribute of the diagram configuration object. Once you've enabled selection in a diagram, you can make use of the Selection object API to [work with the items selection](guides/manipulating_items.md#selecting-items). :::note -[The predefined set of events](../../../api/selection/#events) of the selection object can help you to define the way of processing the behavior of the diagram during selecting/unselecting items +[The predefined set of events](/api/selection/#events) of the selection object can help you to define the way of processing the behavior of the diagram during selecting/unselecting items ::: diff --git a/docs/guides/diagram/initialization.md b/docs/guides/diagram/initialization.md index e0b8574b6..46e8b0f54 100644 --- a/docs/guides/diagram/initialization.md +++ b/docs/guides/diagram/initialization.md @@ -127,7 +127,7 @@ layout.getCell("diagram").attach(diagram); ### Configuration properties -To change the [configuration of a diagram](/guides/diagram/configuration/), you can specify the desired property in the config object passed as a second parameter of the constructor function. +To change the [configuration of a diagram](guides/diagram/configuration.md), you can specify the desired property in the config object passed as a second parameter of the constructor function. ~~~jsx const diagram = new dhx.Diagram("diagram_container", { @@ -136,11 +136,11 @@ const diagram = new dhx.Diagram("diagram_container", { }); ~~~ -See [the full list of configuration properties of Diagram](../../../api/diagram/api_overview/#diagram-properties). +See [the full list of configuration properties of Diagram](api/diagram/api_overview.md#diagram-properties). **Related sample**: [Diagram Editor. Default mode. Wide flowchart](https://snippet.dhtmlx.com/4d4k3o8p) -Alternatively, you can get access to some option and set/modify its value via the diagram **config** object. Don't forget to call the [](../../api/diagram/paint_method.md) method to re-render the diagram with a new configuration: +Alternatively, you can get access to some option and set/modify its value via the diagram **config** object. Don't forget to call the [](api/diagram/paint_method.md) method to re-render the diagram with a new configuration: ~~~jsx const diagram = new dhx.Diagram("diagram_container"); @@ -152,4 +152,4 @@ diagram.paint(); ## Loading data into Diagram -Detailed information on loading data into DHTMLX Diagram is given in the [Loading and Storing Data](../../../guides/loading_data/) article. +Detailed information on loading data into DHTMLX Diagram is given in the [Loading and Storing Data](guides/loading_data.md) article. diff --git a/docs/guides/diagram/scrolling_diagram.md b/docs/guides/diagram/scrolling_diagram.md index d3c8a83e9..5e7195994 100644 --- a/docs/guides/diagram/scrolling_diagram.md +++ b/docs/guides/diagram/scrolling_diagram.md @@ -10,17 +10,17 @@ By default the component's size is set automatically to fit the content. If nece ## Scrolling diagram -You can scroll a diagram to the area where the necessary item is situated via the [](../../api/diagram/showitem_method.md) method of the diagram object. +You can scroll a diagram to the area where the necessary item is situated via the [](api/diagram/showitem_method.md) method of the diagram object. -As an alternative way, you can scroll to the necessary position on the diagram by using the [](../../api/diagram/scrollto_method.md) method. +As an alternative way, you can scroll to the necessary position on the diagram by using the [](api/diagram/scrollto_method.md) method. ## Getting scroll state -The Diagram API allows you to get the current position of the scroll via the related [](../../api/diagram/getscrollstate_method.md) method: +The Diagram API allows you to get the current position of the scroll via the related [](api/diagram/getscrollstate_method.md) method: ~~~jsx // returning the initial scroll position @@ -31,7 +31,7 @@ It returns an object with the horizontal and vertical scroll position. ## Catching diagram scrolling -You can catch the start of Diagram scrolling using the [](../../api/diagram/scroll_event.md) event. The handler function takes the position of the scroll as a parameter: +You can catch the start of Diagram scrolling using the [](api/diagram/scroll_event.md) event. The handler function takes the position of the scroll as a parameter: - **pos** - (*object*) the position of a scroll as an object with x and y attributes diff --git a/docs/guides/diagram_editor/editbar.md b/docs/guides/diagram_editor/editbar.md index 589724ffd..694df1df2 100644 --- a/docs/guides/diagram_editor/editbar.md +++ b/docs/guides/diagram_editor/editbar.md @@ -6,7 +6,7 @@ description: You can learn about the Editbar of editor in the documentation of t # Editbar -You can configure Editbar controls for each Diagram element separately and for a [group of elements](/guides/items_index) taking into account various conditions. For this purpose, use the Editbar [`properties`](api/diagram_editor/editbar/config/properties_property.md) config. +You can configure Editbar controls for each Diagram element separately and for a [group of elements](guides/items_index.md) taking into account various conditions. For this purpose, use the Editbar [`properties`](api/diagram_editor/editbar/config/properties_property.md) config. If you want to configure Editbar controls for an individual [shape](/category/shapes), you need to specify the corresponding **shape type** within the [`properties`](api/diagram_editor/editbar/config/properties_property.md) config as shown in the example below: @@ -27,7 +27,7 @@ const editor = new dhx.DiagramEditor("editor_container", { }); ~~~ -To configure a [group of elements](/guides/items_index), you need to use the following service properties within the [`properties`](api/diagram_editor/editbar/config/properties_property.md) config: +To configure a [group of elements](guides/items_index.md), you need to use the following service properties within the [`properties`](api/diagram_editor/editbar/config/properties_property.md) config: - [`$default`](#configure-editbar-for-the-grid-area) - allows configuring Editbar controls if no elements are selected, or more than one element is selected - [`$shape`](#configure-editbar-for-shapes) - allows configuring Editbar controls for [all shapes including custom shapes](/category/shapes) @@ -54,7 +54,7 @@ properties: { } ~~~ -**Related complex controls:** [Grid step](/api/diagram_editor/editbar/complex_controls/gridstep/), [Border](/api/diagram_editor/editbar/complex_controls/border/), [Arrange](/api/diagram_editor/editbar/complex_controls/arrange/) +**Related complex controls:** [Grid step](api/diagram_editor/editbar/complex_controls/gridstep.md), [Border](api/diagram_editor/editbar/complex_controls/border.md), [Arrange](api/diagram_editor/editbar/complex_controls/arrange.md) ## Configure Editbar for shapes @@ -75,7 +75,7 @@ properties: { } ~~~ -**Related complex controls:** [Border](/api/diagram_editor/editbar/complex_controls/border/), [Arrange](/api/diagram_editor/editbar/complex_controls/arrange/), [Position](/api/diagram_editor/editbar/complex_controls/position/), [Size](/api/diagram_editor/editbar/complex_controls/size/), [Text align](/api/diagram_editor/editbar/complex_controls/textalign/), [Text style](/api/diagram_editor/editbar/complex_controls/textstyle/) +**Related complex controls:** [Border](api/diagram_editor/editbar/complex_controls/border.md), [Arrange](api/diagram_editor/editbar/complex_controls/arrange.md), [Position](api/diagram_editor/editbar/complex_controls/position.md), [Size](api/diagram_editor/editbar/complex_controls/size.md), [Text align](api/diagram_editor/editbar/complex_controls/textalign.md), [Text style](api/diagram_editor/editbar/complex_controls/textstyle.md) ## Configure Editbar for group elements @@ -93,7 +93,7 @@ properties: { } ~~~ -**Related complex controls:** [Border](/api/diagram_editor/editbar/complex_controls/border/), [Arrange](/api/diagram_editor/editbar/complex_controls/arrange/), [Header](/api/diagram_editor/editbar/complex_controls/header/), [Header common](/api/diagram_editor/editbar/complex_controls/headercommon/), [Header position](/api/diagram_editor/editbar/complex_controls/headerposition/), [Size](/api/diagram_editor/editbar/complex_controls/size/), [Text align](/api/diagram_editor/editbar/complex_controls/textalign/), [Text style](/api/diagram_editor/editbar/complex_controls/textstyle/) +**Related complex controls:** [Border](api/diagram_editor/editbar/complex_controls/border.md), [Arrange](api/diagram_editor/editbar/complex_controls/arrange.md), [Header](api/diagram_editor/editbar/complex_controls/header.md), [Header common](api/diagram_editor/editbar/complex_controls/headercommon.md), [Header position](api/diagram_editor/editbar/complex_controls/headerposition.md), [Size](api/diagram_editor/editbar/complex_controls/size.md), [Text align](api/diagram_editor/editbar/complex_controls/textalign.md), [Text style](api/diagram_editor/editbar/complex_controls/textstyle.md) ## Configure Editbar for swimlanes @@ -111,7 +111,7 @@ properties: { } ~~~ -**Related complex controls:** [Border](/api/diagram_editor/editbar/complex_controls/border/), [Arrange](/api/diagram_editor/editbar/complex_controls/arrange/), [Header](/api/diagram_editor/editbar/complex_controls/header/), [Header common](/api/diagram_editor/editbar/complex_controls/headercommon/), [Header position](/api/diagram_editor/editbar/complex_controls/headerposition/), [Size](/api/diagram_editor/editbar/complex_controls/size/), [Text align](/api/diagram_editor/editbar/complex_controls/textalign/), [Text style](/api/diagram_editor/editbar/complex_controls/textstyle/) +**Related complex controls:** [Border](api/diagram_editor/editbar/complex_controls/border.md), [Arrange](api/diagram_editor/editbar/complex_controls/arrange.md), [Header](api/diagram_editor/editbar/complex_controls/header.md), [Header common](api/diagram_editor/editbar/complex_controls/headercommon.md), [Header position](api/diagram_editor/editbar/complex_controls/headerposition.md), [Size](api/diagram_editor/editbar/complex_controls/size.md), [Text align](api/diagram_editor/editbar/complex_controls/textalign.md), [Text style](api/diagram_editor/editbar/complex_controls/textstyle.md) ## Configure Editbar for lines @@ -129,7 +129,7 @@ properties: { } ~~~ -**Related complex controls:** [Border](/api/diagram_editor/editbar/complex_controls/border/), [Line shape](/api/diagram_editor/editbar/complex_controls/lineshape/), [Pointer view](/api/diagram_editor/editbar/complex_controls/pointerview/) +**Related complex controls:** [Border](api/diagram_editor/editbar/complex_controls/border.md), [Line shape](api/diagram_editor/editbar/complex_controls/lineshape.md), [Pointer view](api/diagram_editor/editbar/complex_controls/pointerview.md) ## Configure Editbar for line titles @@ -148,7 +148,7 @@ properties: { } ~~~ -**Related complex controls:** [Text align](/api/diagram_editor/editbar/complex_controls/textalign/), [Text style](/api/diagram_editor/editbar/complex_controls/textstyle/) +**Related complex controls:** [Text align](api/diagram_editor/editbar/complex_controls/textalign.md), [Text style](api/diagram_editor/editbar/complex_controls/textstyle.md) ## Create and configure custom Editbar controls diff --git a/docs/guides/diagram_editor/grid_area.md b/docs/guides/diagram_editor/grid_area.md index 1467c471f..e335d0331 100644 --- a/docs/guides/diagram_editor/grid_area.md +++ b/docs/guides/diagram_editor/grid_area.md @@ -11,7 +11,7 @@ Grid area is an area intended for editing a diagram. You can easily add new item In this section you will find what interface elements are available for each diagram item depending on the mode the editor is initialized in. The section also explains how to facilitate ease of designing a diagram by using keyboard shortcuts or operating several selected items at once. :::note -Distance between points in the Grid area depends on the value of the [grid step](/api/diagram_editor/editor/config/gridstep_property/) +Distance between points in the Grid area depends on the value of the [grid step](api/diagram_editor/editor/config/gridstep_property.md) ::: ## Managing shapes @@ -129,11 +129,11 @@ Note, that some options of moving the first/last columns and rows are deactivate ## Editing attributes of an item -After selecting an item in the grid area, you can update its attributes [via the sidebar options in the editbar of the editor](../../../guides/diagram_editor/editbar/). +After selecting an item in the grid area, you can update its attributes [via the sidebar options in the editbar of the editor](guides/diagram_editor/editbar.md). ## Configuring the toolbar of an item -You can customize the personal toolbar of shapes, groups, swimlanes according to your needs via the [shapeToolbar](../../../api/diagram_editor/editor/config/shapetoolbar_property/) property of the editor. +You can customize the personal toolbar of shapes, groups, swimlanes according to your needs via the [shapeToolbar](api/diagram_editor/editor/config/shapetoolbar_property.md) property of the editor. ## Enabling/disabling snap lines @@ -143,7 +143,7 @@ The feature is available only in the default mode of Editor From v5.0, the Grid area is equipped with snap lines which will simplify the process of placing shapes symmetrically to each other. -If you need to change the width and color of the lines, or to hide them at all, use the [magnetic](../../../api/diagram_editor/editor/config/magnetic_property/) property of Editor. +If you need to change the width and color of the lines, or to hide them at all, use the [magnetic](api/diagram_editor/editor/config/magnetic_property.md) property of Editor. ## Manipulating multiple items diff --git a/docs/guides/diagram_editor/hot_keys.md b/docs/guides/diagram_editor/hot_keys.md index 85cd4db71..38aa2b61b 100644 --- a/docs/guides/diagram_editor/hot_keys.md +++ b/docs/guides/diagram_editor/hot_keys.md @@ -6,7 +6,7 @@ description: You can learn about the Hotkeys of editor in the documentation of t # Hotkey list -In this section you will find a set of standard hotkeys you can use while creating a diagram in the editor, descriptions of the actions performed by these hotkeys and key string parameters for those hotkeys that can be overridden. Apply the [`hotkeys`](/api/diagram_editor/editor/config/hotkeys_property/) property for managing keyboard hotkeys within the editor. +In this section you will find a set of standard hotkeys you can use while creating a diagram in the editor, descriptions of the actions performed by these hotkeys and key string parameters for those hotkeys that can be overridden. Apply the [`hotkeys`](api/diagram_editor/editor/config/hotkeys_property.md) property for managing keyboard hotkeys within the editor. | Hotkey combination | Description | Parameter key string | |--------------------------------|------------------------------------------------------|-------------------------| @@ -31,7 +31,7 @@ In this section you will find a set of standard hotkeys you can use while creati ## Inline text editor shortcuts -The following hotkeys are available when the [inline text editor](/guides/inline_editing/) is active. They cannot be configured via the `hotkeys` property. +The following hotkeys are available when the [inline text editor](guides/inline_editing.md) is active. They cannot be configured via the `hotkeys` property. | Hotkey | Description | |--------|-------------| diff --git a/docs/guides/diagram_editor/initialization.md b/docs/guides/diagram_editor/initialization.md index 190bf161f..5530ca0d6 100644 --- a/docs/guides/diagram_editor/initialization.md +++ b/docs/guides/diagram_editor/initialization.md @@ -141,10 +141,10 @@ const editor = new dhx.DiagramEditor("editor_container", { ### Properties -Check [the full list of configuration properties of Editor](/api/diagram_editor/editor/config/overview/). +Check [the full list of configuration properties of Editor](api/diagram_editor/editor/config/overview.md). ## Loading data into Diagram Editor -It is possible to load an [appropriate data set](../../../guides/loading_data/#preparing-data-to-load) into the editor via the [parse()](../../../api/diagram_editor/editor/methods/parse_method/) method of the editor. +It is possible to load an [appropriate data set](guides/loading_data.md#preparing-data-to-load) into the editor via the [parse()](api/diagram_editor/editor/methods/parse_method.md) method of the editor. diff --git a/docs/guides/diagram_editor/shapebar.md b/docs/guides/diagram_editor/shapebar.md index 4e8568283..abac0bd91 100644 --- a/docs/guides/diagram_editor/shapebar.md +++ b/docs/guides/diagram_editor/shapebar.md @@ -21,7 +21,7 @@ The *Groups* and *Swimlanes* sections contain basic sets of the items. ## Custom sections -To customize the structure of the shapebar, you should use the [`sections`](../../../api/diagram_editor/shapebar/config/sections_property/) property. It allows you to specify your own sections in the necessary order and put the items into the corresponding sections. +To customize the structure of the shapebar, you should use the [`sections`](api/diagram_editor/shapebar/config/sections_property.md) property. It allows you to specify your own sections in the necessary order and put the items into the corresponding sections. The `sections` property is an object with a set of *key:value* pairs where `key` is the name of a section and `value` is an array with the list of items which should be rendered in the section. @@ -141,11 +141,11 @@ The library allows you to add several identical items (i.e. items of the same ty To do that, you need to: - create separate objects with different configurations for the items of the necessary type. You can create as many objects as you need -- use the *names* of the created objects as the *types* of the items and add them into the sections of the shapebar using the [`sections`](../../../api/diagram_editor/shapebar/config/sections_property/) property +- use the *names* of the created objects as the *types* of the items and add them into the sections of the shapebar using the [`sections`](api/diagram_editor/shapebar/config/sections_property.md) property ## Setting the preview of shapes -To configure the preview of items rendered in the shapebar of the editor, make use of the [`preview`](../../../api/diagram_editor/shapebar/config/preview_property/) property. It is an object that contains two attributes: +To configure the preview of items rendered in the shapebar of the editor, make use of the [`preview`](api/diagram_editor/shapebar/config/preview_property.md) property. It is an object that contains two attributes: - `scale` - (optional) defines the scale of items rendered in the shapebar of the editor, 0.5 by default - `gap` - (optional) specifies the space between the items rendered in the shapebar, "6px 8px" by default @@ -167,12 +167,12 @@ const editor = new dhx.DiagramEditor("editor_container", { ### Customizing a shape preview -To customize the appearance of a particular shape, you can apply the [preview](/shapes/configuration_properties/#properties-specific-for-the-default-mode) configuration property of a shape object. +To customize the appearance of a particular shape, you can apply the [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) configuration property of a shape object. The property can be applied in two cases: -- when setting the default configuration of a default shape via the [`defaults`](/api/diagram_editor/editor/config/defaults_property/) property of the editor object -- when setting the default configuration of a custom shape via the `defaults` attribute of the [`addShape()`](/api/diagram/addshape_method/) method +- when setting the default configuration of a default shape via the [`defaults`](api/diagram_editor/editor/config/defaults_property.md) property of the editor object +- when setting the default configuration of a custom shape via the `defaults` attribute of the [`addShape()`](api/diagram/addshape_method.md) method Let's consider three examples of configuring a shape preview: @@ -252,7 +252,7 @@ editor.diagram.addShape("personalCard", { ## Setting the width of shapebar -The default width of the shapebar is 300. You can change it and set any other width via the [`width`](/api/diagram_editor/shapebar/config/width_property/) property, e.g.: +The default width of the shapebar is 300. You can change it and set any other width via the [`width`](api/diagram_editor/shapebar/config/width_property.md) property, e.g.: ~~~jsx const editor = new dhx.DiagramEditor("editor_container", { @@ -267,7 +267,7 @@ const editor = new dhx.DiagramEditor("editor_container", { ## Showing/hiding the Shapebar -Whenever you need to control the visibility of a shapebar, you can use the [`show`](/api/diagram_editor/shapebar/config/show_property/) property. It allows you to hide the shapebar with particular settings on initialization of the Diagram Editor and show it later, when needed. By default the shapebar is shown. +Whenever you need to control the visibility of a shapebar, you can use the [`show`](api/diagram_editor/shapebar/config/show_property.md) property. It allows you to hide the shapebar with particular settings on initialization of the Diagram Editor and show it later, when needed. By default the shapebar is shown. ~~~jsx const editor = new dhx.DiagramEditor("editor_container", { @@ -282,7 +282,7 @@ const editor = new dhx.DiagramEditor("editor_container", { ## Shapebar and shapes appearance -You can provide the desired look and feel for the shapebar with the [`css`](/api/diagram_editor/shapebar/config/css_property/) property. It allows specifying custom CSS classes to stylize items presentation in the shapebar in your own way. +You can provide the desired look and feel for the shapebar with the [`css`](api/diagram_editor/shapebar/config/css_property.md) property. It allows specifying custom CSS classes to stylize items presentation in the shapebar in your own way. ~~~html {6}