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

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);
  }