DevExpress · ivanblinov2k17 · Nov 13, 2023 · Oct 16, 2023 · Oct 16, 2023 · Oct 16, 2023
diff --git a/...s/Demos/Diagram/Adaptability/React/App.js → .../Demos/Diagram/Adaptability/React/App.tsx b/...s/Demos/Diagram/Adaptability/React/App.js → .../Demos/Diagram/Adaptability/React/App.tsx
@@ -3,7 +3,7 @@ import Diagram from 'devextreme-react/diagram';
 import 'whatwg-fetch';
 
 export default function App() {
-  const diagramRef = React.useRef();
+  const diagramRef = React.useRef<Diagram>();
 
   React.useEffect(() => {
     const diagram = diagramRef.current.instance;

diff --git a/JSDemos/Demos/Diagram/Adaptability/React/index.html b/JSDemos/Demos/Diagram/Adaptability/React/index.html
@@ -13,7 +13,7 @@
     <script src="../../../../../node_modules/systemjs/dist/system.js"></script>
     <script type="text/javascript" src="config.js"></script>
     <script type="text/javascript">
-      System.import("./index.js");
+      System.import("./index.tsx");
     </script>
   </head>
 

diff --git a/...s/Demos/Diagram/Containers/React/index.js → ...emos/Diagram/Adaptability/React/index.tsx b/...s/Demos/Diagram/Containers/React/index.js → ...emos/Diagram/Adaptability/React/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import App from './App.js';
+import App from './App.tsx';
 
 ReactDOM.render(
   <App />,

diff --git a/JSDemos/Demos/Diagram/Adaptability/ReactJs/App.js b/JSDemos/Demos/Diagram/Adaptability/ReactJs/App.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import Diagram from 'devextreme-react/diagram';
+import 'whatwg-fetch';
+
+export default function App() {
+  const diagramRef = React.useRef();
+  React.useEffect(() => {
+    const diagram = diagramRef.current.instance;
+    fetch('../../../../data/diagram-flow.json')
+      .then((response) => response.json())
+      .then((json) => {
+        diagram.import(JSON.stringify(json));
+      })
+      .catch(() => {
+        throw new Error('Data Loading Error');
+      });
+  }, []);
+  return (
+    <Diagram
+      id="diagram"
+      ref={diagramRef}
+      autoZoomMode="fitWidth"
+    />
+  );
+}
diff --git a/JSDemos/Demos/Diagram/Adaptability/ReactJs/index.html b/JSDemos/Demos/Diagram/Adaptability/ReactJs/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta
+      http-equiv="X-UA-Compatible"
+      content="IE=edge"
+    />
+    <meta
+      http-equiv="Content-Type"
+      content="text/html; charset=utf-8"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../../../../node_modules/devextreme-dist/css/dx.light.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../../../../node_modules/devexpress-diagram/dist/dx-diagram.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="styles.css"
+    />
+    <script src="../../../../../node_modules/core-js/client/shim.min.js"></script>
+    <script src="../../../../../node_modules/systemjs/dist/system.js"></script>
+    <script
+      type="text/javascript"
+      src="config.js"
+    ></script>
+    <script type="text/javascript">
+      System.import("./index.js");
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="app"></div>
+    </div>
+  </body>
+</html>
diff --git a/JSDemos/Demos/Diagram/Adaptability/ReactJs/index.js b/JSDemos/Demos/Diagram/Adaptability/ReactJs/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App.js';
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/JSDemos/Demos/Diagram/Adaptability/ReactJs/styles.css b/JSDemos/Demos/Diagram/Adaptability/ReactJs/styles.css
@@ -0,0 +1,5 @@
+.demo-container,
+#app,
+#diagram {
+  height: 100%;
+}
diff --git a/.../Diagram/AdvancedDataBinding/React/App.js → ...Diagram/AdvancedDataBinding/React/App.tsx b/.../Diagram/AdvancedDataBinding/React/App.js → ...Diagram/AdvancedDataBinding/React/App.tsx
@@ -3,7 +3,7 @@ import Diagram, {
   Nodes, AutoLayout, Edges, Toolbox, Group,
 } from 'devextreme-react/diagram';
 import ArrayStore from 'devextreme/data/array_store';
-import service from './data.js';
+import service from './data.ts';
 
 const orgItemsDataSource = new ArrayStore({
   key: 'id',
@@ -14,7 +14,7 @@ const orgLinksDataSource = new ArrayStore({
   data: service.getOrgLinks(),
 });
 
-function itemTypeExpr(obj, value) {
+function itemTypeExpr(obj: { type: string; }, value: string) {
   if (value) {
     obj.type = (value === 'rectangle') ? undefined : 'group';
   } else {
@@ -23,7 +23,7 @@ function itemTypeExpr(obj, value) {
   return null;
 }
 
-function itemWidthExpr(obj, value) {
+function itemWidthExpr(obj: { width: number; type: string; }, value) {
   if (value) {
     obj.width = value;
   } else {
@@ -32,7 +32,7 @@ function itemWidthExpr(obj, value) {
   return null;
 }
 
-function itemHeightExpr(obj, value) {
+function itemHeightExpr(obj: { height: number; type: string; }, value) {
   if (value) {
     obj.height = value;
   } else {
@@ -41,15 +41,15 @@ function itemHeightExpr(obj, value) {
   return null;
 }
 
-function itemTextStyleExpr(obj) {
+function itemTextStyleExpr(obj: { level: string; }) {
   if (obj.level === 'senior') {
     return { 'font-weight': 'bold', 'text-decoration': 'underline' };
   }
   return {};
 }
 
-function itemStyleExpr(obj) {
-  const style = { stroke: '#444444' };
+function itemStyleExpr(obj: { type: string; }) {
+  const style: React.CSSProperties = { stroke: '#444444' };
   if (obj.type === 'group') {
     style.fill = '#f3f3f3';
   }

diff --git a/...Diagram/AdvancedDataBinding/React/data.js → ...Diagram/AdvancedDataBinding/React/data.ts b/...Diagram/AdvancedDataBinding/React/data.js → ...Diagram/AdvancedDataBinding/React/data.ts
diff --git a/JSDemos/Demos/Diagram/AdvancedDataBinding/React/index.html b/JSDemos/Demos/Diagram/AdvancedDataBinding/React/index.html
@@ -13,7 +13,7 @@
     <script src="../../../../../node_modules/systemjs/dist/system.js"></script>
     <script type="text/javascript" src="config.js"></script>
     <script type="text/javascript">
-      System.import("./index.js");
+      System.import("./index.tsx");
     </script>
   </head>
 

diff --git a/...Demos/Diagram/Adaptability/React/index.js → ...agram/AdvancedDataBinding/React/index.tsx b/...Demos/Diagram/Adaptability/React/index.js → ...agram/AdvancedDataBinding/React/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import App from './App.js';
+import App from './App.tsx';
 
 ReactDOM.render(
   <App />,

diff --git a/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/App.js b/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/App.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import Diagram, {
+  Nodes, AutoLayout, Edges, Toolbox, Group,
+} from 'devextreme-react/diagram';
+import ArrayStore from 'devextreme/data/array_store';
+import service from './data.js';
+
+const orgItemsDataSource = new ArrayStore({
+  key: 'id',
+  data: service.getOrgItems(),
+});
+const orgLinksDataSource = new ArrayStore({
+  key: 'id',
+  data: service.getOrgLinks(),
+});
+function itemTypeExpr(obj, value) {
+  if (value) {
+    obj.type = value === 'rectangle' ? undefined : 'group';
+  } else {
+    return obj.type === 'group' ? 'ellipse' : 'rectangle';
+  }
+  return null;
+}
+function itemWidthExpr(obj, value) {
+  if (value) {
+    obj.width = value;
+  } else {
+    return obj.width || (obj.type === 'group' && 1.5) || 1;
+  }
+  return null;
+}
+function itemHeightExpr(obj, value) {
+  if (value) {
+    obj.height = value;
+  } else {
+    return obj.height || (obj.type === 'group' && 1) || 0.75;
+  }
+  return null;
+}
+function itemTextStyleExpr(obj) {
+  if (obj.level === 'senior') {
+    return { 'font-weight': 'bold', 'text-decoration': 'underline' };
+  }
+  return {};
+}
+function itemStyleExpr(obj) {
+  const style = { stroke: '#444444' };
+  if (obj.type === 'group') {
+    style.fill = '#f3f3f3';
+  }
+  return style;
+}
+function linkStyleExpr() {
+  return { stroke: '#444444' };
+}
+function linkFromLineEndExpr() {
+  return 'none';
+}
+function linkToLineEndExpr() {
+  return 'none';
+}
+export default function App() {
+  return (
+    <Diagram id="diagram">
+      <Nodes
+        dataSource={orgItemsDataSource}
+        typeExpr={itemTypeExpr}
+        textExpr="name"
+        widthExpr={itemWidthExpr}
+        heightExpr={itemHeightExpr}
+        textStyleExpr={itemTextStyleExpr}
+        styleExpr={itemStyleExpr}
+      >
+        <AutoLayout
+          type="tree"
+          orientation="horizontal"
+        />
+      </Nodes>
+      <Edges
+        dataSource={orgLinksDataSource}
+        styleExpr={linkStyleExpr}
+        fromLineEndExpr={linkFromLineEndExpr}
+        toLineEndExpr={linkToLineEndExpr}
+      />
+      <Toolbox>
+        <Group
+          category="general"
+          title="General"
+        />
+      </Toolbox>
+    </Diagram>
+  );
+}