Update the example

Angular/src/app/app.component.html

@@ -1,45 +1,14 @@
-<dx-diagram
-  [height]="400"
-  customShapeTemplate="customShapeTemplate"
-  [simpleView]="true"
-  (onContentReady)="customFill()"
-  pageColor="#f0f0f0"
->
-  <dxi-custom-shape
-    *ngFor="let obj of projectTasks"
-    [type]="'task' + obj.ID"
-    baseType="rectangle"
-    [defaultWidth]="2.3"
-    [defaultHeight]="1"
-  >
-  </dxi-custom-shape>
-  <svg *dxTemplate="let item of 'customShapeTemplate'" class="template">
-    <text class="template-name" x="50%" y="40%">
-      {{ item.dataItem.Task_Name }}
-    </text>
-    <text x="50%" y="60%">
-      {{ item.dataItem.Description }}
-    </text>
-  </svg>
-  <dxo-nodes
-    [dataSource]="dataSource"
-    keyExpr="ID"
-    [typeExpr]="itemTypeExpr"
-    parentKeyExpr="Parent_ID"
-  >
+<dx-diagram [simpleView]="true" pageColor="#f0f0f0">
+  <dxo-nodes [dataSource]="dataSource" keyExpr="ID" parentKeyExpr="Parent_ID" textExpr="Task_Name">
   </dxo-nodes>
-    <dxo-zoom-level
-      [value]="0.75"
-      [items]="zoomItems"
-    >
-    </dxo-zoom-level>
-    <dxo-toolbox visibility="collapsed"></dxo-toolbox>
-    <dxo-properties-panel visibility="visible">
-      <dxi-tab>
-        <dxi-group
-          title="Object Properties"
-          [commands]="['lineStyle', 'lineColor', 'fillColor']"
-        ></dxi-group>
-      </dxi-tab>
-    </dxo-properties-panel>
+  <dxo-default-item-properties textStyle="font-family: 'Courier New', monospace;">
+  </dxo-default-item-properties>
+  <dxo-properties-panel>
+    <dxi-tab>
+      <dxi-group title="Object Properties" [commands]="objectCommands"></dxi-group>
+    </dxi-tab>
+  </dxo-properties-panel>
+  <dxo-toolbox [showSearch]="false">
+    <dxi-group category="general" [shapes]="['text', 'rectangle']"></dxi-group>
+  </dxo-toolbox>
 </dx-diagram>

Angular/src/app/app.component.ts

@@ -12,28 +12,11 @@ import ArrayStore from 'devextreme/data/array_store';
 export class AppComponent {
   projectTasks: Task[];
   dataSource: ArrayStore;
-  zoomItems: number[] = [0.5, 0.75, 1, 1.5];
   constructor(service: AppService) {
     this.projectTasks = service.getTasks();
     this.dataSource = new ArrayStore({
       key: 'ID',
       data: service.getTasks(),
     });
   }
-  itemTypeExpr(obj: Task) {
-    return `task${obj.ID}`;
-  }
-  randomLightColor() {
-    let r = Math.floor(Math.random() * 128) + 128;
-    let g = Math.floor(Math.random() * 128) + 128;
-    let b = Math.floor(Math.random() * 128) + 128;
-    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-  };
-
-  customFill() {
-    let randomColor = this.randomLightColor();
-      let style = document.createElement('style');
-      style.innerHTML = `.dxdi-canvas .shape rect { fill: ${randomColor}; }`;
-      document.head.appendChild(style);
-  }
 }

README.md

@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/881863374/24.1.7%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1261312)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)

React/src/App.js

@@ -1,118 +1,45 @@
+import React from "react";
 import 'devexpress-diagram/dist/dx-diagram.min.css';
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import Diagram, { CustomShape, Nodes, DefaultItemProperties, ZoomLevel, Toolbox, PropertiesPanel, Tab, Group } from 'devextreme-react/diagram';
-const zoomItems = [0.5, 0.75, 1, 1.5];
-const itemTypeExpr = (obj) => {
-  return `task${obj.ID}`;
-};
-
-const randomLightColor = () => {
-  let r = Math.floor(Math.random() * 128) + 128;
-  let g = Math.floor(Math.random() * 128) + 128;
-  let b = Math.floor(Math.random() * 128) + 128;
-  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-};
-
-const customFill = () => {
-  let randomColor = randomLightColor();
-  let style = document.createElement('style');
-  style.innerHTML = `.dxdi-canvas .shape rect { fill: ${randomColor}; }`;
-  document.head.appendChild(style);
-};
-
-const projectTasks = [
-  {
-    "ID": 1,
-    "Task_Name": "Project Planning",
-    "Description": "Define project scope and goals",
-  },
-  {
-    "ID": 2,
-    "Parent_ID": 1,
-    "Task_Name": "Requirement Analysis",
-    "Description": "Gather and document requirements",
-  },
-  {
-    "ID": 3,
-    "Parent_ID": 1,
-    "Task_Name": "Resource Allocation",
-    "Description": "Assign team and resources",
-  },
-  {
-    "ID": 4,
-    "Parent_ID": 2,
-    "Task_Name": "Design Specifications",
-    "Description": "Outline system design",
-  },
-  {
-    "ID": 5,
-    "Parent_ID": 3,
-    "Task_Name": "Task Scheduling",
-    "Description": "Develop project timeline",
-  },
-  {
-    "ID": 6,
-    "Parent_ID": 2,
-    "Task_Name": "Risk Assessment",
-    "Description": "Identify potential risks",
-  },
-  {
-    "ID": 7,
-    "Parent_ID": 1,
-    "Task_Name": "Kick-off Meeting",
-    "Description": "Launch project with stakeholders",
-  }
-];
-const customShapeRender = (data) => {
-  return (
-    <svg>
-      <text className="template-name" x="50%" y="40%">
-        {data.dataItem.Task_Name}
-      </text>
-      <text x="50%" y="60%">
-        {data.dataItem.Description}
-      </text>
-    </svg>
-  );
-}
+import ArrayStore from "devextreme/data/array_store";
+import Diagram, { Nodes, DefaultItemProperties, Toolbox, PropertiesPanel, Tab, Group } from 'devextreme-react/diagram';
+import service from './data.js';
 
+const dataSource = new ArrayStore({
+  key: 'ID',
+  data: service.getTasks(),
+});
+const objectCommands = ['lineStyle', 'lineColor', 'fillColor'];
+const toolboxShapes = ['text', 'rectangle'];
 function App() {
   return (
     <Diagram
-      height={400}
-      customShapeRender={customShapeRender}
       simpleView={true}
-      onContentReady={customFill}
       pageColor="#f0f0f0"
     >
-      {projectTasks.map((obj, index) => (
-        <CustomShape
-          type={`task${obj.ID}`}
-          baseType="rectangle"
-          defaultWidth={2.3}
-          defaultHeight={1}
-          key={index}
-        />
-      ))}
       <Nodes
-        dataSource={projectTasks}
+        dataSource={dataSource}
         keyExpr="ID"
-        typeExpr={itemTypeExpr}
+        textExpr="Task_Name"
         parentKeyExpr="Parent_ID"
       />
-      <ZoomLevel
-        defaultValue={0.75}
-        items={zoomItems}
+      <DefaultItemProperties
+        textStyle="font-family: 'Courier New', monospace;"
       />
-      <Toolbox visibility="collapsed" />
-      <PropertiesPanel visibility="visible">
+      <PropertiesPanel>
         <Tab>
           <Group
             title="Object Properties"
-            commands={['lineStyle', 'lineColor', 'fillColor']}
+            commands={objectCommands}
           />
         </Tab>
       </PropertiesPanel>
+      <Toolbox showSearch={false} >
+        <Group
+          category="general"
+          shapes={toolboxShapes}
+        />
+      </Toolbox>
     </Diagram>
   );
 };

React/src/data.js

@@ -0,0 +1,49 @@
+const projectTasks = [
+    {
+        "ID": 1,
+        "Task_Name": "Project Planning",
+        "Description": "Define project scope and goals",
+    },
+    {
+        "ID": 2,
+        "Parent_ID": 1,
+        "Task_Name": "Requirement Analysis",
+        "Description": "Gather and document requirements",
+    },
+    {
+        "ID": 3,
+        "Parent_ID": 1,
+        "Task_Name": "Resource Allocation",
+        "Description": "Assign team and resources",
+    },
+    {
+        "ID": 4,
+        "Parent_ID": 2,
+        "Task_Name": "Design Specifications",
+        "Description": "Outline system design",
+    },
+    {
+        "ID": 5,
+        "Parent_ID": 3,
+        "Task_Name": "Task Scheduling",
+        "Description": "Develop project timeline",
+    },
+    {
+        "ID": 6,
+        "Parent_ID": 2,
+        "Task_Name": "Risk Assessment",
+        "Description": "Identify potential risks",
+    },
+    {
+        "ID": 7,
+        "Parent_ID": 1,
+        "Task_Name": "Kick-off Meeting",
+        "Description": "Launch project with stakeholders",
+    }
+];
+
+    export default {
+        getTasks() {
+            return projectTasks;
+        }
+    }