This article is an example of the Kendo Diagram Component with a double click event handler. The framework used is the Kendo UI for jQuery. This example builds upon the Kendo Diagram Example. After we were tasked to create a link graph, we must now handle a double click event on a shape. Here are the requirements:
- Show the shape ID and Name when a shape is double clicked.
- Zoom level must not change on double click.
Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.
The two main points here are:
- By default, Kendo Diagram zooms in when we double click. So we capture the event in
zoomStartand prevent it from propagating. - Kendo Diagram does not provide a double click event API. So we had to bind it manually using jQuery and find the shape based on its position.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Diagram Example</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="diagram"></div>
<script>
var $diagram = $('#diagram');
var diagram = $diagram.kendoDiagram({
editable: {
remove: false,
resize: false,
tools: false,
},
zoomRate: 0.5,
zoomMax: 1.5,
zoomMin: 0.6,
dataSource: [
{id:'king', name:'King'},
{id:'queen', name:'Queen'},
{id:'bishop', name:'Bishop'},
],
connectionsDataSource:[
{from:'king', to:'queen', label: '10%'},
{from:'king', to:'bishop', label: '40%'},
{from:'queen', to:'bishop', label: '55%'},
],
layout: {
type: 'force',
nodeDistance: 200,
},
shapeDefaults: {
type: 'circle',
content: {
template: '#= name #'
},
width: 70,
height: 70,
hover: {
fill: 'Orange'
},
editable: {
connect: false,
tools: false,
},
},
connectionDefaults: {
type: 'polyline',
editable: false,
content:{
template: '#= label#'
}
},
zoomStart: function(e) {
if (e.meta.type === 'doubleTap') {
e.preventDefault();
}
}
}).data('kendoDiagram');
$diagram.unbind('dblclick');
$diagram.bind('dblclick', function(e) {
var position = diagram.documentToModel({
x: e.pageX,
y: e.pageY,
});
var targetShape = shapeByPosition(position);
if (targetShape) {
alert(targetShape.dataItem.id + ': ' +
targetShape.dataItem.name);
}
});
function shapeByPosition(position) {
var shapes = diagram.shapes;
for (let i = 0; i < shapes.length; i++) {
var shape = shapes[i];
if (shape.bounds().contains(position)) {
return shape;
}
}
}
</script>
</body>
</html>
Open the HTML file in a browser and you should see an output similar to the one shown below.
Kendo Diagram Double Click Example
No comments:
Post a Comment