-
Notifications
You must be signed in to change notification settings - Fork 16
Expand file tree
/
Copy pathFamilyMatrix.html
More file actions
85 lines (72 loc) · 4.05 KB
/
FamilyMatrix.html
File metadata and controls
85 lines (72 loc) · 4.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html style="height: 95%">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Family Chart Matrix</title>
<script type="text/javascript" src="../../pdfkitsamples.js"></script>
<script type="text/javascript" src="../../primitives.js"></script>
<script type='text/javascript'>
var control;
var timer = null;
var photos = pdfkitsamples.photos;
var PDFDocument = pdfkitsamples.PDFDocument;
var blobStream = pdfkitsamples.blobStream;
document.addEventListener('DOMContentLoaded', function () {
var sampleChart = primitives.FamDiagramPdfkit({
items: [
{ id: 1, parents: [], title: "Corp 1", label: "Corp 1", description: "Parent 1", image: photos.p },
{ id: 2, parents: [], title: "Corp 2", label: "Corp 2", description: "Parent 2", image: photos.p },
{ id: 101, parents: [], title: "Corp 3", label: "Corp 3", description: "Parent 3", image: photos.p },
{ id: 102, parents: [], title: "Corp 4", label: "Corp 4", description: "Parent 4", image: photos.p },
{ id: 3, parents: [1, 2, 101, 102], title: "Sibling 1", label: "Sibling 1", description: "Sibling 1", image: photos.s },
{ id: 4, parents: [1, 2, 101, 102], title: "Sibling 2", label: "Sibling 2", description: "Sibling 2", image: photos.s },
{ id: 5, parents: [1, 2, 101, 102], title: "Sibling 3", label: "Sibling 3", description: "Sibling 3", image: photos.s },
{ id: 6, parents: [1, 2, 101, 102], title: "Sibling 4", label: "Sibling 4", description: "Sibling 4", image: photos.s },
{ id: 7, parents: [1, 2, 101, 102], title: "Sibling 5", label: "Sibling 5", description: "Sibling 5", image: photos.s },
{ id: 8, parents: [1, 2, 101, 102], title: "Sibling 6", label: "Sibling 6", description: "Sibling 6", image: photos.s },
{ id: 9, parents: [1, 2, 101, 102], title: "Sibling 7", label: "Sibling 7", description: "Sibling 7", image: photos.s },
{ id: 10, parents: [3, 4, 5, 6, 7, 8, 9], title: "Grand Child 1", label: "Grand Child 1", description: "Grand Child 1", image: photos.c },
{ id: 11, parents: [3, 4, 5, 6, 7, 8, 9], title: "Grand Child 2", label: "Grand Child 2", description: "Grand Child 2", image: photos.c },
{ id: 12, parents: [3, 4, 5, 6, 7, 8, 9], title: "Grand Child 3", label: "Grand Child 3", description: "Grand Child 3", image: photos.c },
{ id: 13, parents: [3, 4, 5, 6, 7, 8, 9], title: "Grand Child 4", label: "Grand Child 4", description: "Grand Child 4", image: photos.c }
],
cursorItem: 1,
linesWidth: 1,
linesColor: "black",
hasSelectorCheckbox: primitives.Enabled.False,
hideGrandParentsConnectors: true,
normalLevelShift: 20,
dotLevelShift: 20,
lineLevelShift: 20,
normalItemsInterval: 10,
dotItemsInterval: 10,
lineItemsInterval: 10,
arrowsDirection: primitives.GroupByType.Parents,
enableMatrixLayout: true,
minimumMatrixSize: 2,
maximumColumnsInMatrix: 4
});
// create a document and pipe to a blob
var sampleSize = sampleChart.getSize();
var doc = new PDFDocument({ size: [sampleSize.width + 100, sampleSize.height + 150] });
var stream = doc.pipe(blobStream());
doc.fontSize(25)
.text('Family Diagram Matrix Layout', 30, 30);
var size = sampleChart.draw(doc, 30, 60);
doc.restore();
doc.end();
stream.on('finish', function () {
var string = stream.toBlobURL('application/pdf');
document.getElementById("previewpanel").setAttribute("src", string);
});
});
</script>
</head>
<body style="height: 100%">
<div id="basicdiagram" style="width: 100%; height: 100%; border-style: none; border-width: 0px;">
<iframe id="previewpanel" type="application/pdf" width="100%" height="100%" frameborder="0"
style="position:relative;z-index:999">
</iframe>
</div>
</body>
</html>