Publish dxDiagram types, arrange "commands" props types (T1227506) (#…

…27344)

apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx

@@ -1,6 +1,16 @@
 import React, { useCallback, useRef, useState } from 'react';
-import Diagram, {
-  CustomShape, ContextToolbox, PropertiesPanel, Group, Tab, Toolbox, Nodes, AutoLayout, DiagramTypes, DiagramRef,
+import {
+  Diagram,
+  AutoLayout,
+  ContextToolbox,
+  CustomShape,
+  DiagramRef,
+  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 +20,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 +227,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>

apps/demos/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';

apps/demos/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} />

apps/demos/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';

packages/devextreme-angular/src/ui/nested/auto-layout.ts

@@ -15,7 +15,7 @@ import {
 
 
 import { Orientation } from 'devextreme/common';
-import { DiagramDataLayoutType } from 'devextreme/ui/diagram';
+import { DataLayoutType } from 'devextreme/ui/diagram';
 
 import {
     NestedOptionHost,
@@ -39,10 +39,10 @@ export class DxoAutoLayoutComponent extends NestedOption implements OnDestroy, O
     }
 
     @Input()
-    get type(): DiagramDataLayoutType {
+    get type(): DataLayoutType {
         return this._getOption('type');
     }
-    set type(value: DiagramDataLayoutType) {
+    set type(value: DataLayoutType) {
         this._setOption('type', value);
     }
 

packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts

@@ -10,7 +10,7 @@ import { Properties as dxBoxOptions } from 'devextreme/ui/box';
 import { Properties as dxButtonOptions } from 'devextreme/ui/button';
 import { dxContextMenuItem } from 'devextreme/ui/context_menu';
 import { DataGridPredefinedToolbarItem } from 'devextreme/ui/data_grid';
-import { DiagramCommand, dxDiagramCustomCommand } from 'devextreme/ui/diagram';
+import { Command, CustomCommand } from 'devextreme/ui/diagram';
 import { ItemClickEvent } from 'devextreme/ui/drop_down_button';
 import { dxFileManagerContextMenuItem, FileManagerPredefinedContextMenuItem, FileManagerPredefinedToolbarItem } from 'devextreme/ui/file_manager';
 import { ButtonItem, EmptyItem, FormItemComponent, FormItemType, GroupItem, LabelLocation, SimpleItem, TabbedItem } from 'devextreme/ui/form';
@@ -160,10 +160,10 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('closeMenuOnClick', value);
     }
 
-    get items(): Array<dxContextMenuItem | SimpleItem | GroupItem | TabbedItem | EmptyItem | ButtonItem | dxDiagramCustomCommand | dxFileManagerContextMenuItem | HtmlEditorPredefinedContextMenuItem | any | dxMenuItem | dxTreeViewItem> {
+    get items(): Array<dxContextMenuItem | SimpleItem | GroupItem | TabbedItem | EmptyItem | ButtonItem | CustomCommand | Command | dxFileManagerContextMenuItem | HtmlEditorPredefinedContextMenuItem | any | dxMenuItem | dxTreeViewItem> {
         return this._getOption('items');
     }
-    set items(value: Array<dxContextMenuItem | SimpleItem | GroupItem | TabbedItem | EmptyItem | ButtonItem | dxDiagramCustomCommand | dxFileManagerContextMenuItem | HtmlEditorPredefinedContextMenuItem | any | dxMenuItem | dxTreeViewItem>) {
+    set items(value: Array<dxContextMenuItem | SimpleItem | GroupItem | TabbedItem | EmptyItem | ButtonItem | CustomCommand | Command | dxFileManagerContextMenuItem | HtmlEditorPredefinedContextMenuItem | any | dxMenuItem | dxTreeViewItem>) {
         this._setOption('items', value);
     }
 
@@ -244,10 +244,10 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('label', value);
     }
 
-    get name(): string | undefined | DataGridPredefinedToolbarItem | DiagramCommand | FileManagerPredefinedContextMenuItem | FileManagerPredefinedToolbarItem | GanttPredefinedContextMenuItem | GanttPredefinedToolbarItem | HtmlEditorPredefinedContextMenuItem | HtmlEditorPredefinedToolbarItem | TreeListPredefinedToolbarItem {
+    get name(): string | undefined | DataGridPredefinedToolbarItem | Command | FileManagerPredefinedContextMenuItem | FileManagerPredefinedToolbarItem | GanttPredefinedContextMenuItem | GanttPredefinedToolbarItem | HtmlEditorPredefinedContextMenuItem | HtmlEditorPredefinedToolbarItem | TreeListPredefinedToolbarItem {
         return this._getOption('name');
     }
-    set name(value: string | undefined | DataGridPredefinedToolbarItem | DiagramCommand | FileManagerPredefinedContextMenuItem | FileManagerPredefinedToolbarItem | GanttPredefinedContextMenuItem | GanttPredefinedToolbarItem | HtmlEditorPredefinedContextMenuItem | HtmlEditorPredefinedToolbarItem | TreeListPredefinedToolbarItem) {
+    set name(value: string | undefined | DataGridPredefinedToolbarItem | Command | FileManagerPredefinedContextMenuItem | FileManagerPredefinedToolbarItem | GanttPredefinedContextMenuItem | GanttPredefinedToolbarItem | HtmlEditorPredefinedContextMenuItem | HtmlEditorPredefinedToolbarItem | TreeListPredefinedToolbarItem) {
         this._setOption('name', value);
     }
 

packages/devextreme-angular/src/ui/nested/base/diagram-custom-command-dxi.ts → packages/devextreme-angular/src/ui/nested/base/custom-command-dxi.ts

@@ -6,23 +6,23 @@ import {
 } from '@angular/core';
 
 import { ToolbarItemLocation } from 'devextreme/common';
-import { DiagramCommand, dxDiagramCustomCommand } from 'devextreme/ui/diagram';
+import { Command, CustomCommand } from 'devextreme/ui/diagram';
 
 @Component({
     template: ''
 })
-export abstract class DxiDiagramCustomCommand extends CollectionNestedOption {
+export abstract class DxiCustomCommand extends CollectionNestedOption {
     get icon(): string {
         return this._getOption('icon');
     }
     set icon(value: string) {
         this._setOption('icon', value);
     }
 
-    get items(): Array<dxDiagramCustomCommand> {
+    get items(): Array<CustomCommand | Command> {
         return this._getOption('items');
     }
-    set items(value: Array<dxDiagramCustomCommand>) {
+    set items(value: Array<CustomCommand | Command>) {
         this._setOption('items', value);
     }
 
@@ -33,10 +33,10 @@ export abstract class DxiDiagramCustomCommand extends CollectionNestedOption {
         this._setOption('location', value);
     }
 
-    get name(): DiagramCommand | string {
+    get name(): Command | string {
         return this._getOption('name');
     }
-    set name(value: DiagramCommand | string) {
+    set name(value: Command | string) {
         this._setOption('name', value);
     }
 

packages/devextreme-angular/src/ui/nested/base/file-manager-context-menu.ts

@@ -6,18 +6,18 @@ import {
 } from '@angular/core';
 
 import { dxContextMenuItem } from 'devextreme/ui/context_menu';
-import { DiagramCommand, dxDiagramCustomCommand } from 'devextreme/ui/diagram';
+import { Command, CustomCommand } from 'devextreme/ui/diagram';
 import { dxFileManagerContextMenuItem, FileManagerPredefinedContextMenuItem } from 'devextreme/ui/file_manager';
 import { GanttPredefinedContextMenuItem } from 'devextreme/ui/gantt';
 
 @Component({
     template: ''
 })
 export abstract class DxoFileManagerContextMenu extends NestedOption {
-    get commands(): Array<dxDiagramCustomCommand | DiagramCommand> {
+    get commands(): Array<CustomCommand | Command> {
         return this._getOption('commands');
     }
-    set commands(value: Array<dxDiagramCustomCommand | DiagramCommand>) {
+    set commands(value: Array<CustomCommand | Command>) {
         this._setOption('commands', value);
     }
 

packages/devextreme-angular/src/ui/nested/base/html-editor-image-upload-tab-item-dxi.ts

@@ -5,7 +5,7 @@ import {
     Component,
 } from '@angular/core';
 
-import { DiagramCommand, dxDiagramCustomCommand } from 'devextreme/ui/diagram';
+import { Command, CustomCommand } from 'devextreme/ui/diagram';
 import { ButtonItem, EmptyItem, GroupItem, SimpleItem, TabbedItem } from 'devextreme/ui/form';
 import { HtmlEditorImageUploadTab } from 'devextreme/ui/html_editor';
 
@@ -83,17 +83,17 @@ export abstract class DxiHtmlEditorImageUploadTabItem extends CollectionNestedOp
         this._setOption('title', value);
     }
 
-    get commands(): Array<dxDiagramCustomCommand | DiagramCommand> {
+    get commands(): Array<CustomCommand | Command> {
         return this._getOption('commands');
     }
-    set commands(value: Array<dxDiagramCustomCommand | DiagramCommand>) {
+    set commands(value: Array<CustomCommand | Command>) {
         this._setOption('commands', value);
     }
 
-    get groups(): Array<any | { commands?: Array<dxDiagramCustomCommand | DiagramCommand>, title?: string }> {
+    get groups(): Array<any | { commands?: Array<CustomCommand | Command>, title?: string }> {
         return this._getOption('groups');
     }
-    set groups(value: Array<any | { commands?: Array<dxDiagramCustomCommand | DiagramCommand>, title?: string }>) {
+    set groups(value: Array<any | { commands?: Array<CustomCommand | Command>, title?: string }>) {
         this._setOption('groups', value);
     }
 

packages/devextreme-angular/src/ui/nested/base/index.ts

@@ -11,10 +11,10 @@ export * from './chart-series-dxi';
 export * from './charts-color';
 export * from './column-chooser-search-config';
 export * from './column-chooser-selection-config';
+export * from './custom-command-dxi';
 export * from './data-change-dxi';
 export * from './data-grid-column-dxi';
 export * from './data-grid-toolbar';
-export * from './diagram-custom-command-dxi';
 export * from './file-manager-context-menu';
 export * from './file-manager-toolbar-item-dxi';
 export * from './file-uploader-options';

packages/devextreme-angular/src/ui/nested/command-dxi.ts

@@ -19,7 +19,7 @@ import {
 import {
     NestedOptionHost,
 } from 'devextreme-angular/core';
-import { DxiDiagramCustomCommand } from './base/diagram-custom-command-dxi';
+import { DxiCustomCommand } from './base/custom-command-dxi';
 import { DxiItemComponent } from './item-dxi';
 
 
@@ -36,7 +36,7 @@ import { DxiItemComponent } from './item-dxi';
         'text'
     ]
 })
-export class DxiCommandComponent extends DxiDiagramCustomCommand {
+export class DxiCommandComponent extends DxiCustomCommand {
 
     protected get _optionPath() {
         return 'commands';

packages/devextreme-angular/src/ui/nested/context-toolbox.ts

@@ -14,7 +14,7 @@ import {
 
 
 
-import { DiagramShapeCategory, DiagramShapeType, DiagramToolboxDisplayMode } from 'devextreme/ui/diagram';
+import { ShapeCategory, ShapeType, ToolboxDisplayMode } from 'devextreme/ui/diagram';
 
 import {
     NestedOptionHost,
@@ -30,18 +30,18 @@ import { NestedOption } from 'devextreme-angular/core';
 })
 export class DxoContextToolboxComponent extends NestedOption implements OnDestroy, OnInit  {
     @Input()
-    get category(): DiagramShapeCategory | string {
+    get category(): ShapeCategory | string {
         return this._getOption('category');
     }
-    set category(value: DiagramShapeCategory | string) {
+    set category(value: ShapeCategory | string) {
         this._setOption('category', value);
     }
 
     @Input()
-    get displayMode(): DiagramToolboxDisplayMode {
+    get displayMode(): ToolboxDisplayMode {
         return this._getOption('displayMode');
     }
-    set displayMode(value: DiagramToolboxDisplayMode) {
+    set displayMode(value: ToolboxDisplayMode) {
         this._setOption('displayMode', value);
     }
 
@@ -62,10 +62,10 @@ export class DxoContextToolboxComponent extends NestedOption implements OnDestro
     }
 
     @Input()
-    get shapes(): Array<DiagramShapeType | string> {
+    get shapes(): Array<ShapeType | string> {
         return this._getOption('shapes');
     }
-    set shapes(value: Array<DiagramShapeType | string>) {
+    set shapes(value: Array<ShapeType | string>) {
         this._setOption('shapes', value);
     }
 

packages/devextreme-angular/src/ui/nested/custom-shape-dxi.ts

@@ -19,7 +19,7 @@ import {
 import { DOCUMENT } from '@angular/common';
 
 
-import { DiagramShapeType } from 'devextreme/ui/diagram';
+import { ShapeType } from 'devextreme/ui/diagram';
 
 import {
     NestedOptionHost,
@@ -113,10 +113,10 @@ export class DxiCustomShapeComponent extends CollectionNestedOption implements A
     }
 
     @Input()
-    get baseType(): DiagramShapeType | string {
+    get baseType(): ShapeType | string {
         return this._getOption('baseType');
     }
-    set baseType(value: DiagramShapeType | string) {
+    set baseType(value: ShapeType | string) {
         this._setOption('baseType', value);
     }