Merge pull request #29 from DHTMLX/sp-next-editbar-1924

[update] Editbar guides structure
DHTMLX · Apr 11, 2024 · 1933979 · 1933979
2 parents 9703f43 + 999f249
commit 1933979
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 20 deletions.
diff --git a/docs/api/diagram_editor/editbar/config/controls_property.md b/docs/api/diagram_editor/editbar/config/controls_property.md
@@ -8,25 +8,38 @@ description: You can learn about the controls property of Editbar in the documen
 
 ### Description
 
-@short: Optional. TODO
+@short: Optional. A set of configurations that defines one or several custom controls
+
+:::info
+The `controls` property allows you to create custom Editbar controls based on [**Basic controls**](guides/diagram_editor/editbar/basic_controls.md) and/or [**Complex controls**](guides/diagram_editor/editbar/complex_controls.md). Use the [`properties`](api/diagram_editor/editbar/config/properties_property.md) property to apply the custom control(s) to the needed elements.
+
+Refer to the [**Editbar configuration**](guides/diagram_editor/editbar/complex_controls.md) guide for more information about configuring!
+:::
 
 ### Usage
 
 ~~~js
 controls?: {
-    ... // TODO
+    [type: string]: object, // custom control
+    ... // another control
 };
 ~~~
 
-### Default config
+### Parameters
 
-~~~jsx {}
-controls: TODO
+- `type` - the type name of a new control
+    - `object` - the configuration object of a new control
+
+~~~js
+controls: {
+      estimate: { ... }, // create new "estimate" control with custom configurations
+      ... // another control
+}
 ~~~
 
 ### Example
 
-~~~jsx {11}
+~~~jsx {16-26}
 const editor = new dhx.DiagramEditor("editor_container", {
     type: "org",
     view: {
@@ -36,9 +49,22 @@ const editor = new dhx.DiagramEditor("editor_container", {
             css: "custom_css",
             show: true,
             width: 300,
-            properties: {...},
+            properties: {
+                $shape: [
+                    { type: "estimate" },
+                    { type: "name" }
+                ]
+            },
             controls: {
-                // TODO
+                estimate: {
+                    type: "fieldset",
+                    label: "Time estimate",
+                    rows: [
+                        { type: "datepicker", key: "date_start", label: "Date start" },
+                        { type: "datepicker", key: "date_end", label: "Date end" }
+                    ]
+                },
+                name: { type: "input", label: "Name", key: "name" }
             }
         }
     }

diff --git a/docs/api/diagram_editor/editbar/config/properties_property.md b/docs/api/diagram_editor/editbar/config/properties_property.md
@@ -4,29 +4,64 @@ title: properties Property of Editbar
 description: You can learn about the properties property of Editbar in the documentation of 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 Diagram.
 ---
 
-# properties - conditions???
+# properties
 
 ### Description
 
-@short: Optional. TODO
+@short: Optional. A set of configurations that modify controls for Diagram elements (shapes, groups, swimlanes etc)
+
+:::info
+The `properties` property allows you to do the following:
+- modify editbar controls for all or individual Diaram elements base on [**Basic controls**](guides/diagram_editor/editbar/basic_controls.md) and/or [**Complex controls**](guides/diagram_editor/editbar/complex_controls.md)
+- apply custom editbar control(s) defined via the [`controls`](api/diagram_editor/editbar/config/controls_property.md) property to Diagram elements
+- specify conditions for applying an editbar control (custom or default) to Diagram elements
+
+Refer to the [**Editbar configuration**](guides/diagram_editor/editbar/complex_controls.md) guide for more information about configuring!
+:::
 
 ### Usage
 
 ~~~js
 properties?: {
-    ... // TODO
+    [type: string]: object[] | function, // custom configurations for controls applied to Diagram elements 
+    ...,
 };
 ~~~
 
-### Default config
+### Parameters
+
+- `type` - the type name of a Diagram element
+    - `object` - the configuration object of a Diagram element
+
+    or
+
+    - `function` - a callback function that should return an array of objects with configuration of Diagram element controls. The function is called with an object that includes the following parameters:
+        - `item` - (optional) the object of the selected element
+        - `editor` - (required) the object of the Diagram editor
+
+~~~jsx {3-4,8-15}
+properties: {
+    // modify the estimate element (shape)
+    estimate: // Diagram element
+        { ... } // configuration object
+
+    // or
 
-~~~jsx {}
-properties: TODO
+    $shape: // type of Diagram elements
+        ({ item, editor }) => { // the callback function that returns the configuration object
+            const controls = [
+                // some configurations
+            ];
+                // ... custom logic here
+            return controls;
+        },
+    ..., // another elemnt
+}
 ~~~
 
 ### Example
 
-~~~jsx {11}
+~~~jsx {10-44}
 const editor = new dhx.DiagramEditor("editor_container", {
     type: "org",
     view: {
@@ -36,9 +71,40 @@ const editor = new dhx.DiagramEditor("editor_container", {
             css: "custom_css",
             show: true,
             width: 300,
-            controls: {...},
             properties: {
-                // TODO
+                $shape: ({ item, editor }) => {
+                    const controls = [
+                        { type: "position" },
+                        { type: "size" }
+                    ];
+                    if (item.hasOwnProperty("title")) {
+                        controls.push({ type: "input", key: "title", label: "Title", wrap: true });
+                    }
+                    if (item.hasOwnProperty("text")) {
+                        controls.push({ type: "textarea", key: "text", height: 200, label: "Text", wrap: true });
+                    }
+                    if (item.hasOwnProperty("img")) {
+                        controls.push({ type: "avatar", key: "img", label: "Image", wrap: true });
+                    }
+                    return controls;
+                },
+                $group: [
+                    {
+                        type: "arrange",
+                        $properties: {
+                            angle: { hidden: true }
+                        }
+                    },
+                    { type: "header" },
+                    {
+                        type: "border",
+                        $properties: {
+                            stroke: { key: ["style", "stroke"] },
+                            strokeType: { hidden: true },
+                            strokeWidth: { key: ["style", "strokeWidth"], width: "85%" }
+                        }
+                    }
+                ]
             }
         }
     }

diff --git a/docs/guides/diagram_editor/editbar/basic_controls.md b/docs/guides/diagram_editor/editbar/basic_controls.md
@@ -0,0 +1,11 @@
+---
+sidebar_label: Basic controls!!
+title: Editbar Guides - Basic controls
+description: You can learn about the Basic controls of Editbar in the documentation of 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 Diagram.
+---
+
+# Basic controls
+
+Здесь мы детально расписываем настройки для каждого базового контрола и даем ссылку на [Editbar configuration](guides/diagram_editor/editbar/configuration.md) - где даем разные сценарии настройки Editbar (сценарии будут дополняться по запросу пользователей)
+
+Задача: https://tracker.webix.io/agiles/87-97/88-554?issue=DHX-4537
diff --git a/docs/guides/diagram_editor/editbar/complex_controls.md b/docs/guides/diagram_editor/editbar/complex_controls.md
@@ -0,0 +1,11 @@
+---
+sidebar_label: Complex controls!!
+title: Editbar Guides - Complex controls
+description: You can learn about the Complex controls of Editbar in the documentation of 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 Diagram.
+---
+
+# Complex controls
+
+Здесь мы детально расписываем настройки для каждого комплексного контрола и даем ссылку на [Editbar configuration](guides/diagram_editor/editbar/configuration.md) - где даем разные сценарии настройки Editbar (сценарии будут дополняться по запросу пользователей)
+
+Задача: https://tracker.webix.io/agiles/87-97/88-554?issue=DHX-4538
diff --git a/docs/guides/diagram_editor/editbar/configuration.md b/docs/guides/diagram_editor/editbar/configuration.md
@@ -0,0 +1,13 @@
+---
+sidebar_label: Editbar сonfiguration!!
+title: Editbar Configuration
+description: You can learn about the Editbar configuration in the documentation of 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 Diagram.
+---
+
+# Editbar configuration
+
+Здесь мы рассказываем как настроить Editbar и перечисляем несколько сценариев как настроить контролы с небольшими комментариями как в коде так и вне его.
+
+Даем ссылки на [Basic controls](guides/diagram_editor/editbar/basic_controls.md) и [Complex controls](guides/diagram_editor/editbar/basic_controls.md), в которых детально расписаны всевозможные свойства (смотреть задачи https://tracker.webix.io/agiles/87-97/88-554?issue=DHX-4537  /  https://tracker.webix.io/agiles/87-97/88-554?issue=DHX-4538)
+
+Даем ссылки и детально рассказываем как настраивать контролы внутри свойств [`properties`](api/diagram_editor/editbar/config/properties_property.md) и [`controls`](api/diagram_editor/editbar/config/controlss_property.md)
diff --git a/docs/guides/diagram_editor/editbar/overview.md b/docs/guides/diagram_editor/editbar/overview.md
@@ -0,0 +1,11 @@
+---
+sidebar_label: Editbar overview!!
+title: Editor Guides - Editbar Overview
+description: You can learn about the Editbar of Diagram Editor in the documentation of 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 Diagram.
+---
+
+# Editbar overview
+
+Здесь рассказываем что есть свойства [`properties`](api/diagram_editor/editbar/config/properties_property.md) и [`controls`](api/diagram_editor/editbar/config/controlss_property.md) которые позволяют настраивать и кастомизить Editbar.
+
+Даем ссылки на [Basic controls](guides/diagram_editor/editbar/basic_controls.md) и [Complex controls](guides/diagram_editor/editbar/complex_controls.md), а также на [Editbar configuration](guides/diagram_editor/editbar/configuration.md)
diff --git a/sidebars.js b/sidebars.js
@@ -842,9 +842,21 @@ module.exports = {
             "guides/diagram_editor/toolbar",
             "guides/diagram_editor/shapebar",
             "guides/diagram_editor/grid_area",
-            "guides/diagram_editor/editbar",
-            "guides/diagram_editor/hot_keys", // New
-          ],
+            {
+              type: "category",
+              label: "Editbar!!",
+              link: {
+                type: 'doc',
+                id: "guides/diagram_editor/editbar/overview",
+              },
+              items: [
+                "guides/diagram_editor/editbar/basic_controls",
+                "guides/diagram_editor/editbar/complex_controls",
+                "guides/diagram_editor/editbar/configuration",
+              ],
+            },
+            "guides/diagram_editor/hot_keys" // New
+          ]
         },
         "guides/loading_data",
         "guides/manipulating_items",

diff --git a/sp-next-toolbar-localization-4504 b/sp-next-toolbar-localization-4504