@@ -103,4 +103,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(
);
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.jsx
index 0722b18c0f..eeb6dbdf75 100644
--- a/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -46,4 +46,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(
);
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.tsx
index 225d352254..9c1530329b 100644
--- a/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -46,4 +46,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(
);
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.jsx
index 7e6cbdc106..72354160fa 100644
--- a/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -43,4 +43,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(
);
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.tsx
index 316bb10b77..2f34f400e8 100644
--- a/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -43,4 +43,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(
);
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.jsx
index 89f2d7c0c8..b25a378cc3 100644
--- a/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -16,6 +16,42 @@ let node = [
},
];
+const commandManager = {
+ commands: [
+ {
+ name: 'clone',
+ canExecute: function () {
+ return diagramInstance.selectedItems.nodes.length > 0;
+ },
+ execute: function () {
+ diagramInstance.copy();
+ diagramInstance.paste();
+ },
+ gesture: {
+ // Press G to clone node
+ key: Keys.G,
+ keyModifiers: null,
+ },
+ },
+ {
+ name: 'color',
+ canExecute: function () {
+ return diagramInstance.selectedItems.nodes.length > 0;
+ },
+ execute: function () {
+ const node = diagramInstance.selectedItems.nodes[0];
+ node.style.fill = node.style.fill === '#64abbb' ? 'yellow' : '#64abbb';
+ diagramInstance.dataBind();
+ },
+ gesture: {
+ // Press Shift+G or Alt+G to change node color
+ key: Keys.G,
+ keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt,
+ },
+ },
+ ],
+};
+
// Initializes the Diagram component
function App() {
return (
@@ -26,41 +62,7 @@ function App() {
width={'650px'}
height={'350px'}
nodes={node}
- commandManager={{
- commands: [
- {
- name: 'clone',
- canExecute: function () {
- return diagramInstance.selectedItems.nodes.length > 0;
- },
- execute: function () {
- diagramInstance.copy();
- diagramInstance.paste();
- },
- gesture: {
- // Press G to clone node
- key: Keys.G,
- keyModifiers: null,
- },
- },
- {
- name: 'color',
- canExecute: function () {
- return diagramInstance.selectedItems.nodes.length > 0;
- },
- execute: function () {
- const node = diagramInstance.selectedItems.nodes[0];
- node.style.fill = node.style.fill === '#64abbb' ? 'yellow' : '#64abbb';
- diagramInstance.dataBind();
- },
- gesture: {
- // Press Shift+G or Alt+G to change node color
- key: Keys.G,
- keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt,
- },
- },
- ],
- }}
+ commandManager={commandManager}
/>
);
}
@@ -68,4 +70,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(
);
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.tsx
index f495a7c66c..f88e3119bc 100644
--- a/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -16,6 +16,42 @@ let node:NodeModel[] = [
},
];
+const commandManager = {
+ commands: [
+ {
+ name: 'clone',
+ canExecute: function () {
+ return diagramInstance.selectedItems.nodes.length > 0;
+ },
+ execute: function () {
+ diagramInstance.copy();
+ diagramInstance.paste();
+ },
+ gesture: {
+ // Press G to clone node
+ key: Keys.G,
+ keyModifiers: null,
+ },
+ },
+ {
+ name: 'color',
+ canExecute: function () {
+ return diagramInstance.selectedItems.nodes.length > 0;
+ },
+ execute: function () {
+ const node = diagramInstance.selectedItems.nodes[0];
+ node.style.fill = node.style.fill === '#64abbb' ? 'yellow' : '#64abbb';
+ diagramInstance.dataBind();
+ },
+ gesture: {
+ // Press Shift+G or Alt+G to change node color
+ key: Keys.G,
+ keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt,
+ },
+ },
+ ],
+};
+
// Initializes the Diagram component
function App() {
return (
@@ -26,41 +62,7 @@ function App() {
width={'650px'}
height={'350px'}
nodes={node}
- commandManager={{
- commands: [
- {
- name: 'clone',
- canExecute: function () {
- return diagramInstance.selectedItems.nodes.length > 0;
- },
- execute: function () {
- diagramInstance.copy();
- diagramInstance.paste();
- },
- gesture: {
- // Press G to clone node
- key: Keys.G,
- keyModifiers: null,
- },
- },
- {
- name: 'color',
- canExecute: function () {
- return diagramInstance.selectedItems.nodes.length > 0;
- },
- execute: function () {
- const node = diagramInstance.selectedItems.nodes[0];
- node.style.fill = node.style.fill === '#64abbb' ? 'yellow' : '#64abbb';
- diagramInstance.dataBind();
- },
- gesture: {
- // Press Shift+G or Alt+G to change node color
- key: Keys.G,
- keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt,
- },
- },
- ],
- }}
+ commandManager={commandManager}
/>
);
}
@@ -68,4 +70,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(
);
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.jsx
index f796a7ddb1..747b5beeb2 100644
--- a/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -975,6 +975,24 @@ const fitToHeight = function () {
});
}
+
+const layout = {
+ type: 'OrganizationalChart',
+ margin: { top: 20 },
+ getLayoutInfo: (node, tree) => {
+ if (!tree.hasSubTree) {
+ tree.orientation = 'Vertical';
+ tree.type = 'Alternate';
+ }
+ },
+};
+
+const dataSourceSettings = {
+ id: 'Id',
+ parentId: 'ReportingPerson',
+ dataSource: items,
+};
+
//Initializes the Diagram component
function App() {
return (
@@ -983,22 +1001,8 @@ function App() {
(diagramInstance = diagram)} width={'1250px'} height={'590px'}
- layout={{
- type: 'OrganizationalChart',
- margin: { top: 20 },
- getLayoutInfo: (node, tree) => {
- if (!tree.hasSubTree) {
- tree.orientation = 'Vertical';
- tree.type = 'Alternate';
- }
- },
- }}
- dataSourceSettings={{
- id: 'Id',
- parentId: 'ReportingPerson',
- dataSource: items,
- }
- }
+ layout={layout}
+ dataSourceSettings={dataSourceSettings}
getNodeDefaults={(obj) => {
obj.height = 50;
obj.backgroundColor = 'lightgrey';
@@ -1018,4 +1022,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.tsx
index dd5aebc258..71ecd551f1 100644
--- a/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -975,6 +975,21 @@ const fitToHeight = function () {
});
}
+const layout = {
+ type: 'OrganizationalChart',
+ margin: { top: 20 },
+ getLayoutInfo: (node:Node, tree:TreeInfo) => {
+ if (!tree.hasSubTree) {
+ tree.orientation = 'Vertical';
+ tree.type = 'Alternate';
+ }
+ },
+};
+const dataSourceSettings = {
+ id: 'Id',
+ parentId: 'ReportingPerson',
+ dataSource: items,
+};
//Initializes the Diagram component
function App() {
return (
@@ -983,22 +998,8 @@ function App() {
(diagramInstance = diagram)} width={'1250px'} height={'590px'}
- layout={{
- type: 'OrganizationalChart',
- margin: { top: 20 },
- getLayoutInfo: (node:Node, tree:TreeInfo) => {
- if (!tree.hasSubTree) {
- tree.orientation = 'Vertical';
- tree.type = 'Alternate';
- }
- },
- }}
- dataSourceSettings={{
- id: 'Id',
- parentId: 'ReportingPerson',
- dataSource: items,
- }
- }
+ layout={layout}
+ dataSourceSettings={dataSourceSettings}
getNodeDefaults={(obj: NodeModel) => {
obj.height = 50;
obj.backgroundColor = 'lightgrey';
@@ -1018,4 +1019,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.jsx
index 061d3f5a54..1d380fddf2 100644
--- a/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -16,6 +16,51 @@ let node = [
},
];
+const commandManager = {
+ commands: [
+ {
+ //Preventing default cut command
+ name: 'cut',
+ canExecute: function () {
+ return false;
+ },
+ execute: null,
+ gesture: {
+ key: Keys.X,
+ keyModifiers: KeyModifiers.Control,
+ },
+ },
+ {
+ //Preventing default delete command
+ name: 'delete',
+ canExecute: function () {
+ return false;
+ },
+ execute: null,
+ gesture: {
+ key: Keys.Delete,
+ },
+ },
+ {
+ //Modifying copy command to clone node
+ name: 'clone',
+ canExecute: function () {
+ let execute = diagramInstance.selectedItems.nodes.length > 0;
+ return execute;
+ },
+ execute: function () {
+ diagramInstance.copy();
+ diagramInstance.paste();
+ },
+ gesture: {
+ //Press CTRL+C to clone node
+ key: Keys.C,
+ keyModifiers: KeyModifiers.Control,
+ },
+ },
+ ],
+};
+
// Initializes the Diagram component
function App() {
return (
@@ -26,50 +71,7 @@ function App() {
width={'650px'}
height={'350px'}
nodes={node}
- commandManager={{
- commands: [
- {
- //Preventing default cut command
- name: 'cut',
- canExecute: function () {
- return false;
- },
- execute: null,
- gesture: {
- key: Keys.X,
- keyModifiers: KeyModifiers.Control,
- },
- },
- {
- //Preventing default delete command
- name: 'delete',
- canExecute: function () {
- return false;
- },
- execute: null,
- gesture: {
- key: Keys.Delete,
- },
- },
- {
- //Modifying copy command to clone node
- name: 'clone',
- canExecute: function () {
- let execute = diagramInstance.selectedItems.nodes.length > 0;
- return execute;
- },
- execute: function () {
- diagramInstance.copy();
- diagramInstance.paste();
- },
- gesture: {
- //Press CTRL+C to clone node
- key: Keys.C,
- keyModifiers: KeyModifiers.Control,
- },
- },
- ],
- }}
+ commandManager={commandManager}
/>
);
}
@@ -77,4 +79,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.tsx
index f2df71631b..cada1a1642 100644
--- a/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -16,6 +16,51 @@ let node:NodeModel[] = [
},
];
+const commandManager = {
+ commands: [
+ {
+ //Preventing default cut command
+ name: 'cut',
+ canExecute: function () {
+ return false;
+ },
+ execute: null,
+ gesture: {
+ key: Keys.X,
+ keyModifiers: KeyModifiers.Control,
+ },
+ },
+ {
+ //Preventing default delete command
+ name: 'delete',
+ canExecute: function () {
+ return false;
+ },
+ execute: null,
+ gesture: {
+ key: Keys.Delete,
+ },
+ },
+ {
+ //Modifying copy command to clone node
+ name: 'clone',
+ canExecute: function () {
+ let execute = diagramInstance.selectedItems.nodes.length > 0;
+ return execute;
+ },
+ execute: function () {
+ diagramInstance.copy();
+ diagramInstance.paste();
+ },
+ gesture: {
+ //Press CTRL+C to clone node
+ key: Keys.C,
+ keyModifiers: KeyModifiers.Control,
+ },
+ },
+ ],
+};
+
// Initializes the Diagram component
function App() {
return (
@@ -26,50 +71,7 @@ function App() {
width={'650px'}
height={'350px'}
nodes={node}
- commandManager={{
- commands: [
- {
- //Preventing default cut command
- name: 'cut',
- canExecute: function () {
- return false;
- },
- execute: null,
- gesture: {
- key: Keys.X,
- keyModifiers: KeyModifiers.Control,
- },
- },
- {
- //Preventing default delete command
- name: 'delete',
- canExecute: function () {
- return false;
- },
- execute: null,
- gesture: {
- key: Keys.Delete,
- },
- },
- {
- //Modifying copy command to clone node
- name: 'clone',
- canExecute: function () {
- let execute = diagramInstance.selectedItems.nodes.length > 0;
- return execute;
- },
- execute: function () {
- diagramInstance.copy();
- diagramInstance.paste();
- },
- gesture: {
- //Press CTRL+C to clone node
- key: Keys.C,
- keyModifiers: KeyModifiers.Control,
- },
- },
- ],
- }}
+ commandManager={commandManager}
/>
);
}
@@ -77,4 +79,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.jsx
index 8253986e39..8cc54e3031 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.jsx
@@ -49,7 +49,7 @@ let App = () => {
]}
/>
diff --git a/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.tsx
index 9ba3aae66d..7c36ea46ba 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.tsx
@@ -49,7 +49,7 @@ let App = () => {
]}
/>
diff --git a/ej2-react/code-snippet/diagram/connectors/es5Connectorsport-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/connectors/es5Connectorsport-cs1/app/index.tsx
index 8b949c3c09..eced2f9c43 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5Connectorsport-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5Connectorsport-cs1/app/index.tsx
@@ -63,6 +63,7 @@ let nodes: NodeModel[] = [{
];
let connectors: ConnectorModel[] = [{
id: "connector1",
+ type:'Orthogonal',
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port1',
diff --git a/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.jsx
index 91ce63d7a0..e1f0c45e98 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.jsx
@@ -1,6 +1,7 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
-import { DiagramComponent ,ConnectorConstraints} from "@syncfusion/ej2-react-diagrams";
+import { DiagramComponent, Diagram, ConnectorEditing, ConnectorConstraints } from "@syncfusion/ej2-react-diagrams";
+Diagram.Inject(ConnectorEditing);
let connectors = [{
id: "connector1",
@@ -19,7 +20,8 @@ let connectors = [{
targetPoint: {
x: 200,
y: 200
- }
+ },
+ constraints:ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
},
{
id: "connector2",
diff --git a/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.tsx
index 79ef63ece3..cdefbec3be 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
-import { DiagramComponent ,ConnectorConstraints, ConnectorModel} from "@syncfusion/ej2-react-diagrams";
+import { DiagramComponent, Diagram, ConnectorEditing, ConnectorConstraints, ConnectorModel } from "@syncfusion/ej2-react-diagrams";
+Diagram.Inject(ConnectorEditing);
let connectors:ConnectorModel [] = [{
id: "connector1",
@@ -19,7 +20,8 @@ let connectors:ConnectorModel [] = [{
targetPoint: {
x: 200,
y: 200
- }
+ },
+ constraints:ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
},
{
id: "connector2",
diff --git a/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.jsx b/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.jsx
index c96b0a41d0..4cbb76075e 100644
--- a/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from "react-dom";
@@ -41,4 +41,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.tsx b/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.tsx
index 565b73a5a3..b2eab30537 100644
--- a/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from "react-dom";
@@ -42,4 +42,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/constraints/constraints-cs6/app/index.jsx b/ej2-react/code-snippet/diagram/constraints/constraints-cs6/app/index.jsx
index 583ad490f1..7d2b0569c7 100644
--- a/ej2-react/code-snippet/diagram/constraints/constraints-cs6/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/constraints/constraints-cs6/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from "react-dom";
@@ -47,4 +47,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.jsx b/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.jsx
index 7c43f88c58..e52c144115 100644
--- a/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from "react-dom";
@@ -42,4 +42,3 @@ const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.tsx b/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.tsx
index 847ca2ccb7..9043535e3e 100644
--- a/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from "react-dom";
@@ -41,4 +41,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.jsx
index c7c6cd6ddb..d6c084dc44 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -42,4 +42,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.tsx
index 05266b7c3a..59195ce22c 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -42,4 +42,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs2/app/index.jsx
index de244a8adb..adb85668d8 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -22,51 +22,51 @@ let node = [{
annotations: [{id: 'label2',content: 'Rectangle2'}],
}
];
-
+const contextMenuSettings = {
+ //Enables the context menu
+ show: true,
+ items: [
+ {
+ // Text to be displayed
+ text: 'Fill',
+ items: [
+ { id: 'red', text: 'Red' },
+ { id: 'yellow', text: 'Yellow' },
+ { id: 'green', text: 'Green' },
+ { id: 'blue', text: 'Blue' },
+ ],
+ //Sets the id for the item
+ id: 'fill',
+ target: '.e-elementcontent',
+ // Sets the css icons for the item
+ iconCss: 'e-icons e-paint-bucket',
+ },
+ {
+ text: 'Annotation color',
+ id: 'annotationColor',
+ items: [
+ { id: 'pink', text: 'Pink' },
+ { id: 'orange', text: 'Orange' },
+ { id: 'violet', text: 'Violet' },
+ { id: 'brown', text: 'Brown' },
+ ],
+ target: '.e-elementcontent',
+ iconCss: 'e-icons e-font-color',
+ },
+ {
+ text: 'Clone',
+ id: 'clone',
+ target: '.e-elementcontent',
+ iconCss: 'e-icons e-copy',
+ },
+ ],
+ // Hides the default context menu items
+ showCustomMenuOnly: true,
+};
//Initializes the Diagram component
function App() {
return (