BasicPrimitives · BasicPrimitives · Oct 28, 2020 · Oct 28, 2020 · Oct 28, 2020
diff --git a/changelog.md b/changelog.md
@@ -1,7 +1,7 @@
 #### Version 5.9.1
 * Fixed frame placeholdder size
 #### Version 5.9.0
-* Add `showFrame`, `fameInnerPadding`, `frameOuterPadding` properties to `primitives.orgdiagram.Config` & `primitives.famdiagram.Config`
+* Added `showFrame`, `fameInnerPadding`, `frameOuterPadding` properties to `primitives.orgdiagram.Config` & `primitives.famdiagram.Config`
 * Modified callout annotation palacement for minimized nodes placed outside view port.
 * Fixed exception when `selectedItems` collection contains non existing items.
 * Fixed center on cursor in AutoSize mode

diff --git a/min/package.json b/min/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basicprimitives",
-  "version": "5.9.1",
+  "version": "5.9.2",
   "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.",
   "main": "primitives.latest.js",
   "scripts": {

diff --git a/min/primitives.latest.css b/min/primitives.latest.css
@@ -1,3 +1,6 @@
+.bp-scrollframe {
+	border: 1px dotted #dddddd;
+}
 .bp-item {
 	position: absolute;
 	overflow: hidden;

diff --git a/samples/SelectedItems.md b/samples/SelectedItems.md
@@ -1,13 +1,22 @@
 # Selected items & Check boxes
 Selected items is collection of item id's having checked their check boxes. Chart always shows selected items in full size form.  So this can be convenient for navigation as well in order to keep interesting items in full size. 
 
-Selected items can be used for example when we need to display cross functional working group in organization hierarchy or visualize large mail recipients list in organization by groups and seniority. Usually when number of people exceeds 10 it is hard to say who is enlisted in subscription except active participants.
+Selected items can be used when we need to display cross functional working group in organization hierarchy or visualize large mail recipients list in organization by groups and seniority. Usually when number of people exceeds 10 it is hard to say who is enlisted in subscription except active participants.
 
-Collection of primitives.orgdiagram.Config.selectedItems contains item id's. Widget notifies about changes in this collection with primitives.orgdiagram.Config.onSelectionChanged event.
+Collection of `primitives.orgdiagram.Config.selectedItems` contains item id's. Widget notifies about changes in this collection with primitives.`orgdiagram.Config.onSelectionChanged` event.
 
 Following example demonstrates how to programmatically select items in organizational chart  and get notified about changes in selection.
 
 [JavaScript](javascript.controls/CaseSelectedItems.html)
 [JQuery](jquery.widgets/CaseSelectedItems.html)
 
-![Screenshot](images/screenshots/CaseSelectedItems.png)
+![Screenshot](images/screenshots/CaseSelectedItems.png)
+
+# Showing selected items on the frame
+
+Control displays selected items placed outside control's view area on the frame around around control in form of markers. Control uses the same marker propeties defined by item templates for markers in the diagram. Markers placement on the frame indicates direction towards selected item outside control view area. Frame takes as much space as the largest marker in the diagram. Use `fameInnerPadding` and `frameOuterPadding` `Config` properties to add extra padding around frame markers.
+
+[JavaScript](javascript.controls/CaseShowFrame.html)
+[JQuery](jquery.widgets/CaseShowFrame.html)
+
+![Screenshot](images/screenshots/CaseShowFrame.png)
diff --git a/samples/images/screenshots/CaseShowFrame.png b/samples/images/screenshots/CaseShowFrame.png
diff --git a/samples/javascript.controls/CaseShowFrame.html b/samples/javascript.controls/CaseShowFrame.html
@@ -1,120 +1,123 @@
-<!DOCTYPE html> 
+<!DOCTYPE html>
 <html>
+
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<title>Selected Items Frame</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>Selected Items Frame</title>
 
-	<!-- # include file="../../src.primitives/src.primitives.html"-->
-	<script type="text/javascript" src="../../min/primitives.min.js?5100"></script>
-	<link href="../../min/primitives.latest.css?2106" media="screen" rel="stylesheet" type="text/css" />
+  <!-- # include file="../../src.primitives/src.primitives.html"-->
+  <script type="text/javascript" src="../../min/primitives.min.js?5100"></script>
+  <link href="../../min/primitives.latest.css?2106" media="screen" rel="stylesheet" type="text/css" />
 
-	<script type="text/javascript">
-		var control,
-			minimizedItemShapeTypes = [
-				primitives.common.ShapeType.Rectangle,
-				primitives.common.ShapeType.Oval,
-				primitives.common.ShapeType.Triangle,
-				primitives.common.ShapeType.CrossOut,
-				primitives.common.ShapeType.Circle,
-				primitives.common.ShapeType.Rhombus,
-				primitives.common.ShapeType.Wedge,
-				primitives.common.ShapeType.FramedOval,
-				primitives.common.ShapeType.FramedTriangle,
-				primitives.common.ShapeType.FramedWedge,
-				primitives.common.ShapeType.FramedRhombus
-			],
-			shapeIndex = 0,
-			itemTitleColors = [
-				primitives.common.Colors.Red,
-				primitives.common.Colors.Green,
-				primitives.common.Colors.Navy,
-				primitives.common.Colors.Cyan
-			],
-			colorIndex = 0;
+  <script type="text/javascript">
+    var control,
+      minimizedItemShapeTypes = [
+        primitives.common.ShapeType.Rectangle,
+        primitives.common.ShapeType.Oval,
+        primitives.common.ShapeType.Triangle,
+        primitives.common.ShapeType.CrossOut,
+        primitives.common.ShapeType.Circle,
+        primitives.common.ShapeType.Rhombus,
+        primitives.common.ShapeType.Wedge,
+        primitives.common.ShapeType.FramedOval,
+        primitives.common.ShapeType.FramedTriangle,
+        primitives.common.ShapeType.FramedWedge,
+        primitives.common.ShapeType.FramedRhombus
+      ],
+      shapeIndex = 0,
+      itemTitleColors = [
+        primitives.common.Colors.Red,
+        primitives.common.Colors.Green,
+        primitives.common.Colors.Navy,
+        primitives.common.Colors.Cyan
+      ],
+      colorIndex = 0;
 
-		function getNextShapeType() {
-			var result = minimizedItemShapeTypes[shapeIndex];
-			shapeIndex+=1;
-			if(shapeIndex == minimizedItemShapeTypes.length) {
-				shapeIndex = 0;
-			}
-			return result;
-		}
+    function getNextShapeType() {
+      var result = minimizedItemShapeTypes[shapeIndex];
+      shapeIndex += 1;
+      if (shapeIndex == minimizedItemShapeTypes.length) {
+        shapeIndex = 0;
+      }
+      return result;
+    }
 
-		function getNextColor() {
-			var result = itemTitleColors[colorIndex];
-			colorIndex+=1;
-			if(colorIndex == itemTitleColors.length) {
-				colorIndex = 0;
-			}
-			return result;
-		}
+    function getNextColor() {
+      var result = itemTitleColors[colorIndex];
+      colorIndex += 1;
+      if (colorIndex == itemTitleColors.length) {
+        colorIndex = 0;
+      }
+      return result;
+    }
 
-		function getMarkerTemplate() {
-			var result = new primitives.orgdiagram.TemplateConfig();
-			result.name = "MarkerTemplate";
-			result.minimizedItemSize = new primitives.common.Size(8, 8);
-			result.highlightPadding = new primitives.common.Thickness(4, 4, 4, 4);
-			return result;
-		}
+    function getMarkerTemplate() {
+      var result = new primitives.orgdiagram.TemplateConfig();
+      result.name = "MarkerTemplate";
+      result.minimizedItemSize = new primitives.common.Size(8, 8);
+      result.highlightPadding = new primitives.common.Thickness(4, 4, 4, 4);
+      return result;
+    }
 
-		document.addEventListener('DOMContentLoaded', function () {
-			var options = new primitives.orgdiagram.Config();
+    document.addEventListener('DOMContentLoaded', function () {
+      var options = new primitives.orgdiagram.Config();
 
-			var rootItem = {
-						id: 0,
-						parent: null,
-						title: "Title 0",
-						description: "Description",
-						image: "../images/photos/a.png",
-						minimizedItemShapeType: (getNextShapeType()),
-						itemTitleColor: (getNextColor())
-					};
-			var levelItems = [rootItem];			
-			var items = [rootItem];
-			var id = 1;
-			for(var levelIndex  = 0; levelIndex < 4; levelIndex+=1) {
-				var newLevelItems = [];
-				for(var index = 0; index < levelItems.length; index+=1) {
-					var parent = levelItems[index];
-					for (var index2 = 0; index2 < 2; index2++) {
-						var newItem = {
-							id: ++id,
-							parent: parent.id,
-							title: id.toString() + " Title",
-							description: id.toString() + " Description",
-							image: "../images/photos/b.png",
-							minimizedItemShapeType: (getNextShapeType()),
-							itemTitleColor: (getNextColor())
-						};
-						items.push(newItem);
-						newLevelItems.push(newItem);
-					}
-				}
-				levelItems = newLevelItems;
-			}
+      var rootItem = {
+        id: 0,
+        parent: null,
+        title: "Title 0",
+        description: "Description",
+        image: "../images/photos/a.png",
+        minimizedItemShapeType: (getNextShapeType()),
+        itemTitleColor: (getNextColor())
+      };
+      var levelItems = [rootItem];
+      var items = [rootItem];
+      var id = 1;
+      for (var levelIndex = 0; levelIndex < 4; levelIndex += 1) {
+        var newLevelItems = [];
+        for (var index = 0; index < levelItems.length; index += 1) {
+          var parent = levelItems[index];
+          for (var index2 = 0; index2 < 2; index2++) {
+            var newItem = {
+              id: ++id,
+              parent: parent.id,
+              title: id.toString() + " Title",
+              description: id.toString() + " Description",
+              image: "../images/photos/b.png",
+              minimizedItemShapeType: (getNextShapeType()),
+              itemTitleColor: (getNextColor())
+            };
+            items.push(newItem);
+            newLevelItems.push(newItem);
+          }
+        }
+        levelItems = newLevelItems;
+      }
 
-			/* collect all ids */
-			var selectedItems = [];
-			for(var index = 0; index < items.length; index+=1) {
-				selectedItems.push(items[index].id);
-			}
+      /* collect all ids */
+      var selectedItems = [];
+      for (var index = 0; index < items.length; index += 1) {
+        selectedItems.push(items[index].id);
+      }
 
-			options.items = items;
-			options.cursorItem = 0;
-			options.showFrame = true;
-			options.frameInnerPadding = 4;
-			options.frameOuterPadding = 4;
-			options.templates = [getMarkerTemplate()];
-			options.defaultTemplateName = "MarkerTemplate";
-			options.hasSelectorCheckbox = primitives.common.Enabled.True;
-			options.pageFitMode = primitives.common.PageFitMode.None;
-			options.selectedItems = selectedItems;
-			control = primitives.orgdiagram.Control(document.getElementById("diagram"), options);
-		});
-	</script>
+      options.items = items;
+      options.cursorItem = 0;
+      options.showFrame = true;
+      options.frameInnerPadding = 4;
+      options.frameOuterPadding = 4;
+      options.templates = [getMarkerTemplate()];
+      options.defaultTemplateName = "MarkerTemplate";
+      options.hasSelectorCheckbox = primitives.common.Enabled.True;
+      options.pageFitMode = primitives.common.PageFitMode.None;
+      options.selectedItems = selectedItems;
+      control = primitives.orgdiagram.Control(document.getElementById("basicdiagram"), options);
+    });
+  </script>
 </head>
+
 <body>
-	<div id="diagram" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;"></div>
+  <div id="basicdiagram" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;"></div>
 </body>
-</html>
+
+</html>
diff --git a/screenshots.js b/screenshots.js
@@ -4,6 +4,10 @@ const util = require('util');
 const exec = util.promisify(require('child_process').exec);
 
 var screenshots = [
+  {
+    url: "http://localhost/primitives/samples/javascript.controls/CaseShowFrame.html",
+    imageName: "CaseShowFrame.png"
+  },
   {
     url: "http://localhost/primitives/samples/javascript.controls/CaseLoopsInFamilyChart.html",
     imageName: "CaseLoopsInFamilyChart.png"