Diagram: arrange "commands" props types (T1227506)

JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx

@@ -1,6 +1,15 @@
 import React, { useCallback, useRef, useState } from 'react';
-import Diagram, {
-  CustomShape, ContextToolbox, PropertiesPanel, Group, Tab, Toolbox, Nodes, AutoLayout, DiagramTypes,
+import {
+  Diagram,
+  AutoLayout,
+  ContextToolbox,
+  CustomShape,
+  Group,
+  Nodes,
+  PropertiesPanel,
+  Tab,
+  Toolbox,
+  DiagramTypes,
 } from 'devextreme-react/diagram';
 import { Popup } from 'devextreme-react/popup';
 import TextBox from 'devextreme-react/text-box';
@@ -10,7 +19,7 @@ import CustomShapeTemplate from './CustomShapeTemplate.tsx';
 import CustomShapeToolboxTemplate from './CustomShapeToolboxTemplate.tsx';
 import service, { Employee } from './data.ts';
 
-const pageCommands = ['pageSize', 'pageOrientation', 'pageColor'];
+const pageCommands: DiagramTypes.Command[] = ['pageSize', 'pageOrientation', 'pageColor'];
 
 const nameLabel = { 'aria-label': 'Name' };
 const emailLabel = { 'aria-label': 'Email' };
@@ -217,7 +226,7 @@ export default function App() {
         </Toolbox>
         <PropertiesPanel>
           <Tab>
-            <Group title="Page Properties" commands={pageCommands as any} />
+            <Group title="Page Properties" commands={pageCommands} />
           </Tab>
         </PropertiesPanel>
       </Diagram>

JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js

@@ -1,13 +1,14 @@
 import React, { useCallback, useRef, useState } from 'react';
-import Diagram, {
-  CustomShape,
+import {
+  Diagram,
+  AutoLayout,
   ContextToolbox,
-  PropertiesPanel,
+  CustomShape,
   Group,
+  Nodes,
+  PropertiesPanel,
   Tab,
   Toolbox,
-  Nodes,
-  AutoLayout,
 } from 'devextreme-react/diagram';
 import { Popup } from 'devextreme-react/popup';
 import TextBox from 'devextreme-react/text-box';

JSDemos/Demos/Diagram/UICustomization/React/App.tsx

@@ -1,22 +1,23 @@
 import React, { useEffect, useRef } from 'react';
-import Diagram, {
+import {
+  Diagram,
+  Command,
   ContextMenu,
   ContextToolbox,
-  PropertiesPanel,
   Group,
-  Tab,
   HistoryToolbar,
-  ViewToolbar,
   MainToolbar,
-  Command,
+  PropertiesPanel,
+  Tab,
   Toolbox,
+  ViewToolbar,
   DiagramTypes,
 } from 'devextreme-react/diagram';
 import { confirm } from 'devextreme/ui/dialog';
 import 'whatwg-fetch';
 
-const pageCommands = ['pageSize', 'pageOrientation', 'pageColor'];
-const menuCommands = ['bringToFront', 'sendToBack', 'lock', 'unlock'];
+const pageCommands: DiagramTypes.Command[] = ['pageSize', 'pageOrientation', 'pageColor'];
+const menuCommands: DiagramTypes.Command[] = ['bringToFront', 'sendToBack', 'lock', 'unlock'];
 
 function onCustomCommand(e: DiagramTypes.CustomCommandEvent) {
   if (e.name === 'clear') {
@@ -54,7 +55,7 @@ export default function App() {
     >
       <ContextMenu
         enabled={true}
-        commands={menuCommands as any}
+        commands={menuCommands}
       />
       <ContextToolbox
         enabled={true}
@@ -64,7 +65,7 @@ export default function App() {
       />
       <PropertiesPanel visibility="visible">
         <Tab>
-          <Group title="Page Properties" commands={pageCommands as any} />
+          <Group title="Page Properties" commands={pageCommands} />
         </Tab>
       </PropertiesPanel>
       <HistoryToolbar visible={false} />

JSDemos/Demos/Diagram/UICustomization/ReactJs/App.js

@@ -1,15 +1,16 @@
 import React, { useEffect, useRef } from 'react';
-import Diagram, {
+import {
+  Diagram,
+  Command,
   ContextMenu,
   ContextToolbox,
-  PropertiesPanel,
   Group,
-  Tab,
   HistoryToolbar,
-  ViewToolbar,
   MainToolbar,
-  Command,
+  PropertiesPanel,
+  Tab,
   Toolbox,
+  ViewToolbar,
 } from 'devextreme-react/diagram';
 import { confirm } from 'devextreme/ui/dialog';
 import 'whatwg-fetch';