syncfusion-content · SyncfusionBuild · Jan 30, 2025 · Jan 29, 2025
diff --git a/ej2-react/code-snippet/diagram/group/group-flip/app/index.jsx b/ej2-react/code-snippet/diagram/group/group-flip/app/index.jsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { useRef } from "react";
+import { DiagramComponent,FlipDirection } from "@syncfusion/ej2-react-diagrams";
+const nodes = [
+    {
+        id: 'node1',
+        width: 70,
+        height: 70,
+        offsetX: 100,
+        offsetY: 100,
+        //Sets the flip as Vertical
+        flip: FlipDirection.Vertical,
+        shape: {
+          type: 'Basic',
+          shape: 'RightTriangle',
+        },
+        style: {
+          fill: '#6BA5D7',
+        },
+      },
+      {
+        id: 'node2',
+        width: 70,
+        height: 70,
+        offsetX: 180,
+        offsetY: 180,
+        shape: {
+          type: 'Basic',
+          shape: 'RightTriangle',
+        },
+        style: {
+          fill: '#6BA5D7',
+        },
+
+      },
+      {
+        id: 'group',
+        children: ['node1', 'node2',],
+        padding: { left: 20, right: 20, top: 20, bottom: 20 },
+        //Sets the flip as Horizontal
+        flip: FlipDirection.Horizontal,
+      }
+];
+
+function App() {
+    const diagramRef = useRef(null);
+    return (<DiagramComponent id="diagram" ref={diagramRef} width={'100%'} height={'600px'}
+        nodes={nodes}
+        created={() => {
+            diagramRef.current.select([diagramRef.current.getObject('group')]);
+        }}
+    />);
+}
+const root = ReactDOM.createRoot(document.getElementById('container'));
+root.render(<App />);
diff --git a/ej2-react/code-snippet/diagram/group/group-flip/app/index.tsx b/ej2-react/code-snippet/diagram/group/group-flip/app/index.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { useRef } from "react";
+import { DiagramComponent, NodeModel, FlipDirection } from "@syncfusion/ej2-react-diagrams";
+const nodes: NodeModel[] = [
+    {
+        id: 'node1',
+        width: 70,
+        height: 70,
+        offsetX: 100,
+        offsetY: 100,
+        //Sets the flip as Vertical
+        flip: FlipDirection.Vertical,
+        shape: {
+          type: 'Basic',
+          shape: 'RightTriangle',
+        },
+        style: {
+          fill: '#6BA5D7',
+        },
+      },
+      {
+        id: 'node2',
+        width: 70,
+        height: 70,
+        offsetX: 180,
+        offsetY: 180,
+        shape: {
+          type: 'Basic',
+          shape: 'RightTriangle',
+        },
+        style: {
+          fill: '#6BA5D7',
+        },
+
+      },
+      {
+        id: 'group',
+        children: ['node1', 'node2',],
+        padding: { left: 20, right: 20, top: 20, bottom: 20 },
+        //Sets the flip as Horizontal
+        flip: FlipDirection.Horizontal,
+      }
+];
+
+function App() {
+    const diagramRef = useRef(null);
+    return (<DiagramComponent id="diagram" ref={diagramRef} width={'100%'} height={'600px'}
+        nodes={nodes}
+        created={() => {
+            diagramRef.current.select([diagramRef.current.getObject('group')]);
+        }}
+    />);
+}
+const root = ReactDOM.createRoot(document.getElementById('container'));
+root.render(<App />);
diff --git a/ej2-react/code-snippet/diagram/group/group-flip/index.html b/ej2-react/code-snippet/diagram/group/group-flip/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion® React Diagram-Group</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+     <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+        #container {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+        <div id='container'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/ej2-react/code-snippet/diagram/group/group-flip/systemjs.config.js b/ej2-react/code-snippet/diagram/group/group-flip/systemjs.config.js
@@ -0,0 +1,59 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+            target: "es5",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true,
+            "jsx": "react"
+    },
+     meta: {
+      'typescript': {
+        "exports": "ts"
+      }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: 'app',
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+        "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+        "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
+        "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js",
+       "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/diagram/group/group-flipMode/app/index.jsx b/ej2-react/code-snippet/diagram/group/group-flipMode/app/index.jsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { useRef } from "react";
+import { DiagramComponent, FlipDirection } from "@syncfusion/ej2-react-diagrams";
+const nodes = [
+    {
+        id: 'node1',
+        width: 70,
+        height: 70,
+        offsetX: 100,
+        offsetY: 100,
+        //Sets the flip mode as LabelText
+        flipMode:'LabelText',
+        annotations:[{content:'Node1',offset:{x:0,y:0.8}}],
+        shape: {
+          type: 'Basic',
+          shape: 'RightTriangle',
+        },
+        style: {
+          fill: '#6BA5D7',
+        },
+      },
+      {
+        id: 'node2',
+        width: 70,
+        height: 70,
+        offsetX: 180,
+        offsetY: 180,
+        shape: {
+          type: 'Basic',
+          shape: 'RightTriangle',
+        },
+        style: {
+          fill: '#6BA5D7',
+        },
+
+      },
+      {
+        id: 'group',
+        children: ['node1', 'node2',],
+        padding: { left: 20, right: 20, top: 20, bottom: 20 },
+        annotations:[{content:'Group',offset:{x:0,y:0.8}}],
+        //Sets the flip as Horizontal
+        flip: FlipDirection.Horizontal,
+        //Sets the flip mode as Label
+        flipMode:'Label',
+      }
+];
+
+function App() {
+    const diagramRef = useRef(null);
+    return (<DiagramComponent id="diagram" ref={diagramRef} width={'100%'} height={'600px'}
+        nodes={nodes}
+        created={() => {
+            diagramRef.current.select([diagramRef.current.getObject('group')]);
+        }}
+    />);
+}
+const root = ReactDOM.createRoot(document.getElementById('container'));
+root.render(<App />);
diff --git a/ej2-react/code-snippet/diagram/group/group-flipMode/app/index.tsx b/ej2-react/code-snippet/diagram/group/group-flipMode/app/index.tsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { useRef } from "react";
+import { DiagramComponent, NodeModel, FlipDirection } from "@syncfusion/ej2-react-diagrams";
+const nodes: NodeModel[] = [
+    {
+        id: 'node1',
+        width: 70,
+        height: 70,
+        offsetX: 100,
+        offsetY: 100,
+        //Sets the flip mode as LabelText
+        flipMode:'LabelText',
+        annotations:[{content:'Node1',offset:{x:0,y:0.8}}],
+        shape: {
+          type: 'Basic',
+          shape: 'RightTriangle',
+        },
+        style: {
+          fill: '#6BA5D7',
+        },
+      },
+      {
+        id: 'node2',
+        width: 70,
+        height: 70,
+        offsetX: 180,
+        offsetY: 180,
+        shape: {
+          type: 'Basic',
+          shape: 'RightTriangle',
+        },
+        style: {
+          fill: '#6BA5D7',
+        },
+
+      },
+      {
+        id: 'group',
+        children: ['node1', 'node2',],
+        padding: { left: 20, right: 20, top: 20, bottom: 20 },
+        annotations:[{content:'Group',offset:{x:0,y:0.8}}],
+        //Sets the flip as Horizontal
+        flip: FlipDirection.Horizontal,
+        //Sets the flip mode as Label
+        flipMode:'Label',
+      }
+];
+
+function App() {
+    const diagramRef = useRef(null);
+    return (<DiagramComponent id="diagram" ref={diagramRef} width={'100%'} height={'600px'}
+        nodes={nodes}
+        created={() => {
+            diagramRef.current.select([diagramRef.current.getObject('group')]);
+        }}
+    />);
+}
+const root = ReactDOM.createRoot(document.getElementById('container'));
+root.render(<App />);
diff --git a/ej2-react/code-snippet/diagram/group/group-flipMode/index.html b/ej2-react/code-snippet/diagram/group/group-flipMode/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion® React Diagram-Group</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+     <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+        #container {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+        <div id='container'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>