Move Diagram Shapes with Arrow Keys
Environment
| Product | Progress® Kendo UI® Diagram for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I enable the Arrow keys to move the shapes of the Kendo UI for jQuery Diagram?
Solution
To achieve this behavior:
- Handle the
loadevent of the Diagram and check whether the selected item is a shape. - If the clicked object is a shape, assign a handler to the standard
keyPressevent of thewindowobject. - To move the shape depending on the pressed key, use the
bounds()method of theShape.
<div id="diagram" style="height: 250px"></div>
<script>
var Point = kendo.dataviz.diagram.Point;
$("#diagram").kendoDiagram({
layout: {
type: "tree",
subtype: "right"
},
shapes: [
{ id: "1" },
{ id: "2" }
],
connections: [
{
from: "1",
to: "2"
}
],
click: attachMoveHandler
});
function attachMoveHandler(e) {
var shape = e.item;
if (shape instanceof kendo.dataviz.diagram.Shape) {
if (!shape.from) {
$(window).keydown(moveShape);
}
}
}
function moveShape(event) {
if (event.keyCode > 40 || event.keyCode < 37)
return;
var diagram = $("#diagram").getKendoDiagram();
var shapes = diagram.select();
if (event.keyCode && shapes) {
for (var i = 0; i < shapes.length; i++) {
var bounds = shapes[i].bounds();
var x = bounds.x;
var y = bounds.y;
switch (event.keyCode) {
case 37:
bounds.x = bounds.x - 5;
break;
case 39:
bounds.x = bounds.x + 5;
break;
case 38:
bounds.y = bounds.y - 5;
break;
case 40:
bounds.y = bounds.y + 5;
break;
}
shapes[i].bounds(bounds);
}
}
}
</script>