jQuery Diagram - Restrict Operations
The Diagram UI component raises the requestEditOperation event every time a user attempts an edit operation. This article contains code samples that demonstrate how to use this event's parameters to prohibit individual edit operations and customize a shape collection in the toolbox and context toolbox.
Refer to the following section for more information on the requestEditOperation event's parameters: Prohibit Individual Operations.
Prohibit Creating Loops
The example below demonstrates how to prevent users from connecting a shape to itself:
jQuery
$(function() {
var diagram = $("#diagram").dxDiagram({
onRequestEditOperation: function(e) {
if (e.operation === "changeConnection")
if (e.args.connector && e.args.connector.fromId === e.args.connector.toId)
e.allowed = false;
},
}).dxDiagram("instance");
});Angular
app.component.html
app.component.ts
<dx-diagram #diagram id="diagram" (onRequestEditOperation)="requestEditOperationHandler($event)"> </dx-diagram>
import { Component, ViewChild} from '@angular/core';
import { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(DxDiagramComponent, { static: false }) diagram: DxDiagramComponent;
requestEditOperationHandler(e) {
if (e.operation === "changeConnection")
if (e.args.connector && e.args.connector.fromId === e.args.connector.toId)
e.allowed = false;
}
}Vue
<template>
<DxDiagram
id="diagram"
ref="diagram"
@request-edit-operation="onRequestEditOperation">
</DxDiagram>
</template>
<script>
import DxDiagram from 'devextreme-vue/diagram';
export default {
components: {
DxDiagram,
},
methods: {
onRequestEditOperation(e) {
if (e.operation === "changeConnection")
if (e.args.connector && e.args.connector.fromId === e.args.connector.toId)
e.allowed = false;
},
}
};
</script>React
import React from 'react';
import Diagram from 'devextreme-react/diagram';
class App extends React.Component {
constructor(props) {
super(props);
this.diagramRef = React.createRef();
this.onRequestEditOperation = this.onRequestEditOperation.bind(this);
}
onRequestEditOperation(e) {
if (e.operation === 'changeConnection')
if (e.args.connector && e.args.connector.fromId === e.args.connector.toId)
e.allowed = false;
}
render() {
return (
<Diagram id="diagram" ref={this.diagramRef} onRequestEditOperation={this.onRequestEditOperation}>
</Diagram>
);
}
}
export default App;Prohibit Adding Shapes Twice
The example below demonstrates how to prevent users from adding more than one shape of each type to a chart:
jQuery
$(function() {
var diagram = $("#diagram").dxDiagram({
onRequestEditOperation(e) {
if (e.operation === 'addShape') {
// Gets types of shapes the chart contains
var itemsTypes = e.component.getItems().filter(function(item) {
return (item.itemType === "shape") && (item.id !== e.args.shape.id);
}).map(a => a.type);
// Cancels the operation if the chart contains a shape with the same type as the shape that is about to be added
if (itemsTypes.indexOf(e.args.shape.type) !== -1) {
e.allowed = false;
return;
}
}
},
}).dxDiagram("instance");
});Angular
app.component.html
app.component.ts
<dx-diagram #diagram id="diagram" (onRequestEditOperation)="requestEditOperation($event)"> </dx-diagram>
import { Component, ViewChild} from '@angular/core';
import { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(DxDiagramComponent, { static: false }) diagram: DxDiagramComponent;
requestEditOperation(e) {
if (e.operation === 'addShape') {
// Gets types of shapes the chart contains
var itemsTypes = e.component.getItems().filter(function(item) {
return (item.itemType === "shape") && (item.id !== e.args.shape.id);
}).map(a => a.type);
// Cancels the operation if the chart contains a shape with the same type as the shape that is about to be added
if (itemsTypes.indexOf(e.args.shape.type) !== -1) {
e.allowed = false;
return;
}
}
}
}Vue
<template>
<DxDiagram
id="diagram"
ref="diagram"
@request-edit-operation="onRequestEditOperation">
</DxDiagram>
</template>
<script>
import DxDiagram from 'devextreme-vue/diagram';
export default {
components: {
DxDiagram
},
methods: {
onRequestEditOperation(e) {
if (e.operation === 'addShape') {
// Gets types of shapes the chart contains
var itemsTypes = e.component.getItems().filter(function(item) {
return (item.itemType === "shape") && (item.id !== e.args.shape.id);
}).map(a => a.type);
// Cancels the operation if the chart contains a shape with the same type as the shape that is about to be added
if (itemsTypes.indexOf(e.args.shape.type) !== -1) {
e.allowed = false;
return;
}
}
},
}
};
</script>React
import React from 'react';
import Diagram, { ContextToolbox,} from 'devextreme-react/diagram';
var currentShapeId;
class App extends React.Component {
constructor(props) {
super(props);
this.diagramRef = React.createRef();
this.onRequestEditOperation = this.onRequestEditOperation.bind(this);
}
onRequestEditOperation(e) {
if (e.operation === 'addShape') {
// Gets types of shapes the chart contains
var itemsTypes = e.component.getItems().filter(function(item) {
return (item.itemType === "shape") && (item.id !== e.args.shape.id);
}).map(a => a.type);
// Cancels the operation if the chart contains a shape with the same type as the shape that is about to be added
if (itemsTypes.indexOf(e.args.shape.type) !== -1) {
e.allowed = false;
return;
}
}
}
render() {
return (
<Diagram id="diagram" ref={this.diagramRef} onRequestEditOperation={this.onRequestEditOperation} >
</Diagram>
);
}
}
export default App;See Also
Remove Shapes from Toolboxes
In the example below, the Diagram component updates the shape collection in the toolbox and context toolbox as follows:
- Removes a shape from these toolboxes after a user adds it to a chart
- Returns a shape to these toolboxes after a user deletes it from a chart
jQuery
$(function () {
var shapeCount = 0;
var diagram = $("#diagram").dxDiagram({
onOptionChanged: function (e) {
// Detects changes of the Diagram model
if (e.name === "hasChanges" && e.value) {
e.component.option("hasChanges", false);
var currentShapeCount = e.component.getItems().filter(function(item) {
return (item.itemType ==="shape")
}).length;
// Updates the toolbox and context toolbox if a shape was added or deleted
if (shapeCount !== currentShapeCount) {
shapeCount = currentShapeCount;
window.setTimeout(function() {
e.component.updateToolbox();
}, 0);
}
}
},
onRequestEditOperation(e) {
if (e.operation === "addShapeFromToolbox") {
e.component.getItems().forEach(function(item) {
// Removes a shape from the toolboxes if the chart contains a shape of this type
if (item.itemType === "shape" && item.type === e.args.shapeType)
e.allowed = false;
});
}
},
})
.dxDiagram("instance");
});Angular
app.component.html
app.component.ts
<dx-diagram #diagram id="diagram" (onOptionChanged)="optionChanged($event)" (onRequestEditOperation)="requestEditOperation($event)"> </dx-diagram>
import { Component, ViewChild} from '@angular/core';
import { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(DxDiagramComponent, { static: false }) diagram: DxDiagramComponent;
shapeCount: any;
optionChanged(e) {
// Detects changes of the Diagram model
if (e.name === "hasChanges" && e.value) {
e.component.option("hasChanges", false);
var currentShapeCount = e.component.getItems().filter(function(item) {
return (item.itemType ==="shape")
}).length;
// Updates the toolbox and context toolbox if a shape was added or deleted
if (this.shapeCount !== currentShapeCount) {
this.shapeCount = currentShapeCount;
window.setTimeout(function() {
e.component.updateToolbox();
}, 0);
}
}
}
requestEditOperation(e) {
if (e.operation === "addShapeFromToolbox") {
e.component.getItems().forEach(function(item) {
// Removes a shape from the toolboxes if the chart contains a shape of this type
if (item.itemType === "shape" && item.type === e.args.shapeType)
e.allowed = false;
});
}
}
}Vue
<template>
<DxDiagram
id="diagram"
ref="diagram"
@request-edit-operation="onRequestEditOperation"
@option-changed="onOptionChanged">
</DxDiagram>
</template>
<script>
import DxDiagram from 'devextreme-vue/diagram';
var shapeCount = 0;
export default {
components: {
DxDiagram
},
methods: {
onOptionChanged(e) {
// Detects changes of the Diagram model
if (e.name === "hasChanges" && e.value) {
e.component.option("hasChanges", false);
var currentShapeCount = e.component.getItems().filter(function(item) {
return (item.itemType ==="shape")
}).length;
// Updates the toolbox and context toolbox if a shape was added or deleted
if (this.shapeCount !== currentShapeCount) {
this.shapeCount = currentShapeCount;
window.setTimeout(function() {
e.component.updateToolbox();
}, 0);
}
}
},
onRequestEditOperation(e) {
if (e.operation === "addShapeFromToolbox") {
e.component.getItems().forEach(function(item) {
// Removes a shape from the toolboxes if the chart contains a shape of this type
if (item.itemType === "shape" && item.type === e.args.shapeType)
e.allowed = false;
});
}
},
}
};
</script>React
import React from 'react';
import Diagram from 'devextreme-react/diagram';
var shapeCount;
class App extends React.Component {
constructor(props) {
super(props);
this.diagramRef = React.createRef();
this.onRequestEditOperation = this.onRequestEditOperation.bind(this);
this.onOptionChanged = this.onOptionChanged.bind(this);
}
onOptionChanged(e) {
// Detects changes of the Diagram model
if (e.name === "hasChanges" && e.value) {
e.component.option("hasChanges", false);
var currentShapeCount = e.component.getItems().filter(function(item) {
return (item.itemType ==="shape")
}).length;
// Updates the toolbox and context toolbox if a shape was added or deleted
if (this.shapeCount !== currentShapeCount) {
this.shapeCount = currentShapeCount;
window.setTimeout(function() {
e.component.updateToolbox();
}, 0);
}
}
}
onRequestEditOperation(e) {
if (e.operation === "addShapeFromToolbox") {
e.component.getItems().forEach(function(item) {
// Removes a shape from the toolboxes if the chart contains a shape of this type
if (item.itemType === "shape" && item.type === e.args.shapeType)
e.allowed = false;
});
}
}
render() {
return (
<Diagram id="diagram" ref={this.diagramRef} onRequestEditOperation={this.onRequestEditOperation} onOptionChanged={this.onOptionChanged}>
</Diagram>
);
}
}
export default App;See Also
Prohibit Moving Shapes Between Containers
The example below demonstrates how to prevent users from moving a shape from one container to another:
jQuery
$(function() {
var containerIds = {};
var diagram = $("#diagram").dxDiagram({
onRequestEditOperation: function(e) {
if (e.operation === "moveShape")
// Cancels the operation if a user moves a shape outside its container.
if (containerIds[e.args.shape.id] !== e.args.shape.containerId)
e.allowed = false;
},
onSelectionChanged: function(e) {
e.component.getItems().forEach(item => {containerIds[item.id] = item.containerId;});
},
}).dxDiagram("instance");
});Angular
app.component.html
app.component.ts
<dx-diagram #diagram id="diagram" (onSelectionChanged)="selectionChanged($event)" (onRequestEditOperation)="requestEditOperation($event)"> </dx-diagram>
import { Component, ViewChild} from '@angular/core';
import { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(DxDiagramComponent, { static: false }) diagram: DxDiagramComponent;
containerIds: any = {};
requestEditOperation(e) {
if (e.operation === "moveShape")
// Cancels the operation if a user moves a shape outside its container.
if (this.containerIds[e.args.shape.id] !== e.args.shape.containerId)
e.allowed = false;
}
selectionChanged(e) {
e.component.getItems().forEach(item => {
this.containerIds[item.id] = item.containerId;
});
}
}Vue
<template>
<DxDiagram
id="diagram"
ref="diagram"
@request-edit-operation="onRequestEditOperation"
@selection-changed="onSelectionChanged">
</DxDiagram>
</template>
<script>
import DxDiagram from 'devextreme-vue/diagram';
var containerIds = {};
export default {
components: {
DxDiagram
},
methods: {
onRequestEditOperation(e) {
if (e.operation === "moveShape")
// Cancels the operation if a user moves a shape outside its container.
if (containerIds[e.args.shape.id] !== e.args.shape.containerId)
e.allowed = false;
},
onSelectionChanged(e) {
e.component.getItems().forEach(item => {containerIds[item.id] = item.containerId;});
}
},
};
</script>React
import React from 'react';
import Diagram, from 'devextreme-react/diagram';
var containerIds = {};
class App extends React.Component {
constructor(props) {
super(props);
this.diagramRef = React.createRef();
this.onRequestEditOperation = this.onRequestEditOperation.bind(this);
this.onSelectionChanged = this.onSelectionChanged.bind(this);
}
onRequestEditOperation(e) {
if (e.operation === "moveShape")
// Cancels the operation if a user moves a shape outside its container.
if (containerIds[e.args.shape.id] !== e.args.shape.containerId)
e.allowed = false;
}
onSelectionChanged(e) {
e.component.getItems().forEach(item => {containerIds[item.id] = item.containerId;});
}
render() {
return (
<Diagram id="diagram" ref={this.diagramRef} onRequestEditOperation={this.onRequestEditOperation} onSelectionChanged={this.onSelectionChanged}>
</Diagram>
);
}
}
export default App;Customize Shape Collection in the Context Toolbox
The following example demonstrates how to hide shapes in the context toolbox depending on the connector's start node type:
jQuery
$(function() {
var currentShapeId;
var diagram = $("#diagram").dxDiagram({
onRequestEditOperation: function(e) {
if (e.operation === "changeConnection" && e.args.connector)
// Gets the connector's start node identifier
this.currentShapeId = e.args.connector.fromId;
if (e.operation === "addShapeFromToolbox") {
// Gets the connector's start node type
var currentShape = e.component.getItemById(this.currentShapeId);
if (e.args.shapeType === "terminator")
// If the connector's start node type is "decision"
if (currentShape && currentShape.type === "decision")
// Hides the "terminator" shape in the context toolbox
e.allowed = false;
}
},
contextToolbox: {
enabled: true,
shapeIconsPerRow: 3,
shapes: [ "process", "decision", "terminator" ],
},
})
.dxDiagram("instance");
});Angular
app.component.html
app.component.ts
<dx-diagram #diagram id="diagram" (onRequestEditOperation)="requestEditOperation($event)">
<dxo-context-toolbox [enabled]="true" [shapes]='["process", "decision", "terminator"]' [shapeIconsPerRow]="3">
</dxo-context-toolbox>
</dx-diagram>
import { Component, ViewChild} from '@angular/core';
import { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(DxDiagramComponent, { static: false }) diagram: DxDiagramComponent;
currentShapeId : number;
requestEditOperation(e) {
if (e.operation === "changeConnection" && e.args.connector)
// Gets the connector's start node identifier
this.currentShapeId = e.args.connector.fromId;
if (e.operation === "addShapeFromToolbox") {
// Gets the connector's start node type
var currentShape = e.component.getItemById(this.currentShapeId);
if (e.args.shapeType === "terminator")
// If the connector's start node type is "decision"
if (currentShape && currentShape.type === "decision")
// Hides the "terminator" shape in the context toolbox
e.allowed = false;
}
}
}Vue
<template>
<DxDiagram
id="diagram"
ref="diagram"
@request-edit-operation="onRequestEditOperation">
<DxContextToolbox
:shape-icons-per-row="3"
:width="100"
:shapes="['process', 'decision', 'terminator']"
/>
</DxDiagram>
</template>
<script>
import { DxDiagram, DxContextToolbox} from 'devextreme-vue/diagram';
var currentShapeId;
export default {
components: {
DxDiagram, DxContextToolbox
},
methods: {
onRequestEditOperation(e) {
if (e.operation === "changeConnection" && e.args.connector)
// Gets the connector's start node identifier
this.currentShapeId = e.args.connector.fromId;
if (e.operation === "addShapeFromToolbox") {
// Gets the connector's start node type
var currentShape = e.component.getItemById(this.currentShapeId);
if (e.args.shapeType === "terminator")
// If the connector's start node type is "decision"
if (currentShape && currentShape.type === "decision")
// Hides the "terminator" shape in the context toolbox
e.allowed = false;
}
}
}
};
</script>React
import React from 'react';
import Diagram, { ContextToolbox,} from 'devextreme-react/diagram';
var currentShapeId;
class App extends React.Component {
constructor(props) {
super(props);
this.diagramRef = React.createRef();
this.onRequestEditOperation = this.onRequestEditOperation.bind(this);
}
onRequestEditOperation(e) {
if (e.operation === 'changeConnection' && e.args.connector)
// Gets the connector's start node identifier
this.currentShapeId = e.args.connector.fromId;
if (e.operation === 'addShapeFromToolbox') {
// Gets the connector's start node type
var currentShape = e.component.getItemById(this.currentShapeId);
if (e.args.shapeType === 'terminator')
// If the connector's start node type is "decision"
if (currentShape && currentShape.type === 'decision')
// Hides the "terminator" shape in the context toolbox
e.allowed = false;
}
}
render() {
return (
<Diagram id="diagram" ref={this.diagramRef} onRequestEditOperation={this.onRequestEditOperation} >
<ContextToolbox shapeIconsPerRow={3} width={100} shapes={['process', 'decision', 'terminator']}>
</ContextToolbox>
</Diagram>
);
}
}
export default App;Feedback