Added screenshots to samples markdowns

Author: BasicPrimitives

package.json

@@ -9,14 +9,16 @@
     "src.primitives.jquery.compile": "compiler.jar --js=min\\primitives.jquery.latest.js --js_output_file=min\\primitives.jquery.min.js",
     "src.tests.merge": "node merge.js src.tests\\src.tests.json",
     "merge": "yarn src.primitives.merge && yarn src.primitives.compile && yarn src.primitives.jquery.merge && yarn src.primitives.jquery.compile && yarn src.tests.merge",
-    "apireference": "node apireference.js apireference.json"
+    "apireference": "node apireference.js apireference.json",
+    "screnshots": "node screenshots.js"
   },
   "dependencies": {
-    "eslint": "^5.15.1"
+    "eslint": "^5.15.1",
+    "puppeteer": "^1.20.0"
   },
   "description": "Basic Primitives Diagrams for JavaScript - data visualization components library that implements organizational chart and multi-parent dependency diagrams, contains implementations of JavaScript Controls and PDF rendering plugins.",
   "repository": {
     "type": "git",
     "url": "https://github.com/BasicPrimitives/javascript"
   }
-}
+}

samples/AdviserAndAssistantItemTypes.md

@@ -23,11 +23,15 @@ Use `ItemConfig.adviserPlacementType` option to place adviser or assistant on th
 [JavaScript](javascript.controls/CaseAdviserAndAssistantItemTypes.html)
 [JQuery](jquery.widgets/CaseAdviserAndAssistantItemTypes.html)
 
+![Screenshot](images/screenshots/CaseAdviserAndAssistantItemTypes.png)
+
 ## Sub Adviser & Sub Assistant item types
 
 Sub Adviser & Sub Assistant item types are variations of regular Adviser & Assistant types. The only difference is they are shift down one level relative to their parents, so they are connected by their top side to the hierarchy.
 
 Use `ItemConfig.adviserPlacementType` option to place them on the left or right side of parent's hierarchy as well.
 
 [JavaScript](javascript.controls/CaseSubAdviserAndSubAssistantItemTypes.html)
-[JQuery](jquery.widgets/CaseSubAdviserAndSubAssistantItemTypes.html)
+[JQuery](jquery.widgets/CaseSubAdviserAndSubAssistantItemTypes.html)
+
+![Screenshot](images/screenshots/CaseSubAdviserAndSubAssistantItemTypes.png)

samples/Buttons.md

@@ -5,4 +5,6 @@ Organizational chart provides simple API to create custom user buttons. They are
 Buttons can be customized per item template. See Item template example in this section.
 
 [JavaScript](javascript.controls/CaseButtonsPanel.html)
-[JQuery](jquery.widgets/CaseButtonsPanel.html)
+[JQuery](jquery.widgets/CaseButtonsPanel.html)
+
+![Screenshot](images/screenshots/CaseButtonsPanel.png)

samples/ChildrenLayout.md

@@ -6,4 +6,6 @@ Children Placement Layout can be defined individually per item or globally for a
 * maximumColumnsInMatrix - by default children in matrix are shaped into square, in order to form them into rectangular shape you have to limit maximum number of columns in matrix, so rectangular shape would grow vertically.
 
 [JavaScript](javascript.controls/CaseChildrenPlacementType.html)
-[JQuery](jquery.widgets/CaseChildrenPlacementType.html)
+[JQuery](jquery.widgets/CaseChildrenPlacementType.html)
+
+![Screenshot](images/screenshots/CaseChildrenPlacementType.png)

samples/ConnectorAnnotation.md

@@ -3,4 +3,6 @@
 Connector annotation is on screen direct connection line between two nodes of diagram. It supports simple conflict resolution, if multiple connections defined between the same pair of nodes, control offsets them and draws them in parallel. The following sample demonstrates connection annotation drawn in offbeat style, this way connection annotation should not overlap diagrams base connection lines:
 
 [JavaScript](javascript.controls/CaseConnectorAnnotation.html)
-[JQuery](jquery.widgets/CaseConnectorAnnotation.html)
+[JQuery](jquery.widgets/CaseConnectorAnnotation.html)
+
+![Screenshot](images/screenshots/CaseConnectorAnnotation.png)

samples/CursorTemplate.md

@@ -13,6 +13,8 @@ The following example demonstrates how to create Bootstrap vertical buttons grou
 
 [JavaScript](bootstrap.styles/CaseCursorTemplateAndTwitterBootstrap.html)
 
+![Screenshot](images/screenshots/CaseCursorTemplateAndTwitterBootstrap.png)
+
 ## Custom cursor template border
 This example demonstrates how to create custom cursor border color and tag element.
 
@@ -23,9 +25,13 @@ The following example demonstrates how to create custom cursor template:
 [JavaScript](javascript.controls/CaseCursorTemplate.html)
 [JQuery](jquery.widgets/CaseCursorTemplate.html)
 
+![Screenshot](images/screenshots/CaseCursorTemplate.png)
+
 ## Cursor template having item specific context buttons
 
 This example demonstrates how to create item specific context buttons using cursor template. Ideally we have to create individual template for every item type and render buttons depending on template name, for simplicity we added an extra property called buttonsType to every item and use it to render different sets of buttons in cursor. This case is really rare and means that display collection of buttons depends on large set of items options.
 
 [JavaScript](javascript.controls/CaseButtonsInCursorTemplate.html)
-[JQuery](jquery.widgets/CaseButtonsInCursorTemplate.html)
+[JQuery](jquery.widgets/CaseButtonsInCursorTemplate.html)
+
+![Screenshot](images/screenshots/CaseButtonsInCursorTemplate.png)

samples/CustomLayoutWithInvisibleItems.md

@@ -8,9 +8,13 @@ See custom item types, children layout and inactive items samples as well.
 [JavaScript](javascript.controls/CaseCustomLayoutWithInvisibleItems.html)
 [JQuery](jquery.widgets/CaseCustomLayoutWithInvisibleItems.html)
 
+![Screenshot](images/screenshots/CaseCustomLayoutWithInvisibleItems.png)
+
 ## Skipped Levels
 
 Invisible items can be used to skip levels in organizational chart. This is actually workaround, invisible items occupy space, so they can be used to shift children items down one level relative to their parents. See primitives.orgdiagram.ItemConfig.isVisible option.
 
 [JavaScript](javascript.controls/CaseSkippedLevels.html)
 [JQuery](jquery.widgets/CaseSkippedLevels.html)
+
+![Screenshot](images/screenshots/CaseSkippedLevels.png)

samples/DiagramSizing.md

@@ -22,10 +22,14 @@ In order to place diagram inside page article and make it auto expand to accommo
 
 Use following options to constrain widget auto size:
 
-* autoSizeMinimum - it limits minimal size of diagram, so if it is empty then you are going to see empty area of this size.
-* autoSizeMaximum - does not allow to grow widget beyond this size. Set maximum size to some value if you need to avoid humongous diagram on your page.
+* `autoSizeMinimum` - it limits minimal size of diagram, so if it is empty then you are going to see empty area of this size.
+* `autoSizeMaximum` - does not allow to grow widget beyond this size. Set maximum size to some value if you need to avoid humongous diagram on your page.
 
-for example in order to set widget minimal size: autoSizeMinimum = new primitives.common.Size(800, 600);
+for example following code sets widget's minimal size:
+
+``` JavaScript
+autoSizeMinimum = new primitives.common.Size(800, 600);
+```
 
 [JavaScript](javascript.controls/CaseAutoSize.html)
-[JQuery](jquery.widgets/CaseAutoSize.html)
+[JQuery](jquery.widgets/CaseAutoSize.html)

samples/FamilyChartItemsOrdering.md

@@ -15,6 +15,10 @@ Family Items Ordering Sample
 
 [JavaScript](javascript.controls/CaseFamilyChartItemsOrdering.html)
 
+![Screenshot](images/screenshots/CaseFamilyChartItemsOrdering.png)
+
 ## Multiple Families Ordering Sample
 
-[JavaScript](javascript.controls/CaseMultipleFamiliesOrdering.html)
+[JavaScript](javascript.controls/CaseMultipleFamiliesOrdering.html)
+
+![Screenshot](images/screenshots/CaseMultipleFamiliesOrdering.png)

samples/FamilyConnectorsVisualization.md

@@ -7,18 +7,26 @@ This is definitely extreme example of family relations, but the fact that famDia
 
 [JavaScript](javascript.controls/CaseFamilyChartRelations.html)
 
+![Screenshot](images/screenshots/CaseFamilyChartRelations.png)
+
 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`.
 
 [JavaScript](javascript.controls/CaseFamilyChartMatrixLayout.html)
 [PDFKit](pdfkit.plugins/FamilyMatrix.html)
 
+![Screenshot](images/screenshots/CaseFamilyChartMatrixLayout.png)
+
 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:
 
 [JavaScript](javascript.controls/CaseFamilyChartGrandParentsRelations.html)
 
+![Screenshot](images/screenshots/CaseFamilyChartGrandParentsRelations.png)
+
 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:
 
 [JavaScript](javascript.controls/CaseFamilyChartHiddenGrandParentsRelations.html)
 [PDFKit](pdfkit.plugins/HideGrandParentsConnectors.html)
 
+![Screenshot](images/screenshots/CaseFamilyChartHiddenGrandParentsRelations.png)
+
 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.