Skip to content

Instantly share code, notes, and snippets.

@Orbifold

Orbifold/Diagram-pdf

Last active August 29, 2015 14:07
Show Gist options
  • Save Orbifold/edcf7dfcbf7b750812b4 to your computer and use it in GitHub Desktop.
Save Orbifold/edcf7dfcbf7b750812b4 to your computer and use it in GitHub Desktop.
Download ZIP
Kendo diagram, PDF and drawing
Raw
Diagram-pdf
<!DOCTYPE html>
<html>
<head>
<title>Kendo Diagramming</title>
<link rel="stylesheet/less" type="text/css" href="../../styles/web/kendo.common.less"/>
<link rel="stylesheet/less" type="text/css" href="../../styles/web/kendo.default.less"/>
<link rel="stylesheet/less" type="text/css" href="../../styles/dataviz/kendo.dataviz.less"/>
<link rel="stylesheet/less" type="text/css" href="../../styles/dataviz/kendo.dataviz.default.less"/>
<script type="text/javascript" src="../../demos/mvc/content/shared/js/less.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="../require.js"></script>
<script>
require.config({
baseUrl: "../../src/"
});
</script>
</head>
<body>
<button id="drawButton">Draw</button>
<button id="pdfButton">PDF</button>
<div id="diagram"></div>
<script>
require([
"jquery.min", "kendo.dataviz.diagram", "kendo.menu", "kendo.splitter",
"kendo.panelbar", "kendo.colorpicker", "kendo.dropdownlist", "kendo.numerictextbox" ], function () {
var Shape = kendo.dataviz.diagram.Shape,
Connection = kendo.dataviz.diagram.Connection,
Rect = kendo.dataviz.diagram.Rect;
var drawing = kendo.dataviz.drawing;
var diagram = $("#diagram").kendoDiagram({
theme: "default",
shapeDefaults: {
width: 120,
height: 80
}
//select: diagramSelect
}).getKendoDiagram();
var s1 = diagram.addShape({
x: 100,
y: 100,
content: {text: "Agraphia"}
});
var s2 = diagram.addShape({
x: 500,
y: 100,
content: {text: "Bradykinesia"}
});
var con = diagram.connect(s1, s2);
kendo.pdf.defineFont({
"Verdana": "./Verdana/Verdana.ttf",
"Verdana|Bold": "./Verdana/Verdana_Bold.ttf",
"Verdana|Bold|Italic": "./Verdana/Verdana_Bold_Italic.ttf",
"Verdana|Italic": "./Verdana/Verdana_Italic.ttf"
});
function container() {
$(".surface").remove();
return $("<div class='surface' style='position: absolute; background: white; right: 1em; top: 1em; bottom: 1em; width: 600px'></div>").appendTo(document.body);
}
window.draw = function draw(sel, type) {
var el = $(sel)[0];
console.time("drawing");
kendo.dataviz.drawing.drawDOM(el).done(function(root){
console.timeEnd("drawing");
var surface = kendo.dataviz.drawing.Surface.create(container(), { type: type || "svg" });
surface.draw(root);
});
}
window.pdf = function pdf(sel) {
var el = $(sel)[0];
console.time("pdf");
kendo.dataviz.drawing.drawDOM(el).done(function(root){
root.options.set("pdf", {
paperSize: "auto",
margin: {
left: "10mm",
top: "10mm",
right: "10mm",
bottom: "10mm"
}
});
kendo.dataviz.drawing.pdf.saveAs(root, "kendo-diagram.pdf", "http://kendo.local:7569/", function(){
console.timeEnd("pdf");
});
});
};
$("#drawButton").click(function () {
draw("#diagram","svg");
});
$("#pdfButton").click(function () {
pdf("#diagram");
});
});
</script>
</body>
</html>
@mishoo
Copy link

mishoo commented Oct 18, 2014

I'm not familiar with how diagrams work currently, but seems in this case drawDOM is called to render an <svg> element, which isn't supported (perhaps drawHTML would be a better name, since we seriously only support HTML nodes ;-).

My assumption is that the diagrams are actually rendered in the browser via the Drawing API, in which case there's a more straightforward way to generate the PDF instead of drawDOM:

kendo.drawing.pdf.saveAs(group, "filename.pdf");

where group is a drawing.Group instance. Just figure out a way to get that group from the diagram object.

@Orbifold
Copy link
Author

How would one draw some snippet of HTML straight into an existing bit of SVG? That is, given an SVG Group, how to use the drawing API to parse/convert sone HTML and append it to the given SVG group?
In my case the Group would be somewhere inside the diagram shape and the HTML some DIV or HTML table for instance.

@mishoo
Copy link

mishoo commented Oct 25, 2014

@Orbifold something like this:

var el = $("<div>" + YOUR_HTML_CODE + "</div>").appendTo(document.body);
kendo.drawing.drawDOM(el).then(function(group){
    el.remove(); // remove the element from the DOM

    // group is an instance of drawing.Group
    // append it to whatever shapes you already have
});

@Orbifold
Copy link
Author

Needed to hack it like this to make it work:

$.when(svgVisual).then(
                        function (root) {

                            if (root.hasOwnProperty("children")) {
                                root.drawingContainer = function () {
                                    return this;
                                };
                                root.redraw = function () {

                                };
                                that.shapeVisual = root;
                            }

                            else
                                that.shapeVisual = root;

                            that.visual.append(that.shapeVisual);
                            that.updateBounds();

                        }
                    );

the svgVisual is either an SVG element or a deferred kendo.dataviz.drawing.drawDOM(something). Internally the redraw and drawContainer methods are called, hence the dummies.

Very happy it works, just not very elegant, is it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment