Shapes with Base Type - React Diagram

import React, { useEffect, useRef } from 'react'; import Diagram, { CustomShape, Group, Toolbox, DiagramRef } from 'devextreme-react/diagram'; import service from './data.ts'; import 'whatwg-fetch'; const employees = service.getEmployees(); export default function App() { const diagramRef = useRef<DiagramRef>(); useEffect(() => { const diagram = diagramRef.current.instance(); fetch('../../../../data/diagram-employees.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}> {employees.map((employee, index) => ( <CustomShape category="employees" type={`employee${employee.ID}`} baseType="rectangle" defaultText={employee.Full_Name} allowEditText={false} key={index} /> ))} <Toolbox> <Group category={'employees' as any} title="Employees" displayMode="texts" /> </Toolbox> </Diagram> ); }

import React, { useEffect, useRef } from 'react'; import Diagram, { CustomShape, Group, Toolbox } from 'devextreme-react/diagram'; import service from './data.js'; import 'whatwg-fetch'; const employees = service.getEmployees(); export default function App() { const diagramRef = useRef(); useEffect(() => { const diagram = diagramRef.current.instance(); fetch('../../../../data/diagram-employees.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} > {employees.map((employee, index) => ( <CustomShape category="employees" type={`employee${employee.ID}`} baseType="rectangle" defaultText={employee.Full_Name} allowEditText={false} key={index} /> ))} <Toolbox> <Group category="employees" title="Employees" displayMode="texts" /> </Toolbox> </Diagram> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

{ "page": { "width": 8391, "height": 11907, "pageWidth": 8391, "pageHeight": 11906, "pageLandscape": false, "gridSize": 180, "snapToGrid": true }, "connectors": [ { "key": "4", "locked": false, "zIndex": 0, "points": [ { "x": 4140, "y": 1800 }, { "x": 4140, "y": 2880 } ], "beginItemKey": "0", "beginConnectionPointIndex": 2, "endItemKey": "1", "endConnectionPointIndex": 0 }, { "key": "5", "locked": false, "zIndex": 0, "points": [ { "x": 4140, "y": 1800 }, { "x": 1620, "y": 2880 } ], "beginItemKey": "0", "beginConnectionPointIndex": 2, "endItemKey": "2", "endConnectionPointIndex": 0 }, { "key": "6", "locked": false, "zIndex": 0, "points": [ { "x": 4140, "y": 1800 }, { "x": 6660, "y": 2880 } ], "beginItemKey": "0", "beginConnectionPointIndex": 2, "endItemKey": "3", "endConnectionPointIndex": 0 } ], "shapes": [ { "key": "0", "locked": false, "zIndex": 0, "type": "employee1", "x": 3420, "y": 720, "width": 1440, "height": 1080 }, { "key": "1", "locked": false, "zIndex": 0, "type": "employee2", "x": 3420, "y": 2880, "width": 1440, "height": 1080 }, { "key": "2", "locked": false, "zIndex": 0, "type": "employee3", "x": 900, "y": 2880, "width": 1440, "height": 1080 }, { "key": "3", "locked": false, "zIndex": 0, "type": "employee4", "x": 5940, "y": 2880, "width": 1440, "height": 1080 } ] }

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx-diagram.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.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="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#diagram { height: 725px; }

React Diagram - Shapes with Base Type