Pan when dragging shapes in Diagram
Environment
Product | Progress® Kendo UI® Diagram for jQuery |
Created with Version | 2017.3 1026 |
Description
I have a large diagram that I would like to pan the viewport when a user drags a shape onto/past a visible boundary. Do you have any ideas on how I might go about adding this feature to the diagram?
Solution
- Add a handler to the
drag
event -
Use the current pan and add the new point dependent on the direction in which the dragging is taking place
drag: function (e) { var selection = this.boundingBox(e.shapes); var mTLPoint = new kendo.dataviz.diagram.Point(selection.x, selection.y); var mBRPoint = new kendo.dataviz.diagram.Point((selection.x + selection.width, (selection.y + selection.height)); var vTLPoint = this.modelToView(mTLPoint); var vBRPoint = this.modelToView(mBRPoint); var vVPPoint = this.modelToView(new kendo.dataviz.diagram.Point(this.viewport(.x, this.viewport().y)); var vph = this.viewport().height; var vpw = this.viewport().width; var pan = this.pan(); if (vTLPoint.y <= 0) { // Pan up this.pan(this.pan().plus(new kendo.dataviz.diagram.Point(0, vTLPoint.y))); } if (vBRPoint.y >= vph) { // Pan down this.pan(pan.plus(new kendo.dataviz.diagram.Point(0, vBRPoint.y - vph))); } if (vTLPoint.x <= 0) { // Pan left this.pan(this.pan().plus(new kendo.dataviz.diagram.Point(vTLPoint.x, 0))); } if (vBRPoint.x >= vpw) { // Pan right this.pan(this.pan().plus(new kendo.dataviz.diagram.Point(vBRPoint.x - vpw, 0))); } }
<div id="example">
<div id="diagram"></div>
<script>
var data = [{
firstName: "Antonio",
lastName: "Moreno",
image: "antonio.jpg",
title: "Team Lead",
colorScheme: "#1696d3",
items: [{
firstName: "Elizabeth",
image: "elizabeth.jpg",
lastName: "Brown",
title: "Design Lead",
colorScheme: "#ef6944",
items: [{
firstName: "Ann",
lastName: "Devon",
image: "ann.jpg",
title: "UI Designer",
colorScheme: "#ef6944"
}]
}, {
firstName: "Diego",
lastName: "Roel",
image: "diego.jpg",
title: "QA Engineer",
colorScheme: "#ee587b",
items: [{
firstName: "Fran",
lastName: "Wilson",
image: "fran.jpg",
title: "QA Intern",
colorScheme: "#ee587b"
}]
}, {
firstName: "Felipe",
lastName: "Izquiedro",
image: "felipe.jpg",
title: "Senior Developer",
colorScheme: "#75be16",
items: [{
firstName: "Daniel",
lastName: "Tonini",
image: "daniel.jpg",
title: "Developer",
colorScheme: "#75be16"
}]
}]
}];
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
g.append(new dataviz.diagram.Rectangle({
width: 210,
height: 75,
stroke: {
width: 0
},
fill: {
gradient: {
type: "linear",
stops: [{
color: dataItem.colorScheme,
offset: 0,
opacity: 0.5
}, {
color: dataItem.colorScheme,
offset: 1,
opacity: 1
}]
}
}
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.firstName + " " + dataItem.lastName,
x: 85,
y: 20,
fill: "#fff"
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.title,
x: 85,
y: 40,
fill: "#fff"
}));
g.append(new dataviz.diagram.Image({
source: "https://demos.telerik.com/kendo-ui/content/dataviz/diagram/people/" + dataItem.image,
x: 3,
y: 3,
width: 68,
height: 68
}));
return g;
}
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: data,
schema: {
model: {
children: "items"
}
}
}),
layout: {
type: "layered"
},
shapeDefaults: {
visual: visualTemplate
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 2
}
},
drag: function (e) {
var selection = this.boundingBox(e.shapes);
var mTLPoint = new kendo.dataviz.diagram.Point(selection.x, selection.y);
var mBRPoint = new kendo.dataviz.diagram.Point((selection.x + selection.width), (selection.y + selection.height));
var vTLPoint = this.modelToView(mTLPoint);
var vBRPoint = this.modelToView(mBRPoint);
var vVPPoint = this.modelToView(new kendo.dataviz.diagram.Point(this.viewport().x, this.viewport().y));
var vph = this.viewport().height;
var vpw = this.viewport().width;
var pan = this.pan();
if (vTLPoint.y <= 0) {
// Pan up
this.pan(this.pan().plus(new kendo.dataviz.diagram.Point(0, vTLPoint.y)));
}
if (vBRPoint.y >= vph) {
// Pan down
this.pan(pan.plus(new kendo.dataviz.diagram.Point(0, vBRPoint.y - vph)));
}
if (vTLPoint.x <= 0) {
// Pan left
this.pan(this.pan().plus(new kendo.dataviz.diagram.Point(vTLPoint.x, 0)));
}
if (vBRPoint.x >= vpw) {
// Pan right
this.pan(this.pan().plus(new kendo.dataviz.diagram.Point(vBRPoint.x - vpw, 0)));
}
}
});
var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
}
$(document).ready(createDiagram);
</script>
</div>