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>
@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