You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: samples/FamilyConnectorsVisualization.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,6 +10,7 @@ This is definitely extreme example of family relations, but the fact that famDia
10
10
This visualization is better, but it shows another problem. The big number of parent and children elements does not let to see them together, so in order to make diagram more compact widget API supports clustering of nodes into matrix, so that way they occupy least space possible. In order to enable this layout option set `enableMatrixLayout` to `true`.
Another typical problem in connectors visualization is excessive grand parents relations. It is situation when item has direct relation to parent, grand parent and grand grand parent. Usually when we draw family diagram we are more interested to show order of dependencies over actual relations. We know that the great-grandparent precedes the grandparent, the grandparent precedes the parent, the parent precedes the child node. So this precedence defines the indirect relation between child node and grand-grandparent. So direct relation visualization between child node and its grand parents can be omitted out of diagram and replaced with dynamic annotations. Look at the following example where every child references all preceding parents:
15
16
@@ -18,5 +19,6 @@ Another typical problem in connectors visualization is excessive grand parents r
18
19
As you may see control already eliminated a lot of connections via making bundles, so we don't see every connection between nodes, but still this diagram has a lot of connections to trace. In order to hide direct connections to grand parents set option `hideGrandParentsConnectors` to `true` and get following layout:
So we got quite clean relations diagram between nodes. We still have all relations in place, the only difference is that grand parents connections go through actual parents, so we need to visualize them dynamically, as we navigate around our diagram we can highlight all current node immediate parents and children with Connector Path Annotations and set dynamically custom Item Template for them.
Copy file name to clipboardExpand all lines: samples/FirstFamilyChart.md
+2-1Lines changed: 2 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,4 +12,5 @@ The main difference of family diagram compared to organizational chart is suppor
12
12
Family diagram provides some features specific to multi-parent layout, for example it supports in-layout "Labels cascades" over connections between parents and children.
Basic Primitives library provides plugins for [PDFkit](www.PDFkit.org) (MIT License) - it is JavaScript PDF generation library for NodeJS and client side rendering in browser.
125
+
126
+
PDFKit library provides the most complete experience for rendering documents PDF format. Basic Primitves library implements additional plugins for PDFkit to render Diagrams on PDF page:
* primitives.pdf.famdiagram.Plugin - Family Diagram PDFkit Plugin
129
+
130
+
Basically PDFkit Plugins are stand alone products, they share many API options with Basic Primitives Controls, but they are completly deprived of interactivity and their rendering engine uses regular vector graphics and text elements of PDFkit libarary API, see PDFkit site for reference.
131
+
132
+
The following example is minimal code needed to create new empty PDF file on client side in browser using PDFkit library
133
+
134
+
```JavaScript
135
+
constPDFDocument=require('pdfkit');
136
+
constblobStream=require('blob-stream');
137
+
138
+
// create a document the same way as above
139
+
constdoc=newPDFDocument;
140
+
141
+
// pipe the document to a blob
142
+
conststream=doc.pipe(blobStream());
143
+
144
+
// add your content to the document here, as usual
145
+
146
+
// get a blob when you're done
147
+
doc.end();
148
+
stream.on('finish', function() {
149
+
// get a blob you can do whatever you like with
150
+
constblob=stream.toBlob('application/pdf');
151
+
152
+
// or get a blob URL for display in the browser
153
+
consturl=stream.toBlobURL('application/pdf');
154
+
iframe.src= url;
155
+
});
156
+
```
157
+
158
+
Basic Primitives Organizational Chart PDFkit plugin is just a rendering function, which renders diagram using PDFkit API methods:
159
+
160
+
```JavaScript
161
+
var firstOrganizationalChartSample =primitives.pdf.orgdiagram.Plugin({
var size =firstOrganizationalChartSample.draw(doc, 100, 150);
190
+
```
191
+
192
+
Pay attention that `draw` method returns actual `size` of the rendered diagram. It is needed to calculate offset in order to place other elements of PDF document underneath of it.
193
+
194
+
PDF document is very easy to scale to make it fit to paper size or split it into multiple pages. So we don't need to make PDF page fit into some fixed predefined paper size, but in order to avoid diagram being cut by PDF page boundaries we have to measure its size first and then create PDF page of approapriate size.
195
+
196
+
```JavaScript
197
+
var sampleSize =samfirstOrganizationalChartSampleple3.getSize();
198
+
```
199
+
200
+
`getSize` method returns diagram size, so we can create new PDF document big enough to accomodate our diagram:
201
+
202
+
```JavaScript
203
+
var doc =newPDFDocument({ size: [sampleSize.width+100, sampleSize.height+150] });
204
+
```
205
+
206
+
Plugin draws diagram in current PDFkit document layout transformation context, so developer can rotate, translate and scale diagrams on PDFkit document page.
207
+
208
+
Plugins are part of the Basic Primitives distribution assembly
Copy file name to clipboardExpand all lines: samples/ItemTemplates.md
+79-4Lines changed: 79 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -63,7 +63,7 @@ result.itemTemplate = ["div",
63
63
```
64
64
65
65
## Configuration Classes
66
-
When we define node templates we can define Content Template, Cursor Template and Highlight Templates in one configuration object. This make sense since if we decide to customize cursor or highlight templates most likely we are going to make them item template specific. At the same time control does not require all 3 of them to be defined. If cursor or highlight templates properties are not set in template configuration object then control uses internal default template for all of them them. Generally all 3 templates can be set to null, so default templates are gonna be used by control. See template configuration properties in the following classes:
66
+
When we define node templates we can define Content Template, Cursor Template and Highlight Templates in one configuration object. This make sense since if we decide to customize cursor or highlight templates most likely we are going to make them item template specific. At the same time control does not require all 3 of them to be defined. If cursor or highlight templates properties are not set in template configuration object then control uses internal default template for all of them. Generally all 3 templates can be set to null, so default templates are going to be used by control. See template configuration properties in the following classes:
67
67
68
68
*`primitives.orgdiagram.ItemConfig`
69
69
*`primitives.famdiagram.Config`
@@ -120,15 +120,90 @@ Every template configuration object has name property, it is being used to refer
120
120
121
121
See following example of templates usage:
122
122
123
+
## PDF Templates
124
+
125
+
PDFKit Plugins use the same template objects with one major exception. All rendering is done using PDFKit API:
See [PDFKit](http://pdfkit.org/) site for more details.
132
+
133
+
Basic Primitives PDFkit Plugins have no HTML or browsers specific dependencies, they share API options with their complimentary UI controls. The major API difference is that they have no UI events and rendering mechanism refit to use PDFkit document API methods. The following sample shows usage of `onTemplateRender` event handler, which receives `doc` reference to PDFkit `PDFDocument` instance and node `position` in PDF document coordinates:
134
+
135
+
Basically developer is free to render any content in node's position, the following sample renders frame, photo, title and PDF specific link annotation, which is clickable in PDF.
136
+
137
+
```JavaScript
138
+
functiononTemplateRender(doc, position, data) {
139
+
var itemConfig =data.context;
140
+
141
+
if (data.templateName=="contactTemplate") {
142
+
var contentSize =newprimitives.common.Size(220, 108);
In order to avoid diagram cursor positioning and layout when user clicks on reference add 'stopPropogation' to mouse click event handler of the reference's label.
202
+
In order to avoid diagram cursor positioning and layout when user clicks on reference add 'stopPropagation' to mouse click event handler of the reference's label.
128
203
129
204
```JavaScript
130
205
readmore.addEventListener("click", function (e) {
131
-
/* Block mouse click propogation in order to avoid layout updates before server postback*/
206
+
/* Block mouse click propagation in order to avoid layout updates before server postback*/
132
207
primitives.common.stopPropagation(e);
133
208
});
134
209
```
@@ -137,7 +212,7 @@ In order to avoid diagram cursor positioning and layout when user clicks on refe
Chart supports selected items collection on its API, so checkbox element is nessary part of control's functionality. If you want to place it inside of item itemplate instead of having it shown outside as decorator of elemnt boundaries, you have to add `bp-selectioncheckbox` to your checkbox `class` style property.
215
+
Chart supports selected items collection on its API, so checkbox element is necessary part of control's functionality. If you want to place it inside of item template instead of having it shown outside as decorator of element boundaries, you have to add `bp-selectioncheckbox` to your checkbox `class` style property.
0 commit comments