### Basic PDFKit Document Setup

Source: https://github.com/basicprimitives/javascript/blob/master/samples/FirstOrganizationalChart.md

Initializes a PDF document and a blob stream for capturing PDF output. This setup is common for generating PDFs in browser environments.

```javascript
const PDFDocument = require('pdfkit');
const blobStream  = require('blob-stream');

// create a document the same way as above
const doc = new PDFDocument;

// pipe the document to a blob
const stream = doc.pipe(blobStream());

// add your content to the document here, as usual

// get a blob when you're done
doc.end();
stream.on('finish', function() {
  // get a blob you can do whatever you like with
  const blob = stream.toBlob('application/pdf');

  // or get a blob URL for display in the browser
  const url = stream.toBlobURL('application/pdf');
  iframe.src = url;
});
```

--------------------------------

### Start Webpack Development Server

Source: https://github.com/basicprimitives/javascript/blob/master/samples/WebpackOrgDiagram.md

Run this command in your project's root directory to start the development web server. It will automatically rebuild your project on changes and provide a local URL to view your application.

```shell
test1>webpack serve
... Project is running at http://localhost:8080/ 
...
```

--------------------------------

### Install Basic Primitives via yarn

Source: https://github.com/basicprimitives/javascript/blob/master/samples/FirstOrganizationalChart.md

Alternatively, use yarn to install the Basic Primitives library. This command achieves the same result as the npm installation.

```shell
yarn add basic primitives
```

--------------------------------

### Install Basic Primitives via npm

Source: https://github.com/basicprimitives/javascript/blob/master/samples/FirstOrganizationalChart.md

Use npm to install the Basic Primitives library. This command adds the necessary packages to your project for using the diagramming component.

```shell
npm install basic primitives
```

--------------------------------

### Initialize npm Package

Source: https://github.com/basicprimitives/javascript/blob/master/samples/WebpackOrgDiagram.md

Creates a package.json file with project metadata and dependencies for a Webpack setup.

```json
{
  "name": "javascript",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "basicprimitives": "^6.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.3",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "description": ""
}
```

--------------------------------

### Download npm Packages

Source: https://github.com/basicprimitives/javascript/blob/master/samples/WebpackOrgDiagram.md

Installs the project dependencies defined in package.json.

```shell
npm update
```

--------------------------------

### Create PDF Document and Pipe to Blob Stream

Source: https://github.com/basicprimitives/javascript/blob/master/samples/pdfkit.plugins/UserItemTemplate.html

Initializes a new PDF document and pipes it to a blob stream for further processing or saving. This is the starting point for PDF generation.

```javascript
var doc = new PDFDocument();
var stream = doc.pipe(blobStream());
```

--------------------------------

### Main JavaScript Entry Point

Source: https://github.com/basicprimitives/javascript/blob/master/samples/WebpackOrgDiagram.md

Sets up the Basic Primitives diagram with configuration options and renders it.

```JavaScript
import { OrgConfig, OrgItemConfig, Enabled, OrgDiagram } from 'basicprimitives';
import('basicprimitives/css/primitives.css');

var photos = {
  a: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAIAAACrV36WAAAAAXNSR0IArs4c6QAAAARn' +
  'QU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGnSURBVGhD7dnBbQJBDAVQk1o2QjlQwKYGzpSwKQfq4IxIC' +
  'RTB9jLZHCJFwWv7/7EiDt6zmX2yPYMHNq01eb7n5flI36JiIXWpbFW2kAwgsdVblS0kA0hs9db/ZWs+vW/Wno9PxPE3dh' +
  'ls6Od+HI1XT1d64Sb8R5utEulwdbA8VY+LZ/kqkfF456pBHxDz5Xxze/p2vsxukBbAshTVOE0PO4B2cUlWKrgUTKsrV0e' +
  'ut3RVU/cm5aKKqPXVbjuIDPtDUh2JImq1+jmjkupIFNFStXadHncWXkecpb3393me4oJZnionXyjLV6W4QFZEleHCWNG+' +
  '0eKggQJiRVV6vhAXwoqrul0AC1H1uuIsTLUyukYH1jBL7WJ8lgq6oqwkVXSQDrLSVEFXjJWoirlCrFRVyBVhJasirgCr6' +
  '5tEv7a5A5jL0tcN7vNl9OVcHqtXRbocVr+Kc9k3H/3qPL69Ise7dh0SsS+2JmtFddgvdy/gGbY7Jdp2GRcyrlu1BfUjxt' +
  'iPRm/lqVbGHOMHnU39zQm0I/UbBLA+GVosJHGVrcoWkgEktnoLydYXkF/LiXG21MwAAAAASUVORK5CYII='
};

var control;
var timer = null;

document.addEventListener('DOMContentLoaded', function () {
    var options = new OrgConfig();

    var items = [
        new OrgItemConfig({
            id: 0,
            parent: null,
            title: "James Smith",
            description: "VP, Public Sector",
            image: photos.a
        }),
        new OrgItemConfig({
            id: 1,
            parent: 0,
            title: "Ted Lucas",
            description: "VP, Human Resources",
            image: photos.a
        }),
        new OrgItemConfig({
            id: 2,
            parent: 0,
            title: "Fritz Stuger",
            description: "Business Solutions, US",
            image: photos.a
        })
    ];

    options.items = items;
    options.cursorItem = 0;
    options.hasSelectorCheckbox = Enabled.True;

    control = OrgDiagram(document.getElementById("basicdiagram"), options);
});
```

--------------------------------

### Traverse Nodes

Source: https://github.com/basicprimitives/javascript/blob/master/apireference/algorithms.md

Traverses all connected nodes starting from the given node. If no start node is provided, traversal begins with the first available node.

```APIDOC
## traverseNodes(thisArg, startNode, onItem)

### Description
Traverses all connected nodes starting from the given node. If no start node is provided, traversal begins with the first available node.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **thisArg** (object) - Optional - Execution context for the callback
- **startNode** (string) - Optional - Optional starting node id
- **onItem** (onNodeCallback) - Required - Callback invoked for each visited node

### Callbacks
#### onNodeCallback(to)
Callback for node iteration functions.

- **to** (string) - The node id visited

Returns: `boolean` - return true to stop traversal early
```

--------------------------------

### Create Project Directory

Source: https://github.com/basicprimitives/javascript/blob/master/samples/WebpackOrgDiagram.md

Initializes a new project folder and navigates into it.

```shell
mkdir test1

cd test1
```

--------------------------------

### zipUp(thisArg, firstNodeId, secondNodeid, onZip)

Source: https://github.com/basicprimitives/javascript/blob/master/apireference/algorithms.md

Iterates hierarchy nodes by pairs starting with given pair of start and second nodes and up to the root of the hierarchy. Breaks iteration when callback function returns true.

```APIDOC
## zipUp(thisArg, firstNodeId, secondNodeid, onZip)

### Description
Iterates hierarchy nodes by pairs starting with given pair of start and second nodes and up to the root of the hierarchy. Breaks iteration when callback function returns true.

### Parameters
#### Path Parameters
- **thisArg** (Object) - Required - The callback function invocation context
- **firstNodeId** (string) - Required - The first node to start iteration
- **secondNodeid** (string) - Required - The second node to start iteration
- **onZip** (onZipUpPairCallback) - Required - Callback function to call for every pair of nodes on the way up in the tree structure

### Callbacks
#### onZipUpPairCallback(firstNodeId, firstParentId, secondNodeid, secondParentId)
Callback function to return pairs of nodes.

Returns: `boolean` - returns true to break the iteration of nodes and exit.

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| `firstNodeId` | string | `` | First node id |
| `firstParentId` | string | `` | Parent id of the first node |
| `secondNodeid` | string | `` | Second node id |
| `secondParentId` | string | `` | Parent id of the second node |
```

--------------------------------

### Initialize and Render Org Diagram

Source: https://github.com/basicprimitives/javascript/blob/master/samples/javascript.controls/CasePageSizeDiagram.html

Sets up the organizational diagram configuration, populates it with items, and renders it. Use this to create a new diagram instance with custom options and data.

```javascript
var control;
var timer = null;
document.addEventListener('DOMContentLoaded', function () {
    var options = new primitives.OrgConfig();
    var items = [
        new primitives.OrgItemConfig({
            id: 0,
            parent: null,
            title: "Title 0",
            description: "Description",
            image: "../images/photos/a.png"
        })
    ];
    var id = 1;
    for (var index = 0; index < 2; index++) {
        items.push(new primitives.OrgItemConfig({
            id: ++id,
            parent: 0,
            title: id.toString() + " Title",
            description: id.toString() + " Description",
            image: "../images/photos/c.png"
        }));
        var parent = id;
        for (var index2 = 0; index2 < 2; index2++) {
            items.push(new primitives.OrgItemConfig({
                id: ++id,
                parent: parent,
                title: id.toString() + " Title",
                description: id.toString() + " Description",
                image: "../images/photos/c.png"
            }));
        }
    }
    options.pageFitMode = primitives.PageFitMode.None;
    options.items = items;
    options.cursorItem = 0;
    options.hasSelectorCheckbox = primitives.Enabled.True;
    control = primitives.OrgDiagram(document.getElementById("basicdiagram"), options);
    window.addEventListener('resize', function (event) {
        onWindowResize();
    });
});
```

--------------------------------

### Initialize PDF Document and Org Diagram

Source: https://github.com/basicprimitives/javascript/blob/master/samples/pdfkit.plugins/ChildrenPlacementType.html

Sets up a new PDF document and initializes an organizational diagram with various configuration options, including item data and rendering templates.

```javascript
var doc = new PDFDocument({ size: [800, 600] });
var stream = doc.pipe(blobStream());
doc.fontSize(25)
.text('Children Placement', 30, 30);
var sampleChart = primitives.OrgDiagramPdfkit({
    leavesPlacementType: primitives.ChildrenPlacementType.Vertical,
    items: [
        /* matrix layout example */
        new primitives.OrgItemConfig({
            id: 1,
            parent: null,
            title: "Matrix Layout",
            childrenPlacementType: primitives.ChildrenPlacementType.Matrix
        }),
        new primitives.OrgItemConfig({
            id: 2,
            parent: 1,
            title: "Child 1"
        }),
        new primitives.OrgItemConfig({
            id: 3,
            parent: 1,
            title: "Child 2"
        }),
        new primitives.OrgItemConfig({
            id: 4,
            parent: 1,
            title: "Child 3"
        }),
        new primitives.OrgItemConfig({
            id: 5,
            parent: 1,
            title: "Child 4"
        }),
        new primitives.OrgItemConfig({
            id: 6,
            parent: 1,
            title: "Child 5"
        }),
        new primitives.OrgItemConfig({
            id: 7,
            parent: 1,
            title: "Child 6"
        }),
        new primitives.OrgItemConfig({
            id: 8,
            parent: 1,
            title: "Child 7"
        }),
        new primitives.OrgItemConfig({
            id: 9,
            parent: 1,
            title: "Child 8"
        }),
        /* vertical layout example */
        new primitives.OrgItemConfig({
            id: 101,
            parent: null,
            title: "Vertical Layout",
            childrenPlacementType: primitives.ChildrenPlacementType.Vertical
        }),
        new primitives.OrgItemConfig({
            id: 102,
            parent: 101,
            title: "Child 1"
        }),
        new primitives.OrgItemConfig({
            id: 103,
            parent: 101,
            title: "Child 2",
            childrenPlacementType: primitives.ChildrenPlacementType.Vertical
        }),
        new primitives.OrgItemConfig({
            id: 104,
            parent: 103,
            title: "Sub Child 3"
        }),
        new primitives.OrgItemConfig({
            id: 105,
            parent: 103,
            title: "Sub Child 4"
        }),
        new primitives.OrgItemConfig({
            id: 106,
            parent: 101,
            title: "Child 5"
        }),
        new primitives.OrgItemConfig({
            id: 107,
            parent: 101,
            title: "Child 6"
        }),
        /* horizontal layout example */
        new primitives.OrgItemConfig({
            id: 201,
            parent: null,
            title: "Horizontal Layout",
            childrenPlacementType: primitives.ChildrenPlacementType.Horizontal
        }),
        new primitives.OrgItemConfig({
            id: 202,
            parent: 201,
            title: "Child 1"
        }),
        new primitives.OrgItemConfig({
            id: 203,
            parent: 201,
            title: "Child 2"
        }),
        new primitives.OrgItemConfig({
            id: 204,
            parent: 201,
            title: "Child 3"
        }),
        new primitives.OrgItemConfig({
            id: 205,
            parent: 204,
            title: "Leaf 1"
        }),
        new primitives.OrgItemConfig({
            id: 206,
            parent: 204,
            title: "Leaf 2"
        }),
        new primitives.OrgItemConfig({
            id: 207,
            parent: 204,
            title: "Leaf 3"
        }),
        new primitives.OrgItemConfig({
            id: 208,
            parent: 9,
            title: "Leaf 4"
        }),
        new primitives.OrgItemConfig({
            id: 209,
            parent: 9,
            title: "Leaf 5"
        }),
        new primitives.OrgItemConfig({
            id: 210,
            parent: 9,
            title: "Leaf 6"
        })
    ],
    cursorItem: null,
    hasSelectorCheckbox: primitives.Enabled.False,
    defaultTemplateName: "info",
    templates: [getContactTemplate()],
    onItemRender: onTemplateRender
});

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);
});
```

--------------------------------

### loopNodes

Source: https://github.com/basicprimitives/javascript/blob/master/apireference/algorithms.md

Iterates over all nodes in the graph, starting from a specified node.

```APIDOC
## loopNodes(thisArg, startNode, onItem)

### Description
Iterates over all nodes in the graph.

### Parameters
#### Path Parameters
- **thisArg** (object) - Required - Execution context for the callback
- **startNode** (string) - Required - The node to start iteration from
- **onItem** (onNodeCallback) - Required - Callback invoked for each node
```

--------------------------------

### getRed

Source: https://github.com/basicprimitives/javascript/blob/master/apireference/functions.md

Gets the red value of a HEX color string.

```APIDOC
## getRed

Gets red value of HEX color string.

Returns: `number` - returns red value of the hex color string.

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | string | `` | Color |
```

--------------------------------

### Initialize PDF Document and Annotations

Source: https://github.com/basicprimitives/javascript/blob/master/samples/pdfkit.plugins/LevelAnnotation.html

Sets up the PDF document, blob stream, and defines annotation configurations for different levels. This code is executed when the DOM is ready.

```javascript
var control;
var timer = null;
var photos = pdfkitsamples.photos;
var PDFDocument = pdfkitsamples.PDFDocument;
var blobStream = pdfkitsamples.blobStream;
var annotations = [
    /* JSON object equivalent to primitives.LevelAnnotationConfig */
    {
        annotationType: primitives.AnnotationType.Level,
        levels: [0],
        title: "Level 0",
        titleColor: primitives.Colors.RoyalBlue,
        offset: new primitives.Thickness(0, 0, 0, -1),
        lineWidth: new primitives.Thickness(0, 0, 0, 1),
        opacity: 0.05,
        borderColor: primitives.Colors.Black,
        fillColor: primitives.Colors.Yellow,
        lineType: primitives.LineType.Dashed
    },
    new primitives.LevelAnnotationConfig({
        annotationType: primitives.AnnotationType.Level,
        levels: [1],
        title: "Level 1",
        titleColor: primitives.Colors.Green,
        offset: new primitives.Thickness(0, 0, 0, -1),
        lineWidth: new primitives.Thickness(0, 0, 0, 1),
        opacity: 0.1,
        borderColor: primitives.Colors.Black,
        fillColor: primitives.Colors.Gray,
        lineType: primitives.LineType.Dotted
    }),
    {
        annotationType: primitives.AnnotationType.Level,
        levels: [2],
        title: "Level 2",
        titleColor: primitives.Colors.Red,
        offset: new primitives.Thickness(0, 0, 0, -1),
        lineWidth: new primitives.Thickness(0, 0, 0, 1),
        opacity: 0.05,
        borderColor: primitives.Colors.Red,
        fillColor: primitives.Colors.Red,
        lineType: primitives.LineType.Solid
    },
];
```

--------------------------------

### getGreen

Source: https://github.com/basicprimitives/javascript/blob/master/apireference/functions.md

Gets the green value of a HEX color string.

```APIDOC
## getGreen

Gets green value of HEX color string.

Returns: `number` - returns green value of the hex color string.

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | string | `` | Color |
```

--------------------------------

### Initialize Basic Organizational Chart

Source: https://github.com/basicprimitives/javascript/blob/master/samples/javascript.controls/CaseFirstOrganizationalChart.html

Use this code to set up a basic organizational chart. It requires the primitives.js library and defines the chart's structure and appearance.

```javascript
var control;
var timer = null;
document.addEventListener('DOMContentLoaded', function () {
    var options = new primitives.OrgConfig();
    var items = [
        new primitives.OrgItemConfig({
            id: 0,
            parent: null,
            title: "James Smith",
            description: "VP, Public Sector",
            image: "../images/photos/a.png"
        }),
        new primitives.OrgItemConfig({
            id: 1,
            parent: 0,
            title: "Ted Lucas",
            description: "VP, Human Resources",
            image: "../images/photos/b.png"
        }),
        new primitives.OrgItemConfig({
            id: 2,
            parent: 0,
            title: "Fritz Stuger",
            description: "Business Solutions, US",
            image: "../images/photos/c.png"
        })
    ];
    options.items = items;
    options.cursorItem = 0;
    options.hasSelectorCheckbox = primitives.Enabled.True;
    control = primitives.OrgDiagram(document.getElementById("basicdiagram"), options);
});
```

--------------------------------

### Initialize and Configure Org Chart Options

Source: https://github.com/basicprimitives/javascript/blob/master/samples/javascript.controls/DemoMutualFinancialOwnership.html

Sets up the initial configuration for the organizational chart, including item data, templates, and event handlers. Customize appearance and behavior through various options.

```javascript
var items = [
  { id: 0, parent: null, title: "CEO", description: "Chief Executive Officer", itemTitleColor: primitives.Colors.RoyalBlue },
  { id: 1, parent: 0, title: "VP Sales", description: "Vice President of Sales", itemTitleColor: primitives.Colors.RoyalBlue },
  { id: 2, parent: 0, title: "VP Engineering", description: "Vice President of Engineering", itemTitleColor: primitives.Colors.RoyalBlue },
  { id: 3, parent: 1, title: "Sales Manager", description: "Sales Manager", itemTitleColor: primitives.Colors.Green },
  { id: 4, parent: 1, title: "Sales Representative", description: "Sales Representative", itemTitleColor: primitives.Colors.Green },
  { id: 5, parent: 2, title: "Engineering Manager", description: "Engineering Manager", itemTitleColor: primitives.Colors.Green },
  { id: 6, parent: 2, title: "Software Engineer", description: "Software Engineer", itemTitleColor: primitives.Colors.Green },
  { id: 7, parent: 5, title: "Lead Engineer", description: "Lead Engineer", itemTitleColor: primitives.Colors.Orange },
  { id: 8, parent: 5, title: "Senior Engineer", description: "Senior Engineer", itemTitleColor: primitives.Colors.Orange },
  { id: 9, parent: 4, title: "Sales Intern", description: "Sales Intern", itemTitleColor: primitives.Colors.LightGreen },
  { id: 10, parent: 6, title: "Junior Engineer", description: "Junior Engineer", itemTitleColor: primitives.Colors.LightGreen },
  { id: 11, parent: 6, title: "Software Engineer", description: "Software Engineer", itemTitleColor: primitives.Colors.LightGreen },
  { id: 12, parent: 3, title: "Sales Associate", description: "Sales Associate", itemTitleColor: primitives.Colors.LightGreen },
  { id: 13, parent: 3, title: "Sales Specialist", description: "Sales Specialist", itemTitleColor: primitives.Colors.LightGreen },
  { id: 14, parent: 10, title: "Intern Engineer", description: "Intern Engineer", itemTitleColor: primitives.Colors.LightSkyBlue },
  { id: 15, parent: 11, title: "Trainee Engineer", description: "Trainee Engineer", itemTitleColor: primitives.Colors.LightSkyBlue },
  { id: 16, parent: 7, title: "Engineer I", description: "Engineer I", itemTitleColor: primitives.Colors.LightSkyBlue },
  { id: 17, parent: 7, title: "Engineer II", description: "Engineer II", itemTitleColor: primitives.Colors.LightSkyBlue },
  { id: 18, parent: 8, title: "Engineer III", description: "Engineer III", itemTitleColor: primitives.Colors.LightSkyBlue },
  { id: 19, parent: 8, title: "Engineer IV", description: "Engineer IV", itemTitleColor: primitives.Colors.LightSkyBlue },
  { id: 20, parent: 16, title: "Junior Developer", description: "Junior Developer", itemTitleColor: primitives.Colors.PaleTurquoise },
  { id: 21, parent: 17, title: "Mid-Level Developer", description: "Mid-Level Developer", itemTitleColor: primitives.Colors.PaleTurquoise },
  { id: 22, parent: 18, title: "Senior Developer", description: "Senior Developer", itemTitleColor: primitives.Colors.PaleTurquoise },
  { id: 23, parent: 19, title: "Lead Developer", description: "Lead Developer", itemTitleColor: primitives.Colors.PaleTurquoise },
  { id: 24, parent: 20, title: "Intern Developer", description: "Intern Developer", itemTitleColor: primitives.Colors.Lavender },
  { id: 25, parent: 21, title: "Associate Developer", description: "Associate Developer", itemTitleColor: primitives.Colors.Lavender },
  { id: 26, parent: 22, title: "Staff Developer", description: "Staff Developer", itemTitleColor: primitives.Colors.Lavender },
  { id: 27, parent: 23, title: "Principal Developer", description: "Principal Developer", itemTitleColor: primitives.Colors.Lavender },
  { id: 28, parent: 24, title: "Junior Staff Developer", description: "Junior Staff Developer", itemTitleColor: primitives.Colors.LightCoral },
  { id: 29, parent: 25, title: "Senior Staff Developer", description: "Senior Staff Developer", itemTitleColor: primitives.Colors.LightCoral },
  { id: 30, parent: 26, title: "Lead Staff Developer", description: "Lead Staff Developer", itemTitleColor: primitives.Colors.LightCoral },
  { id: 31, parent: 27, title: "Principal Staff Developer", description: "Principal Staff Developer", itemTitleColor: primitives.Colors.LightCoral },
  { id: 32, parents: [30, 13], title: "Samsung SDI", label: "Samsung SDI", description: "32, Samsung SDI", itemTitleColor: primitives.Colors.DarkBlue, labels: { "20": "7.2%", "3": "8.0%", "41": "11.0%", "22": "13.1%", "23": "13.1%", "24": "14.7%", "35": "15.2%" } },
  { id: 33, parents: [30, 13], title: "Samsung Techwin", label: "Samsung Techwin", description: "33, Samsung Techwin", itemTitleColor: primitives.Colors.DarkBlue, labels: { "23": "22.6%" } },
  { id: 34, parents: [1, 20, 30, 31], title: "Samsung SDS", label: "Samsung SDS", description: "34, Samsung SDS", itemTitleColor: primitives.Colors.DarkBlue },
  { id: 35, parents: [30, 32], title: "Samsung Display", label: "Samsung Display", description: "35, Samsung Display", itemTitleColor: primitives.Colors.DarkBlue },
  { id: 40, parents: [3], title: "Samsung Welstory", label: "Samsung Welstory", description: "40, Samsung Welstory", itemTitleColor: primitives.Colors.Orange },
  { id: 41, parents: [10, 11, 12, 32, 13], title: "S1 Corporation", label: "S1 Corporation", description: "41, S1 Corporation", itemTitleColor: primitives.Colors.Orange },
  { id: 42, parents: [10, 12, 13, 30], title: "Hotel Shilla", label: "Hotel Shilla", description: "42, Hotel Shilla", itemTitleColor: primitives.Colors.Orange, labels: { "24": "2.2%" } },
  { id: 43, parents: [30, 12, 20], title: "Chell Worldwide", label: "Chell Worldwide", description: "43, Chell Worldwide", itemTitleColor: primitives.Colors.Orange }
];

/* create hash of items */
var index, len;
for (index = 0, len = items.length; index < len; index += 1) {
  var item = items[index];
  treeItems[item.id] = item;
  var labels = item.labels;
  if (labels != null) {
    for (var to in labels) {
      if (labels.hasOwnProperty(to)) {
        annotations[item.id] = annotations[item.id] || [];
        annotations[to] = annotations[to] || [];
        var annotation = new primitives.HighlightPathAnnotationConfig({
          items: [item.id, to],
          color: primitives.Colors.Blue,
          lineWidth: 16,
          opacity: 0.1,
          showArrows: false
        });
        annotations[item.id].push(annotation);
        annotations[to].push(annotation);
      }
    }
  }
}

options.defaultTemplateName = "UnitTemplate";
options.defaultLabelAnnotationTemplate = "LabelAnnotationTemplate";
options.items = items;
options.cursorItem = 1;
options.linesWidth = 1;
options.linesColor = "black";
options.highlightLinesColor = primitives.Colors.Red;
options.highlightLinesWidth = 2;
options.highlightLinesType = primitives.LineType.Solid;
options.cousinsIntervalMultiplier = 1;
options.hasButtons = primitives.Enabled.True;
options.onButtonClick = function (e, data) {
  var message = "User clicked '" + data.name + "' button for item '" + data.context.title + "'.";
  alert(message);
};
options.buttonsPanelSize = 36;
options.onButtonsRender = onButtonsRender;
options.onCursorChanging = onCursorChanging;
options.onCursorChanged = onCursorChanged;
options.onHighlightChanging = onHighlightChanging;
options.onHighlightChanged = onHighlightChanged;
options.onSelectionChanged = onSelectionChanged;
options.normalLevelShift = 20;
options.dotLevelShift = 20;
options.lineLevelShift = 20;
options.normalItemsInterval = 10;
options.dotItemsInterval = 20;
options.lineItemsInterval = 20;
options.templates = [
  getUnitTemplate(),
  getLabelAnnotationTemplate()
];
options.onItemRender = onTemplateRender;
options.pageFitMode = primitives.PageFitMode.FitToPage;
options.hideGrandParentsConnectors = true;
options.arrowsDirection = primitives.GroupByType.Children;
options.showExtraArrows = true;
options.extraArrowsMinimumSpace = 30;

return options;
};
```

--------------------------------

### Using Point, Size, Rect, Thickness, Vector, and Interval

Source: https://context7.com/basicprimitives/javascript/llms.txt

Demonstrates the usage of various geometry utility structures including Point, Size, Rect, Thickness, Vector, and Interval. Ensure these classes are imported from 'basicprimitives'.

```javascript
import { Point, Size, Rect, Thickness, Vector, Interval } from 'basicprimitives';

// ── Point ─────────────────────────────────────────────────────────────────
const p1 = new Point(10, 20);
const p2 = new Point(50, 80);
console.log(p1.distanceTo(p2));            // Euclidean distance
console.log(p1.getCSS('px'));              // { left: '10px', top: '20px' }
p1.scale(2);                               // mutates: (20, 40)

// ── Size ──────────────────────────────────────────────────────────────────
const s = new Size(200, 100);
s.addThickness(new Thickness(5, 5, 5, 5)); // expands to (210, 110)
s.scale(0.5);                              // (105, 55)
console.log(s.isEmpty());                  // false
console.log(s.getCSS());                   // { width: '105px', height: '55px' }

// ── Rect ──────────────────────────────────────────────────────────────────
const r = new Rect(10, 10, 200, 100);
console.log(r.right());                    // 210
console.log(r.bottom());                   // 110
console.log(r.centerPoint());             // Point(110, 60)
console.log(r.contains(new Point(50, 50)));// true
r.offset(10);                              // expand all sides by 10: Rect(0,0,220,120)
r.translate(5, 5);                         // move: Rect(5, 5, 220, 120)
console.log(r.getCSS());                   // { left:'5px', top:'5px', width:'220px', height:'120px' }

// ── Thickness (padding/margin) ────────────────────────────────────────────
const t = new Thickness(5, 10, 5, 10);    // left, top, right, bottom
console.log(t.toString('px'));             // '10px 5px 10px 5px' (CSS padding order)

// ── Interval ─────────────────────────────────────────────────────────────
const iv = new Interval(20, 80);
console.log(iv.width());                  // 60
console.log(iv.overlaps(new Interval(60, 100)));  // true

// ── Vector ───────────────────────────────────────────────────────────────
const v1 = new Vector(new Point(0, 0), new Point(100, 100));
const v2 = new Vector(new Point(0, 100), new Point(100, 0));
console.log(v1.intersect(v2));            // true
console.log(v1.getIntersectionPoint(v2, true, 1)); // Point(50, 50)
console.log(v1.length());                 // ~141.42
```

--------------------------------

### loopFromItem

Source: https://github.com/basicprimitives/javascript/blob/master/apireference/algorithms.md

Iterates through elements of a level starting from a specified item, executing a callback for each element.

```APIDOC
## loopFromItem(thisArg, itemid, isLeft, onItem, level)

### Description
Loops level elements starting with the given item.

### Parameters
#### Path Parameters
- `thisArg` (Object) - Required - The callback function invocation context
- `itemid` (string) - Required - Starting element id
- `isLeft` (boolean) - Required - Direction to loop (true for left, false for right)
- `onItem` (function) - Required - Callback function to execute for each item
- `level` (number) - Required - The level index to loop through
```

--------------------------------

### dfsLoop

Source: https://github.com/basicprimitives/javascript/blob/master/apireference/algorithms.md

Performs a depth-first traversal starting at a node. Edge usability is determined by the onEdge callback.

```APIDOC
## dfsLoop(thisArg, startNode, onEdge, onNode)

### Description
Performs a depth-first traversal starting at a node. Edge usability is determined by the onEdge callback.

### Parameters
#### Path Parameters
- **thisArg** (object) - Required - Execution context
- **startNode** (string) - Required - The start node id
- **onEdge** (onPathEdgeCallback) - Required - Callback deciding edge usability
- **onNode** (onNodeCallback) - Required - Callback invoked for each newly visited node
```

--------------------------------

### Handle Window Resize Event with Throttling

Source: https://github.com/basicprimitives/javascript/blob/master/samples/DiagramSizing.md

This example demonstrates how to handle window resize events and use a Timer to throttle excessive updates, ensuring the application remains responsive. It is useful for dynamically adjusting diagram visualizations based on screen size changes.

```JavaScript
var timer = null;

function onWindowResize(event) {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        var options = new primitives.ZWGraphOptions();
        // ... update options based on new window size ...
        var graph = new primitives.ZWGraph(document.getElementById('graph'), options);
        graph.render();
    }, 250);
}

window.addEventListener('resize', onWindowResize);
```

--------------------------------

### Create PDF Document and Draw User Item Template

Source: https://github.com/basicprimitives/javascript/blob/master/samples/pdfkit.plugins/UserItemTemplateWithShapes.html

Initializes a PDF document, sets up a blob stream for output, and draws an organizational diagram with custom item templates and shapes. The generated PDF is then displayed in an iframe.

```javascript
var control;
var timer = null;
var photos = pdfkitsamples.photos;
var PDFDocument = pdfkitsamples.PDFDocument;
var PdfGraphics = pdfkitsamples.PdfGraphics;
var blobStream = pdfkitsamples.blobStream;
var Marker = pdfkitsamples.Marker;
var PolylinesBuffer = pdfkitsamples.PolylinesBuffer;
var PaletteItem = pdfkitsamples.PaletteItem;

document.addEventListener('DOMContentLoaded', function () {
    // create a document and pipe to a blob
    // create a document and pipe to a blob
    var doc = new PDFDocument();
    var stream = doc.pipe(blobStream());

    doc.fontSize(25)
        .text('User Item Template With Shapes', 30, 30);

    var sampleChart = primitives.OrgDiagramPdfkit({
        items: [
            new primitives.OrgItemConfig({
                id: 0, parent: null, title: "James Smith", description: "VP, Public Sector", templateName: "contactTemplate", shapeType: primitives.ShapeType.Oval, fillColor: primitives.Colors.Magenta, groupTitle: "Oval"
            }),
            new primitives.OrgItemConfig({
                id: 1, parent: 0, title: "Ted Lucas", description: "VP, Human Resources", templateName: "contactTemplate", shapeType: primitives.ShapeType.Rhombus, fillColor: primitives.Colors.Magenta, groupTitle: "Rhombus"
            }),
            new primitives.OrgItemConfig({
                id: 2, parent: 0, title: "Fritz Stuger", description: "Business Solutions, US", templateName: "contactTemplate", shapeType: primitives.ShapeType.Circle, fillColor: primitives.Colors.Magenta, groupTitle: "Circle"
            })
        ],
        cursorItem: null,
        hasSelectorCheckbox: primitives.Enabled.False,
        templates: [getContactTemplate()],
        onItemRender: onTemplateRender
    });

    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);
    });
});
```

--------------------------------

### loopLevelsFromItem

Source: https://github.com/basicprimitives/javascript/blob/master/apireference/algorithms.md

Loops through levels starting from a specified item. It can iterate forwards or backwards depending on the `isBelow` flag.

```APIDOC
## loopLevelsFromItem(thisArg, itemid, isBelow, onItem)

### Description
Loops levels starting with the given element end level. Element may occupy multiple levels, so this method starts level iteration from next level after or before item levels.

### Parameters
#### Path Parameters
- **thisArg** (Object) - Required - The callback function invocation context
- **itemid** (string) - Required - Element id
- **isBelow** (boolean) - Required - If true then method loops levels backward
- **onItem** (onTreeLevelCallback) - Required - Callback function to call for every level

### Callbacks
#### onTreeLevelCallback(levelIndex, level)
Callback function for iteration of levels

Returns: `boolean` - returns true to break iteration process.

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| `levelIndex` | number | `` | Level index |
| `level` | object | `` | Context object |
```

--------------------------------

### getMinimumWeightGrowthSequence

Source: https://github.com/basicprimitives/javascript/blob/master/apireference/algorithms.md

Get minimum weight graph growth sequence. The sequence of the traversing order of the graph nodes.

```APIDOC
## getMinimumWeightGrowthSequence(thisArg, startNode, onEdgeWeight, onItem)

### Description
Get minimum weight graph growth sequence. The sequence of the traversing order of the graph nodes.

### Parameters
#### Path Parameters
- **thisArg** (object) - Required - The callback function invocation context
- **startNode** (string) - Optional - The optional start node id
- **onEdgeWeight** (getGraphEdgeWeightCallback) - Required - Callback function to get weight of an edge.
- **onItem** (onNodeCallback) - Required - A callback function to be called for every node of the growth sequence
```

--------------------------------

### Configure Diagram Options

Source: https://github.com/basicprimitives/javascript/blob/master/samples/javascript.controls/TestProcessingDiagram.html

Sets up the main configuration options for a diagram, including item templates, rendering callbacks, and selection behavior.

```javascript
function getOptions() {
    var options = new primitives.famdiagram.Config();
    options.hasButtons = primitives.HasButtonsType.Wrap;
    options.pageFitMode = primitives.PageFitMode.FitToPage;
    options.linesWidth = 1;
    options.linesColor = "black";
    options.normalLevelShift = 20;
    options.dotLevelShift = 20;
    options.lineLevelShift = 20;
    options.normalItemsInterval = 5;
    options.dotItemsInterval = 10;
    options.lineItemsInterval = 10;
    options.templates.push(getUnitTemplate());
    options.templates.push(getCalloutUnitTemplate());
    options.defaultTemplateName = "UnitTemplate";
    options.defaultCalloutTemplateName = "CalloutUnitTemplate";
    options.onItemRender = onTemplateRender;
    options.arrowsDirection = primitives.GroupByType.Children;
    options.selectCheckBoxLabel = "Pinned";
    options.selectionPathMode = primitives.SelectionPathMode.None;
    options.onCursorChanging = onCursorChanging;
    options.groupByType = primitives.GroupByType.Parents;
    return options;
}
```

--------------------------------

### Get Unit Template Configuration

Source: https://github.com/basicprimitives/javascript/blob/master/samples/javascript.controls/TestProcessingDiagram.html

Defines the structure and properties for a 'UnitTemplate', used for rendering standard items in the diagram.

```javascript
function getUnitTemplate() {
    var result = new primitives.TemplateConfig();
    result.name = "UnitTemplate";
    result.itemSize = new primitives.Size(164, 40);
    result.minimizedItemSize = new primitives.Size(8, 8);
    result.minimizedItemCornerRadius = 4;
    result.minimizedItemLineWidth = 1;
    result.minimizedItemLineType = primitives.LineType.Solid;
    result.minimizedItemBorderColor = null;
    result.minimizedItemFillColor = null;
    result.minimizedItemOpacity = 0.7;
    result.itemTemplate = ["div", {"style": {width: result.itemSize.width + "px", height: result.itemSize.height + "px"}, "class": ["bp-item", "bp-corner-all", "bt-item-frame"]}, ["div", {"name": "titleBackground", "class": ["bp-item", "bp-corner-all", "bp-title-frame"], "style": {top: "2px", left: "2px", width: "160px", height: "4px"}}], ["div", {"name": "title", "class": "bp-item", "style": {top: "8px", left: "2px", width: "160px", height: "30px", fontSize: "10px"}}]];
    return result;
}
```

--------------------------------

### Initialize and Render Family Chart

Source: https://github.com/basicprimitives/javascript/blob/master/samples/javascript.controls/CaseHighlightTemplateFamilyChart.html

Sets up the family chart configuration, defines items with their properties, and initializes the diagram. Use this to create a basic family chart with custom item data.

```javascript
var control;
document.addEventListener('DOMContentLoaded', function () {
    var options = new primitives.FamConfig();
    var items = [
        new primitives.FamItemConfig({
            id: 1,
            title: "James Smith",
            description: "VP, Public Sector",
            image: "../images/photos/a.png",
            highlightColor: "red",
            badge: '1'
        }),
        new primitives.FamItemConfig({
            id: 2,
            title: "Bruce Clift",
            description: "VP, Private Sector",
            image: "../images/photos/b.png",
            highlightColor: "blue",
            badge: '2'
        }),
        new primitives.FamItemConfig({
            id: 3,
            parents: [1, 2],
            title: "Ted Lucas",
            description: "VP, Human Resources",
            image: "../images/photos/c.png",
            highlightColor: "green",
            badge: '3'
        }),
        new primitives.FamItemConfig({
            id: 4,
            parents: [1, 2],
            title: "Fritz Stuger",
            description: "Business Solutions, US",
            image: "../images/photos/d.png",
            highlightColor: "magenta",
            badge: '4'
        })
    ];
    options.items = items;
    options.cursorItem = 1;
    options.highlightItem = 1;
    options.templates = [getNoteTemplate()];
    options.onHighlightRender = onHighlightRender;
    options.defaultTemplateName = "BadgeTemplate";
    options.normalItemsInterval = 20;
    control = primitives.FamDiagram(document.getElementById('basicdiagram'), options);
});
```