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
load
event 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
keyPress
event of thewindow
object. - 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>